Skip to content

Commit

Permalink
feat: update to use CSS variables with fallback #134
Browse files Browse the repository at this point in the history 
This commit updates all uses** of Sass variables to use CSS custom
properties with a Sass variable as a fallback. This will allow WCSS to
be used in themed environments and the themed token will pass into WCSS.
If the toke is not updated and the token is simply not available, the
Sass variable's value from the last processed version will take it's
place.

**Some calc functions that us the `#{}` syntax is still left to only use
Sass variables. This to keep the code simplified.

Changes to be committed:
modified:   src/_core.scss
modified:   src/_essentials.scss
modified:   src/_fonts.scss
modified:   src/_grids.scss
modified:   src/_headings.scss
modified:   src/_normalize.scss
modified:   src/componentSupport/_containedButtons.scss
modified:   src/componentSupport/_table.scss
modified:   src/componentSupport/_tablist.scss
modified:   src/elementDemoStyles/demoWrapper.scss
modified:   src/elementDemoStyles/elementDemoStyles.scss
modified:   src/utilityClasses/_fontStyles.scss
modified:   src/utilityClasses/_listProperties.scss
  • Loading branch information
@blackfalcon
blackfalcon committed Sep 15, 2023
1 parent 6a1ade7 commit 2eae24f
Show file tree
Hide file tree
Showing 13 changed files with 127 additions and 123 deletions.
8 changes: 4 additions & 4 deletions src/_core.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ $focus-visible: null !default;

/// Global selector to address box-model and default `:focus` pseudo elements.
///
/// Global media setting for [a11y support of reduced-motion](https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#taking-it-to-code). By setting the durations to almost 0, we prevent animation from playing for those with motion sensitivities without affecting transition or animation events (e.g. transitionend).
/// Global media setting for [a11y support of reduced-motion](https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#taking-it-to-code). By setting the durations to almost 0, we prevent animation from playing for those with motion sensitivities without affecting transition or animation events (e.g. transitioned).
///
/// [Manage](/#scope-prefix-variable) `$scope` option.
/// @group core
Expand Down Expand Up @@ -44,7 +44,7 @@ $focus-visible: null !default;
// if $focus-visible is true, override the default focus-visible outline
@if $focus-visible {
&:focus-visible {
outline: 2px solid var(--ds-color-ui-default-default);
outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
}
} @else {
&:focus-visible {
Expand All @@ -55,7 +55,7 @@ $focus-visible: null !default;
// if $focus-visible is true, override the default focus-visible outline
@if $focus-visible {
&:focus-visible {
outline: 2px solid var(--ds-color-ui-default-default);
outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
}
} @else {
&:focus-visible {
Expand All @@ -66,7 +66,7 @@ $focus-visible: null !default;
// if $focus is true, override the default focus outline
@if $focus {
&:focus {
outline: 2px solid var(--ds-color-ui-default-default);
outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
}
}
}
Expand Down
32 changes: 16 additions & 16 deletions src/_essentials.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
#{$sym}#{$prefix}html#{$scope} {
box-sizing: border-box;

font-size: $ds-text-body-size-default;
font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
Expand Down Expand Up @@ -56,13 +56,13 @@
#{$scope}.#{$prefix}baseType {
margin: 0;

color: $ds-color-text-primary-default;
color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);

font-family: $ds-font-family-default;
font-family: var(--ds-font-family-default, $ds-font-family-default);
font-variant-ligatures: no-common-ligatures;
font-size: $ds-text-body-size-default;
font-weight: $ds-text-body-default-weight;
line-height: $ds-text-body-height-default;
font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
font-weight: var(--ds-text-body-default-weight, $ds-text-body-default-weight);
line-height: var(--ds-text-body-height-default, $ds-text-body-height-default);
}

/// Sets standard `margin` for all paragraph style content
Expand All @@ -89,7 +89,7 @@
#{$scope}.#{$prefix}baseParagraph {
margin: 0 0 1rem;

line-height: $ds-text-body-height-default;
line-height: var(--ds-text-body-height-default, $ds-text-body-height-default);

.#{$prefix}hyperlink {
text-decoration: underline;
Expand Down Expand Up @@ -123,10 +123,10 @@
#{$scope}.#{$prefix}hyperlink {
text-decoration: underline;

color: $ds-color-ui-default-default;
color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);

