diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index ba55510..e6d7b1a 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -48,13 +48,13 @@ $accordion_icon_size: var(--size-xl); cursor: pointer; outline: inherit; display: flex; - color: var(--colors-text-body); + color: var(--color-text-body); font-size: var(--font-size-small); gap: var(--spacing-sm); align-items: center; .accordion__icon { - fill: var(--colors-text-body); + fill: var(--color-text-body); height: var(--size-lg); width: var(--size-lg); } @@ -107,7 +107,7 @@ $accordion_icon_size: var(--size-xl); width: $accordion_icon_size; fill: var(--accordion-color-header); - [aria-expanded='true'] > & { + [aria-expanded='true']>& { transform: rotate(180deg); } } @@ -124,4 +124,4 @@ $accordion_icon_size: var(--size-xl); } } -/* stylelint-enable no-descending-specificity */ +/* stylelint-enable no-descending-specificity */ \ No newline at end of file diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index b1a6390..8bacb18 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -26,7 +26,7 @@ .card__subheading { @include heading-medium($font-size: var(--font-size-small)); - color: var(--colors-grays-500); + color: var(--color-grays-500); margin: 0 0 var(--spacing-md); line-height: var(--line-heights-tight); text-transform: uppercase; @@ -40,4 +40,4 @@ // @include button-base; // @include button-color-primary; // @include button-medium; -} +} \ No newline at end of file diff --git a/src/components/docs/examples/_home.scss b/src/components/docs/examples/_home.scss index 02a932f..996bb33 100644 --- a/src/components/docs/examples/_home.scss +++ b/src/components/docs/examples/_home.scss @@ -3,7 +3,7 @@ .example { display: flex; flex-flow: column nowrap; - background-color: var(--colors-white); + background-color: var(--color-white); padding: 0 !important; // max-width: var(--max-width); margin: 0 auto; @@ -21,14 +21,14 @@ } .logo-text { - fill: var(--colors-text-body); + fill: var(--color-text-body); } .logo-mark { - fill: var(--colors-primary-darker); + fill: var(--color-primary-darker); } - .logo + nav { + .logo+nav { margin-right: var(--spacing-xl); } @@ -36,7 +36,7 @@ display: flex; flex-flow: column nowrap; justify-content: center; - color: var(--colors-white); + color: var(--color-white); aspect-ratio: 16/7; background-size: cover; text-align: center; @@ -46,7 +46,7 @@ &::after { content: ''; position: absolute; - background: var(--colors-primary-dark); + background: var(--color-primary-dark); top: 0; left: 0; bottom: 0; @@ -55,7 +55,7 @@ opacity: 0.75; } - > * { + >* { z-index: 10; position: relative; } @@ -98,7 +98,7 @@ } .celebrating { - background: var(--colors-primary-lighter); + background: var(--color-primary-lighter); text-align: center; padding: var(--spacing-xxl) var(--spacing-xl); @@ -120,8 +120,8 @@ } .footer { - background: var(--colors-primary-darker); - color: var(--colors-white); + background: var(--color-primary-darker); + color: var(--color-white); padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xxl); margin-top: auto; display: flex; @@ -137,11 +137,11 @@ } .logo-text { - fill: var(--colors-white); + fill: var(--color-white); } .logo-mark { - fill: var(--colors-primary-lighter); + fill: var(--color-primary-lighter); } .social-menu--footer { @@ -150,11 +150,11 @@ } .social-menu--footer .social-menu__link { - color: var(--colors-primary-lighter); + color: var(--color-primary-lighter); font-size: var(--font-size-display); &:hover { - color: var(--colors-primary-light); + color: var(--color-primary-light); } } @@ -168,7 +168,7 @@ } .footer-h3 { - color: var(--colors-primary-lighter); + color: var(--color-primary-lighter); font-size: var(--font-size-body); } @@ -186,4 +186,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/components/docs/examples/_program.scss b/src/components/docs/examples/_program.scss index e03440b..6312e6f 100644 --- a/src/components/docs/examples/_program.scss +++ b/src/components/docs/examples/_program.scss @@ -1,6 +1,6 @@ .example { .dynamic { - background: var(--colors-primary-lighter); + background: var(--color-primary-lighter); text-align: center; padding: var(--spacing-xxl) var(--spacing-xl); @@ -32,4 +32,4 @@ max-width: 1000px; margin: var(--spacing-xxl) auto 0; } -} +} \ No newline at end of file diff --git a/src/components/docs/examples/home.stories.js b/src/components/docs/examples/home.stories.js index 2831fdf..b471722 100644 --- a/src/components/docs/examples/home.stories.js +++ b/src/components/docs/examples/home.stories.js @@ -21,7 +21,7 @@ export default { title: 'Pages/Home', decorators: [ (story) => - `
${story()}
`, + `
${story()}
`, ], }; diff --git a/src/components/docs/examples/program.stories.js b/src/components/docs/examples/program.stories.js index a3b7f1d..45a83ad 100644 --- a/src/components/docs/examples/program.stories.js +++ b/src/components/docs/examples/program.stories.js @@ -15,7 +15,7 @@ // title: 'Pages/Program', // decorators: [ // (story) => -// `
${story()}
`, +// `
${story()}
`, // ], // }; diff --git a/src/components/forms/select/_select.scss b/src/components/forms/select/_select.scss index 57d4265..ae4317a 100644 --- a/src/components/forms/select/_select.scss +++ b/src/components/forms/select/_select.scss @@ -12,7 +12,7 @@ &::after { border-left: 5px solid transparent; border-right: 5px solid transparent; - border-top: 9px solid var(--colors-text-body); + border-top: 9px solid var(--color-text-body); content: ' '; position: absolute; top: 42%; @@ -47,8 +47,8 @@ } } -@supports (-webkit-appearance: none) or (appearance: none) or - ((-moz-appearance: none) and (mask-type: alpha)) { +@supports (-webkit-appearance: none) or (appearance: none) or ((-moz-appearance: none) and (mask-type: alpha)) { + /* Show custom arrow */ .form-item__dropdown::after { display: block; @@ -78,4 +78,4 @@ border-radius: 0; } } -} +} \ No newline at end of file diff --git a/src/components/forms/textfields/_textfields.scss b/src/components/forms/textfields/_textfields.scss index 6ff60b3..a000ea0 100644 --- a/src/components/forms/textfields/_textfields.scss +++ b/src/components/forms/textfields/_textfields.scss @@ -1,5 +1,5 @@ .form-item { - color: var(--colors-text-body); + color: var(--color-text-body); margin-bottom: 1em; @include clearfix; @@ -59,7 +59,7 @@ legend { } .form-item--warning { - --input-color-label: var(--colors-warning-default); - --input-border-color: var(--colors-warning-default); - --input-color-help-text: var(--colors-warning-default); -} + --input-color-label: var(--color-warning-default); + --input-border-color: var(--color-warning-default); + --input-color-help-text: var(--color-warning-default); +} \ No newline at end of file diff --git a/src/components/storybook-styles/storybook.scss b/src/components/storybook-styles/storybook.scss index 33e45a2..801a531 100644 --- a/src/components/storybook-styles/storybook.scss +++ b/src/components/storybook-styles/storybook.scss @@ -12,13 +12,13 @@ } .sb-show-main { - background: var(--colors-sb-background); - // color: var(--colors-sb-text-body); + background: var(--color-sb-background); + // color: var(--color-sb-text-body); font-family: var(--font-family-body), serif !important; } .sb-title { - color: var(--colors-sb-text-heading); + color: var(--color-sb-text-heading); text-transform: uppercase; font-size: var(--font-size-hero); margin: 0 0 var(--spacing-xxl); @@ -31,7 +31,7 @@ position: absolute; left: 0; bottom: calc(-1 * var(--spacing-lg)); - border-bottom: 10px solid var(--colors-sb-text-heading); + border-bottom: 10px solid var(--color-sb-text-heading); width: 100px; } } @@ -43,7 +43,7 @@ margin: var(--spacing-xxl) 0 var(--spacing-md); } -#root > div { +#root>div { padding: var(--spacing-xl); } @@ -123,4 +123,4 @@ border-radius: var(--radius-lg); width: max-content; padding: var(--spacing-sm) var(--spacing-lg); -} +} \ No newline at end of file diff --git a/src/components/text/text/_body.scss b/src/components/text/text/_body.scss index 348435b..f28be12 100644 --- a/src/components/text/text/_body.scss +++ b/src/components/text/text/_body.scss @@ -1,3 +1,3 @@ body { - color: var(--colors-text-body); -} + color: var(--color-text-body); +} \ No newline at end of file diff --git a/src/components/text/text/_text.scss b/src/components/text/text/_text.scss index 44440f3..a9e9990 100644 --- a/src/components/text/text/_text.scss +++ b/src/components/text/text/_text.scss @@ -11,7 +11,7 @@ } .blockquote { - border-left: 4px solid var(--colors-text-body); + border-left: 4px solid var(--color-text-body); font-family: var(--font-families-secondary); font-size: var(--font-size-h5); padding: var(--spacing-lg) var(--spacing-xl); @@ -50,4 +50,4 @@ pre { margin: 0; background-color: var(--c-background-section); -} +} \ No newline at end of file diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index 588c8d7..b50e24d 100644 --- a/src/components/tokens/_tokens.scss +++ b/src/components/tokens/_tokens.scss @@ -4,10 +4,10 @@ */ :root { - --colors-sb-background: #ffffff; - --colors-sb-text-body: #72520d; - --colors-sb-text-heading: #e29b00; - --colors-sb-visualization: #009fe4; + --color-sb-background: #ffffff; + --color-sb-text-body: #72520d; + --color-sb-text-heading: #e29b00; + --color-sb-visualization: #009fe4; --text-field-border-width: 1px; --text-field-radius: 0.625rem; --text-field-border: [object Object]; @@ -386,4 +386,4 @@ --emulsify-components: [object Object]; --main: [object Object]; --gold: [object Object]; -} +} \ No newline at end of file diff --git a/src/components/tokens/border-radius-tokens/border-radius-tokens.twig b/src/components/tokens/border-radius-tokens/border-radius-tokens.twig index 04e4697..400dffd 100644 --- a/src/components/tokens/border-radius-tokens/border-radius-tokens.twig +++ b/src/components/tokens/border-radius-tokens/border-radius-tokens.twig @@ -1,16 +1,16 @@
-

Border Radius Tokens

+

Border Radius Tokens

- +
diff --git a/src/components/tokens/border-tokens/border-tokens.twig b/src/components/tokens/border-tokens/border-tokens.twig index c13bbdd..5f794fd 100644 --- a/src/components/tokens/border-tokens/border-tokens.twig +++ b/src/components/tokens/border-tokens/border-tokens.twig @@ -1,16 +1,16 @@
-

Border Tokens

+

Border Tokens

- +
diff --git a/src/components/tokens/breakpoint-tokens/breakpoint-tokens.twig b/src/components/tokens/breakpoint-tokens/breakpoint-tokens.twig index 69b1cfe..c70cfc7 100644 --- a/src/components/tokens/breakpoint-tokens/breakpoint-tokens.twig +++ b/src/components/tokens/breakpoint-tokens/breakpoint-tokens.twig @@ -1,16 +1,16 @@
-

Breakpoint Tokens

+

Breakpoint Tokens

-
diff --git a/src/components/tokens/color-tokens/color-tokens.twig b/src/components/tokens/color-tokens/color-tokens.twig index 1317507..085caed 100644 --- a/src/components/tokens/color-tokens/color-tokens.twig +++ b/src/components/tokens/color-tokens/color-tokens.twig @@ -1,30 +1,30 @@
- {% for color, value in _context.colors %} -

{{color}}

- {% if value.value is defined %} - - {% else %} - - {% endif %} - {% endfor %} + {% for color, value in _context.colors %} +

{{color}}

+ {% if value.value is defined %} + + {% else %} + + {% endif %} + {% endfor %}
diff --git a/src/components/tokens/opacity-tokens/opacity-tokens.twig b/src/components/tokens/opacity-tokens/opacity-tokens.twig index 6c135b7..4516bf5 100644 --- a/src/components/tokens/opacity-tokens/opacity-tokens.twig +++ b/src/components/tokens/opacity-tokens/opacity-tokens.twig @@ -1,16 +1,16 @@
-

Opacity Tokens

+

Opacity Tokens

- +
diff --git a/src/components/tokens/size-tokens/size-tokens.twig b/src/components/tokens/size-tokens/size-tokens.twig index a727eee..a5a9ec7 100644 --- a/src/components/tokens/size-tokens/size-tokens.twig +++ b/src/components/tokens/size-tokens/size-tokens.twig @@ -1,16 +1,16 @@
-

Size Tokens

+

Size Tokens

- +
diff --git a/src/components/tokens/spacing-tokens/spacing-tokens.twig b/src/components/tokens/spacing-tokens/spacing-tokens.twig index 1f84cb1..807469f 100644 --- a/src/components/tokens/spacing-tokens/spacing-tokens.twig +++ b/src/components/tokens/spacing-tokens/spacing-tokens.twig @@ -1,21 +1,21 @@
-

Spacing Tokens

+

Spacing Tokens

-