From 7a4e3ba2b48c507a1dab1038a1804b6146b419c1 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Mon, 17 Nov 2025 12:27:35 +0100 Subject: [PATCH 01/16] part1 --- src/frontend/apps/impress/cunningham.ts | 441 +- src/frontend/apps/impress/package.json | 4 +- .../impress/src/assets/icons/icon-docs.svg | 2 +- .../apps/impress/src/components/Box.tsx | 32 +- .../apps/impress/src/components/BoxButton.tsx | 6 +- .../apps/impress/src/components/Card.tsx | 2 +- .../impress/src/components/DropButton.tsx | 2 +- .../apps/impress/src/components/Text.tsx | 4 +- .../impress/src/components/TextErrors.tsx | 2 +- .../components/dropdown-menu/DropdownMenu.tsx | 20 +- .../src/components/filter/FilterDropdown.tsx | 17 +- .../quick-search/QuickSearchStyle.tsx | 24 +- .../separators/HorizontalSeparator.tsx | 2 +- .../separators/SeparatedSection.tsx | 2 +- .../src/cunningham/cunningham-style.css | 2 +- .../src/cunningham/cunningham-tokens.css | 7931 +++++++++++++---- .../src/cunningham/cunningham-tokens.ts | 1938 +++- .../src/cunningham/useCunninghamTheme.tsx | 26 +- .../features/auth/components/ButtonLogin.tsx | 4 +- .../components/custom-blocks/CalloutBlock.tsx | 4 +- .../InterlinkingLinkInlineContent.tsx | 2 +- .../Interlinking/SearchPage.tsx | 18 +- .../src/features/docs/doc-editor/styles.tsx | 14 +- .../doc-header/components/AlertNetwork.tsx | 2 +- .../doc-header/components/AlertPublic.tsx | 2 +- .../doc-header/components/AlertRestore.tsx | 2 +- .../doc-header/components/BoutonShare.tsx | 2 +- .../doc-header/components/DocHeaderInfo.tsx | 2 +- .../docs/doc-header/components/DocTitle.tsx | 8 +- .../docs/doc-header/components/DocToolBox.tsx | 4 +- .../components/DocInheritedShareContent.tsx | 6 +- .../doc-share/components/DocRoleDropdown.tsx | 2 +- .../components/DocShareAddMemberList.tsx | 4 +- .../components/DocShareAddMemberListItem.tsx | 4 +- .../components/DocShareInvitation.tsx | 2 +- .../doc-share/components/DocVisibility.tsx | 4 +- .../doc-share/components/SearchUserRow.tsx | 4 +- .../doc-table-content/components/Heading.tsx | 2 +- .../components/TableContent.tsx | 4 +- .../doc-tree/components/DocSubPageItem.tsx | 16 +- .../docs/doc-tree/components/DocTree.tsx | 6 +- .../components/ModalSelectVersion.tsx | 7 +- .../doc-versioning/components/VersionItem.tsx | 4 +- .../components/DocGridContentList.tsx | 6 +- .../docs-grid/components/DocsGridItem.tsx | 6 +- .../components/DocsGridTrashbinActions.tsx | 2 +- .../docs/docs-grid/components/Droppable.tsx | 4 +- .../impress/src/features/footer/Footer.tsx | 13 +- .../src/features/header/components/Header.tsx | 6 +- .../components/LefPanelTargetFilters.tsx | 4 +- .../left-panel/components/LeftPanel.tsx | 6 +- .../components/LeftPanelFavoriteItem.tsx | 2 +- .../components/ResizableLeftPanel.tsx | 2 +- .../components/DocEditorSkeleton.tsx | 12 +- .../skeletons/components/Skeleton.tsx | 2 +- .../apps/impress/src/layouts/MainLayout.tsx | 6 +- .../apps/impress/src/pages/offline/index.tsx | 2 +- .../apps/impress/src/utils/styleBuilder.ts | 14 +- src/frontend/yarn.lock | 18 +- 59 files changed, 8127 insertions(+), 2564 deletions(-) diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts index 5accadd33c..be37e4ccae 100644 --- a/src/frontend/apps/impress/cunningham.ts +++ b/src/frontend/apps/impress/cunningham.ts @@ -1,57 +1,54 @@ import { cunninghamConfig as tokens } from '@gouvfr-lasuite/ui-kit'; -const customColors = { - 'primary-action': '#1212FF', - 'primary-bg': '#FAFAFA', - 'primary-focus': '#0A76F6', - 'secondary-icon': 'var(--c--theme--colors--primary-text)', - 'blue-400': '#7AB1E8', - 'blue-500': '#417DC4', - 'blue-600': '#3558A2', - 'brown-400': '#E6BE92', - 'brown-500': '#BD987A', - 'brown-600': '#745B47', - 'cyan-400': '#34BAB5', - 'cyan-500': '#009099', - 'cyan-600': '#006A6F', - 'gold-400': '#FFCA00', - 'gold-500': '#C3992A', - 'gold-600': '#695240', - 'green-400': '#34CB6A', - 'green-500': '#00A95F', - 'green-600': '#297254', - 'olive-400': '#99C221', - 'olive-500': '#68A532', - 'olive-600': '#447049', - 'orange-400': '#FF732C', - 'orange-500': '#E4794A', - 'orange-600': '#755348', - 'pink-400': '#FFB7AE', - 'pink-500': '#E18B76', - 'pink-600': '#8D533E', - 'purple-400': '#CE70CC', - 'purple-500': '#A558A0', - 'purple-600': '#6E445A', - 'yellow-400': '#D8C634', - 'yellow-500': '#B7A73F', - 'yellow-600': '#66673D', -}; +console.log('Using Cunningham theme for Impress docs', tokens); + +// const customColors = { +// 'primary-action': '#1212FF', +// 'primary-bg': '#FAFAFA', +// 'primary-focus': '#0A76F6', +// 'secondary-icon': 'var(--c--globals--colors--primary-text)', +// 'blue-400': '#7AB1E8', +// 'blue-500': '#417DC4', +// 'blue-600': '#3558A2', +// 'brown-400': '#E6BE92', +// 'brown-500': '#BD987A', +// 'brown-600': '#745B47', +// 'cyan-400': '#34BAB5', +// 'cyan-500': '#009099', +// 'cyan-600': '#006A6F', +// 'gold-400': '#FFCA00', +// 'gold-500': '#C3992A', +// 'gold-600': '#695240', +// 'green-400': '#34CB6A', +// 'green-500': '#00A95F', +// 'green-600': '#297254', +// 'olive-400': '#99C221', +// 'olive-500': '#68A532', +// 'olive-600': '#447049', +// 'orange-400': '#FF732C', +// 'orange-500': '#E4794A', +// 'orange-600': '#755348', +// 'pink-400': '#FFB7AE', +// 'pink-500': '#E18B76', +// 'pink-600': '#8D533E', +// 'purple-400': '#CE70CC', +// 'purple-500': '#A558A0', +// 'purple-600': '#6E445A', +// 'yellow-400': '#D8C634', +// 'yellow-500': '#B7A73F', +// 'yellow-600': '#66673D', +// }; +//tokens.themes.default.globals. -tokens.themes.default.theme = { - ...tokens.themes.default.theme, +tokens.themes.default.globals = { + ...tokens.themes.default.globals, ...{ - logo: { - src: '', - alt: '', - widthHeader: '', - widthFooter: '', - }, - colors: { - ...tokens.themes.default.theme.colors, - ...customColors, - }, + // colors: { + // ...tokens.themes.default.globals.colors, + // //...customColors, + // }, font: { - ...tokens.themes.default.theme.font, + ...tokens.themes.default.globals.font, families: { base: 'sans-serif', accent: 'sans-serif', @@ -63,6 +60,12 @@ tokens.themes.default.theme = { tokens.themes.default.components = { ...tokens.themes.default.components, ...{ + logo: { + src: '', + alt: '', + widthHeader: '', + widthFooter: '', + }, 'la-gaufre': false, 'home-proconnect': false, 'image-system-filter': '', @@ -71,31 +74,25 @@ tokens.themes.default.components = { 'png-light': '/assets/favicon-light.png', 'png-dark': '/assets/favicon-dark.png', }, - button: { - ...tokens.themes.default.components.button, - primary: { - ...tokens.themes.default.components.button.primary, - ...{ - 'background--disabled': 'var(--c--theme--colors--greyscale-100)', - }, - disabled: 'var(--c--theme--colors--greyscale-400)', - }, - }, + //button: { + //...tokens.themes.default.components.button, + // primary: { + // ...tokens.themes.default.components.button.primary, + // ...{ + // 'background--disabled': 'var(--c--globals--colors--gray-100)', + // }, + // disabled: 'var(--c--globals--colors--gray-400)', + // }, + //}, }, }; const dsfrTheme = { dsfr: { - theme: { - colors: { - 'secondary-icon': '#C9191E', - }, - logo: { - src: '/assets/logo-gouv.svg', - widthHeader: '110px', - widthFooter: '220px', - alt: 'Gouvernement Logo', - }, + // colors: { + // 'secondary-icon': '#C9191E', + // }, + globals: { font: { families: { base: 'Marianne, Inter, Roboto Flex Variable, sans-serif', @@ -104,6 +101,12 @@ const dsfrTheme = { }, }, components: { + logo: { + src: '/assets/logo-gouv.svg', + widthHeader: '110px', + widthFooter: '220px', + alt: 'Gouvernement Logo', + }, 'la-gaufre': true, 'home-proconnect': true, favicon: { @@ -115,162 +118,162 @@ const dsfrTheme = { }, }; -const genericTheme = { - generic: { - theme: { - colors: { - 'primary-action': '#206EBD', - 'primary-focus': '#1E64BF', - 'primary-text': '#2E2C28', - 'primary-050': '#F8F8F7', - 'primary-100': '#F0EFEC', - 'primary-150': '#F4F4FD', - 'primary-200': '#E8E7E4', - 'primary-300': '#CFCDC9', - 'primary-400': '#979592', - 'primary-500': '#82807D', - 'primary-600': '#3F3D39', - 'primary-700': '#2E2C28', - 'primary-800': '#302E29', - 'primary-900': '#282622', - 'primary-950': '#201F1C', - 'secondary-text': '#fff', - 'secondary-50': '#F4F7FA', - 'secondary-100': '#D7E3EE', - 'secondary-200': '#B8CCE1', - 'secondary-300': '#99B4D3', - 'secondary-400': '#7595BE', - 'secondary-500': '#5874A0', - 'secondary-600': '#3A5383', - 'secondary-700': '#1E3462', - 'secondary-800': '#091B41', - 'secondary-900': '#08183B', - 'secondary-950': '#071636', - 'greyscale-text': '#3C3B38', - 'greyscale-000': '#fff', - 'greyscale-050': '#F8F7F7', - 'greyscale-100': '#F3F3F2', - 'greyscale-200': '#ECEBEA', - 'greyscale-250': '#E4E3E2', - 'greyscale-300': '#D3D2CF', - 'greyscale-350': '#eee', - 'greyscale-400': '#96948E', - 'greyscale-500': '#817E77', - 'greyscale-600': '#6A6862', - 'greyscale-700': '#3C3B38', - 'greyscale-750': '#383632', - 'greyscale-800': '#2D2B27', - 'greyscale-900': '#262522', - 'greyscale-950': '#201F1C', - 'greyscale-1000': '#181714', - 'success-text': '#234935', - 'success-50': '#F3FBF5', - 'success-100': '#E4F7EA', - 'success-200': '#CAEED4', - 'success-300': '#A0E0B5', - 'success-400': '#6CC88C', - 'success-500': '#6CC88C', - 'success-600': '#358D5C', - 'success-700': '#2D704B', - 'success-800': '#28583F', - 'success-900': '#234935', - 'success-950': '#0F281B', - 'info-text': '#212445', - 'info-50': '#F2F6FB', - 'info-100': '#E2E9F5', - 'info-200': '#CCD8EE', - 'info-300': '#A9C0E3', - 'info-400': '#809DD4', - 'info-500': '#617BC7', - 'info-600': '#4A5CBF', - 'info-700': '#3E49B2', - 'info-800': '#353C8F', - 'info-900': '#303771', - 'info-950': '#212445', - 'warning-text': '#D97C3A', - 'warning-50': '#FDF7F1', - 'warning-100': '#FBEDDC', - 'warning-200': '#F5D9B9', - 'warning-300': '#EDBE8C', - 'warning-400': '#E2985C', - 'warning-500': '#D97C3A', - 'warning-600': '#C96330', - 'warning-700': '#A34B32', - 'warning-800': '#813B2C', - 'warning-900': '#693327', - 'warning-950': '#381713', - 'danger-action': '#C0182A', - 'danger-text': '#FFF', - 'danger-050': '#FDF5F4', - 'danger-100': '#FBEBE8', - 'danger-200': '#F9E0DC', - 'danger-300': '#F3C3BD', - 'danger-400': '#E26552', - 'danger-500': '#C91F00', - 'danger-600': '#A71901', - 'danger-700': '#562C2B', - 'danger-800': '#392425', - 'danger-900': '#311F20', - 'danger-950': '#2A191A', - 'blue-400': '#8BAECC', - 'blue-500': '#567AA2', - 'blue-600': '#455784', - 'brown-400': '#E4C090', - 'brown-500': '#BA9977', - 'brown-600': '#735C45', - 'cyan-400': '#5CBEC9', - 'cyan-500': '#43A1B3', - 'cyan-600': '#39809B', - 'gold-400': '#ECBF50', - 'gold-500': '#DFA038', - 'gold-600': '#C17B31', - 'green-400': '#5DBD9A', - 'green-500': '#3AA183', - 'green-600': '#2A816D', - 'olive-400': '#AFD662', - 'olive-500': '#90BB4B', - 'olive-600': '#6E9441', - 'orange-400': '#E2985C', - 'orange-500': '#D97C3A', - 'orange-600': '#C96330', - 'pink-400': '#BE8FC8', - 'pink-500': '#A563B1', - 'pink-600': '#8B44A5', - 'purple-400': '#BE8FC8', - 'purple-500': '#A563B1', - 'purple-600': '#8B44A5', - 'yellow-400': '#EDC947', - 'yellow-500': '#DBB13A', - 'yellow-600': '#B88A34', - }, - font: { - families: { - base: 'Inter, Roboto Flex Variable, sans-serif', - accent: 'Inter, Roboto Flex Variable, sans-serif', - }, - }, - }, - components: { - button: { - primary: { - background: { - 'color-hover': 'var(--c--theme--colors--primary-focus)', - 'color-active': 'var(--c--theme--colors--primary-focus)', - 'color-focus': 'var(--c--theme--colors--primary-focus)', - }, - }, - }, - 'image-system-filter': 'saturate(0.2)', - }, - }, -}; +// const genericTheme = { +// generic: { +// theme: { +// colors: { +// 'primary-action': '#206EBD', +// 'primary-focus': '#1E64BF', +// 'primary-text': '#2E2C28', +// 'primary-050': '#F8F8F7', +// 'primary-100': '#F0EFEC', +// 'primary-150': '#F4F4FD', +// 'primary-200': '#E8E7E4', +// 'primary-300': '#CFCDC9', +// 'primary-400': '#979592', +// 'primary-500': '#82807D', +// 'primary-600': '#3F3D39', +// 'primary-700': '#2E2C28', +// 'primary-800': '#302E29', +// 'primary-900': '#282622', +// 'primary-950': '#201F1C', +// 'secondary-text': '#fff', +// 'secondary-50': '#F4F7FA', +// 'secondary-100': '#D7E3EE', +// 'secondary-200': '#B8CCE1', +// 'secondary-300': '#99B4D3', +// 'secondary-400': '#7595BE', +// 'secondary-500': '#5874A0', +// 'secondary-600': '#3A5383', +// 'secondary-700': '#1E3462', +// 'secondary-800': '#091B41', +// 'secondary-900': '#08183B', +// 'secondary-950': '#071636', +// 'gray-text': '#3C3B38', +// 'gray-000': '#fff', +// 'gray-050': '#F8F7F7', +// 'gray-100': '#F3F3F2', +// 'gray-200': '#ECEBEA', +// 'gray-250': '#E4E3E2', +// 'gray-300': '#D3D2CF', +// 'gray-350': '#eee', +// 'gray-400': '#96948E', +// 'gray-500': '#817E77', +// 'gray-600': '#6A6862', +// 'gray-700': '#3C3B38', +// 'gray-750': '#383632', +// 'gray-800': '#2D2B27', +// 'gray-900': '#262522', +// 'gray-950': '#201F1C', +// 'gray-1000': '#181714', +// 'success-text': '#234935', +// 'success-50': '#F3FBF5', +// 'success-100': '#E4F7EA', +// 'success-200': '#CAEED4', +// 'success-300': '#A0E0B5', +// 'success-400': '#6CC88C', +// 'success-500': '#6CC88C', +// 'success-600': '#358D5C', +// 'success-700': '#2D704B', +// 'success-800': '#28583F', +// 'success-900': '#234935', +// 'success-950': '#0F281B', +// 'info-text': '#212445', +// 'info-50': '#F2F6FB', +// 'info-100': '#E2E9F5', +// 'info-200': '#CCD8EE', +// 'info-300': '#A9C0E3', +// 'info-400': '#809DD4', +// 'info-500': '#617BC7', +// 'info-600': '#4A5CBF', +// 'info-700': '#3E49B2', +// 'info-800': '#353C8F', +// 'info-900': '#303771', +// 'info-950': '#212445', +// 'warning-text': '#D97C3A', +// 'warning-50': '#FDF7F1', +// 'warning-100': '#FBEDDC', +// 'warning-200': '#F5D9B9', +// 'warning-300': '#EDBE8C', +// 'warning-400': '#E2985C', +// 'warning-500': '#D97C3A', +// 'warning-600': '#C96330', +// 'warning-700': '#A34B32', +// 'warning-800': '#813B2C', +// 'warning-900': '#693327', +// 'warning-950': '#381713', +// 'danger-action': '#C0182A', +// 'danger-text': '#FFF', +// 'danger-050': '#FDF5F4', +// 'danger-100': '#FBEBE8', +// 'danger-200': '#F9E0DC', +// 'danger-300': '#F3C3BD', +// 'danger-400': '#E26552', +// 'danger-500': '#C91F00', +// 'danger-600': '#A71901', +// 'danger-700': '#562C2B', +// 'danger-800': '#392425', +// 'danger-900': '#311F20', +// 'danger-950': '#2A191A', +// 'blue-400': '#8BAECC', +// 'blue-500': '#567AA2', +// 'blue-600': '#455784', +// 'brown-400': '#E4C090', +// 'brown-500': '#BA9977', +// 'brown-600': '#735C45', +// 'cyan-400': '#5CBEC9', +// 'cyan-500': '#43A1B3', +// 'cyan-600': '#39809B', +// 'gold-400': '#ECBF50', +// 'gold-500': '#DFA038', +// 'gold-600': '#C17B31', +// 'green-400': '#5DBD9A', +// 'green-500': '#3AA183', +// 'green-600': '#2A816D', +// 'olive-400': '#AFD662', +// 'olive-500': '#90BB4B', +// 'olive-600': '#6E9441', +// 'orange-400': '#E2985C', +// 'orange-500': '#D97C3A', +// 'orange-600': '#C96330', +// 'pink-400': '#BE8FC8', +// 'pink-500': '#A563B1', +// 'pink-600': '#8B44A5', +// 'purple-400': '#BE8FC8', +// 'purple-500': '#A563B1', +// 'purple-600': '#8B44A5', +// 'yellow-400': '#EDC947', +// 'yellow-500': '#DBB13A', +// 'yellow-600': '#B88A34', +// }, +// font: { +// families: { +// base: 'Inter, Roboto Flex Variable, sans-serif', +// accent: 'Inter, Roboto Flex Variable, sans-serif', +// }, +// }, +// }, +// components: { +// button: { +// primary: { +// background: { +// 'color-hover': 'var(--c--globals--colors--primary-focus)', +// 'color-active': 'var(--c--globals--colors--primary-focus)', +// 'color-focus': 'var(--c--globals--colors--primary-focus)', +// }, +// }, +// }, +// 'image-system-filter': 'saturate(0.2)', +// }, +// }, +// }; const docsTokens = { ...tokens, themes: { ...tokens.themes, ...dsfrTheme, - ...genericTheme, + //...genericTheme, }, }; diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json index 439d6d84ce..b3737d41fe 100644 --- a/src/frontend/apps/impress/package.json +++ b/src/frontend/apps/impress/package.json @@ -35,11 +35,11 @@ "@fontsource-variable/material-symbols-outlined": "5.2.28", "@fontsource/material-icons": "5.2.7", "@gouvfr-lasuite/integration": "1.0.3", - "@gouvfr-lasuite/ui-kit": "0.16.2", + "@gouvfr-lasuite/ui-kit": "0.18.0", "@hocuspocus/provider": "3.4.0", "@mantine/core": "8.3.6", "@mantine/hooks": "8.3.6", - "@openfun/cunningham-react": "3.2.3", + "@openfun/cunningham-react": "4.0.0", "@react-pdf/renderer": "4.3.1", "@sentry/nextjs": "10.22.0", "@tanstack/react-query": "5.90.6", diff --git a/src/frontend/apps/impress/src/assets/icons/icon-docs.svg b/src/frontend/apps/impress/src/assets/icons/icon-docs.svg index 882e92efa4..ba2b786f4a 100644 --- a/src/frontend/apps/impress/src/assets/icons/icon-docs.svg +++ b/src/frontend/apps/impress/src/assets/icons/icon-docs.svg @@ -1,7 +1,7 @@ ` if (!$theme || !$variation) { return ''; } - return `color: var(--c--theme--colors--${$theme}-${$variation});`; + return `color: var(--c--globals--colors--${$theme}-${$variation});`; }} ${({ $transition }) => $transition && `transition: ${$transition};`} ${({ $width }) => $width && `width: ${$width};`} diff --git a/src/frontend/apps/impress/src/components/BoxButton.tsx b/src/frontend/apps/impress/src/components/BoxButton.tsx index 087151164f..634c2cefb3 100644 --- a/src/frontend/apps/impress/src/components/BoxButton.tsx +++ b/src/frontend/apps/impress/src/components/BoxButton.tsx @@ -24,7 +24,7 @@ export type BoxButtonType = BoxType & { */ const BoxButton = forwardRef( ({ $css, ...props }, ref) => { - const theme = props.$theme || 'greyscale'; + const theme = props.$theme || 'gray'; const variation = props.$variation || '400'; return ( @@ -41,12 +41,12 @@ const BoxButton = forwardRef( outline: none; font-family: inherit; color: ${props.disabled - ? `var(--c--theme--colors--${theme}-400) !important` + ? `var(--c--globals--colors--${theme}-400) !important` : `inherit`}; &:focus-visible { transition: none; - outline: 2px solid var(--c--theme--colors--${theme}-${variation}); + outline: 2px solid var(--c--globals--colors--${theme}-${variation}); border-radius: 1px; outline-offset: 4px; } diff --git a/src/frontend/apps/impress/src/components/Card.tsx b/src/frontend/apps/impress/src/components/Card.tsx index 4bc35a7f92..33cf64e65b 100644 --- a/src/frontend/apps/impress/src/components/Card.tsx +++ b/src/frontend/apps/impress/src/components/Card.tsx @@ -19,7 +19,7 @@ export const Card = ({ $background="white" $radius="4px" $css={css` - border: 1px solid ${colorsTokens['greyscale-200']}; + border: 1px solid ${colorsTokens['gray-200']}; ${$css} `} {...props} diff --git a/src/frontend/apps/impress/src/components/DropButton.tsx b/src/frontend/apps/impress/src/components/DropButton.tsx index 09772b4b49..c9b4cdbb41 100644 --- a/src/frontend/apps/impress/src/components/DropButton.tsx +++ b/src/frontend/apps/impress/src/components/DropButton.tsx @@ -38,7 +38,7 @@ const StyledButton = styled(Button)` ); } &:focus-visible { - box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400); + box-shadow: 0 0 0 2px var(--c--globals--colors--primary-400); border-radius: 4px; } ${({ $css }) => $css}; diff --git a/src/frontend/apps/impress/src/components/Text.tsx b/src/frontend/apps/impress/src/components/Text.tsx index 6b0f761ce8..d7db460d8f 100644 --- a/src/frontend/apps/impress/src/components/Text.tsx +++ b/src/frontend/apps/impress/src/components/Text.tsx @@ -5,7 +5,7 @@ import { tokens } from '@/cunningham'; import { Box, BoxProps } from './Box'; -const { sizes } = tokens.themes.default.theme.font; +const { sizes } = tokens.themes.default.globals.font; type TextSizes = keyof typeof sizes; export interface TextProps extends BoxProps { @@ -39,7 +39,7 @@ const Text = forwardRef>( @@ -234,7 +234,7 @@ export const DropdownMenu = ({ {option.icon && typeof option.icon === 'string' && ( )} diff --git a/src/frontend/apps/impress/src/components/filter/FilterDropdown.tsx b/src/frontend/apps/impress/src/components/filter/FilterDropdown.tsx index ce71f2087b..514dafda04 100644 --- a/src/frontend/apps/impress/src/components/filter/FilterDropdown.tsx +++ b/src/frontend/apps/impress/src/components/filter/FilterDropdown.tsx @@ -34,14 +34,15 @@ export const FilterDropdown = ({ $css={css` border: 1px solid ${selectedOption - ? 'var(--c--theme--colors--primary-500)' - : 'var(--c--theme--colors--greyscale-250)'}; + ? 'var(--c--globals--colors--primary-500)' + : 'var(--c--globals--colors--gray-250)'}; border-radius: 4px; background-color: ${selectedOption - ? 'var(--c--theme--colors--primary-100)' - : 'var(--c--theme--colors--greyscale-000)'}; - gap: var(--c--theme--spacings--2xs); - padding: var(--c--theme--spacings--2xs) var(--c--theme--spacings--xs); + ? 'var(--c--globals--colors--primary-100)' + : 'var(--c--globals--colors--gray-000)'}; + gap: var(--c--globals--spacings--2xs); + padding: var(--c--globals--spacings--2xs) + var(--c--globals--spacings--xs); `} color="secondary" $direction="row" @@ -50,7 +51,7 @@ export const FilterDropdown = ({ {selectedOption?.label ?? options[0].label} @@ -58,7 +59,7 @@ export const FilterDropdown = ({ $size="16px" iconName="keyboard_arrow_down" $variation={selectedOption ? '800' : '600'} - $theme={selectedOption ? 'primary' : 'greyscale'} + $theme={selectedOption ? 'primary' : 'gray'} /> diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx index 766db7f16d..90ab42e9de 100644 --- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx +++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx @@ -22,18 +22,18 @@ export const QuickSearchStyle = createGlobalStyle` padding: 8px; background: white; outline: none; - color: var(--c--theme--colors--greyscale-1000); + color: var(--c--globals--colors--gray-1000); border-radius: 0; &::placeholder { - color: var(--c--theme--colors--greyscale-500); + color: var(--c--globals--colors--gray-500); } } [cmdk-item] { content-visibility: auto; cursor: pointer; - border-radius: var(--c--theme--spacings--xs); + border-radius: var(--c--globals--spacings--xs); font-size: 14px; display: flex; align-items: center; @@ -49,14 +49,14 @@ export const QuickSearchStyle = createGlobalStyle` &:hover, &[data-selected='true'] { - background: var(--c--theme--colors--greyscale-100); + background: var(--c--globals--colors--gray-100); .show-right-on-focus { opacity: 1; } } &[data-disabled='true'] { - color: var(--c--theme--colors--greyscale-500); + color: var(--c--globals--colors--gray-500); cursor: not-allowed; } @@ -83,7 +83,7 @@ export const QuickSearchStyle = createGlobalStyle` height: 20px; border-radius: 4px; color: white; - background: var(--c--theme--colors--greyscale-500); + background: var(--c--globals--colors--gray-500); display: inline-flex; align-items: center; justify-content: center; @@ -94,7 +94,7 @@ export const QuickSearchStyle = createGlobalStyle` [cmdk-separator] { height: 1px; width: 100%; - background: var(--c--theme--colors--greyscale-500); + background: var(--c--globals--colors--gray-500); margin: 4px 0; } @@ -104,13 +104,13 @@ export const QuickSearchStyle = createGlobalStyle` [cmdk-group-heading] { user-select: none; - font-size: var(--c--theme--font--sizes--sm); - color: var(--c--theme--colors--greyscale-700); + font-size: var(--c--globals--font--sizes--sm); + color: var(--c--globals--colors--gray-700); font-weight: bold; display: flex; align-items: center; - margin-bottom: var(--c--theme--spacings--xs); + margin-bottom: var(--c--globals--spacings--xs); } [cmdk-empty] { @@ -128,8 +128,8 @@ export const QuickSearchStyle = createGlobalStyle` } .c__modal__title { - font-size: var(--c--theme--font--sizes--xs); - padding: var(--c--theme--spacings--base); + font-size: var(--c--globals--font--sizes--xs); + padding: var(--c--globals--spacings--base); margin-bottom: 0; } } diff --git a/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx b/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx index d446f2b0c2..04640f136a 100644 --- a/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx +++ b/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx @@ -33,7 +33,7 @@ export const HorizontalSeparator = ({ $background={ variant === SeparatorVariant.DARK ? '#e5e5e533' - : colorsTokens['greyscale-100'] + : colorsTokens['gray-100'] } className="--docs--horizontal-separator" /> diff --git a/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx b/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx index 0411f5b0e1..28d6aba0da 100644 --- a/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx +++ b/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx @@ -21,7 +21,7 @@ export const SeparatedSection = ({ padding: ${spacingsTokens['sm']} 0; ${showSeparator && css` - border-bottom: 1px solid ${colorsTokens['greyscale-200']}; + border-bottom: 1px solid ${colorsTokens['gray-200']}; `} `} > diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css index 54d0c67d0b..31e41fdb88 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css @@ -26,7 +26,7 @@ * Select **/ --c--components--forms-select--value-color--disabled: var( - --c--theme--colors--greyscale-400 + --c--globals--colors--gray-400 ); /** diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css index 8bfbc0977b..9a19df5426 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css @@ -1,2775 +1,7366 @@ :root { - --c--theme--colors--secondary-text: #fff; - --c--theme--colors--secondary-100: #fee9ea; - --c--theme--colors--secondary-200: #fedfdf; - --c--theme--colors--secondary-300: #fdbfbf; - --c--theme--colors--secondary-400: #e1020f; - --c--theme--colors--secondary-500: #c91a1f; - --c--theme--colors--secondary-600: #5e2b2b; - --c--theme--colors--secondary-700: #3b2424; - --c--theme--colors--secondary-800: #341f1f; - --c--theme--colors--secondary-900: #2b1919; - --c--theme--colors--info-text: #0078f3; - --c--theme--colors--info-100: #e8edff; - --c--theme--colors--info-200: #dde5ff; - --c--theme--colors--info-300: #bccdff; - --c--theme--colors--info-400: #518fff; - --c--theme--colors--info-500: #0078f3; - --c--theme--colors--info-600: #0063cb; - --c--theme--colors--info-700: #273961; - --c--theme--colors--info-800: #222a3f; - --c--theme--colors--info-900: #1d2437; - --c--theme--colors--greyscale-100: #eee; - --c--theme--colors--greyscale-200: #e5e5e5; - --c--theme--colors--greyscale-300: #cecece; - --c--theme--colors--greyscale-400: #929292; - --c--theme--colors--greyscale-500: #7c7c7c; - --c--theme--colors--greyscale-600: #666; - --c--theme--colors--greyscale-700: #3a3a3a; - --c--theme--colors--greyscale-800: #2a2a2a; - --c--theme--colors--greyscale-900: #242424; - --c--theme--colors--greyscale-000: #fff; - --c--theme--colors--primary-100: #ececfe; - --c--theme--colors--primary-200: #e3e3fd; - --c--theme--colors--primary-300: #cacafb; - --c--theme--colors--primary-400: #8585f6; - --c--theme--colors--primary-500: #6a6af4; - --c--theme--colors--primary-600: #313178; - --c--theme--colors--primary-700: #272747; - --c--theme--colors--primary-800: #000091; - --c--theme--colors--primary-900: #21213f; - --c--theme--colors--success-100: #dffee6; - --c--theme--colors--success-200: #b8fec9; - --c--theme--colors--success-300: #88fdaa; - --c--theme--colors--success-400: #3bea7e; - --c--theme--colors--success-500: #1f8d49; - --c--theme--colors--success-600: #18753c; - --c--theme--colors--success-700: #204129; - --c--theme--colors--success-800: #1e2e22; - --c--theme--colors--success-900: #19281d; - --c--theme--colors--warning-100: #fff4f3; - --c--theme--colors--warning-200: #ffe9e6; - --c--theme--colors--warning-300: #ffded9; - --c--theme--colors--warning-400: #ffbeb4; - --c--theme--colors--warning-500: #d64d00; - --c--theme--colors--warning-600: #b34000; - --c--theme--colors--warning-700: #5e2c21; - --c--theme--colors--warning-800: #3e241e; - --c--theme--colors--warning-900: #361e19; - --c--theme--colors--danger-100: #ffe9e9; - --c--theme--colors--danger-200: #fdd; - --c--theme--colors--danger-300: #ffbdbd; - --c--theme--colors--danger-400: #ff5655; - --c--theme--colors--danger-500: #f60700; - --c--theme--colors--danger-600: #ce0500; - --c--theme--colors--danger-700: #642626; - --c--theme--colors--danger-800: #412121; - --c--theme--colors--danger-900: #391c1c; - --c--theme--colors--primary-text: #000091; - --c--theme--colors--success-text: #1f8d49; - --c--theme--colors--warning-text: #d64d00; - --c--theme--colors--danger-text: #fff; - --c--theme--colors--primary-050: #f5f5fe; - --c--theme--colors--primary-150: #f4f4fd; - --c--theme--colors--greyscale-text: #303c4b; - --c--theme--colors--greyscale-050: #f6f6f6; - --c--theme--colors--greyscale-250: #ddd; - --c--theme--colors--greyscale-350: #ddd; - --c--theme--colors--greyscale-750: #353535; - --c--theme--colors--greyscale-950: #1e1e1e; - --c--theme--colors--greyscale-1000: #161616; - --c--theme--colors--danger-050: #fff4f4; - --c--theme--colors--blue-500: #417dc4; - --c--theme--colors--brown-500: #bd987a; - --c--theme--colors--cyan-500: #009099; - --c--theme--colors--gold-500: #c3992a; - --c--theme--colors--green-500: #00a95f; - --c--theme--colors--olive-500: #68a532; - --c--theme--colors--orange-500: #e4794a; - --c--theme--colors--purple-500: #a558a0; - --c--theme--colors--red-500: #e1000f; - --c--theme--colors--yellow-500: #b7a73f; - --c--theme--colors--rose-500: #e18b76; - --c--theme--colors--primary-action: #1212ff; - --c--theme--colors--primary-bg: #fafafa; - --c--theme--colors--primary-focus: #0a76f6; - --c--theme--colors--secondary-icon: var(--c--theme--colors--primary-text); - --c--theme--colors--blue-400: #7ab1e8; - --c--theme--colors--blue-600: #3558a2; - --c--theme--colors--brown-400: #e6be92; - --c--theme--colors--brown-600: #745b47; - --c--theme--colors--cyan-400: #34bab5; - --c--theme--colors--cyan-600: #006a6f; - --c--theme--colors--gold-400: #ffca00; - --c--theme--colors--gold-600: #695240; - --c--theme--colors--green-400: #34cb6a; - --c--theme--colors--green-600: #297254; - --c--theme--colors--olive-400: #99c221; - --c--theme--colors--olive-600: #447049; - --c--theme--colors--orange-400: #ff732c; - --c--theme--colors--orange-600: #755348; - --c--theme--colors--pink-400: #ffb7ae; - --c--theme--colors--pink-500: #e18b76; - --c--theme--colors--pink-600: #8d533e; - --c--theme--colors--purple-400: #ce70cc; - --c--theme--colors--purple-600: #6e445a; - --c--theme--colors--yellow-400: #d8c634; - --c--theme--colors--yellow-600: #66673d; - --c--theme--font--sizes--h1: 2rem; - --c--theme--font--sizes--h2: 1.75rem; - --c--theme--font--sizes--h3: 1.5rem; - --c--theme--font--sizes--h4: 1.375rem; - --c--theme--font--sizes--h5: 1.25rem; - --c--theme--font--sizes--h6: 1.125rem; - --c--theme--font--sizes--l: 1rem; - --c--theme--font--sizes--m: 0.8125rem; - --c--theme--font--sizes--s: 0.75rem; - --c--theme--font--sizes--xs: 0.75rem; - --c--theme--font--sizes--sm: 0.875rem; - --c--theme--font--sizes--md: 1rem; - --c--theme--font--sizes--lg: 1.125rem; - --c--theme--font--sizes--ml: 0.938rem; - --c--theme--font--sizes--xl: 1.25rem; - --c--theme--font--sizes--t: 0.6875rem; - --c--theme--font--sizes--xl-alt: 5rem; - --c--theme--font--sizes--lg-alt: 4.5rem; - --c--theme--font--sizes--md-alt: 4rem; - --c--theme--font--sizes--sm-alt: 3.5rem; - --c--theme--font--sizes--xs-alt: 3rem; - --c--theme--font--weights--thin: 100; - --c--theme--font--weights--light: 300; - --c--theme--font--weights--regular: 400; - --c--theme--font--weights--medium: 500; - --c--theme--font--weights--bold: 600; - --c--theme--font--weights--extrabold: 800; - --c--theme--font--weights--black: 900; - --c--theme--font--families--base: sans-serif; - --c--theme--font--families--accent: sans-serif; - --c--theme--font--letterspacings--h1: normal; - --c--theme--font--letterspacings--h2: normal; - --c--theme--font--letterspacings--h3: normal; - --c--theme--font--letterspacings--h4: normal; - --c--theme--font--letterspacings--h5: 1px; - --c--theme--font--letterspacings--h6: normal; - --c--theme--font--letterspacings--l: normal; - --c--theme--font--letterspacings--m: normal; - --c--theme--font--letterspacings--s: normal; - --c--theme--spacings--0: 0; - --c--theme--spacings--xl: 2.5rem; - --c--theme--spacings--l: 3rem; - --c--theme--spacings--b: 1.625rem; - --c--theme--spacings--s: 1rem; - --c--theme--spacings--t: 0.5rem; - --c--theme--spacings--st: 0.25rem; - --c--theme--spacings--none: 0; - --c--theme--spacings--auto: auto; - --c--theme--spacings--bx: 2.2rem; - --c--theme--spacings--full: 100%; - --c--theme--spacings--4xs: 0.125rem; - --c--theme--spacings--3xs: 0.25rem; - --c--theme--spacings--2xs: 0.375rem; - --c--theme--spacings--xs: 0.5rem; - --c--theme--spacings--sm: 0.75rem; - --c--theme--spacings--base: 1rem; - --c--theme--spacings--md: 1.5rem; - --c--theme--spacings--lg: 2rem; - --c--theme--spacings--xxl: 3rem; - --c--theme--spacings--xxxl: 3.5rem; - --c--theme--spacings--4xl: 4rem; - --c--theme--spacings--5xl: 4.5rem; - --c--theme--spacings--6xl: 6rem; - --c--theme--spacings--7xl: 7.5rem; - --c--theme--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0); - --c--theme--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1); - --c--theme--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); - --c--theme--transitions--duration: 250ms; - --c--theme--breakpoints--xs: 480px; - --c--theme--breakpoints--sm: 576px; - --c--theme--breakpoints--md: 768px; - --c--theme--breakpoints--lg: 992px; - --c--theme--breakpoints--xl: 1200px; - --c--theme--breakpoints--xxl: 1400px; - --c--theme--breakpoints--xxs: 320px; - --c--theme--breakpoints--mobile: 768px; - --c--theme--breakpoints--tablet: 1024px; - --c--theme--logo--src: ; - --c--theme--logo--alt: ; - --c--theme--logo--widthheader: ; - --c--theme--logo--widthfooter: ; + --c--globals--colors--logo-1: #377fdb; + --c--globals--colors--logo-2: #377fdb; + --c--globals--colors--logo-1-dark: #95abff; + --c--globals--colors--logo-2-dark: #95abff; + --c--globals--colors--brand-050: #edf0ff; + --c--globals--colors--brand-100: #dae2ff; + --c--globals--colors--brand-150: #c8d3ff; + --c--globals--colors--brand-200: #b5c4ff; + --c--globals--colors--brand-250: #a2b6ff; + --c--globals--colors--brand-300: #90a7ff; + --c--globals--colors--brand-350: #7e98ff; + --c--globals--colors--brand-400: #6c89fe; + --c--globals--colors--brand-450: #5c7af7; + --c--globals--colors--brand-500: #4c6cef; + --c--globals--colors--brand-550: #3e5de7; + --c--globals--colors--brand-600: #304ddf; + --c--globals--colors--brand-650: #2845c1; + --c--globals--colors--brand-700: #223e9e; + --c--globals--colors--brand-750: #1f367d; + --c--globals--colors--brand-800: #1b2e5f; + --c--globals--colors--brand-850: #172446; + --c--globals--colors--brand-900: #121b30; + --c--globals--colors--brand-950: #0c111a; + --c--globals--colors--gray-000: #fff; + --c--globals--colors--gray-025: #f6f8f9; + --c--globals--colors--gray-050: #eef1f4; + --c--globals--colors--gray-100: #dfe2ea; + --c--globals--colors--gray-150: #cfd5de; + --c--globals--colors--gray-200: #c1c7d3; + --c--globals--colors--gray-250: #b2b9c7; + --c--globals--colors--gray-300: #a4abbc; + --c--globals--colors--gray-350: #969eb0; + --c--globals--colors--gray-400: #8891a4; + --c--globals--colors--gray-450: #7b8498; + --c--globals--colors--gray-500: #6d778c; + --c--globals--colors--gray-550: #626a80; + --c--globals--colors--gray-600: #555e74; + --c--globals--colors--gray-650: #4a5267; + --c--globals--colors--gray-700: #3f4759; + --c--globals--colors--gray-750: #363b4c; + --c--globals--colors--gray-800: #2b303d; + --c--globals--colors--gray-850: #222631; + --c--globals--colors--gray-900: #181b24; + --c--globals--colors--gray-950: #0f1117; + --c--globals--colors--gray-1000: #000; + --c--globals--colors--info-050: #e7f2ff; + --c--globals--colors--info-100: #cfe5ff; + --c--globals--colors--info-150: #b7d7ff; + --c--globals--colors--info-200: #a0cafe; + --c--globals--colors--info-250: #8cbcf9; + --c--globals--colors--info-300: #77aef4; + --c--globals--colors--info-350: #63a0ee; + --c--globals--colors--info-400: #5092e7; + --c--globals--colors--info-450: #4185dc; + --c--globals--colors--info-500: #3677cc; + --c--globals--colors--info-550: #2f6abb; + --c--globals--colors--info-600: #265eaa; + --c--globals--colors--info-650: #28528f; + --c--globals--colors--info-700: #274775; + --c--globals--colors--info-750: #243c5e; + --c--globals--colors--info-800: #20314a; + --c--globals--colors--info-850: #1b2637; + --c--globals--colors--info-900: #141c27; + --c--globals--colors--info-950: #0d1118; + --c--globals--colors--success-050: #def7e6; + --c--globals--colors--success-100: #baeecf; + --c--globals--colors--success-150: #a5e2c0; + --c--globals--colors--success-200: #95d4b3; + --c--globals--colors--success-250: #85c6a7; + --c--globals--colors--success-300: #74b99b; + --c--globals--colors--success-350: #65ab8f; + --c--globals--colors--success-400: #579e84; + --c--globals--colors--success-450: #4b9079; + --c--globals--colors--success-500: #40836f; + --c--globals--colors--success-550: #367664; + --c--globals--colors--success-600: #2b695a; + --c--globals--colors--success-650: #2c5a50; + --c--globals--colors--success-700: #2a4d45; + --c--globals--colors--success-750: #26403c; + --c--globals--colors--success-800: #213430; + --c--globals--colors--success-850: #1b2826; + --c--globals--colors--success-900: #151d1c; + --c--globals--colors--success-950: #0d1212; + --c--globals--colors--warning-050: #ffeedf; + --c--globals--colors--warning-100: #ffdcbe; + --c--globals--colors--warning-150: #ffca9c; + --c--globals--colors--warning-200: #ffb778; + --c--globals--colors--warning-250: #fda54f; + --c--globals--colors--warning-300: #f59425; + --c--globals--colors--warning-350: #e78613; + --c--globals--colors--warning-400: #d7790c; + --c--globals--colors--warning-450: #c86c08; + --c--globals--colors--warning-500: #b85f03; + --c--globals--colors--warning-550: #a75400; + --c--globals--colors--warning-600: #984800; + --c--globals--colors--warning-650: #814112; + --c--globals--colors--warning-700: #6c3a19; + --c--globals--colors--warning-750: #58321c; + --c--globals--colors--warning-800: #452a1a; + --c--globals--colors--warning-850: #352117; + --c--globals--colors--warning-900: #261813; + --c--globals--colors--warning-950: #170f0c; + --c--globals--colors--error-050: #ffedeb; + --c--globals--colors--error-100: #ffdad7; + --c--globals--colors--error-150: #ffc7c2; + --c--globals--colors--error-200: #ffb3ad; + --c--globals--colors--error-250: #ff9f99; + --c--globals--colors--error-300: #ff8984; + --c--globals--colors--error-350: #ff706e; + --c--globals--colors--error-400: #fb5759; + --c--globals--colors--error-450: #f63a45; + --c--globals--colors--error-500: #e32c39; + --c--globals--colors--error-550: #cf202d; + --c--globals--colors--error-600: #bd0f23; + --c--globals--colors--error-650: #9d2227; + --c--globals--colors--error-700: #812727; + --c--globals--colors--error-750: #672624; + --c--globals--colors--error-800: #512220; + --c--globals--colors--error-850: #3d1c1b; + --c--globals--colors--error-900: #2a1614; + --c--globals--colors--error-950: #190e0d; + --c--globals--colors--red-050: #ffedeb; + --c--globals--colors--red-100: #ffdad7; + --c--globals--colors--red-150: #ffc7c2; + --c--globals--colors--red-200: #ffb3ad; + --c--globals--colors--red-250: #ff9f99; + --c--globals--colors--red-300: #ff8984; + --c--globals--colors--red-350: #ff706e; + --c--globals--colors--red-400: #fb5759; + --c--globals--colors--red-450: #f63a45; + --c--globals--colors--red-500: #e32c39; + --c--globals--colors--red-550: #cf202d; + --c--globals--colors--red-600: #bd0f23; + --c--globals--colors--red-650: #9d2227; + --c--globals--colors--red-700: #812727; + --c--globals--colors--red-750: #672624; + --c--globals--colors--red-800: #512220; + --c--globals--colors--red-850: #3d1c1b; + --c--globals--colors--red-900: #2a1614; + --c--globals--colors--red-950: #190e0d; + --c--globals--colors--orange-050: #fcedeb; + --c--globals--colors--orange-100: #f8dcd7; + --c--globals--colors--orange-150: #f1ccc5; + --c--globals--colors--orange-200: #eabcb4; + --c--globals--colors--orange-250: #e2aca2; + --c--globals--colors--orange-300: #da9c92; + --c--globals--colors--orange-350: #d28c81; + --c--globals--colors--orange-400: #ca7c70; + --c--globals--colors--orange-450: #be6e62; + --c--globals--colors--orange-500: #ae6257; + --c--globals--colors--orange-550: #9e564d; + --c--globals--colors--orange-600: #8f4b42; + --c--globals--colors--orange-650: #79443d; + --c--globals--colors--orange-700: #643c37; + --c--globals--colors--orange-750: #513430; + --c--globals--colors--orange-800: #412b28; + --c--globals--colors--orange-850: #312220; + --c--globals--colors--orange-900: #231918; + --c--globals--colors--orange-950: #150f0f; + --c--globals--colors--brown-050: #f9efea; + --c--globals--colors--brown-100: #f3dfd3; + --c--globals--colors--brown-150: #eacfc1; + --c--globals--colors--brown-200: #e2bfae; + --c--globals--colors--brown-250: #d8b19c; + --c--globals--colors--brown-300: #d0a189; + --c--globals--colors--brown-350: #c3937b; + --c--globals--colors--brown-400: #b5866d; + --c--globals--colors--brown-450: #a77a62; + --c--globals--colors--brown-500: #996d57; + --c--globals--colors--brown-550: #8b614d; + --c--globals--colors--brown-600: #7c5542; + --c--globals--colors--brown-650: #6a4c3c; + --c--globals--colors--brown-700: #594236; + --c--globals--colors--brown-750: #49382f; + --c--globals--colors--brown-800: #3b2e28; + --c--globals--colors--brown-850: #2d2420; + --c--globals--colors--brown-900: #201a18; + --c--globals--colors--brown-950: #13100f; + --c--globals--colors--yellow-050: #fdf1c5; + --c--globals--colors--yellow-100: #fbe18e; + --c--globals--colors--yellow-150: #f4d261; + --c--globals--colors--yellow-200: #eac244; + --c--globals--colors--yellow-250: #dfb41b; + --c--globals--colors--yellow-300: #d1a516; + --c--globals--colors--yellow-350: #c49711; + --c--globals--colors--yellow-400: #b78a0c; + --c--globals--colors--yellow-450: #a87d07; + --c--globals--colors--yellow-500: #9b6f02; + --c--globals--colors--yellow-550: #8d6300; + --c--globals--colors--yellow-600: #7f5600; + --c--globals--colors--yellow-650: #6e4c11; + --c--globals--colors--yellow-700: #5d4219; + --c--globals--colors--yellow-750: #4d371b; + --c--globals--colors--yellow-800: #3d2e1a; + --c--globals--colors--yellow-850: #2f2417; + --c--globals--colors--yellow-900: #221a12; + --c--globals--colors--yellow-950: #14100c; + --c--globals--colors--green-050: #e7f9b3; + --c--globals--colors--green-100: #d5ec98; + --c--globals--colors--green-150: #c5de86; + --c--globals--colors--green-200: #b5d174; + --c--globals--colors--green-250: #a5c464; + --c--globals--colors--green-300: #95b755; + --c--globals--colors--green-350: #85aa45; + --c--globals--colors--green-400: #769d39; + --c--globals--colors--green-450: #688f30; + --c--globals--colors--green-500: #5a8228; + --c--globals--colors--green-550: #4d7621; + --c--globals--colors--green-600: #416919; + --c--globals--colors--green-650: #3a5b20; + --c--globals--colors--green-700: #324e22; + --c--globals--colors--green-750: #2c4122; + --c--globals--colors--green-800: #24351d; + --c--globals--colors--green-850: #1d2919; + --c--globals--colors--green-900: #161e13; + --c--globals--colors--green-950: #0e120c; + --c--globals--colors--blue-1-050: #ebf1ff; + --c--globals--colors--blue-1-100: #d6e3fe; + --c--globals--colors--blue-1-150: #c2d5fe; + --c--globals--colors--blue-1-200: #adc7fe; + --c--globals--colors--blue-1-250: #99b8fd; + --c--globals--colors--blue-1-300: #84aafd; + --c--globals--colors--blue-1-350: #6f9bfd; + --c--globals--colors--blue-1-400: #5a8dfb; + --c--globals--colors--blue-1-450: #437dfc; + --c--globals--colors--blue-1-500: #3d71e4; + --c--globals--colors--blue-1-550: #3665cc; + --c--globals--colors--blue-1-600: #305ab5; + --c--globals--colors--blue-1-650: #315093; + --c--globals--colors--blue-1-700: #2e4675; + --c--globals--colors--blue-1-750: #293b5e; + --c--globals--colors--blue-1-800: #243048; + --c--globals--colors--blue-1-850: #1e2635; + --c--globals--colors--blue-1-900: #171c25; + --c--globals--colors--blue-1-950: #0e1116; + --c--globals--colors--blue-2-050: #e2f4f9; + --c--globals--colors--blue-2-100: #c5e9f3; + --c--globals--colors--blue-2-150: #a7dded; + --c--globals--colors--blue-2-200: #88d1e6; + --c--globals--colors--blue-2-250: #68c5e0; + --c--globals--colors--blue-2-300: #48b8d9; + --c--globals--colors--blue-2-350: #3baaca; + --c--globals--colors--blue-2-400: #359cb9; + --c--globals--colors--blue-2-450: #318ea9; + --c--globals--colors--blue-2-500: #2c8199; + --c--globals--colors--blue-2-550: #277389; + --c--globals--colors--blue-2-600: #236679; + --c--globals--colors--blue-2-650: #2a5866; + --c--globals--colors--blue-2-700: #2a4b55; + --c--globals--colors--blue-2-750: #283f47; + --c--globals--colors--blue-2-800: #233337; + --c--globals--colors--blue-2-850: #1d272a; + --c--globals--colors--blue-2-900: #161c1e; + --c--globals--colors--blue-2-950: #0e1112; + --c--globals--colors--purple-050: #f5eeff; + --c--globals--colors--purple-100: #ecdcff; + --c--globals--colors--purple-150: #e2cbff; + --c--globals--colors--purple-200: #d9b9ff; + --c--globals--colors--purple-250: #d0a7ff; + --c--globals--colors--purple-300: #c894fe; + --c--globals--colors--purple-350: #be83fa; + --c--globals--colors--purple-400: #b570f5; + --c--globals--colors--purple-450: #ab5ef0; + --c--globals--colors--purple-500: #a04be8; + --c--globals--colors--purple-550: #933cdb; + --c--globals--colors--purple-600: #8530c8; + --c--globals--colors--purple-650: #7033a5; + --c--globals--colors--purple-700: #5d3185; + --c--globals--colors--purple-750: #4c2c6a; + --c--globals--colors--purple-800: #3c2652; + --c--globals--colors--purple-850: #2d203c; + --c--globals--colors--purple-900: #21182a; + --c--globals--colors--purple-950: #130f19; + --c--globals--colors--pink-050: #ffebf6; + --c--globals--colors--pink-100: #ffd8ed; + --c--globals--colors--pink-150: #fcc4e3; + --c--globals--colors--pink-200: #f7b2d9; + --c--globals--colors--pink-250: #f29fce; + --c--globals--colors--pink-300: #ed8cc3; + --c--globals--colors--pink-350: #e779b8; + --c--globals--colors--pink-400: #e264ad; + --c--globals--colors--pink-450: #d2579e; + --c--globals--colors--pink-500: #c24b8e; + --c--globals--colors--pink-550: #b0417f; + --c--globals--colors--pink-600: #9f3670; + --c--globals--colors--pink-650: #873560; + --c--globals--colors--pink-700: #6f3250; + --c--globals--colors--pink-750: #5a2c43; + --c--globals--colors--pink-800: #472635; + --c--globals--colors--pink-850: #351f29; + --c--globals--colors--pink-900: #26171d; + --c--globals--colors--pink-950: #170f12; + --c--globals--colors--black-000: #0000; + --c--globals--colors--black-050: #0000000d; + --c--globals--colors--black-100: #0000001a; + --c--globals--colors--black-150: #00000026; + --c--globals--colors--black-200: #0003; + --c--globals--colors--black-250: #00000040; + --c--globals--colors--black-300: #0000004d; + --c--globals--colors--black-350: #00000059; + --c--globals--colors--black-400: #0006; + --c--globals--colors--black-450: #00000073; + --c--globals--colors--black-500: #00000080; + --c--globals--colors--black-550: #0000008c; + --c--globals--colors--black-600: #0009; + --c--globals--colors--black-650: #000000a6; + --c--globals--colors--black-700: #000000b3; + --c--globals--colors--black-750: #000000bf; + --c--globals--colors--black-800: #000c; + --c--globals--colors--black-850: #000000d9; + --c--globals--colors--black-900: #000000e6; + --c--globals--colors--black-950: #000000f2; + --c--globals--colors--white-000: #fff; + --c--globals--colors--white-050: #ffffff0d; + --c--globals--colors--white-100: #ffffff1a; + --c--globals--colors--white-150: #ffffff26; + --c--globals--colors--white-200: #fff3; + --c--globals--colors--white-250: #ffffff40; + --c--globals--colors--white-300: #ffffff4d; + --c--globals--colors--white-350: #ffffff59; + --c--globals--colors--white-400: #fff6; + --c--globals--colors--white-450: #ffffff73; + --c--globals--colors--white-500: #ffffff80; + --c--globals--colors--white-550: #ffffff8c; + --c--globals--colors--white-600: #fff9; + --c--globals--colors--white-650: #ffffffa6; + --c--globals--colors--white-700: #ffffffb3; + --c--globals--colors--white-750: #ffffffbf; + --c--globals--colors--white-800: #fffc; + --c--globals--colors--white-850: #ffffffd9; + --c--globals--colors--white-900: #ffffffe6; + --c--globals--colors--white-950: #fffffff2; + --c--globals--colors--blue1-050: #e7f2ff; + --c--globals--colors--blue1-100: #cfe5ff; + --c--globals--colors--blue1-150: #b7d7ff; + --c--globals--colors--blue1-200: #a0cafe; + --c--globals--colors--blue1-250: #8cbcf9; + --c--globals--colors--blue1-300: #77aef4; + --c--globals--colors--blue1-350: #63a0ee; + --c--globals--colors--blue1-400: #5092e7; + --c--globals--colors--blue1-450: #4185dc; + --c--globals--colors--blue1-500: #3677cc; + --c--globals--colors--blue1-550: #2f6abb; + --c--globals--colors--blue1-600: #265eaa; + --c--globals--colors--blue1-650: #28528f; + --c--globals--colors--blue1-700: #274775; + --c--globals--colors--blue1-750: #243c5e; + --c--globals--colors--blue1-800: #20314a; + --c--globals--colors--blue1-850: #1b2637; + --c--globals--colors--blue1-900: #141c27; + --c--globals--colors--blue1-950: #0d1118; + --c--globals--colors--blue2-050: #e2f4fd; + --c--globals--colors--blue2-100: #c4e8f8; + --c--globals--colors--blue2-150: #aadcf2; + --c--globals--colors--blue2-200: #93cfeb; + --c--globals--colors--blue2-250: #7cc2e2; + --c--globals--colors--blue2-300: #6cb4d6; + --c--globals--colors--blue2-350: #5ca7c9; + --c--globals--colors--blue2-400: #5099bc; + --c--globals--colors--blue2-450: #458bae; + --c--globals--colors--blue2-500: #3a7ea0; + --c--globals--colors--blue2-550: #327191; + --c--globals--colors--blue2-600: #286483; + --c--globals--colors--blue2-650: #2b5770; + --c--globals--colors--blue2-700: #294a5e; + --c--globals--colors--blue2-750: #263e4d; + --c--globals--colors--blue2-800: #22323d; + --c--globals--colors--blue2-850: #1c272e; + --c--globals--colors--blue2-900: #151d21; + --c--globals--colors--blue2-950: #0e1114; + --c--globals--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0); + --c--globals--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1); + --c--globals--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); + --c--globals--transitions--duration: 250ms; + --c--globals--font--sizes--xs: 0.75rem; + --c--globals--font--sizes--sm: 0.875rem; + --c--globals--font--sizes--md: 1rem; + --c--globals--font--sizes--lg: 1.125rem; + --c--globals--font--sizes--ml: 0.938rem; + --c--globals--font--sizes--xl: 1.25rem; + --c--globals--font--sizes--t: 0.6875rem; + --c--globals--font--sizes--s: 0.75rem; + --c--globals--font--sizes--h1: 2rem; + --c--globals--font--sizes--h2: 1.75rem; + --c--globals--font--sizes--h3: 1.5rem; + --c--globals--font--sizes--h4: 1.375rem; + --c--globals--font--sizes--h5: 1.25rem; + --c--globals--font--sizes--h6: 1.125rem; + --c--globals--font--sizes--xl-alt: 5rem; + --c--globals--font--sizes--lg-alt: 4.5rem; + --c--globals--font--sizes--md-alt: 4rem; + --c--globals--font--sizes--sm-alt: 3.5rem; + --c--globals--font--sizes--xs-alt: 3rem; + --c--globals--font--weights--thin: 100; + --c--globals--font--weights--light: 300; + --c--globals--font--weights--regular: 400; + --c--globals--font--weights--medium: 500; + --c--globals--font--weights--bold: 600; + --c--globals--font--weights--extrabold: 800; + --c--globals--font--weights--black: 900; + --c--globals--font--families--base: sans-serif; + --c--globals--font--families--accent: sans-serif; + --c--globals--spacings--0: 0; + --c--globals--spacings--l: 3rem; + --c--globals--spacings--b: 1.625rem; + --c--globals--spacings--m: 0.8125rem; + --c--globals--spacings--s: 1rem; + --c--globals--spacings--t: 0.5rem; + --c--globals--spacings--st: 0.25rem; + --c--globals--spacings--4xs: 0.125rem; + --c--globals--spacings--xxxs: 0.25rem; + --c--globals--spacings--xxs: 0.375rem; + --c--globals--spacings--xs: 0.5rem; + --c--globals--spacings--sm: 0.75rem; + --c--globals--spacings--base: 1rem; + --c--globals--spacings--md: 1.5rem; + --c--globals--spacings--lg: 2rem; + --c--globals--spacings--xl: 2.5rem; + --c--globals--spacings--xxl: 3rem; + --c--globals--spacings--xxxl: 3.5rem; + --c--globals--spacings--4xl: 4rem; + --c--globals--spacings--5xl: 4.5rem; + --c--globals--spacings--6xl: 6rem; + --c--globals--spacings--7xl: 7.5rem; + --c--globals--spacings--none: 0; + --c--globals--spacings--auto: auto; + --c--globals--spacings--bx: 2.2rem; + --c--globals--spacings--full: 100%; + --c--globals--spacings--3xs: 0.25rem; + --c--globals--spacings--2xs: 0.375rem; + --c--globals--breakpoints--xs: 480px; + --c--globals--breakpoints--sm: 576px; + --c--globals--breakpoints--md: 768px; + --c--globals--breakpoints--lg: 992px; + --c--globals--breakpoints--xl: 1200px; + --c--globals--breakpoints--xxl: 1400px; + --c--globals--breakpoints--xxs: 320px; + --c--globals--breakpoints--mobile: 768px; + --c--globals--breakpoints--tablet: 1024px; + --c--contextuals--background--surface--primary: var( + --c--globals--colors--gray-000 + ); + --c--contextuals--background--surface--secondary: var( + --c--globals--colors--gray-000 + ); + --c--contextuals--background--surface--tertiary: var( + --c--globals--colors--gray-025 + ); + --c--contextuals--background--semantic--brand--primary: var( + --c--globals--colors--brand-550 + ); + --c--contextuals--background--semantic--brand--primary-hover: var( + --c--globals--colors--brand-650 + ); + --c--contextuals--background--semantic--brand--secondary: var( + --c--globals--colors--brand-100 + ); + --c--contextuals--background--semantic--brand--secondary-hover: var( + --c--globals--colors--brand-150 + ); + --c--contextuals--background--semantic--brand--tertiary: var( + --c--globals--colors--brand-050 + ); + --c--contextuals--background--semantic--brand--tertiary-hover: var( + --c--globals--colors--brand-100 + ); + --c--contextuals--background--semantic--neutral--primary: var( + --c--globals--colors--gray-550 + ); + --c--contextuals--background--semantic--neutral--primary-hover: var( + --c--globals--colors--gray-650 + ); + --c--contextuals--background--semantic--neutral--secondary: var( + --c--globals--colors--gray-100 + ); + --c--contextuals--background--semantic--neutral--secondary-hover: var( + --c--globals--colors--gray-150 + ); + --c--contextuals--background--semantic--neutral--tertiary: var( + --c--globals--colors--gray-050 + ); + --c--contextuals--background--semantic--neutral--tertiary-hover: var( + --c--globals--colors--gray-100 + ); + --c--contextuals--background--semantic--contextual--primary: var( + --c--globals--colors--black-050 + ); + --c--contextuals--background--semantic--contextual--primary-hover: var( + --c--globals--colors--black-100 + ); + --c--contextuals--background--semantic--info--primary: var( + --c--globals--colors--info-550 + ); + --c--contextuals--background--semantic--info--primary-hover: var( + --c--globals--colors--info-650 + ); + --c--contextuals--background--semantic--info--secondary: var( + --c--globals--colors--info-100 + ); + --c--contextuals--background--semantic--info--secondary-hover: var( + --c--globals--colors--info-150 + ); + --c--contextuals--background--semantic--info--tertiary: var( + --c--globals--colors--info-050 + ); + --c--contextuals--background--semantic--info--tertiary-hover: var( + --c--globals--colors--info-100 + ); + --c--contextuals--background--semantic--success--primary: var( + --c--globals--colors--success-550 + ); + --c--contextuals--background--semantic--success--primary-hover: var( + --c--globals--colors--success-650 + ); + --c--contextuals--background--semantic--success--secondary: var( + --c--globals--colors--success-100 + ); + --c--contextuals--background--semantic--success--secondary-hover: var( + --c--globals--colors--success-150 + ); + --c--contextuals--background--semantic--success--tertiary: var( + --c--globals--colors--success-050 + ); + --c--contextuals--background--semantic--success--tertiary-hover: var( + --c--globals--colors--success-100 + ); + --c--contextuals--background--semantic--warning--primary: var( + --c--globals--colors--warning-550 + ); + --c--contextuals--background--semantic--warning--primary-hover: var( + --c--globals--colors--warning-650 + ); + --c--contextuals--background--semantic--warning--secondary: var( + --c--globals--colors--warning-100 + ); + --c--contextuals--background--semantic--warning--secondary-hover: var( + --c--globals--colors--warning-150 + ); + --c--contextuals--background--semantic--warning--tertiary: var( + --c--globals--colors--warning-050 + ); + --c--contextuals--background--semantic--warning--tertiary-hover: var( + --c--globals--colors--warning-100 + ); + --c--contextuals--background--semantic--error--primary: var( + --c--globals--colors--error-550 + ); + --c--contextuals--background--semantic--error--primary-hover: var( + --c--globals--colors--error-650 + ); + --c--contextuals--background--semantic--error--secondary: var( + --c--globals--colors--error-100 + ); + --c--contextuals--background--semantic--error--secondary-hover: var( + --c--globals--colors--error-150 + ); + --c--contextuals--background--semantic--error--tertiary: var( + --c--globals--colors--error-050 + ); + --c--contextuals--background--semantic--error--tertiary-hover: var( + --c--globals--colors--error-100 + ); + --c--contextuals--background--semantic--disabled--primary: var( + --c--globals--colors--gray-100 + ); + --c--contextuals--background--semantic--disabled--secondary: var( + --c--globals--colors--gray-050 + ); + --c--contextuals--background--palette--brand--primary: var( + --c--globals--colors--brand-500 + ); + --c--contextuals--background--palette--brand--secondary: var( + --c--globals--colors--brand-350 + ); + --c--contextuals--background--palette--brand--tertiary: var( + --c--globals--colors--brand-150 + ); + --c--contextuals--background--palette--red--primary: var( + --c--globals--colors--red-500 + ); + --c--contextuals--background--palette--red--secondary: var( + --c--globals--colors--red-350 + ); + --c--contextuals--background--palette--red--tertiary: var( + --c--globals--colors--red-150 + ); + --c--contextuals--background--palette--orange--primary: var( + --c--globals--colors--orange-500 + ); + --c--contextuals--background--palette--orange--secondary: var( + --c--globals--colors--orange-350 + ); + --c--contextuals--background--palette--orange--tertiary: var( + --c--globals--colors--orange-150 + ); + --c--contextuals--background--palette--brown--primary: var( + --c--globals--colors--brown-500 + ); + --c--contextuals--background--palette--brown--secondary: var( + --c--globals--colors--brown-350 + ); + --c--contextuals--background--palette--brown--tertiary: var( + --c--globals--colors--brown-150 + ); + --c--contextuals--background--palette--yellow--primary: var( + --c--globals--colors--yellow-500 + ); + --c--contextuals--background--palette--yellow--secondary: var( + --c--globals--colors--yellow-350 + ); + --c--contextuals--background--palette--yellow--tertiary: var( + --c--globals--colors--yellow-150 + ); + --c--contextuals--background--palette--green--primary: var( + --c--globals--colors--green-500 + ); + --c--contextuals--background--palette--green--secondary: var( + --c--globals--colors--green-350 + ); + --c--contextuals--background--palette--green--tertiary: var( + --c--globals--colors--green-150 + ); + --c--contextuals--background--palette--blue-1--primary: var( + --c--globals--colors--blue-1-500 + ); + --c--contextuals--background--palette--blue-1--secondary: var( + --c--globals--colors--blue-1-350 + ); + --c--contextuals--background--palette--blue-1--tertiary: var( + --c--globals--colors--blue-1-150 + ); + --c--contextuals--background--palette--blue-2--primary: var( + --c--globals--colors--blue-2-500 + ); + --c--contextuals--background--palette--blue-2--secondary: var( + --c--globals--colors--blue-2-350 + ); + --c--contextuals--background--palette--blue-2--tertiary: var( + --c--globals--colors--blue-2-150 + ); + --c--contextuals--background--palette--purple--primary: var( + --c--globals--colors--purple-500 + ); + --c--contextuals--background--palette--purple--secondary: var( + --c--globals--colors--purple-350 + ); + --c--contextuals--background--palette--purple--tertiary: var( + --c--globals--colors--purple-150 + ); + --c--contextuals--background--palette--pink--primary: var( + --c--globals--colors--pink-500 + ); + --c--contextuals--background--palette--pink--secondary: var( + --c--globals--colors--pink-350 + ); + --c--contextuals--background--palette--pink--tertiary: var( + --c--globals--colors--pink-150 + ); + --c--contextuals--background--palette--gray--primary: var( + --c--globals--colors--gray-500 + ); + --c--contextuals--background--palette--gray--secondary: var( + --c--globals--colors--gray-350 + ); + --c--contextuals--background--palette--gray--tertiary: var( + --c--globals--colors--gray-150 + ); + --c--contextuals--background--text--primary: var( + --c--globals--colors--black-050 + ); + --c--contextuals--content--logo1: var(--c--globals--colors--logo-1); + --c--contextuals--content--logo2: var(--c--globals--colors--logo-2); + --c--contextuals--content--semantic--brand--primary: var( + --c--globals--colors--brand-700 + ); + --c--contextuals--content--semantic--brand--secondary: var( + --c--globals--colors--brand-600 + ); + --c--contextuals--content--semantic--brand--tertiary: var( + --c--globals--colors--brand-500 + ); + --c--contextuals--content--semantic--brand--on-brand: var( + --c--globals--colors--brand-050 + ); + --c--contextuals--content--semantic--neutral--primary: var( + --c--globals--colors--gray-850 + ); + --c--contextuals--content--semantic--neutral--secondary: var( + --c--globals--colors--gray-600 + ); + --c--contextuals--content--semantic--neutral--tertiary: var( + --c--globals--colors--gray-500 + ); + --c--contextuals--content--semantic--neutral--on-neutral: var( + --c--globals--colors--gray-050 + ); + --c--contextuals--content--semantic--contextual--primary: var( + --c--globals--colors--white-950 + ); + --c--contextuals--content--semantic--info--primary: var( + --c--globals--colors--info-700 + ); + --c--contextuals--content--semantic--info--secondary: var( + --c--globals--colors--info-600 + ); + --c--contextuals--content--semantic--info--tertiary: var( + --c--globals--colors--info-500 + ); + --c--contextuals--content--semantic--info--on-info: var( + --c--globals--colors--info-050 + ); + --c--contextuals--content--semantic--success--primary: var( + --c--globals--colors--success-700 + ); + --c--contextuals--content--semantic--success--secondary: var( + --c--globals--colors--success-600 + ); + --c--contextuals--content--semantic--success--tertiary: var( + --c--globals--colors--success-500 + ); + --c--contextuals--content--semantic--success--on-success: var( + --c--globals--colors--success-050 + ); + --c--contextuals--content--semantic--warning--primary: var( + --c--globals--colors--warning-700 + ); + --c--contextuals--content--semantic--warning--secondary: var( + --c--globals--colors--warning-600 + ); + --c--contextuals--content--semantic--warning--tertiary: var( + --c--globals--colors--warning-500 + ); + --c--contextuals--content--semantic--warning--on-warning: var( + --c--globals--colors--warning-050 + ); + --c--contextuals--content--semantic--error--primary: var( + --c--globals--colors--error-700 + ); + --c--contextuals--content--semantic--error--secondary: var( + --c--globals--colors--error-600 + ); + --c--contextuals--content--semantic--error--tertiary: var( + --c--globals--colors--error-500 + ); + --c--contextuals--content--semantic--error--on-error: var( + --c--globals--colors--error-050 + ); + --c--contextuals--content--semantic--disabled--primary: var( + --c--globals--colors--gray-300 + ); + --c--contextuals--content--semantic--disabled--secondary: var( + --c--globals--colors--white-500 + ); + --c--contextuals--content--palette--brand--primary: var( + --c--globals--colors--brand-500 + ); + --c--contextuals--content--palette--brand--secondary: var( + --c--globals--colors--brand-350 + ); + --c--contextuals--content--palette--brand--tertiary: var( + --c--globals--colors--brand-150 + ); + --c--contextuals--content--palette--red--primary: var( + --c--globals--colors--red-500 + ); + --c--contextuals--content--palette--red--secondary: var( + --c--globals--colors--red-350 + ); + --c--contextuals--content--palette--red--tertiary: var( + --c--globals--colors--red-150 + ); + --c--contextuals--content--palette--orange--primary: var( + --c--globals--colors--orange-500 + ); + --c--contextuals--content--palette--orange--secondary: var( + --c--globals--colors--orange-350 + ); + --c--contextuals--content--palette--orange--tertiary: var( + --c--globals--colors--orange-150 + ); + --c--contextuals--content--palette--brown--primary: var( + --c--globals--colors--brown-500 + ); + --c--contextuals--content--palette--brown--secondary: var( + --c--globals--colors--brown-350 + ); + --c--contextuals--content--palette--brown--tertiary: var( + --c--globals--colors--brown-150 + ); + --c--contextuals--content--palette--yellow--primary: var( + --c--globals--colors--yellow-500 + ); + --c--contextuals--content--palette--yellow--secondary: var( + --c--globals--colors--yellow-350 + ); + --c--contextuals--content--palette--yellow--tertiary: var( + --c--globals--colors--yellow-150 + ); + --c--contextuals--content--palette--green--primary: var( + --c--globals--colors--green-500 + ); + --c--contextuals--content--palette--green--secondary: var( + --c--globals--colors--green-350 + ); + --c--contextuals--content--palette--green--tertiary: var( + --c--globals--colors--green-150 + ); + --c--contextuals--content--palette--blue-1--primary: var( + --c--globals--colors--blue-1-500 + ); + --c--contextuals--content--palette--blue-1--secondary: var( + --c--globals--colors--blue-1-350 + ); + --c--contextuals--content--palette--blue-1--tertiary: var( + --c--globals--colors--blue-1-150 + ); + --c--contextuals--content--palette--blue-2--primary: var( + --c--globals--colors--blue-2-500 + ); + --c--contextuals--content--palette--blue-2--secondary: var( + --c--globals--colors--blue-2-350 + ); + --c--contextuals--content--palette--blue-2--tertiary: var( + --c--globals--colors--blue-2-150 + ); + --c--contextuals--content--palette--purple--primary: var( + --c--globals--colors--purple-500 + ); + --c--contextuals--content--palette--purple--secondary: var( + --c--globals--colors--purple-350 + ); + --c--contextuals--content--palette--purple--tertiary: var( + --c--globals--colors--purple-150 + ); + --c--contextuals--content--palette--pink--primary: var( + --c--globals--colors--pink-500 + ); + --c--contextuals--content--palette--pink--secondary: var( + --c--globals--colors--pink-350 + ); + --c--contextuals--content--palette--pink--tertiary: var( + --c--globals--colors--pink-150 + ); + --c--contextuals--content--palette--gray--primary: var( + --c--globals--colors--gray-500 + ); + --c--contextuals--content--palette--gray--secondary: var( + --c--globals--colors--gray-350 + ); + --c--contextuals--content--palette--gray--tertiary: var( + --c--globals--colors--gray-150 + ); + --c--contextuals--border--surface--primary: var( + --c--globals--colors--gray-100 + ); + --c--contextuals--border--semantic--brand--primary: var( + --c--globals--colors--brand-550 + ); + --c--contextuals--border--semantic--brand--secondary: var( + --c--globals--colors--brand-300 + ); + --c--contextuals--border--semantic--brand--tertiary: var( + --c--globals--colors--brand-150 + ); + --c--contextuals--border--semantic--contextual--primary: var( + --c--globals--colors--white-200 + ); + --c--contextuals--border--semantic--neutral--primary: var( + --c--globals--colors--gray-550 + ); + --c--contextuals--border--semantic--neutral--secondary: var( + --c--globals--colors--gray-300 + ); + --c--contextuals--border--semantic--neutral--tertiary: var( + --c--globals--colors--gray-150 + ); + --c--contextuals--border--semantic--info--primary: var( + --c--globals--colors--info-550 + ); + --c--contextuals--border--semantic--info--secondary: var( + --c--globals--colors--info-300 + ); + --c--contextuals--border--semantic--info--tertiary: var( + --c--globals--colors--info-150 + ); + --c--contextuals--border--semantic--success--primary: var( + --c--globals--colors--success-550 + ); + --c--contextuals--border--semantic--success--secondary: var( + --c--globals--colors--success-300 + ); + --c--contextuals--border--semantic--success--tertiary: var( + --c--globals--colors--success-150 + ); + --c--contextuals--border--semantic--warning--primary: var( + --c--globals--colors--warning-550 + ); + --c--contextuals--border--semantic--warning--secondary: var( + --c--globals--colors--warning-300 + ); + --c--contextuals--border--semantic--warning--tertiary: var( + --c--globals--colors--warning-150 + ); + --c--contextuals--border--semantic--error--primary: var( + --c--globals--colors--error-550 + ); + --c--contextuals--border--semantic--error--secondary: var( + --c--globals--colors--error-300 + ); + --c--contextuals--border--semantic--error--tertiary: var( + --c--globals--colors--error-150 + ); + --c--contextuals--border--semantic--disabled--primary: var( + --c--globals--colors--gray-100 + ); + --c--contextuals--border--palette--brand--primary: var( + --c--globals--colors--brand-500 + ); + --c--contextuals--border--palette--brand--secondary: var( + --c--globals--colors--brand-350 + ); + --c--contextuals--border--palette--brand--tertiary: var( + --c--globals--colors--brand-150 + ); + --c--contextuals--border--palette--red--primary: var( + --c--globals--colors--red-500 + ); + --c--contextuals--border--palette--red--secondary: var( + --c--globals--colors--red-350 + ); + --c--contextuals--border--palette--red--tertiary: var( + --c--globals--colors--red-150 + ); + --c--contextuals--border--palette--orange--primary: var( + --c--globals--colors--orange-500 + ); + --c--contextuals--border--palette--orange--secondary: var( + --c--globals--colors--orange-350 + ); + --c--contextuals--border--palette--orange--tertiary: var( + --c--globals--colors--orange-150 + ); + --c--contextuals--border--palette--brown--primary: var( + --c--globals--colors--brown-500 + ); + --c--contextuals--border--palette--brown--secondary: var( + --c--globals--colors--brown-350 + ); + --c--contextuals--border--palette--brown--tertiary: var( + --c--globals--colors--brown-150 + ); + --c--contextuals--border--palette--yellow--primary: var( + --c--globals--colors--yellow-500 + ); + --c--contextuals--border--palette--yellow--secondary: var( + --c--globals--colors--yellow-350 + ); + --c--contextuals--border--palette--yellow--tertiary: var( + --c--globals--colors--yellow-150 + ); + --c--contextuals--border--palette--green--primary: var( + --c--globals--colors--green-500 + ); + --c--contextuals--border--palette--green--secondary: var( + --c--globals--colors--green-350 + ); + --c--contextuals--border--palette--green--tertiary: var( + --c--globals--colors--green-150 + ); + --c--contextuals--border--palette--blue-1--primary: var( + --c--globals--colors--blue-1-500 + ); + --c--contextuals--border--palette--blue-1--secondary: var( + --c--globals--colors--blue-1-350 + ); + --c--contextuals--border--palette--blue-1--tertiary: var( + --c--globals--colors--blue-1-150 + ); + --c--contextuals--border--palette--blue-2--primary: var( + --c--globals--colors--blue-2-500 + ); + --c--contextuals--border--palette--blue-2--secondary: var( + --c--globals--colors--blue-2-350 + ); + --c--contextuals--border--palette--blue-2--tertiary: var( + --c--globals--colors--blue-2-150 + ); + --c--contextuals--border--palette--purple--primary: var( + --c--globals--colors--purple-500 + ); + --c--contextuals--border--palette--purple--secondary: var( + --c--globals--colors--purple-350 + ); + --c--contextuals--border--palette--purple--tertiary: var( + --c--globals--colors--purple-150 + ); + --c--contextuals--border--palette--pink--primary: var( + --c--globals--colors--pink-500 + ); + --c--contextuals--border--palette--pink--secondary: var( + --c--globals--colors--pink-350 + ); + --c--contextuals--border--palette--pink--tertiary: var( + --c--globals--colors--pink-150 + ); + --c--contextuals--border--palette--gray--primary: var( + --c--globals--colors--gray-500 + ); + --c--contextuals--border--palette--gray--secondary: var( + --c--globals--colors--gray-350 + ); + --c--contextuals--border--palette--gray--tertiary: var( + --c--globals--colors--gray-150 + ); --c--components--modal--width-small: 342px; --c--components--tooltip--padding: 4px 8px; --c--components--tooltip--background-color: var( - --c--theme--colors--greyscale-1000 + --c--contextuals--background--semantic--neutral--tertiary ); --c--components--button--medium-height: 40px; --c--components--button--medium-text-height: 40px; --c--components--button--border-radius: 4px; - --c--components--button--small-height: 26px; - --c--components--button--primary--background--color: var( - --c--theme--colors--primary-text + --c--components--button--border-radius--active: 4px; + --c--components--button--border-radius--focus: 4px; + --c--components--datagrid--header--color: var( + --c--contextuals--content--semantic--neutral--primary ); - --c--components--button--primary--background--color-hover: #1212ff; - --c--components--button--primary--background--color-active: #2323ff; - --c--components--button--primary--background--color-disabled: var( - --c--theme--colors--greyscale-100 + --c--components--datagrid--header--size: 12px; + --c--components--datagrid--header--weight: 500; + --c--components--datagrid--body--background-color-hover: var( + --c--contextuals--background--semantic--neutral--tertiary + ); + --c--components--forms-checkbox--font-size: var( + --c--globals--font--sizes--sm + ); + --c--components--badge--font-size: var(--c--globals--font--sizes--xs); + --c--components--badge--border-radius: 12px; + --c--components--badge--padding-inline: var(--c--globals--spacings--xs); + --c--components--badge--padding-block: var(--c--globals--spacings--2xs); + --c--components--badge--accent--background-color: var( + --c--contextuals--background--semantic--brand--secondary + ); + --c--components--badge--accent--color: var( + --c--contextuals--content--semantic--brand--secondary + ); + --c--components--badge--neutral--background-color: var( + --c--contextuals--background--semantic--neutral--secondary + ); + --c--components--badge--neutral--color: var( + --c--contextuals--content--semantic--neutral--secondary + ); + --c--components--badge--danger--background-color: var( + --c--contextuals--background--semantic--error--secondary + ); + --c--components--badge--danger--color: var( + --c--contextuals--content--semantic--error--secondary + ); + --c--components--badge--success--background-color: var( + --c--contextuals--background--semantic--success--secondary ); - --c--components--button--primary--color: #fff; - --c--components--button--primary--color-hover: #fff; - --c--components--button--primary--color-active: #fff; - --c--components--button--primary--color-focus-visible: #fff; - --c--components--button--primary--disabled: var( - --c--theme--colors--greyscale-400 + --c--components--badge--success--color: var( + --c--contextuals--content--semantic--success--secondary ); - --c--components--button--primary--background--disabled: var( - --c--theme--colors--greyscale-100 + --c--components--badge--warning--background-color: var( + --c--contextuals--background--semantic--warning--secondary + ); + --c--components--badge--warning--color: var( + --c--contextuals--content--semantic--warning--secondary ); - --c--components--button--primary-text--background--color: var( - --c--theme--colors--primary-text + --c--components--badge--info--background-color: var( + --c--contextuals--background--semantic--info--secondary ); - --c--components--button--primary-text--background--color-hover: var( - --c--theme--colors--greyscale-100 + --c--components--badge--info--color: var( + --c--contextuals--content--semantic--info--secondary ); - --c--components--button--primary-text--background--color-active: var( - --c--theme--colors--primary-100 + --c--components--logo--src: ; + --c--components--logo--alt: ; + --c--components--logo--widthheader: ; + --c--components--logo--widthfooter: ; + --c--components--la-gaufre: false; + --c--components--home-proconnect: false; + --c--components--image-system-filter: ; + --c--components--favicon--ico: /assets/favicon-light.ico; + --c--components--favicon--png-light: /assets/favicon-light.png; + --c--components--favicon--png-dark: /assets/favicon-dark.png; +} + +.cunningham-theme--dark { + --c--globals--colors--logo-1: #377fdb; + --c--globals--colors--logo-2: #377fdb; + --c--globals--colors--logo-1-dark: #95abff; + --c--globals--colors--logo-2-dark: #95abff; + --c--globals--colors--brand-050: #eaf1fb; + --c--globals--colors--brand-100: #d5e4f7; + --c--globals--colors--brand-150: #c0d6f4; + --c--globals--colors--brand-200: #abc9f0; + --c--globals--colors--brand-250: #96bcec; + --c--globals--colors--brand-300: #80aee8; + --c--globals--colors--brand-350: #6ca0e4; + --c--globals--colors--brand-400: #5693e0; + --c--globals--colors--brand-450: #4085dc; + --c--globals--colors--brand-500: #2976d8; + --c--globals--colors--brand-550: #1167d4; + --c--globals--colors--brand-600: #0659c5; + --c--globals--colors--brand-650: #1a509f; + --c--globals--colors--brand-700: #20467f; + --c--globals--colors--brand-750: #203c63; + --c--globals--colors--brand-800: #1d314c; + --c--globals--colors--brand-850: #1a2638; + --c--globals--colors--brand-900: #141c28; + --c--globals--colors--brand-950: #0c1117; + --c--globals--colors--gray-000: #fff; + --c--globals--colors--gray-025: #f7f8f8; + --c--globals--colors--gray-050: #f0f1f2; + --c--globals--colors--gray-100: #e1e2e5; + --c--globals--colors--gray-150: #d2d4d8; + --c--globals--colors--gray-200: #c4c7cb; + --c--globals--colors--gray-250: #b5b9be; + --c--globals--colors--gray-300: #a7acb2; + --c--globals--colors--gray-350: #999ea5; + --c--globals--colors--gray-400: #8d9197; + --c--globals--colors--gray-450: #80848a; + --c--globals--colors--gray-500: #74777c; + --c--globals--colors--gray-550: #686b6f; + --c--globals--colors--gray-600: #5c5f63; + --c--globals--colors--gray-650: #505356; + --c--globals--colors--gray-700: #45474a; + --c--globals--colors--gray-750: #3a3b3e; + --c--globals--colors--gray-800: #2f3033; + --c--globals--colors--gray-850: #252627; + --c--globals--colors--gray-900: #1b1c1d; + --c--globals--colors--gray-950: #101112; + --c--globals--colors--gray-1000: #000; + --c--globals--colors--info-050: #eaf1fb; + --c--globals--colors--info-100: #d5e4f7; + --c--globals--colors--info-150: #c0d6f4; + --c--globals--colors--info-200: #abc9f0; + --c--globals--colors--info-250: #96bcec; + --c--globals--colors--info-300: #80aee8; + --c--globals--colors--info-350: #6ca0e4; + --c--globals--colors--info-400: #5693e0; + --c--globals--colors--info-450: #4085dc; + --c--globals--colors--info-500: #2976d8; + --c--globals--colors--info-550: #1167d4; + --c--globals--colors--info-600: #0659c5; + --c--globals--colors--info-650: #1a509f; + --c--globals--colors--info-700: #20467f; + --c--globals--colors--info-750: #203c63; + --c--globals--colors--info-800: #1d314c; + --c--globals--colors--info-850: #1a2638; + --c--globals--colors--info-900: #141c28; + --c--globals--colors--info-950: #0c1117; + --c--globals--colors--success-050: #e4f7d4; + --c--globals--colors--success-100: #c8eea8; + --c--globals--colors--success-150: #aae579; + --c--globals--colors--success-200: #89dc45; + --c--globals--colors--success-250: #72cf27; + --c--globals--colors--success-300: #6ac024; + --c--globals--colors--success-350: #61b121; + --c--globals--colors--success-400: #59a21e; + --c--globals--colors--success-450: #51941c; + --c--globals--colors--success-500: #4b851a; + --c--globals--colors--success-550: #427816; + --c--globals--colors--success-600: #3a6a14; + --c--globals--colors--success-650: #385c1f; + --c--globals--colors--success-700: #344d24; + --c--globals--colors--success-750: #2e4022; + --c--globals--colors--success-800: #27341f; + --c--globals--colors--success-850: #20281a; + --c--globals--colors--success-900: #181d15; + --c--globals--colors--success-950: #10120e; + --c--globals--colors--warning-050: #fff1bd; + --c--globals--colors--warning-100: #ffe176; + --c--globals--colors--warning-150: #ffcf25; + --c--globals--colors--warning-200: #f4bf06; + --c--globals--colors--warning-250: #e3b205; + --c--globals--colors--warning-300: #d3a504; + --c--globals--colors--warning-350: #c29805; + --c--globals--colors--warning-400: #b28c03; + --c--globals--colors--warning-450: #a27f03; + --c--globals--colors--warning-500: #937303; + --c--globals--colors--warning-550: #836703; + --c--globals--colors--warning-600: #745b03; + --c--globals--colors--warning-650: #625019; + --c--globals--colors--warning-700: #524620; + --c--globals--colors--warning-750: #443b20; + --c--globals--colors--warning-800: #36301d; + --c--globals--colors--warning-850: #2a2619; + --c--globals--colors--warning-900: #1e1c13; + --c--globals--colors--warning-950: #12110c; + --c--globals--colors--error-050: #fceded; + --c--globals--colors--error-100: #fadbdb; + --c--globals--colors--error-150: #f7c9c9; + --c--globals--colors--error-200: #f5b7b7; + --c--globals--colors--error-250: #f2a4a4; + --c--globals--colors--error-300: #ef9191; + --c--globals--colors--error-350: #ec7d7d; + --c--globals--colors--error-400: #e96868; + --c--globals--colors--error-450: #e55050; + --c--globals--colors--error-500: #e13131; + --c--globals--colors--error-550: #d80000; + --c--globals--colors--error-600: #c00101; + --c--globals--colors--error-650: #9e2219; + --c--globals--colors--error-700: #802820; + --c--globals--colors--error-750: #662820; + --c--globals--colors--error-800: #4f231e; + --c--globals--colors--error-850: #3b1d19; + --c--globals--colors--error-900: #2a1614; + --c--globals--colors--error-950: #1a0e0c; + --c--globals--colors--red-050: #fdeded; + --c--globals--colors--red-100: #fadbdb; + --c--globals--colors--red-150: #f8c9c9; + --c--globals--colors--red-200: #f5b7b6; + --c--globals--colors--red-250: #f3a4a3; + --c--globals--colors--red-300: #f09190; + --c--globals--colors--red-350: #ee7c7b; + --c--globals--colors--red-400: #eb6665; + --c--globals--colors--red-450: #e74e4d; + --c--globals--colors--red-500: #d83f3d; + --c--globals--colors--red-550: #c23837; + --c--globals--colors--red-600: #ac3231; + --c--globals--colors--red-650: #8d3531; + --c--globals--colors--red-700: #73332f; + --c--globals--colors--red-750: #5b2f2b; + --c--globals--colors--red-800: #472826; + --c--globals--colors--red-850: #35211f; + --c--globals--colors--red-900: #251817; + --c--globals--colors--red-950: #160f0e; + --c--globals--colors--orange-050: #fdeee2; + --c--globals--colors--orange-100: #fcddc5; + --c--globals--colors--orange-150: #facba8; + --c--globals--colors--orange-200: #f8b98b; + --c--globals--colors--orange-250: #f6a76a; + --c--globals--colors--orange-300: #f4934b; + --c--globals--colors--orange-350: #f27e27; + --c--globals--colors--orange-400: #e76e12; + --c--globals--colors--orange-450: #d26411; + --c--globals--colors--orange-500: #be5b0f; + --c--globals--colors--orange-550: #aa510e; + --c--globals--colors--orange-600: #97480c; + --c--globals--colors--orange-650: #7e431d; + --c--globals--colors--orange-700: #673c22; + --c--globals--colors--orange-750: #533422; + --c--globals--colors--orange-800: #412c1f; + --c--globals--colors--orange-850: #31231b; + --c--globals--colors--orange-900: #221a14; + --c--globals--colors--orange-950: #15100c; + --c--globals--colors--brown-050: #f3f0ef; + --c--globals--colors--brown-100: #e7e1df; + --c--globals--colors--brown-150: #dcd2cf; + --c--globals--colors--brown-200: #d0c4bf; + --c--globals--colors--brown-250: #c5b6b0; + --c--globals--colors--brown-300: #baa7a1; + --c--globals--colors--brown-350: #af9992; + --c--globals--colors--brown-400: #a48b83; + --c--globals--colors--brown-450: #997e74; + --c--globals--colors--brown-500: #8f7065; + --c--globals--colors--brown-550: #846357; + --c--globals--colors--brown-600: #7a5649; + --c--globals--colors--brown-650: #684c42; + --c--globals--colors--brown-700: #57423c; + --c--globals--colors--brown-750: #463833; + --c--globals--colors--brown-800: #382e2a; + --c--globals--colors--brown-850: #2b2422; + --c--globals--colors--brown-900: #1f1b19; + --c--globals--colors--brown-950: #121010; + --c--globals--colors--yellow-050: #faf0d3; + --c--globals--colors--yellow-100: #f5e2a4; + --c--globals--colors--yellow-150: #f0d275; + --c--globals--colors--yellow-200: #ebc242; + --c--globals--colors--yellow-250: #e4b213; + --c--globals--colors--yellow-300: #d4a511; + --c--globals--colors--yellow-350: #c39810; + --c--globals--colors--yellow-400: #b38b0f; + --c--globals--colors--yellow-450: #a37f0d; + --c--globals--colors--yellow-500: #93730c; + --c--globals--colors--yellow-550: #84670b; + --c--globals--colors--yellow-600: #755b0a; + --c--globals--colors--yellow-650: #63501c; + --c--globals--colors--yellow-700: #534521; + --c--globals--colors--yellow-750: #443a21; + --c--globals--colors--yellow-800: #36301f; + --c--globals--colors--yellow-850: #29261a; + --c--globals--colors--yellow-900: #1d1c14; + --c--globals--colors--yellow-950: #12110c; + --c--globals--colors--green-050: #e2f6e5; + --c--globals--colors--green-100: #c5ecca; + --c--globals--colors--green-150: #a7e3af; + --c--globals--colors--green-200: #89d894; + --c--globals--colors--green-250: #67ce75; + --c--globals--colors--green-300: #4dc25d; + --c--globals--colors--green-350: #48b257; + --c--globals--colors--green-400: #41a44f; + --c--globals--colors--green-450: #3b9548; + --c--globals--colors--green-500: #368741; + --c--globals--colors--green-550: #30793a; + --c--globals--colors--green-600: #2b6b33; + --c--globals--colors--green-650: #2f5c34; + --c--globals--colors--green-700: #2e4e31; + --c--globals--colors--green-750: #2a412c; + --c--globals--colors--green-800: #253426; + --c--globals--colors--green-850: #1e281f; + --c--globals--colors--green-900: #171d17; + --c--globals--colors--green-950: #0f120f; + --c--globals--colors--blue-1-050: #ebf1ff; + --c--globals--colors--blue-1-100: #d6e3fe; + --c--globals--colors--blue-1-150: #c2d5fe; + --c--globals--colors--blue-1-200: #adc7fe; + --c--globals--colors--blue-1-250: #99b8fd; + --c--globals--colors--blue-1-300: #84aafd; + --c--globals--colors--blue-1-350: #6f9bfd; + --c--globals--colors--blue-1-400: #5a8dfb; + --c--globals--colors--blue-1-450: #437dfc; + --c--globals--colors--blue-1-500: #3d71e4; + --c--globals--colors--blue-1-550: #3665cc; + --c--globals--colors--blue-1-600: #305ab5; + --c--globals--colors--blue-1-650: #315093; + --c--globals--colors--blue-1-700: #2e4675; + --c--globals--colors--blue-1-750: #293b5e; + --c--globals--colors--blue-1-800: #243048; + --c--globals--colors--blue-1-850: #1e2635; + --c--globals--colors--blue-1-900: #171c25; + --c--globals--colors--blue-1-950: #0e1116; + --c--globals--colors--blue-2-050: #e2f4f9; + --c--globals--colors--blue-2-100: #c5e9f3; + --c--globals--colors--blue-2-150: #a7dded; + --c--globals--colors--blue-2-200: #88d1e6; + --c--globals--colors--blue-2-250: #68c5e0; + --c--globals--colors--blue-2-300: #48b8d9; + --c--globals--colors--blue-2-350: #3baaca; + --c--globals--colors--blue-2-400: #359cb9; + --c--globals--colors--blue-2-450: #318ea9; + --c--globals--colors--blue-2-500: #2c8199; + --c--globals--colors--blue-2-550: #277389; + --c--globals--colors--blue-2-600: #236679; + --c--globals--colors--blue-2-650: #2a5866; + --c--globals--colors--blue-2-700: #2a4b55; + --c--globals--colors--blue-2-750: #283f47; + --c--globals--colors--blue-2-800: #233337; + --c--globals--colors--blue-2-850: #1d272a; + --c--globals--colors--blue-2-900: #161c1e; + --c--globals--colors--blue-2-950: #0e1112; + --c--globals--colors--purple-050: #f6eeff; + --c--globals--colors--purple-100: #ecdcff; + --c--globals--colors--purple-150: #e3cbfe; + --c--globals--colors--purple-200: #dab9fe; + --c--globals--colors--purple-250: #d0a7fe; + --c--globals--colors--purple-300: #c795fe; + --c--globals--colors--purple-350: #bd83fd; + --c--globals--colors--purple-400: #b36ffd; + --c--globals--colors--purple-450: #a85bfd; + --c--globals--colors--purple-500: #9b4bf3; + --c--globals--colors--purple-550: #8b43da; + --c--globals--colors--purple-600: #7b3cc1; + --c--globals--colors--purple-650: #673c9b; + --c--globals--colors--purple-700: #56387d; + --c--globals--colors--purple-750: #463162; + --c--globals--colors--purple-800: #382a4a; + --c--globals--colors--purple-850: #2a2237; + --c--globals--colors--purple-900: #1e1926; + --c--globals--colors--purple-950: #121017; + --c--globals--colors--pink-050: #fcedf5; + --c--globals--colors--pink-100: #f9daea; + --c--globals--colors--pink-150: #f7c7e0; + --c--globals--colors--pink-200: #f4b4d5; + --c--globals--colors--pink-250: #f1a1ca; + --c--globals--colors--pink-300: #ee8cbf; + --c--globals--colors--pink-350: #ea77b3; + --c--globals--colors--pink-400: #e760a6; + --c--globals--colors--pink-450: #e24797; + --c--globals--colors--pink-500: #cd4089; + --c--globals--colors--pink-550: #b8397b; + --c--globals--colors--pink-600: #a3336d; + --c--globals--colors--pink-650: #86355e; + --c--globals--colors--pink-700: #6e334f; + --c--globals--colors--pink-750: #582e42; + --c--globals--colors--pink-800: #442834; + --c--globals--colors--pink-850: #332028; + --c--globals--colors--pink-900: #24181d; + --c--globals--colors--pink-950: #160f12; + --c--globals--colors--black-000: #0000; + --c--globals--colors--black-050: #0000000d; + --c--globals--colors--black-100: #0000001a; + --c--globals--colors--black-150: #00000026; + --c--globals--colors--black-200: #0003; + --c--globals--colors--black-250: #00000040; + --c--globals--colors--black-300: #0000004d; + --c--globals--colors--black-350: #00000059; + --c--globals--colors--black-400: #0006; + --c--globals--colors--black-450: #00000073; + --c--globals--colors--black-500: #00000080; + --c--globals--colors--black-550: #0000008c; + --c--globals--colors--black-600: #0009; + --c--globals--colors--black-650: #000000a6; + --c--globals--colors--black-700: #000000b3; + --c--globals--colors--black-750: #000000bf; + --c--globals--colors--black-800: #000c; + --c--globals--colors--black-850: #000000d9; + --c--globals--colors--black-900: #000000e6; + --c--globals--colors--black-950: #000000f2; + --c--globals--colors--white-000: #fff; + --c--globals--colors--white-050: #ffffff0d; + --c--globals--colors--white-100: #ffffff1a; + --c--globals--colors--white-150: #ffffff26; + --c--globals--colors--white-200: #fff3; + --c--globals--colors--white-250: #ffffff40; + --c--globals--colors--white-300: #ffffff4d; + --c--globals--colors--white-350: #ffffff59; + --c--globals--colors--white-400: #fff6; + --c--globals--colors--white-450: #ffffff73; + --c--globals--colors--white-500: #ffffff80; + --c--globals--colors--white-550: #ffffff8c; + --c--globals--colors--white-600: #fff9; + --c--globals--colors--white-650: #ffffffa6; + --c--globals--colors--white-700: #ffffffb3; + --c--globals--colors--white-750: #ffffffbf; + --c--globals--colors--white-800: #fffc; + --c--globals--colors--white-850: #ffffffd9; + --c--globals--colors--white-900: #ffffffe6; + --c--globals--colors--white-950: #fffffff2; + --c--globals--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0); + --c--globals--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1); + --c--globals--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); + --c--globals--transitions--duration: 250ms; + --c--globals--font--sizes--xs: 0.75rem; + --c--globals--font--sizes--sm: 0.875rem; + --c--globals--font--sizes--md: 1rem; + --c--globals--font--sizes--lg: 1.125rem; + --c--globals--font--sizes--ml: 0.938rem; + --c--globals--font--sizes--xl: 1.25rem; + --c--globals--font--sizes--t: 0.6875rem; + --c--globals--font--sizes--s: 0.75rem; + --c--globals--font--sizes--h1: 2rem; + --c--globals--font--sizes--h2: 1.75rem; + --c--globals--font--sizes--h3: 1.5rem; + --c--globals--font--sizes--h4: 1.375rem; + --c--globals--font--sizes--h5: 1.25rem; + --c--globals--font--sizes--h6: 1.125rem; + --c--globals--font--sizes--xl-alt: 5rem; + --c--globals--font--sizes--lg-alt: 4.5rem; + --c--globals--font--sizes--md-alt: 4rem; + --c--globals--font--sizes--sm-alt: 3.5rem; + --c--globals--font--sizes--xs-alt: 3rem; + --c--globals--font--weights--thin: 200; + --c--globals--font--weights--light: 300; + --c--globals--font--weights--regular: 400; + --c--globals--font--weights--medium: 500; + --c--globals--font--weights--bold: 600; + --c--globals--font--weights--extrabold: 700; + --c--globals--font--weights--black: 800; + --c--globals--font--families--base: 'Roboto Flex Variable', sans-serif; + --c--globals--font--families--accent: 'Roboto Flex Variable', sans-serif; + --c--globals--spacings--l: 3rem; + --c--globals--spacings--b: 1.625rem; + --c--globals--spacings--m: 0.8125rem; + --c--globals--spacings--s: 1rem; + --c--globals--spacings--t: 0.5rem; + --c--globals--spacings--st: 0.25rem; + --c--globals--spacings--4xs: 0.125rem; + --c--globals--spacings--xxxs: 0.25rem; + --c--globals--spacings--xxs: 0.375rem; + --c--globals--spacings--xs: 0.5rem; + --c--globals--spacings--sm: 0.75rem; + --c--globals--spacings--base: 1rem; + --c--globals--spacings--md: 1.5rem; + --c--globals--spacings--lg: 2rem; + --c--globals--spacings--xl: 2.5rem; + --c--globals--spacings--xxl: 3rem; + --c--globals--spacings--xxxl: 3.5rem; + --c--globals--spacings--4xl: 4rem; + --c--globals--spacings--5xl: 4.5rem; + --c--globals--spacings--6xl: 6rem; + --c--globals--spacings--7xl: 7.5rem; + --c--globals--breakpoints--xs: 0; + --c--globals--breakpoints--sm: 576px; + --c--globals--breakpoints--md: 768px; + --c--globals--breakpoints--lg: 992px; + --c--globals--breakpoints--xl: 1200px; + --c--globals--breakpoints--xxl: 1400px; + --c--contextuals--background--surface--primary: var( + --c--globals--colors--gray-800 ); - --c--components--button--primary-text--background--color-focus-visible: #fff; - --c--components--button--primary-text--background--color-disabled: var( - --c--theme--colors--greyscale-000 + --c--contextuals--background--surface--secondary: var( + --c--globals--colors--gray-850 ); - --c--components--button--primary-text--color: var( - --c--theme--colors--primary-800 + --c--contextuals--background--surface--tertiary: var( + --c--globals--colors--gray-900 ); - --c--components--button--primary-text--color-hover: var( - --c--theme--colors--primary-800 + --c--contextuals--background--semantic--brand--primary: var( + --c--globals--colors--brand-550 ); - --c--components--button--primary-text--disabled: var( - --c--theme--colors--greyscale-400 + --c--contextuals--background--semantic--brand--primary-hover: var( + --c--globals--colors--brand-650 ); - --c--components--button--secondary--background--color-hover: #f6f6f6; - --c--components--button--secondary--background--color-active: #ededed; - --c--components--button--secondary--background--color-focus-visible: var( - --c--theme--colors--greyscale-000 + --c--contextuals--background--semantic--brand--secondary: var( + --c--globals--colors--brand-700 ); - --c--components--button--secondary--background--disabled: var( - --c--theme--colors--greyscale-000 + --c--contextuals--background--semantic--brand--secondary-hover: var( + --c--globals--colors--brand-750 ); - --c--components--button--secondary--color: var( - --c--theme--colors--primary-800 + --c--contextuals--background--semantic--brand--tertiary: var( + --c--globals--colors--brand-750 ); - --c--components--button--secondary--border--color: var( - --c--theme--colors--greyscale-300 + --c--contextuals--background--semantic--brand--tertiary-hover: var( + --c--globals--colors--brand-800 ); - --c--components--button--secondary--border--color-hover: var( - --c--theme--colors--greyscale-300 + --c--contextuals--background--semantic--neutral--primary: var( + --c--globals--colors--gray-550 ); - --c--components--button--secondary--border--color-disabled: var( - --c--theme--colors--greyscale-300 + --c--contextuals--background--semantic--neutral--primary-hover: var( + --c--globals--colors--gray-650 ); - --c--components--button--secondary--disabled: var( - --c--theme--colors--greyscale-400 + --c--contextuals--background--semantic--neutral--secondary: var( + --c--globals--colors--gray-700 ); - --c--components--button--tertiary--background--color: var( - --c--theme--colors--primary-100 + --c--contextuals--background--semantic--neutral--secondary-hover: var( + --c--globals--colors--gray-750 ); - --c--components--button--tertiary--background--color-focus-visible: var( - --c--theme--colors--primary-100 + --c--contextuals--background--semantic--neutral--tertiary: var( + --c--globals--colors--gray-750 ); - --c--components--button--tertiary--background--color-hover: var( - --c--theme--colors--primary-300 + --c--contextuals--background--semantic--neutral--tertiary-hover: var( + --c--globals--colors--gray-800 ); - --c--components--button--tertiary--background--color-active: var( - --c--theme--colors--primary-300 + --c--contextuals--background--semantic--contextual--primary: var( + --c--globals--colors--white-050 ); - --c--components--button--tertiary--background--disabled: var( - --c--theme--colors--primary-050 + --c--contextuals--background--semantic--contextual--primary-hover: var( + --c--globals--colors--white-100 ); - --c--components--button--tertiary--color: var( - --c--theme--colors--primary-800 + --c--contextuals--background--semantic--info--primary: var( + --c--globals--colors--info-550 ); - --c--components--button--tertiary--disabled: var( - --c--theme--colors--primary-300 + --c--contextuals--background--semantic--info--primary-hover: var( + --c--globals--colors--info-650 ); - --c--components--button--tertiary-text--background--color-hover: var( - --c--theme--colors--greyscale-100 + --c--contextuals--background--semantic--info--secondary: var( + --c--globals--colors--info-700 ); - --c--components--button--tertiary-text--color-hover: var( - --c--theme--colors--primary-text + --c--contextuals--background--semantic--info--secondary-hover: var( + --c--globals--colors--info-750 ); - --c--components--button--tertiary-text--color: var( - --c--theme--colors--primary-600 + --c--contextuals--background--semantic--info--tertiary: var( + --c--globals--colors--info-750 ); - --c--components--button--tertiary-text--disabled: var( - --c--theme--colors--primary-300 + --c--contextuals--background--semantic--info--tertiary-hover: var( + --c--globals--colors--info-800 ); - --c--components--button--danger--color-hover: white; - --c--components--button--danger--background--color: var( - --c--theme--colors--danger-600 + --c--contextuals--background--semantic--success--primary: var( + --c--globals--colors--success-550 ); - --c--components--button--danger--background--color-hover: #ff2725; - --c--components--button--danger--background--color-focus-visible: var( - --c--theme--colors--danger-600 + --c--contextuals--background--semantic--success--primary-hover: var( + --c--globals--colors--success-650 ); - --c--components--button--danger--background--color-disabled: var( - --c--theme--colors--greyscale-100 + --c--contextuals--background--semantic--success--secondary: var( + --c--globals--colors--success-700 ); - --c--components--button--danger--color-disabled: var( - --c--theme--colors--greyscale-400 + --c--contextuals--background--semantic--success--secondary-hover: var( + --c--globals--colors--success-750 ); - --c--components--datagrid--header--color: var( - --c--theme--colors--greyscale-600 + --c--contextuals--background--semantic--success--tertiary: var( + --c--globals--colors--success-750 ); - --c--components--datagrid--header--size: 12px; - --c--components--datagrid--header--weight: 500; - --c--components--datagrid--body--background-color-hover: var( - --c--theme--colors--greyscale-100 + --c--contextuals--background--semantic--success--tertiary-hover: var( + --c--globals--colors--success-800 + ); + --c--contextuals--background--semantic--warning--primary: var( + --c--globals--colors--warning-550 + ); + --c--contextuals--background--semantic--warning--primary-hover: var( + --c--globals--colors--warning-650 + ); + --c--contextuals--background--semantic--warning--secondary: var( + --c--globals--colors--warning-700 + ); + --c--contextuals--background--semantic--warning--secondary-hover: var( + --c--globals--colors--warning-750 + ); + --c--contextuals--background--semantic--warning--tertiary: var( + --c--globals--colors--warning-750 + ); + --c--contextuals--background--semantic--warning--tertiary-hover: var( + --c--globals--colors--warning-800 + ); + --c--contextuals--background--semantic--error--primary: var( + --c--globals--colors--error-550 + ); + --c--contextuals--background--semantic--error--primary-hover: var( + --c--globals--colors--error-650 + ); + --c--contextuals--background--semantic--error--secondary: var( + --c--globals--colors--error-700 + ); + --c--contextuals--background--semantic--error--secondary-hover: var( + --c--globals--colors--error-750 + ); + --c--contextuals--background--semantic--error--tertiary: var( + --c--globals--colors--error-750 + ); + --c--contextuals--background--semantic--error--tertiary-hover: var( + --c--globals--colors--error-800 + ); + --c--contextuals--background--semantic--disabled--primary: var( + --c--globals--colors--gray-750 + ); + --c--contextuals--background--semantic--disabled--secondary: var( + --c--globals--colors--gray-800 + ); + --c--contextuals--background--palette--brand--primary: var( + --c--globals--colors--brand-350 + ); + --c--contextuals--background--palette--brand--secondary: var( + --c--globals--colors--brand-450 + ); + --c--contextuals--background--palette--brand--tertiary: var( + --c--globals--colors--brand-550 + ); + --c--contextuals--background--palette--red--primary: var( + --c--globals--colors--red-350 + ); + --c--contextuals--background--palette--red--secondary: var( + --c--globals--colors--red-450 + ); + --c--contextuals--background--palette--red--tertiary: var( + --c--globals--colors--red-550 + ); + --c--contextuals--background--palette--orange--primary: var( + --c--globals--colors--orange-350 + ); + --c--contextuals--background--palette--orange--secondary: var( + --c--globals--colors--orange-450 + ); + --c--contextuals--background--palette--orange--tertiary: var( + --c--globals--colors--orange-550 + ); + --c--contextuals--background--palette--brown--primary: var( + --c--globals--colors--brown-350 + ); + --c--contextuals--background--palette--brown--secondary: var( + --c--globals--colors--brown-450 + ); + --c--contextuals--background--palette--brown--tertiary: var( + --c--globals--colors--brown-550 + ); + --c--contextuals--background--palette--yellow--primary: var( + --c--globals--colors--yellow-350 + ); + --c--contextuals--background--palette--yellow--secondary: var( + --c--globals--colors--yellow-450 + ); + --c--contextuals--background--palette--yellow--tertiary: var( + --c--globals--colors--yellow-550 + ); + --c--contextuals--background--palette--green--primary: var( + --c--globals--colors--green-350 + ); + --c--contextuals--background--palette--green--secondary: var( + --c--globals--colors--green-450 + ); + --c--contextuals--background--palette--green--tertiary: var( + --c--globals--colors--green-550 ); - --c--components--forms-checkbox--border-radius: 4px; - --c--components--forms-checkbox--border-color: var( - --c--theme--colors--primary-800 + --c--contextuals--background--palette--blue-1--primary: var( + --c--globals--colors--blue-1-350 ); - --c--components--forms-checkbox--background-color--hover: var( - --c--theme--colors--greyscale-100 + --c--contextuals--background--palette--blue-1--secondary: var( + --c--globals--colors--blue-1-450 ); - --c--components--forms-checkbox--border--color-disabled: var( - --c--theme--colors--greyscale-200 + --c--contextuals--background--palette--blue-1--tertiary: var( + --c--globals--colors--blue-1-550 ); - --c--components--forms-checkbox--border--color: var( - --c--theme--colors--primary-800 + --c--contextuals--background--palette--blue-2--primary: var( + --c--globals--colors--blue-2-350 ); - --c--components--forms-checkbox--background--disabled: var( - --c--theme--colors--greyscale-200 + --c--contextuals--background--palette--blue-2--secondary: var( + --c--globals--colors--blue-2-450 ); - --c--components--forms-checkbox--background--enable: var( - --c--theme--colors--primary-800 + --c--contextuals--background--palette--blue-2--tertiary: var( + --c--globals--colors--blue-2-550 ); - --c--components--forms-checkbox--check--disabled: var( - --c--theme--colors--greyscale-300 + --c--contextuals--background--palette--purple--primary: var( + --c--globals--colors--purple-350 ); - --c--components--forms-checkbox--check--enable: var( - --c--theme--colors--greyscale-000 + --c--contextuals--background--palette--purple--secondary: var( + --c--globals--colors--purple-450 ); - --c--components--forms-checkbox--color: var(--c--theme--colors--primary-text); - --c--components--forms-checkbox--label--color: var( - --c--theme--colors--greyscale-1000 + --c--contextuals--background--palette--purple--tertiary: var( + --c--globals--colors--purple-550 ); - --c--components--forms-checkbox--label--size: var( - --c--theme--font--sizes--sm + --c--contextuals--background--palette--pink--primary: var( + --c--globals--colors--pink-350 ); - --c--components--forms-checkbox--label--weight: 500; - --c--components--forms-checkbox--text--color: var( - --c--theme--colors--greyscale-600 + --c--contextuals--background--palette--pink--secondary: var( + --c--globals--colors--pink-450 ); - --c--components--forms-checkbox--text--size: var(--c--theme--font--sizes--s); - --c--components--forms-checkbox--text--weight: 400; - --c--components--forms-checkbox--text--color-disabled: var( - --c--theme--colors--greyscale-300 + --c--contextuals--background--palette--pink--tertiary: var( + --c--globals--colors--pink-550 ); - --c--components--forms-labelledbox--label-color--small: var( - --c--theme--colors--greyscale-950 + --c--contextuals--background--palette--gray--primary: var( + --c--globals--colors--gray-350 ); - --c--components--forms-labelledbox--label-color--small--disabled: var( - --c--theme--colors--greyscale-300 + --c--contextuals--background--palette--gray--secondary: var( + --c--globals--colors--gray-450 + ); + --c--contextuals--background--palette--gray--tertiary: var( + --c--globals--colors--gray-550 + ); + --c--contextuals--content--logo1: var(--c--globals--colors--logo-1-dark); + --c--contextuals--content--logo2: var(--c--globals--colors--logo-2-dark); + --c--contextuals--content--semantic--brand--primary: var( + --c--globals--colors--brand-050 + ); + --c--contextuals--content--semantic--brand--secondary: var( + --c--globals--colors--brand-100 + ); + --c--contextuals--content--semantic--brand--tertiary: var( + --c--globals--colors--brand-250 + ); + --c--contextuals--content--semantic--brand--on-brand: var( + --c--globals--colors--brand-050 + ); + --c--contextuals--content--semantic--neutral--primary: var( + --c--globals--colors--gray-050 + ); + --c--contextuals--content--semantic--neutral--secondary: var( + --c--globals--colors--gray-100 + ); + --c--contextuals--content--semantic--neutral--tertiary: var( + --c--globals--colors--gray-250 + ); + --c--contextuals--content--semantic--neutral--on-neutral: var( + --c--globals--colors--gray-050 + ); + --c--contextuals--content--semantic--contextual--primary: var( + --c--globals--colors--black-850 + ); + --c--contextuals--content--semantic--info--primary: var( + --c--globals--colors--info-050 + ); + --c--contextuals--content--semantic--info--secondary: var( + --c--globals--colors--info-100 + ); + --c--contextuals--content--semantic--info--tertiary: var( + --c--globals--colors--info-250 + ); + --c--contextuals--content--semantic--info--on-info: var( + --c--globals--colors--info-050 + ); + --c--contextuals--content--semantic--success--primary: var( + --c--globals--colors--success-050 + ); + --c--contextuals--content--semantic--success--secondary: var( + --c--globals--colors--success-100 + ); + --c--contextuals--content--semantic--success--tertiary: var( + --c--globals--colors--success-250 + ); + --c--contextuals--content--semantic--success--on-success: var( + --c--globals--colors--success-050 + ); + --c--contextuals--content--semantic--warning--primary: var( + --c--globals--colors--warning-050 + ); + --c--contextuals--content--semantic--warning--secondary: var( + --c--globals--colors--warning-100 + ); + --c--contextuals--content--semantic--warning--tertiary: var( + --c--globals--colors--warning-250 + ); + --c--contextuals--content--semantic--warning--on-warning: var( + --c--globals--colors--warning-050 + ); + --c--contextuals--content--semantic--error--primary: var( + --c--globals--colors--error-050 + ); + --c--contextuals--content--semantic--error--secondary: var( + --c--globals--colors--error-100 + ); + --c--contextuals--content--semantic--error--tertiary: var( + --c--globals--colors--error-250 + ); + --c--contextuals--content--semantic--error--on-error: var( + --c--globals--colors--error-050 + ); + --c--contextuals--content--semantic--disabled--primary: var( + --c--globals--colors--gray-600 + ); + --c--contextuals--content--semantic--disabled--secondary: var( + --c--globals--colors--black-300 + ); + --c--contextuals--content--palette--brand--primary: var( + --c--globals--colors--brand-350 + ); + --c--contextuals--content--palette--brand--secondary: var( + --c--globals--colors--brand-450 + ); + --c--contextuals--content--palette--brand--tertiary: var( + --c--globals--colors--brand-550 + ); + --c--contextuals--content--palette--red--primary: var( + --c--globals--colors--red-350 + ); + --c--contextuals--content--palette--red--secondary: var( + --c--globals--colors--red-450 + ); + --c--contextuals--content--palette--red--tertiary: var( + --c--globals--colors--red-550 + ); + --c--contextuals--content--palette--orange--primary: var( + --c--globals--colors--orange-350 + ); + --c--contextuals--content--palette--orange--secondary: var( + --c--globals--colors--orange-450 + ); + --c--contextuals--content--palette--orange--tertiary: var( + --c--globals--colors--orange-550 + ); + --c--contextuals--content--palette--brown--primary: var( + --c--globals--colors--brown-350 + ); + --c--contextuals--content--palette--brown--secondary: var( + --c--globals--colors--brown-450 + ); + --c--contextuals--content--palette--brown--tertiary: var( + --c--globals--colors--brown-550 + ); + --c--contextuals--content--palette--yellow--primary: var( + --c--globals--colors--yellow-350 + ); + --c--contextuals--content--palette--yellow--secondary: var( + --c--globals--colors--yellow-450 + ); + --c--contextuals--content--palette--yellow--tertiary: var( + --c--globals--colors--yellow-550 + ); + --c--contextuals--content--palette--green--primary: var( + --c--globals--colors--green-350 + ); + --c--contextuals--content--palette--green--secondary: var( + --c--globals--colors--green-450 + ); + --c--contextuals--content--palette--green--tertiary: var( + --c--globals--colors--green-550 + ); + --c--contextuals--content--palette--blue-1--primary: var( + --c--globals--colors--blue-1-350 + ); + --c--contextuals--content--palette--blue-1--secondary: var( + --c--globals--colors--blue-1-450 + ); + --c--contextuals--content--palette--blue-1--tertiary: var( + --c--globals--colors--blue-1-550 + ); + --c--contextuals--content--palette--blue-2--primary: var( + --c--globals--colors--blue-2-350 + ); + --c--contextuals--content--palette--blue-2--secondary: var( + --c--globals--colors--blue-2-450 + ); + --c--contextuals--content--palette--blue-2--tertiary: var( + --c--globals--colors--blue-2-550 + ); + --c--contextuals--content--palette--purple--primary: var( + --c--globals--colors--purple-350 + ); + --c--contextuals--content--palette--purple--secondary: var( + --c--globals--colors--purple-450 + ); + --c--contextuals--content--palette--purple--tertiary: var( + --c--globals--colors--purple-550 + ); + --c--contextuals--content--palette--pink--primary: var( + --c--globals--colors--pink-350 + ); + --c--contextuals--content--palette--pink--secondary: var( + --c--globals--colors--pink-450 + ); + --c--contextuals--content--palette--pink--tertiary: var( + --c--globals--colors--pink-550 + ); + --c--contextuals--content--palette--gray--primary: var( + --c--globals--colors--gray-350 + ); + --c--contextuals--content--palette--gray--secondary: var( + --c--globals--colors--gray-450 + ); + --c--contextuals--content--palette--gray--tertiary: var( + --c--globals--colors--gray-550 + ); + --c--contextuals--border--surface--primary: var( + --c--globals--colors--gray-750 + ); + --c--contextuals--border--semantic--brand--primary: var( + --c--globals--colors--brand-450 + ); + --c--contextuals--border--semantic--brand--secondary: var( + --c--globals--colors--brand-600 + ); + --c--contextuals--border--semantic--brand--tertiary: var( + --c--globals--colors--brand-700 + ); + --c--contextuals--border--semantic--contextual--primary: var( + --c--globals--colors--black-200 + ); + --c--contextuals--border--semantic--neutral--primary: var( + --c--globals--colors--gray-450 + ); + --c--contextuals--border--semantic--neutral--secondary: var( + --c--globals--colors--gray-600 + ); + --c--contextuals--border--semantic--neutral--tertiary: var( + --c--globals--colors--gray-700 + ); + --c--contextuals--border--semantic--info--primary: var( + --c--globals--colors--info-450 + ); + --c--contextuals--border--semantic--info--secondary: var( + --c--globals--colors--info-600 + ); + --c--contextuals--border--semantic--info--tertiary: var( + --c--globals--colors--info-700 + ); + --c--contextuals--border--semantic--success--primary: var( + --c--globals--colors--success-450 + ); + --c--contextuals--border--semantic--success--secondary: var( + --c--globals--colors--success-600 + ); + --c--contextuals--border--semantic--success--tertiary: var( + --c--globals--colors--success-700 + ); + --c--contextuals--border--semantic--warning--primary: var( + --c--globals--colors--warning-450 + ); + --c--contextuals--border--semantic--warning--secondary: var( + --c--globals--colors--warning-600 + ); + --c--contextuals--border--semantic--warning--tertiary: var( + --c--globals--colors--warning-700 + ); + --c--contextuals--border--semantic--error--primary: var( + --c--globals--colors--error-450 + ); + --c--contextuals--border--semantic--error--secondary: var( + --c--globals--colors--error-600 + ); + --c--contextuals--border--semantic--error--tertiary: var( + --c--globals--colors--error-700 + ); + --c--contextuals--border--semantic--disabled--primary: var( + --c--globals--colors--gray-800 + ); + --c--contextuals--border--palette--brand--primary: var( + --c--globals--colors--brand-350 + ); + --c--contextuals--border--palette--brand--secondary: var( + --c--globals--colors--brand-450 + ); + --c--contextuals--border--palette--brand--tertiary: var( + --c--globals--colors--brand-550 + ); + --c--contextuals--border--palette--red--primary: var( + --c--globals--colors--red-350 + ); + --c--contextuals--border--palette--red--secondary: var( + --c--globals--colors--red-450 + ); + --c--contextuals--border--palette--red--tertiary: var( + --c--globals--colors--red-550 + ); + --c--contextuals--border--palette--orange--primary: var( + --c--globals--colors--orange-350 + ); + --c--contextuals--border--palette--orange--secondary: var( + --c--globals--colors--orange-450 + ); + --c--contextuals--border--palette--orange--tertiary: var( + --c--globals--colors--orange-550 + ); + --c--contextuals--border--palette--brown--primary: var( + --c--globals--colors--brown-350 + ); + --c--contextuals--border--palette--brown--secondary: var( + --c--globals--colors--brown-450 + ); + --c--contextuals--border--palette--brown--tertiary: var( + --c--globals--colors--brown-550 + ); + --c--contextuals--border--palette--yellow--primary: var( + --c--globals--colors--yellow-350 + ); + --c--contextuals--border--palette--yellow--secondary: var( + --c--globals--colors--yellow-450 + ); + --c--contextuals--border--palette--yellow--tertiary: var( + --c--globals--colors--yellow-550 + ); + --c--contextuals--border--palette--green--primary: var( + --c--globals--colors--green-350 + ); + --c--contextuals--border--palette--green--secondary: var( + --c--globals--colors--green-450 + ); + --c--contextuals--border--palette--green--tertiary: var( + --c--globals--colors--green-550 + ); + --c--contextuals--border--palette--blue-1--primary: var( + --c--globals--colors--blue-1-350 + ); + --c--contextuals--border--palette--blue-1--secondary: var( + --c--globals--colors--blue-1-450 + ); + --c--contextuals--border--palette--blue-1--tertiary: var( + --c--globals--colors--blue-1-550 + ); + --c--contextuals--border--palette--blue-2--primary: var( + --c--globals--colors--blue-2-350 + ); + --c--contextuals--border--palette--blue-2--secondary: var( + --c--globals--colors--blue-2-450 + ); + --c--contextuals--border--palette--blue-2--tertiary: var( + --c--globals--colors--blue-2-550 + ); + --c--contextuals--border--palette--purple--primary: var( + --c--globals--colors--purple-350 + ); + --c--contextuals--border--palette--purple--secondary: var( + --c--globals--colors--purple-450 + ); + --c--contextuals--border--palette--purple--tertiary: var( + --c--globals--colors--purple-550 + ); + --c--contextuals--border--palette--pink--primary: var( + --c--globals--colors--pink-350 + ); + --c--contextuals--border--palette--pink--secondary: var( + --c--globals--colors--pink-450 + ); + --c--contextuals--border--palette--pink--tertiary: var( + --c--globals--colors--pink-550 + ); + --c--contextuals--border--palette--gray--primary: var( + --c--globals--colors--gray-350 + ); + --c--contextuals--border--palette--gray--secondary: var( + --c--globals--colors--gray-450 + ); + --c--contextuals--border--palette--gray--tertiary: var( + --c--globals--colors--gray-550 + ); +} + +.cunningham-theme--dsfr { + --c--globals--font--families--base: + marianne, inter, roboto flex variable, sans-serif; + --c--globals--font--families--accent: + marianne, inter, roboto flex variable, sans-serif; + --c--components--logo--src: /assets/logo-gouv.svg; + --c--components--logo--widthHeader: 110px; + --c--components--logo--widthFooter: 220px; + --c--components--logo--alt: gouvernement logo; + --c--components--la-gaufre: true; + --c--components--home-proconnect: true; + --c--components--favicon--ico: /assets/favicon-dsfr.ico; + --c--components--favicon--png-light: /assets/favicon-dsfr.png; + --c--components--favicon--png-dark: /assets/favicon-dark-dsfr.png; +} + +.clr-logo-1 { + color: var(--c--globals--colors--logo-1); +} + +.clr-logo-2 { + color: var(--c--globals--colors--logo-2); +} + +.clr-logo-1-dark { + color: var(--c--globals--colors--logo-1-dark); +} + +.clr-logo-2-dark { + color: var(--c--globals--colors--logo-2-dark); +} + +.clr-brand-050 { + color: var(--c--globals--colors--brand-050); +} + +.clr-brand-100 { + color: var(--c--globals--colors--brand-100); +} + +.clr-brand-150 { + color: var(--c--globals--colors--brand-150); +} + +.clr-brand-200 { + color: var(--c--globals--colors--brand-200); +} + +.clr-brand-250 { + color: var(--c--globals--colors--brand-250); +} + +.clr-brand-300 { + color: var(--c--globals--colors--brand-300); +} + +.clr-brand-350 { + color: var(--c--globals--colors--brand-350); +} + +.clr-brand-400 { + color: var(--c--globals--colors--brand-400); +} + +.clr-brand-450 { + color: var(--c--globals--colors--brand-450); +} + +.clr-brand-500 { + color: var(--c--globals--colors--brand-500); +} + +.clr-brand-550 { + color: var(--c--globals--colors--brand-550); +} + +.clr-brand-600 { + color: var(--c--globals--colors--brand-600); +} + +.clr-brand-650 { + color: var(--c--globals--colors--brand-650); +} + +.clr-brand-700 { + color: var(--c--globals--colors--brand-700); +} + +.clr-brand-750 { + color: var(--c--globals--colors--brand-750); +} + +.clr-brand-800 { + color: var(--c--globals--colors--brand-800); +} + +.clr-brand-850 { + color: var(--c--globals--colors--brand-850); +} + +.clr-brand-900 { + color: var(--c--globals--colors--brand-900); +} + +.clr-brand-950 { + color: var(--c--globals--colors--brand-950); +} + +.clr-gray-000 { + color: var(--c--globals--colors--gray-000); +} + +.clr-gray-025 { + color: var(--c--globals--colors--gray-025); +} + +.clr-gray-050 { + color: var(--c--globals--colors--gray-050); +} + +.clr-gray-100 { + color: var(--c--globals--colors--gray-100); +} + +.clr-gray-150 { + color: var(--c--globals--colors--gray-150); +} + +.clr-gray-200 { + color: var(--c--globals--colors--gray-200); +} + +.clr-gray-250 { + color: var(--c--globals--colors--gray-250); +} + +.clr-gray-300 { + color: var(--c--globals--colors--gray-300); +} + +.clr-gray-350 { + color: var(--c--globals--colors--gray-350); +} + +.clr-gray-400 { + color: var(--c--globals--colors--gray-400); +} + +.clr-gray-450 { + color: var(--c--globals--colors--gray-450); +} + +.clr-gray-500 { + color: var(--c--globals--colors--gray-500); +} + +.clr-gray-550 { + color: var(--c--globals--colors--gray-550); +} + +.clr-gray-600 { + color: var(--c--globals--colors--gray-600); +} + +.clr-gray-650 { + color: var(--c--globals--colors--gray-650); +} + +.clr-gray-700 { + color: var(--c--globals--colors--gray-700); +} + +.clr-gray-750 { + color: var(--c--globals--colors--gray-750); +} + +.clr-gray-800 { + color: var(--c--globals--colors--gray-800); +} + +.clr-gray-850 { + color: var(--c--globals--colors--gray-850); +} + +.clr-gray-900 { + color: var(--c--globals--colors--gray-900); +} + +.clr-gray-950 { + color: var(--c--globals--colors--gray-950); +} + +.clr-gray-1000 { + color: var(--c--globals--colors--gray-1000); +} + +.clr-info-050 { + color: var(--c--globals--colors--info-050); +} + +.clr-info-100 { + color: var(--c--globals--colors--info-100); +} + +.clr-info-150 { + color: var(--c--globals--colors--info-150); +} + +.clr-info-200 { + color: var(--c--globals--colors--info-200); +} + +.clr-info-250 { + color: var(--c--globals--colors--info-250); +} + +.clr-info-300 { + color: var(--c--globals--colors--info-300); +} + +.clr-info-350 { + color: var(--c--globals--colors--info-350); +} + +.clr-info-400 { + color: var(--c--globals--colors--info-400); +} + +.clr-info-450 { + color: var(--c--globals--colors--info-450); +} + +.clr-info-500 { + color: var(--c--globals--colors--info-500); +} + +.clr-info-550 { + color: var(--c--globals--colors--info-550); +} + +.clr-info-600 { + color: var(--c--globals--colors--info-600); +} + +.clr-info-650 { + color: var(--c--globals--colors--info-650); +} + +.clr-info-700 { + color: var(--c--globals--colors--info-700); +} + +.clr-info-750 { + color: var(--c--globals--colors--info-750); +} + +.clr-info-800 { + color: var(--c--globals--colors--info-800); +} + +.clr-info-850 { + color: var(--c--globals--colors--info-850); +} + +.clr-info-900 { + color: var(--c--globals--colors--info-900); +} + +.clr-info-950 { + color: var(--c--globals--colors--info-950); +} + +.clr-success-050 { + color: var(--c--globals--colors--success-050); +} + +.clr-success-100 { + color: var(--c--globals--colors--success-100); +} + +.clr-success-150 { + color: var(--c--globals--colors--success-150); +} + +.clr-success-200 { + color: var(--c--globals--colors--success-200); +} + +.clr-success-250 { + color: var(--c--globals--colors--success-250); +} + +.clr-success-300 { + color: var(--c--globals--colors--success-300); +} + +.clr-success-350 { + color: var(--c--globals--colors--success-350); +} + +.clr-success-400 { + color: var(--c--globals--colors--success-400); +} + +.clr-success-450 { + color: var(--c--globals--colors--success-450); +} + +.clr-success-500 { + color: var(--c--globals--colors--success-500); +} + +.clr-success-550 { + color: var(--c--globals--colors--success-550); +} + +.clr-success-600 { + color: var(--c--globals--colors--success-600); +} + +.clr-success-650 { + color: var(--c--globals--colors--success-650); +} + +.clr-success-700 { + color: var(--c--globals--colors--success-700); +} + +.clr-success-750 { + color: var(--c--globals--colors--success-750); +} + +.clr-success-800 { + color: var(--c--globals--colors--success-800); +} + +.clr-success-850 { + color: var(--c--globals--colors--success-850); +} + +.clr-success-900 { + color: var(--c--globals--colors--success-900); +} + +.clr-success-950 { + color: var(--c--globals--colors--success-950); +} + +.clr-warning-050 { + color: var(--c--globals--colors--warning-050); +} + +.clr-warning-100 { + color: var(--c--globals--colors--warning-100); +} + +.clr-warning-150 { + color: var(--c--globals--colors--warning-150); +} + +.clr-warning-200 { + color: var(--c--globals--colors--warning-200); +} + +.clr-warning-250 { + color: var(--c--globals--colors--warning-250); +} + +.clr-warning-300 { + color: var(--c--globals--colors--warning-300); +} + +.clr-warning-350 { + color: var(--c--globals--colors--warning-350); +} + +.clr-warning-400 { + color: var(--c--globals--colors--warning-400); +} + +.clr-warning-450 { + color: var(--c--globals--colors--warning-450); +} + +.clr-warning-500 { + color: var(--c--globals--colors--warning-500); +} + +.clr-warning-550 { + color: var(--c--globals--colors--warning-550); +} + +.clr-warning-600 { + color: var(--c--globals--colors--warning-600); +} + +.clr-warning-650 { + color: var(--c--globals--colors--warning-650); +} + +.clr-warning-700 { + color: var(--c--globals--colors--warning-700); +} + +.clr-warning-750 { + color: var(--c--globals--colors--warning-750); +} + +.clr-warning-800 { + color: var(--c--globals--colors--warning-800); +} + +.clr-warning-850 { + color: var(--c--globals--colors--warning-850); +} + +.clr-warning-900 { + color: var(--c--globals--colors--warning-900); +} + +.clr-warning-950 { + color: var(--c--globals--colors--warning-950); +} + +.clr-error-050 { + color: var(--c--globals--colors--error-050); +} + +.clr-error-100 { + color: var(--c--globals--colors--error-100); +} + +.clr-error-150 { + color: var(--c--globals--colors--error-150); +} + +.clr-error-200 { + color: var(--c--globals--colors--error-200); +} + +.clr-error-250 { + color: var(--c--globals--colors--error-250); +} + +.clr-error-300 { + color: var(--c--globals--colors--error-300); +} + +.clr-error-350 { + color: var(--c--globals--colors--error-350); +} + +.clr-error-400 { + color: var(--c--globals--colors--error-400); +} + +.clr-error-450 { + color: var(--c--globals--colors--error-450); +} + +.clr-error-500 { + color: var(--c--globals--colors--error-500); +} + +.clr-error-550 { + color: var(--c--globals--colors--error-550); +} + +.clr-error-600 { + color: var(--c--globals--colors--error-600); +} + +.clr-error-650 { + color: var(--c--globals--colors--error-650); +} + +.clr-error-700 { + color: var(--c--globals--colors--error-700); +} + +.clr-error-750 { + color: var(--c--globals--colors--error-750); +} + +.clr-error-800 { + color: var(--c--globals--colors--error-800); +} + +.clr-error-850 { + color: var(--c--globals--colors--error-850); +} + +.clr-error-900 { + color: var(--c--globals--colors--error-900); +} + +.clr-error-950 { + color: var(--c--globals--colors--error-950); +} + +.clr-red-050 { + color: var(--c--globals--colors--red-050); +} + +.clr-red-100 { + color: var(--c--globals--colors--red-100); +} + +.clr-red-150 { + color: var(--c--globals--colors--red-150); +} + +.clr-red-200 { + color: var(--c--globals--colors--red-200); +} + +.clr-red-250 { + color: var(--c--globals--colors--red-250); +} + +.clr-red-300 { + color: var(--c--globals--colors--red-300); +} + +.clr-red-350 { + color: var(--c--globals--colors--red-350); +} + +.clr-red-400 { + color: var(--c--globals--colors--red-400); +} + +.clr-red-450 { + color: var(--c--globals--colors--red-450); +} + +.clr-red-500 { + color: var(--c--globals--colors--red-500); +} + +.clr-red-550 { + color: var(--c--globals--colors--red-550); +} + +.clr-red-600 { + color: var(--c--globals--colors--red-600); +} + +.clr-red-650 { + color: var(--c--globals--colors--red-650); +} + +.clr-red-700 { + color: var(--c--globals--colors--red-700); +} + +.clr-red-750 { + color: var(--c--globals--colors--red-750); +} + +.clr-red-800 { + color: var(--c--globals--colors--red-800); +} + +.clr-red-850 { + color: var(--c--globals--colors--red-850); +} + +.clr-red-900 { + color: var(--c--globals--colors--red-900); +} + +.clr-red-950 { + color: var(--c--globals--colors--red-950); +} + +.clr-orange-050 { + color: var(--c--globals--colors--orange-050); +} + +.clr-orange-100 { + color: var(--c--globals--colors--orange-100); +} + +.clr-orange-150 { + color: var(--c--globals--colors--orange-150); +} + +.clr-orange-200 { + color: var(--c--globals--colors--orange-200); +} + +.clr-orange-250 { + color: var(--c--globals--colors--orange-250); +} + +.clr-orange-300 { + color: var(--c--globals--colors--orange-300); +} + +.clr-orange-350 { + color: var(--c--globals--colors--orange-350); +} + +.clr-orange-400 { + color: var(--c--globals--colors--orange-400); +} + +.clr-orange-450 { + color: var(--c--globals--colors--orange-450); +} + +.clr-orange-500 { + color: var(--c--globals--colors--orange-500); +} + +.clr-orange-550 { + color: var(--c--globals--colors--orange-550); +} + +.clr-orange-600 { + color: var(--c--globals--colors--orange-600); +} + +.clr-orange-650 { + color: var(--c--globals--colors--orange-650); +} + +.clr-orange-700 { + color: var(--c--globals--colors--orange-700); +} + +.clr-orange-750 { + color: var(--c--globals--colors--orange-750); +} + +.clr-orange-800 { + color: var(--c--globals--colors--orange-800); +} + +.clr-orange-850 { + color: var(--c--globals--colors--orange-850); +} + +.clr-orange-900 { + color: var(--c--globals--colors--orange-900); +} + +.clr-orange-950 { + color: var(--c--globals--colors--orange-950); +} + +.clr-brown-050 { + color: var(--c--globals--colors--brown-050); +} + +.clr-brown-100 { + color: var(--c--globals--colors--brown-100); +} + +.clr-brown-150 { + color: var(--c--globals--colors--brown-150); +} + +.clr-brown-200 { + color: var(--c--globals--colors--brown-200); +} + +.clr-brown-250 { + color: var(--c--globals--colors--brown-250); +} + +.clr-brown-300 { + color: var(--c--globals--colors--brown-300); +} + +.clr-brown-350 { + color: var(--c--globals--colors--brown-350); +} + +.clr-brown-400 { + color: var(--c--globals--colors--brown-400); +} + +.clr-brown-450 { + color: var(--c--globals--colors--brown-450); +} + +.clr-brown-500 { + color: var(--c--globals--colors--brown-500); +} + +.clr-brown-550 { + color: var(--c--globals--colors--brown-550); +} + +.clr-brown-600 { + color: var(--c--globals--colors--brown-600); +} + +.clr-brown-650 { + color: var(--c--globals--colors--brown-650); +} + +.clr-brown-700 { + color: var(--c--globals--colors--brown-700); +} + +.clr-brown-750 { + color: var(--c--globals--colors--brown-750); +} + +.clr-brown-800 { + color: var(--c--globals--colors--brown-800); +} + +.clr-brown-850 { + color: var(--c--globals--colors--brown-850); +} + +.clr-brown-900 { + color: var(--c--globals--colors--brown-900); +} + +.clr-brown-950 { + color: var(--c--globals--colors--brown-950); +} + +.clr-yellow-050 { + color: var(--c--globals--colors--yellow-050); +} + +.clr-yellow-100 { + color: var(--c--globals--colors--yellow-100); +} + +.clr-yellow-150 { + color: var(--c--globals--colors--yellow-150); +} + +.clr-yellow-200 { + color: var(--c--globals--colors--yellow-200); +} + +.clr-yellow-250 { + color: var(--c--globals--colors--yellow-250); +} + +.clr-yellow-300 { + color: var(--c--globals--colors--yellow-300); +} + +.clr-yellow-350 { + color: var(--c--globals--colors--yellow-350); +} + +.clr-yellow-400 { + color: var(--c--globals--colors--yellow-400); +} + +.clr-yellow-450 { + color: var(--c--globals--colors--yellow-450); +} + +.clr-yellow-500 { + color: var(--c--globals--colors--yellow-500); +} + +.clr-yellow-550 { + color: var(--c--globals--colors--yellow-550); +} + +.clr-yellow-600 { + color: var(--c--globals--colors--yellow-600); +} + +.clr-yellow-650 { + color: var(--c--globals--colors--yellow-650); +} + +.clr-yellow-700 { + color: var(--c--globals--colors--yellow-700); +} + +.clr-yellow-750 { + color: var(--c--globals--colors--yellow-750); +} + +.clr-yellow-800 { + color: var(--c--globals--colors--yellow-800); +} + +.clr-yellow-850 { + color: var(--c--globals--colors--yellow-850); +} + +.clr-yellow-900 { + color: var(--c--globals--colors--yellow-900); +} + +.clr-yellow-950 { + color: var(--c--globals--colors--yellow-950); +} + +.clr-green-050 { + color: var(--c--globals--colors--green-050); +} + +.clr-green-100 { + color: var(--c--globals--colors--green-100); +} + +.clr-green-150 { + color: var(--c--globals--colors--green-150); +} + +.clr-green-200 { + color: var(--c--globals--colors--green-200); +} + +.clr-green-250 { + color: var(--c--globals--colors--green-250); +} + +.clr-green-300 { + color: var(--c--globals--colors--green-300); +} + +.clr-green-350 { + color: var(--c--globals--colors--green-350); +} + +.clr-green-400 { + color: var(--c--globals--colors--green-400); +} + +.clr-green-450 { + color: var(--c--globals--colors--green-450); +} + +.clr-green-500 { + color: var(--c--globals--colors--green-500); +} + +.clr-green-550 { + color: var(--c--globals--colors--green-550); +} + +.clr-green-600 { + color: var(--c--globals--colors--green-600); +} + +.clr-green-650 { + color: var(--c--globals--colors--green-650); +} + +.clr-green-700 { + color: var(--c--globals--colors--green-700); +} + +.clr-green-750 { + color: var(--c--globals--colors--green-750); +} + +.clr-green-800 { + color: var(--c--globals--colors--green-800); +} + +.clr-green-850 { + color: var(--c--globals--colors--green-850); +} + +.clr-green-900 { + color: var(--c--globals--colors--green-900); +} + +.clr-green-950 { + color: var(--c--globals--colors--green-950); +} + +.clr-blue-1-050 { + color: var(--c--globals--colors--blue-1-050); +} + +.clr-blue-1-100 { + color: var(--c--globals--colors--blue-1-100); +} + +.clr-blue-1-150 { + color: var(--c--globals--colors--blue-1-150); +} + +.clr-blue-1-200 { + color: var(--c--globals--colors--blue-1-200); +} + +.clr-blue-1-250 { + color: var(--c--globals--colors--blue-1-250); +} + +.clr-blue-1-300 { + color: var(--c--globals--colors--blue-1-300); +} + +.clr-blue-1-350 { + color: var(--c--globals--colors--blue-1-350); +} + +.clr-blue-1-400 { + color: var(--c--globals--colors--blue-1-400); +} + +.clr-blue-1-450 { + color: var(--c--globals--colors--blue-1-450); +} + +.clr-blue-1-500 { + color: var(--c--globals--colors--blue-1-500); +} + +.clr-blue-1-550 { + color: var(--c--globals--colors--blue-1-550); +} + +.clr-blue-1-600 { + color: var(--c--globals--colors--blue-1-600); +} + +.clr-blue-1-650 { + color: var(--c--globals--colors--blue-1-650); +} + +.clr-blue-1-700 { + color: var(--c--globals--colors--blue-1-700); +} + +.clr-blue-1-750 { + color: var(--c--globals--colors--blue-1-750); +} + +.clr-blue-1-800 { + color: var(--c--globals--colors--blue-1-800); +} + +.clr-blue-1-850 { + color: var(--c--globals--colors--blue-1-850); +} + +.clr-blue-1-900 { + color: var(--c--globals--colors--blue-1-900); +} + +.clr-blue-1-950 { + color: var(--c--globals--colors--blue-1-950); +} + +.clr-blue-2-050 { + color: var(--c--globals--colors--blue-2-050); +} + +.clr-blue-2-100 { + color: var(--c--globals--colors--blue-2-100); +} + +.clr-blue-2-150 { + color: var(--c--globals--colors--blue-2-150); +} + +.clr-blue-2-200 { + color: var(--c--globals--colors--blue-2-200); +} + +.clr-blue-2-250 { + color: var(--c--globals--colors--blue-2-250); +} + +.clr-blue-2-300 { + color: var(--c--globals--colors--blue-2-300); +} + +.clr-blue-2-350 { + color: var(--c--globals--colors--blue-2-350); +} + +.clr-blue-2-400 { + color: var(--c--globals--colors--blue-2-400); +} + +.clr-blue-2-450 { + color: var(--c--globals--colors--blue-2-450); +} + +.clr-blue-2-500 { + color: var(--c--globals--colors--blue-2-500); +} + +.clr-blue-2-550 { + color: var(--c--globals--colors--blue-2-550); +} + +.clr-blue-2-600 { + color: var(--c--globals--colors--blue-2-600); +} + +.clr-blue-2-650 { + color: var(--c--globals--colors--blue-2-650); +} + +.clr-blue-2-700 { + color: var(--c--globals--colors--blue-2-700); +} + +.clr-blue-2-750 { + color: var(--c--globals--colors--blue-2-750); +} + +.clr-blue-2-800 { + color: var(--c--globals--colors--blue-2-800); +} + +.clr-blue-2-850 { + color: var(--c--globals--colors--blue-2-850); +} + +.clr-blue-2-900 { + color: var(--c--globals--colors--blue-2-900); +} + +.clr-blue-2-950 { + color: var(--c--globals--colors--blue-2-950); +} + +.clr-purple-050 { + color: var(--c--globals--colors--purple-050); +} + +.clr-purple-100 { + color: var(--c--globals--colors--purple-100); +} + +.clr-purple-150 { + color: var(--c--globals--colors--purple-150); +} + +.clr-purple-200 { + color: var(--c--globals--colors--purple-200); +} + +.clr-purple-250 { + color: var(--c--globals--colors--purple-250); +} + +.clr-purple-300 { + color: var(--c--globals--colors--purple-300); +} + +.clr-purple-350 { + color: var(--c--globals--colors--purple-350); +} + +.clr-purple-400 { + color: var(--c--globals--colors--purple-400); +} + +.clr-purple-450 { + color: var(--c--globals--colors--purple-450); +} + +.clr-purple-500 { + color: var(--c--globals--colors--purple-500); +} + +.clr-purple-550 { + color: var(--c--globals--colors--purple-550); +} + +.clr-purple-600 { + color: var(--c--globals--colors--purple-600); +} + +.clr-purple-650 { + color: var(--c--globals--colors--purple-650); +} + +.clr-purple-700 { + color: var(--c--globals--colors--purple-700); +} + +.clr-purple-750 { + color: var(--c--globals--colors--purple-750); +} + +.clr-purple-800 { + color: var(--c--globals--colors--purple-800); +} + +.clr-purple-850 { + color: var(--c--globals--colors--purple-850); +} + +.clr-purple-900 { + color: var(--c--globals--colors--purple-900); +} + +.clr-purple-950 { + color: var(--c--globals--colors--purple-950); +} + +.clr-pink-050 { + color: var(--c--globals--colors--pink-050); +} + +.clr-pink-100 { + color: var(--c--globals--colors--pink-100); +} + +.clr-pink-150 { + color: var(--c--globals--colors--pink-150); +} + +.clr-pink-200 { + color: var(--c--globals--colors--pink-200); +} + +.clr-pink-250 { + color: var(--c--globals--colors--pink-250); +} + +.clr-pink-300 { + color: var(--c--globals--colors--pink-300); +} + +.clr-pink-350 { + color: var(--c--globals--colors--pink-350); +} + +.clr-pink-400 { + color: var(--c--globals--colors--pink-400); +} + +.clr-pink-450 { + color: var(--c--globals--colors--pink-450); +} + +.clr-pink-500 { + color: var(--c--globals--colors--pink-500); +} + +.clr-pink-550 { + color: var(--c--globals--colors--pink-550); +} + +.clr-pink-600 { + color: var(--c--globals--colors--pink-600); +} + +.clr-pink-650 { + color: var(--c--globals--colors--pink-650); +} + +.clr-pink-700 { + color: var(--c--globals--colors--pink-700); +} + +.clr-pink-750 { + color: var(--c--globals--colors--pink-750); +} + +.clr-pink-800 { + color: var(--c--globals--colors--pink-800); +} + +.clr-pink-850 { + color: var(--c--globals--colors--pink-850); +} + +.clr-pink-900 { + color: var(--c--globals--colors--pink-900); +} + +.clr-pink-950 { + color: var(--c--globals--colors--pink-950); +} + +.clr-black-000 { + color: var(--c--globals--colors--black-000); +} + +.clr-black-050 { + color: var(--c--globals--colors--black-050); +} + +.clr-black-100 { + color: var(--c--globals--colors--black-100); +} + +.clr-black-150 { + color: var(--c--globals--colors--black-150); +} + +.clr-black-200 { + color: var(--c--globals--colors--black-200); +} + +.clr-black-250 { + color: var(--c--globals--colors--black-250); +} + +.clr-black-300 { + color: var(--c--globals--colors--black-300); +} + +.clr-black-350 { + color: var(--c--globals--colors--black-350); +} + +.clr-black-400 { + color: var(--c--globals--colors--black-400); +} + +.clr-black-450 { + color: var(--c--globals--colors--black-450); +} + +.clr-black-500 { + color: var(--c--globals--colors--black-500); +} + +.clr-black-550 { + color: var(--c--globals--colors--black-550); +} + +.clr-black-600 { + color: var(--c--globals--colors--black-600); +} + +.clr-black-650 { + color: var(--c--globals--colors--black-650); +} + +.clr-black-700 { + color: var(--c--globals--colors--black-700); +} + +.clr-black-750 { + color: var(--c--globals--colors--black-750); +} + +.clr-black-800 { + color: var(--c--globals--colors--black-800); +} + +.clr-black-850 { + color: var(--c--globals--colors--black-850); +} + +.clr-black-900 { + color: var(--c--globals--colors--black-900); +} + +.clr-black-950 { + color: var(--c--globals--colors--black-950); +} + +.clr-white-000 { + color: var(--c--globals--colors--white-000); +} + +.clr-white-050 { + color: var(--c--globals--colors--white-050); +} + +.clr-white-100 { + color: var(--c--globals--colors--white-100); +} + +.clr-white-150 { + color: var(--c--globals--colors--white-150); +} + +.clr-white-200 { + color: var(--c--globals--colors--white-200); +} + +.clr-white-250 { + color: var(--c--globals--colors--white-250); +} + +.clr-white-300 { + color: var(--c--globals--colors--white-300); +} + +.clr-white-350 { + color: var(--c--globals--colors--white-350); +} + +.clr-white-400 { + color: var(--c--globals--colors--white-400); +} + +.clr-white-450 { + color: var(--c--globals--colors--white-450); +} + +.clr-white-500 { + color: var(--c--globals--colors--white-500); +} + +.clr-white-550 { + color: var(--c--globals--colors--white-550); +} + +.clr-white-600 { + color: var(--c--globals--colors--white-600); +} + +.clr-white-650 { + color: var(--c--globals--colors--white-650); +} + +.clr-white-700 { + color: var(--c--globals--colors--white-700); +} + +.clr-white-750 { + color: var(--c--globals--colors--white-750); +} + +.clr-white-800 { + color: var(--c--globals--colors--white-800); +} + +.clr-white-850 { + color: var(--c--globals--colors--white-850); +} + +.clr-white-900 { + color: var(--c--globals--colors--white-900); +} + +.clr-white-950 { + color: var(--c--globals--colors--white-950); +} + +.clr-blue1-050 { + color: var(--c--globals--colors--blue1-050); +} + +.clr-blue1-100 { + color: var(--c--globals--colors--blue1-100); +} + +.clr-blue1-150 { + color: var(--c--globals--colors--blue1-150); +} + +.clr-blue1-200 { + color: var(--c--globals--colors--blue1-200); +} + +.clr-blue1-250 { + color: var(--c--globals--colors--blue1-250); +} + +.clr-blue1-300 { + color: var(--c--globals--colors--blue1-300); +} + +.clr-blue1-350 { + color: var(--c--globals--colors--blue1-350); +} + +.clr-blue1-400 { + color: var(--c--globals--colors--blue1-400); +} + +.clr-blue1-450 { + color: var(--c--globals--colors--blue1-450); +} + +.clr-blue1-500 { + color: var(--c--globals--colors--blue1-500); +} + +.clr-blue1-550 { + color: var(--c--globals--colors--blue1-550); +} + +.clr-blue1-600 { + color: var(--c--globals--colors--blue1-600); +} + +.clr-blue1-650 { + color: var(--c--globals--colors--blue1-650); +} + +.clr-blue1-700 { + color: var(--c--globals--colors--blue1-700); +} + +.clr-blue1-750 { + color: var(--c--globals--colors--blue1-750); +} + +.clr-blue1-800 { + color: var(--c--globals--colors--blue1-800); +} + +.clr-blue1-850 { + color: var(--c--globals--colors--blue1-850); +} + +.clr-blue1-900 { + color: var(--c--globals--colors--blue1-900); +} + +.clr-blue1-950 { + color: var(--c--globals--colors--blue1-950); +} + +.clr-blue2-050 { + color: var(--c--globals--colors--blue2-050); +} + +.clr-blue2-100 { + color: var(--c--globals--colors--blue2-100); +} + +.clr-blue2-150 { + color: var(--c--globals--colors--blue2-150); +} + +.clr-blue2-200 { + color: var(--c--globals--colors--blue2-200); +} + +.clr-blue2-250 { + color: var(--c--globals--colors--blue2-250); +} + +.clr-blue2-300 { + color: var(--c--globals--colors--blue2-300); +} + +.clr-blue2-350 { + color: var(--c--globals--colors--blue2-350); +} + +.clr-blue2-400 { + color: var(--c--globals--colors--blue2-400); +} + +.clr-blue2-450 { + color: var(--c--globals--colors--blue2-450); +} + +.clr-blue2-500 { + color: var(--c--globals--colors--blue2-500); +} + +.clr-blue2-550 { + color: var(--c--globals--colors--blue2-550); +} + +.clr-blue2-600 { + color: var(--c--globals--colors--blue2-600); +} + +.clr-blue2-650 { + color: var(--c--globals--colors--blue2-650); +} + +.clr-blue2-700 { + color: var(--c--globals--colors--blue2-700); +} + +.clr-blue2-750 { + color: var(--c--globals--colors--blue2-750); +} + +.clr-blue2-800 { + color: var(--c--globals--colors--blue2-800); +} + +.clr-blue2-850 { + color: var(--c--globals--colors--blue2-850); +} + +.clr-blue2-900 { + color: var(--c--globals--colors--blue2-900); +} + +.clr-blue2-950 { + color: var(--c--globals--colors--blue2-950); +} + +.bg-logo-1 { + background-color: var(--c--globals--colors--logo-1); +} + +.bg-logo-2 { + background-color: var(--c--globals--colors--logo-2); +} + +.bg-logo-1-dark { + background-color: var(--c--globals--colors--logo-1-dark); +} + +.bg-logo-2-dark { + background-color: var(--c--globals--colors--logo-2-dark); +} + +.bg-brand-050 { + background-color: var(--c--globals--colors--brand-050); +} + +.bg-brand-100 { + background-color: var(--c--globals--colors--brand-100); +} + +.bg-brand-150 { + background-color: var(--c--globals--colors--brand-150); +} + +.bg-brand-200 { + background-color: var(--c--globals--colors--brand-200); +} + +.bg-brand-250 { + background-color: var(--c--globals--colors--brand-250); +} + +.bg-brand-300 { + background-color: var(--c--globals--colors--brand-300); +} + +.bg-brand-350 { + background-color: var(--c--globals--colors--brand-350); +} + +.bg-brand-400 { + background-color: var(--c--globals--colors--brand-400); +} + +.bg-brand-450 { + background-color: var(--c--globals--colors--brand-450); +} + +.bg-brand-500 { + background-color: var(--c--globals--colors--brand-500); +} + +.bg-brand-550 { + background-color: var(--c--globals--colors--brand-550); +} + +.bg-brand-600 { + background-color: var(--c--globals--colors--brand-600); +} + +.bg-brand-650 { + background-color: var(--c--globals--colors--brand-650); +} + +.bg-brand-700 { + background-color: var(--c--globals--colors--brand-700); +} + +.bg-brand-750 { + background-color: var(--c--globals--colors--brand-750); +} + +.bg-brand-800 { + background-color: var(--c--globals--colors--brand-800); +} + +.bg-brand-850 { + background-color: var(--c--globals--colors--brand-850); +} + +.bg-brand-900 { + background-color: var(--c--globals--colors--brand-900); +} + +.bg-brand-950 { + background-color: var(--c--globals--colors--brand-950); +} + +.bg-gray-000 { + background-color: var(--c--globals--colors--gray-000); +} + +.bg-gray-025 { + background-color: var(--c--globals--colors--gray-025); +} + +.bg-gray-050 { + background-color: var(--c--globals--colors--gray-050); +} + +.bg-gray-100 { + background-color: var(--c--globals--colors--gray-100); +} + +.bg-gray-150 { + background-color: var(--c--globals--colors--gray-150); +} + +.bg-gray-200 { + background-color: var(--c--globals--colors--gray-200); +} + +.bg-gray-250 { + background-color: var(--c--globals--colors--gray-250); +} + +.bg-gray-300 { + background-color: var(--c--globals--colors--gray-300); +} + +.bg-gray-350 { + background-color: var(--c--globals--colors--gray-350); +} + +.bg-gray-400 { + background-color: var(--c--globals--colors--gray-400); +} + +.bg-gray-450 { + background-color: var(--c--globals--colors--gray-450); +} + +.bg-gray-500 { + background-color: var(--c--globals--colors--gray-500); +} + +.bg-gray-550 { + background-color: var(--c--globals--colors--gray-550); +} + +.bg-gray-600 { + background-color: var(--c--globals--colors--gray-600); +} + +.bg-gray-650 { + background-color: var(--c--globals--colors--gray-650); +} + +.bg-gray-700 { + background-color: var(--c--globals--colors--gray-700); +} + +.bg-gray-750 { + background-color: var(--c--globals--colors--gray-750); +} + +.bg-gray-800 { + background-color: var(--c--globals--colors--gray-800); +} + +.bg-gray-850 { + background-color: var(--c--globals--colors--gray-850); +} + +.bg-gray-900 { + background-color: var(--c--globals--colors--gray-900); +} + +.bg-gray-950 { + background-color: var(--c--globals--colors--gray-950); +} + +.bg-gray-1000 { + background-color: var(--c--globals--colors--gray-1000); +} + +.bg-info-050 { + background-color: var(--c--globals--colors--info-050); +} + +.bg-info-100 { + background-color: var(--c--globals--colors--info-100); +} + +.bg-info-150 { + background-color: var(--c--globals--colors--info-150); +} + +.bg-info-200 { + background-color: var(--c--globals--colors--info-200); +} + +.bg-info-250 { + background-color: var(--c--globals--colors--info-250); +} + +.bg-info-300 { + background-color: var(--c--globals--colors--info-300); +} + +.bg-info-350 { + background-color: var(--c--globals--colors--info-350); +} + +.bg-info-400 { + background-color: var(--c--globals--colors--info-400); +} + +.bg-info-450 { + background-color: var(--c--globals--colors--info-450); +} + +.bg-info-500 { + background-color: var(--c--globals--colors--info-500); +} + +.bg-info-550 { + background-color: var(--c--globals--colors--info-550); +} + +.bg-info-600 { + background-color: var(--c--globals--colors--info-600); +} + +.bg-info-650 { + background-color: var(--c--globals--colors--info-650); +} + +.bg-info-700 { + background-color: var(--c--globals--colors--info-700); +} + +.bg-info-750 { + background-color: var(--c--globals--colors--info-750); +} + +.bg-info-800 { + background-color: var(--c--globals--colors--info-800); +} + +.bg-info-850 { + background-color: var(--c--globals--colors--info-850); +} + +.bg-info-900 { + background-color: var(--c--globals--colors--info-900); +} + +.bg-info-950 { + background-color: var(--c--globals--colors--info-950); +} + +.bg-success-050 { + background-color: var(--c--globals--colors--success-050); +} + +.bg-success-100 { + background-color: var(--c--globals--colors--success-100); +} + +.bg-success-150 { + background-color: var(--c--globals--colors--success-150); +} + +.bg-success-200 { + background-color: var(--c--globals--colors--success-200); +} + +.bg-success-250 { + background-color: var(--c--globals--colors--success-250); +} + +.bg-success-300 { + background-color: var(--c--globals--colors--success-300); +} + +.bg-success-350 { + background-color: var(--c--globals--colors--success-350); +} + +.bg-success-400 { + background-color: var(--c--globals--colors--success-400); +} + +.bg-success-450 { + background-color: var(--c--globals--colors--success-450); +} + +.bg-success-500 { + background-color: var(--c--globals--colors--success-500); +} + +.bg-success-550 { + background-color: var(--c--globals--colors--success-550); +} + +.bg-success-600 { + background-color: var(--c--globals--colors--success-600); +} + +.bg-success-650 { + background-color: var(--c--globals--colors--success-650); +} + +.bg-success-700 { + background-color: var(--c--globals--colors--success-700); +} + +.bg-success-750 { + background-color: var(--c--globals--colors--success-750); +} + +.bg-success-800 { + background-color: var(--c--globals--colors--success-800); +} + +.bg-success-850 { + background-color: var(--c--globals--colors--success-850); +} + +.bg-success-900 { + background-color: var(--c--globals--colors--success-900); +} + +.bg-success-950 { + background-color: var(--c--globals--colors--success-950); +} + +.bg-warning-050 { + background-color: var(--c--globals--colors--warning-050); +} + +.bg-warning-100 { + background-color: var(--c--globals--colors--warning-100); +} + +.bg-warning-150 { + background-color: var(--c--globals--colors--warning-150); +} + +.bg-warning-200 { + background-color: var(--c--globals--colors--warning-200); +} + +.bg-warning-250 { + background-color: var(--c--globals--colors--warning-250); +} + +.bg-warning-300 { + background-color: var(--c--globals--colors--warning-300); +} + +.bg-warning-350 { + background-color: var(--c--globals--colors--warning-350); +} + +.bg-warning-400 { + background-color: var(--c--globals--colors--warning-400); +} + +.bg-warning-450 { + background-color: var(--c--globals--colors--warning-450); +} + +.bg-warning-500 { + background-color: var(--c--globals--colors--warning-500); +} + +.bg-warning-550 { + background-color: var(--c--globals--colors--warning-550); +} + +.bg-warning-600 { + background-color: var(--c--globals--colors--warning-600); +} + +.bg-warning-650 { + background-color: var(--c--globals--colors--warning-650); +} + +.bg-warning-700 { + background-color: var(--c--globals--colors--warning-700); +} + +.bg-warning-750 { + background-color: var(--c--globals--colors--warning-750); +} + +.bg-warning-800 { + background-color: var(--c--globals--colors--warning-800); +} + +.bg-warning-850 { + background-color: var(--c--globals--colors--warning-850); +} + +.bg-warning-900 { + background-color: var(--c--globals--colors--warning-900); +} + +.bg-warning-950 { + background-color: var(--c--globals--colors--warning-950); +} + +.bg-error-050 { + background-color: var(--c--globals--colors--error-050); +} + +.bg-error-100 { + background-color: var(--c--globals--colors--error-100); +} + +.bg-error-150 { + background-color: var(--c--globals--colors--error-150); +} + +.bg-error-200 { + background-color: var(--c--globals--colors--error-200); +} + +.bg-error-250 { + background-color: var(--c--globals--colors--error-250); +} + +.bg-error-300 { + background-color: var(--c--globals--colors--error-300); +} + +.bg-error-350 { + background-color: var(--c--globals--colors--error-350); +} + +.bg-error-400 { + background-color: var(--c--globals--colors--error-400); +} + +.bg-error-450 { + background-color: var(--c--globals--colors--error-450); +} + +.bg-error-500 { + background-color: var(--c--globals--colors--error-500); +} + +.bg-error-550 { + background-color: var(--c--globals--colors--error-550); +} + +.bg-error-600 { + background-color: var(--c--globals--colors--error-600); +} + +.bg-error-650 { + background-color: var(--c--globals--colors--error-650); +} + +.bg-error-700 { + background-color: var(--c--globals--colors--error-700); +} + +.bg-error-750 { + background-color: var(--c--globals--colors--error-750); +} + +.bg-error-800 { + background-color: var(--c--globals--colors--error-800); +} + +.bg-error-850 { + background-color: var(--c--globals--colors--error-850); +} + +.bg-error-900 { + background-color: var(--c--globals--colors--error-900); +} + +.bg-error-950 { + background-color: var(--c--globals--colors--error-950); +} + +.bg-red-050 { + background-color: var(--c--globals--colors--red-050); +} + +.bg-red-100 { + background-color: var(--c--globals--colors--red-100); +} + +.bg-red-150 { + background-color: var(--c--globals--colors--red-150); +} + +.bg-red-200 { + background-color: var(--c--globals--colors--red-200); +} + +.bg-red-250 { + background-color: var(--c--globals--colors--red-250); +} + +.bg-red-300 { + background-color: var(--c--globals--colors--red-300); +} + +.bg-red-350 { + background-color: var(--c--globals--colors--red-350); +} + +.bg-red-400 { + background-color: var(--c--globals--colors--red-400); +} + +.bg-red-450 { + background-color: var(--c--globals--colors--red-450); +} + +.bg-red-500 { + background-color: var(--c--globals--colors--red-500); +} + +.bg-red-550 { + background-color: var(--c--globals--colors--red-550); +} + +.bg-red-600 { + background-color: var(--c--globals--colors--red-600); +} + +.bg-red-650 { + background-color: var(--c--globals--colors--red-650); +} + +.bg-red-700 { + background-color: var(--c--globals--colors--red-700); +} + +.bg-red-750 { + background-color: var(--c--globals--colors--red-750); +} + +.bg-red-800 { + background-color: var(--c--globals--colors--red-800); +} + +.bg-red-850 { + background-color: var(--c--globals--colors--red-850); +} + +.bg-red-900 { + background-color: var(--c--globals--colors--red-900); +} + +.bg-red-950 { + background-color: var(--c--globals--colors--red-950); +} + +.bg-orange-050 { + background-color: var(--c--globals--colors--orange-050); +} + +.bg-orange-100 { + background-color: var(--c--globals--colors--orange-100); +} + +.bg-orange-150 { + background-color: var(--c--globals--colors--orange-150); +} + +.bg-orange-200 { + background-color: var(--c--globals--colors--orange-200); +} + +.bg-orange-250 { + background-color: var(--c--globals--colors--orange-250); +} + +.bg-orange-300 { + background-color: var(--c--globals--colors--orange-300); +} + +.bg-orange-350 { + background-color: var(--c--globals--colors--orange-350); +} + +.bg-orange-400 { + background-color: var(--c--globals--colors--orange-400); +} + +.bg-orange-450 { + background-color: var(--c--globals--colors--orange-450); +} + +.bg-orange-500 { + background-color: var(--c--globals--colors--orange-500); +} + +.bg-orange-550 { + background-color: var(--c--globals--colors--orange-550); +} + +.bg-orange-600 { + background-color: var(--c--globals--colors--orange-600); +} + +.bg-orange-650 { + background-color: var(--c--globals--colors--orange-650); +} + +.bg-orange-700 { + background-color: var(--c--globals--colors--orange-700); +} + +.bg-orange-750 { + background-color: var(--c--globals--colors--orange-750); +} + +.bg-orange-800 { + background-color: var(--c--globals--colors--orange-800); +} + +.bg-orange-850 { + background-color: var(--c--globals--colors--orange-850); +} + +.bg-orange-900 { + background-color: var(--c--globals--colors--orange-900); +} + +.bg-orange-950 { + background-color: var(--c--globals--colors--orange-950); +} + +.bg-brown-050 { + background-color: var(--c--globals--colors--brown-050); +} + +.bg-brown-100 { + background-color: var(--c--globals--colors--brown-100); +} + +.bg-brown-150 { + background-color: var(--c--globals--colors--brown-150); +} + +.bg-brown-200 { + background-color: var(--c--globals--colors--brown-200); +} + +.bg-brown-250 { + background-color: var(--c--globals--colors--brown-250); +} + +.bg-brown-300 { + background-color: var(--c--globals--colors--brown-300); +} + +.bg-brown-350 { + background-color: var(--c--globals--colors--brown-350); +} + +.bg-brown-400 { + background-color: var(--c--globals--colors--brown-400); +} + +.bg-brown-450 { + background-color: var(--c--globals--colors--brown-450); +} + +.bg-brown-500 { + background-color: var(--c--globals--colors--brown-500); +} + +.bg-brown-550 { + background-color: var(--c--globals--colors--brown-550); +} + +.bg-brown-600 { + background-color: var(--c--globals--colors--brown-600); +} + +.bg-brown-650 { + background-color: var(--c--globals--colors--brown-650); +} + +.bg-brown-700 { + background-color: var(--c--globals--colors--brown-700); +} + +.bg-brown-750 { + background-color: var(--c--globals--colors--brown-750); +} + +.bg-brown-800 { + background-color: var(--c--globals--colors--brown-800); +} + +.bg-brown-850 { + background-color: var(--c--globals--colors--brown-850); +} + +.bg-brown-900 { + background-color: var(--c--globals--colors--brown-900); +} + +.bg-brown-950 { + background-color: var(--c--globals--colors--brown-950); +} + +.bg-yellow-050 { + background-color: var(--c--globals--colors--yellow-050); +} + +.bg-yellow-100 { + background-color: var(--c--globals--colors--yellow-100); +} + +.bg-yellow-150 { + background-color: var(--c--globals--colors--yellow-150); +} + +.bg-yellow-200 { + background-color: var(--c--globals--colors--yellow-200); +} + +.bg-yellow-250 { + background-color: var(--c--globals--colors--yellow-250); +} + +.bg-yellow-300 { + background-color: var(--c--globals--colors--yellow-300); +} + +.bg-yellow-350 { + background-color: var(--c--globals--colors--yellow-350); +} + +.bg-yellow-400 { + background-color: var(--c--globals--colors--yellow-400); +} + +.bg-yellow-450 { + background-color: var(--c--globals--colors--yellow-450); +} + +.bg-yellow-500 { + background-color: var(--c--globals--colors--yellow-500); +} + +.bg-yellow-550 { + background-color: var(--c--globals--colors--yellow-550); +} + +.bg-yellow-600 { + background-color: var(--c--globals--colors--yellow-600); +} + +.bg-yellow-650 { + background-color: var(--c--globals--colors--yellow-650); +} + +.bg-yellow-700 { + background-color: var(--c--globals--colors--yellow-700); +} + +.bg-yellow-750 { + background-color: var(--c--globals--colors--yellow-750); +} + +.bg-yellow-800 { + background-color: var(--c--globals--colors--yellow-800); +} + +.bg-yellow-850 { + background-color: var(--c--globals--colors--yellow-850); +} + +.bg-yellow-900 { + background-color: var(--c--globals--colors--yellow-900); +} + +.bg-yellow-950 { + background-color: var(--c--globals--colors--yellow-950); +} + +.bg-green-050 { + background-color: var(--c--globals--colors--green-050); +} + +.bg-green-100 { + background-color: var(--c--globals--colors--green-100); +} + +.bg-green-150 { + background-color: var(--c--globals--colors--green-150); +} + +.bg-green-200 { + background-color: var(--c--globals--colors--green-200); +} + +.bg-green-250 { + background-color: var(--c--globals--colors--green-250); +} + +.bg-green-300 { + background-color: var(--c--globals--colors--green-300); +} + +.bg-green-350 { + background-color: var(--c--globals--colors--green-350); +} + +.bg-green-400 { + background-color: var(--c--globals--colors--green-400); +} + +.bg-green-450 { + background-color: var(--c--globals--colors--green-450); +} + +.bg-green-500 { + background-color: var(--c--globals--colors--green-500); +} + +.bg-green-550 { + background-color: var(--c--globals--colors--green-550); +} + +.bg-green-600 { + background-color: var(--c--globals--colors--green-600); +} + +.bg-green-650 { + background-color: var(--c--globals--colors--green-650); +} + +.bg-green-700 { + background-color: var(--c--globals--colors--green-700); +} + +.bg-green-750 { + background-color: var(--c--globals--colors--green-750); +} + +.bg-green-800 { + background-color: var(--c--globals--colors--green-800); +} + +.bg-green-850 { + background-color: var(--c--globals--colors--green-850); +} + +.bg-green-900 { + background-color: var(--c--globals--colors--green-900); +} + +.bg-green-950 { + background-color: var(--c--globals--colors--green-950); +} + +.bg-blue-1-050 { + background-color: var(--c--globals--colors--blue-1-050); +} + +.bg-blue-1-100 { + background-color: var(--c--globals--colors--blue-1-100); +} + +.bg-blue-1-150 { + background-color: var(--c--globals--colors--blue-1-150); +} + +.bg-blue-1-200 { + background-color: var(--c--globals--colors--blue-1-200); +} + +.bg-blue-1-250 { + background-color: var(--c--globals--colors--blue-1-250); +} + +.bg-blue-1-300 { + background-color: var(--c--globals--colors--blue-1-300); +} + +.bg-blue-1-350 { + background-color: var(--c--globals--colors--blue-1-350); +} + +.bg-blue-1-400 { + background-color: var(--c--globals--colors--blue-1-400); +} + +.bg-blue-1-450 { + background-color: var(--c--globals--colors--blue-1-450); +} + +.bg-blue-1-500 { + background-color: var(--c--globals--colors--blue-1-500); +} + +.bg-blue-1-550 { + background-color: var(--c--globals--colors--blue-1-550); +} + +.bg-blue-1-600 { + background-color: var(--c--globals--colors--blue-1-600); +} + +.bg-blue-1-650 { + background-color: var(--c--globals--colors--blue-1-650); +} + +.bg-blue-1-700 { + background-color: var(--c--globals--colors--blue-1-700); +} + +.bg-blue-1-750 { + background-color: var(--c--globals--colors--blue-1-750); +} + +.bg-blue-1-800 { + background-color: var(--c--globals--colors--blue-1-800); +} + +.bg-blue-1-850 { + background-color: var(--c--globals--colors--blue-1-850); +} + +.bg-blue-1-900 { + background-color: var(--c--globals--colors--blue-1-900); +} + +.bg-blue-1-950 { + background-color: var(--c--globals--colors--blue-1-950); +} + +.bg-blue-2-050 { + background-color: var(--c--globals--colors--blue-2-050); +} + +.bg-blue-2-100 { + background-color: var(--c--globals--colors--blue-2-100); +} + +.bg-blue-2-150 { + background-color: var(--c--globals--colors--blue-2-150); +} + +.bg-blue-2-200 { + background-color: var(--c--globals--colors--blue-2-200); +} + +.bg-blue-2-250 { + background-color: var(--c--globals--colors--blue-2-250); +} + +.bg-blue-2-300 { + background-color: var(--c--globals--colors--blue-2-300); +} + +.bg-blue-2-350 { + background-color: var(--c--globals--colors--blue-2-350); +} + +.bg-blue-2-400 { + background-color: var(--c--globals--colors--blue-2-400); +} + +.bg-blue-2-450 { + background-color: var(--c--globals--colors--blue-2-450); +} + +.bg-blue-2-500 { + background-color: var(--c--globals--colors--blue-2-500); +} + +.bg-blue-2-550 { + background-color: var(--c--globals--colors--blue-2-550); +} + +.bg-blue-2-600 { + background-color: var(--c--globals--colors--blue-2-600); +} + +.bg-blue-2-650 { + background-color: var(--c--globals--colors--blue-2-650); +} + +.bg-blue-2-700 { + background-color: var(--c--globals--colors--blue-2-700); +} + +.bg-blue-2-750 { + background-color: var(--c--globals--colors--blue-2-750); +} + +.bg-blue-2-800 { + background-color: var(--c--globals--colors--blue-2-800); +} + +.bg-blue-2-850 { + background-color: var(--c--globals--colors--blue-2-850); +} + +.bg-blue-2-900 { + background-color: var(--c--globals--colors--blue-2-900); +} + +.bg-blue-2-950 { + background-color: var(--c--globals--colors--blue-2-950); +} + +.bg-purple-050 { + background-color: var(--c--globals--colors--purple-050); +} + +.bg-purple-100 { + background-color: var(--c--globals--colors--purple-100); +} + +.bg-purple-150 { + background-color: var(--c--globals--colors--purple-150); +} + +.bg-purple-200 { + background-color: var(--c--globals--colors--purple-200); +} + +.bg-purple-250 { + background-color: var(--c--globals--colors--purple-250); +} + +.bg-purple-300 { + background-color: var(--c--globals--colors--purple-300); +} + +.bg-purple-350 { + background-color: var(--c--globals--colors--purple-350); +} + +.bg-purple-400 { + background-color: var(--c--globals--colors--purple-400); +} + +.bg-purple-450 { + background-color: var(--c--globals--colors--purple-450); +} + +.bg-purple-500 { + background-color: var(--c--globals--colors--purple-500); +} + +.bg-purple-550 { + background-color: var(--c--globals--colors--purple-550); +} + +.bg-purple-600 { + background-color: var(--c--globals--colors--purple-600); +} + +.bg-purple-650 { + background-color: var(--c--globals--colors--purple-650); +} + +.bg-purple-700 { + background-color: var(--c--globals--colors--purple-700); +} + +.bg-purple-750 { + background-color: var(--c--globals--colors--purple-750); +} + +.bg-purple-800 { + background-color: var(--c--globals--colors--purple-800); +} + +.bg-purple-850 { + background-color: var(--c--globals--colors--purple-850); +} + +.bg-purple-900 { + background-color: var(--c--globals--colors--purple-900); +} + +.bg-purple-950 { + background-color: var(--c--globals--colors--purple-950); +} + +.bg-pink-050 { + background-color: var(--c--globals--colors--pink-050); +} + +.bg-pink-100 { + background-color: var(--c--globals--colors--pink-100); +} + +.bg-pink-150 { + background-color: var(--c--globals--colors--pink-150); +} + +.bg-pink-200 { + background-color: var(--c--globals--colors--pink-200); +} + +.bg-pink-250 { + background-color: var(--c--globals--colors--pink-250); +} + +.bg-pink-300 { + background-color: var(--c--globals--colors--pink-300); +} + +.bg-pink-350 { + background-color: var(--c--globals--colors--pink-350); +} + +.bg-pink-400 { + background-color: var(--c--globals--colors--pink-400); +} + +.bg-pink-450 { + background-color: var(--c--globals--colors--pink-450); +} + +.bg-pink-500 { + background-color: var(--c--globals--colors--pink-500); +} + +.bg-pink-550 { + background-color: var(--c--globals--colors--pink-550); +} + +.bg-pink-600 { + background-color: var(--c--globals--colors--pink-600); +} + +.bg-pink-650 { + background-color: var(--c--globals--colors--pink-650); +} + +.bg-pink-700 { + background-color: var(--c--globals--colors--pink-700); +} + +.bg-pink-750 { + background-color: var(--c--globals--colors--pink-750); +} + +.bg-pink-800 { + background-color: var(--c--globals--colors--pink-800); +} + +.bg-pink-850 { + background-color: var(--c--globals--colors--pink-850); +} + +.bg-pink-900 { + background-color: var(--c--globals--colors--pink-900); +} + +.bg-pink-950 { + background-color: var(--c--globals--colors--pink-950); +} + +.bg-black-000 { + background-color: var(--c--globals--colors--black-000); +} + +.bg-black-050 { + background-color: var(--c--globals--colors--black-050); +} + +.bg-black-100 { + background-color: var(--c--globals--colors--black-100); +} + +.bg-black-150 { + background-color: var(--c--globals--colors--black-150); +} + +.bg-black-200 { + background-color: var(--c--globals--colors--black-200); +} + +.bg-black-250 { + background-color: var(--c--globals--colors--black-250); +} + +.bg-black-300 { + background-color: var(--c--globals--colors--black-300); +} + +.bg-black-350 { + background-color: var(--c--globals--colors--black-350); +} + +.bg-black-400 { + background-color: var(--c--globals--colors--black-400); +} + +.bg-black-450 { + background-color: var(--c--globals--colors--black-450); +} + +.bg-black-500 { + background-color: var(--c--globals--colors--black-500); +} + +.bg-black-550 { + background-color: var(--c--globals--colors--black-550); +} + +.bg-black-600 { + background-color: var(--c--globals--colors--black-600); +} + +.bg-black-650 { + background-color: var(--c--globals--colors--black-650); +} + +.bg-black-700 { + background-color: var(--c--globals--colors--black-700); +} + +.bg-black-750 { + background-color: var(--c--globals--colors--black-750); +} + +.bg-black-800 { + background-color: var(--c--globals--colors--black-800); +} + +.bg-black-850 { + background-color: var(--c--globals--colors--black-850); +} + +.bg-black-900 { + background-color: var(--c--globals--colors--black-900); +} + +.bg-black-950 { + background-color: var(--c--globals--colors--black-950); +} + +.bg-white-000 { + background-color: var(--c--globals--colors--white-000); +} + +.bg-white-050 { + background-color: var(--c--globals--colors--white-050); +} + +.bg-white-100 { + background-color: var(--c--globals--colors--white-100); +} + +.bg-white-150 { + background-color: var(--c--globals--colors--white-150); +} + +.bg-white-200 { + background-color: var(--c--globals--colors--white-200); +} + +.bg-white-250 { + background-color: var(--c--globals--colors--white-250); +} + +.bg-white-300 { + background-color: var(--c--globals--colors--white-300); +} + +.bg-white-350 { + background-color: var(--c--globals--colors--white-350); +} + +.bg-white-400 { + background-color: var(--c--globals--colors--white-400); +} + +.bg-white-450 { + background-color: var(--c--globals--colors--white-450); +} + +.bg-white-500 { + background-color: var(--c--globals--colors--white-500); +} + +.bg-white-550 { + background-color: var(--c--globals--colors--white-550); +} + +.bg-white-600 { + background-color: var(--c--globals--colors--white-600); +} + +.bg-white-650 { + background-color: var(--c--globals--colors--white-650); +} + +.bg-white-700 { + background-color: var(--c--globals--colors--white-700); +} + +.bg-white-750 { + background-color: var(--c--globals--colors--white-750); +} + +.bg-white-800 { + background-color: var(--c--globals--colors--white-800); +} + +.bg-white-850 { + background-color: var(--c--globals--colors--white-850); +} + +.bg-white-900 { + background-color: var(--c--globals--colors--white-900); +} + +.bg-white-950 { + background-color: var(--c--globals--colors--white-950); +} + +.bg-blue1-050 { + background-color: var(--c--globals--colors--blue1-050); +} + +.bg-blue1-100 { + background-color: var(--c--globals--colors--blue1-100); +} + +.bg-blue1-150 { + background-color: var(--c--globals--colors--blue1-150); +} + +.bg-blue1-200 { + background-color: var(--c--globals--colors--blue1-200); +} + +.bg-blue1-250 { + background-color: var(--c--globals--colors--blue1-250); +} + +.bg-blue1-300 { + background-color: var(--c--globals--colors--blue1-300); +} + +.bg-blue1-350 { + background-color: var(--c--globals--colors--blue1-350); +} + +.bg-blue1-400 { + background-color: var(--c--globals--colors--blue1-400); +} + +.bg-blue1-450 { + background-color: var(--c--globals--colors--blue1-450); +} + +.bg-blue1-500 { + background-color: var(--c--globals--colors--blue1-500); +} + +.bg-blue1-550 { + background-color: var(--c--globals--colors--blue1-550); +} + +.bg-blue1-600 { + background-color: var(--c--globals--colors--blue1-600); +} + +.bg-blue1-650 { + background-color: var(--c--globals--colors--blue1-650); +} + +.bg-blue1-700 { + background-color: var(--c--globals--colors--blue1-700); +} + +.bg-blue1-750 { + background-color: var(--c--globals--colors--blue1-750); +} + +.bg-blue1-800 { + background-color: var(--c--globals--colors--blue1-800); +} + +.bg-blue1-850 { + background-color: var(--c--globals--colors--blue1-850); +} + +.bg-blue1-900 { + background-color: var(--c--globals--colors--blue1-900); +} + +.bg-blue1-950 { + background-color: var(--c--globals--colors--blue1-950); +} + +.bg-blue2-050 { + background-color: var(--c--globals--colors--blue2-050); +} + +.bg-blue2-100 { + background-color: var(--c--globals--colors--blue2-100); +} + +.bg-blue2-150 { + background-color: var(--c--globals--colors--blue2-150); +} + +.bg-blue2-200 { + background-color: var(--c--globals--colors--blue2-200); +} + +.bg-blue2-250 { + background-color: var(--c--globals--colors--blue2-250); +} + +.bg-blue2-300 { + background-color: var(--c--globals--colors--blue2-300); +} + +.bg-blue2-350 { + background-color: var(--c--globals--colors--blue2-350); +} + +.bg-blue2-400 { + background-color: var(--c--globals--colors--blue2-400); +} + +.bg-blue2-450 { + background-color: var(--c--globals--colors--blue2-450); +} + +.bg-blue2-500 { + background-color: var(--c--globals--colors--blue2-500); +} + +.bg-blue2-550 { + background-color: var(--c--globals--colors--blue2-550); +} + +.bg-blue2-600 { + background-color: var(--c--globals--colors--blue2-600); +} + +.bg-blue2-650 { + background-color: var(--c--globals--colors--blue2-650); +} + +.bg-blue2-700 { + background-color: var(--c--globals--colors--blue2-700); +} + +.bg-blue2-750 { + background-color: var(--c--globals--colors--blue2-750); +} + +.bg-blue2-800 { + background-color: var(--c--globals--colors--blue2-800); +} + +.bg-blue2-850 { + background-color: var(--c--globals--colors--blue2-850); +} + +.bg-blue2-900 { + background-color: var(--c--globals--colors--blue2-900); +} + +.bg-blue2-950 { + background-color: var(--c--globals--colors--blue2-950); +} + +.bg-surface-primary { + background-color: var(--c--contextuals--background--surface--primary); +} + +.bg-surface-secondary { + background-color: var(--c--contextuals--background--surface--secondary); +} + +.bg-surface-tertiary { + background-color: var(--c--contextuals--background--surface--tertiary); +} + +.bg-semantic-brand-primary { + background-color: var(--c--contextuals--background--semantic--brand--primary); +} + +.bg-semantic-brand-primary-hover { + background-color: var( + --c--contextuals--background--semantic--brand--primary-hover + ); +} + +.bg-semantic-brand-secondary { + background-color: var( + --c--contextuals--background--semantic--brand--secondary ); - --c--components--forms-labelledbox--label-color--big: var( - --c--theme--colors--greyscale-950 +} + +.bg-semantic-brand-secondary-hover { + background-color: var( + --c--contextuals--background--semantic--brand--secondary-hover ); - --c--components--forms-labelledbox--label-color--big--disabled: var( - --c--theme--colors--greyscale-300 +} + +.bg-semantic-brand-tertiary { + background-color: var( + --c--contextuals--background--semantic--brand--tertiary ); - --c--components--forms-radio--border-color: var( - --c--theme--colors--primary-800 +} + +.bg-semantic-brand-tertiary-hover { + background-color: var( + --c--contextuals--background--semantic--brand--tertiary-hover ); - --c--components--forms-radio--background-color: var( - --c--theme--colors--greyscale-000 +} + +.bg-semantic-neutral-primary { + background-color: var( + --c--contextuals--background--semantic--neutral--primary ); - --c--components--forms-radio--accent-color: var( - --c--theme--colors--primary-800 +} + +.bg-semantic-neutral-primary-hover { + background-color: var( + --c--contextuals--background--semantic--neutral--primary-hover ); - --c--components--forms-radio--accent-color-disabled: var( - --c--theme--colors--greyscale-300 +} + +.bg-semantic-neutral-secondary { + background-color: var( + --c--contextuals--background--semantic--neutral--secondary ); - --c--components--forms-switch--border--color-disabled: var( - --c--theme--colors--greyscale-300 +} + +.bg-semantic-neutral-secondary-hover { + background-color: var( + --c--contextuals--background--semantic--neutral--secondary-hover ); - --c--components--forms-switch--border--color: var( - --c--theme--colors--primary-800 +} + +.bg-semantic-neutral-tertiary { + background-color: var( + --c--contextuals--background--semantic--neutral--tertiary ); - --c--components--forms-switch--handle-background-color: white; - --c--components--forms-switch--handle-background-color--disabled: var( - --c--theme--colors--greyscale-000 +} + +.bg-semantic-neutral-tertiary-hover { + background-color: var( + --c--contextuals--background--semantic--neutral--tertiary-hover ); - --c--components--forms-switch--rail-background-color--disabled: var( - --c--theme--colors--greyscale-000 +} + +.bg-semantic-contextual-primary { + background-color: var( + --c--contextuals--background--semantic--contextual--primary ); - --c--components--forms-switch--accent-color: var( - --c--theme--colors--primary-800 +} + +.bg-semantic-contextual-primary-hover { + background-color: var( + --c--contextuals--background--semantic--contextual--primary-hover ); - --c--components--forms-textarea--label-color--focus: var( - --c--theme--colors--greyscale-1000 +} + +.bg-semantic-info-primary { + background-color: var(--c--contextuals--background--semantic--info--primary); +} + +.bg-semantic-info-primary-hover { + background-color: var( + --c--contextuals--background--semantic--info--primary-hover ); - --c--components--forms-textarea--border-radius: 4px; - --c--components--forms-textarea--border-color: var( - --c--theme--colors--greyscale-400 +} + +.bg-semantic-info-secondary { + background-color: var( + --c--contextuals--background--semantic--info--secondary ); - --c--components--forms-textarea--box-shadow--color--hover: var( - --c--theme--colors--greyscale-400 +} + +.bg-semantic-info-secondary-hover { + background-color: var( + --c--contextuals--background--semantic--info--secondary-hover ); - --c--components--forms-textarea--box-shadow--color--focus: var( - --c--theme--colors--primary-800 +} + +.bg-semantic-info-tertiary { + background-color: var(--c--contextuals--background--semantic--info--tertiary); +} + +.bg-semantic-info-tertiary-hover { + background-color: var( + --c--contextuals--background--semantic--info--tertiary-hover ); - --c--components--forms-textarea--value-color: var( - --c--theme--colors--greyscale-950 +} + +.bg-semantic-success-primary { + background-color: var( + --c--contextuals--background--semantic--success--primary ); - --c--components--forms-textarea--value-color--disabled: var( - --c--theme--colors--greyscale-300 +} + +.bg-semantic-success-primary-hover { + background-color: var( + --c--contextuals--background--semantic--success--primary-hover ); - --c--components--forms-textarea--font-size: 14px; - --c--components--forms-input--label-color--focus: var( - --c--theme--colors--greyscale-1000 +} + +.bg-semantic-success-secondary { + background-color: var( + --c--contextuals--background--semantic--success--secondary ); - --c--components--forms-input--border-radius: 4px; - --c--components--forms-input--border-color: var( - --c--theme--colors--greyscale-400 +} + +.bg-semantic-success-secondary-hover { + background-color: var( + --c--contextuals--background--semantic--success--secondary-hover ); - --c--components--forms-input--box-shadow--color--hover: var( - --c--theme--colors--greyscale-400 +} + +.bg-semantic-success-tertiary { + background-color: var( + --c--contextuals--background--semantic--success--tertiary ); - --c--components--forms-input--box-shadow--color--focus: var( - --c--theme--colors--primary-800 +} + +.bg-semantic-success-tertiary-hover { + background-color: var( + --c--contextuals--background--semantic--success--tertiary-hover ); - --c--components--forms-input--value-color: var( - --c--theme--colors--greyscale-950 +} + +.bg-semantic-warning-primary { + background-color: var( + --c--contextuals--background--semantic--warning--primary ); - --c--components--forms-input--value-color--disabled: var( - --c--theme--colors--greyscale-300 +} + +.bg-semantic-warning-primary-hover { + background-color: var( + --c--contextuals--background--semantic--warning--primary-hover ); - --c--components--forms-input--font-size: 14px; - --c--components--forms-select--label-color--focus: var( - --c--theme--colors--greyscale-1000 +} + +.bg-semantic-warning-secondary { + background-color: var( + --c--contextuals--background--semantic--warning--secondary ); - --c--components--forms-select--item-font-size: 14px; - --c--components--forms-select--border-radius: 4px; - --c--components--forms-select--border-radius-hover: 4px; - --c--components--forms-select--border-color: var( - --c--theme--colors--greyscale-400 +} + +.bg-semantic-warning-secondary-hover { + background-color: var( + --c--contextuals--background--semantic--warning--secondary-hover ); - --c--components--forms-select--box-shadow--color--hover: var( - --c--theme--colors--greyscale-400 +} + +.bg-semantic-warning-tertiary { + background-color: var( + --c--contextuals--background--semantic--warning--tertiary ); - --c--components--forms-select--box-shadow--color--focus: var( - --c--theme--colors--primary-800 +} + +.bg-semantic-warning-tertiary-hover { + background-color: var( + --c--contextuals--background--semantic--warning--tertiary-hover ); - --c--components--forms-select--value-color: var( - --c--theme--colors--greyscale-950 +} + +.bg-semantic-error-primary { + background-color: var(--c--contextuals--background--semantic--error--primary); +} + +.bg-semantic-error-primary-hover { + background-color: var( + --c--contextuals--background--semantic--error--primary-hover ); - --c--components--forms-select--font-size: 14px; - --c--components--badge--font-size: var(--c--theme--font--sizes--xs); - --c--components--badge--border-radius: 4px; - --c--components--badge--padding-inline: var(--c--theme--spacings--xs); - --c--components--badge--padding-block: var(--c--theme--spacings--2xs); - --c--components--badge--accent--background-color: var( - --c--theme--colors--primary-100 +} + +.bg-semantic-error-secondary { + background-color: var( + --c--contextuals--background--semantic--error--secondary ); - --c--components--badge--accent--color: var(--c--theme--colors--primary-600); - --c--components--badge--neutral--background-color: var( - --c--theme--colors--greyscale-100 +} + +.bg-semantic-error-secondary-hover { + background-color: var( + --c--contextuals--background--semantic--error--secondary-hover ); - --c--components--badge--neutral--color: var( - --c--theme--colors--greyscale-600 +} + +.bg-semantic-error-tertiary { + background-color: var( + --c--contextuals--background--semantic--error--tertiary ); - --c--components--badge--danger--background-color: var( - --c--theme--colors--danger-100 +} + +.bg-semantic-error-tertiary-hover { + background-color: var( + --c--contextuals--background--semantic--error--tertiary-hover ); - --c--components--badge--danger--color: var(--c--theme--colors--danger-600); - --c--components--badge--success--background-color: var( - --c--theme--colors--success-100 +} + +.bg-semantic-disabled-primary { + background-color: var( + --c--contextuals--background--semantic--disabled--primary ); - --c--components--badge--success--color: var(--c--theme--colors--success-600); - --c--components--badge--warning--background-color: var( - --c--theme--colors--warning-100 +} + +.bg-semantic-disabled-secondary { + background-color: var( + --c--contextuals--background--semantic--disabled--secondary ); - --c--components--badge--warning--color: var(--c--theme--colors--warning-600); - --c--components--badge--info--background-color: var( - --c--theme--colors--info-100 +} + +.bg-palette-brand-primary { + background-color: var(--c--contextuals--background--palette--brand--primary); +} + +.bg-palette-brand-secondary { + background-color: var( + --c--contextuals--background--palette--brand--secondary ); - --c--components--badge--info--color: var(--c--theme--colors--info-600); - --c--components--la-gaufre: false; - --c--components--home-proconnect: false; - --c--components--image-system-filter: ; - --c--components--favicon--ico: /assets/favicon-light.ico; - --c--components--favicon--png-light: /assets/favicon-light.png; - --c--components--favicon--png-dark: /assets/favicon-dark.png; } -.cunningham-theme--dark { - --c--theme--colors--greyscale-100: #182536; - --c--theme--colors--greyscale-200: #303c4b; - --c--theme--colors--greyscale-300: #555f6b; - --c--theme--colors--greyscale-400: #79818a; - --c--theme--colors--greyscale-500: #9ea3aa; - --c--theme--colors--greyscale-600: #c2c6ca; - --c--theme--colors--greyscale-700: #e7e8ea; - --c--theme--colors--greyscale-800: #f3f4f4; - --c--theme--colors--greyscale-900: #fafafb; - --c--theme--colors--greyscale-000: #0c1a2b; - --c--theme--colors--primary-100: #3b4c62; - --c--theme--colors--primary-200: #4d6481; - --c--theme--colors--primary-300: #6381a6; - --c--theme--colors--primary-400: #7fa5d5; - --c--theme--colors--primary-500: #8cb5ea; - --c--theme--colors--primary-600: #a3c4ee; - --c--theme--colors--primary-700: #c3d8f4; - --c--theme--colors--primary-800: #dde9f8; - --c--theme--colors--primary-900: #f4f8fd; - --c--theme--colors--success-100: #eef8d7; - --c--theme--colors--success-200: #d9f1b2; - --c--theme--colors--success-300: #bde985; - --c--theme--colors--success-400: #a0e25d; - --c--theme--colors--success-500: #76d628; - --c--theme--colors--success-600: #5bb520; - --c--theme--colors--success-700: #43941a; - --c--theme--colors--success-800: #307414; - --c--theme--colors--success-900: #225d10; - --c--theme--colors--warning-100: #f7f3d5; - --c--theme--colors--warning-200: #f0e5aa; - --c--theme--colors--warning-300: #e8d680; - --c--theme--colors--warning-400: #e3c95f; - --c--theme--colors--warning-500: #d9b32b; - --c--theme--colors--warning-600: #bd9721; - --c--theme--colors--warning-700: #9d7b1c; - --c--theme--colors--warning-800: #7e6016; - --c--theme--colors--warning-900: #684d12; - --c--theme--colors--danger-100: #f8d0d0; - --c--theme--colors--danger-200: #f09898; - --c--theme--colors--danger-300: #f09898; - --c--theme--colors--danger-400: #ed8585; - --c--theme--colors--danger-500: #e96666; - --c--theme--colors--danger-600: #d66; - --c--theme--colors--danger-700: #c36666; - --c--theme--colors--danger-800: #ae6666; - --c--theme--colors--danger-900: #9d6666; +.bg-palette-brand-tertiary { + background-color: var(--c--contextuals--background--palette--brand--tertiary); } -.cunningham-theme--dsfr { - --c--theme--colors--secondary-icon: #c9191e; - --c--theme--logo--src: /assets/logo-gouv.svg; - --c--theme--logo--widthHeader: 110px; - --c--theme--logo--widthFooter: 220px; - --c--theme--logo--alt: gouvernement logo; - --c--theme--font--families--base: - marianne, inter, roboto flex variable, sans-serif; - --c--theme--font--families--accent: - marianne, inter, roboto flex variable, sans-serif; - --c--components--la-gaufre: true; - --c--components--home-proconnect: true; - --c--components--favicon--ico: /assets/favicon-dsfr.ico; - --c--components--favicon--png-light: /assets/favicon-dsfr.png; - --c--components--favicon--png-dark: /assets/favicon-dark-dsfr.png; +.bg-palette-red-primary { + background-color: var(--c--contextuals--background--palette--red--primary); } -.cunningham-theme--generic { - --c--theme--colors--primary-action: #206ebd; - --c--theme--colors--primary-focus: #1e64bf; - --c--theme--colors--primary-text: #2e2c28; - --c--theme--colors--primary-050: #f8f8f7; - --c--theme--colors--primary-100: #f0efec; - --c--theme--colors--primary-150: #f4f4fd; - --c--theme--colors--primary-200: #e8e7e4; - --c--theme--colors--primary-300: #cfcdc9; - --c--theme--colors--primary-400: #979592; - --c--theme--colors--primary-500: #82807d; - --c--theme--colors--primary-600: #3f3d39; - --c--theme--colors--primary-700: #2e2c28; - --c--theme--colors--primary-800: #302e29; - --c--theme--colors--primary-900: #282622; - --c--theme--colors--primary-950: #201f1c; - --c--theme--colors--secondary-text: #fff; - --c--theme--colors--secondary-50: #f4f7fa; - --c--theme--colors--secondary-100: #d7e3ee; - --c--theme--colors--secondary-200: #b8cce1; - --c--theme--colors--secondary-300: #99b4d3; - --c--theme--colors--secondary-400: #7595be; - --c--theme--colors--secondary-500: #5874a0; - --c--theme--colors--secondary-600: #3a5383; - --c--theme--colors--secondary-700: #1e3462; - --c--theme--colors--secondary-800: #091b41; - --c--theme--colors--secondary-900: #08183b; - --c--theme--colors--secondary-950: #071636; - --c--theme--colors--greyscale-text: #3c3b38; - --c--theme--colors--greyscale-000: #fff; - --c--theme--colors--greyscale-050: #f8f7f7; - --c--theme--colors--greyscale-100: #f3f3f2; - --c--theme--colors--greyscale-200: #ecebea; - --c--theme--colors--greyscale-250: #e4e3e2; - --c--theme--colors--greyscale-300: #d3d2cf; - --c--theme--colors--greyscale-350: #eee; - --c--theme--colors--greyscale-400: #96948e; - --c--theme--colors--greyscale-500: #817e77; - --c--theme--colors--greyscale-600: #6a6862; - --c--theme--colors--greyscale-700: #3c3b38; - --c--theme--colors--greyscale-750: #383632; - --c--theme--colors--greyscale-800: #2d2b27; - --c--theme--colors--greyscale-900: #262522; - --c--theme--colors--greyscale-950: #201f1c; - --c--theme--colors--greyscale-1000: #181714; - --c--theme--colors--success-text: #234935; - --c--theme--colors--success-50: #f3fbf5; - --c--theme--colors--success-100: #e4f7ea; - --c--theme--colors--success-200: #caeed4; - --c--theme--colors--success-300: #a0e0b5; - --c--theme--colors--success-400: #6cc88c; - --c--theme--colors--success-500: #6cc88c; - --c--theme--colors--success-600: #358d5c; - --c--theme--colors--success-700: #2d704b; - --c--theme--colors--success-800: #28583f; - --c--theme--colors--success-900: #234935; - --c--theme--colors--success-950: #0f281b; - --c--theme--colors--info-text: #212445; - --c--theme--colors--info-50: #f2f6fb; - --c--theme--colors--info-100: #e2e9f5; - --c--theme--colors--info-200: #ccd8ee; - --c--theme--colors--info-300: #a9c0e3; - --c--theme--colors--info-400: #809dd4; - --c--theme--colors--info-500: #617bc7; - --c--theme--colors--info-600: #4a5cbf; - --c--theme--colors--info-700: #3e49b2; - --c--theme--colors--info-800: #353c8f; - --c--theme--colors--info-900: #303771; - --c--theme--colors--info-950: #212445; - --c--theme--colors--warning-text: #d97c3a; - --c--theme--colors--warning-50: #fdf7f1; - --c--theme--colors--warning-100: #fbeddc; - --c--theme--colors--warning-200: #f5d9b9; - --c--theme--colors--warning-300: #edbe8c; - --c--theme--colors--warning-400: #e2985c; - --c--theme--colors--warning-500: #d97c3a; - --c--theme--colors--warning-600: #c96330; - --c--theme--colors--warning-700: #a34b32; - --c--theme--colors--warning-800: #813b2c; - --c--theme--colors--warning-900: #693327; - --c--theme--colors--warning-950: #381713; - --c--theme--colors--danger-action: #c0182a; - --c--theme--colors--danger-text: #fff; - --c--theme--colors--danger-050: #fdf5f4; - --c--theme--colors--danger-100: #fbebe8; - --c--theme--colors--danger-200: #f9e0dc; - --c--theme--colors--danger-300: #f3c3bd; - --c--theme--colors--danger-400: #e26552; - --c--theme--colors--danger-500: #c91f00; - --c--theme--colors--danger-600: #a71901; - --c--theme--colors--danger-700: #562c2b; - --c--theme--colors--danger-800: #392425; - --c--theme--colors--danger-900: #311f20; - --c--theme--colors--danger-950: #2a191a; - --c--theme--colors--blue-400: #8baecc; - --c--theme--colors--blue-500: #567aa2; - --c--theme--colors--blue-600: #455784; - --c--theme--colors--brown-400: #e4c090; - --c--theme--colors--brown-500: #ba9977; - --c--theme--colors--brown-600: #735c45; - --c--theme--colors--cyan-400: #5cbec9; - --c--theme--colors--cyan-500: #43a1b3; - --c--theme--colors--cyan-600: #39809b; - --c--theme--colors--gold-400: #ecbf50; - --c--theme--colors--gold-500: #dfa038; - --c--theme--colors--gold-600: #c17b31; - --c--theme--colors--green-400: #5dbd9a; - --c--theme--colors--green-500: #3aa183; - --c--theme--colors--green-600: #2a816d; - --c--theme--colors--olive-400: #afd662; - --c--theme--colors--olive-500: #90bb4b; - --c--theme--colors--olive-600: #6e9441; - --c--theme--colors--orange-400: #e2985c; - --c--theme--colors--orange-500: #d97c3a; - --c--theme--colors--orange-600: #c96330; - --c--theme--colors--pink-400: #be8fc8; - --c--theme--colors--pink-500: #a563b1; - --c--theme--colors--pink-600: #8b44a5; - --c--theme--colors--purple-400: #be8fc8; - --c--theme--colors--purple-500: #a563b1; - --c--theme--colors--purple-600: #8b44a5; - --c--theme--colors--yellow-400: #edc947; - --c--theme--colors--yellow-500: #dbb13a; - --c--theme--colors--yellow-600: #b88a34; - --c--theme--font--families--base: inter, roboto flex variable, sans-serif; - --c--theme--font--families--accent: inter, roboto flex variable, sans-serif; - --c--components--button--primary--background--color-hover: var( - --c--theme--colors--primary-focus - ); - --c--components--button--primary--background--color-active: var( - --c--theme--colors--primary-focus - ); - --c--components--button--primary--background--color-focus: var( - --c--theme--colors--primary-focus - ); - --c--components--image-system-filter: saturate(0.2); -} - -.clr-secondary-text { - color: var(--c--theme--colors--secondary-text); -} - -.clr-secondary-100 { - color: var(--c--theme--colors--secondary-100); -} - -.clr-secondary-200 { - color: var(--c--theme--colors--secondary-200); -} - -.clr-secondary-300 { - color: var(--c--theme--colors--secondary-300); -} - -.clr-secondary-400 { - color: var(--c--theme--colors--secondary-400); -} - -.clr-secondary-500 { - color: var(--c--theme--colors--secondary-500); -} - -.clr-secondary-600 { - color: var(--c--theme--colors--secondary-600); -} - -.clr-secondary-700 { - color: var(--c--theme--colors--secondary-700); -} - -.clr-secondary-800 { - color: var(--c--theme--colors--secondary-800); +.bg-palette-red-secondary { + background-color: var(--c--contextuals--background--palette--red--secondary); } -.clr-secondary-900 { - color: var(--c--theme--colors--secondary-900); +.bg-palette-red-tertiary { + background-color: var(--c--contextuals--background--palette--red--tertiary); } -.clr-info-text { - color: var(--c--theme--colors--info-text); +.bg-palette-orange-primary { + background-color: var(--c--contextuals--background--palette--orange--primary); } -.clr-info-100 { - color: var(--c--theme--colors--info-100); +.bg-palette-orange-secondary { + background-color: var( + --c--contextuals--background--palette--orange--secondary + ); } -.clr-info-200 { - color: var(--c--theme--colors--info-200); +.bg-palette-orange-tertiary { + background-color: var( + --c--contextuals--background--palette--orange--tertiary + ); } -.clr-info-300 { - color: var(--c--theme--colors--info-300); +.bg-palette-brown-primary { + background-color: var(--c--contextuals--background--palette--brown--primary); } -.clr-info-400 { - color: var(--c--theme--colors--info-400); +.bg-palette-brown-secondary { + background-color: var( + --c--contextuals--background--palette--brown--secondary + ); } -.clr-info-500 { - color: var(--c--theme--colors--info-500); +.bg-palette-brown-tertiary { + background-color: var(--c--contextuals--background--palette--brown--tertiary); } -.clr-info-600 { - color: var(--c--theme--colors--info-600); +.bg-palette-yellow-primary { + background-color: var(--c--contextuals--background--palette--yellow--primary); } -.clr-info-700 { - color: var(--c--theme--colors--info-700); +.bg-palette-yellow-secondary { + background-color: var( + --c--contextuals--background--palette--yellow--secondary + ); } -.clr-info-800 { - color: var(--c--theme--colors--info-800); +.bg-palette-yellow-tertiary { + background-color: var( + --c--contextuals--background--palette--yellow--tertiary + ); } -.clr-info-900 { - color: var(--c--theme--colors--info-900); +.bg-palette-green-primary { + background-color: var(--c--contextuals--background--palette--green--primary); } -.clr-greyscale-100 { - color: var(--c--theme--colors--greyscale-100); +.bg-palette-green-secondary { + background-color: var( + --c--contextuals--background--palette--green--secondary + ); } -.clr-greyscale-200 { - color: var(--c--theme--colors--greyscale-200); +.bg-palette-green-tertiary { + background-color: var(--c--contextuals--background--palette--green--tertiary); } -.clr-greyscale-300 { - color: var(--c--theme--colors--greyscale-300); +.bg-palette-blue-1-primary { + background-color: var(--c--contextuals--background--palette--blue-1--primary); } -.clr-greyscale-400 { - color: var(--c--theme--colors--greyscale-400); +.bg-palette-blue-1-secondary { + background-color: var( + --c--contextuals--background--palette--blue-1--secondary + ); } -.clr-greyscale-500 { - color: var(--c--theme--colors--greyscale-500); +.bg-palette-blue-1-tertiary { + background-color: var( + --c--contextuals--background--palette--blue-1--tertiary + ); } -.clr-greyscale-600 { - color: var(--c--theme--colors--greyscale-600); +.bg-palette-blue-2-primary { + background-color: var(--c--contextuals--background--palette--blue-2--primary); } -.clr-greyscale-700 { - color: var(--c--theme--colors--greyscale-700); +.bg-palette-blue-2-secondary { + background-color: var( + --c--contextuals--background--palette--blue-2--secondary + ); } -.clr-greyscale-800 { - color: var(--c--theme--colors--greyscale-800); +.bg-palette-blue-2-tertiary { + background-color: var( + --c--contextuals--background--palette--blue-2--tertiary + ); } -.clr-greyscale-900 { - color: var(--c--theme--colors--greyscale-900); +.bg-palette-purple-primary { + background-color: var(--c--contextuals--background--palette--purple--primary); } -.clr-greyscale-000 { - color: var(--c--theme--colors--greyscale-000); +.bg-palette-purple-secondary { + background-color: var( + --c--contextuals--background--palette--purple--secondary + ); } -.clr-primary-100 { - color: var(--c--theme--colors--primary-100); +.bg-palette-purple-tertiary { + background-color: var( + --c--contextuals--background--palette--purple--tertiary + ); } -.clr-primary-200 { - color: var(--c--theme--colors--primary-200); +.bg-palette-pink-primary { + background-color: var(--c--contextuals--background--palette--pink--primary); } -.clr-primary-300 { - color: var(--c--theme--colors--primary-300); +.bg-palette-pink-secondary { + background-color: var(--c--contextuals--background--palette--pink--secondary); } -.clr-primary-400 { - color: var(--c--theme--colors--primary-400); +.bg-palette-pink-tertiary { + background-color: var(--c--contextuals--background--palette--pink--tertiary); } -.clr-primary-500 { - color: var(--c--theme--colors--primary-500); +.bg-palette-gray-primary { + background-color: var(--c--contextuals--background--palette--gray--primary); } -.clr-primary-600 { - color: var(--c--theme--colors--primary-600); +.bg-palette-gray-secondary { + background-color: var(--c--contextuals--background--palette--gray--secondary); } -.clr-primary-700 { - color: var(--c--theme--colors--primary-700); +.bg-palette-gray-tertiary { + background-color: var(--c--contextuals--background--palette--gray--tertiary); } -.clr-primary-800 { - color: var(--c--theme--colors--primary-800); +.bg-text-primary { + background-color: var(--c--contextuals--background--text--primary); } -.clr-primary-900 { - color: var(--c--theme--colors--primary-900); +.fw-thin { + font-weight: var(--c--globals--font--weights--thin); } -.clr-success-100 { - color: var(--c--theme--colors--success-100); +.fw-light { + font-weight: var(--c--globals--font--weights--light); } -.clr-success-200 { - color: var(--c--theme--colors--success-200); +.fw-regular { + font-weight: var(--c--globals--font--weights--regular); } -.clr-success-300 { - color: var(--c--theme--colors--success-300); +.fw-medium { + font-weight: var(--c--globals--font--weights--medium); } -.clr-success-400 { - color: var(--c--theme--colors--success-400); +.fw-bold { + font-weight: var(--c--globals--font--weights--bold); } -.clr-success-500 { - color: var(--c--theme--colors--success-500); +.fw-extrabold { + font-weight: var(--c--globals--font--weights--extrabold); } -.clr-success-600 { - color: var(--c--theme--colors--success-600); +.fw-black { + font-weight: var(--c--globals--font--weights--black); } -.clr-success-700 { - color: var(--c--theme--colors--success-700); +.fs-xs { + font-size: var(--c--globals--font--sizes--xs); + letter-spacing: var(--c--globals--font--letterspacings--xs); } -.clr-success-800 { - color: var(--c--theme--colors--success-800); +.fs-sm { + font-size: var(--c--globals--font--sizes--sm); + letter-spacing: var(--c--globals--font--letterspacings--sm); } -.clr-success-900 { - color: var(--c--theme--colors--success-900); +.fs-md { + font-size: var(--c--globals--font--sizes--md); + letter-spacing: var(--c--globals--font--letterspacings--md); } -.clr-warning-100 { - color: var(--c--theme--colors--warning-100); +.fs-lg { + font-size: var(--c--globals--font--sizes--lg); + letter-spacing: var(--c--globals--font--letterspacings--lg); } -.clr-warning-200 { - color: var(--c--theme--colors--warning-200); +.fs-ml { + font-size: var(--c--globals--font--sizes--ml); + letter-spacing: var(--c--globals--font--letterspacings--ml); } -.clr-warning-300 { - color: var(--c--theme--colors--warning-300); +.fs-xl { + font-size: var(--c--globals--font--sizes--xl); + letter-spacing: var(--c--globals--font--letterspacings--xl); } -.clr-warning-400 { - color: var(--c--theme--colors--warning-400); +.fs-t { + font-size: var(--c--globals--font--sizes--t); + letter-spacing: var(--c--globals--font--letterspacings--t); } -.clr-warning-500 { - color: var(--c--theme--colors--warning-500); +.fs-s { + font-size: var(--c--globals--font--sizes--s); + letter-spacing: var(--c--globals--font--letterspacings--s); } -.clr-warning-600 { - color: var(--c--theme--colors--warning-600); +.fs-h1 { + font-size: var(--c--globals--font--sizes--h1); + letter-spacing: var(--c--globals--font--letterspacings--h1); } -.clr-warning-700 { - color: var(--c--theme--colors--warning-700); +.fs-h2 { + font-size: var(--c--globals--font--sizes--h2); + letter-spacing: var(--c--globals--font--letterspacings--h2); } -.clr-warning-800 { - color: var(--c--theme--colors--warning-800); +.fs-h3 { + font-size: var(--c--globals--font--sizes--h3); + letter-spacing: var(--c--globals--font--letterspacings--h3); } -.clr-warning-900 { - color: var(--c--theme--colors--warning-900); +.fs-h4 { + font-size: var(--c--globals--font--sizes--h4); + letter-spacing: var(--c--globals--font--letterspacings--h4); } -.clr-danger-100 { - color: var(--c--theme--colors--danger-100); +.fs-h5 { + font-size: var(--c--globals--font--sizes--h5); + letter-spacing: var(--c--globals--font--letterspacings--h5); } -.clr-danger-200 { - color: var(--c--theme--colors--danger-200); +.fs-h6 { + font-size: var(--c--globals--font--sizes--h6); + letter-spacing: var(--c--globals--font--letterspacings--h6); } -.clr-danger-300 { - color: var(--c--theme--colors--danger-300); +.fs-xl-alt { + font-size: var(--c--globals--font--sizes--xl-alt); + letter-spacing: var(--c--globals--font--letterspacings--xl-alt); } -.clr-danger-400 { - color: var(--c--theme--colors--danger-400); +.fs-lg-alt { + font-size: var(--c--globals--font--sizes--lg-alt); + letter-spacing: var(--c--globals--font--letterspacings--lg-alt); } -.clr-danger-500 { - color: var(--c--theme--colors--danger-500); +.fs-md-alt { + font-size: var(--c--globals--font--sizes--md-alt); + letter-spacing: var(--c--globals--font--letterspacings--md-alt); } -.clr-danger-600 { - color: var(--c--theme--colors--danger-600); +.fs-sm-alt { + font-size: var(--c--globals--font--sizes--sm-alt); + letter-spacing: var(--c--globals--font--letterspacings--sm-alt); } -.clr-danger-700 { - color: var(--c--theme--colors--danger-700); +.fs-xs-alt { + font-size: var(--c--globals--font--sizes--xs-alt); + letter-spacing: var(--c--globals--font--letterspacings--xs-alt); } -.clr-danger-800 { - color: var(--c--theme--colors--danger-800); +.f-base { + font-family: var(--c--globals--font--families--base); } -.clr-danger-900 { - color: var(--c--theme--colors--danger-900); +.f-accent { + font-family: var(--c--globals--font--families--accent); } -.clr-primary-text { - color: var(--c--theme--colors--primary-text); +.m-0 { + margin: var(--c--globals--spacings--0); } -.clr-success-text { - color: var(--c--theme--colors--success-text); +.mb-0 { + margin-bottom: var(--c--globals--spacings--0); } -.clr-warning-text { - color: var(--c--theme--colors--warning-text); +.mt-0 { + margin-top: var(--c--globals--spacings--0); } -.clr-danger-text { - color: var(--c--theme--colors--danger-text); +.ml-0 { + margin-left: var(--c--globals--spacings--0); } -.clr-primary-050 { - color: var(--c--theme--colors--primary-050); +.mr-0 { + margin-right: var(--c--globals--spacings--0); } -.clr-primary-150 { - color: var(--c--theme--colors--primary-150); +.m-l { + margin: var(--c--globals--spacings--l); } -.clr-greyscale-text { - color: var(--c--theme--colors--greyscale-text); +.mb-l { + margin-bottom: var(--c--globals--spacings--l); } -.clr-greyscale-050 { - color: var(--c--theme--colors--greyscale-050); +.mt-l { + margin-top: var(--c--globals--spacings--l); } -.clr-greyscale-250 { - color: var(--c--theme--colors--greyscale-250); +.ml-l { + margin-left: var(--c--globals--spacings--l); } -.clr-greyscale-350 { - color: var(--c--theme--colors--greyscale-350); +.mr-l { + margin-right: var(--c--globals--spacings--l); } -.clr-greyscale-750 { - color: var(--c--theme--colors--greyscale-750); +.m-b { + margin: var(--c--globals--spacings--b); } -.clr-greyscale-950 { - color: var(--c--theme--colors--greyscale-950); +.mb-b { + margin-bottom: var(--c--globals--spacings--b); } -.clr-greyscale-1000 { - color: var(--c--theme--colors--greyscale-1000); +.mt-b { + margin-top: var(--c--globals--spacings--b); } -.clr-danger-050 { - color: var(--c--theme--colors--danger-050); +.ml-b { + margin-left: var(--c--globals--spacings--b); } -.clr-blue-500 { - color: var(--c--theme--colors--blue-500); +.mr-b { + margin-right: var(--c--globals--spacings--b); } -.clr-brown-500 { - color: var(--c--theme--colors--brown-500); +.m-m { + margin: var(--c--globals--spacings--m); } -.clr-cyan-500 { - color: var(--c--theme--colors--cyan-500); +.mb-m { + margin-bottom: var(--c--globals--spacings--m); } -.clr-gold-500 { - color: var(--c--theme--colors--gold-500); +.mt-m { + margin-top: var(--c--globals--spacings--m); } -.clr-green-500 { - color: var(--c--theme--colors--green-500); +.ml-m { + margin-left: var(--c--globals--spacings--m); } -.clr-olive-500 { - color: var(--c--theme--colors--olive-500); +.mr-m { + margin-right: var(--c--globals--spacings--m); } -.clr-orange-500 { - color: var(--c--theme--colors--orange-500); +.m-s { + margin: var(--c--globals--spacings--s); } -.clr-purple-500 { - color: var(--c--theme--colors--purple-500); +.mb-s { + margin-bottom: var(--c--globals--spacings--s); } -.clr-red-500 { - color: var(--c--theme--colors--red-500); +.mt-s { + margin-top: var(--c--globals--spacings--s); } -.clr-yellow-500 { - color: var(--c--theme--colors--yellow-500); +.ml-s { + margin-left: var(--c--globals--spacings--s); } -.clr-rose-500 { - color: var(--c--theme--colors--rose-500); +.mr-s { + margin-right: var(--c--globals--spacings--s); } -.clr-primary-action { - color: var(--c--theme--colors--primary-action); +.m-t { + margin: var(--c--globals--spacings--t); } -.clr-primary-bg { - color: var(--c--theme--colors--primary-bg); +.mb-t { + margin-bottom: var(--c--globals--spacings--t); } -.clr-primary-focus { - color: var(--c--theme--colors--primary-focus); +.mt-t { + margin-top: var(--c--globals--spacings--t); } -.clr-secondary-icon { - color: var(--c--theme--colors--secondary-icon); +.ml-t { + margin-left: var(--c--globals--spacings--t); } -.clr-blue-400 { - color: var(--c--theme--colors--blue-400); +.mr-t { + margin-right: var(--c--globals--spacings--t); } -.clr-blue-600 { - color: var(--c--theme--colors--blue-600); +.m-st { + margin: var(--c--globals--spacings--st); } -.clr-brown-400 { - color: var(--c--theme--colors--brown-400); +.mb-st { + margin-bottom: var(--c--globals--spacings--st); } -.clr-brown-600 { - color: var(--c--theme--colors--brown-600); +.mt-st { + margin-top: var(--c--globals--spacings--st); } -.clr-cyan-400 { - color: var(--c--theme--colors--cyan-400); +.ml-st { + margin-left: var(--c--globals--spacings--st); } -.clr-cyan-600 { - color: var(--c--theme--colors--cyan-600); +.mr-st { + margin-right: var(--c--globals--spacings--st); } -.clr-gold-400 { - color: var(--c--theme--colors--gold-400); +.m-4xs { + margin: var(--c--globals--spacings--4xs); } -.clr-gold-600 { - color: var(--c--theme--colors--gold-600); +.mb-4xs { + margin-bottom: var(--c--globals--spacings--4xs); } -.clr-green-400 { - color: var(--c--theme--colors--green-400); +.mt-4xs { + margin-top: var(--c--globals--spacings--4xs); } -.clr-green-600 { - color: var(--c--theme--colors--green-600); +.ml-4xs { + margin-left: var(--c--globals--spacings--4xs); } -.clr-olive-400 { - color: var(--c--theme--colors--olive-400); +.mr-4xs { + margin-right: var(--c--globals--spacings--4xs); } -.clr-olive-600 { - color: var(--c--theme--colors--olive-600); +.m-xxxs { + margin: var(--c--globals--spacings--xxxs); } -.clr-orange-400 { - color: var(--c--theme--colors--orange-400); +.mb-xxxs { + margin-bottom: var(--c--globals--spacings--xxxs); } -.clr-orange-600 { - color: var(--c--theme--colors--orange-600); +.mt-xxxs { + margin-top: var(--c--globals--spacings--xxxs); } -.clr-pink-400 { - color: var(--c--theme--colors--pink-400); +.ml-xxxs { + margin-left: var(--c--globals--spacings--xxxs); } -.clr-pink-500 { - color: var(--c--theme--colors--pink-500); +.mr-xxxs { + margin-right: var(--c--globals--spacings--xxxs); } -.clr-pink-600 { - color: var(--c--theme--colors--pink-600); +.m-xxs { + margin: var(--c--globals--spacings--xxs); } -.clr-purple-400 { - color: var(--c--theme--colors--purple-400); +.mb-xxs { + margin-bottom: var(--c--globals--spacings--xxs); } -.clr-purple-600 { - color: var(--c--theme--colors--purple-600); +.mt-xxs { + margin-top: var(--c--globals--spacings--xxs); } -.clr-yellow-400 { - color: var(--c--theme--colors--yellow-400); +.ml-xxs { + margin-left: var(--c--globals--spacings--xxs); } -.clr-yellow-600 { - color: var(--c--theme--colors--yellow-600); +.mr-xxs { + margin-right: var(--c--globals--spacings--xxs); +} + +.m-xs { + margin: var(--c--globals--spacings--xs); } -.bg-secondary-text { - background-color: var(--c--theme--colors--secondary-text); +.mb-xs { + margin-bottom: var(--c--globals--spacings--xs); } -.bg-secondary-100 { - background-color: var(--c--theme--colors--secondary-100); +.mt-xs { + margin-top: var(--c--globals--spacings--xs); } -.bg-secondary-200 { - background-color: var(--c--theme--colors--secondary-200); +.ml-xs { + margin-left: var(--c--globals--spacings--xs); } -.bg-secondary-300 { - background-color: var(--c--theme--colors--secondary-300); +.mr-xs { + margin-right: var(--c--globals--spacings--xs); } -.bg-secondary-400 { - background-color: var(--c--theme--colors--secondary-400); +.m-sm { + margin: var(--c--globals--spacings--sm); } -.bg-secondary-500 { - background-color: var(--c--theme--colors--secondary-500); +.mb-sm { + margin-bottom: var(--c--globals--spacings--sm); } -.bg-secondary-600 { - background-color: var(--c--theme--colors--secondary-600); +.mt-sm { + margin-top: var(--c--globals--spacings--sm); } -.bg-secondary-700 { - background-color: var(--c--theme--colors--secondary-700); +.ml-sm { + margin-left: var(--c--globals--spacings--sm); } -.bg-secondary-800 { - background-color: var(--c--theme--colors--secondary-800); +.mr-sm { + margin-right: var(--c--globals--spacings--sm); } -.bg-secondary-900 { - background-color: var(--c--theme--colors--secondary-900); +.m-base { + margin: var(--c--globals--spacings--base); } -.bg-info-text { - background-color: var(--c--theme--colors--info-text); +.mb-base { + margin-bottom: var(--c--globals--spacings--base); } -.bg-info-100 { - background-color: var(--c--theme--colors--info-100); +.mt-base { + margin-top: var(--c--globals--spacings--base); } -.bg-info-200 { - background-color: var(--c--theme--colors--info-200); +.ml-base { + margin-left: var(--c--globals--spacings--base); } -.bg-info-300 { - background-color: var(--c--theme--colors--info-300); +.mr-base { + margin-right: var(--c--globals--spacings--base); } -.bg-info-400 { - background-color: var(--c--theme--colors--info-400); +.m-md { + margin: var(--c--globals--spacings--md); } -.bg-info-500 { - background-color: var(--c--theme--colors--info-500); +.mb-md { + margin-bottom: var(--c--globals--spacings--md); } -.bg-info-600 { - background-color: var(--c--theme--colors--info-600); +.mt-md { + margin-top: var(--c--globals--spacings--md); +} + +.ml-md { + margin-left: var(--c--globals--spacings--md); +} + +.mr-md { + margin-right: var(--c--globals--spacings--md); +} + +.m-lg { + margin: var(--c--globals--spacings--lg); } -.bg-info-700 { - background-color: var(--c--theme--colors--info-700); +.mb-lg { + margin-bottom: var(--c--globals--spacings--lg); } -.bg-info-800 { - background-color: var(--c--theme--colors--info-800); +.mt-lg { + margin-top: var(--c--globals--spacings--lg); } -.bg-info-900 { - background-color: var(--c--theme--colors--info-900); +.ml-lg { + margin-left: var(--c--globals--spacings--lg); } -.bg-greyscale-100 { - background-color: var(--c--theme--colors--greyscale-100); +.mr-lg { + margin-right: var(--c--globals--spacings--lg); } -.bg-greyscale-200 { - background-color: var(--c--theme--colors--greyscale-200); +.m-xl { + margin: var(--c--globals--spacings--xl); } -.bg-greyscale-300 { - background-color: var(--c--theme--colors--greyscale-300); +.mb-xl { + margin-bottom: var(--c--globals--spacings--xl); } -.bg-greyscale-400 { - background-color: var(--c--theme--colors--greyscale-400); +.mt-xl { + margin-top: var(--c--globals--spacings--xl); } -.bg-greyscale-500 { - background-color: var(--c--theme--colors--greyscale-500); +.ml-xl { + margin-left: var(--c--globals--spacings--xl); } -.bg-greyscale-600 { - background-color: var(--c--theme--colors--greyscale-600); +.mr-xl { + margin-right: var(--c--globals--spacings--xl); } -.bg-greyscale-700 { - background-color: var(--c--theme--colors--greyscale-700); +.m-xxl { + margin: var(--c--globals--spacings--xxl); } -.bg-greyscale-800 { - background-color: var(--c--theme--colors--greyscale-800); +.mb-xxl { + margin-bottom: var(--c--globals--spacings--xxl); } -.bg-greyscale-900 { - background-color: var(--c--theme--colors--greyscale-900); +.mt-xxl { + margin-top: var(--c--globals--spacings--xxl); } -.bg-greyscale-000 { - background-color: var(--c--theme--colors--greyscale-000); +.ml-xxl { + margin-left: var(--c--globals--spacings--xxl); } -.bg-primary-100 { - background-color: var(--c--theme--colors--primary-100); +.mr-xxl { + margin-right: var(--c--globals--spacings--xxl); } -.bg-primary-200 { - background-color: var(--c--theme--colors--primary-200); +.m-xxxl { + margin: var(--c--globals--spacings--xxxl); } -.bg-primary-300 { - background-color: var(--c--theme--colors--primary-300); +.mb-xxxl { + margin-bottom: var(--c--globals--spacings--xxxl); } -.bg-primary-400 { - background-color: var(--c--theme--colors--primary-400); +.mt-xxxl { + margin-top: var(--c--globals--spacings--xxxl); } -.bg-primary-500 { - background-color: var(--c--theme--colors--primary-500); +.ml-xxxl { + margin-left: var(--c--globals--spacings--xxxl); } -.bg-primary-600 { - background-color: var(--c--theme--colors--primary-600); +.mr-xxxl { + margin-right: var(--c--globals--spacings--xxxl); } -.bg-primary-700 { - background-color: var(--c--theme--colors--primary-700); +.m-4xl { + margin: var(--c--globals--spacings--4xl); } -.bg-primary-800 { - background-color: var(--c--theme--colors--primary-800); +.mb-4xl { + margin-bottom: var(--c--globals--spacings--4xl); } -.bg-primary-900 { - background-color: var(--c--theme--colors--primary-900); +.mt-4xl { + margin-top: var(--c--globals--spacings--4xl); } -.bg-success-100 { - background-color: var(--c--theme--colors--success-100); +.ml-4xl { + margin-left: var(--c--globals--spacings--4xl); } -.bg-success-200 { - background-color: var(--c--theme--colors--success-200); +.mr-4xl { + margin-right: var(--c--globals--spacings--4xl); } -.bg-success-300 { - background-color: var(--c--theme--colors--success-300); +.m-5xl { + margin: var(--c--globals--spacings--5xl); } -.bg-success-400 { - background-color: var(--c--theme--colors--success-400); +.mb-5xl { + margin-bottom: var(--c--globals--spacings--5xl); } -.bg-success-500 { - background-color: var(--c--theme--colors--success-500); +.mt-5xl { + margin-top: var(--c--globals--spacings--5xl); } -.bg-success-600 { - background-color: var(--c--theme--colors--success-600); +.ml-5xl { + margin-left: var(--c--globals--spacings--5xl); } -.bg-success-700 { - background-color: var(--c--theme--colors--success-700); +.mr-5xl { + margin-right: var(--c--globals--spacings--5xl); } -.bg-success-800 { - background-color: var(--c--theme--colors--success-800); +.m-6xl { + margin: var(--c--globals--spacings--6xl); } -.bg-success-900 { - background-color: var(--c--theme--colors--success-900); +.mb-6xl { + margin-bottom: var(--c--globals--spacings--6xl); } -.bg-warning-100 { - background-color: var(--c--theme--colors--warning-100); +.mt-6xl { + margin-top: var(--c--globals--spacings--6xl); } -.bg-warning-200 { - background-color: var(--c--theme--colors--warning-200); +.ml-6xl { + margin-left: var(--c--globals--spacings--6xl); } -.bg-warning-300 { - background-color: var(--c--theme--colors--warning-300); +.mr-6xl { + margin-right: var(--c--globals--spacings--6xl); } -.bg-warning-400 { - background-color: var(--c--theme--colors--warning-400); +.m-7xl { + margin: var(--c--globals--spacings--7xl); } -.bg-warning-500 { - background-color: var(--c--theme--colors--warning-500); +.mb-7xl { + margin-bottom: var(--c--globals--spacings--7xl); } -.bg-warning-600 { - background-color: var(--c--theme--colors--warning-600); +.mt-7xl { + margin-top: var(--c--globals--spacings--7xl); } -.bg-warning-700 { - background-color: var(--c--theme--colors--warning-700); +.ml-7xl { + margin-left: var(--c--globals--spacings--7xl); } -.bg-warning-800 { - background-color: var(--c--theme--colors--warning-800); +.mr-7xl { + margin-right: var(--c--globals--spacings--7xl); } -.bg-warning-900 { - background-color: var(--c--theme--colors--warning-900); +.m-none { + margin: var(--c--globals--spacings--none); } -.bg-danger-100 { - background-color: var(--c--theme--colors--danger-100); +.mb-none { + margin-bottom: var(--c--globals--spacings--none); } -.bg-danger-200 { - background-color: var(--c--theme--colors--danger-200); +.mt-none { + margin-top: var(--c--globals--spacings--none); } -.bg-danger-300 { - background-color: var(--c--theme--colors--danger-300); +.ml-none { + margin-left: var(--c--globals--spacings--none); } -.bg-danger-400 { - background-color: var(--c--theme--colors--danger-400); +.mr-none { + margin-right: var(--c--globals--spacings--none); } -.bg-danger-500 { - background-color: var(--c--theme--colors--danger-500); +.m-auto { + margin: var(--c--globals--spacings--auto); } -.bg-danger-600 { - background-color: var(--c--theme--colors--danger-600); +.mb-auto { + margin-bottom: var(--c--globals--spacings--auto); } -.bg-danger-700 { - background-color: var(--c--theme--colors--danger-700); +.mt-auto { + margin-top: var(--c--globals--spacings--auto); } -.bg-danger-800 { - background-color: var(--c--theme--colors--danger-800); +.ml-auto { + margin-left: var(--c--globals--spacings--auto); } -.bg-danger-900 { - background-color: var(--c--theme--colors--danger-900); +.mr-auto { + margin-right: var(--c--globals--spacings--auto); } -.bg-primary-text { - background-color: var(--c--theme--colors--primary-text); +.m-bx { + margin: var(--c--globals--spacings--bx); } -.bg-success-text { - background-color: var(--c--theme--colors--success-text); +.mb-bx { + margin-bottom: var(--c--globals--spacings--bx); } -.bg-warning-text { - background-color: var(--c--theme--colors--warning-text); +.mt-bx { + margin-top: var(--c--globals--spacings--bx); } -.bg-danger-text { - background-color: var(--c--theme--colors--danger-text); +.ml-bx { + margin-left: var(--c--globals--spacings--bx); } -.bg-primary-050 { - background-color: var(--c--theme--colors--primary-050); +.mr-bx { + margin-right: var(--c--globals--spacings--bx); } -.bg-primary-150 { - background-color: var(--c--theme--colors--primary-150); +.m-full { + margin: var(--c--globals--spacings--full); } -.bg-greyscale-text { - background-color: var(--c--theme--colors--greyscale-text); +.mb-full { + margin-bottom: var(--c--globals--spacings--full); } -.bg-greyscale-050 { - background-color: var(--c--theme--colors--greyscale-050); +.mt-full { + margin-top: var(--c--globals--spacings--full); } -.bg-greyscale-250 { - background-color: var(--c--theme--colors--greyscale-250); +.ml-full { + margin-left: var(--c--globals--spacings--full); } -.bg-greyscale-350 { - background-color: var(--c--theme--colors--greyscale-350); +.mr-full { + margin-right: var(--c--globals--spacings--full); } -.bg-greyscale-750 { - background-color: var(--c--theme--colors--greyscale-750); +.m-3xs { + margin: var(--c--globals--spacings--3xs); } -.bg-greyscale-950 { - background-color: var(--c--theme--colors--greyscale-950); +.mb-3xs { + margin-bottom: var(--c--globals--spacings--3xs); } -.bg-greyscale-1000 { - background-color: var(--c--theme--colors--greyscale-1000); +.mt-3xs { + margin-top: var(--c--globals--spacings--3xs); } -.bg-danger-050 { - background-color: var(--c--theme--colors--danger-050); +.ml-3xs { + margin-left: var(--c--globals--spacings--3xs); } -.bg-blue-500 { - background-color: var(--c--theme--colors--blue-500); +.mr-3xs { + margin-right: var(--c--globals--spacings--3xs); } -.bg-brown-500 { - background-color: var(--c--theme--colors--brown-500); +.m-2xs { + margin: var(--c--globals--spacings--2xs); } -.bg-cyan-500 { - background-color: var(--c--theme--colors--cyan-500); +.mb-2xs { + margin-bottom: var(--c--globals--spacings--2xs); } -.bg-gold-500 { - background-color: var(--c--theme--colors--gold-500); +.mt-2xs { + margin-top: var(--c--globals--spacings--2xs); } -.bg-green-500 { - background-color: var(--c--theme--colors--green-500); +.ml-2xs { + margin-left: var(--c--globals--spacings--2xs); } -.bg-olive-500 { - background-color: var(--c--theme--colors--olive-500); +.mr-2xs { + margin-right: var(--c--globals--spacings--2xs); } -.bg-orange-500 { - background-color: var(--c--theme--colors--orange-500); +.p-0 { + padding: var(--c--globals--spacings--0); } -.bg-purple-500 { - background-color: var(--c--theme--colors--purple-500); +.pb-0 { + padding-bottom: var(--c--globals--spacings--0); } -.bg-red-500 { - background-color: var(--c--theme--colors--red-500); +.pt-0 { + padding-top: var(--c--globals--spacings--0); } -.bg-yellow-500 { - background-color: var(--c--theme--colors--yellow-500); +.pl-0 { + padding-left: var(--c--globals--spacings--0); } -.bg-rose-500 { - background-color: var(--c--theme--colors--rose-500); +.pr-0 { + padding-right: var(--c--globals--spacings--0); } -.bg-primary-action { - background-color: var(--c--theme--colors--primary-action); +.p-l { + padding: var(--c--globals--spacings--l); } -.bg-primary-bg { - background-color: var(--c--theme--colors--primary-bg); +.pb-l { + padding-bottom: var(--c--globals--spacings--l); } -.bg-primary-focus { - background-color: var(--c--theme--colors--primary-focus); +.pt-l { + padding-top: var(--c--globals--spacings--l); } -.bg-secondary-icon { - background-color: var(--c--theme--colors--secondary-icon); +.pl-l { + padding-left: var(--c--globals--spacings--l); } -.bg-blue-400 { - background-color: var(--c--theme--colors--blue-400); +.pr-l { + padding-right: var(--c--globals--spacings--l); } -.bg-blue-600 { - background-color: var(--c--theme--colors--blue-600); +.p-b { + padding: var(--c--globals--spacings--b); } -.bg-brown-400 { - background-color: var(--c--theme--colors--brown-400); +.pb-b { + padding-bottom: var(--c--globals--spacings--b); } -.bg-brown-600 { - background-color: var(--c--theme--colors--brown-600); +.pt-b { + padding-top: var(--c--globals--spacings--b); } -.bg-cyan-400 { - background-color: var(--c--theme--colors--cyan-400); +.pl-b { + padding-left: var(--c--globals--spacings--b); } -.bg-cyan-600 { - background-color: var(--c--theme--colors--cyan-600); +.pr-b { + padding-right: var(--c--globals--spacings--b); } -.bg-gold-400 { - background-color: var(--c--theme--colors--gold-400); +.p-m { + padding: var(--c--globals--spacings--m); } -.bg-gold-600 { - background-color: var(--c--theme--colors--gold-600); +.pb-m { + padding-bottom: var(--c--globals--spacings--m); } -.bg-green-400 { - background-color: var(--c--theme--colors--green-400); +.pt-m { + padding-top: var(--c--globals--spacings--m); } -.bg-green-600 { - background-color: var(--c--theme--colors--green-600); +.pl-m { + padding-left: var(--c--globals--spacings--m); } -.bg-olive-400 { - background-color: var(--c--theme--colors--olive-400); +.pr-m { + padding-right: var(--c--globals--spacings--m); } -.bg-olive-600 { - background-color: var(--c--theme--colors--olive-600); +.p-s { + padding: var(--c--globals--spacings--s); } -.bg-orange-400 { - background-color: var(--c--theme--colors--orange-400); +.pb-s { + padding-bottom: var(--c--globals--spacings--s); } -.bg-orange-600 { - background-color: var(--c--theme--colors--orange-600); +.pt-s { + padding-top: var(--c--globals--spacings--s); } -.bg-pink-400 { - background-color: var(--c--theme--colors--pink-400); +.pl-s { + padding-left: var(--c--globals--spacings--s); } -.bg-pink-500 { - background-color: var(--c--theme--colors--pink-500); +.pr-s { + padding-right: var(--c--globals--spacings--s); } -.bg-pink-600 { - background-color: var(--c--theme--colors--pink-600); +.p-t { + padding: var(--c--globals--spacings--t); } -.bg-purple-400 { - background-color: var(--c--theme--colors--purple-400); +.pb-t { + padding-bottom: var(--c--globals--spacings--t); } -.bg-purple-600 { - background-color: var(--c--theme--colors--purple-600); +.pt-t { + padding-top: var(--c--globals--spacings--t); } -.bg-yellow-400 { - background-color: var(--c--theme--colors--yellow-400); +.pl-t { + padding-left: var(--c--globals--spacings--t); } -.bg-yellow-600 { - background-color: var(--c--theme--colors--yellow-600); +.pr-t { + padding-right: var(--c--globals--spacings--t); } -.fw-thin { - font-weight: var(--c--theme--font--weights--thin); +.p-st { + padding: var(--c--globals--spacings--st); } -.fw-light { - font-weight: var(--c--theme--font--weights--light); +.pb-st { + padding-bottom: var(--c--globals--spacings--st); } -.fw-regular { - font-weight: var(--c--theme--font--weights--regular); +.pt-st { + padding-top: var(--c--globals--spacings--st); } -.fw-medium { - font-weight: var(--c--theme--font--weights--medium); +.pl-st { + padding-left: var(--c--globals--spacings--st); } -.fw-bold { - font-weight: var(--c--theme--font--weights--bold); +.pr-st { + padding-right: var(--c--globals--spacings--st); } -.fw-extrabold { - font-weight: var(--c--theme--font--weights--extrabold); +.p-4xs { + padding: var(--c--globals--spacings--4xs); } -.fw-black { - font-weight: var(--c--theme--font--weights--black); +.pb-4xs { + padding-bottom: var(--c--globals--spacings--4xs); } -.fs-h1 { - font-size: var(--c--theme--font--sizes--h1); - letter-spacing: var(--c--theme--font--letterspacings--h1); +.pt-4xs { + padding-top: var(--c--globals--spacings--4xs); } -.fs-h2 { - font-size: var(--c--theme--font--sizes--h2); - letter-spacing: var(--c--theme--font--letterspacings--h2); +.pl-4xs { + padding-left: var(--c--globals--spacings--4xs); } -.fs-h3 { - font-size: var(--c--theme--font--sizes--h3); - letter-spacing: var(--c--theme--font--letterspacings--h3); +.pr-4xs { + padding-right: var(--c--globals--spacings--4xs); } -.fs-h4 { - font-size: var(--c--theme--font--sizes--h4); - letter-spacing: var(--c--theme--font--letterspacings--h4); +.p-xxxs { + padding: var(--c--globals--spacings--xxxs); } -.fs-h5 { - font-size: var(--c--theme--font--sizes--h5); - letter-spacing: var(--c--theme--font--letterspacings--h5); +.pb-xxxs { + padding-bottom: var(--c--globals--spacings--xxxs); } -.fs-h6 { - font-size: var(--c--theme--font--sizes--h6); - letter-spacing: var(--c--theme--font--letterspacings--h6); +.pt-xxxs { + padding-top: var(--c--globals--spacings--xxxs); } -.fs-l { - font-size: var(--c--theme--font--sizes--l); - letter-spacing: var(--c--theme--font--letterspacings--l); +.pl-xxxs { + padding-left: var(--c--globals--spacings--xxxs); } -.fs-m { - font-size: var(--c--theme--font--sizes--m); - letter-spacing: var(--c--theme--font--letterspacings--m); +.pr-xxxs { + padding-right: var(--c--globals--spacings--xxxs); } -.fs-s { - font-size: var(--c--theme--font--sizes--s); - letter-spacing: var(--c--theme--font--letterspacings--s); +.p-xxs { + padding: var(--c--globals--spacings--xxs); } -.fs-xs { - font-size: var(--c--theme--font--sizes--xs); - letter-spacing: var(--c--theme--font--letterspacings--xs); +.pb-xxs { + padding-bottom: var(--c--globals--spacings--xxs); } -.fs-sm { - font-size: var(--c--theme--font--sizes--sm); - letter-spacing: var(--c--theme--font--letterspacings--sm); +.pt-xxs { + padding-top: var(--c--globals--spacings--xxs); } -.fs-md { - font-size: var(--c--theme--font--sizes--md); - letter-spacing: var(--c--theme--font--letterspacings--md); +.pl-xxs { + padding-left: var(--c--globals--spacings--xxs); } -.fs-lg { - font-size: var(--c--theme--font--sizes--lg); - letter-spacing: var(--c--theme--font--letterspacings--lg); +.pr-xxs { + padding-right: var(--c--globals--spacings--xxs); } -.fs-ml { - font-size: var(--c--theme--font--sizes--ml); - letter-spacing: var(--c--theme--font--letterspacings--ml); +.p-xs { + padding: var(--c--globals--spacings--xs); } -.fs-xl { - font-size: var(--c--theme--font--sizes--xl); - letter-spacing: var(--c--theme--font--letterspacings--xl); +.pb-xs { + padding-bottom: var(--c--globals--spacings--xs); } -.fs-t { - font-size: var(--c--theme--font--sizes--t); - letter-spacing: var(--c--theme--font--letterspacings--t); +.pt-xs { + padding-top: var(--c--globals--spacings--xs); } -.fs-xl-alt { - font-size: var(--c--theme--font--sizes--xl-alt); - letter-spacing: var(--c--theme--font--letterspacings--xl-alt); +.pl-xs { + padding-left: var(--c--globals--spacings--xs); } -.fs-lg-alt { - font-size: var(--c--theme--font--sizes--lg-alt); - letter-spacing: var(--c--theme--font--letterspacings--lg-alt); +.pr-xs { + padding-right: var(--c--globals--spacings--xs); } -.fs-md-alt { - font-size: var(--c--theme--font--sizes--md-alt); - letter-spacing: var(--c--theme--font--letterspacings--md-alt); +.p-sm { + padding: var(--c--globals--spacings--sm); } -.fs-sm-alt { - font-size: var(--c--theme--font--sizes--sm-alt); - letter-spacing: var(--c--theme--font--letterspacings--sm-alt); +.pb-sm { + padding-bottom: var(--c--globals--spacings--sm); } -.fs-xs-alt { - font-size: var(--c--theme--font--sizes--xs-alt); - letter-spacing: var(--c--theme--font--letterspacings--xs-alt); +.pt-sm { + padding-top: var(--c--globals--spacings--sm); } -.f-base { - font-family: var(--c--theme--font--families--base); +.pl-sm { + padding-left: var(--c--globals--spacings--sm); } -.f-accent { - font-family: var(--c--theme--font--families--accent); +.pr-sm { + padding-right: var(--c--globals--spacings--sm); } -.m-0 { - margin: var(--c--theme--spacings--0); +.p-base { + padding: var(--c--globals--spacings--base); } -.mb-0 { - margin-bottom: var(--c--theme--spacings--0); +.pb-base { + padding-bottom: var(--c--globals--spacings--base); } -.mt-0 { - margin-top: var(--c--theme--spacings--0); +.pt-base { + padding-top: var(--c--globals--spacings--base); } -.ml-0 { - margin-left: var(--c--theme--spacings--0); +.pl-base { + padding-left: var(--c--globals--spacings--base); } -.mr-0 { - margin-right: var(--c--theme--spacings--0); +.pr-base { + padding-right: var(--c--globals--spacings--base); } -.m-xl { - margin: var(--c--theme--spacings--xl); +.p-md { + padding: var(--c--globals--spacings--md); } -.mb-xl { - margin-bottom: var(--c--theme--spacings--xl); +.pb-md { + padding-bottom: var(--c--globals--spacings--md); } -.mt-xl { - margin-top: var(--c--theme--spacings--xl); +.pt-md { + padding-top: var(--c--globals--spacings--md); } -.ml-xl { - margin-left: var(--c--theme--spacings--xl); +.pl-md { + padding-left: var(--c--globals--spacings--md); } -.mr-xl { - margin-right: var(--c--theme--spacings--xl); +.pr-md { + padding-right: var(--c--globals--spacings--md); } -.m-l { - margin: var(--c--theme--spacings--l); +.p-lg { + padding: var(--c--globals--spacings--lg); } -.mb-l { - margin-bottom: var(--c--theme--spacings--l); +.pb-lg { + padding-bottom: var(--c--globals--spacings--lg); } -.mt-l { - margin-top: var(--c--theme--spacings--l); +.pt-lg { + padding-top: var(--c--globals--spacings--lg); } -.ml-l { - margin-left: var(--c--theme--spacings--l); +.pl-lg { + padding-left: var(--c--globals--spacings--lg); } -.mr-l { - margin-right: var(--c--theme--spacings--l); +.pr-lg { + padding-right: var(--c--globals--spacings--lg); } -.m-b { - margin: var(--c--theme--spacings--b); +.p-xl { + padding: var(--c--globals--spacings--xl); } -.mb-b { - margin-bottom: var(--c--theme--spacings--b); +.pb-xl { + padding-bottom: var(--c--globals--spacings--xl); } -.mt-b { - margin-top: var(--c--theme--spacings--b); +.pt-xl { + padding-top: var(--c--globals--spacings--xl); } -.ml-b { - margin-left: var(--c--theme--spacings--b); +.pl-xl { + padding-left: var(--c--globals--spacings--xl); } -.mr-b { - margin-right: var(--c--theme--spacings--b); +.pr-xl { + padding-right: var(--c--globals--spacings--xl); } -.m-s { - margin: var(--c--theme--spacings--s); +.p-xxl { + padding: var(--c--globals--spacings--xxl); } -.mb-s { - margin-bottom: var(--c--theme--spacings--s); +.pb-xxl { + padding-bottom: var(--c--globals--spacings--xxl); } -.mt-s { - margin-top: var(--c--theme--spacings--s); +.pt-xxl { + padding-top: var(--c--globals--spacings--xxl); } -.ml-s { - margin-left: var(--c--theme--spacings--s); +.pl-xxl { + padding-left: var(--c--globals--spacings--xxl); } -.mr-s { - margin-right: var(--c--theme--spacings--s); +.pr-xxl { + padding-right: var(--c--globals--spacings--xxl); } -.m-t { - margin: var(--c--theme--spacings--t); +.p-xxxl { + padding: var(--c--globals--spacings--xxxl); } -.mb-t { - margin-bottom: var(--c--theme--spacings--t); +.pb-xxxl { + padding-bottom: var(--c--globals--spacings--xxxl); } -.mt-t { - margin-top: var(--c--theme--spacings--t); +.pt-xxxl { + padding-top: var(--c--globals--spacings--xxxl); } -.ml-t { - margin-left: var(--c--theme--spacings--t); +.pl-xxxl { + padding-left: var(--c--globals--spacings--xxxl); } -.mr-t { - margin-right: var(--c--theme--spacings--t); +.pr-xxxl { + padding-right: var(--c--globals--spacings--xxxl); } -.m-st { - margin: var(--c--theme--spacings--st); +.p-4xl { + padding: var(--c--globals--spacings--4xl); } -.mb-st { - margin-bottom: var(--c--theme--spacings--st); +.pb-4xl { + padding-bottom: var(--c--globals--spacings--4xl); } -.mt-st { - margin-top: var(--c--theme--spacings--st); +.pt-4xl { + padding-top: var(--c--globals--spacings--4xl); } -.ml-st { - margin-left: var(--c--theme--spacings--st); +.pl-4xl { + padding-left: var(--c--globals--spacings--4xl); } -.mr-st { - margin-right: var(--c--theme--spacings--st); +.pr-4xl { + padding-right: var(--c--globals--spacings--4xl); } -.m-none { - margin: var(--c--theme--spacings--none); +.p-5xl { + padding: var(--c--globals--spacings--5xl); } -.mb-none { - margin-bottom: var(--c--theme--spacings--none); +.pb-5xl { + padding-bottom: var(--c--globals--spacings--5xl); } -.mt-none { - margin-top: var(--c--theme--spacings--none); +.pt-5xl { + padding-top: var(--c--globals--spacings--5xl); } -.ml-none { - margin-left: var(--c--theme--spacings--none); +.pl-5xl { + padding-left: var(--c--globals--spacings--5xl); } -.mr-none { - margin-right: var(--c--theme--spacings--none); +.pr-5xl { + padding-right: var(--c--globals--spacings--5xl); } -.m-auto { - margin: var(--c--theme--spacings--auto); +.p-6xl { + padding: var(--c--globals--spacings--6xl); } -.mb-auto { - margin-bottom: var(--c--theme--spacings--auto); +.pb-6xl { + padding-bottom: var(--c--globals--spacings--6xl); } -.mt-auto { - margin-top: var(--c--theme--spacings--auto); +.pt-6xl { + padding-top: var(--c--globals--spacings--6xl); } -.ml-auto { - margin-left: var(--c--theme--spacings--auto); +.pl-6xl { + padding-left: var(--c--globals--spacings--6xl); } -.mr-auto { - margin-right: var(--c--theme--spacings--auto); +.pr-6xl { + padding-right: var(--c--globals--spacings--6xl); } -.m-bx { - margin: var(--c--theme--spacings--bx); +.p-7xl { + padding: var(--c--globals--spacings--7xl); } -.mb-bx { - margin-bottom: var(--c--theme--spacings--bx); +.pb-7xl { + padding-bottom: var(--c--globals--spacings--7xl); } -.mt-bx { - margin-top: var(--c--theme--spacings--bx); +.pt-7xl { + padding-top: var(--c--globals--spacings--7xl); } -.ml-bx { - margin-left: var(--c--theme--spacings--bx); +.pl-7xl { + padding-left: var(--c--globals--spacings--7xl); } -.mr-bx { - margin-right: var(--c--theme--spacings--bx); +.pr-7xl { + padding-right: var(--c--globals--spacings--7xl); } -.m-full { - margin: var(--c--theme--spacings--full); +.p-none { + padding: var(--c--globals--spacings--none); } -.mb-full { - margin-bottom: var(--c--theme--spacings--full); +.pb-none { + padding-bottom: var(--c--globals--spacings--none); } -.mt-full { - margin-top: var(--c--theme--spacings--full); +.pt-none { + padding-top: var(--c--globals--spacings--none); } -.ml-full { - margin-left: var(--c--theme--spacings--full); +.pl-none { + padding-left: var(--c--globals--spacings--none); } -.mr-full { - margin-right: var(--c--theme--spacings--full); +.pr-none { + padding-right: var(--c--globals--spacings--none); } -.m-4xs { - margin: var(--c--theme--spacings--4xs); +.p-auto { + padding: var(--c--globals--spacings--auto); } -.mb-4xs { - margin-bottom: var(--c--theme--spacings--4xs); +.pb-auto { + padding-bottom: var(--c--globals--spacings--auto); } -.mt-4xs { - margin-top: var(--c--theme--spacings--4xs); +.pt-auto { + padding-top: var(--c--globals--spacings--auto); } -.ml-4xs { - margin-left: var(--c--theme--spacings--4xs); +.pl-auto { + padding-left: var(--c--globals--spacings--auto); } -.mr-4xs { - margin-right: var(--c--theme--spacings--4xs); +.pr-auto { + padding-right: var(--c--globals--spacings--auto); } -.m-3xs { - margin: var(--c--theme--spacings--3xs); +.p-bx { + padding: var(--c--globals--spacings--bx); } -.mb-3xs { - margin-bottom: var(--c--theme--spacings--3xs); +.pb-bx { + padding-bottom: var(--c--globals--spacings--bx); } -.mt-3xs { - margin-top: var(--c--theme--spacings--3xs); +.pt-bx { + padding-top: var(--c--globals--spacings--bx); } -.ml-3xs { - margin-left: var(--c--theme--spacings--3xs); +.pl-bx { + padding-left: var(--c--globals--spacings--bx); } -.mr-3xs { - margin-right: var(--c--theme--spacings--3xs); +.pr-bx { + padding-right: var(--c--globals--spacings--bx); } -.m-2xs { - margin: var(--c--theme--spacings--2xs); +.p-full { + padding: var(--c--globals--spacings--full); } -.mb-2xs { - margin-bottom: var(--c--theme--spacings--2xs); +.pb-full { + padding-bottom: var(--c--globals--spacings--full); } -.mt-2xs { - margin-top: var(--c--theme--spacings--2xs); +.pt-full { + padding-top: var(--c--globals--spacings--full); } -.ml-2xs { - margin-left: var(--c--theme--spacings--2xs); +.pl-full { + padding-left: var(--c--globals--spacings--full); } -.mr-2xs { - margin-right: var(--c--theme--spacings--2xs); +.pr-full { + padding-right: var(--c--globals--spacings--full); } -.m-xs { - margin: var(--c--theme--spacings--xs); +.p-3xs { + padding: var(--c--globals--spacings--3xs); } -.mb-xs { - margin-bottom: var(--c--theme--spacings--xs); +.pb-3xs { + padding-bottom: var(--c--globals--spacings--3xs); } -.mt-xs { - margin-top: var(--c--theme--spacings--xs); +.pt-3xs { + padding-top: var(--c--globals--spacings--3xs); } -.ml-xs { - margin-left: var(--c--theme--spacings--xs); +.pl-3xs { + padding-left: var(--c--globals--spacings--3xs); } -.mr-xs { - margin-right: var(--c--theme--spacings--xs); +.pr-3xs { + padding-right: var(--c--globals--spacings--3xs); } -.m-sm { - margin: var(--c--theme--spacings--sm); +.p-2xs { + padding: var(--c--globals--spacings--2xs); } -.mb-sm { - margin-bottom: var(--c--theme--spacings--sm); +.pb-2xs { + padding-bottom: var(--c--globals--spacings--2xs); } -.mt-sm { - margin-top: var(--c--theme--spacings--sm); +.pt-2xs { + padding-top: var(--c--globals--spacings--2xs); } -.ml-sm { - margin-left: var(--c--theme--spacings--sm); +.pl-2xs { + padding-left: var(--c--globals--spacings--2xs); } -.mr-sm { - margin-right: var(--c--theme--spacings--sm); +.pr-2xs { + padding-right: var(--c--globals--spacings--2xs); } -.m-base { - margin: var(--c--theme--spacings--base); +.border-clr-surface-primary { + border-color: var(--c--contextuals--border--surface--primary); } -.mb-base { - margin-bottom: var(--c--theme--spacings--base); +.border-thin-surface-primary { + border: 1px solid var(--c--contextuals--border--surface--primary); } -.mt-base { - margin-top: var(--c--theme--spacings--base); +.border-clr-semantic-brand-primary { + border-color: var(--c--contextuals--border--semantic--brand--primary); } -.ml-base { - margin-left: var(--c--theme--spacings--base); +.border-thin-semantic-brand-primary { + border: 1px solid var(--c--contextuals--border--semantic--brand--primary); } -.mr-base { - margin-right: var(--c--theme--spacings--base); +.border-clr-semantic-brand-secondary { + border-color: var(--c--contextuals--border--semantic--brand--secondary); } -.m-md { - margin: var(--c--theme--spacings--md); +.border-thin-semantic-brand-secondary { + border: 1px solid var(--c--contextuals--border--semantic--brand--secondary); } -.mb-md { - margin-bottom: var(--c--theme--spacings--md); +.border-clr-semantic-brand-tertiary { + border-color: var(--c--contextuals--border--semantic--brand--tertiary); } -.mt-md { - margin-top: var(--c--theme--spacings--md); +.border-thin-semantic-brand-tertiary { + border: 1px solid var(--c--contextuals--border--semantic--brand--tertiary); } -.ml-md { - margin-left: var(--c--theme--spacings--md); +.border-clr-semantic-contextual-primary { + border-color: var(--c--contextuals--border--semantic--contextual--primary); } -.mr-md { - margin-right: var(--c--theme--spacings--md); +.border-thin-semantic-contextual-primary { + border: 1px solid var(--c--contextuals--border--semantic--contextual--primary); } -.m-lg { - margin: var(--c--theme--spacings--lg); +.border-clr-semantic-neutral-primary { + border-color: var(--c--contextuals--border--semantic--neutral--primary); } -.mb-lg { - margin-bottom: var(--c--theme--spacings--lg); +.border-thin-semantic-neutral-primary { + border: 1px solid var(--c--contextuals--border--semantic--neutral--primary); } -.mt-lg { - margin-top: var(--c--theme--spacings--lg); +.border-clr-semantic-neutral-secondary { + border-color: var(--c--contextuals--border--semantic--neutral--secondary); } -.ml-lg { - margin-left: var(--c--theme--spacings--lg); +.border-thin-semantic-neutral-secondary { + border: 1px solid var(--c--contextuals--border--semantic--neutral--secondary); } -.mr-lg { - margin-right: var(--c--theme--spacings--lg); +.border-clr-semantic-neutral-tertiary { + border-color: var(--c--contextuals--border--semantic--neutral--tertiary); } -.m-xxl { - margin: var(--c--theme--spacings--xxl); +.border-thin-semantic-neutral-tertiary { + border: 1px solid var(--c--contextuals--border--semantic--neutral--tertiary); } -.mb-xxl { - margin-bottom: var(--c--theme--spacings--xxl); +.border-clr-semantic-info-primary { + border-color: var(--c--contextuals--border--semantic--info--primary); } -.mt-xxl { - margin-top: var(--c--theme--spacings--xxl); +.border-thin-semantic-info-primary { + border: 1px solid var(--c--contextuals--border--semantic--info--primary); } -.ml-xxl { - margin-left: var(--c--theme--spacings--xxl); +.border-clr-semantic-info-secondary { + border-color: var(--c--contextuals--border--semantic--info--secondary); } -.mr-xxl { - margin-right: var(--c--theme--spacings--xxl); +.border-thin-semantic-info-secondary { + border: 1px solid var(--c--contextuals--border--semantic--info--secondary); } -.m-xxxl { - margin: var(--c--theme--spacings--xxxl); +.border-clr-semantic-info-tertiary { + border-color: var(--c--contextuals--border--semantic--info--tertiary); } -.mb-xxxl { - margin-bottom: var(--c--theme--spacings--xxxl); +.border-thin-semantic-info-tertiary { + border: 1px solid var(--c--contextuals--border--semantic--info--tertiary); } -.mt-xxxl { - margin-top: var(--c--theme--spacings--xxxl); +.border-clr-semantic-success-primary { + border-color: var(--c--contextuals--border--semantic--success--primary); } -.ml-xxxl { - margin-left: var(--c--theme--spacings--xxxl); +.border-thin-semantic-success-primary { + border: 1px solid var(--c--contextuals--border--semantic--success--primary); } -.mr-xxxl { - margin-right: var(--c--theme--spacings--xxxl); +.border-clr-semantic-success-secondary { + border-color: var(--c--contextuals--border--semantic--success--secondary); } -.m-4xl { - margin: var(--c--theme--spacings--4xl); +.border-thin-semantic-success-secondary { + border: 1px solid var(--c--contextuals--border--semantic--success--secondary); } -.mb-4xl { - margin-bottom: var(--c--theme--spacings--4xl); +.border-clr-semantic-success-tertiary { + border-color: var(--c--contextuals--border--semantic--success--tertiary); } -.mt-4xl { - margin-top: var(--c--theme--spacings--4xl); +.border-thin-semantic-success-tertiary { + border: 1px solid var(--c--contextuals--border--semantic--success--tertiary); } -.ml-4xl { - margin-left: var(--c--theme--spacings--4xl); +.border-clr-semantic-warning-primary { + border-color: var(--c--contextuals--border--semantic--warning--primary); } -.mr-4xl { - margin-right: var(--c--theme--spacings--4xl); +.border-thin-semantic-warning-primary { + border: 1px solid var(--c--contextuals--border--semantic--warning--primary); } -.m-5xl { - margin: var(--c--theme--spacings--5xl); +.border-clr-semantic-warning-secondary { + border-color: var(--c--contextuals--border--semantic--warning--secondary); } -.mb-5xl { - margin-bottom: var(--c--theme--spacings--5xl); +.border-thin-semantic-warning-secondary { + border: 1px solid var(--c--contextuals--border--semantic--warning--secondary); } -.mt-5xl { - margin-top: var(--c--theme--spacings--5xl); +.border-clr-semantic-warning-tertiary { + border-color: var(--c--contextuals--border--semantic--warning--tertiary); } -.ml-5xl { - margin-left: var(--c--theme--spacings--5xl); +.border-thin-semantic-warning-tertiary { + border: 1px solid var(--c--contextuals--border--semantic--warning--tertiary); } -.mr-5xl { - margin-right: var(--c--theme--spacings--5xl); +.border-clr-semantic-error-primary { + border-color: var(--c--contextuals--border--semantic--error--primary); } -.m-6xl { - margin: var(--c--theme--spacings--6xl); +.border-thin-semantic-error-primary { + border: 1px solid var(--c--contextuals--border--semantic--error--primary); } -.mb-6xl { - margin-bottom: var(--c--theme--spacings--6xl); +.border-clr-semantic-error-secondary { + border-color: var(--c--contextuals--border--semantic--error--secondary); } -.mt-6xl { - margin-top: var(--c--theme--spacings--6xl); +.border-thin-semantic-error-secondary { + border: 1px solid var(--c--contextuals--border--semantic--error--secondary); } -.ml-6xl { - margin-left: var(--c--theme--spacings--6xl); +.border-clr-semantic-error-tertiary { + border-color: var(--c--contextuals--border--semantic--error--tertiary); } -.mr-6xl { - margin-right: var(--c--theme--spacings--6xl); +.border-thin-semantic-error-tertiary { + border: 1px solid var(--c--contextuals--border--semantic--error--tertiary); } -.m-7xl { - margin: var(--c--theme--spacings--7xl); +.border-clr-semantic-disabled-primary { + border-color: var(--c--contextuals--border--semantic--disabled--primary); } -.mb-7xl { - margin-bottom: var(--c--theme--spacings--7xl); +.border-thin-semantic-disabled-primary { + border: 1px solid var(--c--contextuals--border--semantic--disabled--primary); } -.mt-7xl { - margin-top: var(--c--theme--spacings--7xl); +.border-clr-palette-brand-primary { + border-color: var(--c--contextuals--border--palette--brand--primary); } -.ml-7xl { - margin-left: var(--c--theme--spacings--7xl); +.border-thin-palette-brand-primary { + border: 1px solid var(--c--contextuals--border--palette--brand--primary); } -.mr-7xl { - margin-right: var(--c--theme--spacings--7xl); +.border-clr-palette-brand-secondary { + border-color: var(--c--contextuals--border--palette--brand--secondary); } -.p-0 { - padding: var(--c--theme--spacings--0); +.border-thin-palette-brand-secondary { + border: 1px solid var(--c--contextuals--border--palette--brand--secondary); } -.pb-0 { - padding-bottom: var(--c--theme--spacings--0); +.border-clr-palette-brand-tertiary { + border-color: var(--c--contextuals--border--palette--brand--tertiary); } -.pt-0 { - padding-top: var(--c--theme--spacings--0); +.border-thin-palette-brand-tertiary { + border: 1px solid var(--c--contextuals--border--palette--brand--tertiary); } -.pl-0 { - padding-left: var(--c--theme--spacings--0); +.border-clr-palette-red-primary { + border-color: var(--c--contextuals--border--palette--red--primary); } -.pr-0 { - padding-right: var(--c--theme--spacings--0); +.border-thin-palette-red-primary { + border: 1px solid var(--c--contextuals--border--palette--red--primary); } -.p-xl { - padding: var(--c--theme--spacings--xl); +.border-clr-palette-red-secondary { + border-color: var(--c--contextuals--border--palette--red--secondary); } -.pb-xl { - padding-bottom: var(--c--theme--spacings--xl); +.border-thin-palette-red-secondary { + border: 1px solid var(--c--contextuals--border--palette--red--secondary); } -.pt-xl { - padding-top: var(--c--theme--spacings--xl); +.border-clr-palette-red-tertiary { + border-color: var(--c--contextuals--border--palette--red--tertiary); } -.pl-xl { - padding-left: var(--c--theme--spacings--xl); +.border-thin-palette-red-tertiary { + border: 1px solid var(--c--contextuals--border--palette--red--tertiary); } -.pr-xl { - padding-right: var(--c--theme--spacings--xl); +.border-clr-palette-orange-primary { + border-color: var(--c--contextuals--border--palette--orange--primary); } -.p-l { - padding: var(--c--theme--spacings--l); +.border-thin-palette-orange-primary { + border: 1px solid var(--c--contextuals--border--palette--orange--primary); } -.pb-l { - padding-bottom: var(--c--theme--spacings--l); +.border-clr-palette-orange-secondary { + border-color: var(--c--contextuals--border--palette--orange--secondary); } -.pt-l { - padding-top: var(--c--theme--spacings--l); +.border-thin-palette-orange-secondary { + border: 1px solid var(--c--contextuals--border--palette--orange--secondary); } -.pl-l { - padding-left: var(--c--theme--spacings--l); +.border-clr-palette-orange-tertiary { + border-color: var(--c--contextuals--border--palette--orange--tertiary); } -.pr-l { - padding-right: var(--c--theme--spacings--l); +.border-thin-palette-orange-tertiary { + border: 1px solid var(--c--contextuals--border--palette--orange--tertiary); } -.p-b { - padding: var(--c--theme--spacings--b); +.border-clr-palette-brown-primary { + border-color: var(--c--contextuals--border--palette--brown--primary); } -.pb-b { - padding-bottom: var(--c--theme--spacings--b); +.border-thin-palette-brown-primary { + border: 1px solid var(--c--contextuals--border--palette--brown--primary); } -.pt-b { - padding-top: var(--c--theme--spacings--b); +.border-clr-palette-brown-secondary { + border-color: var(--c--contextuals--border--palette--brown--secondary); } -.pl-b { - padding-left: var(--c--theme--spacings--b); +.border-thin-palette-brown-secondary { + border: 1px solid var(--c--contextuals--border--palette--brown--secondary); } -.pr-b { - padding-right: var(--c--theme--spacings--b); +.border-clr-palette-brown-tertiary { + border-color: var(--c--contextuals--border--palette--brown--tertiary); } -.p-s { - padding: var(--c--theme--spacings--s); +.border-thin-palette-brown-tertiary { + border: 1px solid var(--c--contextuals--border--palette--brown--tertiary); } -.pb-s { - padding-bottom: var(--c--theme--spacings--s); +.border-clr-palette-yellow-primary { + border-color: var(--c--contextuals--border--palette--yellow--primary); } -.pt-s { - padding-top: var(--c--theme--spacings--s); +.border-thin-palette-yellow-primary { + border: 1px solid var(--c--contextuals--border--palette--yellow--primary); } -.pl-s { - padding-left: var(--c--theme--spacings--s); +.border-clr-palette-yellow-secondary { + border-color: var(--c--contextuals--border--palette--yellow--secondary); } -.pr-s { - padding-right: var(--c--theme--spacings--s); +.border-thin-palette-yellow-secondary { + border: 1px solid var(--c--contextuals--border--palette--yellow--secondary); } -.p-t { - padding: var(--c--theme--spacings--t); +.border-clr-palette-yellow-tertiary { + border-color: var(--c--contextuals--border--palette--yellow--tertiary); } -.pb-t { - padding-bottom: var(--c--theme--spacings--t); +.border-thin-palette-yellow-tertiary { + border: 1px solid var(--c--contextuals--border--palette--yellow--tertiary); } -.pt-t { - padding-top: var(--c--theme--spacings--t); +.border-clr-palette-green-primary { + border-color: var(--c--contextuals--border--palette--green--primary); } -.pl-t { - padding-left: var(--c--theme--spacings--t); +.border-thin-palette-green-primary { + border: 1px solid var(--c--contextuals--border--palette--green--primary); } -.pr-t { - padding-right: var(--c--theme--spacings--t); +.border-clr-palette-green-secondary { + border-color: var(--c--contextuals--border--palette--green--secondary); } -.p-st { - padding: var(--c--theme--spacings--st); +.border-thin-palette-green-secondary { + border: 1px solid var(--c--contextuals--border--palette--green--secondary); } -.pb-st { - padding-bottom: var(--c--theme--spacings--st); +.border-clr-palette-green-tertiary { + border-color: var(--c--contextuals--border--palette--green--tertiary); } -.pt-st { - padding-top: var(--c--theme--spacings--st); +.border-thin-palette-green-tertiary { + border: 1px solid var(--c--contextuals--border--palette--green--tertiary); } -.pl-st { - padding-left: var(--c--theme--spacings--st); +.border-clr-palette-blue-1-primary { + border-color: var(--c--contextuals--border--palette--blue-1--primary); } -.pr-st { - padding-right: var(--c--theme--spacings--st); +.border-thin-palette-blue-1-primary { + border: 1px solid var(--c--contextuals--border--palette--blue-1--primary); } -.p-none { - padding: var(--c--theme--spacings--none); +.border-clr-palette-blue-1-secondary { + border-color: var(--c--contextuals--border--palette--blue-1--secondary); } -.pb-none { - padding-bottom: var(--c--theme--spacings--none); +.border-thin-palette-blue-1-secondary { + border: 1px solid var(--c--contextuals--border--palette--blue-1--secondary); } -.pt-none { - padding-top: var(--c--theme--spacings--none); +.border-clr-palette-blue-1-tertiary { + border-color: var(--c--contextuals--border--palette--blue-1--tertiary); } -.pl-none { - padding-left: var(--c--theme--spacings--none); +.border-thin-palette-blue-1-tertiary { + border: 1px solid var(--c--contextuals--border--palette--blue-1--tertiary); } -.pr-none { - padding-right: var(--c--theme--spacings--none); +.border-clr-palette-blue-2-primary { + border-color: var(--c--contextuals--border--palette--blue-2--primary); } -.p-auto { - padding: var(--c--theme--spacings--auto); +.border-thin-palette-blue-2-primary { + border: 1px solid var(--c--contextuals--border--palette--blue-2--primary); } -.pb-auto { - padding-bottom: var(--c--theme--spacings--auto); +.border-clr-palette-blue-2-secondary { + border-color: var(--c--contextuals--border--palette--blue-2--secondary); } -.pt-auto { - padding-top: var(--c--theme--spacings--auto); +.border-thin-palette-blue-2-secondary { + border: 1px solid var(--c--contextuals--border--palette--blue-2--secondary); } -.pl-auto { - padding-left: var(--c--theme--spacings--auto); +.border-clr-palette-blue-2-tertiary { + border-color: var(--c--contextuals--border--palette--blue-2--tertiary); } -.pr-auto { - padding-right: var(--c--theme--spacings--auto); +.border-thin-palette-blue-2-tertiary { + border: 1px solid var(--c--contextuals--border--palette--blue-2--tertiary); } -.p-bx { - padding: var(--c--theme--spacings--bx); +.border-clr-palette-purple-primary { + border-color: var(--c--contextuals--border--palette--purple--primary); } -.pb-bx { - padding-bottom: var(--c--theme--spacings--bx); +.border-thin-palette-purple-primary { + border: 1px solid var(--c--contextuals--border--palette--purple--primary); } -.pt-bx { - padding-top: var(--c--theme--spacings--bx); +.border-clr-palette-purple-secondary { + border-color: var(--c--contextuals--border--palette--purple--secondary); } -.pl-bx { - padding-left: var(--c--theme--spacings--bx); +.border-thin-palette-purple-secondary { + border: 1px solid var(--c--contextuals--border--palette--purple--secondary); } -.pr-bx { - padding-right: var(--c--theme--spacings--bx); +.border-clr-palette-purple-tertiary { + border-color: var(--c--contextuals--border--palette--purple--tertiary); } -.p-full { - padding: var(--c--theme--spacings--full); +.border-thin-palette-purple-tertiary { + border: 1px solid var(--c--contextuals--border--palette--purple--tertiary); } -.pb-full { - padding-bottom: var(--c--theme--spacings--full); +.border-clr-palette-pink-primary { + border-color: var(--c--contextuals--border--palette--pink--primary); } -.pt-full { - padding-top: var(--c--theme--spacings--full); +.border-thin-palette-pink-primary { + border: 1px solid var(--c--contextuals--border--palette--pink--primary); } -.pl-full { - padding-left: var(--c--theme--spacings--full); +.border-clr-palette-pink-secondary { + border-color: var(--c--contextuals--border--palette--pink--secondary); } -.pr-full { - padding-right: var(--c--theme--spacings--full); +.border-thin-palette-pink-secondary { + border: 1px solid var(--c--contextuals--border--palette--pink--secondary); } -.p-4xs { - padding: var(--c--theme--spacings--4xs); +.border-clr-palette-pink-tertiary { + border-color: var(--c--contextuals--border--palette--pink--tertiary); } -.pb-4xs { - padding-bottom: var(--c--theme--spacings--4xs); +.border-thin-palette-pink-tertiary { + border: 1px solid var(--c--contextuals--border--palette--pink--tertiary); } -.pt-4xs { - padding-top: var(--c--theme--spacings--4xs); +.border-clr-palette-gray-primary { + border-color: var(--c--contextuals--border--palette--gray--primary); } -.pl-4xs { - padding-left: var(--c--theme--spacings--4xs); +.border-thin-palette-gray-primary { + border: 1px solid var(--c--contextuals--border--palette--gray--primary); } -.pr-4xs { - padding-right: var(--c--theme--spacings--4xs); +.border-clr-palette-gray-secondary { + border-color: var(--c--contextuals--border--palette--gray--secondary); } -.p-3xs { - padding: var(--c--theme--spacings--3xs); +.border-thin-palette-gray-secondary { + border: 1px solid var(--c--contextuals--border--palette--gray--secondary); } -.pb-3xs { - padding-bottom: var(--c--theme--spacings--3xs); +.border-clr-palette-gray-tertiary { + border-color: var(--c--contextuals--border--palette--gray--tertiary); } -.pt-3xs { - padding-top: var(--c--theme--spacings--3xs); +.border-thin-palette-gray-tertiary { + border: 1px solid var(--c--contextuals--border--palette--gray--tertiary); } -.pl-3xs { - padding-left: var(--c--theme--spacings--3xs); +.clr-content-logo1 { + color: var(--c--contextuals--content--logo1); } -.pr-3xs { - padding-right: var(--c--theme--spacings--3xs); +.clr-content-logo2 { + color: var(--c--contextuals--content--logo2); } -.p-2xs { - padding: var(--c--theme--spacings--2xs); +.clr-content-semantic-brand-primary { + color: var(--c--contextuals--content--semantic--brand--primary); } -.pb-2xs { - padding-bottom: var(--c--theme--spacings--2xs); +.clr-content-semantic-brand-secondary { + color: var(--c--contextuals--content--semantic--brand--secondary); } -.pt-2xs { - padding-top: var(--c--theme--spacings--2xs); +.clr-content-semantic-brand-tertiary { + color: var(--c--contextuals--content--semantic--brand--tertiary); } -.pl-2xs { - padding-left: var(--c--theme--spacings--2xs); +.clr-content-semantic-brand-on-brand { + color: var(--c--contextuals--content--semantic--brand--on-brand); } -.pr-2xs { - padding-right: var(--c--theme--spacings--2xs); +.clr-content-semantic-neutral-primary { + color: var(--c--contextuals--content--semantic--neutral--primary); } -.p-xs { - padding: var(--c--theme--spacings--xs); +.clr-content-semantic-neutral-secondary { + color: var(--c--contextuals--content--semantic--neutral--secondary); } -.pb-xs { - padding-bottom: var(--c--theme--spacings--xs); +.clr-content-semantic-neutral-tertiary { + color: var(--c--contextuals--content--semantic--neutral--tertiary); } -.pt-xs { - padding-top: var(--c--theme--spacings--xs); +.clr-content-semantic-neutral-on-neutral { + color: var(--c--contextuals--content--semantic--neutral--on-neutral); } -.pl-xs { - padding-left: var(--c--theme--spacings--xs); +.clr-content-semantic-contextual-primary { + color: var(--c--contextuals--content--semantic--contextual--primary); } -.pr-xs { - padding-right: var(--c--theme--spacings--xs); +.clr-content-semantic-info-primary { + color: var(--c--contextuals--content--semantic--info--primary); } -.p-sm { - padding: var(--c--theme--spacings--sm); +.clr-content-semantic-info-secondary { + color: var(--c--contextuals--content--semantic--info--secondary); } -.pb-sm { - padding-bottom: var(--c--theme--spacings--sm); +.clr-content-semantic-info-tertiary { + color: var(--c--contextuals--content--semantic--info--tertiary); } -.pt-sm { - padding-top: var(--c--theme--spacings--sm); +.clr-content-semantic-info-on-info { + color: var(--c--contextuals--content--semantic--info--on-info); } -.pl-sm { - padding-left: var(--c--theme--spacings--sm); +.clr-content-semantic-success-primary { + color: var(--c--contextuals--content--semantic--success--primary); } -.pr-sm { - padding-right: var(--c--theme--spacings--sm); +.clr-content-semantic-success-secondary { + color: var(--c--contextuals--content--semantic--success--secondary); } -.p-base { - padding: var(--c--theme--spacings--base); +.clr-content-semantic-success-tertiary { + color: var(--c--contextuals--content--semantic--success--tertiary); } -.pb-base { - padding-bottom: var(--c--theme--spacings--base); +.clr-content-semantic-success-on-success { + color: var(--c--contextuals--content--semantic--success--on-success); } -.pt-base { - padding-top: var(--c--theme--spacings--base); +.clr-content-semantic-warning-primary { + color: var(--c--contextuals--content--semantic--warning--primary); } -.pl-base { - padding-left: var(--c--theme--spacings--base); +.clr-content-semantic-warning-secondary { + color: var(--c--contextuals--content--semantic--warning--secondary); } -.pr-base { - padding-right: var(--c--theme--spacings--base); +.clr-content-semantic-warning-tertiary { + color: var(--c--contextuals--content--semantic--warning--tertiary); } -.p-md { - padding: var(--c--theme--spacings--md); +.clr-content-semantic-warning-on-warning { + color: var(--c--contextuals--content--semantic--warning--on-warning); } -.pb-md { - padding-bottom: var(--c--theme--spacings--md); +.clr-content-semantic-error-primary { + color: var(--c--contextuals--content--semantic--error--primary); } -.pt-md { - padding-top: var(--c--theme--spacings--md); +.clr-content-semantic-error-secondary { + color: var(--c--contextuals--content--semantic--error--secondary); } -.pl-md { - padding-left: var(--c--theme--spacings--md); +.clr-content-semantic-error-tertiary { + color: var(--c--contextuals--content--semantic--error--tertiary); } -.pr-md { - padding-right: var(--c--theme--spacings--md); +.clr-content-semantic-error-on-error { + color: var(--c--contextuals--content--semantic--error--on-error); } -.p-lg { - padding: var(--c--theme--spacings--lg); +.clr-content-semantic-disabled-primary { + color: var(--c--contextuals--content--semantic--disabled--primary); } -.pb-lg { - padding-bottom: var(--c--theme--spacings--lg); +.clr-content-semantic-disabled-secondary { + color: var(--c--contextuals--content--semantic--disabled--secondary); } -.pt-lg { - padding-top: var(--c--theme--spacings--lg); +.clr-content-palette-brand-primary { + color: var(--c--contextuals--content--palette--brand--primary); } -.pl-lg { - padding-left: var(--c--theme--spacings--lg); +.clr-content-palette-brand-secondary { + color: var(--c--contextuals--content--palette--brand--secondary); } -.pr-lg { - padding-right: var(--c--theme--spacings--lg); +.clr-content-palette-brand-tertiary { + color: var(--c--contextuals--content--palette--brand--tertiary); } -.p-xxl { - padding: var(--c--theme--spacings--xxl); +.clr-content-palette-red-primary { + color: var(--c--contextuals--content--palette--red--primary); } -.pb-xxl { - padding-bottom: var(--c--theme--spacings--xxl); +.clr-content-palette-red-secondary { + color: var(--c--contextuals--content--palette--red--secondary); } -.pt-xxl { - padding-top: var(--c--theme--spacings--xxl); +.clr-content-palette-red-tertiary { + color: var(--c--contextuals--content--palette--red--tertiary); } -.pl-xxl { - padding-left: var(--c--theme--spacings--xxl); +.clr-content-palette-orange-primary { + color: var(--c--contextuals--content--palette--orange--primary); } -.pr-xxl { - padding-right: var(--c--theme--spacings--xxl); +.clr-content-palette-orange-secondary { + color: var(--c--contextuals--content--palette--orange--secondary); } -.p-xxxl { - padding: var(--c--theme--spacings--xxxl); +.clr-content-palette-orange-tertiary { + color: var(--c--contextuals--content--palette--orange--tertiary); } -.pb-xxxl { - padding-bottom: var(--c--theme--spacings--xxxl); +.clr-content-palette-brown-primary { + color: var(--c--contextuals--content--palette--brown--primary); } -.pt-xxxl { - padding-top: var(--c--theme--spacings--xxxl); +.clr-content-palette-brown-secondary { + color: var(--c--contextuals--content--palette--brown--secondary); } -.pl-xxxl { - padding-left: var(--c--theme--spacings--xxxl); +.clr-content-palette-brown-tertiary { + color: var(--c--contextuals--content--palette--brown--tertiary); } -.pr-xxxl { - padding-right: var(--c--theme--spacings--xxxl); +.clr-content-palette-yellow-primary { + color: var(--c--contextuals--content--palette--yellow--primary); } -.p-4xl { - padding: var(--c--theme--spacings--4xl); +.clr-content-palette-yellow-secondary { + color: var(--c--contextuals--content--palette--yellow--secondary); } -.pb-4xl { - padding-bottom: var(--c--theme--spacings--4xl); +.clr-content-palette-yellow-tertiary { + color: var(--c--contextuals--content--palette--yellow--tertiary); } -.pt-4xl { - padding-top: var(--c--theme--spacings--4xl); +.clr-content-palette-green-primary { + color: var(--c--contextuals--content--palette--green--primary); } -.pl-4xl { - padding-left: var(--c--theme--spacings--4xl); +.clr-content-palette-green-secondary { + color: var(--c--contextuals--content--palette--green--secondary); } -.pr-4xl { - padding-right: var(--c--theme--spacings--4xl); +.clr-content-palette-green-tertiary { + color: var(--c--contextuals--content--palette--green--tertiary); } -.p-5xl { - padding: var(--c--theme--spacings--5xl); +.clr-content-palette-blue-1-primary { + color: var(--c--contextuals--content--palette--blue-1--primary); } -.pb-5xl { - padding-bottom: var(--c--theme--spacings--5xl); +.clr-content-palette-blue-1-secondary { + color: var(--c--contextuals--content--palette--blue-1--secondary); } -.pt-5xl { - padding-top: var(--c--theme--spacings--5xl); +.clr-content-palette-blue-1-tertiary { + color: var(--c--contextuals--content--palette--blue-1--tertiary); } -.pl-5xl { - padding-left: var(--c--theme--spacings--5xl); +.clr-content-palette-blue-2-primary { + color: var(--c--contextuals--content--palette--blue-2--primary); } -.pr-5xl { - padding-right: var(--c--theme--spacings--5xl); +.clr-content-palette-blue-2-secondary { + color: var(--c--contextuals--content--palette--blue-2--secondary); } -.p-6xl { - padding: var(--c--theme--spacings--6xl); +.clr-content-palette-blue-2-tertiary { + color: var(--c--contextuals--content--palette--blue-2--tertiary); } -.pb-6xl { - padding-bottom: var(--c--theme--spacings--6xl); +.clr-content-palette-purple-primary { + color: var(--c--contextuals--content--palette--purple--primary); } -.pt-6xl { - padding-top: var(--c--theme--spacings--6xl); +.clr-content-palette-purple-secondary { + color: var(--c--contextuals--content--palette--purple--secondary); } -.pl-6xl { - padding-left: var(--c--theme--spacings--6xl); +.clr-content-palette-purple-tertiary { + color: var(--c--contextuals--content--palette--purple--tertiary); } -.pr-6xl { - padding-right: var(--c--theme--spacings--6xl); +.clr-content-palette-pink-primary { + color: var(--c--contextuals--content--palette--pink--primary); } -.p-7xl { - padding: var(--c--theme--spacings--7xl); +.clr-content-palette-pink-secondary { + color: var(--c--contextuals--content--palette--pink--secondary); } -.pb-7xl { - padding-bottom: var(--c--theme--spacings--7xl); +.clr-content-palette-pink-tertiary { + color: var(--c--contextuals--content--palette--pink--tertiary); } -.pt-7xl { - padding-top: var(--c--theme--spacings--7xl); +.clr-content-palette-gray-primary { + color: var(--c--contextuals--content--palette--gray--primary); } -.pl-7xl { - padding-left: var(--c--theme--spacings--7xl); +.clr-content-palette-gray-secondary { + color: var(--c--contextuals--content--palette--gray--secondary); } -.pr-7xl { - padding-right: var(--c--theme--spacings--7xl); +.clr-content-palette-gray-tertiary { + color: var(--c--contextuals--content--palette--gray--tertiary); } diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts index 6261deb30a..d0ecc2af5e 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts @@ -1,136 +1,387 @@ export const tokens = { themes: { default: { - theme: { + globals: { colors: { - 'secondary-text': '#fff', - 'secondary-100': '#fee9ea', - 'secondary-200': '#fedfdf', - 'secondary-300': '#fdbfbf', - 'secondary-400': '#e1020f', - 'secondary-500': '#c91a1f', - 'secondary-600': '#5e2b2b', - 'secondary-700': '#3b2424', - 'secondary-800': '#341f1f', - 'secondary-900': '#2b1919', - 'info-text': '#0078f3', - 'info-100': '#E8EDFF', - 'info-200': '#DDE5FF', - 'info-300': '#BCCDFF', - 'info-400': '#518FFF', - 'info-500': '#0078F3', - 'info-600': '#0063CB', - 'info-700': '#273961', - 'info-800': '#222A3F', - 'info-900': '#1D2437', - 'greyscale-100': '#eee', - 'greyscale-200': '#E5E5E5', - 'greyscale-300': '#CECECE', - 'greyscale-400': '#929292', - 'greyscale-500': '#7C7C7C', - 'greyscale-600': '#666666', - 'greyscale-700': '#3A3A3A', - 'greyscale-800': '#2A2A2A', - 'greyscale-900': '#242424', - 'greyscale-000': '#fff', - 'primary-100': '#ECECFE', - 'primary-200': '#E3E3FD', - 'primary-300': '#CACAFB', - 'primary-400': '#8585F6', - 'primary-500': '#6A6AF4', - 'primary-600': '#313178', - 'primary-700': '#272747', - 'primary-800': '#000091', - 'primary-900': '#21213F', - 'success-100': '#dffee6', - 'success-200': '#b8fec9', - 'success-300': '#88fdaa', - 'success-400': '#3bea7e', - 'success-500': '#1f8d49', - 'success-600': '#18753c', - 'success-700': '#204129', - 'success-800': '#1e2e22', - 'success-900': '#19281d', - 'warning-100': '#fff4f3', - 'warning-200': '#ffe9e6', - 'warning-300': '#ffded9', - 'warning-400': '#ffbeb4', - 'warning-500': '#d64d00', - 'warning-600': '#b34000', - 'warning-700': '#5e2c21', - 'warning-800': '#3e241e', - 'warning-900': '#361e19', - 'danger-100': '#FFE9E9', - 'danger-200': '#FFDDDD', - 'danger-300': '#FFBDBD', - 'danger-400': '#FF5655', - 'danger-500': '#F60700', - 'danger-600': '#CE0500', - 'danger-700': '#642626', - 'danger-800': '#412121', - 'danger-900': '#391C1C', - 'primary-text': '#000091', - 'success-text': '#1f8d49', - 'warning-text': '#d64d00', - 'danger-text': '#FFF', - 'primary-050': '#F5F5FE', - 'primary-150': '#F4F4FD', - 'greyscale-text': '#303C4B', - 'greyscale-050': '#F6F6F6', - 'greyscale-250': '#ddd', - 'greyscale-350': '#ddd', - 'greyscale-750': '#353535', - 'greyscale-950': '#1E1E1E', - 'greyscale-1000': '#161616', - 'danger-050': '#FFF4F4', - 'blue-500': '#417DC4', - 'brown-500': '#BD987A', - 'cyan-500': '#009099', - 'gold-500': '#C3992A', - 'green-500': '#00A95F', - 'olive-500': '#68A532', - 'orange-500': '#E4794A', - 'purple-500': '#A558A0', - 'red-500': '#E1000F', - 'yellow-500': '#B7A73F', - 'rose-500': '#E18B76', - 'primary-action': '#1212FF', - 'primary-bg': '#FAFAFA', - 'primary-focus': '#0A76F6', - 'secondary-icon': 'var(--c--theme--colors--primary-text)', - 'blue-400': '#7AB1E8', - 'blue-600': '#3558A2', - 'brown-400': '#E6BE92', - 'brown-600': '#745B47', - 'cyan-400': '#34BAB5', - 'cyan-600': '#006A6F', - 'gold-400': '#FFCA00', - 'gold-600': '#695240', - 'green-400': '#34CB6A', - 'green-600': '#297254', - 'olive-400': '#99C221', - 'olive-600': '#447049', - 'orange-400': '#FF732C', - 'orange-600': '#755348', - 'pink-400': '#FFB7AE', - 'pink-500': '#E18B76', - 'pink-600': '#8D533E', - 'purple-400': '#CE70CC', - 'purple-600': '#6E445A', - 'yellow-400': '#D8C634', - 'yellow-600': '#66673D', + 'logo-1': '#377FDB', + 'logo-2': '#377FDB', + 'logo-1-dark': '#95ABFF', + 'logo-2-dark': '#95ABFF', + 'brand-050': '#EDF0FF', + 'brand-100': '#DAE2FF', + 'brand-150': '#C8D3FF', + 'brand-200': '#B5C4FF', + 'brand-250': '#A2B6FF', + 'brand-300': '#90A7FF', + 'brand-350': '#7E98FF', + 'brand-400': '#6C89FE', + 'brand-450': '#5C7AF7', + 'brand-500': '#4C6CEF', + 'brand-550': '#3E5DE7', + 'brand-600': '#304DDF', + 'brand-650': '#2845C1', + 'brand-700': '#223E9E', + 'brand-750': '#1F367D', + 'brand-800': '#1B2E5F', + 'brand-850': '#172446', + 'brand-900': '#121B30', + 'brand-950': '#0C111A', + 'gray-000': '#FFFFFF', + 'gray-025': '#F6F8F9', + 'gray-050': '#EEF1F4', + 'gray-100': '#DFE2EA', + 'gray-150': '#CFD5DE', + 'gray-200': '#C1C7D3', + 'gray-250': '#B2B9C7', + 'gray-300': '#A4ABBC', + 'gray-350': '#969EB0', + 'gray-400': '#8891A4', + 'gray-450': '#7B8498', + 'gray-500': '#6D778C', + 'gray-550': '#626A80', + 'gray-600': '#555E74', + 'gray-650': '#4A5267', + 'gray-700': '#3F4759', + 'gray-750': '#363B4C', + 'gray-800': '#2B303D', + 'gray-850': '#222631', + 'gray-900': '#181B24', + 'gray-950': '#0F1117', + 'gray-1000': '#000000', + 'info-050': '#E7F2FF', + 'info-100': '#CFE5FF', + 'info-150': '#B7D7FF', + 'info-200': '#A0CAFE', + 'info-250': '#8CBCF9', + 'info-300': '#77AEF4', + 'info-350': '#63A0EE', + 'info-400': '#5092E7', + 'info-450': '#4185DC', + 'info-500': '#3677CC', + 'info-550': '#2F6ABB', + 'info-600': '#265EAA', + 'info-650': '#28528F', + 'info-700': '#274775', + 'info-750': '#243C5E', + 'info-800': '#20314A', + 'info-850': '#1B2637', + 'info-900': '#141C27', + 'info-950': '#0D1118', + 'success-050': '#DEF7E6', + 'success-100': '#BAEECF', + 'success-150': '#A5E2C0', + 'success-200': '#95D4B3', + 'success-250': '#85C6A7', + 'success-300': '#74B99B', + 'success-350': '#65AB8F', + 'success-400': '#579E84', + 'success-450': '#4B9079', + 'success-500': '#40836F', + 'success-550': '#367664', + 'success-600': '#2B695A', + 'success-650': '#2C5A50', + 'success-700': '#2A4D45', + 'success-750': '#26403C', + 'success-800': '#213430', + 'success-850': '#1B2826', + 'success-900': '#151D1C', + 'success-950': '#0D1212', + 'warning-050': '#FFEEDF', + 'warning-100': '#FFDCBE', + 'warning-150': '#FFCA9C', + 'warning-200': '#FFB778', + 'warning-250': '#FDA54F', + 'warning-300': '#F59425', + 'warning-350': '#E78613', + 'warning-400': '#D7790C', + 'warning-450': '#C86C08', + 'warning-500': '#B85F03', + 'warning-550': '#A75400', + 'warning-600': '#984800', + 'warning-650': '#814112', + 'warning-700': '#6C3A19', + 'warning-750': '#58321C', + 'warning-800': '#452A1A', + 'warning-850': '#352117', + 'warning-900': '#261813', + 'warning-950': '#170F0C', + 'error-050': '#FFEDEB', + 'error-100': '#FFDAD7', + 'error-150': '#FFC7C2', + 'error-200': '#FFB3AD', + 'error-250': '#FF9F99', + 'error-300': '#FF8984', + 'error-350': '#FF706E', + 'error-400': '#FB5759', + 'error-450': '#F63A45', + 'error-500': '#E32C39', + 'error-550': '#CF202D', + 'error-600': '#BD0F23', + 'error-650': '#9D2227', + 'error-700': '#812727', + 'error-750': '#672624', + 'error-800': '#512220', + 'error-850': '#3D1C1B', + 'error-900': '#2A1614', + 'error-950': '#190E0D', + 'red-050': '#FFEDEB', + 'red-100': '#FFDAD7', + 'red-150': '#FFC7C2', + 'red-200': '#FFB3AD', + 'red-250': '#FF9F99', + 'red-300': '#FF8984', + 'red-350': '#FF706E', + 'red-400': '#FB5759', + 'red-450': '#F63A45', + 'red-500': '#E32C39', + 'red-550': '#CF202D', + 'red-600': '#BD0F23', + 'red-650': '#9D2227', + 'red-700': '#812727', + 'red-750': '#672624', + 'red-800': '#512220', + 'red-850': '#3D1C1B', + 'red-900': '#2A1614', + 'red-950': '#190E0D', + 'orange-050': '#FCEDEB', + 'orange-100': '#F8DCD7', + 'orange-150': '#F1CCC5', + 'orange-200': '#EABCB4', + 'orange-250': '#E2ACA2', + 'orange-300': '#DA9C92', + 'orange-350': '#D28C81', + 'orange-400': '#CA7C70', + 'orange-450': '#BE6E62', + 'orange-500': '#AE6257', + 'orange-550': '#9E564D', + 'orange-600': '#8F4B42', + 'orange-650': '#79443D', + 'orange-700': '#643C37', + 'orange-750': '#513430', + 'orange-800': '#412B28', + 'orange-850': '#312220', + 'orange-900': '#231918', + 'orange-950': '#150F0F', + 'brown-050': '#F9EFEA', + 'brown-100': '#F3DFD3', + 'brown-150': '#EACFC1', + 'brown-200': '#E2BFAE', + 'brown-250': '#D8B19C', + 'brown-300': '#D0A189', + 'brown-350': '#C3937B', + 'brown-400': '#B5866D', + 'brown-450': '#A77A62', + 'brown-500': '#996D57', + 'brown-550': '#8B614D', + 'brown-600': '#7C5542', + 'brown-650': '#6A4C3C', + 'brown-700': '#594236', + 'brown-750': '#49382F', + 'brown-800': '#3B2E28', + 'brown-850': '#2D2420', + 'brown-900': '#201A18', + 'brown-950': '#13100F', + 'yellow-050': '#FDF1C5', + 'yellow-100': '#FBE18E', + 'yellow-150': '#F4D261', + 'yellow-200': '#EAC244', + 'yellow-250': '#DFB41B', + 'yellow-300': '#D1A516', + 'yellow-350': '#C49711', + 'yellow-400': '#B78A0C', + 'yellow-450': '#A87D07', + 'yellow-500': '#9B6F02', + 'yellow-550': '#8D6300', + 'yellow-600': '#7F5600', + 'yellow-650': '#6E4C11', + 'yellow-700': '#5D4219', + 'yellow-750': '#4D371B', + 'yellow-800': '#3D2E1A', + 'yellow-850': '#2F2417', + 'yellow-900': '#221A12', + 'yellow-950': '#14100C', + 'green-050': '#E7F9B3', + 'green-100': '#D5EC98', + 'green-150': '#C5DE86', + 'green-200': '#B5D174', + 'green-250': '#A5C464', + 'green-300': '#95B755', + 'green-350': '#85AA45', + 'green-400': '#769D39', + 'green-450': '#688F30', + 'green-500': '#5A8228', + 'green-550': '#4D7621', + 'green-600': '#416919', + 'green-650': '#3A5B20', + 'green-700': '#324E22', + 'green-750': '#2C4122', + 'green-800': '#24351D', + 'green-850': '#1D2919', + 'green-900': '#161E13', + 'green-950': '#0E120C', + 'blue-1-050': '#EBF1FF', + 'blue-1-100': '#D6E3FE', + 'blue-1-150': '#C2D5FE', + 'blue-1-200': '#ADC7FE', + 'blue-1-250': '#99B8FD', + 'blue-1-300': '#84AAFD', + 'blue-1-350': '#6F9BFD', + 'blue-1-400': '#5A8DFB', + 'blue-1-450': '#437DFC', + 'blue-1-500': '#3D71E4', + 'blue-1-550': '#3665CC', + 'blue-1-600': '#305AB5', + 'blue-1-650': '#315093', + 'blue-1-700': '#2E4675', + 'blue-1-750': '#293B5E', + 'blue-1-800': '#243048', + 'blue-1-850': '#1E2635', + 'blue-1-900': '#171C25', + 'blue-1-950': '#0E1116', + 'blue-2-050': '#E2F4F9', + 'blue-2-100': '#C5E9F3', + 'blue-2-150': '#A7DDED', + 'blue-2-200': '#88D1E6', + 'blue-2-250': '#68C5E0', + 'blue-2-300': '#48B8D9', + 'blue-2-350': '#3BAACA', + 'blue-2-400': '#359CB9', + 'blue-2-450': '#318EA9', + 'blue-2-500': '#2C8199', + 'blue-2-550': '#277389', + 'blue-2-600': '#236679', + 'blue-2-650': '#2A5866', + 'blue-2-700': '#2A4B55', + 'blue-2-750': '#283F47', + 'blue-2-800': '#233337', + 'blue-2-850': '#1D272A', + 'blue-2-900': '#161C1E', + 'blue-2-950': '#0E1112', + 'purple-050': '#F5EEFF', + 'purple-100': '#ECDCFF', + 'purple-150': '#E2CBFF', + 'purple-200': '#D9B9FF', + 'purple-250': '#D0A7FF', + 'purple-300': '#C894FE', + 'purple-350': '#BE83FA', + 'purple-400': '#B570F5', + 'purple-450': '#AB5EF0', + 'purple-500': '#A04BE8', + 'purple-550': '#933CDB', + 'purple-600': '#8530C8', + 'purple-650': '#7033A5', + 'purple-700': '#5D3185', + 'purple-750': '#4C2C6A', + 'purple-800': '#3C2652', + 'purple-850': '#2D203C', + 'purple-900': '#21182A', + 'purple-950': '#130F19', + 'pink-050': '#FFEBF6', + 'pink-100': '#FFD8ED', + 'pink-150': '#FCC4E3', + 'pink-200': '#F7B2D9', + 'pink-250': '#F29FCE', + 'pink-300': '#ED8CC3', + 'pink-350': '#E779B8', + 'pink-400': '#E264AD', + 'pink-450': '#D2579E', + 'pink-500': '#C24B8E', + 'pink-550': '#B0417F', + 'pink-600': '#9F3670', + 'pink-650': '#873560', + 'pink-700': '#6F3250', + 'pink-750': '#5A2C43', + 'pink-800': '#472635', + 'pink-850': '#351F29', + 'pink-900': '#26171D', + 'pink-950': '#170F12', + 'black-000': '#00000000', + 'black-050': '#0000000D', + 'black-100': '#0000001A', + 'black-150': '#00000026', + 'black-200': '#00000033', + 'black-250': '#00000040', + 'black-300': '#0000004D', + 'black-350': '#00000059', + 'black-400': '#00000066', + 'black-450': '#00000073', + 'black-500': '#00000080', + 'black-550': '#0000008C', + 'black-600': '#00000099', + 'black-650': '#000000A6', + 'black-700': '#000000B3', + 'black-750': '#000000BF', + 'black-800': '#000000CC', + 'black-850': '#000000D9', + 'black-900': '#000000E6', + 'black-950': '#000000F2', + 'white-000': '#FFFFFF', + 'white-050': '#FFFFFF0D', + 'white-100': '#FFFFFF1A', + 'white-150': '#FFFFFF26', + 'white-200': '#FFFFFF33', + 'white-250': '#FFFFFF40', + 'white-300': '#FFFFFF4D', + 'white-350': '#FFFFFF59', + 'white-400': '#FFFFFF66', + 'white-450': '#FFFFFF73', + 'white-500': '#FFFFFF80', + 'white-550': '#FFFFFF8C', + 'white-600': '#FFFFFF99', + 'white-650': '#FFFFFFA6', + 'white-700': '#FFFFFFB3', + 'white-750': '#FFFFFFBF', + 'white-800': '#FFFFFFCC', + 'white-850': '#FFFFFFD9', + 'white-900': '#FFFFFFE6', + 'white-950': '#FFFFFFF2', + 'blue1-050': '#E7F2FF', + 'blue1-100': '#CFE5FF', + 'blue1-150': '#B7D7FF', + 'blue1-200': '#A0CAFE', + 'blue1-250': '#8CBCF9', + 'blue1-300': '#77AEF4', + 'blue1-350': '#63A0EE', + 'blue1-400': '#5092E7', + 'blue1-450': '#4185DC', + 'blue1-500': '#3677CC', + 'blue1-550': '#2F6ABB', + 'blue1-600': '#265EAA', + 'blue1-650': '#28528F', + 'blue1-700': '#274775', + 'blue1-750': '#243C5E', + 'blue1-800': '#20314A', + 'blue1-850': '#1B2637', + 'blue1-900': '#141C27', + 'blue1-950': '#0D1118', + 'blue2-050': '#E2F4FD', + 'blue2-100': '#C4E8F8', + 'blue2-150': '#AADCF2', + 'blue2-200': '#93CFEB', + 'blue2-250': '#7CC2E2', + 'blue2-300': '#6CB4D6', + 'blue2-350': '#5CA7C9', + 'blue2-400': '#5099BC', + 'blue2-450': '#458BAE', + 'blue2-500': '#3A7EA0', + 'blue2-550': '#327191', + 'blue2-600': '#286483', + 'blue2-650': '#2B5770', + 'blue2-700': '#294A5E', + 'blue2-750': '#263E4D', + 'blue2-800': '#22323D', + 'blue2-850': '#1C272E', + 'blue2-900': '#151D21', + 'blue2-950': '#0E1114', + }, + transitions: { + 'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)', + 'ease-out': 'cubic-bezier(0.33, 1, 0.68, 1)', + 'ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)', + duration: '250ms', }, font: { sizes: { - h1: '2rem', - h2: '1.75rem', - h3: '1.5rem', - h4: '1.375rem', - h5: '1.25rem', - h6: '1.125rem', - l: '1rem', - m: '0.8125rem', - s: '0.75rem', xs: '0.75rem', sm: '0.875rem', md: '1rem', @@ -138,6 +389,13 @@ export const tokens = { ml: '0.938rem', xl: '1.25rem', t: '0.6875rem', + s: '0.75rem', + h1: '2rem', + h2: '1.75rem', + h3: '1.5rem', + h4: '1.375rem', + h5: '1.25rem', + h6: '1.125rem', 'xl-alt': '5rem', 'lg-alt': '4.5rem', 'md-alt': '4rem', @@ -154,50 +412,36 @@ export const tokens = { black: 900, }, families: { base: 'sans-serif', accent: 'sans-serif' }, - letterSpacings: { - h1: 'normal', - h2: 'normal', - h3: 'normal', - h4: 'normal', - h5: '1px', - h6: 'normal', - l: 'normal', - m: 'normal', - s: 'normal', - }, }, spacings: { '0': '0', - xl: '2.5rem', l: '3rem', b: '1.625rem', + m: '0.8125rem', s: '1rem', t: '0.5rem', st: '0.25rem', - none: '0', - auto: 'auto', - bx: '2.2rem', - full: '100%', '4xs': '0.125rem', - '3xs': '0.25rem', - '2xs': '0.375rem', + xxxs: '0.25rem', + xxs: '0.375rem', xs: '0.5rem', sm: '0.75rem', base: '1rem', md: '1.5rem', lg: '2rem', + xl: '2.5rem', xxl: '3rem', xxxl: '3.5rem', '4xl': '4rem', '5xl': '4.5rem', '6xl': '6rem', '7xl': '7.5rem', - }, - transitions: { - 'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)', - 'ease-out': 'cubic-bezier(0.33, 1, 0.68, 1)', - 'ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)', - duration: '250ms', + none: '0', + auto: 'auto', + bx: '2.2rem', + full: '100%', + '3xs': '0.25rem', + '2xs': '0.375rem', }, breakpoints: { xs: '480px', @@ -210,161 +454,351 @@ export const tokens = { mobile: '768px', tablet: '1024px', }, - logo: { src: '', alt: '', widthHeader: '', widthFooter: '' }, }, - components: { - modal: { 'width-small': '342px' }, - tooltip: { padding: '4px 8px', 'background-color': '#161616' }, - button: { - 'medium-height': '40px', - 'medium-text-height': '40px', - 'border-radius': '4px', - 'small-height': '26px', - primary: { - 'background--color': '#000091', - 'background--color-hover': '#1212ff', - 'background--color-active': '#2323ff', - 'background--color-disabled': '#eee', - color: '#fff', - 'color-hover': '#fff', - 'color-active': '#fff', - 'color-focus-visible': '#fff', - disabled: 'var(--c--theme--colors--greyscale-400)', - 'background--disabled': 'var(--c--theme--colors--greyscale-100)', + contextuals: { + background: { + surface: { + primary: '#FFFFFF', + secondary: '#FFFFFF', + tertiary: '#F6F8F9', + }, + semantic: { + brand: { + primary: '#3E5DE7', + 'primary-hover': '#2845C1', + secondary: '#DAE2FF', + 'secondary-hover': '#C8D3FF', + tertiary: '#EDF0FF', + 'tertiary-hover': '#DAE2FF', + }, + neutral: { + primary: '#626A80', + 'primary-hover': '#4A5267', + secondary: '#DFE2EA', + 'secondary-hover': '#CFD5DE', + tertiary: '#EEF1F4', + 'tertiary-hover': '#DFE2EA', + }, + contextual: { primary: '#0000000D', 'primary-hover': '#0000001A' }, + info: { + primary: '#2F6ABB', + 'primary-hover': '#28528F', + secondary: '#CFE5FF', + 'secondary-hover': '#B7D7FF', + tertiary: '#E7F2FF', + 'tertiary-hover': '#CFE5FF', + }, + success: { + primary: '#367664', + 'primary-hover': '#2C5A50', + secondary: '#BAEECF', + 'secondary-hover': '#A5E2C0', + tertiary: '#DEF7E6', + 'tertiary-hover': '#BAEECF', + }, + warning: { + primary: '#A75400', + 'primary-hover': '#814112', + secondary: '#FFDCBE', + 'secondary-hover': '#FFCA9C', + tertiary: '#FFEEDF', + 'tertiary-hover': '#FFDCBE', + }, + error: { + primary: '#CF202D', + 'primary-hover': '#9D2227', + secondary: '#FFDAD7', + 'secondary-hover': '#FFC7C2', + tertiary: '#FFEDEB', + 'tertiary-hover': '#FFDAD7', + }, + disabled: { primary: '#DFE2EA', secondary: '#EEF1F4' }, }, - 'primary-text': { - 'background--color': '#000091', - 'background--color-hover': '#eee', - 'background--color-active': '#ECECFE', - 'background--color-focus-visible': '#fff', - 'background--color-disabled': '#fff', - color: '#000091', - 'color-hover': '#000091', - disabled: '#929292', + palette: { + brand: { + primary: '#4C6CEF', + secondary: '#7E98FF', + tertiary: '#C8D3FF', + }, + red: { + primary: '#E32C39', + secondary: '#FF706E', + tertiary: '#FFC7C2', + }, + orange: { + primary: '#AE6257', + secondary: '#D28C81', + tertiary: '#F1CCC5', + }, + brown: { + primary: '#996D57', + secondary: '#C3937B', + tertiary: '#EACFC1', + }, + yellow: { + primary: '#9B6F02', + secondary: '#C49711', + tertiary: '#F4D261', + }, + green: { + primary: '#5A8228', + secondary: '#85AA45', + tertiary: '#C5DE86', + }, + 'blue-1': { + primary: '#3D71E4', + secondary: '#6F9BFD', + tertiary: '#C2D5FE', + }, + 'blue-2': { + primary: '#2C8199', + secondary: '#3BAACA', + tertiary: '#A7DDED', + }, + purple: { + primary: '#A04BE8', + secondary: '#BE83FA', + tertiary: '#E2CBFF', + }, + pink: { + primary: '#C24B8E', + secondary: '#E779B8', + tertiary: '#FCC4E3', + }, + gray: { + primary: '#6D778C', + secondary: '#969EB0', + tertiary: '#CFD5DE', + }, }, - secondary: { - 'background--color-hover': '#F6F6F6', - 'background--color-active': '#EDEDED', - 'background--color-focus-visible': '#fff', - 'background--disabled': '#fff', - color: '#000091', - 'border--color': '#CECECE', - 'border--color-hover': '#CECECE', - 'border--color-disabled': '#CECECE', - disabled: '#929292', + text: { primary: '#0000000D' }, + }, + content: { + logo1: '#377FDB', + logo2: '#377FDB', + semantic: { + brand: { + primary: '#223E9E', + secondary: '#304DDF', + tertiary: '#4C6CEF', + 'on-brand': '#EDF0FF', + }, + neutral: { + primary: '#222631', + secondary: '#555E74', + tertiary: '#6D778C', + 'on-neutral': '#EEF1F4', + }, + contextual: { primary: '#FFFFFFF2' }, + info: { + primary: '#274775', + secondary: '#265EAA', + tertiary: '#3677CC', + 'on-info': '#E7F2FF', + }, + success: { + primary: '#2A4D45', + secondary: '#2B695A', + tertiary: '#40836F', + 'on-success': '#DEF7E6', + }, + warning: { + primary: '#6C3A19', + secondary: '#984800', + tertiary: '#B85F03', + 'on-warning': '#FFEEDF', + }, + error: { + primary: '#812727', + secondary: '#BD0F23', + tertiary: '#E32C39', + 'on-error': '#FFEDEB', + }, + disabled: { primary: '#A4ABBC', secondary: '#FFFFFF80' }, }, - tertiary: { - 'background--color': '#ECECFE', - 'background--color-focus-visible': '#ECECFE', - 'background--color-hover': '#CACAFB', - 'background--color-active': '#CACAFB', - 'background--disabled': '#F5F5FE', - color: '#000091', - disabled: '#CACAFB', + palette: { + brand: { + primary: '#4C6CEF', + secondary: '#7E98FF', + tertiary: '#C8D3FF', + }, + red: { + primary: '#E32C39', + secondary: '#FF706E', + tertiary: '#FFC7C2', + }, + orange: { + primary: '#AE6257', + secondary: '#D28C81', + tertiary: '#F1CCC5', + }, + brown: { + primary: '#996D57', + secondary: '#C3937B', + tertiary: '#EACFC1', + }, + yellow: { + primary: '#9B6F02', + secondary: '#C49711', + tertiary: '#F4D261', + }, + green: { + primary: '#5A8228', + secondary: '#85AA45', + tertiary: '#C5DE86', + }, + 'blue-1': { + primary: '#3D71E4', + secondary: '#6F9BFD', + tertiary: '#C2D5FE', + }, + 'blue-2': { + primary: '#2C8199', + secondary: '#3BAACA', + tertiary: '#A7DDED', + }, + purple: { + primary: '#A04BE8', + secondary: '#BE83FA', + tertiary: '#E2CBFF', + }, + pink: { + primary: '#C24B8E', + secondary: '#E779B8', + tertiary: '#FCC4E3', + }, + gray: { + primary: '#6D778C', + secondary: '#969EB0', + tertiary: '#CFD5DE', + }, }, - 'tertiary-text': { - 'background--color-hover': '#eee', - 'color-hover': '#000091', - color: '#313178', - disabled: '#CACAFB', + }, + border: { + surface: { primary: '#DFE2EA' }, + semantic: { + brand: { + primary: '#3E5DE7', + secondary: '#90A7FF', + tertiary: '#C8D3FF', + }, + contextual: { primary: '#FFFFFF33' }, + neutral: { + primary: '#626A80', + secondary: '#A4ABBC', + tertiary: '#CFD5DE', + }, + info: { + primary: '#2F6ABB', + secondary: '#77AEF4', + tertiary: '#B7D7FF', + }, + success: { + primary: '#367664', + secondary: '#74B99B', + tertiary: '#A5E2C0', + }, + warning: { + primary: '#A75400', + secondary: '#F59425', + tertiary: '#FFCA9C', + }, + error: { + primary: '#CF202D', + secondary: '#FF8984', + tertiary: '#FFC7C2', + }, + disabled: { primary: '#DFE2EA' }, }, - danger: { - 'color-hover': 'white', - 'background--color': '#CE0500', - 'background--color-hover': '#FF2725', - 'background--color-focus-visible': '#CE0500', - 'background--color-disabled': '#eee', - 'color-disabled': '#929292', + palette: { + brand: { + primary: '#4C6CEF', + secondary: '#7E98FF', + tertiary: '#C8D3FF', + }, + red: { + primary: '#E32C39', + secondary: '#FF706E', + tertiary: '#FFC7C2', + }, + orange: { + primary: '#AE6257', + secondary: '#D28C81', + tertiary: '#F1CCC5', + }, + brown: { + primary: '#996D57', + secondary: '#C3937B', + tertiary: '#EACFC1', + }, + yellow: { + primary: '#9B6F02', + secondary: '#C49711', + tertiary: '#F4D261', + }, + green: { + primary: '#5A8228', + secondary: '#85AA45', + tertiary: '#C5DE86', + }, + 'blue-1': { + primary: '#3D71E4', + secondary: '#6F9BFD', + tertiary: '#C2D5FE', + }, + 'blue-2': { + primary: '#2C8199', + secondary: '#3BAACA', + tertiary: '#A7DDED', + }, + purple: { + primary: '#A04BE8', + secondary: '#BE83FA', + tertiary: '#E2CBFF', + }, + pink: { + primary: '#C24B8E', + secondary: '#E779B8', + tertiary: '#FCC4E3', + }, + gray: { + primary: '#6D778C', + secondary: '#969EB0', + tertiary: '#CFD5DE', + }, }, }, + }, + components: { + modal: { 'width-small': '342px' }, + tooltip: { padding: '4px 8px', 'background-color': '#EEF1F4' }, + button: { + 'medium-height': '40px', + 'medium-text-height': '40px', + 'border-radius': '4px', + 'border-radius--active': '4px', + 'border-radius--focus': '4px', + }, datagrid: { - 'header--color': '#666666', + 'header--color': '#222631', 'header--size': '12px', 'header--weight': '500', - 'body--background-color-hover': '#eee', - }, - 'forms-checkbox': { - 'border-radius': '4px', - 'border-color': '#000091', - 'background-color--hover': '#eee', - 'border--color-disabled': '#E5E5E5', - 'border--color': '#000091', - 'background--disabled': '#E5E5E5', - 'background--enable': '#000091', - 'check--disabled': '#CECECE', - 'check--enable': '#fff', - color: '#000091', - 'label--color': '#161616', - 'label--size': '0.875rem', - 'label--weight': '500', - 'text--color': '#666666', - 'text--size': '0.75rem', - 'text--weight': '400', - 'text--color-disabled': '#CECECE', - }, - 'forms-labelledbox': { - 'label-color--small': '#1E1E1E', - 'label-color--small--disabled': '#CECECE', - 'label-color--big': '#1E1E1E', - 'label-color--big--disabled': '#CECECE', - }, - 'forms-radio': { - 'border-color': '#000091', - 'background-color': '#fff', - 'accent-color': '#000091', - 'accent-color-disabled': '#CECECE', - }, - 'forms-switch': { - 'border--color-disabled': '#CECECE', - 'border--color': '#000091', - 'handle-background-color': 'white', - 'handle-background-color--disabled': '#fff', - 'rail-background-color--disabled': '#fff', - 'accent-color': '#000091', - }, - 'forms-textarea': { - 'label-color--focus': '#161616', - 'border-radius': '4px', - 'border-color': '#929292', - 'box-shadow--color--hover': '#929292', - 'box-shadow--color--focus': '#000091', - 'value-color': '#1E1E1E', - 'value-color--disabled': '#CECECE', - 'font-size': '14px', - }, - 'forms-input': { - 'label-color--focus': '#161616', - 'border-radius': '4px', - 'border-color': '#929292', - 'box-shadow--color--hover': '#929292', - 'box-shadow--color--focus': '#000091', - 'value-color': '#1E1E1E', - 'value-color--disabled': '#CECECE', - 'font-size': '14px', - }, - 'forms-select': { - 'label-color--focus': '#161616', - 'item-font-size': '14px', - 'border-radius': '4px', - 'border-radius-hover': '4px', - 'border-color': '#929292', - 'box-shadow--color--hover': '#929292', - 'box-shadow--color--focus': '#000091', - 'value-color': '#1E1E1E', - 'font-size': '14px', + 'body--background-color-hover': '#EEF1F4', }, + 'forms-checkbox': { 'font-size': '0.875rem' }, badge: { 'font-size': '0.75rem', - 'border-radius': '4px', + 'border-radius': '12px', 'padding-inline': '0.5rem', 'padding-block': '0.375rem', - accent: { 'background-color': '#ECECFE', color: '#313178' }, - neutral: { 'background-color': '#eee', color: '#666666' }, - danger: { 'background-color': '#FFE9E9', color: '#CE0500' }, - success: { 'background-color': '#dffee6', color: '#18753c' }, - warning: { 'background-color': '#fff4f3', color: '#b34000' }, - info: { 'background-color': '#E8EDFF', color: '#0063CB' }, + accent: { 'background-color': '#DAE2FF', color: '#304DDF' }, + neutral: { 'background-color': '#DFE2EA', color: '#555E74' }, + danger: { 'background-color': '#FFDAD7', color: '#BD0F23' }, + success: { 'background-color': '#BAEECF', color: '#2B695A' }, + warning: { 'background-color': '#FFDCBE', color: '#984800' }, + info: { 'background-color': '#CFE5FF', color: '#265EAA' }, }, + logo: { src: '', alt: '', widthHeader: '', widthFooter: '' }, 'la-gaufre': false, 'home-proconnect': false, 'image-system-filter': '', @@ -376,66 +810,731 @@ export const tokens = { }, }, dark: { - theme: { + globals: { colors: { - 'greyscale-100': '#182536', - 'greyscale-200': '#303C4B', - 'greyscale-300': '#555F6B', - 'greyscale-400': '#79818A', - 'greyscale-500': '#9EA3AA', - 'greyscale-600': '#C2C6CA', - 'greyscale-700': '#E7E8EA', - 'greyscale-800': '#F3F4F4', - 'greyscale-900': '#FAFAFB', - 'greyscale-000': '#0C1A2B', - 'primary-100': '#3B4C62', - 'primary-200': '#4D6481', - 'primary-300': '#6381A6', - 'primary-400': '#7FA5D5', - 'primary-500': '#8CB5EA', - 'primary-600': '#A3C4EE', - 'primary-700': '#C3D8F4', - 'primary-800': '#DDE9F8', - 'primary-900': '#F4F8FD', - 'success-100': '#EEF8D7', - 'success-200': '#D9F1B2', - 'success-300': '#BDE985', - 'success-400': '#A0E25D', - 'success-500': '#76D628', - 'success-600': '#5BB520', - 'success-700': '#43941A', - 'success-800': '#307414', - 'success-900': '#225D10', - 'warning-100': '#F7F3D5', - 'warning-200': '#F0E5AA', - 'warning-300': '#E8D680', - 'warning-400': '#E3C95F', - 'warning-500': '#D9B32B', - 'warning-600': '#BD9721', - 'warning-700': '#9D7B1C', - 'warning-800': '#7E6016', - 'warning-900': '#684D12', - 'danger-100': '#F8D0D0', - 'danger-200': '#F09898', - 'danger-300': '#F09898', - 'danger-400': '#ED8585', - 'danger-500': '#E96666', - 'danger-600': '#DD6666', - 'danger-700': '#C36666', - 'danger-800': '#AE6666', - 'danger-900': '#9D6666', + 'logo-1': '#377FDB', + 'logo-2': '#377FDB', + 'logo-1-dark': '#95ABFF', + 'logo-2-dark': '#95ABFF', + 'brand-050': '#EAF1FB', + 'brand-100': '#D5E4F7', + 'brand-150': '#C0D6F4', + 'brand-200': '#ABC9F0', + 'brand-250': '#96BCEC', + 'brand-300': '#80AEE8', + 'brand-350': '#6CA0E4', + 'brand-400': '#5693E0', + 'brand-450': '#4085DC', + 'brand-500': '#2976D8', + 'brand-550': '#1167D4', + 'brand-600': '#0659C5', + 'brand-650': '#1A509F', + 'brand-700': '#20467F', + 'brand-750': '#203C63', + 'brand-800': '#1D314C', + 'brand-850': '#1A2638', + 'brand-900': '#141C28', + 'brand-950': '#0C1117', + 'gray-000': '#FFFFFF', + 'gray-025': '#F7F8F8', + 'gray-050': '#F0F1F2', + 'gray-100': '#E1E2E5', + 'gray-150': '#D2D4D8', + 'gray-200': '#C4C7CB', + 'gray-250': '#B5B9BE', + 'gray-300': '#A7ACB2', + 'gray-350': '#999EA5', + 'gray-400': '#8D9197', + 'gray-450': '#80848A', + 'gray-500': '#74777C', + 'gray-550': '#686B6F', + 'gray-600': '#5C5F63', + 'gray-650': '#505356', + 'gray-700': '#45474A', + 'gray-750': '#3A3B3E', + 'gray-800': '#2F3033', + 'gray-850': '#252627', + 'gray-900': '#1B1C1D', + 'gray-950': '#101112', + 'gray-1000': '#000000', + 'info-050': '#EAF1FB', + 'info-100': '#D5E4F7', + 'info-150': '#C0D6F4', + 'info-200': '#ABC9F0', + 'info-250': '#96BCEC', + 'info-300': '#80AEE8', + 'info-350': '#6CA0E4', + 'info-400': '#5693E0', + 'info-450': '#4085DC', + 'info-500': '#2976D8', + 'info-550': '#1167D4', + 'info-600': '#0659C5', + 'info-650': '#1A509F', + 'info-700': '#20467F', + 'info-750': '#203C63', + 'info-800': '#1D314C', + 'info-850': '#1A2638', + 'info-900': '#141C28', + 'info-950': '#0C1117', + 'success-050': '#E4F7D4', + 'success-100': '#C8EEA8', + 'success-150': '#AAE579', + 'success-200': '#89DC45', + 'success-250': '#72CF27', + 'success-300': '#6AC024', + 'success-350': '#61B121', + 'success-400': '#59A21E', + 'success-450': '#51941C', + 'success-500': '#4B851A', + 'success-550': '#427816', + 'success-600': '#3A6A14', + 'success-650': '#385C1F', + 'success-700': '#344D24', + 'success-750': '#2E4022', + 'success-800': '#27341F', + 'success-850': '#20281A', + 'success-900': '#181D15', + 'success-950': '#10120E', + 'warning-050': '#FFF1BD', + 'warning-100': '#FFE176', + 'warning-150': '#FFCF25', + 'warning-200': '#F4BF06', + 'warning-250': '#E3B205', + 'warning-300': '#D3A504', + 'warning-350': '#C29805', + 'warning-400': '#B28C03', + 'warning-450': '#A27F03', + 'warning-500': '#937303', + 'warning-550': '#836703', + 'warning-600': '#745B03', + 'warning-650': '#625019', + 'warning-700': '#524620', + 'warning-750': '#443B20', + 'warning-800': '#36301D', + 'warning-850': '#2A2619', + 'warning-900': '#1E1C13', + 'warning-950': '#12110C', + 'error-050': '#FCEDED', + 'error-100': '#FADBDB', + 'error-150': '#F7C9C9', + 'error-200': '#F5B7B7', + 'error-250': '#F2A4A4', + 'error-300': '#EF9191', + 'error-350': '#EC7D7D', + 'error-400': '#E96868', + 'error-450': '#E55050', + 'error-500': '#E13131', + 'error-550': '#D80000', + 'error-600': '#C00101', + 'error-650': '#9E2219', + 'error-700': '#802820', + 'error-750': '#662820', + 'error-800': '#4F231E', + 'error-850': '#3B1D19', + 'error-900': '#2A1614', + 'error-950': '#1A0E0C', + 'red-050': '#FDEDED', + 'red-100': '#FADBDB', + 'red-150': '#F8C9C9', + 'red-200': '#F5B7B6', + 'red-250': '#F3A4A3', + 'red-300': '#F09190', + 'red-350': '#EE7C7B', + 'red-400': '#EB6665', + 'red-450': '#E74E4D', + 'red-500': '#D83F3D', + 'red-550': '#C23837', + 'red-600': '#AC3231', + 'red-650': '#8D3531', + 'red-700': '#73332F', + 'red-750': '#5B2F2B', + 'red-800': '#472826', + 'red-850': '#35211F', + 'red-900': '#251817', + 'red-950': '#160F0E', + 'orange-050': '#FDEEE2', + 'orange-100': '#FCDDC5', + 'orange-150': '#FACBA8', + 'orange-200': '#F8B98B', + 'orange-250': '#F6A76A', + 'orange-300': '#F4934B', + 'orange-350': '#F27E27', + 'orange-400': '#E76E12', + 'orange-450': '#D26411', + 'orange-500': '#BE5B0F', + 'orange-550': '#AA510E', + 'orange-600': '#97480C', + 'orange-650': '#7E431D', + 'orange-700': '#673C22', + 'orange-750': '#533422', + 'orange-800': '#412C1F', + 'orange-850': '#31231B', + 'orange-900': '#221A14', + 'orange-950': '#15100C', + 'brown-050': '#F3F0EF', + 'brown-100': '#E7E1DF', + 'brown-150': '#DCD2CF', + 'brown-200': '#D0C4BF', + 'brown-250': '#C5B6B0', + 'brown-300': '#BAA7A1', + 'brown-350': '#AF9992', + 'brown-400': '#A48B83', + 'brown-450': '#997E74', + 'brown-500': '#8F7065', + 'brown-550': '#846357', + 'brown-600': '#7A5649', + 'brown-650': '#684C42', + 'brown-700': '#57423C', + 'brown-750': '#463833', + 'brown-800': '#382E2A', + 'brown-850': '#2B2422', + 'brown-900': '#1F1B19', + 'brown-950': '#121010', + 'yellow-050': '#FAF0D3', + 'yellow-100': '#F5E2A4', + 'yellow-150': '#F0D275', + 'yellow-200': '#EBC242', + 'yellow-250': '#E4B213', + 'yellow-300': '#D4A511', + 'yellow-350': '#C39810', + 'yellow-400': '#B38B0F', + 'yellow-450': '#A37F0D', + 'yellow-500': '#93730C', + 'yellow-550': '#84670B', + 'yellow-600': '#755B0A', + 'yellow-650': '#63501C', + 'yellow-700': '#534521', + 'yellow-750': '#443A21', + 'yellow-800': '#36301F', + 'yellow-850': '#29261A', + 'yellow-900': '#1D1C14', + 'yellow-950': '#12110C', + 'green-050': '#E2F6E5', + 'green-100': '#C5ECCA', + 'green-150': '#A7E3AF', + 'green-200': '#89D894', + 'green-250': '#67CE75', + 'green-300': '#4DC25D', + 'green-350': '#48B257', + 'green-400': '#41A44F', + 'green-450': '#3B9548', + 'green-500': '#368741', + 'green-550': '#30793A', + 'green-600': '#2B6B33', + 'green-650': '#2F5C34', + 'green-700': '#2E4E31', + 'green-750': '#2A412C', + 'green-800': '#253426', + 'green-850': '#1E281F', + 'green-900': '#171D17', + 'green-950': '#0F120F', + 'blue-1-050': '#EBF1FF', + 'blue-1-100': '#D6E3FE', + 'blue-1-150': '#C2D5FE', + 'blue-1-200': '#ADC7FE', + 'blue-1-250': '#99B8FD', + 'blue-1-300': '#84AAFD', + 'blue-1-350': '#6F9BFD', + 'blue-1-400': '#5A8DFB', + 'blue-1-450': '#437DFC', + 'blue-1-500': '#3D71E4', + 'blue-1-550': '#3665CC', + 'blue-1-600': '#305AB5', + 'blue-1-650': '#315093', + 'blue-1-700': '#2E4675', + 'blue-1-750': '#293B5E', + 'blue-1-800': '#243048', + 'blue-1-850': '#1E2635', + 'blue-1-900': '#171C25', + 'blue-1-950': '#0E1116', + 'blue-2-050': '#E2F4F9', + 'blue-2-100': '#C5E9F3', + 'blue-2-150': '#A7DDED', + 'blue-2-200': '#88D1E6', + 'blue-2-250': '#68C5E0', + 'blue-2-300': '#48B8D9', + 'blue-2-350': '#3BAACA', + 'blue-2-400': '#359CB9', + 'blue-2-450': '#318EA9', + 'blue-2-500': '#2C8199', + 'blue-2-550': '#277389', + 'blue-2-600': '#236679', + 'blue-2-650': '#2A5866', + 'blue-2-700': '#2A4B55', + 'blue-2-750': '#283F47', + 'blue-2-800': '#233337', + 'blue-2-850': '#1D272A', + 'blue-2-900': '#161C1E', + 'blue-2-950': '#0E1112', + 'purple-050': '#F6EEFF', + 'purple-100': '#ECDCFF', + 'purple-150': '#E3CBFE', + 'purple-200': '#DAB9FE', + 'purple-250': '#D0A7FE', + 'purple-300': '#C795FE', + 'purple-350': '#BD83FD', + 'purple-400': '#B36FFD', + 'purple-450': '#A85BFD', + 'purple-500': '#9B4BF3', + 'purple-550': '#8B43DA', + 'purple-600': '#7B3CC1', + 'purple-650': '#673C9B', + 'purple-700': '#56387D', + 'purple-750': '#463162', + 'purple-800': '#382A4A', + 'purple-850': '#2A2237', + 'purple-900': '#1E1926', + 'purple-950': '#121017', + 'pink-050': '#FCEDF5', + 'pink-100': '#F9DAEA', + 'pink-150': '#F7C7E0', + 'pink-200': '#F4B4D5', + 'pink-250': '#F1A1CA', + 'pink-300': '#EE8CBF', + 'pink-350': '#EA77B3', + 'pink-400': '#E760A6', + 'pink-450': '#E24797', + 'pink-500': '#CD4089', + 'pink-550': '#B8397B', + 'pink-600': '#A3336D', + 'pink-650': '#86355E', + 'pink-700': '#6E334F', + 'pink-750': '#582E42', + 'pink-800': '#442834', + 'pink-850': '#332028', + 'pink-900': '#24181D', + 'pink-950': '#160F12', + 'black-000': '#00000000', + 'black-050': '#0000000D', + 'black-100': '#0000001A', + 'black-150': '#00000026', + 'black-200': '#00000033', + 'black-250': '#00000040', + 'black-300': '#0000004D', + 'black-350': '#00000059', + 'black-400': '#00000066', + 'black-450': '#00000073', + 'black-500': '#00000080', + 'black-550': '#0000008C', + 'black-600': '#00000099', + 'black-650': '#000000A6', + 'black-700': '#000000B3', + 'black-750': '#000000BF', + 'black-800': '#000000CC', + 'black-850': '#000000D9', + 'black-900': '#000000E6', + 'black-950': '#000000F2', + 'white-000': '#FFFFFF', + 'white-050': '#FFFFFF0D', + 'white-100': '#FFFFFF1A', + 'white-150': '#FFFFFF26', + 'white-200': '#FFFFFF33', + 'white-250': '#FFFFFF40', + 'white-300': '#FFFFFF4D', + 'white-350': '#FFFFFF59', + 'white-400': '#FFFFFF66', + 'white-450': '#FFFFFF73', + 'white-500': '#FFFFFF80', + 'white-550': '#FFFFFF8C', + 'white-600': '#FFFFFF99', + 'white-650': '#FFFFFFA6', + 'white-700': '#FFFFFFB3', + 'white-750': '#FFFFFFBF', + 'white-800': '#FFFFFFCC', + 'white-850': '#FFFFFFD9', + 'white-900': '#FFFFFFE6', + 'white-950': '#FFFFFFF2', + }, + transitions: { + 'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)', + 'ease-out': 'cubic-bezier(0.33, 1, 0.68, 1)', + 'ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)', + duration: '250ms', + }, + font: { + sizes: { + xs: '0.75rem', + sm: '0.875rem', + md: '1rem', + lg: '1.125rem', + ml: '0.938rem', + xl: '1.25rem', + t: '0.6875rem', + s: '0.75rem', + h1: '2rem', + h2: '1.75rem', + h3: '1.5rem', + h4: '1.375rem', + h5: '1.25rem', + h6: '1.125rem', + 'xl-alt': '5rem', + 'lg-alt': '4.5rem', + 'md-alt': '4rem', + 'sm-alt': '3.5rem', + 'xs-alt': '3rem', + }, + weights: { + thin: 200, + light: 300, + regular: 400, + medium: 500, + bold: 600, + extrabold: 700, + black: 800, + }, + families: { + base: '"Roboto Flex Variable", sans-serif', + accent: '"Roboto Flex Variable", sans-serif', + }, + }, + spacings: { + l: '3rem', + b: '1.625rem', + m: '0.8125rem', + s: '1rem', + t: '0.5rem', + st: '0.25rem', + '4xs': '0.125rem', + xxxs: '0.25rem', + xxs: '0.375rem', + xs: '0.5rem', + sm: '0.75rem', + base: '1rem', + md: '1.5rem', + lg: '2rem', + xl: '2.5rem', + xxl: '3rem', + xxxl: '3.5rem', + '4xl': '4rem', + '5xl': '4.5rem', + '6xl': '6rem', + '7xl': '7.5rem', + }, + breakpoints: { + xs: 0, + sm: '576px', + md: '768px', + lg: '992px', + xl: '1200px', + xxl: '1400px', + }, + }, + contextuals: { + background: { + surface: { + primary: '#2B303D', + secondary: '#222631', + tertiary: '#181B24', + }, + semantic: { + brand: { + primary: '#3E5DE7', + 'primary-hover': '#2845C1', + secondary: '#223E9E', + 'secondary-hover': '#1F367D', + tertiary: '#1F367D', + 'tertiary-hover': '#1B2E5F', + }, + neutral: { + primary: '#626A80', + 'primary-hover': '#4A5267', + secondary: '#3F4759', + 'secondary-hover': '#363B4C', + tertiary: '#363B4C', + 'tertiary-hover': '#2B303D', + }, + contextual: { primary: '#FFFFFF0D', 'primary-hover': '#FFFFFF1A' }, + info: { + primary: '#2F6ABB', + 'primary-hover': '#28528F', + secondary: '#274775', + 'secondary-hover': '#243C5E', + tertiary: '#243C5E', + 'tertiary-hover': '#20314A', + }, + success: { + primary: '#367664', + 'primary-hover': '#2C5A50', + secondary: '#2A4D45', + 'secondary-hover': '#26403C', + tertiary: '#26403C', + 'tertiary-hover': '#213430', + }, + warning: { + primary: '#A75400', + 'primary-hover': '#814112', + secondary: '#6C3A19', + 'secondary-hover': '#58321C', + tertiary: '#58321C', + 'tertiary-hover': '#452A1A', + }, + error: { + primary: '#CF202D', + 'primary-hover': '#9D2227', + secondary: '#812727', + 'secondary-hover': '#672624', + tertiary: '#672624', + 'tertiary-hover': '#512220', + }, + disabled: { primary: '#363B4C', secondary: '#2B303D' }, + }, + palette: { + brand: { + primary: '#7E98FF', + secondary: '#5C7AF7', + tertiary: '#3E5DE7', + }, + red: { + primary: '#FF706E', + secondary: '#F63A45', + tertiary: '#CF202D', + }, + orange: { + primary: '#D28C81', + secondary: '#BE6E62', + tertiary: '#9E564D', + }, + brown: { + primary: '#C3937B', + secondary: '#A77A62', + tertiary: '#8B614D', + }, + yellow: { + primary: '#C49711', + secondary: '#A87D07', + tertiary: '#8D6300', + }, + green: { + primary: '#85AA45', + secondary: '#688F30', + tertiary: '#4D7621', + }, + 'blue-1': { + primary: '#6F9BFD', + secondary: '#437DFC', + tertiary: '#3665CC', + }, + 'blue-2': { + primary: '#3BAACA', + secondary: '#318EA9', + tertiary: '#277389', + }, + purple: { + primary: '#BE83FA', + secondary: '#AB5EF0', + tertiary: '#933CDB', + }, + pink: { + primary: '#E779B8', + secondary: '#D2579E', + tertiary: '#B0417F', + }, + gray: { + primary: '#969EB0', + secondary: '#7B8498', + tertiary: '#626A80', + }, + }, + }, + content: { + logo1: '#95ABFF', + logo2: '#95ABFF', + semantic: { + brand: { + primary: '#EDF0FF', + secondary: '#DAE2FF', + tertiary: '#A2B6FF', + 'on-brand': '#EDF0FF', + }, + neutral: { + primary: '#EEF1F4', + secondary: '#DFE2EA', + tertiary: '#B2B9C7', + 'on-neutral': '#EEF1F4', + }, + contextual: { primary: '#000000D9' }, + info: { + primary: '#E7F2FF', + secondary: '#CFE5FF', + tertiary: '#8CBCF9', + 'on-info': '#E7F2FF', + }, + success: { + primary: '#DEF7E6', + secondary: '#BAEECF', + tertiary: '#85C6A7', + 'on-success': '#DEF7E6', + }, + warning: { + primary: '#FFEEDF', + secondary: '#FFDCBE', + tertiary: '#FDA54F', + 'on-warning': '#FFEEDF', + }, + error: { + primary: '#FFEDEB', + secondary: '#FFDAD7', + tertiary: '#FF9F99', + 'on-error': '#FFEDEB', + }, + disabled: { primary: '#555E74', secondary: '#0000004D' }, + }, + palette: { + brand: { + primary: '#7E98FF', + secondary: '#5C7AF7', + tertiary: '#3E5DE7', + }, + red: { + primary: '#FF706E', + secondary: '#F63A45', + tertiary: '#CF202D', + }, + orange: { + primary: '#D28C81', + secondary: '#BE6E62', + tertiary: '#9E564D', + }, + brown: { + primary: '#C3937B', + secondary: '#A77A62', + tertiary: '#8B614D', + }, + yellow: { + primary: '#C49711', + secondary: '#A87D07', + tertiary: '#8D6300', + }, + green: { + primary: '#85AA45', + secondary: '#688F30', + tertiary: '#4D7621', + }, + 'blue-1': { + primary: '#6F9BFD', + secondary: '#437DFC', + tertiary: '#3665CC', + }, + 'blue-2': { + primary: '#3BAACA', + secondary: '#318EA9', + tertiary: '#277389', + }, + purple: { + primary: '#BE83FA', + secondary: '#AB5EF0', + tertiary: '#933CDB', + }, + pink: { + primary: '#E779B8', + secondary: '#D2579E', + tertiary: '#B0417F', + }, + gray: { + primary: '#969EB0', + secondary: '#7B8498', + tertiary: '#626A80', + }, + }, + }, + border: { + surface: { primary: '#363B4C' }, + semantic: { + brand: { + primary: '#5C7AF7', + secondary: '#304DDF', + tertiary: '#223E9E', + }, + contextual: { primary: '#00000033' }, + neutral: { + primary: '#7B8498', + secondary: '#555E74', + tertiary: '#3F4759', + }, + info: { + primary: '#4185DC', + secondary: '#265EAA', + tertiary: '#274775', + }, + success: { + primary: '#4B9079', + secondary: '#2B695A', + tertiary: '#2A4D45', + }, + warning: { + primary: '#C86C08', + secondary: '#984800', + tertiary: '#6C3A19', + }, + error: { + primary: '#F63A45', + secondary: '#BD0F23', + tertiary: '#812727', + }, + disabled: { primary: '#2B303D' }, + }, + palette: { + brand: { + primary: '#7E98FF', + secondary: '#5C7AF7', + tertiary: '#3E5DE7', + }, + red: { + primary: '#FF706E', + secondary: '#F63A45', + tertiary: '#CF202D', + }, + orange: { + primary: '#D28C81', + secondary: '#BE6E62', + tertiary: '#9E564D', + }, + brown: { + primary: '#C3937B', + secondary: '#A77A62', + tertiary: '#8B614D', + }, + yellow: { + primary: '#C49711', + secondary: '#A87D07', + tertiary: '#8D6300', + }, + green: { + primary: '#85AA45', + secondary: '#688F30', + tertiary: '#4D7621', + }, + 'blue-1': { + primary: '#6F9BFD', + secondary: '#437DFC', + tertiary: '#3665CC', + }, + 'blue-2': { + primary: '#3BAACA', + secondary: '#318EA9', + tertiary: '#277389', + }, + purple: { + primary: '#BE83FA', + secondary: '#AB5EF0', + tertiary: '#933CDB', + }, + pink: { + primary: '#E779B8', + secondary: '#D2579E', + tertiary: '#B0417F', + }, + gray: { + primary: '#969EB0', + secondary: '#7B8498', + tertiary: '#626A80', + }, + }, }, }, }, dsfr: { - theme: { - colors: { 'secondary-icon': '#C9191E' }, - logo: { - src: '/assets/logo-gouv.svg', - widthHeader: '110px', - widthFooter: '220px', - alt: 'Gouvernement Logo', - }, + globals: { font: { families: { base: 'Marianne, Inter, Roboto Flex Variable, sans-serif', @@ -444,6 +1543,12 @@ export const tokens = { }, }, components: { + logo: { + src: '/assets/logo-gouv.svg', + widthHeader: '110px', + widthFooter: '220px', + alt: 'Gouvernement Logo', + }, 'la-gaufre': true, 'home-proconnect': true, favicon: { @@ -453,152 +1558,5 @@ export const tokens = { }, }, }, - generic: { - theme: { - colors: { - 'primary-action': '#206EBD', - 'primary-focus': '#1E64BF', - 'primary-text': '#2E2C28', - 'primary-050': '#F8F8F7', - 'primary-100': '#F0EFEC', - 'primary-150': '#F4F4FD', - 'primary-200': '#E8E7E4', - 'primary-300': '#CFCDC9', - 'primary-400': '#979592', - 'primary-500': '#82807D', - 'primary-600': '#3F3D39', - 'primary-700': '#2E2C28', - 'primary-800': '#302E29', - 'primary-900': '#282622', - 'primary-950': '#201F1C', - 'secondary-text': '#fff', - 'secondary-50': '#F4F7FA', - 'secondary-100': '#D7E3EE', - 'secondary-200': '#B8CCE1', - 'secondary-300': '#99B4D3', - 'secondary-400': '#7595BE', - 'secondary-500': '#5874A0', - 'secondary-600': '#3A5383', - 'secondary-700': '#1E3462', - 'secondary-800': '#091B41', - 'secondary-900': '#08183B', - 'secondary-950': '#071636', - 'greyscale-text': '#3C3B38', - 'greyscale-000': '#fff', - 'greyscale-050': '#F8F7F7', - 'greyscale-100': '#F3F3F2', - 'greyscale-200': '#ECEBEA', - 'greyscale-250': '#E4E3E2', - 'greyscale-300': '#D3D2CF', - 'greyscale-350': '#eee', - 'greyscale-400': '#96948E', - 'greyscale-500': '#817E77', - 'greyscale-600': '#6A6862', - 'greyscale-700': '#3C3B38', - 'greyscale-750': '#383632', - 'greyscale-800': '#2D2B27', - 'greyscale-900': '#262522', - 'greyscale-950': '#201F1C', - 'greyscale-1000': '#181714', - 'success-text': '#234935', - 'success-50': '#F3FBF5', - 'success-100': '#E4F7EA', - 'success-200': '#CAEED4', - 'success-300': '#A0E0B5', - 'success-400': '#6CC88C', - 'success-500': '#6CC88C', - 'success-600': '#358D5C', - 'success-700': '#2D704B', - 'success-800': '#28583F', - 'success-900': '#234935', - 'success-950': '#0F281B', - 'info-text': '#212445', - 'info-50': '#F2F6FB', - 'info-100': '#E2E9F5', - 'info-200': '#CCD8EE', - 'info-300': '#A9C0E3', - 'info-400': '#809DD4', - 'info-500': '#617BC7', - 'info-600': '#4A5CBF', - 'info-700': '#3E49B2', - 'info-800': '#353C8F', - 'info-900': '#303771', - 'info-950': '#212445', - 'warning-text': '#D97C3A', - 'warning-50': '#FDF7F1', - 'warning-100': '#FBEDDC', - 'warning-200': '#F5D9B9', - 'warning-300': '#EDBE8C', - 'warning-400': '#E2985C', - 'warning-500': '#D97C3A', - 'warning-600': '#C96330', - 'warning-700': '#A34B32', - 'warning-800': '#813B2C', - 'warning-900': '#693327', - 'warning-950': '#381713', - 'danger-action': '#C0182A', - 'danger-text': '#FFF', - 'danger-050': '#FDF5F4', - 'danger-100': '#FBEBE8', - 'danger-200': '#F9E0DC', - 'danger-300': '#F3C3BD', - 'danger-400': '#E26552', - 'danger-500': '#C91F00', - 'danger-600': '#A71901', - 'danger-700': '#562C2B', - 'danger-800': '#392425', - 'danger-900': '#311F20', - 'danger-950': '#2A191A', - 'blue-400': '#8BAECC', - 'blue-500': '#567AA2', - 'blue-600': '#455784', - 'brown-400': '#E4C090', - 'brown-500': '#BA9977', - 'brown-600': '#735C45', - 'cyan-400': '#5CBEC9', - 'cyan-500': '#43A1B3', - 'cyan-600': '#39809B', - 'gold-400': '#ECBF50', - 'gold-500': '#DFA038', - 'gold-600': '#C17B31', - 'green-400': '#5DBD9A', - 'green-500': '#3AA183', - 'green-600': '#2A816D', - 'olive-400': '#AFD662', - 'olive-500': '#90BB4B', - 'olive-600': '#6E9441', - 'orange-400': '#E2985C', - 'orange-500': '#D97C3A', - 'orange-600': '#C96330', - 'pink-400': '#BE8FC8', - 'pink-500': '#A563B1', - 'pink-600': '#8B44A5', - 'purple-400': '#BE8FC8', - 'purple-500': '#A563B1', - 'purple-600': '#8B44A5', - 'yellow-400': '#EDC947', - 'yellow-500': '#DBB13A', - 'yellow-600': '#B88A34', - }, - font: { - families: { - base: 'Inter, Roboto Flex Variable, sans-serif', - accent: 'Inter, Roboto Flex Variable, sans-serif', - }, - }, - }, - components: { - button: { - primary: { - background: { - 'color-hover': 'var(--c--theme--colors--primary-focus)', - 'color-active': 'var(--c--theme--colors--primary-focus)', - 'color-focus': 'var(--c--theme--colors--primary-focus)', - }, - }, - }, - 'image-system-filter': 'saturate(0.2)', - }, - }, }, }; diff --git a/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx b/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx index 0e266199c8..8b57de5bf8 100644 --- a/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx +++ b/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx @@ -5,9 +5,9 @@ import { tokens } from './cunningham-tokens'; type Tokens = typeof tokens.themes.default & Partial<(typeof tokens.themes)[keyof typeof tokens.themes]>; -type ColorsTokens = Tokens['theme']['colors']; -type FontSizesTokens = Tokens['theme']['font']['sizes']; -type SpacingsTokens = Tokens['theme']['spacings']; +type ColorsTokens = Tokens['globals']['colors']; +type FontSizesTokens = Tokens['globals']['font']['sizes']; +type SpacingsTokens = Tokens['globals']['spacings']; type ComponentTokens = Tokens['components']; export type Theme = keyof typeof tokens.themes; @@ -19,25 +19,25 @@ interface ThemeStore { setTheme: (theme: Theme) => void; spacingsTokens: Partial; theme: Theme; - themeTokens: Partial; + themeTokens: Partial; } const getMergedTokens = (theme: Theme) => { return merge({}, tokens.themes['default'], tokens.themes[theme]); }; -const DEFAULT_THEME: Theme = 'generic'; +const DEFAULT_THEME: Theme = 'dsfr'; const defaultTokens = getMergedTokens(DEFAULT_THEME); const initialState: ThemeStore = { - colorsTokens: defaultTokens.theme.colors, + colorsTokens: defaultTokens.globals.colors, componentTokens: defaultTokens.components, currentTokens: tokens.themes[DEFAULT_THEME] as Partial, - fontSizesTokens: defaultTokens.theme.font.sizes, + fontSizesTokens: defaultTokens.globals.font.sizes, setTheme: () => {}, - spacingsTokens: defaultTokens.theme.spacings, + spacingsTokens: defaultTokens.globals.spacings, theme: DEFAULT_THEME, - themeTokens: defaultTokens.theme, + themeTokens: defaultTokens.globals, }; export const useCunninghamTheme = create((set) => ({ @@ -46,13 +46,13 @@ export const useCunninghamTheme = create((set) => ({ const newTokens = getMergedTokens(theme); set({ - colorsTokens: newTokens.theme.colors, + colorsTokens: newTokens.globals.colors, componentTokens: newTokens.components, currentTokens: tokens.themes[theme] as Partial, - fontSizesTokens: newTokens.theme.font.sizes, - spacingsTokens: newTokens.theme.spacings, + fontSizesTokens: newTokens.globals.font.sizes, + spacingsTokens: newTokens.globals.spacings, theme, - themeTokens: newTokens.theme, + themeTokens: newTokens.globals, }); }, })); diff --git a/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx b/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx index c12a5be584..2af5844d5f 100644 --- a/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx +++ b/src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx @@ -56,9 +56,9 @@ export const ProConnectButton = () => { onClick={() => gotoLogin()} aria-label={t('Proconnect Login')} $css={css` - background-color: var(--c--theme--colors--primary-text); + background-color: var(--c--globals--colors--primary-text); &:hover { - background-color: var(--c--theme--colors--primary-action); + background-color: var(--c--globals--colors--primary-action); } `} $radius="4px" diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx index 15ad01f341..72999f3f7c 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx @@ -21,8 +21,8 @@ import emojidata from './initEmojiCallout'; const CalloutBlockStyle = createGlobalStyle` .bn-block-content[data-content-type="callout"][data-background-color] { - padding: var(--c--theme--spacings--3xs) var(--c--theme--spacings--3xs); - border-radius: var(--c--theme--spacings--3xs); + padding: var(--c--globals--spacings--3xs) var(--c--globals--spacings--3xs); + border-radius: var(--c--globals--spacings--3xs); } `; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx index 28166de12d..46f2b84242 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx @@ -86,7 +86,7 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => { margin-right: 0.2rem; } &:hover { - background-color: ${colorsTokens['greyscale-100']}; + background-color: ${colorsTokens['gray-100']}; } transition: background-color 0.2s ease-in-out; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx index b6a23b6b08..191d8ac1b5 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx @@ -35,10 +35,10 @@ import { DocSearchSubPageContent, DocSearchTarget } from '@/docs/doc-search'; import { useResponsiveStore } from '@/stores'; const inputStyle = css` - background-color: var(--c--theme--colors--greyscale-100); + background-color: var(--c--globals--colors--gray-100); border: none; outline: none; - color: var(--c--theme--colors--greyscale-700); + color: var(--c--globals--colors--gray-700); font-size: 16px; width: 100%; font-family: 'Inter'; @@ -154,8 +154,8 @@ export const SearchPage = ({ div { margin-top: 0; & [cmdk-group-heading] { @@ -279,7 +279,7 @@ export const SearchPage = ({ {titleWithoutEmoji} @@ -308,7 +308,7 @@ export const SearchPage = ({ @@ -323,7 +323,7 @@ export const SearchPage = ({ $css={css` &:hover { background-color: var( - --c--theme--colors--greyscale-100 + --c--globals--colors--gray-100 ); } `} @@ -331,7 +331,7 @@ export const SearchPage = ({ {t('New sub-doc')} diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx index a5b7c65a98..3e4f1efbed 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx @@ -8,7 +8,7 @@ export const cssEditor = css` } & .bn-editor { - color: var(--c--theme--colors--greyscale-700); + color: var(--c--globals--colors--greyscale-700); } /** @@ -104,14 +104,14 @@ export const cssEditor = css` * Callout, Paragraph and Heading blocks */ .bn-block { - border-radius: var(--c--theme--spacings--3xs); + border-radius: var(--c--globals--spacings--3xs); } .bn-block-outer { - border-radius: var(--c--theme--spacings--3xs); + border-radius: var(--c--globals--spacings--3xs); } .bn-block > .bn-block-content[data-background-color] { - padding: var(--c--theme--spacings--3xs) var(--c--theme--spacings--3xs); - border-radius: var(--c--theme--spacings--3xs); + padding: var(--c--globals--spacings--3xs) var(--c--globals--spacings--3xs); + border-radius: var(--c--globals--spacings--3xs); } .bn-block-content[data-content-type='checkListItem'][data-checked='true'] .bn-inline-content { @@ -127,7 +127,7 @@ export const cssEditor = css` font-size: 1.25rem; } a { - color: var(--c--theme--colors--greyscale-600); + color: var(--c--globals--colors--greyscale-600); cursor: pointer; } .bn-block-group @@ -144,7 +144,7 @@ export const cssEditor = css` * Quotes */ blockquote { - border-left: 4px solid var(--c--theme--colors--greyscale-300); + border-left: 4px solid var(--c--globals--colors--gray-300); font-style: italic; } diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx index 758705af03..90c438f15f 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertNetwork.tsx @@ -26,7 +26,7 @@ export const AlertNetwork = () => { $align="center" $gap={spacingsTokens['2xs']} $css={css` - border: 1px solid var(--c--theme--colors--warning-300); + border: 1px solid var(--c--globals--colors--warning-300); `} > diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertPublic.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertPublic.tsx index 513fd9999b..83c9e10272 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertPublic.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertPublic.tsx @@ -20,7 +20,7 @@ export const AlertPublic = ({ isPublicDoc }: { isPublicDoc: boolean }) => { $align="center" $gap={spacingsTokens['2xs']} $css={css` - border: 1px solid var(--c--theme--colors--primary-300, #e3e3fd); + border: 1px solid var(--c--globals--colors--primary-300, #e3e3fd); `} > { $align="center" $gap={spacingsTokens['3xs']} $css={css` - border: 1px solid var(--c--theme--colors--danger-300, #e3e3fd); + border: 1px solid var(--c--globals--colors--danger-300, #e3e3fd); `} $justify="space-between" > diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx index c821e5ac3f..a858cabe53 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx @@ -47,7 +47,7 @@ export const BoutonShare = ({ $css={css` .c__button--medium { height: 32px; - padding: 10px var(--c--theme--spacings--xs); + padding: 10px var(--c--globals--spacings--xs); gap: 7px; } `} diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.tsx index 998dce3faf..97f03e7f22 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeaderInfo.tsx @@ -50,7 +50,7 @@ export const DocHeaderInfo = ({ doc }: DocHeaderInfoProps) => { $variation="600" $size="s" $weight="bold" - $theme={isEditable ? 'greyscale' : 'warning'} + $theme={isEditable ? 'gray' : 'warning'} > {transRole(isEditable ? doc.user_role || doc.link_role : Role.READER)}  ·  diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx index 33905caa73..4d688dd211 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx @@ -71,7 +71,7 @@ const DocTitleEmojiPicker = ({ doc }: DocTitleProps) => { padding-top: 3px; cursor: pointer; &:hover { - background-color: ${colorsTokens['greyscale-100']}; + background-color: ${colorsTokens['gray-100']}; border-radius: 4px; } transition: background-color 0.2s ease-in-out; @@ -171,7 +171,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => { onBlurCapture={(event) => handleTitleSubmit(event.target.textContent || '') } - $color={colorsTokens['greyscale-1000']} + $color={colorsTokens['gray-1000']} $padding={{ right: 'big' }} $css={css` &[contenteditable='true']:empty:not(:focus):before { @@ -181,8 +181,8 @@ const DocTitleInput = ({ doc }: DocTitleProps) => { font-style: italic; } font-size: ${isDesktop - ? css`var(--c--theme--font--sizes--h2)` - : css`var(--c--theme--font--sizes--sm)`}; + ? css`var(--c--globals--font--sizes--h2)` + : css`var(--c--globals--font--sizes--sm)`}; font-weight: 700; outline: none; `} diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx index 823e34a4fa..5c0d687edc 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx @@ -237,11 +237,11 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { buttonCss={css` padding: ${spacingsTokens['xs']}; &:hover { - background-color: ${colorsTokens['greyscale-100']}; + background-color: ${colorsTokens['gray-100']}; } ${isSmallMobile ? css` - border: 1px solid ${colorsTokens['greyscale-300']}; + border: 1px solid ${colorsTokens['gray-300']}; ` : ''} `} diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocInheritedShareContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocInheritedShareContent.tsx index 86175eda94..8842eca87e 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocInheritedShareContent.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocInheritedShareContent.tsx @@ -49,11 +49,7 @@ export const DocInheritedShareContent = ({ + } color="tertiary-text" /> diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx index 1796e5192d..6d9eff6afc 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx @@ -116,7 +116,7 @@ export const DocRoleDropdown = ({ label="doc-role-dropdown" showArrow={true} arrowCss={css` - color: var(--c--theme--colors--primary-800) !important; + color: var(--c--globals--colors--primary-800) !important; `} options={[ ...roles, diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx index 3008f960c7..ee2f0ee18d 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx @@ -121,10 +121,10 @@ export const DocShareAddMemberList = ({ $direction="row" $padding={spacingsTokens.sm} $align="center" - $background={colorsTokens['greyscale-050']} + $background={colorsTokens['gray-050']} $radius={spacingsTokens['3xs']} $css={css` - border: 1px solid ${colorsTokens['greyscale-200']}; + border: 1px solid ${colorsTokens['gray-200']}; `} className="--docs--doc-share-add-member-list" > diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx index fe678923c4..cbc60c52fe 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx @@ -24,14 +24,14 @@ export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => { $justify="center" $align="center" $gap={spacingsTokens['3xs']} - $background={colorsTokens['greyscale-250']} + $background={colorsTokens['gray-250']} $padding={{ left: spacingsTokens['xs'], right: spacingsTokens['4xs'], vertical: spacingsTokens['4xs'], }} $css={css` - color: ${colorsTokens['greyscale-1000']}; + color: ${colorsTokens['gray-1000']}; font-size: ${fontSizesTokens['xs']}; `} className="--docs--doc-share-add-member-list-item" diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx index 31c367700d..e2ed5f5b71 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx @@ -153,7 +153,7 @@ export const DocShareModalInviteUserRow = ({ $css={css` contain: content; `} - $color="var(--c--theme--colors--greyscale-400)" + $color="var(--c--globals--colors--gray-400)" $cursor="pointer" > diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx index baf35a304b..b9ac203172 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx @@ -165,12 +165,12 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => { > diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx index a7c1fcfc0b..f37f71080d 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx @@ -58,7 +58,7 @@ export const Heading = ({ }); }} $radius="4px" - $background={isActive ? `${colorsTokens['greyscale-100']}` : 'none'} + $background={isActive ? `${colorsTokens['gray-100']}` : 'none'} $css={css` text-align: left; &:focus-visible { diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx index 46360cb501..5ae8105e1b 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx @@ -112,10 +112,10 @@ export const TableContent = () => { aria-label={t('Summary')} $css={css` top: 0; - border: 1px solid ${colorsTokens['greyscale-300']}; + border: 1px solid ${colorsTokens['gray-300']}; overflow: hidden; border-radius: ${spacingsTokens['3xs']}; - background: ${colorsTokens['greyscale-000']}; + background: ${colorsTokens['gray-000']}; ${isHover && css` display: flex; diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx index d5156cbb0e..422636ef28 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx @@ -115,32 +115,32 @@ export const DocSubPageItem = (props: TreeViewNodeProps) => { aria-disabled={isDisabled} $css={css` background-color: ${menuOpen - ? 'var(--c--theme--colors--greyscale-100)' - : 'var(--c--theme--colors--greyscale-000)'}; + ? 'var(--c--globals--colors--gray-100)' + : 'var(--c--globals--colors--gray-000)'}; .light-doc-item-actions { display: ${menuOpen || !isDesktop ? 'flex' : 'none'}; position: absolute; right: 0; background: ${isDesktop - ? 'var(--c--theme--colors--greyscale-100)' - : 'var(--c--theme--colors--greyscale-000)'}; + ? 'var(--c--globals--colors--gray-100)' + : 'var(--c--globals--colors--gray-000)'}; } .c__tree-view--node.isSelected { .light-doc-item-actions { - background: var(--c--theme--colors--greyscale-100); + background: var(--c--globals--colors--gray-100); } } .c__tree-view--node.isFocused { outline: none !important; - box-shadow: 0 0 0 2px var(--c--theme--colors--primary-500) !important; + box-shadow: 0 0 0 2px var(--c--globals--colors--primary-500) !important; border-radius: 4px; } &:hover { - background-color: var(--c--theme--colors--greyscale-100); + background-color: var(--c--globals--colors--gray-100); border-radius: 4px; .light-doc-item-actions { display: flex; - background: var(--c--theme--colors--greyscale-100); + background: var(--c--globals--colors--gray-100); } } .row.preview & { diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx index 1a0c3864be..43469c5c06 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx @@ -218,16 +218,16 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => { border-radius: 4px; width: 100%; background-color: ${rootIsSelected || rootActionsOpen - ? 'var(--c--theme--colors--greyscale-100)' + ? 'var(--c--globals--colors--gray-100)' : 'transparent'}; &:hover { - background-color: var(--c--theme--colors--greyscale-100); + background-color: var(--c--globals--colors--gray-100); } &:focus-visible { outline: none !important; - box-shadow: 0 0 0 2px var(--c--theme--colors--primary-500) !important; + box-shadow: 0 0 0 2px var(--c--globals--colors--primary-500) !important; border-radius: 4px; } diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx index 8c8b9a63b9..2f9e083998 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx @@ -102,7 +102,7 @@ export const ModalSelectVersion = ({ $height="calc(100vh - 2em - 12px)" $css={css` overflow-y: hidden; - border-left: 1px solid var(--c--theme--colors--greyscale-200); + border-left: 1px solid var(--c--globals--colors--gray-200); `} > @@ -143,7 +142,7 @@ export const ModalSelectVersion = ({