&:visited {
color: $ds-color-ui-default-default;
color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
}

&--nav {
Expand All @@ -142,24 +142,24 @@
}

&--ondark {
color: $ds-color-ui-default-inverse;
color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);

&:not(.is-touching) {
&:hover {
color: $ds-color-ui-hover-inverse;
color: var(--ds-color-ui-hover-inverse, $ds-color-ui-hover-inverse);
}
}

&:visited {
color: $ds-color-ui-default-inverse;
color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);
}
}

&:not(.is-touching) {
&:hover {
text-decoration: none;

color: $ds-color-ui-hover-default;
color: var(--ds-color-ui-hover-default, $ds-color-ui-hover-default);
}
}
}
Expand Down Expand Up @@ -206,8 +206,8 @@
///
#{$scope}#{$sym}#{$prefix}small,
#{$scope}.#{$prefix}type--small {
font-size: $ds-text-body-size-xs;
line-height: $ds-text-body-height-xs;
font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
line-height: var(--ds-text-body-height-xs, $ds-text-body-height-xs);
}

$paragraph: null !default; /* stylelint-disable-line scss/dollar-variable-first-in-block */
Expand Down Expand Up @@ -238,7 +238,7 @@ $paragraph: null !default; /* stylelint-disable-line scss/dollar-variable-first-
@if $paragraph {
margin: 0 0 1rem;

line-height: $ds-text-body-height-default;
line-height: var(--ds-text-body-height-default, $ds-text-body-height-default);
}
}

Expand Down
12 changes: 6 additions & 6 deletions src/_fonts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@

// Auro rule
@font-face {
font-family: $ds-asset-font-circular-family-name;
font-weight: $ds-text-heading-display-weight;
font-family: var(--$ds-asset-font-circular-family-name, $ds-asset-font-circular-family-name);
font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight);
font-style: normal;

font-display: fallback;
Expand All @@ -27,8 +27,8 @@
/// @example scss - import src file
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/fonts";
@font-face {
font-family: $ds-asset-font-circular-family-name;
font-weight: $ds-text-heading-medium-weight;
font-family: var(--$ds-asset-font-circular-family-name, $ds-asset-font-circular-family-name);
font-weight: var(--ds-text-heading-medium-weight, $ds-text-heading-medium-weight);
font-style: normal;

font-display: fallback;
Expand All @@ -40,8 +40,8 @@
/// @example scss - import src file
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/fonts";
@font-face {
font-family: $ds-asset-font-circular-family-name;
font-weight: $ds-text-body-default-weight;
font-family: var(--$ds-asset-font-circular-family-name, $ds-asset-font-circular-family-name);
font-weight: var(ds-text-body-default-weight, $ds-text-body-default-weight);
font-style: normal;

font-display: fallback;
Expand Down
32 changes: 16 additions & 16 deletions src/_grids.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

// ---------------------------------------------------------------------

// sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixess
// sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixes
@import 'libSupport/manageScope';

$fixed-nav-width: 280px;
Expand All @@ -23,7 +23,7 @@ $fixed-anchor-width: 168px;
position: sticky;
top: 0;
max-height: 100vh;
padding-top: $ds-grid-margin-xl;
padding-top: var(--ds-grid-margin-xl, $ds-grid-margin-xl);
@content;
}
}
Expand Down Expand Up @@ -87,16 +87,16 @@ $fixed-anchor-width: 168px;
@mixin grid_gutter($gutter) {
gap: $gutter;
@include auro_grid-breakpoint--sm {
gap: $ds-grid-gutter-sm;
gap: var(--ds-grid-gutter-sm, $ds-grid-gutter-sm);
}
@include auro_grid-breakpoint--md {
gap: $ds-grid-gutter-md;
gap: var(--ds-grid-gutter-md, $ds-grid-gutter-md);
}
@include auro_grid-breakpoint--lg {
gap: $ds-grid-gutter-lg;
gap: var(--ds-grid-gutter-lg, $ds-grid-gutter-lg);
}
@include auro_grid-breakpoint--xl {
gap: $ds-grid-gutter-xl;
gap: var(--ds-grid-gutter-xl, $ds-grid-gutter-xl);
}
}

Expand Down Expand Up @@ -157,7 +157,7 @@ $fixed-anchor-width: 168px;
}

@include auro_grid-breakpoint--md {
grid-template-columns: $fixed-nav-width auto;
grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto;
}
}

Expand All @@ -170,7 +170,7 @@ $fixed-anchor-width: 168px;

@include auro_grid-breakpoint--md {
grid-template-areas: "col1 col2";
grid-template-columns: auto $fixed-anchor-width;
grid-template-columns: auto var(--fixed-nav-width, $fixed-nav-width);
}

}
Expand Down Expand Up @@ -275,7 +275,7 @@ $fixed-anchor-width: 168px;
}
@include auro_grid-breakpoint--md {
@include grid_padding($ds-grid-margin-md);
grid-template-columns: auto $fixed-anchor-width;
grid-template-columns: auto var(--fixed-anchor-width, $fixed-anchor-width);
grid-template-areas:
"breadcrumbs breadcrumbs"
"main anchornav";
Expand All @@ -293,7 +293,7 @@ $fixed-anchor-width: 168px;
.main {
grid-area: main;
* {
scroll-margin-top: $ds-grid-margin-md;
scroll-margin-top: var(--ds-grid-margin-md, $ds-grid-margin-md);
}
}
.anchornav {
Expand Down Expand Up @@ -334,7 +334,7 @@ $fixed-anchor-width: 168px;

@include auro_grid-breakpoint--md {
@include grid_padding($ds-grid-margin-md);
grid-template-columns: $fixed-nav-width auto;
grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto;
grid-template-areas:
"breadcrumbs breadcrumbs"
"sidenav main";
Expand All @@ -358,7 +358,7 @@ $fixed-anchor-width: 168px;

.sidenav {
grid-area: sidenav;
background-color: $ds-color-base-white;
background-color: var(--ds-color-base-white, $ds-color-base-white);
@include grid_padding($ds-grid-margin-xs);

@include auro_grid-breakpoint--md {
Expand All @@ -374,7 +374,7 @@ $fixed-anchor-width: 168px;
@include grid_padding(0);
}
* {
scroll-margin-top: $ds-grid-margin-md;
scroll-margin-top: var(--ds-grid-margin-md, $ds-grid-margin-md);
}
}
}
Expand Down Expand Up @@ -412,7 +412,7 @@ $fixed-anchor-width: 168px;

@include auro_grid-breakpoint--md {
@include grid_padding($ds-grid-margin-md);
grid-template-columns: $fixed-nav-width auto $fixed-anchor-width;
grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto var(--fixed-anchor-width, $fixed-anchor-width);
grid-template-areas:
"breadcrumbs breadcrumbs breadcrumbs"
"sidenav main anchornav";
Expand All @@ -437,7 +437,7 @@ $fixed-anchor-width: 168px;
.sidenav {
grid-area: sidenav;
z-index: 1;
background-color: $ds-color-base-white;
background-color: var(--ds-color-base-white, $ds-color-base-white);
@include grid_padding($ds-grid-margin-xs);
@include grid-stickycolumn--xs();

Expand All @@ -455,7 +455,7 @@ $fixed-anchor-width: 168px;
@include grid_padding(0);
}
* {
scroll-margin-top: $ds-grid-margin-md;
scroll-margin-top: var(--ds-grid-margin-md, $ds-grid-margin-md);
}
}

Expand Down
Loading

0 comments on commit 2eae24f

Please sign in to comment.