{{ name }}
diff --git a/source/01-global/00-colors/palette.scss b/source/01-global/00-colors/palette.scss
new file mode 100644
index 000000000..695f9faeb
--- /dev/null
+++ b/source/01-global/00-colors/palette.scss
@@ -0,0 +1,61 @@
+// Storybook: Color Swatches
+
+@use 'sass:math';
+@use '00-config' as *;
+
+$swatch-size: rem(150px);
+$swatch-padding: 1rem;
+
+.gesso-storybook-color-palette__heading {
+ font-family: gesso-font-family(system);
+ font-size: 1.25rem;
+ line-height: 1.25;
+ margin-block-end: 1rem;
+}
+
+.gesso-storybook-color-palette__group {
+ border-block-end: 1px solid var(--gesso-border-color);
+ column-gap: $swatch-padding;
+ display: flex;
+ flex-wrap: wrap;
+ margin-block-end: $swatch-padding;
+}
+
+.gesso-storybook-color-swatch {
+ border: 1px solid var(--gesso-border-color);
+ flex: 0 0 ($swatch-size + 2 * $swatch-padding);
+ margin-block-end: $swatch-padding;
+ max-width: ($swatch-size + 2 * $swatch-padding);
+ padding: $swatch-padding;
+}
+
+.gesso-storybook-color-swatch__indicator {
+ height: $swatch-size;
+ margin-block-end: $swatch-padding;
+ width: $swatch-size;
+}
+
+.gesso-storybook-color-swatch__meta {
+ line-height: 1.2;
+}
+
+.gesso-storybook-color-swatch__name {
+ margin-block-end: rem(8px);
+}
+
+.gesso-storybook-color-swatch__hex {
+ font-family: gesso-font-family(monospace);
+ font-size: rem(14px);
+}
+
+.gesso-storybook-color-swatch__sass-code {
+ display: block;
+ font-size: rem(12px);
+ margin-block-start: rem(4px);
+}
+
+.gesso-storybook-color-swatch--small {
+ .gesso-storybook-color-swatch__indicator {
+ height: math.div($swatch-size, 2);
+ }
+}
diff --git a/source/01-global/00-colors/color.stories.jsx b/source/01-global/00-colors/palette.stories.jsx
similarity index 73%
rename from source/01-global/00-colors/color.stories.jsx
rename to source/01-global/00-colors/palette.stories.jsx
index 19462de47..5b7513092 100644
--- a/source/01-global/00-colors/color.stories.jsx
+++ b/source/01-global/00-colors/palette.stories.jsx
@@ -1,12 +1,12 @@
import parse from 'html-react-parser';
import { withGlobalWrapper } from '../../../.storybook/decorators';
-import twigTemplate from './color.twig';
+import twigTemplate from './palette.twig';
import data from '../../00-config/config.design-tokens.yml';
-import './color.scss';
+import './palette.scss';
const settings = {
- title: 'Global/Color Palette',
+ title: 'Global/Color',
decorators: [withGlobalWrapper],
argTypes: {
gesso: {
@@ -17,10 +17,10 @@ const settings = {
},
};
-const ColorPalette = {
+const Palette = {
render: args => parse(twigTemplate(args)),
args: { ...data },
};
export default settings;
-export { ColorPalette };
+export { Palette };
diff --git a/source/01-global/00-colors/palette.twig b/source/01-global/00-colors/palette.twig
new file mode 100644
index 000000000..00b5a20be
--- /dev/null
+++ b/source/01-global/00-colors/palette.twig
@@ -0,0 +1,39 @@
+
+
Brand
+ {% for key, list in gesso.palette.brand %}
+
+ {% for name, color in list %}
+ {% include '@global/00-colors/palette-item.twig' with {
+ color: color,
+ name: key ~ '-' ~ name,
+ } %}
+ {% endfor %}
+
+ {% endfor %}
+
+
+
+
Grayscale
+
+ {% for name, color in gesso.palette.grayscale %}
+ {% include '@global/00-colors/palette-item.twig' with {
+ 'color': color,
+ 'name': name,
+ } %}
+ {% endfor %}
+
+
+
+
+
Other
+ {% for key, list in gesso.palette.other %}
+
+ {% for name, color in list %}
+ {% include '@global/00-colors/palette-item.twig' with {
+ 'color': color,
+ 'name': key ~ '-' ~ name,
+ } %}
+ {% endfor %}
+
+ {% endfor %}
+
diff --git a/source/01-global/00-colors/themes.scss b/source/01-global/00-colors/themes.scss
new file mode 100644
index 000000000..b1727c7c9
--- /dev/null
+++ b/source/01-global/00-colors/themes.scss
@@ -0,0 +1,43 @@
+// Storybook: Color Themes
+
+@use '00-config' as *;
+
+.gesso-storybook-color-theme__heading {
+ font-family: gesso-font-family(system);
+ font-size: 1.25rem;
+ line-height: 1.25;
+ margin-block-end: 1rem;
+}
+
+.gesso-storybook-color-theme__row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+
+ @include breakpoint(1002px) {
+ flex-wrap: nowrap;
+ }
+}
+
+.gesso-storybook-color-theme__palette {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ max-width: rem(1002px);
+}
+
+.gesso-storybook-color-theme__content {
+ background: var(--gesso-background-color);
+ border: 1px solid var(--gesso-border-color);
+ color: var(--gesso-text-color);
+ margin-block-end: 2rem;
+ padding: 1rem 0;
+
+ > :last-child {
+ margin-block-end: 0;
+ }
+}
+
+.gesso-storybook-color-theme__icons {
+ color: var(--gesso-accent-color);
+}
diff --git a/source/01-global/00-colors/themes.stories.jsx b/source/01-global/00-colors/themes.stories.jsx
new file mode 100644
index 000000000..3fab4293e
--- /dev/null
+++ b/source/01-global/00-colors/themes.stories.jsx
@@ -0,0 +1,112 @@
+import ReactDOMServer from 'react-dom/server';
+import parse from 'html-react-parser';
+
+import { withGlobalWrapper } from '../../../.storybook/decorators';
+import twigTemplate from './themes.twig';
+import globalData from '../../00-config/storybook.global-data.yml';
+import data from '../../00-config/config.design-tokens.yml';
+import './palette.scss';
+import './themes.scss';
+import { Default as Accordion } from '../../03-components/accordion/accordion.stories';
+import {
+ Primary as PrimaryButton,
+ Secondary as SecondaryButton,
+} from '../../03-components/button/button.stories';
+import { FacetList } from '../../03-components/facet-list/facet-list.stories';
+import { Text as FormItem } from '../../03-components/form-item/form-item--textfield/form-item--textfield.stories';
+import { PageTitle } from '../../03-components/page-title/page-title.stories';
+import { Default as Pager } from '../../03-components/pager/pager.stories';
+import { TagList } from '../../03-components/tag-list/tag-list.stories';
+import { WYSIWYG } from '../../03-components/wysiwyg/wysiwyg.stories';
+
+const settings = {
+ title: 'Global/Color',
+ decorators: [withGlobalWrapper],
+ parameters: {
+ controls: {
+ include: ['storybook'],
+ },
+ },
+ argTypes: {
+ gesso: {
+ table: {
+ disable: true,
+ },
+ },
+ storybook: {
+ table: {
+ disable: true,
+ },
+ },
+ },
+};
+
+const demoContent = `
+ ${ReactDOMServer.renderToStaticMarkup(PageTitle.render(PageTitle.args))}
+ ${ReactDOMServer.renderToStaticMarkup(TagList.render(TagList.args))}
+ ${ReactDOMServer.renderToStaticMarkup(FormItem.render(FormItem.args))}
+
+
+ ${ReactDOMServer.renderToStaticMarkup(
+ PrimaryButton.render({
+ ...PrimaryButton.args,
+ text: 'Primary Button',
+ })
+ )}
+ ${ReactDOMServer.renderToStaticMarkup(
+ PrimaryButton.render({
+ ...PrimaryButton.args,
+ is_button_tag: false,
+ text: 'Primary Link Button',
+ })
+ )}
+ ${ReactDOMServer.renderToStaticMarkup(
+ PrimaryButton.render({
+ ...PrimaryButton.args,
+ is_disabled: true,
+ text: 'Disabled Primary Button'
+ })
+ )}
+
+
+
+ ${ReactDOMServer.renderToStaticMarkup(
+ SecondaryButton.render({
+ ...SecondaryButton.args,
+ text: 'Secondary Button',
+ })
+ )}
+ ${ReactDOMServer.renderToStaticMarkup(
+ SecondaryButton.render({
+ ...SecondaryButton.args,
+ is_button_tag: false,
+ text: 'Secondary Link Button',
+ })
+ )}
+ ${ReactDOMServer.renderToStaticMarkup(
+ SecondaryButton.render({
+ ...SecondaryButton.args,
+ is_disabled: true,
+ text: 'Disabled Secondary Button'
+ })
+ )}
+
+
+ ${ReactDOMServer.renderToStaticMarkup(FacetList.render(FacetList.args))}
+ ${ReactDOMServer.renderToStaticMarkup(Pager.render(Pager.args))}
+
+
+
+ ${ReactDOMServer.renderToStaticMarkup(WYSIWYG.render(WYSIWYG.args))}
+`;
+
+const Themes = {
+ render: args => parse(twigTemplate({
+ ...args,
+ demo_content: demoContent,
+ })),
+ args: { ...globalData, ...data },
+};
+
+export default settings;
+export { Themes };
diff --git a/source/01-global/00-colors/themes.twig b/source/01-global/00-colors/themes.twig
new file mode 100644
index 000000000..30463d934
--- /dev/null
+++ b/source/01-global/00-colors/themes.twig
@@ -0,0 +1,31 @@
+
+{% for key, value in gesso.colors.theme %}
+
+
Theme: {{ key|capitalize }}
+
+
+ {% for token, color in value %}
+ {% include '@global/00-colors/palette-item.twig' with {
+ 'modifier_classes': 'gesso-storybook-color-swatch--small',
+ 'color': color,
+ 'name': token,
+ } %}
+ {% endfor %}
+
+
+
+ {{ demo_content }}
+
+
+
+
+{% endfor %}
diff --git a/source/01-global/01-typography/fonts.scss b/source/01-global/01-typography/fonts.scss
index 2ec44e9b8..89860547a 100644
--- a/source/01-global/01-typography/fonts.scss
+++ b/source/01-global/01-typography/fonts.scss
@@ -28,7 +28,7 @@
}
.gesso-storybook-font__preview {
- border-block-end: 2px solid #eee;
+ border-block-end: 2px solid var(--gesso-border-color);
font-size: rem(18px);
font-style: normal;
font-weight: 400;
@@ -38,7 +38,7 @@
@include breakpoint(800px) {
border-block-end: 0;
- border-inline-end: 2px solid #eee;
+ border-inline-end: 2px solid var(--gesso-border-color);
margin: rem(5px) rem(30px) 0 0;
padding: 0 rem(20px);
text-align: start;
@@ -70,24 +70,22 @@
}
.gesso-storybook-font__label {
- color: #999;
+ color: var(--gesso-accent-color);
}
.gesso-storybook-font__name {
- color: #565454;
+ color: var(--gesso-accent-color);
font-size: 0.9rem;
line-height: 1.5;
margin: rem(5px) 0;
}
.gesso-storybook-font__weight {
- color: #000;
font-size: rem(13px);
margin-block-end: rem(5px);
}
.gesso-storybook-font__style {
- color: #000;
font-size: rem(13px);
margin-block-end: rem(5px);
}
diff --git a/source/01-global/02-spacing/space.twig b/source/01-global/02-spacing/space.twig
index 109ea9f39..1046ddf76 100644
--- a/source/01-global/02-spacing/space.twig
+++ b/source/01-global/02-spacing/space.twig
@@ -11,16 +11,16 @@
{# Base font value should be a pixel value or unitless value #}
{% for name, unit in gesso.spacing|keysort %}
{% set remValue =
- (unit~''|replace({'px':''})) /
- (gesso.typography['base-font-size']|replace({'px':''}))
+ (unit~''|replace({'px': ''})) /
+ (gesso.typography['base-font-size']|replace({'px': ''}))
%}
- | {{name|trim}} |
- {{remValue}}rem |
- {{unit}} |
+ {{ name|trim }} |
+ {{ remValue }}rem |
+ {{ unit }} |
-
+
|
{% endfor %}
diff --git a/source/01-global/04-transitions/duration.scss b/source/01-global/04-transitions/duration.scss
index ae0d29501..c91dfdf8f 100644
--- a/source/01-global/04-transitions/duration.scss
+++ b/source/01-global/04-transitions/duration.scss
@@ -14,7 +14,7 @@ $duration-swatch: rem(40px);
}
.gesso-storybook-duration__indicator {
- background-color: #666;
+ background-color: var(--gesso-text-secondary-color);
border-radius: 50%;
display: inline-block;
height: $duration-swatch;
@@ -31,7 +31,6 @@ $duration-swatch: rem(40px);
}
.gesso-storybook-duration__group {
- background-color: #eee;
display: flex;
flex-wrap: wrap;
padding: 1rem;
diff --git a/source/01-global/04-transitions/easing.scss b/source/01-global/04-transitions/easing.scss
index 419604e1d..a4e2d87f5 100644
--- a/source/01-global/04-transitions/easing.scss
+++ b/source/01-global/04-transitions/easing.scss
@@ -4,17 +4,12 @@
$easing-swatch: rem(75px);
-.gesso-storybook-easing {
- background-color: #eee;
- padding: 1rem;
-}
-
.gesso-storybook-easing__help-text {
margin-block-end: 1rem;
}
.gesso-storybook-easing__indicator {
- background-color: #666;
+ background-color: var(--gesso-text-secondary-color);
border-radius: 10%;
height: $easing-swatch;
inset-inline-start: 0;
diff --git a/source/01-global/_index.scss b/source/01-global/_index.scss
index 46633d9d1..cdacfaa2a 100644
--- a/source/01-global/_index.scss
+++ b/source/01-global/_index.scss
@@ -2,5 +2,6 @@ $wysiwyg: false !default;
@use 'fonts/fonts';
@use 'normalize/normalize';
+@use '00-colors/color-themes';
@use 'html-elements';
@use 'extendables';
diff --git a/source/01-global/content-placeholder/content-placeholder.jsx b/source/01-global/content-placeholder/content-placeholder.jsx
index 1a020c642..7bd5ca9fc 100644
--- a/source/01-global/content-placeholder/content-placeholder.jsx
+++ b/source/01-global/content-placeholder/content-placeholder.jsx
@@ -6,9 +6,9 @@ export default function ContentPlaceholder({ children }) {
return (
diff --git a/source/01-global/html-elements/00-universal/_universal.scss b/source/01-global/html-elements/00-universal/_universal.scss
index ebc75c78e..ff5d97b9b 100644
--- a/source/01-global/html-elements/00-universal/_universal.scss
+++ b/source/01-global/html-elements/00-universal/_universal.scss
@@ -4,7 +4,7 @@
:root {
// stylelint-disable-next-line
- --scrollbar-width: 0px;
+ --gesso-scrollbar-width: 0px;
}
// Uncomment to add a set of default transitions to all elements
diff --git a/source/01-global/html-elements/02-body/_body.scss b/source/01-global/html-elements/02-body/_body.scss
index e8e84f9cd..102a62c89 100644
--- a/source/01-global/html-elements/02-body/_body.scss
+++ b/source/01-global/html-elements/02-body/_body.scss
@@ -5,8 +5,8 @@
// Overflow-x and width properties ensure elements using full bleed techniques
// (e.g., the layout-full-bleed mixin) do not create horizontal scroll bars.
body {
- background-color: gesso-color(background, site);
- color: gesso-color(text, primary);
+ background-color: var(--gesso-background-color);
+ color: var(--gesso-text-color);
margin: 0;
overflow-x: hidden;
padding: 0;
diff --git a/source/01-global/html-elements/15-inline-elements/_inline-elements.scss b/source/01-global/html-elements/15-inline-elements/_inline-elements.scss
index c01efb85c..0780808e7 100644
--- a/source/01-global/html-elements/15-inline-elements/_inline-elements.scss
+++ b/source/01-global/html-elements/15-inline-elements/_inline-elements.scss
@@ -5,23 +5,23 @@
a {
@include focus();
background-color: transparent;
- color: gesso-color(text, link);
+ color: var(--gesso-link-color);
-webkit-text-decoration-skip: objects;
transition-duration: gesso-duration(short);
transition-property: background-color, border-color, color, outline-color;
transition-timing-function: gesso-easing(ease-in);
&:visited {
- color: gesso-color(text, link-visited);
+ color: var(--gesso-link-visited-color);
}
&:hover,
&:focus {
- color: gesso-color(text, link-hover);
+ color: var(--gesso-link-hover-color);
}
&:active {
- color: gesso-color(text, link-active);
+ color: var(--gesso-link-active-color);
}
@media print {
@@ -94,8 +94,8 @@ dfn {
// kbd {}
mark {
- background: gesso-color(mark, background);
- color: gesso-color(mark, text);
+ background: var(--gesso-mark-background-color);
+ color: var(--gesso-mark-text-color);
}
// q {}
diff --git a/source/01-global/html-elements/16-blockquote/_blockquote.scss b/source/01-global/html-elements/16-blockquote/_blockquote.scss
index 21ab9eb87..0727498a3 100644
--- a/source/01-global/html-elements/16-blockquote/_blockquote.scss
+++ b/source/01-global/html-elements/16-blockquote/_blockquote.scss
@@ -2,7 +2,7 @@
@use '00-config' as *;
-$blockquote-cite-divider-color: gesso-color(ui, generic, border);
+$blockquote-cite-divider-color: var(--gesso-border-color);
blockquote {
@include display-text-style(blockquote);
diff --git a/source/01-global/html-elements/18-horizontal-rule/_horizontal-rule.scss b/source/01-global/html-elements/18-horizontal-rule/_horizontal-rule.scss
index 0af1c3935..ab3fa5429 100644
--- a/source/01-global/html-elements/18-horizontal-rule/_horizontal-rule.scss
+++ b/source/01-global/html-elements/18-horizontal-rule/_horizontal-rule.scss
@@ -2,7 +2,7 @@
@use '00-config' as *;
-$horizontal-rule-color: gesso-color(ui, generic, border);
+$horizontal-rule-color: var(--gesso-border-color);
hr {
border: 1px solid $horizontal-rule-color;
diff --git a/source/01-global/html-elements/24-table/_table.scss b/source/01-global/html-elements/24-table/_table.scss
index c08688f29..ea69324db 100644
--- a/source/01-global/html-elements/24-table/_table.scss
+++ b/source/01-global/html-elements/24-table/_table.scss
@@ -26,6 +26,7 @@ td {
background-clip: padding-box;
background-color: gesso-color(table, background);
border: 1px solid gesso-color(table, border);
+ color: gesso-color(table, text);
padding: rem(gesso-spacing(2));
}
@@ -34,6 +35,7 @@ tfoot {
td,
th {
background-color: gesso-color(table, background-foot);
+ color: gesso-color(table, text);
}
}
@@ -42,6 +44,7 @@ th {
background-clip: padding-box;
background-color: gesso-color(table, background);
border: 1px solid gesso-color(table, border);
+ color: gesso-color(table, text);
padding: rem(gesso-spacing(2));
text-align: start;
}
@@ -51,6 +54,7 @@ thead {
td,
th {
background-color: gesso-color(table, background-head);
+ color: gesso-color(table, text);
}
@media print {
@@ -59,6 +63,9 @@ thead {
}
tr {
+ background-color: gesso-color(table, background);
+ color: gesso-color(table, text);
+
@media print {
page-break-inside: avoid;
}
diff --git a/source/01-global/normalize/_normalize.scss b/source/01-global/normalize/_normalize.scss
index 637f344a3..d9547d7a7 100644
--- a/source/01-global/normalize/_normalize.scss
+++ b/source/01-global/normalize/_normalize.scss
@@ -148,13 +148,13 @@ var {
// stylelint-disable-next-line selector-no-vendor-prefix
::-moz-selection {
- background: gesso-color(selection, background);
- color: gesso-color(selection, text);
+ background: var(--gesso-selection-background-color);
+ color: var(--gesso-selection-text-color);
text-shadow: none;
}
::selection {
- background: gesso-color(selection, background);
- color: gesso-color(selection, text);
+ background: var(--gesso-selection-background-color);
+ color: var(--gesso-selection-text-color);
text-shadow: none;
}
diff --git a/source/02-layouts/section/_section.scss b/source/02-layouts/section/_section.scss
index 002b047e6..c889df951 100644
--- a/source/02-layouts/section/_section.scss
+++ b/source/02-layouts/section/_section.scss
@@ -4,4 +4,10 @@
.l-section {
margin-block-end: rem(gesso-spacing(5));
+
+ &.has-theme {
+ background-color: var(--gesso-background-color);
+ color: var(--gesso-text-color);
+ padding-block: rem(gesso-spacing(2));
+ }
}
diff --git a/source/02-layouts/section/section.stories.jsx b/source/02-layouts/section/section.stories.jsx
index 7c855ebd6..1cbfbcd7d 100644
--- a/source/02-layouts/section/section.stories.jsx
+++ b/source/02-layouts/section/section.stories.jsx
@@ -5,6 +5,28 @@ import data from './section.yml';
const settings = {
title: 'Layouts/Section',
+ argTypes: {
+ theme: {
+ options: [
+ '',
+ 'default',
+ 'gray-6',
+ ],
+ control: { type: 'select' },
+ },
+ },
+ parameters: {
+ controls: {
+ include: [
+ 'modifier_classes',
+ 'theme',
+ 'has_constrain',
+ 'constrain_modifier_classes',
+ 'section_title_element',
+ 'section_title',
+ ],
+ },
+ },
};
const Section = {
diff --git a/source/02-layouts/section/section.twig b/source/02-layouts/section/section.twig
index 3608bdac7..c89b5070b 100644
--- a/source/02-layouts/section/section.twig
+++ b/source/02-layouts/section/section.twig
@@ -1,5 +1,7 @@
{% set classes = [
'l-section',
+ theme ? 'theme-' ~ theme : '',
+ theme ? 'has-theme' : '',
modifier_classes ? modifier_classes : '',
]|join(' ')|trim %}
diff --git a/source/02-layouts/section/section.yml b/source/02-layouts/section/section.yml
index 84cf74617..356f3d820 100644
--- a/source/02-layouts/section/section.yml
+++ b/source/02-layouts/section/section.yml
@@ -1,4 +1,5 @@
---
+theme: false
section_title_element: 'h2'
section_title: 'Section title'
section_content: |-
diff --git a/source/03-components/accordion/accordion--step-list.scss b/source/03-components/accordion/accordion--step-list.scss
index 24e832022..50c8d4e31 100644
--- a/source/03-components/accordion/accordion--step-list.scss
+++ b/source/03-components/accordion/accordion--step-list.scss
@@ -6,7 +6,7 @@
counter-reset: step;
.c-accordion-item__number {
- background-color: gesso-grayscale(gray-2);
+ background-color: var(--gesso-background-secondary-color);
border-radius: 100%;
display: inline-block;
font-size: rem(gesso-font-size(4));
diff --git a/source/03-components/accordion/accordion.scss b/source/03-components/accordion/accordion.scss
index 5fececae0..1f4e2e01e 100644
--- a/source/03-components/accordion/accordion.scss
+++ b/source/03-components/accordion/accordion.scss
@@ -2,8 +2,8 @@
@use '00-config' as *;
-$accordion-item-border-color: gesso-grayscale(gray-2) !default;
-$accordion-item-icon-color: gesso-color(ui, generic, accent) !default;
+$accordion-item-border-color: var(--gesso-background-secondary-color) !default;
+$accordion-item-icon-color: var(--gesso-link-color) !default;
$accordion-item-icon-size: 20px !default;
$accordion-item-icon-weight: 2px !default;
@@ -14,6 +14,8 @@ $accordion-item-icon-weight: 2px !default;
}
.c-accordion-item__heading {
+ background: var(--gesso-background-color);
+ color: var(--gesso-text-color);
font-weight: gesso-font-weight(bold);
margin: 0;
}
@@ -95,7 +97,7 @@ $accordion-item-icon-weight: 2px !default;
}
.c-accordion-item__drawer {
- background: gesso-grayscale(white);
+ background: var(--gesso-background-color);
}
.c-accordion-item__drawer-inner {
diff --git a/source/03-components/button/_button.scss b/source/03-components/button/_button.scss
index c2af64f69..a183200f3 100644
--- a/source/03-components/button/_button.scss
+++ b/source/03-components/button/_button.scss
@@ -62,19 +62,32 @@ $button-spacing: rem(gesso-spacing(1));
// This custom button class, included as an example, is not output by Drupal by default.
.c-button--secondary {
- background-color: gesso-color(button, secondary, background);
- color: gesso-color(button, secondary, text);
+ background-color: var(--gesso-button-secondary-background-color);
+ border-color: var(--gesso-button-secondary-border-color);
+ color: var(--gesso-button-secondary-text-color);
+
+ &:visited {
+ color: var(--gesso-button-secondary-text-color);
+ }
&:hover,
&:focus {
- background-color: gesso-color(button, secondary, background-hover);
- color: gesso-color(button, secondary, text-hover);
+ background-color: var(--gesso-button-secondary-background-hover-color);
+ border-color: var(--gesso-button-secondary-border-hover-color);
+ color: var(--gesso-button-secondary-text-hover-color);
}
&:active,
&.is-active {
- background-color: gesso-color(button, secondary, background-active);
- color: gesso-color(button, secondary, text-active);
+ background-color: var(--gesso-button-secondary-background-active-color);
+ border-color: var(--gesso-button-secondary-border-active-color);
+ color: var(--gesso-button-secondary-text-active-color);
+ }
+
+ &[disabled] {
+ background-color: var(--gesso-button-secondary-background-disabled-color);
+ border-color: var(--gesso-button-secondary-border-disabled-color);
+ color: var(--gesso-button-secondary-text-disabled-color);
}
}
diff --git a/source/03-components/card/card.scss b/source/03-components/card/card.scss
index 388ed7a29..6d24e9b2b 100644
--- a/source/03-components/card/card.scss
+++ b/source/03-components/card/card.scss
@@ -2,10 +2,10 @@
@use '00-config' as *;
-$card-accent-border-color: gesso-color(ui, generic, accent) !default;
-$card-link-color: gesso-color(text, on-light) !default;
-$card-link-color-hover: gesso-color(ui, generic, text-dark) !default;
-$card-meta-color: gesso-color(ui, generic, text-dark) !default;
+$card-accent-border-color: var(--gesso-accent-color) !default;
+$card-link-color: var(--gesso-text-color) !default;
+$card-link-color-hover: var(--gesso-text-secondary-color) !default;
+$card-meta-color: var(--gesso-text-secondary-color) !default;
$card-padding: rem(gesso-spacing(3)) !default;
.c-card {
diff --git a/source/03-components/date/_date.scss b/source/03-components/date/_date.scss
index d84ebe14d..ae982ba61 100644
--- a/source/03-components/date/_date.scss
+++ b/source/03-components/date/_date.scss
@@ -3,6 +3,6 @@
@use '00-config' as *;
.c-date {
- color: gesso-color(text, secondary);
+ color: var(--gesso-text-secondary-color);
font-size: rem(gesso-font-size(3));
}
diff --git a/source/03-components/details/details.scss b/source/03-components/details/details.scss
index 09fafa7be..0127bc03a 100644
--- a/source/03-components/details/details.scss
+++ b/source/03-components/details/details.scss
@@ -2,71 +2,55 @@
@use '00-config' as *;
-$details-background-color: gesso-color(ui, generic, background-light) !default;
-$details-background-color-hover: gesso-color(ui, generic, background) !default;
-$details-content-background-color: gesso-color(background, site) !default;
-$details-padding: rem(24px) !default;
-$details-text-color: gesso-color(text, on-light) !default;
+$details-border-color: var(--gesso-background-secondary-color) !default;
+$details-icon-color: var(--gesso-link-color) !default;
+$details-icon-size: 24px !default;
+$details-padding: rem(gesso-spacing(2));
.c-details {
+ border-block-end: solid 1px $details-border-color;
margin-block: 0 rem(gesso-spacing(4));
margin-inline: 0;
}
.c-details__summary {
- @include svg-background(plus);
- background-color: $details-background-color;
- background-position: right $details-padding center; // LTR
- background-repeat: no-repeat;
- background-size: rem(13px);
+ background: var(--gesso-background-color);
+ color: var(--gesso-text-color);
cursor: pointer;
- display: block;
+ display: flex;
font-weight: gesso-font-weight(bold);
- line-height: 1;
- outline: 0;
- padding-block: rem(15px);
- padding-inline: $details-padding rem(55px);
- transition: background gesso-duration(short) gesso-easing(ease-in-out);
-
- @if $support-for-rtl {
- [dir='rtl'] & {
- background-position: left $details-padding center;
- }
- }
-
- [open] > & {
- @include svg-background(minus);
- }
-
- &:hover {
- background-color: $details-background-color-hover;
- }
-
- &:focus {
- box-shadow: gesso-box-shadow(2);
- }
+ gap: 1em;
+ justify-content: space-between;
+ line-height: 1.5;
+ list-style: none;
+ margin: 0;
+ padding: $details-padding;
+ transition: all gesso-duration(short) gesso-easing(ease-out);
&::-webkit-details-marker {
display: none;
}
- &::before {
- display: none; // remove icon added by polyfill
+ &::after {
+ color: $details-icon-color;
+ content: '+';
+ font-family: gesso-font-family(monospace);
+ font-size: $details-icon-size;
+ line-height: 1;
+ text-align: center;
+ width: $details-icon-size;
}
-}
-.c-details__fallback-link {
- color: inherit !important;
- display: block;
- outline: 0;
- text-decoration: none;
+ [open] > &::after {
+ content: '-';
+ }
}
.c-details__content {
- background: $details-content-background-color;
- border: 3px solid $details-background-color;
- border-block-start: 0;
+ background: var(--gesso-background-color);
+ color: var(--gesso-text-color);
padding: $details-padding;
+ padding-block-start: 0;
> :last-child {
margin-block-end: 0;
@@ -74,7 +58,6 @@ $details-text-color: gesso-color(text, on-light) !default;
}
.c-details__description {
- color: $details-text-color;
font-size: rem(gesso-font-size(2));
margin-block-end: rem(gesso-spacing(2));
}
diff --git a/source/03-components/dropdown-menu/dropdown-menu.scss b/source/03-components/dropdown-menu/dropdown-menu.scss
index 1891c7b1d..4152d49f8 100644
--- a/source/03-components/dropdown-menu/dropdown-menu.scss
+++ b/source/03-components/dropdown-menu/dropdown-menu.scss
@@ -42,7 +42,11 @@
> button.c-dropdown-menu__link {
@include text-button;
- @include link(gesso-color(text, link), gesso-color(text, link-hover));
+ @include link(
+ var(--gesso-link-color),
+ var(--gesso-link-hover-color),
+ var(--gesso-link-active-color)
+ );
}
}
}
diff --git a/source/03-components/facet/facet.scss b/source/03-components/facet/facet.scss
index e5e693c2f..d7e083d3a 100644
--- a/source/03-components/facet/facet.scss
+++ b/source/03-components/facet/facet.scss
@@ -2,11 +2,11 @@
@use '00-config' as *;
-$facet-icon-color: gesso-color(facet, icon) !default;
-$facet-icon-active-color: gesso-color(facet, icon-active) !default;
-$facet-text-color: gesso-color(facet, text) !default;
-$facet-text-hover-color: gesso-color(facet, text-hover) !default;
-$facet-text-active-color: gesso-color(facet, text-active) !default;
+$facet-icon-color: var(--gesso-facet-icon-color) !default;
+$facet-icon-active-color: var(--gesso-facet-icon-active-color) !default;
+$facet-text-color: var(--gesso-facet-text-color) !default;
+$facet-text-hover-color: var(--gesso-facet-text-hover-color) !default;
+$facet-text-active-color: var(--gesso-facet-text-active-color) !default;
.c-facet {
@include responsive-font-size(3);
diff --git a/source/03-components/fieldset/_fieldset.scss b/source/03-components/fieldset/_fieldset.scss
index f5dcb0a6a..06bc884f6 100644
--- a/source/03-components/fieldset/_fieldset.scss
+++ b/source/03-components/fieldset/_fieldset.scss
@@ -3,9 +3,11 @@
@use '00-config' as *;
@use '../form-item/form-item' as *;
+$fieldset-border-color: var(--gesso-background-secondary-color);
$fieldset-legend-offset: rem(
gesso-line-height(base) * gesso-base-font-size()
) !default;
+$fieldset-legend-text-color: var(--gesso-text-color);
.c-fieldset {
inset-block-start: $fieldset-legend-offset; // Offsets the negative margin of legends.
@@ -36,7 +38,7 @@ $fieldset-legend-offset: rem(
// .c-fieldset__content {}
.c-fieldset__description {
- color: gesso-color(text, secondary);
+ color: var(--gesso-text-secondary-color);
font-size: rem(gesso-font-size(2));
> :last-child {
@@ -45,21 +47,21 @@ $fieldset-legend-offset: rem(
}
.c-fieldset--default {
- background: #fff;
- border: 1px solid gesso-color(form, border);
+ background: var(--gesso-background-color);
+ border: 1px solid $fieldset-border-color;
margin: rem(gesso-spacing(2)) 0 rem(gesso-spacing(3)) +
$fieldset-legend-offset;
padding: 0 rem(gesso-spacing(2));
.c-fieldset__legend {
- background: gesso-color(form, border);
- border: 1px solid gesso-color(form, border);
+ background: $fieldset-border-color;
+ border: 1px solid $fieldset-border-color;
border-block-end: 0;
- color: #212121;
+ color: $fieldset-legend-text-color;
height: 2em;
line-height: 2;
padding: 0;
- text-shadow: 0 1px 0 #fff;
+ text-shadow: 0 1px 0 var(--gesso-background-color);
&.is-disabled {
opacity: $form-disabled-opacity;
diff --git a/source/03-components/form-item/_form-item.scss b/source/03-components/form-item/_form-item.scss
index 9800b9b61..6477831ce 100644
--- a/source/03-components/form-item/_form-item.scss
+++ b/source/03-components/form-item/_form-item.scss
@@ -3,12 +3,15 @@
@use 'sass:math';
@use '00-config' as *;
-$form-background-color: gesso-color(form, background) !default;
-$form-background-color-focus: gesso-color(form, background-active) !default;
-$form-border-color: gesso-color(form, border) !default;
-$form-border-color-focus: gesso-color(form, border-dark) !default;
+$form-background-color: var(--gesso-form-background-color) !default;
+$form-background-color-focus: var(
+ --gesso-form-background-active-color
+) !default;
+$form-border-color: var(--gesso-form-border-color) !default;
+$form-border-color-focus: var(--gesso-form-border-dark-color) !default;
$form-box-shadow-focus: gesso-box-shadow(2) !default;
$form-disabled-opacity: 0.35 !default;
+$form-text-color: var(--gesso-form-text-color) !default;
$form-text-size: gesso-base-font-size() !default;
.c-form-item {
@@ -55,7 +58,7 @@ $form-text-size: gesso-base-font-size() !default;
.c-form-item__description {
@extend %disabled-form-styles;
- color: gesso-color(text, secondary);
+ color: var(--gesso-text-secondary-color);
font-size: rem(gesso-font-size(2));
> :last-child {
@@ -96,6 +99,7 @@ $form-text-size: gesso-base-font-size() !default;
background-color: $form-background-color;
border: 1px solid $form-border-color;
border-radius: 0;
+ color: $form-text-color;
display: inline-block;
font-size: rem($form-text-size);
height: rem(44px);
@@ -129,6 +133,28 @@ $form-text-size: gesso-base-font-size() !default;
}
}
+.c-form-item__file {
+ background-color: transparent;
+ color: var(--gesso-text-color);
+
+ &:hover,
+ &:focus {
+ background-color: transparent;
+ }
+
+ &:disabled {
+ &:hover,
+ &:focus {
+ background-color: transparent;
+ }
+ }
+}
+
.c-form-item__textarea {
height: auto;
}
+
+.c-form-item__error-message {
+ @include responsive-font-size(3);
+ color: var(--gesso-form-error-text-color);
+}
diff --git a/source/03-components/form-item/form-item--checkbox/_form-item--checkbox.scss b/source/03-components/form-item/form-item--checkbox/_form-item--checkbox.scss
index e24b48076..3543de89a 100644
--- a/source/03-components/form-item/form-item--checkbox/_form-item--checkbox.scss
+++ b/source/03-components/form-item/form-item--checkbox/_form-item--checkbox.scss
@@ -20,8 +20,8 @@
&::before {
@include focus();
- background: gesso-color(form, background-unchecked);
- border: 1px solid gesso-color(form, border-dark);
+ background: var(--gesso-form-background-unchecked-color);
+ border: 1px solid var(--gesso-form-border-dark-color);
content: '\a0';
display: inline-block;
height: rem(20px);
@@ -40,14 +40,14 @@
&:checked + .c-form-item__label::before {
@include svg-background(correct);
- background-color: gesso-color(form, background-checked);
+ background-color: var(--gesso-form-background-checked-color);
background-position: 50%;
background-repeat: no-repeat;
background-size: rem(20px);
}
&:focus + .c-form-item__label::before {
- outline-color: gesso-color(ui, generic, focus);
+ outline-color: var(--gesso-focus-color);
}
&:disabled + .c-form-item__label {
diff --git a/source/03-components/form-item/form-item--radio/_form-item--radio.scss b/source/03-components/form-item/form-item--radio/_form-item--radio.scss
index a66609308..943255563 100644
--- a/source/03-components/form-item/form-item--radio/_form-item--radio.scss
+++ b/source/03-components/form-item/form-item--radio/_form-item--radio.scss
@@ -11,8 +11,8 @@
.c-form-item__radio {
@include focus();
appearance: none;
- background-color: gesso-color(form, background-unchecked);
- border: 1px solid gesso-color(form, border-dark);
+ background-color: var(--gesso-form-background-unchecked-color);
+ border: 1px solid var(--gesso-form-border-dark-color);
border-radius: 50%;
box-shadow: 0 0 0 2px transparent;
cursor: pointer;
@@ -26,9 +26,9 @@
width: 18px;
&:checked {
- background-color: gesso-color(form, background-checked);
- border: 2px solid gesso-color(form, background-unchecked);
- box-shadow: 0 0 0 2px gesso-color(form, background-checked);
+ background-color: var(--gesso-form-background-checked-color);
+ border: 2px solid var(--gesso-form-background-unchecked-color);
+ box-shadow: 0 0 0 2px var(--gesso-form-background-checked-color);
}
&:disabled {
diff --git a/source/03-components/form-item/form-item--range/_form-item--range.scss b/source/03-components/form-item/form-item--range/_form-item--range.scss
index ea1fd50cf..d39b1864a 100644
--- a/source/03-components/form-item/form-item--range/_form-item--range.scss
+++ b/source/03-components/form-item/form-item--range/_form-item--range.scss
@@ -13,8 +13,9 @@ $form-range-track-height: 10px !default;
@mixin c-form-item__range-thumb {
@include focus();
- background: gesso-color(form, thumb);
- border: $form-range-thumb-border-width solid gesso-color(form, border-light);
+ background: var(--gesso-form-thumb-color);
+ border: $form-range-thumb-border-width solid
+ var(--gesso-form-border-light-color);
border-radius: $form-range-thumb-border-radius;
cursor: pointer;
height: rem($form-range-thumb-height);
@@ -24,12 +25,13 @@ $form-range-track-height: 10px !default;
}
@mixin c-form-item__range-thumb-focus {
- outline-color: gesso-color(ui, generic, focus);
+ outline-color: var(--gesso-focus-color);
}
@mixin c-form-item__range-track {
- background: gesso-color(form, track);
- border: $form-range-track-border-width solid gesso-color(form, border-dark);
+ background: var(--gesso-form-track-color);
+ border: $form-range-track-border-width solid
+ var(--gesso-form-border-dark-color);
cursor: pointer;
display: block;
height: rem($form-range-track-height);
@@ -96,9 +98,9 @@ $form-range-track-height: 10px !default;
&::-ms-fill-lower,
&::-ms-fill-upper {
- background: gesso-color(form, track);
+ background: var(--gesso-form-track-color);
border: $form-range-track-border-width solid
- gesso-color(form, border-dark);
+ var(--gesso-form-border-dark-color);
}
&::-webkit-slider-thumb {
diff --git a/source/03-components/mega-menu/mega-menu.scss b/source/03-components/mega-menu/mega-menu.scss
index e34d3ab8b..bcbf4fb3f 100644
--- a/source/03-components/mega-menu/mega-menu.scss
+++ b/source/03-components/mega-menu/mega-menu.scss
@@ -7,14 +7,14 @@
// the element(s) above it need a background color and
// z-index in order to cover the mega menu.
.l-header {
- background: gesso-color('background', 'site');
+ background: var(--gesso-background-color);
position: relative;
z-index: 2;
}
.c-mega-menu {
align-items: center;
- background: gesso-color('background', 'site');
+ background: var(--gesso-background-color);
display: flex;
margin-block: 0 rem(gesso-spacing(2.5));
margin-inline: 0;
@@ -23,7 +23,7 @@
z-index: 1;
&::after {
- background-color: gesso-color(background, site);
+ background-color: var(--gesso-background-color);
content: '';
display: block;
height: 100%;
@@ -35,13 +35,16 @@
}
> .c-mega-menu__item {
- border-block-end: 1px solid gesso-grayscale(white);
list-style-type: none;
padding-block: 1.25rem;
padding-inline: 0.8125rem 1.8125rem;
> .c-mega-menu__link {
- @include link(gesso-color(text, link), gesso-color(text, link-hover));
+ @include link(
+ var(--gesso-link-color),
+ var(--gesso-link-hover-color),
+ var(--gesso-link-active-color)
+ );
border-block-end: rem(2px) solid transparent;
border-radius: rem(1px);
display: block;
@@ -51,6 +54,7 @@
padding-inline: 0;
position: relative;
text-align: start;
+ text-decoration: none;
transition: all 0.4s ease;
width: auto;
z-index: gesso-z-index(drawer) + 1;
@@ -72,8 +76,9 @@
}
.c-mega-menu__section {
- background-color: gesso-color(ui, generic, background-dark);
- color: gesso-color(text, on-dark);
+ @include color-theme(gray-6);
+ background-color: var(--gesso-background-color);
+ color: var(--gesso-text-color);
inset-block-start: 100%;
inset-inline-start: 0;
margin-block: 0;
@@ -85,13 +90,6 @@
width: 100%;
z-index: 0;
- a,
- button {
- &:focus {
- @include focus(gesso-color(text, on-dark));
- }
- }
-
&[hidden] {
display: block;
transform: translate3d(0, -100%, 0);
@@ -115,7 +113,6 @@
.c-mega-menu__section-close {
@include text-button;
- color: gesso-color(text, on-dark);
height: rem(50px);
inset-block-start: rem(10px);
inset-inline-end: rem(10px);
@@ -135,7 +132,6 @@
}
.c-mega-menu__section-title {
- color: gesso-color(text, on-dark);
display: block;
font-size: rem(gesso-font-size(13));
}
@@ -209,19 +205,16 @@
}
.c-mega-menu__subnav .c-mega-menu__subnav .c-mega-menu__link {
- color: gesso-brand(blue, light-1);
font-size: rem(gesso-font-size(2));
font-weight: gesso-font-weight(semibold);
line-height: gesso-line-height(short);
text-transform: none;
&:hover {
- color: gesso-grayscale(white);
opacity: 1;
}
&:focus-visible {
- color: gesso-grayscale(white);
opacity: 1;
}
}
@@ -235,10 +228,6 @@
// stylelint-enable selector-max-compound-selectors
@include breakpoint-max(gesso-breakpoint(mobile-menu)) {
- .c-mega-menu__section {
- background-color: rgba(gesso-color(ui, generic, background-lighter), 0.98);
- }
-
.c-mega-menu__section-title,
.c-mega-menu__section-close {
display: none;
diff --git a/source/03-components/mobile-menu/mobile-menu.scss b/source/03-components/mobile-menu/mobile-menu.scss
index 97cd5f3d7..815e1290b 100644
--- a/source/03-components/mobile-menu/mobile-menu.scss
+++ b/source/03-components/mobile-menu/mobile-menu.scss
@@ -4,34 +4,23 @@
@use 'sass:math';
@use '00-config' as *;
-$mobile-menu-bg-color: rgba(
- gesso-color(ui, generic, background-light),
- 0.98
-) !default;
-$mobile-menu-link-color: gesso-color(ui, generic, text-dark) !default;
-$mobile-menu-link-hover-color: gesso-color(ui, generic, text-darker) !default;
-$mobile-menu-submenu-fallback-bg-color: gesso-color(
- ui,
- generic,
- background-lighter
-) !default;
-$mobile-menu-submenu-bg-color: rgba(
- gesso-color(ui, generic, background-lighter),
- 0.98
-) !default;
-$mobile-menu-submenu-link-color: gesso-color(ui, generic, text-dark) !default;
-$mobile-menu-submenu-link-hover-color: gesso-color(
- ui,
- generic,
- text-darker
+$mobile-menu-bg-color: rgb(
+ from var(--gesso-background-secondary-color) r g b / 0.98
) !default;
+$mobile-menu-link-color: var(--gesso-text-secondary-color) !default;
+$mobile-menu-link-hover-color: var(--gesso-text-color) !default;
+$mobile-menu-submenu-bg-color: $mobile-menu-bg-color !default;
+$mobile-menu-submenu-link-color: var(--gesso-text-secondary-color) !default;
+$mobile-menu-submenu-link-hover-color: var(--gesso-text-color) !default;
$mobile-menu-button-height: 54px;
$mobile-menu-button-width: 44px;
$mobile-menu-font-size: gesso-font-size(5);
$mobile-menu-line-height: gesso-line-height(base);
.c-mobile-menu {
+ @include color-theme(default);
background-color: $mobile-menu-bg-color;
+ color: var(--gesso-text-color);
display: none;
inset-block-start: 0;
inset-inline-start: 0;
diff --git a/source/03-components/modal/modal.scss b/source/03-components/modal/modal.scss
index 89786472a..fa5c31c89 100644
--- a/source/03-components/modal/modal.scss
+++ b/source/03-components/modal/modal.scss
@@ -52,6 +52,9 @@
}
.c-modal__inner {
+ @include color-theme(default);
+ background-color: var(--gesso-background-color);
+ color: var(--gesso-text-color);
padding-block: rem(gesso-spacing(5));
padding-inline: rem(gesso-spacing(5));
}
diff --git a/source/03-components/overlay-menu/overlay-menu.scss b/source/03-components/overlay-menu/overlay-menu.scss
index c37cecc0b..d3596b9d9 100644
--- a/source/03-components/overlay-menu/overlay-menu.scss
+++ b/source/03-components/overlay-menu/overlay-menu.scss
@@ -3,9 +3,8 @@
@use '00-config' as *;
-$overlay-menu-bg-color: rgba(
- gesso-color(ui, generic, background-light),
- 0.98
+$overlay-menu-bg-color: rgb(
+ from var(--gesso-background-secondary-color) r g b / 0.98
) !default;
.c-overlay-menu {
@@ -20,7 +19,9 @@ $overlay-menu-bg-color: rgba(
z-index: -1;
&.is-open {
+ @include color-theme(default);
background-color: $overlay-menu-bg-color;
+ color: var(--gesso-text-color);
height: 100vh;
overflow-y: auto;
width: 100%;
diff --git a/source/03-components/pager/pager.scss b/source/03-components/pager/pager.scss
index e2bf80f69..2486dd90e 100644
--- a/source/03-components/pager/pager.scss
+++ b/source/03-components/pager/pager.scss
@@ -2,11 +2,11 @@
@use '00-config' as *;
-$pager-background-color: gesso-color(ui, generic, accent) !default;
-$pager-background-color-hover: gesso-color(ui, generic, accent) !default;
-$pager-background-color-active: gesso-color(ui, generic, accent-dark) !default;
-$pager-link-color: gesso-color(text, on-light) !default;
-$pager-link-color-active: gesso-color(text, on-dark) !default;
+$pager-background-color: var(--gesso-link-secondary-color) !default;
+$pager-background-color-hover: var(--gesso-link-secondary-color) !default;
+$pager-background-color-active: var(--gesso-link-secondary-color) !default;
+$pager-link-color: var(--gesso-link-secondary-color) !default;
+$pager-link-color-active: var(--gesso-background-color) !default;
$pager-ellipsis-bp: 800px !default;
$pager-bp: 600px !default;
@@ -87,22 +87,22 @@ $pager-bp: 600px !default;
.c-pager__link--next,
.c-pager__link--last {
background-color: transparent;
- color: gesso-color(text, link);
+ color: var(--gesso-link-color);
&:visited {
- color: gesso-color(text, link);
+ color: var(--gesso-link-color);
}
&:hover,
&:focus {
background-color: transparent;
- color: gesso-color(text, link-hover);
+ color: var(--gesso-link-hover-color);
text-decoration: underline;
}
&:active {
background-color: transparent;
- color: gesso-color(text, link-active);
+ color: var(--gesso-link-active-color);
text-decoration: underline;
}
}
diff --git a/source/03-components/progress/progress.scss b/source/03-components/progress/progress.scss
index 7aaaf99e1..e416fa195 100644
--- a/source/03-components/progress/progress.scss
+++ b/source/03-components/progress/progress.scss
@@ -3,11 +3,11 @@
@use '00-config' as *;
-$progress-background-color: gesso-color(ui, generic, background) !default;
-$progress-bar-color: gesso-color(ui, generic, accent) !default;
-$progress-border-color: gesso-color(ui, generic, border-dark) !default;
+$progress-background-color: var(--gesso-background-secondary-color) !default;
+$progress-bar-color: var(--gesso-accent-color) !default;
+$progress-border-color: var(--gesso-border-color) !default;
$progress-border-radius: rem(3px) !default;
-$progress-text-color: gesso-color(text, on-light) !default;
+$progress-text-color: var(--gesso-text-color) !default;
.c-progress {
position: relative;
diff --git a/source/03-components/read-more-link/read-more-link.scss b/source/03-components/read-more-link/read-more-link.scss
index 1012c78cb..d9d40a4ec 100644
--- a/source/03-components/read-more-link/read-more-link.scss
+++ b/source/03-components/read-more-link/read-more-link.scss
@@ -4,27 +4,7 @@
@use '01-global/extendables' as *;
.c-read-more-link {
- padding-inline-end: 28px;
text-decoration: none;
-
- &:hover,
- &:focus {
- path {
- fill: gesso-color(text, link-hover);
- }
- }
-}
-
-.c-read-more-link__icon {
- display: inline-block;
- inset-block-start: 8px;
- margin-inline-end: -28px;
- position: relative;
- width: 28px;
-
- path {
- fill: gesso-color(text, link);
- }
}
.c-read-more-link__accessibility-description {
diff --git a/source/03-components/side-menu/side-menu.scss b/source/03-components/side-menu/side-menu.scss
index 4607e34c5..d62d79e40 100644
--- a/source/03-components/side-menu/side-menu.scss
+++ b/source/03-components/side-menu/side-menu.scss
@@ -3,10 +3,12 @@
@use '00-config' as *;
-$side-menu-bg-color: gesso-color(ui, generic, background-light);
+$side-menu-bg-color: var(--gesso-background-secondary-color);
.c-side-menu {
- background: $side-menu-bg-color;
+ @include color-theme(default);
+ background-color: $side-menu-bg-color;
+ color: var(--gesso-text-color);
font-size: rem(gesso-font-size(5));
height: 100vh;
inset-block-start: 0;
@@ -83,7 +85,7 @@ $side-menu-bg-color: gesso-color(ui, generic, background-light);
.c-side-menu__back {
@include text-button;
- color: gesso-color(text, link);
+ color: var(--gesso-link-color);
&::before {
@include svg-background(mobile-arrow-down);
@@ -100,7 +102,7 @@ $side-menu-bg-color: gesso-color(ui, generic, background-light);
&:hover,
&:focus {
- color: gesso-color(text, link-hover);
+ color: var(--gesso-link-hover-color);
}
}
diff --git a/source/03-components/table/_table.scss b/source/03-components/table/_table.scss
index 42a717d1b..52ea17968 100644
--- a/source/03-components/table/_table.scss
+++ b/source/03-components/table/_table.scss
@@ -7,7 +7,7 @@
thead {
display: table;
table-layout: fixed;
- width: calc(100% - var(--scrollbar-width));
+ width: calc(100% - var(--gesso-scrollbar-width));
}
tbody {
diff --git a/source/03-components/tag/tag.scss b/source/03-components/tag/tag.scss
index 21bb74a48..d04b966cc 100644
--- a/source/03-components/tag/tag.scss
+++ b/source/03-components/tag/tag.scss
@@ -3,8 +3,8 @@
@use '00-config' as *;
.c-tag {
- @include link(gesso-color(ui, generic, accent-dark));
- border: 2px solid gesso-color(ui, generic, accent-light);
+ @include link(var(--gesso-tag-text-color));
+ border: 2px solid var(--gesso-tag-border-color);
border-radius: 70px;
display: inline-block;
font-size: rem(gesso-font-size(2));
@@ -18,7 +18,7 @@
&:hover,
&:focus {
- box-shadow: 0 0 0 2px gesso-color(ui, generic, accent-light);
+ box-shadow: 0 0 0 2px var(--gesso-tag-box-shadow-color);
outline: 0;
}
}
diff --git a/source/06-utility/_setScrollbarProperty.es6.js b/source/06-utility/_setScrollbarProperty.es6.js
index 54a0b67b4..7ca6d6d32 100644
--- a/source/06-utility/_setScrollbarProperty.es6.js
+++ b/source/06-utility/_setScrollbarProperty.es6.js
@@ -21,7 +21,7 @@ function setScrollbarProperty() {
const scrollbarWidth = calculateScrollbarSize();
if (!Number.isNaN(scrollbarWidth)) {
document.documentElement.style.setProperty(
- '--scrollbar-width',
+ '--gesso-scrollbar-width',
`${scrollbarWidth}px`
);
}