diff options
author | Mark Otto <markdotto@gmail.com> | 2021-07-19 06:38:30 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2021-08-04 03:06:06 +0300 |
commit | 4d7911a27bf9591c1f4dee53fe0b1f053646d0fd (patch) | |
tree | 90f81f56db93bcd7a2857f0d0d3c547a6d71d4ab /scss | |
parent | e72916e5b741b07b94b12b3707129e868811bdbb (diff) |
Add and document additional :root CSS variables
- Adds grayscale colors
- Adds root and body variables
Note that some Sass variables default to `null`, so as we generate and use the CSS variable, we'll be potentially adding some lines of code.
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_reboot.scss | 20 | ||||
-rw-r--r-- | scss/_root.scss | 33 |
2 files changed, 43 insertions, 10 deletions
diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 3520469883..80bfffb6e6 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -26,7 +26,9 @@ // null by default, thus nothing is generated. :root { - font-size: $font-size-root; + @if $font-size-root != null { + font-size: var(--#{$variable-prefix}-root-font-size); + } @if $enable-smooth-scroll { @media (prefers-reduced-motion: no-preference) { @@ -43,18 +45,20 @@ // 3. Prevent adjustments of font size after orientation changes in iOS. // 4. Change the default tap highlight to be completely transparent in iOS. +// scss-docs-start reboot-body-rules body { margin: 0; // 1 - font-family: $font-family-base; - @include font-size($font-size-base); - font-weight: $font-weight-base; - line-height: $line-height-base; - color: $body-color; - text-align: $body-text-align; - background-color: $body-bg; // 2 + font-family: var(--#{$variable-prefix}body-font-family); + @include font-size(var(--#{$variable-prefix}body-font-size)); + font-weight: var(--#{$variable-prefix}body-font-weight); + line-height: var(--#{$variable-prefix}body-line-height); + color: var(--#{$variable-prefix}body-color); + text-align: var(--#{$variable-prefix}body-text-align); + background-color: var(--#{$variable-prefix}body-bg); // 2 -webkit-text-size-adjust: 100%; // 3 -webkit-tap-highlight-color: rgba($black, 0); // 4 } +// scss-docs-end reboot-body-rules // Content grouping diff --git a/scss/_root.scss b/scss/_root.scss index 95c7739011..189b2b3bbe 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -1,9 +1,18 @@ :root { - // Custom variable values only support SassScript inside `#{}`. + // Note: Custom variable values only support SassScript inside `#{}`. + + // Colors + // + // Generate palettes for full colors, grays, and theme colors. + @each $color, $value in $colors { --#{$variable-prefix}#{$color}: #{$value}; } + @each $color, $value in $grays { + --#{$variable-prefix}gray-#{$color}: #{$value}; + } + @each $color, $value in $theme-colors { --#{$variable-prefix}#{$color}: #{$value}; } @@ -16,9 +25,29 @@ --#{$variable-prefix}black-rgb: #{to-rgb($black)}; --#{$variable-prefix}body-rgb: #{to-rgb($body-color)}; - // Use `inspect` for lists so that quoted items keep the quotes. + // Fonts + + // Note: Use `inspect` for lists so that quoted items keep the quotes. // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)}; --#{$variable-prefix}gradient: #{$gradient}; + + // Root and body + // stylelint-disable custom-property-empty-line-before + // scss-docs-start root-body-variables + @if $font-size-root != null { + --#{$variable-prefix}root-font-size: #{$font-size-root}; + } + --#{$variable-prefix}body-font-family: #{$font-family-base}; + --#{$variable-prefix}body-font-size: #{$font-size-base}; + --#{$variable-prefix}body-font-weight: #{$font-weight-base}; + --#{$variable-prefix}body-line-height: #{$line-height-base}; + --#{$variable-prefix}body-color: #{$body-color}; + @if $body-text-align != null { + --#{$variable-prefix}body-text-align: #{$body-text-align}; + } + --#{$variable-prefix}body-bg: #{$body-bg}; + // scss-docs-end root-body-variables + // stylelint-enable custom-property-empty-line-before } |