From c97b8c1b97350f220ab5ea3aec919254179b9fbf Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Mon, 5 Aug 2024 15:27:35 +0200 Subject: [PATCH 1/7] fix: :bug: theme imports should be correct --- .vscode/settings.json | 3 +++ packages/cli/src/tokens/actions.ts | 2 +- packages/theme/brand/altinn.css | 10 +++++----- packages/theme/brand/digdir.css | 10 +++++----- packages/theme/brand/portal.css | 10 +++++----- packages/theme/brand/uutilsynet.css | 10 +++++----- packages/theme/index.html | 20 ++++++++++++++++++++ 7 files changed, 44 insertions(+), 21 deletions(-) create mode 100644 packages/theme/index.html diff --git a/.vscode/settings.json b/.vscode/settings.json index cc8d16bdc6..53e9f80e9a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -21,5 +21,8 @@ "html-css-class-completion.includeGlobPattern": "packages/css/**/*.{css,html}", "[github-actions-workflow]": { "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[html]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" } } diff --git a/packages/cli/src/tokens/actions.ts b/packages/cli/src/tokens/actions.ts index 730a90ab98..c308c8124d 100644 --- a/packages/cli/src/tokens/actions.ts +++ b/packages/cli/src/tokens/actions.ts @@ -27,7 +27,7 @@ export const makeEntryFile: Action = { const generateImportUrls = R.pipe( sortLightmodeFirst, - R.map((file): string => `@import url('./${theme}/${file.toString()}');`), + R.map((file): string => `@import url('${theme}/${file.toString()}');`), R.join('\n'), ); diff --git a/packages/theme/brand/altinn.css b/packages/theme/brand/altinn.css index ede2ef2fec..a776d702cd 100644 --- a/packages/theme/brand/altinn.css +++ b/packages/theme/brand/altinn.css @@ -2,8 +2,8 @@ @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components; -@import url('./altinn/color-mode/light.css'); -@import url('./altinn/typography/secondary.css'); -@import url('./altinn/semantic.css'); -@import url('./altinn/color-mode/dark.css'); -@import url('./altinn/typography/primary.css'); \ No newline at end of file +@import url('altinn/color-mode/light.css'); +@import url('altinn/typography/secondary.css'); +@import url('altinn/semantic.css'); +@import url('altinn/color-mode/dark.css'); +@import url('altinn/typography/primary.css'); \ No newline at end of file diff --git a/packages/theme/brand/digdir.css b/packages/theme/brand/digdir.css index 4b9df40cc8..2fcd7df598 100644 --- a/packages/theme/brand/digdir.css +++ b/packages/theme/brand/digdir.css @@ -2,8 +2,8 @@ @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components; -@import url('./digdir/color-mode/light.css'); -@import url('./digdir/typography/secondary.css'); -@import url('./digdir/semantic.css'); -@import url('./digdir/color-mode/dark.css'); -@import url('./digdir/typography/primary.css'); \ No newline at end of file +@import url('digdir/color-mode/light.css'); +@import url('digdir/typography/secondary.css'); +@import url('digdir/semantic.css'); +@import url('digdir/color-mode/dark.css'); +@import url('digdir/typography/primary.css'); \ No newline at end of file diff --git a/packages/theme/brand/portal.css b/packages/theme/brand/portal.css index c7efe8ce73..6084341a11 100644 --- a/packages/theme/brand/portal.css +++ b/packages/theme/brand/portal.css @@ -2,8 +2,8 @@ @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components; -@import url('./portal/color-mode/light.css'); -@import url('./portal/typography/secondary.css'); -@import url('./portal/semantic.css'); -@import url('./portal/color-mode/dark.css'); -@import url('./portal/typography/primary.css'); \ No newline at end of file +@import url('portal/color-mode/light.css'); +@import url('portal/typography/secondary.css'); +@import url('portal/semantic.css'); +@import url('portal/typography/primary.css'); +@import url('portal/color-mode/dark.css'); \ No newline at end of file diff --git a/packages/theme/brand/uutilsynet.css b/packages/theme/brand/uutilsynet.css index 675a578e81..4883161881 100644 --- a/packages/theme/brand/uutilsynet.css +++ b/packages/theme/brand/uutilsynet.css @@ -2,8 +2,8 @@ @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components; -@import url('./uutilsynet/color-mode/light.css'); -@import url('./uutilsynet/typography/secondary.css'); -@import url('./uutilsynet/semantic.css'); -@import url('./uutilsynet/color-mode/dark.css'); -@import url('./uutilsynet/typography/primary.css'); \ No newline at end of file +@import url('uutilsynet/color-mode/light.css'); +@import url('uutilsynet/typography/secondary.css'); +@import url('uutilsynet/semantic.css'); +@import url('uutilsynet/color-mode/dark.css'); +@import url('uutilsynet/typography/primary.css'); \ No newline at end of file diff --git a/packages/theme/index.html b/packages/theme/index.html new file mode 100644 index 0000000000..414d54b1ea --- /dev/null +++ b/packages/theme/index.html @@ -0,0 +1,20 @@ + + + + My Website + + + + +

Welcome to My Website

+

This is the default index.html file.

+ + From 963033cbb914095837a0fb356ee4391f7e65fe56 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 6 Aug 2024 11:34:20 +0200 Subject: [PATCH 2/7] better fallback if no layer is defined --- packages/cli/src/tokens/formats/css.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/cli/src/tokens/formats/css.ts b/packages/cli/src/tokens/formats/css.ts index 035027386f..d952cdd771 100644 --- a/packages/cli/src/tokens/formats/css.ts +++ b/packages/cli/src/tokens/formats/css.ts @@ -34,8 +34,11 @@ export const colormode: Format = { const content = `{\n${allTokens.map(format).join('\n')}\n${colorSchemeProperty}}\n`; const autoSelectorContent = ['light', 'dark'].includes(mode_) ? prefersColorScheme(mode_, content) : ''; + const body = R.isNotNil(layer) + ? `@layer ${layer} {\n${selector} ${content} ${autoSelectorContent}\n}\n` + : `${selector} ${content} ${autoSelectorContent}\n`; - return header + `@layer ${layer} {\n${selector} ${content} ${autoSelectorContent}\n}\n`; + return header + body; }, }; @@ -74,8 +77,9 @@ export const semantic: Format = { const formattedVariables = formatTokens(allTokens); const content = `{\n${formattedVariables.join('\n')}\n}\n`; + const body = R.isNotNil(layer) ? `@layer ${layer} {\n${selector} ${content}\n}\n` : `${selector} ${content}\n`; - return header + `@layer ${layer} {\n${selector} ${content}\n}\n`; + return header + body; }, }; @@ -193,7 +197,8 @@ export const typography: Format = { const classes = formattedTokens.classes.join('\n'); const variables = formattedTokens.variables.join('\n'); const content = selector ? `${selector} {\n${variables}\n${classes}\n}` : classes; + const body = R.isNotNil(layer) ? `@layer ${layer} {\n${content}\n}` : content; - return header + `@layer ${layer} {\n${content}\n}\n`; + return header + body; }, }; From d46080226f0e8ee46056c06263e7734fbb381967 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 6 Aug 2024 14:00:18 +0200 Subject: [PATCH 3/7] lints --- packages/theme/brand/altinn/typography/primary.css | 2 +- packages/theme/brand/altinn/typography/secondary.css | 2 +- packages/theme/brand/digdir/typography/primary.css | 2 +- packages/theme/brand/digdir/typography/secondary.css | 2 +- packages/theme/brand/portal/typography/primary.css | 2 +- packages/theme/brand/portal/typography/secondary.css | 2 +- packages/theme/brand/uutilsynet/typography/primary.css | 2 +- packages/theme/brand/uutilsynet/typography/secondary.css | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/theme/brand/altinn/typography/primary.css b/packages/theme/brand/altinn/typography/primary.css index e0952cc6c1..7ae41bf981 100644 --- a/packages/theme/brand/altinn/typography/primary.css +++ b/packages/theme/brand/altinn/typography/primary.css @@ -273,4 +273,4 @@ line-height: 1.7; } } -} +} \ No newline at end of file diff --git a/packages/theme/brand/altinn/typography/secondary.css b/packages/theme/brand/altinn/typography/secondary.css index d6be547962..fe81fe4ef7 100644 --- a/packages/theme/brand/altinn/typography/secondary.css +++ b/packages/theme/brand/altinn/typography/secondary.css @@ -273,4 +273,4 @@ line-height: 1.7; } } -} +} \ No newline at end of file diff --git a/packages/theme/brand/digdir/typography/primary.css b/packages/theme/brand/digdir/typography/primary.css index 2895cabe6b..c180df3fae 100644 --- a/packages/theme/brand/digdir/typography/primary.css +++ b/packages/theme/brand/digdir/typography/primary.css @@ -273,4 +273,4 @@ line-height: 1.7; } } -} +} \ No newline at end of file diff --git a/packages/theme/brand/digdir/typography/secondary.css b/packages/theme/brand/digdir/typography/secondary.css index 2b27bc4055..1bb2f8b2f6 100644 --- a/packages/theme/brand/digdir/typography/secondary.css +++ b/packages/theme/brand/digdir/typography/secondary.css @@ -273,4 +273,4 @@ line-height: 1.7; } } -} +} \ No newline at end of file diff --git a/packages/theme/brand/portal/typography/primary.css b/packages/theme/brand/portal/typography/primary.css index 2895cabe6b..c180df3fae 100644 --- a/packages/theme/brand/portal/typography/primary.css +++ b/packages/theme/brand/portal/typography/primary.css @@ -273,4 +273,4 @@ line-height: 1.7; } } -} +} \ No newline at end of file diff --git a/packages/theme/brand/portal/typography/secondary.css b/packages/theme/brand/portal/typography/secondary.css index d6be547962..fe81fe4ef7 100644 --- a/packages/theme/brand/portal/typography/secondary.css +++ b/packages/theme/brand/portal/typography/secondary.css @@ -273,4 +273,4 @@ line-height: 1.7; } } -} +} \ No newline at end of file diff --git a/packages/theme/brand/uutilsynet/typography/primary.css b/packages/theme/brand/uutilsynet/typography/primary.css index 2895cabe6b..c180df3fae 100644 --- a/packages/theme/brand/uutilsynet/typography/primary.css +++ b/packages/theme/brand/uutilsynet/typography/primary.css @@ -273,4 +273,4 @@ line-height: 1.7; } } -} +} \ No newline at end of file diff --git a/packages/theme/brand/uutilsynet/typography/secondary.css b/packages/theme/brand/uutilsynet/typography/secondary.css index d6be547962..fe81fe4ef7 100644 --- a/packages/theme/brand/uutilsynet/typography/secondary.css +++ b/packages/theme/brand/uutilsynet/typography/secondary.css @@ -273,4 +273,4 @@ line-height: 1.7; } } -} +} \ No newline at end of file From e1976747daf208100ceb79c228992f7e5dcbad59 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 6 Aug 2024 14:58:57 +0200 Subject: [PATCH 4/7] refactored how entry file is made --- packages/cli/src/tokens/build.ts | 45 ++++++++++++++-------- packages/cli/src/tokens/configs.ts | 5 --- packages/cli/src/tokens/utils/entryfile.ts | 44 +++++++++++++++++++++ 3 files changed, 73 insertions(+), 21 deletions(-) create mode 100644 packages/cli/src/tokens/utils/entryfile.ts diff --git a/packages/cli/src/tokens/build.ts b/packages/cli/src/tokens/build.ts index bb3d6094d6..e5fb4f0535 100644 --- a/packages/cli/src/tokens/build.ts +++ b/packages/cli/src/tokens/build.ts @@ -7,6 +7,7 @@ import * as R from 'ramda'; import StyleDictionary from 'style-dictionary'; import * as configs from './configs.js'; +import { makeEntryFile } from './utils/entryfile.js'; const { permutateThemes, getConfigs } = configs; @@ -26,7 +27,7 @@ const sd = new StyleDictionary(); export async function run(options: Options): Promise { const tokensDir = options.tokens; const storefrontOutDir = path.resolve('../../apps/storefront/tokens'); - const tokensOutDir = path.resolve(options.out); + const outPath = path.resolve(options.out); const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensDir}/$themes.json`), 'utf-8')) as ThemeObject[]; @@ -43,9 +44,9 @@ export async function run(options: Options): Promise { const colormodeThemes = R.filter((val) => val.typography === 'primary', themes); const semanticThemes = R.filter((val) => val.mode === 'light' && val.typography === 'primary', themes); - const colorModeConfigs = getConfigs(configs.colorModeVariables, tokensOutDir, tokensDir, colormodeThemes); - const semanticConfigs = getConfigs(configs.semanticVariables, tokensOutDir, tokensDir, semanticThemes); - const typographyConfigs = getConfigs(configs.typographyCSS, tokensOutDir, tokensDir, typographyThemes); + const colorModeConfigs = getConfigs(configs.colorModeVariables, outPath, tokensDir, colormodeThemes); + const semanticConfigs = getConfigs(configs.semanticVariables, outPath, tokensDir, semanticThemes); + const typographyConfigs = getConfigs(configs.typographyCSS, outPath, tokensDir, typographyThemes); const storefrontConfigs = getConfigs(configs.typescriptTokens, storefrontOutDir, tokensDir, colormodeThemes); if (typographyConfigs.length > 0) { @@ -62,30 +63,30 @@ export async function run(options: Options): Promise { ); } - if (semanticConfigs.length > 0) { - console.log(`\nšŸ± Building ${chalk.green('semantic')}`); + if (colorModeConfigs.length > 0) { + console.log(`\nšŸ± Building ${chalk.green('color-mode')}`); await Promise.all( - semanticConfigs.map(async ({ theme, config, semantic }) => { - console.log(`šŸ‘· ${theme} - ${semantic}`); + colorModeConfigs.map(async ({ theme, mode, config }) => { + console.log(`šŸ‘· ${theme} - ${mode}`); - const typographyClasses = await sd.extend(config); + const themeVariablesSD = await sd.extend(config); - return typographyClasses.buildAllPlatforms(); + return themeVariablesSD.buildAllPlatforms(); }), ); } - if (colorModeConfigs.length > 0) { - console.log(`\nšŸ± Building ${chalk.green('color-mode')}`); + if (semanticConfigs.length > 0) { + console.log(`\nšŸ± Building ${chalk.green('semantic')}`); await Promise.all( - colorModeConfigs.map(async ({ theme, mode, config }) => { - console.log(`šŸ‘· ${theme} - ${mode}`); + semanticConfigs.map(async ({ theme, config, semantic }) => { + console.log(`šŸ‘· ${theme} - ${semantic}`); - const themeVariablesSD = await sd.extend(config); + const typographyClasses = await sd.extend(config); - return themeVariablesSD.buildAllPlatforms(); + return typographyClasses.buildAllPlatforms(); }), ); } @@ -103,4 +104,16 @@ export async function run(options: Options): Promise { }), ); } + + if (semanticConfigs.length > 0) { + console.log(`\nšŸ± Building ${chalk.green('CSS file')}`); + + await Promise.all( + semanticConfigs.map(async ({ theme }) => { + console.log(`šŸ‘· ${theme}.css`); + + return makeEntryFile({ theme, outPath, buildPath: path.resolve(`${outPath}/${theme}`) }); + }), + ); + } } diff --git a/packages/cli/src/tokens/configs.ts b/packages/cli/src/tokens/configs.ts index 2942cbc76e..9b46d22609 100644 --- a/packages/cli/src/tokens/configs.ts +++ b/packages/cli/src/tokens/configs.ts @@ -5,7 +5,6 @@ import StyleDictionary from 'style-dictionary'; import type { Config, TransformedToken } from 'style-dictionary/types'; import { outputReferencesFilter } from 'style-dictionary/utils'; -import { makeEntryFile } from './actions.js'; import * as formats from './formats/css.js'; import { jsTokens } from './formats/js-tokens.js'; import { nameKebab, sizeRem, typographyShorthand } from './transformers.js'; @@ -30,8 +29,6 @@ StyleDictionary.registerFormat(formats.colormode); StyleDictionary.registerFormat(formats.semantic); StyleDictionary.registerFormat(formats.typography); -StyleDictionary.registerAction(makeEntryFile); - const dsTransformers = [ nameKebab.name, `ts/resolveMath`, @@ -95,7 +92,6 @@ export const colorModeVariables: GetConfig = ({ mode = 'light', outPath, theme } prefix, buildPath: `${outPath}/${theme}/`, transforms: dsTransformers, - actions: [makeEntryFile.name], files: [ { destination: `color-mode/${mode}.css`, @@ -142,7 +138,6 @@ export const semanticVariables: GetConfig = ({ outPath, theme }) => { prefix, buildPath: `${outPath}/${theme}/`, transforms: dsTransformers, - actions: [makeEntryFile.name], files: [ { destination: `semantic.css`, diff --git a/packages/cli/src/tokens/utils/entryfile.ts b/packages/cli/src/tokens/utils/entryfile.ts new file mode 100644 index 0000000000..78cbb0bdc3 --- /dev/null +++ b/packages/cli/src/tokens/utils/entryfile.ts @@ -0,0 +1,44 @@ +import path from 'node:path'; +import chalk from 'chalk'; +import glob from 'fast-glob'; +import fs from 'fs-extra'; +import * as R from 'ramda'; + +const sortLightmodeFirst = R.sortWith([R.descend(R.includes('light')), R.descend(R.includes('secondary'))]); + +const header = `@charset "UTF-8"; + +@layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components; +\n`; + +const sortAndConcat = R.pipe( + sortLightmodeFirst, + R.map((file): string => { + try { + const content = fs.readFileSync(file, 'utf-8').toString(); + return content; + } catch (e) { + console.error(`Error reading file: ${file}`); + return ''; + } + }), + R.join('\n'), +); + +type EntryFile = (options: { + outPath: string; + buildPath: string; + theme: string; +}) => Promise; + +/** + * Creates a CSS entry file that imports base CSS files for a theme + */ +export const makeEntryFile: EntryFile = async ({ outPath, buildPath, theme }) => { + const writePath = `${outPath}/${theme}.css`; + + const files = await glob(`**/*`, { cwd: buildPath }); + const content = header + sortAndConcat(files.map((file) => `${buildPath}/${file}`)); + + await fs.writeFile(writePath, content); +}; From de0145ff47a0ff96a944313e5a2ec6cda34bf048 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 6 Aug 2024 14:59:05 +0200 Subject: [PATCH 5/7] generated new entry files --- packages/theme/brand/altinn.css | 1901 ++++++++++++++++++++++++++- packages/theme/brand/digdir.css | 1901 ++++++++++++++++++++++++++- packages/theme/brand/portal.css | 1901 ++++++++++++++++++++++++++- packages/theme/brand/uutilsynet.css | 1901 ++++++++++++++++++++++++++- 4 files changed, 7584 insertions(+), 20 deletions(-) diff --git a/packages/theme/brand/altinn.css b/packages/theme/brand/altinn.css index a776d702cd..6ccd7d683e 100644 --- a/packages/theme/brand/altinn.css +++ b/packages/theme/brand/altinn.css @@ -2,8 +2,1899 @@ @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components; -@import url('altinn/color-mode/light.css'); -@import url('altinn/typography/secondary.css'); -@import url('altinn/semantic.css'); -@import url('altinn/color-mode/dark.css'); -@import url('altinn/typography/primary.css'); \ No newline at end of file +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color-mode.light { +:root, [data-ds-color-mode="light"] { + --ds-global-blue-1: #fefeff; + --ds-global-blue-2: #edf5fa; + --ds-global-blue-3: #d3e5f4; + --ds-global-blue-4: #b7d5ed; + --ds-global-blue-5: #9bc5e5; + --ds-global-blue-6: #94c1e3; + --ds-global-blue-7: #2f86c9; + --ds-global-blue-8: #075089; + --ds-global-blue-9: #0A71C0; + --ds-global-blue-10: #085ea0; + --ds-global-blue-11: #074b80; + --ds-global-blue-12: #0966ac; + --ds-global-blue-13: #042d4d; + --ds-global-blue-contrast-1: #ffffff; + --ds-global-blue-contrast-2: #f3f8fc; + --ds-global-green-1: #fcfefc; + --ds-global-green-2: #ecf6ed; + --ds-global-green-3: #cfe9d3; + --ds-global-green-4: #b3dcb8; + --ds-global-green-5: #95ce9d; + --ds-global-green-6: #8bca94; + --ds-global-green-7: #189528; + --ds-global-green-8: #045a10; + --ds-global-green-9: #078D19; + --ds-global-green-10: #067615; + --ds-global-green-11: #056011; + --ds-global-green-12: #067314; + --ds-global-green-13: #033409; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #000401; + --ds-global-orange-1: #fffefd; + --ds-global-orange-2: #fbf1ec; + --ds-global-orange-3: #f4ddd0; + --ds-global-orange-4: #eecab7; + --ds-global-orange-5: #e7b69c; + --ds-global-orange-6: #e5b094; + --ds-global-orange-7: #cc632b; + --ds-global-orange-8: #7e3a15; + --ds-global-orange-9: #CA5C21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #a1491a; + --ds-global-orange-13: #47210c; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #0d0602; + --ds-global-purple-1: #fefefe; + --ds-global-purple-2: #f5f2f9; + --ds-global-purple-3: #e7dfef; + --ds-global-purple-4: #d9cce6; + --ds-global-purple-5: #ccbadd; + --ds-global-purple-6: #c7b4da; + --ds-global-purple-7: #9572b9; + --ds-global-purple-8: #663399; + --ds-global-purple-9: #663299; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #7b4ea7; + --ds-global-purple-13: #3b1d59; + --ds-global-purple-contrast-1: #ffffff; + --ds-global-purple-contrast-2: #eee8f3; + --ds-global-red-1: #fffefe; + --ds-global-red-2: #fbf1f1; + --ds-global-red-3: #f5dcdc; + --ds-global-red-4: #f0c7c7; + --ds-global-red-5: #eab3b3; + --ds-global-red-6: #e8acac; + --ds-global-red-7: #d25b5b; + --ds-global-red-8: #9a1616; + --ds-global-red-9: #C01B1B; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #c22020; + --ds-global-red-13: #5a0d0d; + --ds-global-red-contrast-1: #ffffff; + --ds-global-red-contrast-2: #f6dfdf; + --ds-global-yellow-1: #fffefc; + --ds-global-yellow-2: #fbf2d3; + --ds-global-yellow-3: #f5e19b; + --ds-global-yellow-4: #efcf5d; + --ds-global-yellow-5: #e6bc27; + --ds-global-yellow-6: #e0b726; + --ds-global-yellow-7: #9a7e1a; + --ds-global-yellow-8: #5d4c10; + --ds-global-yellow-9: #EABF28; + --ds-global-yellow-10: #d0aa24; + --ds-global-yellow-11: #b7951f; + --ds-global-yellow-12: #776114; + --ds-global-yellow-13: #352b09; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #fefeff; + --ds-color-accent-2: #eef4fa; + --ds-color-accent-3: #d1e3f3; + --ds-color-accent-4: #bad5ec; + --ds-color-accent-5: #a1c5e5; + --ds-color-accent-6: #97bfe3; + --ds-color-accent-7: #3885c9; + --ds-color-accent-8: #014e93; + --ds-color-accent-9: #0163ba; + --ds-color-accent-10: #015097; + --ds-color-accent-11: #013f75; + --ds-color-accent-12: #0163ba; + --ds-color-accent-13: #002d54; + --ds-color-accent-contrast-1: #ffffff; + --ds-color-accent-contrast-2: #dbe9f5; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #fefefe; + --ds-color-neutral-2: #f3f4f5; + --ds-color-neutral-3: #e1e3e5; + --ds-color-neutral-4: #ced1d4; + --ds-color-neutral-5: #bdc1c6; + --ds-color-neutral-6: #b8bcc1; + --ds-color-neutral-7: #7a818c; + --ds-color-neutral-8: #444e5d; + --ds-color-neutral-9: #1e2b3c; + --ds-color-neutral-10: #303c4b; + --ds-color-neutral-11: #444e5d; + --ds-color-neutral-12: #5b6471; + --ds-color-neutral-13: #202c3d; + --ds-color-neutral-contrast-1: #ffffff; + --ds-color-neutral-contrast-2: #bbbfc4; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #fefeff; + --ds-color-brand1-2: #eef4fa; + --ds-color-brand1-3: #d1e3f3; + --ds-color-brand1-4: #bad5ec; + --ds-color-brand1-5: #a1c5e5; + --ds-color-brand1-6: #97bfe3; + --ds-color-brand1-7: #3885c9; + --ds-color-brand1-8: #014e93; + --ds-color-brand1-9: #0163ba; + --ds-color-brand1-10: #015097; + --ds-color-brand1-11: #013f75; + --ds-color-brand1-12: #0163ba; + --ds-color-brand1-13: #002d54; + --ds-color-brand1-contrast-1: #ffffff; + --ds-color-brand1-contrast-2: #dbe9f5; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #fefefe; + --ds-color-brand2-2: #f4f3f6; + --ds-color-brand2-3: #e3e1e8; + --ds-color-brand2-4: #d3d0db; + --ds-color-brand2-5: #c3bfce; + --ds-color-brand2-6: #beb9c9; + --ds-color-brand2-7: #857d9b; + --ds-color-brand2-8: #534671; + --ds-color-brand2-9: #3f3161; + --ds-color-brand2-10: #514570; + --ds-color-brand2-11: #64587f; + --ds-color-brand2-12: #685d83; + --ds-color-brand2-13: #30254a; + --ds-color-brand2-contrast-1: #ffffff; + --ds-color-brand2-contrast-2: #d3d0db; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #fffefe; + --ds-color-brand3-2: #fdf1f3; + --ds-color-brand3-3: #f9dadf; + --ds-color-brand3-4: #f6c4cc; + --ds-color-brand3-5: #f3aeb8; + --ds-color-brand3-6: #f2a7b3; + --ds-color-brand3-7: #e4475f; + --ds-color-brand3-8: #941f31; + --ds-color-brand3-9: #e02f4a; + --ds-color-brand3-10: #bc273e; + --ds-color-brand3-11: #982032; + --ds-color-brand3-12: #bc273e; + --ds-color-brand3-13: #56121d; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #000000; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #fefeff; + --ds-color-info-background-subtle: #edf5fa; + --ds-color-info-surface-default: #d3e5f4; + --ds-color-info-surface-hover: #b7d5ed; + --ds-color-info-surface-active: #9bc5e5; + --ds-color-info-border-subtle: #94c1e3; + --ds-color-info-border-default: #2f86c9; + --ds-color-info-border-strong: #075089; + --ds-color-info-base-default: #0A71C0; + --ds-color-info-base-hover: #085ea0; + --ds-color-info-base-active: #074b80; + --ds-color-info-text-subtle: #0966ac; + --ds-color-info-text-default: #042d4d; + --ds-color-info-contrast-default: #ffffff; + --ds-color-info-contrast-subtle: #f3f8fc; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #fefefe; + --ds-color-focus-outer: #002d54; +color-scheme: light; +} + +@media (prefers-color-scheme: light) { + [data-ds-color-mode="auto"] { + --ds-global-blue-1: #fefeff; + --ds-global-blue-2: #edf5fa; + --ds-global-blue-3: #d3e5f4; + --ds-global-blue-4: #b7d5ed; + --ds-global-blue-5: #9bc5e5; + --ds-global-blue-6: #94c1e3; + --ds-global-blue-7: #2f86c9; + --ds-global-blue-8: #075089; + --ds-global-blue-9: #0A71C0; + --ds-global-blue-10: #085ea0; + --ds-global-blue-11: #074b80; + --ds-global-blue-12: #0966ac; + --ds-global-blue-13: #042d4d; + --ds-global-blue-contrast-1: #ffffff; + --ds-global-blue-contrast-2: #f3f8fc; + --ds-global-green-1: #fcfefc; + --ds-global-green-2: #ecf6ed; + --ds-global-green-3: #cfe9d3; + --ds-global-green-4: #b3dcb8; + --ds-global-green-5: #95ce9d; + --ds-global-green-6: #8bca94; + --ds-global-green-7: #189528; + --ds-global-green-8: #045a10; + --ds-global-green-9: #078D19; + --ds-global-green-10: #067615; + --ds-global-green-11: #056011; + --ds-global-green-12: #067314; + --ds-global-green-13: #033409; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #000401; + --ds-global-orange-1: #fffefd; + --ds-global-orange-2: #fbf1ec; + --ds-global-orange-3: #f4ddd0; + --ds-global-orange-4: #eecab7; + --ds-global-orange-5: #e7b69c; + --ds-global-orange-6: #e5b094; + --ds-global-orange-7: #cc632b; + --ds-global-orange-8: #7e3a15; + --ds-global-orange-9: #CA5C21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #a1491a; + --ds-global-orange-13: #47210c; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #0d0602; + --ds-global-purple-1: #fefefe; + --ds-global-purple-2: #f5f2f9; + --ds-global-purple-3: #e7dfef; + --ds-global-purple-4: #d9cce6; + --ds-global-purple-5: #ccbadd; + --ds-global-purple-6: #c7b4da; + --ds-global-purple-7: #9572b9; + --ds-global-purple-8: #663399; + --ds-global-purple-9: #663299; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #7b4ea7; + --ds-global-purple-13: #3b1d59; + --ds-global-purple-contrast-1: #ffffff; + --ds-global-purple-contrast-2: #eee8f3; + --ds-global-red-1: #fffefe; + --ds-global-red-2: #fbf1f1; + --ds-global-red-3: #f5dcdc; + --ds-global-red-4: #f0c7c7; + --ds-global-red-5: #eab3b3; + --ds-global-red-6: #e8acac; + --ds-global-red-7: #d25b5b; + --ds-global-red-8: #9a1616; + --ds-global-red-9: #C01B1B; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #c22020; + --ds-global-red-13: #5a0d0d; + --ds-global-red-contrast-1: #ffffff; + --ds-global-red-contrast-2: #f6dfdf; + --ds-global-yellow-1: #fffefc; + --ds-global-yellow-2: #fbf2d3; + --ds-global-yellow-3: #f5e19b; + --ds-global-yellow-4: #efcf5d; + --ds-global-yellow-5: #e6bc27; + --ds-global-yellow-6: #e0b726; + --ds-global-yellow-7: #9a7e1a; + --ds-global-yellow-8: #5d4c10; + --ds-global-yellow-9: #EABF28; + --ds-global-yellow-10: #d0aa24; + --ds-global-yellow-11: #b7951f; + --ds-global-yellow-12: #776114; + --ds-global-yellow-13: #352b09; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #fefeff; + --ds-color-accent-2: #eef4fa; + --ds-color-accent-3: #d1e3f3; + --ds-color-accent-4: #bad5ec; + --ds-color-accent-5: #a1c5e5; + --ds-color-accent-6: #97bfe3; + --ds-color-accent-7: #3885c9; + --ds-color-accent-8: #014e93; + --ds-color-accent-9: #0163ba; + --ds-color-accent-10: #015097; + --ds-color-accent-11: #013f75; + --ds-color-accent-12: #0163ba; + --ds-color-accent-13: #002d54; + --ds-color-accent-contrast-1: #ffffff; + --ds-color-accent-contrast-2: #dbe9f5; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #fefefe; + --ds-color-neutral-2: #f3f4f5; + --ds-color-neutral-3: #e1e3e5; + --ds-color-neutral-4: #ced1d4; + --ds-color-neutral-5: #bdc1c6; + --ds-color-neutral-6: #b8bcc1; + --ds-color-neutral-7: #7a818c; + --ds-color-neutral-8: #444e5d; + --ds-color-neutral-9: #1e2b3c; + --ds-color-neutral-10: #303c4b; + --ds-color-neutral-11: #444e5d; + --ds-color-neutral-12: #5b6471; + --ds-color-neutral-13: #202c3d; + --ds-color-neutral-contrast-1: #ffffff; + --ds-color-neutral-contrast-2: #bbbfc4; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #fefeff; + --ds-color-brand1-2: #eef4fa; + --ds-color-brand1-3: #d1e3f3; + --ds-color-brand1-4: #bad5ec; + --ds-color-brand1-5: #a1c5e5; + --ds-color-brand1-6: #97bfe3; + --ds-color-brand1-7: #3885c9; + --ds-color-brand1-8: #014e93; + --ds-color-brand1-9: #0163ba; + --ds-color-brand1-10: #015097; + --ds-color-brand1-11: #013f75; + --ds-color-brand1-12: #0163ba; + --ds-color-brand1-13: #002d54; + --ds-color-brand1-contrast-1: #ffffff; + --ds-color-brand1-contrast-2: #dbe9f5; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #fefefe; + --ds-color-brand2-2: #f4f3f6; + --ds-color-brand2-3: #e3e1e8; + --ds-color-brand2-4: #d3d0db; + --ds-color-brand2-5: #c3bfce; + --ds-color-brand2-6: #beb9c9; + --ds-color-brand2-7: #857d9b; + --ds-color-brand2-8: #534671; + --ds-color-brand2-9: #3f3161; + --ds-color-brand2-10: #514570; + --ds-color-brand2-11: #64587f; + --ds-color-brand2-12: #685d83; + --ds-color-brand2-13: #30254a; + --ds-color-brand2-contrast-1: #ffffff; + --ds-color-brand2-contrast-2: #d3d0db; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #fffefe; + --ds-color-brand3-2: #fdf1f3; + --ds-color-brand3-3: #f9dadf; + --ds-color-brand3-4: #f6c4cc; + --ds-color-brand3-5: #f3aeb8; + --ds-color-brand3-6: #f2a7b3; + --ds-color-brand3-7: #e4475f; + --ds-color-brand3-8: #941f31; + --ds-color-brand3-9: #e02f4a; + --ds-color-brand3-10: #bc273e; + --ds-color-brand3-11: #982032; + --ds-color-brand3-12: #bc273e; + --ds-color-brand3-13: #56121d; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #000000; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #fefeff; + --ds-color-info-background-subtle: #edf5fa; + --ds-color-info-surface-default: #d3e5f4; + --ds-color-info-surface-hover: #b7d5ed; + --ds-color-info-surface-active: #9bc5e5; + --ds-color-info-border-subtle: #94c1e3; + --ds-color-info-border-default: #2f86c9; + --ds-color-info-border-strong: #075089; + --ds-color-info-base-default: #0A71C0; + --ds-color-info-base-hover: #085ea0; + --ds-color-info-base-active: #074b80; + --ds-color-info-text-subtle: #0966ac; + --ds-color-info-text-default: #042d4d; + --ds-color-info-contrast-default: #ffffff; + --ds-color-info-contrast-subtle: #f3f8fc; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #fefefe; + --ds-color-focus-outer: #002d54; +color-scheme: light; +} + +} + +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.typography.secondary { +[data-ds-typography="secondary"] { + --ds-font-family: IBM Plex Mono; + --ds-font-weight-medium: 400; + --ds-font-weight-semibold: 700; + --ds-font-weight-regular: 400; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --ds-letter-spacing-7: 0.25%; + --ds-letter-spacing-8: 0.5%; + --ds-letter-spacing-9: 1.5%; + + .ds-error_message--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-error_message--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-error_message--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-error_message--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-label--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-label--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-long--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-long--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-short--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-short--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-ingress--sm { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-ingress--md { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--lg { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-heading--2xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--xs { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--sm { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-5); + } + + .ds-heading--md { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-3); + } + + .ds-heading--lg { + font-size: var(--ds-font-size-9); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-2); + } + + .ds-heading--xl { + font-size: var(--ds-font-size-10); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-heading--2xl { + font-size: var(--ds-font-size-11); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-font-weight--medium { + font-weight: 400; + } + + .ds-font-weight--semibold { + font-weight: 700; + } + + .ds-font-weight--regular { + font-weight: 400; + } + + .ds-line-height--sm { + line-height: 1.3; + } + + .ds-line-height--md { + line-height: 1.5; + } + + .ds-line-height--lg { + line-height: 1.7; + } +} +} +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.semantic { +:root { + --ds-typography-heading-2xl: 500 3.75rem/1.3 'Helvetica Neue'; + --ds-typography-heading-xl: 500 3rem/1.3 'Helvetica Neue'; + --ds-typography-heading-lg: 500 2.25rem/1.3 'Helvetica Neue'; + --ds-typography-heading-md: 500 1.875rem/1.3 'Helvetica Neue'; + --ds-typography-heading-sm: 500 1.5rem/1.3 'Helvetica Neue'; + --ds-typography-heading-xs: 500 1.3125rem/1.3 'Helvetica Neue'; + --ds-typography-heading-2xs: 500 1.125rem/1.3 'Helvetica Neue'; + --ds-typography-ingress-lg: 400 1.875rem/1.7 'Helvetica Neue'; + --ds-typography-ingress-md: 400 1.5rem/1.7 'Helvetica Neue'; + --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Helvetica Neue'; + --ds-typography-ingress-xs: 400 1.125rem/1.7 'Helvetica Neue'; + --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Helvetica Neue'; + --ds-typography-paragraph-md: 400 1.125rem/1.5 'Helvetica Neue'; + --ds-typography-paragraph-sm: 400 1rem/1.5 'Helvetica Neue'; + --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Helvetica Neue'; + --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Helvetica Neue'; + --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Helvetica Neue'; + --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Helvetica Neue'; + --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Helvetica Neue'; + --ds-typography-paragraph-long-lg: 400 1.3125rem/1.7 'Helvetica Neue'; + --ds-typography-paragraph-long-md: 400 1.125rem/1.7 'Helvetica Neue'; + --ds-typography-paragraph-long-sm: 400 1rem/1.7 'Helvetica Neue'; + --ds-typography-paragraph-long-xs: 400 0.875rem/1.7 'Helvetica Neue'; + --ds-typography-label-lg: 500 1.3125rem/1.3 'Helvetica Neue'; + --ds-typography-label-md: 500 1.125rem/1.3 'Helvetica Neue'; + --ds-typography-label-sm: 500 1rem/1.3 'Helvetica Neue'; + --ds-typography-label-xs: 500 0.875rem/1.3 'Helvetica Neue'; + --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Helvetica Neue'; + --ds-typography-error_message-md: 400 1.125rem/1.3 'Helvetica Neue'; + --ds-typography-error_message-sm: 400 1rem/1.3 'Helvetica Neue'; + --ds-typography-error_message-xs: 400 0.875rem/1.3 'Helvetica Neue'; + --ds-disabled-opacity: 30%; + --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5); + --ds-border-radius-md: calc(var(--ds-border-radius-base)*1); + --ds-border-radius-lg: calc(var(--ds-border-radius-base)*2); + --ds-border-radius-xl: calc(var(--ds-border-radius-base)*3); + --ds-border-radius-2xl: calc(var(--ds-border-radius-base)*4); + --ds-border-radius-3xl: calc(var(--ds-border-radius-base)*6); + --ds-border-radius-4xl: calc(var(--ds-border-radius-base)*8); + --ds-border-radius-full: 624.9375rem; + --ds-border-radius-base: 0.25rem; + --ds-spacing-0: calc(var(--ds-spacing-base)*0); + --ds-spacing-1: calc(var(--ds-spacing-base)*1); + --ds-spacing-2: calc(var(--ds-spacing-base)*2); + --ds-spacing-3: calc(var(--ds-spacing-base)*3); + --ds-spacing-4: calc(var(--ds-spacing-base)*4); + --ds-spacing-5: calc(var(--ds-spacing-base)*5); + --ds-spacing-6: calc(var(--ds-spacing-base)*6); + --ds-spacing-7: calc(var(--ds-spacing-base)*7); + --ds-spacing-8: calc(var(--ds-spacing-base)*8); + --ds-spacing-9: calc(var(--ds-spacing-base)*9); + --ds-spacing-10: calc(var(--ds-spacing-base)*10); + --ds-spacing-11: calc(var(--ds-spacing-base)*11); + --ds-spacing-12: calc(var(--ds-spacing-base)*12); + --ds-spacing-13: calc(var(--ds-spacing-base)*13); + --ds-spacing-14: calc(var(--ds-spacing-base)*14); + --ds-spacing-15: calc(var(--ds-spacing-base)*15); + --ds-spacing-18: calc(var(--ds-spacing-base)*18); + --ds-spacing-22: calc(var(--ds-spacing-base)*22); + --ds-spacing-26: calc(var(--ds-spacing-base)*26); + --ds-spacing-30: calc(var(--ds-spacing-base)*30); + --ds-spacing-base: 0.25rem; + --ds-sizing-0: calc(var(--ds-sizing-base)*0); + --ds-sizing-1: calc(var(--ds-sizing-base)*1); + --ds-sizing-2: calc(var(--ds-sizing-base)*2); + --ds-sizing-3: calc(var(--ds-sizing-base)*3); + --ds-sizing-4: calc(var(--ds-sizing-base)*4); + --ds-sizing-5: calc(var(--ds-sizing-base)*5); + --ds-sizing-6: calc(var(--ds-sizing-base)*6); + --ds-sizing-7: calc(var(--ds-sizing-base)*7); + --ds-sizing-8: calc(var(--ds-sizing-base)*8); + --ds-sizing-9: calc(var(--ds-sizing-base)*9); + --ds-sizing-10: calc(var(--ds-sizing-base)*10); + --ds-sizing-11: calc(var(--ds-sizing-base)*11); + --ds-sizing-12: calc(var(--ds-sizing-base)*12); + --ds-sizing-13: calc(var(--ds-sizing-base)*13); + --ds-sizing-14: calc(var(--ds-sizing-base)*14); + --ds-sizing-15: calc(var(--ds-sizing-base)*15); + --ds-sizing-18: calc(var(--ds-sizing-base)*18); + --ds-sizing-22: calc(var(--ds-sizing-base)*22); + --ds-sizing-26: calc(var(--ds-sizing-base)*26); + --ds-sizing-30: calc(var(--ds-sizing-base)*30); + --ds-sizing-base: 0.25rem; + --ds-border-width-default: 1px; + --ds-border-width-highlight: 2px; + --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12); + --ds-shadow-sm: 0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1); + --ds-shadow-md: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12); + --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14); + --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16); +} + +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color-mode.dark { +[data-ds-color-mode="dark"] { + --ds-global-blue-1: #031d30; + --ds-global-blue-2: #032540; + --ds-global-blue-3: #043256; + --ds-global-blue-4: #063f6c; + --ds-global-blue-5: #074d84; + --ds-global-blue-6: #075490; + --ds-global-blue-7: #0c72c1; + --ds-global-blue-8: #98c3e5; + --ds-global-blue-9: #2a84c8; + --ds-global-blue-10: #0a6dba; + --ds-global-blue-11: #085998; + --ds-global-blue-12: #6ba9d9; + --ds-global-blue-13: #d3e5f4; + --ds-global-blue-contrast-1: #000000; + --ds-global-blue-contrast-2: #040c13; + --ds-global-green-1: #022106; + --ds-global-green-2: #022b08; + --ds-global-green-3: #03380a; + --ds-global-green-4: #04480d; + --ds-global-green-5: #045810; + --ds-global-green-6: #056011; + --ds-global-green-7: #068117; + --ds-global-green-8: #90cc98; + --ds-global-green-9: #078818; + --ds-global-green-10: #067114; + --ds-global-green-11: #045a10; + --ds-global-green-12: #5fb56b; + --ds-global-green-13: #cfe9d3; + --ds-global-green-contrast-1: #ffffff; + --ds-global-green-contrast-2: #f9fcf9; + --ds-global-orange-1: #2e1508; + --ds-global-orange-2: #3a1b0a; + --ds-global-orange-3: #50240d; + --ds-global-orange-4: #652e10; + --ds-global-orange-5: #7a3814; + --ds-global-orange-6: #863d16; + --ds-global-orange-7: #b5531e; + --ds-global-orange-8: #e6b398; + --ds-global-orange-9: #ba541e; + --ds-global-orange-10: #994619; + --ds-global-orange-11: #7a3814; + --ds-global-orange-12: #db9169; + --ds-global-orange-13: #f4ddd0; + --ds-global-orange-contrast-1: #ffffff; + --ds-global-orange-contrast-2: #fcf8f6; + --ds-global-purple-1: #251238; + --ds-global-purple-2: #301748; + --ds-global-purple-3: #402060; + --ds-global-purple-4: #52287a; + --ds-global-purple-5: #643196; + --ds-global-purple-6: #6b399d; + --ds-global-purple-7: #865daf; + --ds-global-purple-8: #c9b7db; + --ds-global-purple-9: #b298cc; + --ds-global-purple-10: #a181c0; + --ds-global-purple-11: #8f69b5; + --ds-global-purple-12: #b298cc; + --ds-global-purple-13: #e7dfef; + --ds-global-purple-contrast-1: #000000; + --ds-global-purple-contrast-2: #18141b; + --ds-global-red-1: #3b0808; + --ds-global-red-2: #4b0a0a; + --ds-global-red-3: #620e0e; + --ds-global-red-4: #7c1212; + --ds-global-red-5: #961515; + --ds-global-red-6: #a31717; + --ds-global-red-7: #c93c3c; + --ds-global-red-8: #e9b0b0; + --ds-global-red-9: #d76e6e; + --ds-global-red-10: #ce4e4e; + --ds-global-red-11: #c32727; + --ds-global-red-12: #df8d8d; + --ds-global-red-13: #f5dcdc; + --ds-global-red-contrast-1: #000000; + --ds-global-red-contrast-2: #271414; + --ds-global-yellow-1: #221b06; + --ds-global-yellow-2: #2b2307; + --ds-global-yellow-3: #3a300a; + --ds-global-yellow-4: #4a3d0d; + --ds-global-yellow-5: #5a4a0f; + --ds-global-yellow-6: #635011; + --ds-global-yellow-7: #856d17; + --ds-global-yellow-8: #e4ba27; + --ds-global-yellow-9: #3d310a; + --ds-global-yellow-10: #52430e; + --ds-global-yellow-11: #695512; + --ds-global-yellow-12: #c39f21; + --ds-global-yellow-13: #f5e19b; + --ds-global-yellow-contrast-1: #ffffff; + --ds-global-yellow-contrast-2: #ccc9bf; + --ds-color-accent-1: #001c36; + --ds-color-accent-2: #002545; + --ds-color-accent-3: #00315b; + --ds-color-accent-4: #013f75; + --ds-color-accent-5: #014b8e; + --ds-color-accent-6: #01539b; + --ds-color-accent-7: #1971c0; + --ds-color-accent-8: #9bc2e4; + --ds-color-accent-9: #4b90ce; + --ds-color-accent-10: #277ac4; + --ds-color-accent-11: #0163ba; + --ds-color-accent-12: #72a8d9; + --ds-color-accent-13: #d1e3f3; + --ds-color-accent-contrast-1: #000000; + --ds-color-accent-contrast-2: #0d1823; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #131c27; + --ds-color-neutral-2: #192433; + --ds-color-neutral-3: #243142; + --ds-color-neutral-4: #333e4e; + --ds-color-neutral-5: #424d5b; + --ds-color-neutral-6: #495361; + --ds-color-neutral-7: #67707c; + --ds-color-neutral-8: #bbbfc4; + --ds-color-neutral-9: #a6abb2; + --ds-color-neutral-10: #90969e; + --ds-color-neutral-11: #7a818c; + --ds-color-neutral-12: #9ea3ab; + --ds-color-neutral-13: #e1e3e5; + --ds-color-neutral-contrast-1: #000000; + --ds-color-neutral-contrast-2: #1b1b1d; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #001c36; + --ds-color-brand1-2: #002545; + --ds-color-brand1-3: #00315b; + --ds-color-brand1-4: #013f75; + --ds-color-brand1-5: #014b8e; + --ds-color-brand1-6: #01539b; + --ds-color-brand1-7: #1971c0; + --ds-color-brand1-8: #9bc2e4; + --ds-color-brand1-9: #4b90ce; + --ds-color-brand1-10: #277ac4; + --ds-color-brand1-11: #0163ba; + --ds-color-brand1-12: #72a8d9; + --ds-color-brand1-13: #d1e3f3; + --ds-color-brand1-contrast-1: #000000; + --ds-color-brand1-contrast-2: #0d1823; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #1e182f; + --ds-color-brand2-2: #271f3c; + --ds-color-brand2-3: #352952; + --ds-color-brand2-4: #433665; + --ds-color-brand2-5: #514570; + --ds-color-brand2-6: #584b75; + --ds-color-brand2-7: #746a8d; + --ds-color-brand2-8: #c0bccb; + --ds-color-brand2-9: #aea8bc; + --ds-color-brand2-10: #9992ab; + --ds-color-brand2-11: #857d9b; + --ds-color-brand2-12: #a6a0b6; + --ds-color-brand2-13: #e3e1e8; + --ds-color-brand2-contrast-1: #000000; + --ds-color-brand2-contrast-2: #1c1b1f; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #370c12; + --ds-color-brand3-2: #460f17; + --ds-color-brand3-3: #5f141f; + --ds-color-brand3-4: #761927; + --ds-color-brand3-5: #901e30; + --ds-color-brand3-6: #9d2134; + --ds-color-brand3-7: #d32c46; + --ds-color-brand3-8: #f2abb6; + --ds-color-brand3-9: #e02f4a; + --ds-color-brand3-10: #bc273e; + --ds-color-brand3-11: #982032; + --ds-color-brand3-12: #ed8494; + --ds-color-brand3-13: #f9dadf; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #000000; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #031d30; + --ds-color-info-background-subtle: #032540; + --ds-color-info-surface-default: #043256; + --ds-color-info-surface-hover: #063f6c; + --ds-color-info-surface-active: #074d84; + --ds-color-info-border-subtle: #075490; + --ds-color-info-border-default: #0c72c1; + --ds-color-info-border-strong: #98c3e5; + --ds-color-info-base-default: #2a84c8; + --ds-color-info-base-hover: #0a6dba; + --ds-color-info-base-active: #085998; + --ds-color-info-text-subtle: #6ba9d9; + --ds-color-info-text-default: #d3e5f4; + --ds-color-info-contrast-default: #000000; + --ds-color-info-contrast-subtle: #040c13; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #131c27; + --ds-color-focus-outer: #d1e3f3; +color-scheme: dark; +} + +@media (prefers-color-scheme: dark) { + [data-ds-color-mode="auto"] { + --ds-global-blue-1: #031d30; + --ds-global-blue-2: #032540; + --ds-global-blue-3: #043256; + --ds-global-blue-4: #063f6c; + --ds-global-blue-5: #074d84; + --ds-global-blue-6: #075490; + --ds-global-blue-7: #0c72c1; + --ds-global-blue-8: #98c3e5; + --ds-global-blue-9: #2a84c8; + --ds-global-blue-10: #0a6dba; + --ds-global-blue-11: #085998; + --ds-global-blue-12: #6ba9d9; + --ds-global-blue-13: #d3e5f4; + --ds-global-blue-contrast-1: #000000; + --ds-global-blue-contrast-2: #040c13; + --ds-global-green-1: #022106; + --ds-global-green-2: #022b08; + --ds-global-green-3: #03380a; + --ds-global-green-4: #04480d; + --ds-global-green-5: #045810; + --ds-global-green-6: #056011; + --ds-global-green-7: #068117; + --ds-global-green-8: #90cc98; + --ds-global-green-9: #078818; + --ds-global-green-10: #067114; + --ds-global-green-11: #045a10; + --ds-global-green-12: #5fb56b; + --ds-global-green-13: #cfe9d3; + --ds-global-green-contrast-1: #ffffff; + --ds-global-green-contrast-2: #f9fcf9; + --ds-global-orange-1: #2e1508; + --ds-global-orange-2: #3a1b0a; + --ds-global-orange-3: #50240d; + --ds-global-orange-4: #652e10; + --ds-global-orange-5: #7a3814; + --ds-global-orange-6: #863d16; + --ds-global-orange-7: #b5531e; + --ds-global-orange-8: #e6b398; + --ds-global-orange-9: #ba541e; + --ds-global-orange-10: #994619; + --ds-global-orange-11: #7a3814; + --ds-global-orange-12: #db9169; + --ds-global-orange-13: #f4ddd0; + --ds-global-orange-contrast-1: #ffffff; + --ds-global-orange-contrast-2: #fcf8f6; + --ds-global-purple-1: #251238; + --ds-global-purple-2: #301748; + --ds-global-purple-3: #402060; + --ds-global-purple-4: #52287a; + --ds-global-purple-5: #643196; + --ds-global-purple-6: #6b399d; + --ds-global-purple-7: #865daf; + --ds-global-purple-8: #c9b7db; + --ds-global-purple-9: #b298cc; + --ds-global-purple-10: #a181c0; + --ds-global-purple-11: #8f69b5; + --ds-global-purple-12: #b298cc; + --ds-global-purple-13: #e7dfef; + --ds-global-purple-contrast-1: #000000; + --ds-global-purple-contrast-2: #18141b; + --ds-global-red-1: #3b0808; + --ds-global-red-2: #4b0a0a; + --ds-global-red-3: #620e0e; + --ds-global-red-4: #7c1212; + --ds-global-red-5: #961515; + --ds-global-red-6: #a31717; + --ds-global-red-7: #c93c3c; + --ds-global-red-8: #e9b0b0; + --ds-global-red-9: #d76e6e; + --ds-global-red-10: #ce4e4e; + --ds-global-red-11: #c32727; + --ds-global-red-12: #df8d8d; + --ds-global-red-13: #f5dcdc; + --ds-global-red-contrast-1: #000000; + --ds-global-red-contrast-2: #271414; + --ds-global-yellow-1: #221b06; + --ds-global-yellow-2: #2b2307; + --ds-global-yellow-3: #3a300a; + --ds-global-yellow-4: #4a3d0d; + --ds-global-yellow-5: #5a4a0f; + --ds-global-yellow-6: #635011; + --ds-global-yellow-7: #856d17; + --ds-global-yellow-8: #e4ba27; + --ds-global-yellow-9: #3d310a; + --ds-global-yellow-10: #52430e; + --ds-global-yellow-11: #695512; + --ds-global-yellow-12: #c39f21; + --ds-global-yellow-13: #f5e19b; + --ds-global-yellow-contrast-1: #ffffff; + --ds-global-yellow-contrast-2: #ccc9bf; + --ds-color-accent-1: #001c36; + --ds-color-accent-2: #002545; + --ds-color-accent-3: #00315b; + --ds-color-accent-4: #013f75; + --ds-color-accent-5: #014b8e; + --ds-color-accent-6: #01539b; + --ds-color-accent-7: #1971c0; + --ds-color-accent-8: #9bc2e4; + --ds-color-accent-9: #4b90ce; + --ds-color-accent-10: #277ac4; + --ds-color-accent-11: #0163ba; + --ds-color-accent-12: #72a8d9; + --ds-color-accent-13: #d1e3f3; + --ds-color-accent-contrast-1: #000000; + --ds-color-accent-contrast-2: #0d1823; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #131c27; + --ds-color-neutral-2: #192433; + --ds-color-neutral-3: #243142; + --ds-color-neutral-4: #333e4e; + --ds-color-neutral-5: #424d5b; + --ds-color-neutral-6: #495361; + --ds-color-neutral-7: #67707c; + --ds-color-neutral-8: #bbbfc4; + --ds-color-neutral-9: #a6abb2; + --ds-color-neutral-10: #90969e; + --ds-color-neutral-11: #7a818c; + --ds-color-neutral-12: #9ea3ab; + --ds-color-neutral-13: #e1e3e5; + --ds-color-neutral-contrast-1: #000000; + --ds-color-neutral-contrast-2: #1b1b1d; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #001c36; + --ds-color-brand1-2: #002545; + --ds-color-brand1-3: #00315b; + --ds-color-brand1-4: #013f75; + --ds-color-brand1-5: #014b8e; + --ds-color-brand1-6: #01539b; + --ds-color-brand1-7: #1971c0; + --ds-color-brand1-8: #9bc2e4; + --ds-color-brand1-9: #4b90ce; + --ds-color-brand1-10: #277ac4; + --ds-color-brand1-11: #0163ba; + --ds-color-brand1-12: #72a8d9; + --ds-color-brand1-13: #d1e3f3; + --ds-color-brand1-contrast-1: #000000; + --ds-color-brand1-contrast-2: #0d1823; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #1e182f; + --ds-color-brand2-2: #271f3c; + --ds-color-brand2-3: #352952; + --ds-color-brand2-4: #433665; + --ds-color-brand2-5: #514570; + --ds-color-brand2-6: #584b75; + --ds-color-brand2-7: #746a8d; + --ds-color-brand2-8: #c0bccb; + --ds-color-brand2-9: #aea8bc; + --ds-color-brand2-10: #9992ab; + --ds-color-brand2-11: #857d9b; + --ds-color-brand2-12: #a6a0b6; + --ds-color-brand2-13: #e3e1e8; + --ds-color-brand2-contrast-1: #000000; + --ds-color-brand2-contrast-2: #1c1b1f; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #370c12; + --ds-color-brand3-2: #460f17; + --ds-color-brand3-3: #5f141f; + --ds-color-brand3-4: #761927; + --ds-color-brand3-5: #901e30; + --ds-color-brand3-6: #9d2134; + --ds-color-brand3-7: #d32c46; + --ds-color-brand3-8: #f2abb6; + --ds-color-brand3-9: #e02f4a; + --ds-color-brand3-10: #bc273e; + --ds-color-brand3-11: #982032; + --ds-color-brand3-12: #ed8494; + --ds-color-brand3-13: #f9dadf; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #000000; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #031d30; + --ds-color-info-background-subtle: #032540; + --ds-color-info-surface-default: #043256; + --ds-color-info-surface-hover: #063f6c; + --ds-color-info-surface-active: #074d84; + --ds-color-info-border-subtle: #075490; + --ds-color-info-border-default: #0c72c1; + --ds-color-info-border-strong: #98c3e5; + --ds-color-info-base-default: #2a84c8; + --ds-color-info-base-hover: #0a6dba; + --ds-color-info-base-active: #085998; + --ds-color-info-text-subtle: #6ba9d9; + --ds-color-info-text-default: #d3e5f4; + --ds-color-info-contrast-default: #000000; + --ds-color-info-contrast-subtle: #040c13; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #131c27; + --ds-color-focus-outer: #d1e3f3; +color-scheme: dark; +} + +} + +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.typography.primary { +:root, [data-ds-typography="primary"] { + --ds-font-family: Helvetica Neue; + --ds-font-weight-medium: 500; + --ds-font-weight-semibold: 700; + --ds-font-weight-regular: 400; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --ds-letter-spacing-7: 0.25%; + --ds-letter-spacing-8: 0.5%; + --ds-letter-spacing-9: 1.5%; + + .ds-error_message--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-error_message--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-error_message--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-error_message--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-label--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-label--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-long--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-long--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-short--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-short--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-ingress--sm { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-ingress--md { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--lg { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-heading--2xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--xs { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--sm { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-5); + } + + .ds-heading--md { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-3); + } + + .ds-heading--lg { + font-size: var(--ds-font-size-9); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-2); + } + + .ds-heading--xl { + font-size: var(--ds-font-size-10); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-heading--2xl { + font-size: var(--ds-font-size-11); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-font-weight--medium { + font-weight: 500; + } + + .ds-font-weight--semibold { + font-weight: 700; + } + + .ds-font-weight--regular { + font-weight: 400; + } + + .ds-line-height--sm { + line-height: 1.3; + } + + .ds-line-height--md { + line-height: 1.5; + } + + .ds-line-height--lg { + line-height: 1.7; + } +} +} \ No newline at end of file diff --git a/packages/theme/brand/digdir.css b/packages/theme/brand/digdir.css index 2fcd7df598..be9fb349a9 100644 --- a/packages/theme/brand/digdir.css +++ b/packages/theme/brand/digdir.css @@ -2,8 +2,1899 @@ @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components; -@import url('digdir/color-mode/light.css'); -@import url('digdir/typography/secondary.css'); -@import url('digdir/semantic.css'); -@import url('digdir/color-mode/dark.css'); -@import url('digdir/typography/primary.css'); \ No newline at end of file +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color-mode.light { +:root, [data-ds-color-mode="light"] { + --ds-global-blue-1: #fefeff; + --ds-global-blue-2: #edf5fa; + --ds-global-blue-3: #d3e5f4; + --ds-global-blue-4: #b7d5ed; + --ds-global-blue-5: #9bc5e5; + --ds-global-blue-6: #94c1e3; + --ds-global-blue-7: #2f86c9; + --ds-global-blue-8: #075089; + --ds-global-blue-9: #0A71C0; + --ds-global-blue-10: #085ea0; + --ds-global-blue-11: #074b80; + --ds-global-blue-12: #0966ac; + --ds-global-blue-13: #042d4d; + --ds-global-blue-contrast-1: #ffffff; + --ds-global-blue-contrast-2: #f3f8fc; + --ds-global-green-1: #fcfefc; + --ds-global-green-2: #ecf6ed; + --ds-global-green-3: #cfe9d3; + --ds-global-green-4: #b3dcb8; + --ds-global-green-5: #95ce9d; + --ds-global-green-6: #8bca94; + --ds-global-green-7: #189528; + --ds-global-green-8: #045a10; + --ds-global-green-9: #078D19; + --ds-global-green-10: #067615; + --ds-global-green-11: #056011; + --ds-global-green-12: #067314; + --ds-global-green-13: #033409; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #000401; + --ds-global-orange-1: #fffefd; + --ds-global-orange-2: #fbf1ec; + --ds-global-orange-3: #f4ddd0; + --ds-global-orange-4: #eecab7; + --ds-global-orange-5: #e7b69c; + --ds-global-orange-6: #e5b094; + --ds-global-orange-7: #cc632b; + --ds-global-orange-8: #7e3a15; + --ds-global-orange-9: #CA5C21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #a1491a; + --ds-global-orange-13: #47210c; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #0d0602; + --ds-global-purple-1: #fefefe; + --ds-global-purple-2: #f5f2f9; + --ds-global-purple-3: #e7dfef; + --ds-global-purple-4: #d9cce6; + --ds-global-purple-5: #ccbadd; + --ds-global-purple-6: #c7b4da; + --ds-global-purple-7: #9572b9; + --ds-global-purple-8: #663399; + --ds-global-purple-9: #663299; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #7b4ea7; + --ds-global-purple-13: #3b1d59; + --ds-global-purple-contrast-1: #ffffff; + --ds-global-purple-contrast-2: #eee8f3; + --ds-global-red-1: #fffefe; + --ds-global-red-2: #fbf1f1; + --ds-global-red-3: #f5dcdc; + --ds-global-red-4: #f0c7c7; + --ds-global-red-5: #eab3b3; + --ds-global-red-6: #e8acac; + --ds-global-red-7: #d25b5b; + --ds-global-red-8: #9a1616; + --ds-global-red-9: #C01B1B; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #c22020; + --ds-global-red-13: #5a0d0d; + --ds-global-red-contrast-1: #ffffff; + --ds-global-red-contrast-2: #f6dfdf; + --ds-global-yellow-1: #fffefc; + --ds-global-yellow-2: #fbf2d3; + --ds-global-yellow-3: #f5e19b; + --ds-global-yellow-4: #efcf5d; + --ds-global-yellow-5: #e6bc27; + --ds-global-yellow-6: #e0b726; + --ds-global-yellow-7: #9a7e1a; + --ds-global-yellow-8: #5d4c10; + --ds-global-yellow-9: #EABF28; + --ds-global-yellow-10: #d0aa24; + --ds-global-yellow-11: #b7951f; + --ds-global-yellow-12: #776114; + --ds-global-yellow-13: #352b09; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #fefeff; + --ds-color-accent-2: #eef4fa; + --ds-color-accent-3: #d1e3f3; + --ds-color-accent-4: #bad5ec; + --ds-color-accent-5: #a1c5e5; + --ds-color-accent-6: #97bfe3; + --ds-color-accent-7: #3885c9; + --ds-color-accent-8: #014e93; + --ds-color-accent-9: #0163ba; + --ds-color-accent-10: #015097; + --ds-color-accent-11: #013f75; + --ds-color-accent-12: #0163ba; + --ds-color-accent-13: #002d54; + --ds-color-accent-contrast-1: #ffffff; + --ds-color-accent-contrast-2: #dbe9f5; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #fefefe; + --ds-color-neutral-2: #f3f4f5; + --ds-color-neutral-3: #e1e3e5; + --ds-color-neutral-4: #ced1d4; + --ds-color-neutral-5: #bdc1c6; + --ds-color-neutral-6: #b8bcc1; + --ds-color-neutral-7: #7a818c; + --ds-color-neutral-8: #444e5d; + --ds-color-neutral-9: #1e2b3c; + --ds-color-neutral-10: #303c4b; + --ds-color-neutral-11: #444e5d; + --ds-color-neutral-12: #5b6471; + --ds-color-neutral-13: #202c3d; + --ds-color-neutral-contrast-1: #ffffff; + --ds-color-neutral-contrast-2: #bbbfc4; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #fffefe; + --ds-color-brand1-2: #fef0f1; + --ds-color-brand1-3: #fcdbdc; + --ds-color-brand1-4: #fbc4c5; + --ds-color-brand1-5: #f9acae; + --ds-color-brand1-6: #f8a5a7; + --ds-color-brand1-7: #d95558; + --ds-color-brand1-8: #833336; + --ds-color-brand1-9: #f35f63; + --ds-color-brand1-10: #d05255; + --ds-color-brand1-11: #af4547; + --ds-color-brand1-12: #a74144; + --ds-color-brand1-13: #4b1e1f; + --ds-color-brand1-contrast-1: #000000; + --ds-color-brand1-contrast-2: #000000; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #fffefc; + --ds-color-brand2-2: #fbf3e0; + --ds-color-brand2-3: #f5dfad; + --ds-color-brand2-4: #f0ce7f; + --ds-color-brand2-5: #e9ba4c; + --ds-color-brand2-6: #e7b43d; + --ds-color-brand2-7: #a57a17; + --ds-color-brand2-8: #63490e; + --ds-color-brand2-9: #e4a920; + --ds-color-brand2-10: #c9951c; + --ds-color-brand2-11: #af8119; + --ds-color-brand2-12: #7e5d12; + --ds-color-brand2-13: #382a08; + --ds-color-brand2-contrast-1: #000000; + --ds-color-brand2-contrast-2: #2b2006; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #fdfeff; + --ds-color-brand3-2: #eaf6fe; + --ds-color-brand3-3: #c8e6fd; + --ds-color-brand3-4: #a9d7fb; + --ds-color-brand3-5: #84c7fa; + --ds-color-brand3-6: #7ac2f9; + --ds-color-brand3-7: #1a85d6; + --ds-color-brand3-8: #105082; + --ds-color-brand3-9: #1e98f5; + --ds-color-brand3-10: #1a83d3; + --ds-color-brand3-11: #166eb2; + --ds-color-brand3-12: #1466a5; + --ds-color-brand3-13: #092e4b; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #010407; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #fefeff; + --ds-color-info-background-subtle: #edf5fa; + --ds-color-info-surface-default: #d3e5f4; + --ds-color-info-surface-hover: #b7d5ed; + --ds-color-info-surface-active: #9bc5e5; + --ds-color-info-border-subtle: #94c1e3; + --ds-color-info-border-default: #2f86c9; + --ds-color-info-border-strong: #075089; + --ds-color-info-base-default: #0A71C0; + --ds-color-info-base-hover: #085ea0; + --ds-color-info-base-active: #074b80; + --ds-color-info-text-subtle: #0966ac; + --ds-color-info-text-default: #042d4d; + --ds-color-info-contrast-default: #ffffff; + --ds-color-info-contrast-subtle: #f3f8fc; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #fefefe; + --ds-color-focus-outer: #002d54; +color-scheme: light; +} + +@media (prefers-color-scheme: light) { + [data-ds-color-mode="auto"] { + --ds-global-blue-1: #fefeff; + --ds-global-blue-2: #edf5fa; + --ds-global-blue-3: #d3e5f4; + --ds-global-blue-4: #b7d5ed; + --ds-global-blue-5: #9bc5e5; + --ds-global-blue-6: #94c1e3; + --ds-global-blue-7: #2f86c9; + --ds-global-blue-8: #075089; + --ds-global-blue-9: #0A71C0; + --ds-global-blue-10: #085ea0; + --ds-global-blue-11: #074b80; + --ds-global-blue-12: #0966ac; + --ds-global-blue-13: #042d4d; + --ds-global-blue-contrast-1: #ffffff; + --ds-global-blue-contrast-2: #f3f8fc; + --ds-global-green-1: #fcfefc; + --ds-global-green-2: #ecf6ed; + --ds-global-green-3: #cfe9d3; + --ds-global-green-4: #b3dcb8; + --ds-global-green-5: #95ce9d; + --ds-global-green-6: #8bca94; + --ds-global-green-7: #189528; + --ds-global-green-8: #045a10; + --ds-global-green-9: #078D19; + --ds-global-green-10: #067615; + --ds-global-green-11: #056011; + --ds-global-green-12: #067314; + --ds-global-green-13: #033409; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #000401; + --ds-global-orange-1: #fffefd; + --ds-global-orange-2: #fbf1ec; + --ds-global-orange-3: #f4ddd0; + --ds-global-orange-4: #eecab7; + --ds-global-orange-5: #e7b69c; + --ds-global-orange-6: #e5b094; + --ds-global-orange-7: #cc632b; + --ds-global-orange-8: #7e3a15; + --ds-global-orange-9: #CA5C21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #a1491a; + --ds-global-orange-13: #47210c; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #0d0602; + --ds-global-purple-1: #fefefe; + --ds-global-purple-2: #f5f2f9; + --ds-global-purple-3: #e7dfef; + --ds-global-purple-4: #d9cce6; + --ds-global-purple-5: #ccbadd; + --ds-global-purple-6: #c7b4da; + --ds-global-purple-7: #9572b9; + --ds-global-purple-8: #663399; + --ds-global-purple-9: #663299; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #7b4ea7; + --ds-global-purple-13: #3b1d59; + --ds-global-purple-contrast-1: #ffffff; + --ds-global-purple-contrast-2: #eee8f3; + --ds-global-red-1: #fffefe; + --ds-global-red-2: #fbf1f1; + --ds-global-red-3: #f5dcdc; + --ds-global-red-4: #f0c7c7; + --ds-global-red-5: #eab3b3; + --ds-global-red-6: #e8acac; + --ds-global-red-7: #d25b5b; + --ds-global-red-8: #9a1616; + --ds-global-red-9: #C01B1B; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #c22020; + --ds-global-red-13: #5a0d0d; + --ds-global-red-contrast-1: #ffffff; + --ds-global-red-contrast-2: #f6dfdf; + --ds-global-yellow-1: #fffefc; + --ds-global-yellow-2: #fbf2d3; + --ds-global-yellow-3: #f5e19b; + --ds-global-yellow-4: #efcf5d; + --ds-global-yellow-5: #e6bc27; + --ds-global-yellow-6: #e0b726; + --ds-global-yellow-7: #9a7e1a; + --ds-global-yellow-8: #5d4c10; + --ds-global-yellow-9: #EABF28; + --ds-global-yellow-10: #d0aa24; + --ds-global-yellow-11: #b7951f; + --ds-global-yellow-12: #776114; + --ds-global-yellow-13: #352b09; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #fefeff; + --ds-color-accent-2: #eef4fa; + --ds-color-accent-3: #d1e3f3; + --ds-color-accent-4: #bad5ec; + --ds-color-accent-5: #a1c5e5; + --ds-color-accent-6: #97bfe3; + --ds-color-accent-7: #3885c9; + --ds-color-accent-8: #014e93; + --ds-color-accent-9: #0163ba; + --ds-color-accent-10: #015097; + --ds-color-accent-11: #013f75; + --ds-color-accent-12: #0163ba; + --ds-color-accent-13: #002d54; + --ds-color-accent-contrast-1: #ffffff; + --ds-color-accent-contrast-2: #dbe9f5; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #fefefe; + --ds-color-neutral-2: #f3f4f5; + --ds-color-neutral-3: #e1e3e5; + --ds-color-neutral-4: #ced1d4; + --ds-color-neutral-5: #bdc1c6; + --ds-color-neutral-6: #b8bcc1; + --ds-color-neutral-7: #7a818c; + --ds-color-neutral-8: #444e5d; + --ds-color-neutral-9: #1e2b3c; + --ds-color-neutral-10: #303c4b; + --ds-color-neutral-11: #444e5d; + --ds-color-neutral-12: #5b6471; + --ds-color-neutral-13: #202c3d; + --ds-color-neutral-contrast-1: #ffffff; + --ds-color-neutral-contrast-2: #bbbfc4; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #fffefe; + --ds-color-brand1-2: #fef0f1; + --ds-color-brand1-3: #fcdbdc; + --ds-color-brand1-4: #fbc4c5; + --ds-color-brand1-5: #f9acae; + --ds-color-brand1-6: #f8a5a7; + --ds-color-brand1-7: #d95558; + --ds-color-brand1-8: #833336; + --ds-color-brand1-9: #f35f63; + --ds-color-brand1-10: #d05255; + --ds-color-brand1-11: #af4547; + --ds-color-brand1-12: #a74144; + --ds-color-brand1-13: #4b1e1f; + --ds-color-brand1-contrast-1: #000000; + --ds-color-brand1-contrast-2: #000000; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #fffefc; + --ds-color-brand2-2: #fbf3e0; + --ds-color-brand2-3: #f5dfad; + --ds-color-brand2-4: #f0ce7f; + --ds-color-brand2-5: #e9ba4c; + --ds-color-brand2-6: #e7b43d; + --ds-color-brand2-7: #a57a17; + --ds-color-brand2-8: #63490e; + --ds-color-brand2-9: #e4a920; + --ds-color-brand2-10: #c9951c; + --ds-color-brand2-11: #af8119; + --ds-color-brand2-12: #7e5d12; + --ds-color-brand2-13: #382a08; + --ds-color-brand2-contrast-1: #000000; + --ds-color-brand2-contrast-2: #2b2006; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #fdfeff; + --ds-color-brand3-2: #eaf6fe; + --ds-color-brand3-3: #c8e6fd; + --ds-color-brand3-4: #a9d7fb; + --ds-color-brand3-5: #84c7fa; + --ds-color-brand3-6: #7ac2f9; + --ds-color-brand3-7: #1a85d6; + --ds-color-brand3-8: #105082; + --ds-color-brand3-9: #1e98f5; + --ds-color-brand3-10: #1a83d3; + --ds-color-brand3-11: #166eb2; + --ds-color-brand3-12: #1466a5; + --ds-color-brand3-13: #092e4b; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #010407; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #fefeff; + --ds-color-info-background-subtle: #edf5fa; + --ds-color-info-surface-default: #d3e5f4; + --ds-color-info-surface-hover: #b7d5ed; + --ds-color-info-surface-active: #9bc5e5; + --ds-color-info-border-subtle: #94c1e3; + --ds-color-info-border-default: #2f86c9; + --ds-color-info-border-strong: #075089; + --ds-color-info-base-default: #0A71C0; + --ds-color-info-base-hover: #085ea0; + --ds-color-info-base-active: #074b80; + --ds-color-info-text-subtle: #0966ac; + --ds-color-info-text-default: #042d4d; + --ds-color-info-contrast-default: #ffffff; + --ds-color-info-contrast-subtle: #f3f8fc; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #fefefe; + --ds-color-focus-outer: #002d54; +color-scheme: light; +} + +} + +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.typography.secondary { +[data-ds-typography="secondary"] { + --ds-font-family: IBM Plex Mono; + --ds-font-weight-medium: 500; + --ds-font-weight-semibold: 600; + --ds-font-weight-regular: 400; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --ds-letter-spacing-7: 0.25%; + --ds-letter-spacing-8: 0.5%; + --ds-letter-spacing-9: 1.5%; + + .ds-error_message--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-error_message--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-error_message--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-error_message--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-label--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-label--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-long--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-long--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-short--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-short--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-ingress--sm { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-ingress--md { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--lg { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-heading--2xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--xs { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--sm { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-5); + } + + .ds-heading--md { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-3); + } + + .ds-heading--lg { + font-size: var(--ds-font-size-9); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-2); + } + + .ds-heading--xl { + font-size: var(--ds-font-size-10); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-heading--2xl { + font-size: var(--ds-font-size-11); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-font-weight--medium { + font-weight: 500; + } + + .ds-font-weight--semibold { + font-weight: 600; + } + + .ds-font-weight--regular { + font-weight: 400; + } + + .ds-line-height--sm { + line-height: 1.3; + } + + .ds-line-height--md { + line-height: 1.5; + } + + .ds-line-height--lg { + line-height: 1.7; + } +} +} +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.semantic { +:root { + --ds-typography-heading-2xl: 500 3.75rem/1.3 'Inter'; + --ds-typography-heading-xl: 500 3rem/1.3 'Inter'; + --ds-typography-heading-lg: 500 2.25rem/1.3 'Inter'; + --ds-typography-heading-md: 500 1.875rem/1.3 'Inter'; + --ds-typography-heading-sm: 500 1.5rem/1.3 'Inter'; + --ds-typography-heading-xs: 500 1.3125rem/1.3 'Inter'; + --ds-typography-heading-2xs: 500 1.125rem/1.3 'Inter'; + --ds-typography-ingress-lg: 400 1.875rem/1.7 'Inter'; + --ds-typography-ingress-md: 400 1.5rem/1.7 'Inter'; + --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Inter'; + --ds-typography-ingress-xs: 400 1.125rem/1.7 'Inter'; + --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Inter'; + --ds-typography-paragraph-md: 400 1.125rem/1.5 'Inter'; + --ds-typography-paragraph-sm: 400 1rem/1.5 'Inter'; + --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Inter'; + --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Inter'; + --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Inter'; + --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Inter'; + --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Inter'; + --ds-typography-paragraph-long-lg: 400 1.3125rem/1.7 'Inter'; + --ds-typography-paragraph-long-md: 400 1.125rem/1.7 'Inter'; + --ds-typography-paragraph-long-sm: 400 1rem/1.7 'Inter'; + --ds-typography-paragraph-long-xs: 400 0.875rem/1.7 'Inter'; + --ds-typography-label-lg: 500 1.3125rem/1.3 'Inter'; + --ds-typography-label-md: 500 1.125rem/1.3 'Inter'; + --ds-typography-label-sm: 500 1rem/1.3 'Inter'; + --ds-typography-label-xs: 500 0.875rem/1.3 'Inter'; + --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Inter'; + --ds-typography-error_message-md: 400 1.125rem/1.3 'Inter'; + --ds-typography-error_message-sm: 400 1rem/1.3 'Inter'; + --ds-typography-error_message-xs: 400 0.875rem/1.3 'Inter'; + --ds-disabled-opacity: 30%; + --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5); + --ds-border-radius-md: calc(var(--ds-border-radius-base)*1); + --ds-border-radius-lg: calc(var(--ds-border-radius-base)*2); + --ds-border-radius-xl: calc(var(--ds-border-radius-base)*3); + --ds-border-radius-2xl: calc(var(--ds-border-radius-base)*4); + --ds-border-radius-3xl: calc(var(--ds-border-radius-base)*6); + --ds-border-radius-4xl: calc(var(--ds-border-radius-base)*8); + --ds-border-radius-full: 624.9375rem; + --ds-border-radius-base: 0.25rem; + --ds-spacing-0: calc(var(--ds-spacing-base)*0); + --ds-spacing-1: calc(var(--ds-spacing-base)*1); + --ds-spacing-2: calc(var(--ds-spacing-base)*2); + --ds-spacing-3: calc(var(--ds-spacing-base)*3); + --ds-spacing-4: calc(var(--ds-spacing-base)*4); + --ds-spacing-5: calc(var(--ds-spacing-base)*5); + --ds-spacing-6: calc(var(--ds-spacing-base)*6); + --ds-spacing-7: calc(var(--ds-spacing-base)*7); + --ds-spacing-8: calc(var(--ds-spacing-base)*8); + --ds-spacing-9: calc(var(--ds-spacing-base)*9); + --ds-spacing-10: calc(var(--ds-spacing-base)*10); + --ds-spacing-11: calc(var(--ds-spacing-base)*11); + --ds-spacing-12: calc(var(--ds-spacing-base)*12); + --ds-spacing-13: calc(var(--ds-spacing-base)*13); + --ds-spacing-14: calc(var(--ds-spacing-base)*14); + --ds-spacing-15: calc(var(--ds-spacing-base)*15); + --ds-spacing-18: calc(var(--ds-spacing-base)*18); + --ds-spacing-22: calc(var(--ds-spacing-base)*22); + --ds-spacing-26: calc(var(--ds-spacing-base)*26); + --ds-spacing-30: calc(var(--ds-spacing-base)*30); + --ds-spacing-base: 0.25rem; + --ds-sizing-0: calc(var(--ds-sizing-base)*0); + --ds-sizing-1: calc(var(--ds-sizing-base)*1); + --ds-sizing-2: calc(var(--ds-sizing-base)*2); + --ds-sizing-3: calc(var(--ds-sizing-base)*3); + --ds-sizing-4: calc(var(--ds-sizing-base)*4); + --ds-sizing-5: calc(var(--ds-sizing-base)*5); + --ds-sizing-6: calc(var(--ds-sizing-base)*6); + --ds-sizing-7: calc(var(--ds-sizing-base)*7); + --ds-sizing-8: calc(var(--ds-sizing-base)*8); + --ds-sizing-9: calc(var(--ds-sizing-base)*9); + --ds-sizing-10: calc(var(--ds-sizing-base)*10); + --ds-sizing-11: calc(var(--ds-sizing-base)*11); + --ds-sizing-12: calc(var(--ds-sizing-base)*12); + --ds-sizing-13: calc(var(--ds-sizing-base)*13); + --ds-sizing-14: calc(var(--ds-sizing-base)*14); + --ds-sizing-15: calc(var(--ds-sizing-base)*15); + --ds-sizing-18: calc(var(--ds-sizing-base)*18); + --ds-sizing-22: calc(var(--ds-sizing-base)*22); + --ds-sizing-26: calc(var(--ds-sizing-base)*26); + --ds-sizing-30: calc(var(--ds-sizing-base)*30); + --ds-sizing-base: 0.25rem; + --ds-border-width-default: 1px; + --ds-border-width-highlight: 2px; + --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12); + --ds-shadow-sm: 0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1); + --ds-shadow-md: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12); + --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14); + --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16); +} + +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color-mode.dark { +[data-ds-color-mode="dark"] { + --ds-global-blue-1: #031d30; + --ds-global-blue-2: #032540; + --ds-global-blue-3: #043256; + --ds-global-blue-4: #063f6c; + --ds-global-blue-5: #074d84; + --ds-global-blue-6: #075490; + --ds-global-blue-7: #0c72c1; + --ds-global-blue-8: #98c3e5; + --ds-global-blue-9: #2a84c8; + --ds-global-blue-10: #0a6dba; + --ds-global-blue-11: #085998; + --ds-global-blue-12: #6ba9d9; + --ds-global-blue-13: #d3e5f4; + --ds-global-blue-contrast-1: #000000; + --ds-global-blue-contrast-2: #040c13; + --ds-global-green-1: #022106; + --ds-global-green-2: #022b08; + --ds-global-green-3: #03380a; + --ds-global-green-4: #04480d; + --ds-global-green-5: #045810; + --ds-global-green-6: #056011; + --ds-global-green-7: #068117; + --ds-global-green-8: #90cc98; + --ds-global-green-9: #078818; + --ds-global-green-10: #067114; + --ds-global-green-11: #045a10; + --ds-global-green-12: #5fb56b; + --ds-global-green-13: #cfe9d3; + --ds-global-green-contrast-1: #ffffff; + --ds-global-green-contrast-2: #f9fcf9; + --ds-global-orange-1: #2e1508; + --ds-global-orange-2: #3a1b0a; + --ds-global-orange-3: #50240d; + --ds-global-orange-4: #652e10; + --ds-global-orange-5: #7a3814; + --ds-global-orange-6: #863d16; + --ds-global-orange-7: #b5531e; + --ds-global-orange-8: #e6b398; + --ds-global-orange-9: #ba541e; + --ds-global-orange-10: #994619; + --ds-global-orange-11: #7a3814; + --ds-global-orange-12: #db9169; + --ds-global-orange-13: #f4ddd0; + --ds-global-orange-contrast-1: #ffffff; + --ds-global-orange-contrast-2: #fcf8f6; + --ds-global-purple-1: #251238; + --ds-global-purple-2: #301748; + --ds-global-purple-3: #402060; + --ds-global-purple-4: #52287a; + --ds-global-purple-5: #643196; + --ds-global-purple-6: #6b399d; + --ds-global-purple-7: #865daf; + --ds-global-purple-8: #c9b7db; + --ds-global-purple-9: #b298cc; + --ds-global-purple-10: #a181c0; + --ds-global-purple-11: #8f69b5; + --ds-global-purple-12: #b298cc; + --ds-global-purple-13: #e7dfef; + --ds-global-purple-contrast-1: #000000; + --ds-global-purple-contrast-2: #18141b; + --ds-global-red-1: #3b0808; + --ds-global-red-2: #4b0a0a; + --ds-global-red-3: #620e0e; + --ds-global-red-4: #7c1212; + --ds-global-red-5: #961515; + --ds-global-red-6: #a31717; + --ds-global-red-7: #c93c3c; + --ds-global-red-8: #e9b0b0; + --ds-global-red-9: #d76e6e; + --ds-global-red-10: #ce4e4e; + --ds-global-red-11: #c32727; + --ds-global-red-12: #df8d8d; + --ds-global-red-13: #f5dcdc; + --ds-global-red-contrast-1: #000000; + --ds-global-red-contrast-2: #271414; + --ds-global-yellow-1: #221b06; + --ds-global-yellow-2: #2b2307; + --ds-global-yellow-3: #3a300a; + --ds-global-yellow-4: #4a3d0d; + --ds-global-yellow-5: #5a4a0f; + --ds-global-yellow-6: #635011; + --ds-global-yellow-7: #856d17; + --ds-global-yellow-8: #e4ba27; + --ds-global-yellow-9: #3d310a; + --ds-global-yellow-10: #52430e; + --ds-global-yellow-11: #695512; + --ds-global-yellow-12: #c39f21; + --ds-global-yellow-13: #f5e19b; + --ds-global-yellow-contrast-1: #ffffff; + --ds-global-yellow-contrast-2: #ccc9bf; + --ds-color-accent-1: #001c36; + --ds-color-accent-2: #002545; + --ds-color-accent-3: #00315b; + --ds-color-accent-4: #013f75; + --ds-color-accent-5: #014b8e; + --ds-color-accent-6: #01539b; + --ds-color-accent-7: #1971c0; + --ds-color-accent-8: #9bc2e4; + --ds-color-accent-9: #4b90ce; + --ds-color-accent-10: #277ac4; + --ds-color-accent-11: #0163ba; + --ds-color-accent-12: #72a8d9; + --ds-color-accent-13: #d1e3f3; + --ds-color-accent-contrast-1: #000000; + --ds-color-accent-contrast-2: #0d1823; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #131c27; + --ds-color-neutral-2: #192433; + --ds-color-neutral-3: #243142; + --ds-color-neutral-4: #333e4e; + --ds-color-neutral-5: #424d5b; + --ds-color-neutral-6: #495361; + --ds-color-neutral-7: #67707c; + --ds-color-neutral-8: #bbbfc4; + --ds-color-neutral-9: #a6abb2; + --ds-color-neutral-10: #90969e; + --ds-color-neutral-11: #7a818c; + --ds-color-neutral-12: #9ea3ab; + --ds-color-neutral-13: #e1e3e5; + --ds-color-neutral-contrast-1: #000000; + --ds-color-neutral-contrast-2: #1b1b1d; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #2f1213; + --ds-color-brand1-2: #3e1819; + --ds-color-brand1-3: #522022; + --ds-color-brand1-4: #68292b; + --ds-color-brand1-5: #7f3234; + --ds-color-brand1-6: #8b3639; + --ds-color-brand1-7: #bc494c; + --ds-color-brand1-8: #f9a9ab; + --ds-color-brand1-9: #9f3e41; + --ds-color-brand1-10: #7f3234; + --ds-color-brand1-11: #612628; + --ds-color-brand1-12: #f58083; + --ds-color-brand1-13: #fcdbdc; + --ds-color-brand1-contrast-1: #ffffff; + --ds-color-brand1-contrast-2: #fefefe; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #231a05; + --ds-color-brand2-2: #2d2206; + --ds-color-brand2-3: #3d2e09; + --ds-color-brand2-4: #4f3a0b; + --ds-color-brand2-5: #60470e; + --ds-color-brand2-6: #694d0f; + --ds-color-brand2-7: #8e6914; + --ds-color-brand2-8: #e8b744; + --ds-color-brand2-9: #523c0b; + --ds-color-brand2-10: #694d0f; + --ds-color-brand2-11: #826112; + --ds-color-brand2-12: #d09a1d; + --ds-color-brand2-13: #f5dfad; + --ds-color-brand2-contrast-1: #ffffff; + --ds-color-brand2-contrast-2: #ddd9cf; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #061d30; + --ds-color-brand3-2: #07253c; + --ds-color-brand3-3: #0a3251; + --ds-color-brand3-4: #0d4068; + --ds-color-brand3-5: #0f4e7f; + --ds-color-brand3-6: #11558a; + --ds-color-brand3-7: #1773b9; + --ds-color-brand3-8: #81c5f9; + --ds-color-brand3-9: #13609a; + --ds-color-brand3-10: #0f4c7a; + --ds-color-brand3-11: #0b3a5d; + --ds-color-brand3-12: #44aaf7; + --ds-color-brand3-13: #c8e6fd; + --ds-color-brand3-contrast-1: #ffffff; + --ds-color-brand3-contrast-2: #fafcfd; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #031d30; + --ds-color-info-background-subtle: #032540; + --ds-color-info-surface-default: #043256; + --ds-color-info-surface-hover: #063f6c; + --ds-color-info-surface-active: #074d84; + --ds-color-info-border-subtle: #075490; + --ds-color-info-border-default: #0c72c1; + --ds-color-info-border-strong: #98c3e5; + --ds-color-info-base-default: #2a84c8; + --ds-color-info-base-hover: #0a6dba; + --ds-color-info-base-active: #085998; + --ds-color-info-text-subtle: #6ba9d9; + --ds-color-info-text-default: #d3e5f4; + --ds-color-info-contrast-default: #000000; + --ds-color-info-contrast-subtle: #040c13; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #131c27; + --ds-color-focus-outer: #d1e3f3; +color-scheme: dark; +} + +@media (prefers-color-scheme: dark) { + [data-ds-color-mode="auto"] { + --ds-global-blue-1: #031d30; + --ds-global-blue-2: #032540; + --ds-global-blue-3: #043256; + --ds-global-blue-4: #063f6c; + --ds-global-blue-5: #074d84; + --ds-global-blue-6: #075490; + --ds-global-blue-7: #0c72c1; + --ds-global-blue-8: #98c3e5; + --ds-global-blue-9: #2a84c8; + --ds-global-blue-10: #0a6dba; + --ds-global-blue-11: #085998; + --ds-global-blue-12: #6ba9d9; + --ds-global-blue-13: #d3e5f4; + --ds-global-blue-contrast-1: #000000; + --ds-global-blue-contrast-2: #040c13; + --ds-global-green-1: #022106; + --ds-global-green-2: #022b08; + --ds-global-green-3: #03380a; + --ds-global-green-4: #04480d; + --ds-global-green-5: #045810; + --ds-global-green-6: #056011; + --ds-global-green-7: #068117; + --ds-global-green-8: #90cc98; + --ds-global-green-9: #078818; + --ds-global-green-10: #067114; + --ds-global-green-11: #045a10; + --ds-global-green-12: #5fb56b; + --ds-global-green-13: #cfe9d3; + --ds-global-green-contrast-1: #ffffff; + --ds-global-green-contrast-2: #f9fcf9; + --ds-global-orange-1: #2e1508; + --ds-global-orange-2: #3a1b0a; + --ds-global-orange-3: #50240d; + --ds-global-orange-4: #652e10; + --ds-global-orange-5: #7a3814; + --ds-global-orange-6: #863d16; + --ds-global-orange-7: #b5531e; + --ds-global-orange-8: #e6b398; + --ds-global-orange-9: #ba541e; + --ds-global-orange-10: #994619; + --ds-global-orange-11: #7a3814; + --ds-global-orange-12: #db9169; + --ds-global-orange-13: #f4ddd0; + --ds-global-orange-contrast-1: #ffffff; + --ds-global-orange-contrast-2: #fcf8f6; + --ds-global-purple-1: #251238; + --ds-global-purple-2: #301748; + --ds-global-purple-3: #402060; + --ds-global-purple-4: #52287a; + --ds-global-purple-5: #643196; + --ds-global-purple-6: #6b399d; + --ds-global-purple-7: #865daf; + --ds-global-purple-8: #c9b7db; + --ds-global-purple-9: #b298cc; + --ds-global-purple-10: #a181c0; + --ds-global-purple-11: #8f69b5; + --ds-global-purple-12: #b298cc; + --ds-global-purple-13: #e7dfef; + --ds-global-purple-contrast-1: #000000; + --ds-global-purple-contrast-2: #18141b; + --ds-global-red-1: #3b0808; + --ds-global-red-2: #4b0a0a; + --ds-global-red-3: #620e0e; + --ds-global-red-4: #7c1212; + --ds-global-red-5: #961515; + --ds-global-red-6: #a31717; + --ds-global-red-7: #c93c3c; + --ds-global-red-8: #e9b0b0; + --ds-global-red-9: #d76e6e; + --ds-global-red-10: #ce4e4e; + --ds-global-red-11: #c32727; + --ds-global-red-12: #df8d8d; + --ds-global-red-13: #f5dcdc; + --ds-global-red-contrast-1: #000000; + --ds-global-red-contrast-2: #271414; + --ds-global-yellow-1: #221b06; + --ds-global-yellow-2: #2b2307; + --ds-global-yellow-3: #3a300a; + --ds-global-yellow-4: #4a3d0d; + --ds-global-yellow-5: #5a4a0f; + --ds-global-yellow-6: #635011; + --ds-global-yellow-7: #856d17; + --ds-global-yellow-8: #e4ba27; + --ds-global-yellow-9: #3d310a; + --ds-global-yellow-10: #52430e; + --ds-global-yellow-11: #695512; + --ds-global-yellow-12: #c39f21; + --ds-global-yellow-13: #f5e19b; + --ds-global-yellow-contrast-1: #ffffff; + --ds-global-yellow-contrast-2: #ccc9bf; + --ds-color-accent-1: #001c36; + --ds-color-accent-2: #002545; + --ds-color-accent-3: #00315b; + --ds-color-accent-4: #013f75; + --ds-color-accent-5: #014b8e; + --ds-color-accent-6: #01539b; + --ds-color-accent-7: #1971c0; + --ds-color-accent-8: #9bc2e4; + --ds-color-accent-9: #4b90ce; + --ds-color-accent-10: #277ac4; + --ds-color-accent-11: #0163ba; + --ds-color-accent-12: #72a8d9; + --ds-color-accent-13: #d1e3f3; + --ds-color-accent-contrast-1: #000000; + --ds-color-accent-contrast-2: #0d1823; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #131c27; + --ds-color-neutral-2: #192433; + --ds-color-neutral-3: #243142; + --ds-color-neutral-4: #333e4e; + --ds-color-neutral-5: #424d5b; + --ds-color-neutral-6: #495361; + --ds-color-neutral-7: #67707c; + --ds-color-neutral-8: #bbbfc4; + --ds-color-neutral-9: #a6abb2; + --ds-color-neutral-10: #90969e; + --ds-color-neutral-11: #7a818c; + --ds-color-neutral-12: #9ea3ab; + --ds-color-neutral-13: #e1e3e5; + --ds-color-neutral-contrast-1: #000000; + --ds-color-neutral-contrast-2: #1b1b1d; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #2f1213; + --ds-color-brand1-2: #3e1819; + --ds-color-brand1-3: #522022; + --ds-color-brand1-4: #68292b; + --ds-color-brand1-5: #7f3234; + --ds-color-brand1-6: #8b3639; + --ds-color-brand1-7: #bc494c; + --ds-color-brand1-8: #f9a9ab; + --ds-color-brand1-9: #9f3e41; + --ds-color-brand1-10: #7f3234; + --ds-color-brand1-11: #612628; + --ds-color-brand1-12: #f58083; + --ds-color-brand1-13: #fcdbdc; + --ds-color-brand1-contrast-1: #ffffff; + --ds-color-brand1-contrast-2: #fefefe; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #231a05; + --ds-color-brand2-2: #2d2206; + --ds-color-brand2-3: #3d2e09; + --ds-color-brand2-4: #4f3a0b; + --ds-color-brand2-5: #60470e; + --ds-color-brand2-6: #694d0f; + --ds-color-brand2-7: #8e6914; + --ds-color-brand2-8: #e8b744; + --ds-color-brand2-9: #523c0b; + --ds-color-brand2-10: #694d0f; + --ds-color-brand2-11: #826112; + --ds-color-brand2-12: #d09a1d; + --ds-color-brand2-13: #f5dfad; + --ds-color-brand2-contrast-1: #ffffff; + --ds-color-brand2-contrast-2: #ddd9cf; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #061d30; + --ds-color-brand3-2: #07253c; + --ds-color-brand3-3: #0a3251; + --ds-color-brand3-4: #0d4068; + --ds-color-brand3-5: #0f4e7f; + --ds-color-brand3-6: #11558a; + --ds-color-brand3-7: #1773b9; + --ds-color-brand3-8: #81c5f9; + --ds-color-brand3-9: #13609a; + --ds-color-brand3-10: #0f4c7a; + --ds-color-brand3-11: #0b3a5d; + --ds-color-brand3-12: #44aaf7; + --ds-color-brand3-13: #c8e6fd; + --ds-color-brand3-contrast-1: #ffffff; + --ds-color-brand3-contrast-2: #fafcfd; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #031d30; + --ds-color-info-background-subtle: #032540; + --ds-color-info-surface-default: #043256; + --ds-color-info-surface-hover: #063f6c; + --ds-color-info-surface-active: #074d84; + --ds-color-info-border-subtle: #075490; + --ds-color-info-border-default: #0c72c1; + --ds-color-info-border-strong: #98c3e5; + --ds-color-info-base-default: #2a84c8; + --ds-color-info-base-hover: #0a6dba; + --ds-color-info-base-active: #085998; + --ds-color-info-text-subtle: #6ba9d9; + --ds-color-info-text-default: #d3e5f4; + --ds-color-info-contrast-default: #000000; + --ds-color-info-contrast-subtle: #040c13; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #131c27; + --ds-color-focus-outer: #d1e3f3; +color-scheme: dark; +} + +} + +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.typography.primary { +:root, [data-ds-typography="primary"] { + --ds-font-family: Inter; + --ds-font-weight-medium: 500; + --ds-font-weight-semibold: 600; + --ds-font-weight-regular: 400; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --ds-letter-spacing-7: 0.25%; + --ds-letter-spacing-8: 0.5%; + --ds-letter-spacing-9: 1.5%; + + .ds-error_message--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-error_message--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-error_message--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-error_message--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-label--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-label--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-long--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-long--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-short--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-short--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-ingress--sm { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-ingress--md { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--lg { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-heading--2xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--xs { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--sm { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-5); + } + + .ds-heading--md { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-3); + } + + .ds-heading--lg { + font-size: var(--ds-font-size-9); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-2); + } + + .ds-heading--xl { + font-size: var(--ds-font-size-10); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-heading--2xl { + font-size: var(--ds-font-size-11); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-font-weight--medium { + font-weight: 500; + } + + .ds-font-weight--semibold { + font-weight: 600; + } + + .ds-font-weight--regular { + font-weight: 400; + } + + .ds-line-height--sm { + line-height: 1.3; + } + + .ds-line-height--md { + line-height: 1.5; + } + + .ds-line-height--lg { + line-height: 1.7; + } +} +} \ No newline at end of file diff --git a/packages/theme/brand/portal.css b/packages/theme/brand/portal.css index 6084341a11..e5f0cfd1f8 100644 --- a/packages/theme/brand/portal.css +++ b/packages/theme/brand/portal.css @@ -2,8 +2,1899 @@ @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components; -@import url('portal/color-mode/light.css'); -@import url('portal/typography/secondary.css'); -@import url('portal/semantic.css'); -@import url('portal/typography/primary.css'); -@import url('portal/color-mode/dark.css'); \ No newline at end of file +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color-mode.light { +:root, [data-ds-color-mode="light"] { + --ds-global-blue-1: #fefeff; + --ds-global-blue-2: #edf5fa; + --ds-global-blue-3: #d3e5f4; + --ds-global-blue-4: #b7d5ed; + --ds-global-blue-5: #9bc5e5; + --ds-global-blue-6: #94c1e3; + --ds-global-blue-7: #2f86c9; + --ds-global-blue-8: #075089; + --ds-global-blue-9: #0A71C0; + --ds-global-blue-10: #085ea0; + --ds-global-blue-11: #074b80; + --ds-global-blue-12: #0966ac; + --ds-global-blue-13: #042d4d; + --ds-global-blue-contrast-1: #ffffff; + --ds-global-blue-contrast-2: #f3f8fc; + --ds-global-green-1: #fcfefc; + --ds-global-green-2: #ecf6ed; + --ds-global-green-3: #cfe9d3; + --ds-global-green-4: #b3dcb8; + --ds-global-green-5: #95ce9d; + --ds-global-green-6: #8bca94; + --ds-global-green-7: #189528; + --ds-global-green-8: #045a10; + --ds-global-green-9: #078D19; + --ds-global-green-10: #067615; + --ds-global-green-11: #056011; + --ds-global-green-12: #067314; + --ds-global-green-13: #033409; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #000401; + --ds-global-orange-1: #fffefd; + --ds-global-orange-2: #fbf1ec; + --ds-global-orange-3: #f4ddd0; + --ds-global-orange-4: #eecab7; + --ds-global-orange-5: #e7b69c; + --ds-global-orange-6: #e5b094; + --ds-global-orange-7: #cc632b; + --ds-global-orange-8: #7e3a15; + --ds-global-orange-9: #CA5C21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #a1491a; + --ds-global-orange-13: #47210c; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #0d0602; + --ds-global-purple-1: #fefefe; + --ds-global-purple-2: #f5f2f9; + --ds-global-purple-3: #e7dfef; + --ds-global-purple-4: #d9cce6; + --ds-global-purple-5: #ccbadd; + --ds-global-purple-6: #c7b4da; + --ds-global-purple-7: #9572b9; + --ds-global-purple-8: #663399; + --ds-global-purple-9: #663299; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #7b4ea7; + --ds-global-purple-13: #3b1d59; + --ds-global-purple-contrast-1: #ffffff; + --ds-global-purple-contrast-2: #eee8f3; + --ds-global-red-1: #fffefe; + --ds-global-red-2: #fbf1f1; + --ds-global-red-3: #f5dcdc; + --ds-global-red-4: #f0c7c7; + --ds-global-red-5: #eab3b3; + --ds-global-red-6: #e8acac; + --ds-global-red-7: #d25b5b; + --ds-global-red-8: #9a1616; + --ds-global-red-9: #C01B1B; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #c22020; + --ds-global-red-13: #5a0d0d; + --ds-global-red-contrast-1: #ffffff; + --ds-global-red-contrast-2: #f6dfdf; + --ds-global-yellow-1: #fffefc; + --ds-global-yellow-2: #fbf2d3; + --ds-global-yellow-3: #f5e19b; + --ds-global-yellow-4: #efcf5d; + --ds-global-yellow-5: #e6bc27; + --ds-global-yellow-6: #e0b726; + --ds-global-yellow-7: #9a7e1a; + --ds-global-yellow-8: #5d4c10; + --ds-global-yellow-9: #EABF28; + --ds-global-yellow-10: #d0aa24; + --ds-global-yellow-11: #b7951f; + --ds-global-yellow-12: #776114; + --ds-global-yellow-13: #352b09; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #fefefe; + --ds-color-accent-2: #f5f2f8; + --ds-color-accent-3: #e8e0ee; + --ds-color-accent-4: #d9cce3; + --ds-color-accent-5: #ccbad9; + --ds-color-accent-6: #c7b4d6; + --ds-color-accent-7: #9773b3; + --ds-color-accent-8: #683591; + --ds-color-accent-9: #4d107d; + --ds-color-accent-10: #612c8c; + --ds-color-accent-11: #734499; + --ds-color-accent-12: #7c4fa0; + --ds-color-accent-13: #420e6a; + --ds-color-accent-contrast-1: #ffffff; + --ds-color-accent-contrast-2: #d5c6e0; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #fefefe; + --ds-color-neutral-2: #f3f4f5; + --ds-color-neutral-3: #e1e3e5; + --ds-color-neutral-4: #ced1d4; + --ds-color-neutral-5: #bdc1c6; + --ds-color-neutral-6: #b8bcc1; + --ds-color-neutral-7: #7a818c; + --ds-color-neutral-8: #444e5d; + --ds-color-neutral-9: #1E2B3C; + --ds-color-neutral-10: #303c4b; + --ds-color-neutral-11: #444e5d; + --ds-color-neutral-12: #5b6471; + --ds-color-neutral-13: #202c3d; + --ds-color-neutral-contrast-1: #ffffff; + --ds-color-neutral-contrast-2: #bbbfc4; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #fefdff; + --ds-color-brand1-2: #f7f1fc; + --ds-color-brand1-3: #ecddf8; + --ds-color-brand1-4: #e0c8f3; + --ds-color-brand1-5: #d5b5ef; + --ds-color-brand1-6: #d1adee; + --ds-color-brand1-7: #a661de; + --ds-color-brand1-8: #66388b; + --ds-color-brand1-9: #a259dc; + --ds-color-brand1-10: #884bb9; + --ds-color-brand1-11: #703d97; + --ds-color-brand1-12: #8248b1; + --ds-color-brand1-13: #3a204f; + --ds-color-brand1-contrast-1: #000000; + --ds-color-brand1-contrast-2: #0a060d; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #fffeff; + --ds-color-brand2-2: #fbf0fc; + --ds-color-brand2-3: #f6d9f8; + --ds-color-brand2-4: #f1c2f3; + --ds-color-brand2-5: #ecabef; + --ds-color-brand2-6: #eaa3ed; + --ds-color-brand2-7: #b75fbb; + --ds-color-brand2-8: #6f3972; + --ds-color-brand2-9: #df73e4; + --ds-color-brand2-10: #c364c7; + --ds-color-brand2-11: #a656aa; + --ds-color-brand2-12: #8e4991; + --ds-color-brand2-13: #3f2141; + --ds-color-brand2-contrast-1: #000000; + --ds-color-brand2-contrast-2: #190d1a; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #fffefe; + --ds-color-brand3-2: #fdeff8; + --ds-color-brand3-3: #f9daef; + --ds-color-brand3-4: #f6c3e5; + --ds-color-brand3-5: #f2abdb; + --ds-color-brand3-6: #f1a3d7; + --ds-color-brand3-7: #c55aa3; + --ds-color-brand3-8: #773762; + --ds-color-brand3-9: #e86abf; + --ds-color-brand3-10: #c95ca6; + --ds-color-brand3-11: #ab4e8d; + --ds-color-brand3-12: #98467d; + --ds-color-brand3-13: #451f38; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #11080e; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #fefeff; + --ds-color-info-background-subtle: #edf5fa; + --ds-color-info-surface-default: #d3e5f4; + --ds-color-info-surface-hover: #b7d5ed; + --ds-color-info-surface-active: #9bc5e5; + --ds-color-info-border-subtle: #94c1e3; + --ds-color-info-border-default: #2f86c9; + --ds-color-info-border-strong: #075089; + --ds-color-info-base-default: #0A71C0; + --ds-color-info-base-hover: #085ea0; + --ds-color-info-base-active: #074b80; + --ds-color-info-text-subtle: #0966ac; + --ds-color-info-text-default: #042d4d; + --ds-color-info-contrast-default: #ffffff; + --ds-color-info-contrast-subtle: #f3f8fc; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #fefefe; + --ds-color-focus-outer: #420e6a; +color-scheme: light; +} + +@media (prefers-color-scheme: light) { + [data-ds-color-mode="auto"] { + --ds-global-blue-1: #fefeff; + --ds-global-blue-2: #edf5fa; + --ds-global-blue-3: #d3e5f4; + --ds-global-blue-4: #b7d5ed; + --ds-global-blue-5: #9bc5e5; + --ds-global-blue-6: #94c1e3; + --ds-global-blue-7: #2f86c9; + --ds-global-blue-8: #075089; + --ds-global-blue-9: #0A71C0; + --ds-global-blue-10: #085ea0; + --ds-global-blue-11: #074b80; + --ds-global-blue-12: #0966ac; + --ds-global-blue-13: #042d4d; + --ds-global-blue-contrast-1: #ffffff; + --ds-global-blue-contrast-2: #f3f8fc; + --ds-global-green-1: #fcfefc; + --ds-global-green-2: #ecf6ed; + --ds-global-green-3: #cfe9d3; + --ds-global-green-4: #b3dcb8; + --ds-global-green-5: #95ce9d; + --ds-global-green-6: #8bca94; + --ds-global-green-7: #189528; + --ds-global-green-8: #045a10; + --ds-global-green-9: #078D19; + --ds-global-green-10: #067615; + --ds-global-green-11: #056011; + --ds-global-green-12: #067314; + --ds-global-green-13: #033409; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #000401; + --ds-global-orange-1: #fffefd; + --ds-global-orange-2: #fbf1ec; + --ds-global-orange-3: #f4ddd0; + --ds-global-orange-4: #eecab7; + --ds-global-orange-5: #e7b69c; + --ds-global-orange-6: #e5b094; + --ds-global-orange-7: #cc632b; + --ds-global-orange-8: #7e3a15; + --ds-global-orange-9: #CA5C21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #a1491a; + --ds-global-orange-13: #47210c; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #0d0602; + --ds-global-purple-1: #fefefe; + --ds-global-purple-2: #f5f2f9; + --ds-global-purple-3: #e7dfef; + --ds-global-purple-4: #d9cce6; + --ds-global-purple-5: #ccbadd; + --ds-global-purple-6: #c7b4da; + --ds-global-purple-7: #9572b9; + --ds-global-purple-8: #663399; + --ds-global-purple-9: #663299; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #7b4ea7; + --ds-global-purple-13: #3b1d59; + --ds-global-purple-contrast-1: #ffffff; + --ds-global-purple-contrast-2: #eee8f3; + --ds-global-red-1: #fffefe; + --ds-global-red-2: #fbf1f1; + --ds-global-red-3: #f5dcdc; + --ds-global-red-4: #f0c7c7; + --ds-global-red-5: #eab3b3; + --ds-global-red-6: #e8acac; + --ds-global-red-7: #d25b5b; + --ds-global-red-8: #9a1616; + --ds-global-red-9: #C01B1B; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #c22020; + --ds-global-red-13: #5a0d0d; + --ds-global-red-contrast-1: #ffffff; + --ds-global-red-contrast-2: #f6dfdf; + --ds-global-yellow-1: #fffefc; + --ds-global-yellow-2: #fbf2d3; + --ds-global-yellow-3: #f5e19b; + --ds-global-yellow-4: #efcf5d; + --ds-global-yellow-5: #e6bc27; + --ds-global-yellow-6: #e0b726; + --ds-global-yellow-7: #9a7e1a; + --ds-global-yellow-8: #5d4c10; + --ds-global-yellow-9: #EABF28; + --ds-global-yellow-10: #d0aa24; + --ds-global-yellow-11: #b7951f; + --ds-global-yellow-12: #776114; + --ds-global-yellow-13: #352b09; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #fefefe; + --ds-color-accent-2: #f5f2f8; + --ds-color-accent-3: #e8e0ee; + --ds-color-accent-4: #d9cce3; + --ds-color-accent-5: #ccbad9; + --ds-color-accent-6: #c7b4d6; + --ds-color-accent-7: #9773b3; + --ds-color-accent-8: #683591; + --ds-color-accent-9: #4d107d; + --ds-color-accent-10: #612c8c; + --ds-color-accent-11: #734499; + --ds-color-accent-12: #7c4fa0; + --ds-color-accent-13: #420e6a; + --ds-color-accent-contrast-1: #ffffff; + --ds-color-accent-contrast-2: #d5c6e0; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #fefefe; + --ds-color-neutral-2: #f3f4f5; + --ds-color-neutral-3: #e1e3e5; + --ds-color-neutral-4: #ced1d4; + --ds-color-neutral-5: #bdc1c6; + --ds-color-neutral-6: #b8bcc1; + --ds-color-neutral-7: #7a818c; + --ds-color-neutral-8: #444e5d; + --ds-color-neutral-9: #1E2B3C; + --ds-color-neutral-10: #303c4b; + --ds-color-neutral-11: #444e5d; + --ds-color-neutral-12: #5b6471; + --ds-color-neutral-13: #202c3d; + --ds-color-neutral-contrast-1: #ffffff; + --ds-color-neutral-contrast-2: #bbbfc4; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #fefdff; + --ds-color-brand1-2: #f7f1fc; + --ds-color-brand1-3: #ecddf8; + --ds-color-brand1-4: #e0c8f3; + --ds-color-brand1-5: #d5b5ef; + --ds-color-brand1-6: #d1adee; + --ds-color-brand1-7: #a661de; + --ds-color-brand1-8: #66388b; + --ds-color-brand1-9: #a259dc; + --ds-color-brand1-10: #884bb9; + --ds-color-brand1-11: #703d97; + --ds-color-brand1-12: #8248b1; + --ds-color-brand1-13: #3a204f; + --ds-color-brand1-contrast-1: #000000; + --ds-color-brand1-contrast-2: #0a060d; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #fffeff; + --ds-color-brand2-2: #fbf0fc; + --ds-color-brand2-3: #f6d9f8; + --ds-color-brand2-4: #f1c2f3; + --ds-color-brand2-5: #ecabef; + --ds-color-brand2-6: #eaa3ed; + --ds-color-brand2-7: #b75fbb; + --ds-color-brand2-8: #6f3972; + --ds-color-brand2-9: #df73e4; + --ds-color-brand2-10: #c364c7; + --ds-color-brand2-11: #a656aa; + --ds-color-brand2-12: #8e4991; + --ds-color-brand2-13: #3f2141; + --ds-color-brand2-contrast-1: #000000; + --ds-color-brand2-contrast-2: #190d1a; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #fffefe; + --ds-color-brand3-2: #fdeff8; + --ds-color-brand3-3: #f9daef; + --ds-color-brand3-4: #f6c3e5; + --ds-color-brand3-5: #f2abdb; + --ds-color-brand3-6: #f1a3d7; + --ds-color-brand3-7: #c55aa3; + --ds-color-brand3-8: #773762; + --ds-color-brand3-9: #e86abf; + --ds-color-brand3-10: #c95ca6; + --ds-color-brand3-11: #ab4e8d; + --ds-color-brand3-12: #98467d; + --ds-color-brand3-13: #451f38; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #11080e; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #fefeff; + --ds-color-info-background-subtle: #edf5fa; + --ds-color-info-surface-default: #d3e5f4; + --ds-color-info-surface-hover: #b7d5ed; + --ds-color-info-surface-active: #9bc5e5; + --ds-color-info-border-subtle: #94c1e3; + --ds-color-info-border-default: #2f86c9; + --ds-color-info-border-strong: #075089; + --ds-color-info-base-default: #0A71C0; + --ds-color-info-base-hover: #085ea0; + --ds-color-info-base-active: #074b80; + --ds-color-info-text-subtle: #0966ac; + --ds-color-info-text-default: #042d4d; + --ds-color-info-contrast-default: #ffffff; + --ds-color-info-contrast-subtle: #f3f8fc; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #fefefe; + --ds-color-focus-outer: #420e6a; +color-scheme: light; +} + +} + +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.typography.secondary { +[data-ds-typography="secondary"] { + --ds-font-family: IBM Plex Mono; + --ds-font-weight-medium: 400; + --ds-font-weight-semibold: 700; + --ds-font-weight-regular: 400; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --ds-letter-spacing-7: 0.25%; + --ds-letter-spacing-8: 0.5%; + --ds-letter-spacing-9: 1.5%; + + .ds-error_message--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-error_message--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-error_message--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-error_message--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-label--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-label--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-long--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-long--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-short--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-short--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-ingress--sm { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-ingress--md { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--lg { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-heading--2xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--xs { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--sm { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-5); + } + + .ds-heading--md { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-3); + } + + .ds-heading--lg { + font-size: var(--ds-font-size-9); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-2); + } + + .ds-heading--xl { + font-size: var(--ds-font-size-10); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-heading--2xl { + font-size: var(--ds-font-size-11); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-font-weight--medium { + font-weight: 400; + } + + .ds-font-weight--semibold { + font-weight: 700; + } + + .ds-font-weight--regular { + font-weight: 400; + } + + .ds-line-height--sm { + line-height: 1.3; + } + + .ds-line-height--md { + line-height: 1.5; + } + + .ds-line-height--lg { + line-height: 1.7; + } +} +} +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.semantic { +:root { + --ds-typography-heading-2xl: 500 3.75rem/1.3 'Inter'; + --ds-typography-heading-xl: 500 3rem/1.3 'Inter'; + --ds-typography-heading-lg: 500 2.25rem/1.3 'Inter'; + --ds-typography-heading-md: 500 1.875rem/1.3 'Inter'; + --ds-typography-heading-sm: 500 1.5rem/1.3 'Inter'; + --ds-typography-heading-xs: 500 1.3125rem/1.3 'Inter'; + --ds-typography-heading-2xs: 500 1.125rem/1.3 'Inter'; + --ds-typography-ingress-lg: 400 1.875rem/1.7 'Inter'; + --ds-typography-ingress-md: 400 1.5rem/1.7 'Inter'; + --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Inter'; + --ds-typography-ingress-xs: 400 1.125rem/1.7 'Inter'; + --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Inter'; + --ds-typography-paragraph-md: 400 1.125rem/1.5 'Inter'; + --ds-typography-paragraph-sm: 400 1rem/1.5 'Inter'; + --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Inter'; + --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Inter'; + --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Inter'; + --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Inter'; + --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Inter'; + --ds-typography-paragraph-long-lg: 400 1.3125rem/1.7 'Inter'; + --ds-typography-paragraph-long-md: 400 1.125rem/1.7 'Inter'; + --ds-typography-paragraph-long-sm: 400 1rem/1.7 'Inter'; + --ds-typography-paragraph-long-xs: 400 0.875rem/1.7 'Inter'; + --ds-typography-label-lg: 500 1.3125rem/1.3 'Inter'; + --ds-typography-label-md: 500 1.125rem/1.3 'Inter'; + --ds-typography-label-sm: 500 1rem/1.3 'Inter'; + --ds-typography-label-xs: 500 0.875rem/1.3 'Inter'; + --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Inter'; + --ds-typography-error_message-md: 400 1.125rem/1.3 'Inter'; + --ds-typography-error_message-sm: 400 1rem/1.3 'Inter'; + --ds-typography-error_message-xs: 400 0.875rem/1.3 'Inter'; + --ds-disabled-opacity: 30%; + --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5); + --ds-border-radius-md: calc(var(--ds-border-radius-base)*1); + --ds-border-radius-lg: calc(var(--ds-border-radius-base)*2); + --ds-border-radius-xl: calc(var(--ds-border-radius-base)*3); + --ds-border-radius-2xl: calc(var(--ds-border-radius-base)*4); + --ds-border-radius-3xl: calc(var(--ds-border-radius-base)*6); + --ds-border-radius-4xl: calc(var(--ds-border-radius-base)*8); + --ds-border-radius-full: 624.9375rem; + --ds-border-radius-base: 0.25rem; + --ds-spacing-0: calc(var(--ds-spacing-base)*0); + --ds-spacing-1: calc(var(--ds-spacing-base)*1); + --ds-spacing-2: calc(var(--ds-spacing-base)*2); + --ds-spacing-3: calc(var(--ds-spacing-base)*3); + --ds-spacing-4: calc(var(--ds-spacing-base)*4); + --ds-spacing-5: calc(var(--ds-spacing-base)*5); + --ds-spacing-6: calc(var(--ds-spacing-base)*6); + --ds-spacing-7: calc(var(--ds-spacing-base)*7); + --ds-spacing-8: calc(var(--ds-spacing-base)*8); + --ds-spacing-9: calc(var(--ds-spacing-base)*9); + --ds-spacing-10: calc(var(--ds-spacing-base)*10); + --ds-spacing-11: calc(var(--ds-spacing-base)*11); + --ds-spacing-12: calc(var(--ds-spacing-base)*12); + --ds-spacing-13: calc(var(--ds-spacing-base)*13); + --ds-spacing-14: calc(var(--ds-spacing-base)*14); + --ds-spacing-15: calc(var(--ds-spacing-base)*15); + --ds-spacing-18: calc(var(--ds-spacing-base)*18); + --ds-spacing-22: calc(var(--ds-spacing-base)*22); + --ds-spacing-26: calc(var(--ds-spacing-base)*26); + --ds-spacing-30: calc(var(--ds-spacing-base)*30); + --ds-spacing-base: 0.25rem; + --ds-sizing-0: calc(var(--ds-sizing-base)*0); + --ds-sizing-1: calc(var(--ds-sizing-base)*1); + --ds-sizing-2: calc(var(--ds-sizing-base)*2); + --ds-sizing-3: calc(var(--ds-sizing-base)*3); + --ds-sizing-4: calc(var(--ds-sizing-base)*4); + --ds-sizing-5: calc(var(--ds-sizing-base)*5); + --ds-sizing-6: calc(var(--ds-sizing-base)*6); + --ds-sizing-7: calc(var(--ds-sizing-base)*7); + --ds-sizing-8: calc(var(--ds-sizing-base)*8); + --ds-sizing-9: calc(var(--ds-sizing-base)*9); + --ds-sizing-10: calc(var(--ds-sizing-base)*10); + --ds-sizing-11: calc(var(--ds-sizing-base)*11); + --ds-sizing-12: calc(var(--ds-sizing-base)*12); + --ds-sizing-13: calc(var(--ds-sizing-base)*13); + --ds-sizing-14: calc(var(--ds-sizing-base)*14); + --ds-sizing-15: calc(var(--ds-sizing-base)*15); + --ds-sizing-18: calc(var(--ds-sizing-base)*18); + --ds-sizing-22: calc(var(--ds-sizing-base)*22); + --ds-sizing-26: calc(var(--ds-sizing-base)*26); + --ds-sizing-30: calc(var(--ds-sizing-base)*30); + --ds-sizing-base: 0.25rem; + --ds-border-width-default: 1px; + --ds-border-width-highlight: 2px; + --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12); + --ds-shadow-sm: 0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1); + --ds-shadow-md: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12); + --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14); + --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16); +} + +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color-mode.dark { +[data-ds-color-mode="dark"] { + --ds-global-blue-1: #031d30; + --ds-global-blue-2: #032540; + --ds-global-blue-3: #043256; + --ds-global-blue-4: #063f6c; + --ds-global-blue-5: #074d84; + --ds-global-blue-6: #075490; + --ds-global-blue-7: #0c72c1; + --ds-global-blue-8: #98c3e5; + --ds-global-blue-9: #2a84c8; + --ds-global-blue-10: #0a6dba; + --ds-global-blue-11: #085998; + --ds-global-blue-12: #6ba9d9; + --ds-global-blue-13: #d3e5f4; + --ds-global-blue-contrast-1: #000000; + --ds-global-blue-contrast-2: #040c13; + --ds-global-green-1: #022106; + --ds-global-green-2: #022b08; + --ds-global-green-3: #03380a; + --ds-global-green-4: #04480d; + --ds-global-green-5: #045810; + --ds-global-green-6: #056011; + --ds-global-green-7: #068117; + --ds-global-green-8: #90cc98; + --ds-global-green-9: #078818; + --ds-global-green-10: #067114; + --ds-global-green-11: #045a10; + --ds-global-green-12: #5fb56b; + --ds-global-green-13: #cfe9d3; + --ds-global-green-contrast-1: #ffffff; + --ds-global-green-contrast-2: #f9fcf9; + --ds-global-orange-1: #2e1508; + --ds-global-orange-2: #3a1b0a; + --ds-global-orange-3: #50240d; + --ds-global-orange-4: #652e10; + --ds-global-orange-5: #7a3814; + --ds-global-orange-6: #863d16; + --ds-global-orange-7: #b5531e; + --ds-global-orange-8: #e6b398; + --ds-global-orange-9: #ba541e; + --ds-global-orange-10: #994619; + --ds-global-orange-11: #7a3814; + --ds-global-orange-12: #db9169; + --ds-global-orange-13: #f4ddd0; + --ds-global-orange-contrast-1: #ffffff; + --ds-global-orange-contrast-2: #fcf8f6; + --ds-global-purple-1: #251238; + --ds-global-purple-2: #301748; + --ds-global-purple-3: #402060; + --ds-global-purple-4: #52287a; + --ds-global-purple-5: #643196; + --ds-global-purple-6: #6b399d; + --ds-global-purple-7: #865daf; + --ds-global-purple-8: #c9b7db; + --ds-global-purple-9: #b298cc; + --ds-global-purple-10: #a181c0; + --ds-global-purple-11: #8f69b5; + --ds-global-purple-12: #b298cc; + --ds-global-purple-13: #e7dfef; + --ds-global-purple-contrast-1: #000000; + --ds-global-purple-contrast-2: #18141b; + --ds-global-red-1: #3b0808; + --ds-global-red-2: #4b0a0a; + --ds-global-red-3: #620e0e; + --ds-global-red-4: #7c1212; + --ds-global-red-5: #961515; + --ds-global-red-6: #a31717; + --ds-global-red-7: #c93c3c; + --ds-global-red-8: #e9b0b0; + --ds-global-red-9: #d76e6e; + --ds-global-red-10: #ce4e4e; + --ds-global-red-11: #c32727; + --ds-global-red-12: #df8d8d; + --ds-global-red-13: #f5dcdc; + --ds-global-red-contrast-1: #000000; + --ds-global-red-contrast-2: #271414; + --ds-global-yellow-1: #221b06; + --ds-global-yellow-2: #2b2307; + --ds-global-yellow-3: #3a300a; + --ds-global-yellow-4: #4a3d0d; + --ds-global-yellow-5: #5a4a0f; + --ds-global-yellow-6: #635011; + --ds-global-yellow-7: #856d17; + --ds-global-yellow-8: #e4ba27; + --ds-global-yellow-9: #3d310a; + --ds-global-yellow-10: #52430e; + --ds-global-yellow-11: #695512; + --ds-global-yellow-12: #c39f21; + --ds-global-yellow-13: #f5e19b; + --ds-global-yellow-contrast-1: #ffffff; + --ds-global-yellow-contrast-2: #ccc9bf; + --ds-color-accent-1: #2a0945; + --ds-color-accent-2: #360b58; + --ds-color-accent-3: #480f74; + --ds-color-accent-4: #581f85; + --ds-color-accent-5: #66328f; + --ds-color-accent-6: #6d3b94; + --ds-color-accent-7: #875ea8; + --ds-color-accent-8: #c9b7d8; + --ds-color-accent-9: #baa2cc; + --ds-color-accent-10: #a88abf; + --ds-color-accent-11: #9773b3; + --ds-color-accent-12: #b399c7; + --ds-color-accent-13: #e8e0ee; + --ds-color-accent-contrast-1: #000000; + --ds-color-accent-contrast-2: #1d1a20; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #131c27; + --ds-color-neutral-2: #192433; + --ds-color-neutral-3: #243142; + --ds-color-neutral-4: #333e4e; + --ds-color-neutral-5: #424d5b; + --ds-color-neutral-6: #495361; + --ds-color-neutral-7: #67707c; + --ds-color-neutral-8: #bbbfc4; + --ds-color-neutral-9: #a6abb2; + --ds-color-neutral-10: #90969e; + --ds-color-neutral-11: #7a818c; + --ds-color-neutral-12: #9ea3ab; + --ds-color-neutral-13: #e1e3e5; + --ds-color-neutral-contrast-1: #000000; + --ds-color-neutral-contrast-2: #1b1b1d; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #251432; + --ds-color-brand1-2: #2f1a40; + --ds-color-brand1-3: #402358; + --ds-color-brand1-4: #512c6e; + --ds-color-brand1-5: #633687; + --ds-color-brand1-6: #6c3b93; + --ds-color-brand1-7: #9250c7; + --ds-color-brand1-8: #d3b0ee; + --ds-color-brand1-9: #9552cb; + --ds-color-brand1-10: #7b44a8; + --ds-color-brand1-11: #633687; + --ds-color-brand1-12: #c08ee7; + --ds-color-brand1-13: #ecddf8; + --ds-color-brand1-contrast-1: #ffffff; + --ds-color-brand1-contrast-2: #fbf8fd; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #281429; + --ds-color-brand2-2: #331a35; + --ds-color-brand2-3: #462447; + --ds-color-brand2-4: #582d5a; + --ds-color-brand2-5: #6c376e; + --ds-color-brand2-6: #753d78; + --ds-color-brand2-7: #9f52a2; + --ds-color-brand2-8: #eba8ee; + --ds-color-brand2-9: #753d78; + --ds-color-brand2-10: #5b2f5e; + --ds-color-brand2-11: #422244; + --ds-color-brand2-12: #e17ee6; + --ds-color-brand2-13: #f6d9f8; + --ds-color-brand2-contrast-1: #ffffff; + --ds-color-brand2-contrast-2: #f4eff4; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #2b1323; + --ds-color-brand3-2: #38192e; + --ds-color-brand3-3: #4b223e; + --ds-color-brand3-4: #5f2b4e; + --ds-color-brand3-5: #74355f; + --ds-color-brand3-6: #7f3a68; + --ds-color-brand3-7: #ab4e8d; + --ds-color-brand3-8: #f1a7d9; + --ds-color-brand3-9: #863d6e; + --ds-color-brand3-10: #693057; + --ds-color-brand3-11: #4e2440; + --ds-color-brand3-12: #eb7dc7; + --ds-color-brand3-13: #f9daef; + --ds-color-brand3-contrast-1: #ffffff; + --ds-color-brand3-contrast-2: #f8f4f7; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #031d30; + --ds-color-info-background-subtle: #032540; + --ds-color-info-surface-default: #043256; + --ds-color-info-surface-hover: #063f6c; + --ds-color-info-surface-active: #074d84; + --ds-color-info-border-subtle: #075490; + --ds-color-info-border-default: #0c72c1; + --ds-color-info-border-strong: #98c3e5; + --ds-color-info-base-default: #2a84c8; + --ds-color-info-base-hover: #0a6dba; + --ds-color-info-base-active: #085998; + --ds-color-info-text-subtle: #6ba9d9; + --ds-color-info-text-default: #d3e5f4; + --ds-color-info-contrast-default: #000000; + --ds-color-info-contrast-subtle: #040c13; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #131c27; + --ds-color-focus-outer: #e8e0ee; +color-scheme: dark; +} + +@media (prefers-color-scheme: dark) { + [data-ds-color-mode="auto"] { + --ds-global-blue-1: #031d30; + --ds-global-blue-2: #032540; + --ds-global-blue-3: #043256; + --ds-global-blue-4: #063f6c; + --ds-global-blue-5: #074d84; + --ds-global-blue-6: #075490; + --ds-global-blue-7: #0c72c1; + --ds-global-blue-8: #98c3e5; + --ds-global-blue-9: #2a84c8; + --ds-global-blue-10: #0a6dba; + --ds-global-blue-11: #085998; + --ds-global-blue-12: #6ba9d9; + --ds-global-blue-13: #d3e5f4; + --ds-global-blue-contrast-1: #000000; + --ds-global-blue-contrast-2: #040c13; + --ds-global-green-1: #022106; + --ds-global-green-2: #022b08; + --ds-global-green-3: #03380a; + --ds-global-green-4: #04480d; + --ds-global-green-5: #045810; + --ds-global-green-6: #056011; + --ds-global-green-7: #068117; + --ds-global-green-8: #90cc98; + --ds-global-green-9: #078818; + --ds-global-green-10: #067114; + --ds-global-green-11: #045a10; + --ds-global-green-12: #5fb56b; + --ds-global-green-13: #cfe9d3; + --ds-global-green-contrast-1: #ffffff; + --ds-global-green-contrast-2: #f9fcf9; + --ds-global-orange-1: #2e1508; + --ds-global-orange-2: #3a1b0a; + --ds-global-orange-3: #50240d; + --ds-global-orange-4: #652e10; + --ds-global-orange-5: #7a3814; + --ds-global-orange-6: #863d16; + --ds-global-orange-7: #b5531e; + --ds-global-orange-8: #e6b398; + --ds-global-orange-9: #ba541e; + --ds-global-orange-10: #994619; + --ds-global-orange-11: #7a3814; + --ds-global-orange-12: #db9169; + --ds-global-orange-13: #f4ddd0; + --ds-global-orange-contrast-1: #ffffff; + --ds-global-orange-contrast-2: #fcf8f6; + --ds-global-purple-1: #251238; + --ds-global-purple-2: #301748; + --ds-global-purple-3: #402060; + --ds-global-purple-4: #52287a; + --ds-global-purple-5: #643196; + --ds-global-purple-6: #6b399d; + --ds-global-purple-7: #865daf; + --ds-global-purple-8: #c9b7db; + --ds-global-purple-9: #b298cc; + --ds-global-purple-10: #a181c0; + --ds-global-purple-11: #8f69b5; + --ds-global-purple-12: #b298cc; + --ds-global-purple-13: #e7dfef; + --ds-global-purple-contrast-1: #000000; + --ds-global-purple-contrast-2: #18141b; + --ds-global-red-1: #3b0808; + --ds-global-red-2: #4b0a0a; + --ds-global-red-3: #620e0e; + --ds-global-red-4: #7c1212; + --ds-global-red-5: #961515; + --ds-global-red-6: #a31717; + --ds-global-red-7: #c93c3c; + --ds-global-red-8: #e9b0b0; + --ds-global-red-9: #d76e6e; + --ds-global-red-10: #ce4e4e; + --ds-global-red-11: #c32727; + --ds-global-red-12: #df8d8d; + --ds-global-red-13: #f5dcdc; + --ds-global-red-contrast-1: #000000; + --ds-global-red-contrast-2: #271414; + --ds-global-yellow-1: #221b06; + --ds-global-yellow-2: #2b2307; + --ds-global-yellow-3: #3a300a; + --ds-global-yellow-4: #4a3d0d; + --ds-global-yellow-5: #5a4a0f; + --ds-global-yellow-6: #635011; + --ds-global-yellow-7: #856d17; + --ds-global-yellow-8: #e4ba27; + --ds-global-yellow-9: #3d310a; + --ds-global-yellow-10: #52430e; + --ds-global-yellow-11: #695512; + --ds-global-yellow-12: #c39f21; + --ds-global-yellow-13: #f5e19b; + --ds-global-yellow-contrast-1: #ffffff; + --ds-global-yellow-contrast-2: #ccc9bf; + --ds-color-accent-1: #2a0945; + --ds-color-accent-2: #360b58; + --ds-color-accent-3: #480f74; + --ds-color-accent-4: #581f85; + --ds-color-accent-5: #66328f; + --ds-color-accent-6: #6d3b94; + --ds-color-accent-7: #875ea8; + --ds-color-accent-8: #c9b7d8; + --ds-color-accent-9: #baa2cc; + --ds-color-accent-10: #a88abf; + --ds-color-accent-11: #9773b3; + --ds-color-accent-12: #b399c7; + --ds-color-accent-13: #e8e0ee; + --ds-color-accent-contrast-1: #000000; + --ds-color-accent-contrast-2: #1d1a20; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #131c27; + --ds-color-neutral-2: #192433; + --ds-color-neutral-3: #243142; + --ds-color-neutral-4: #333e4e; + --ds-color-neutral-5: #424d5b; + --ds-color-neutral-6: #495361; + --ds-color-neutral-7: #67707c; + --ds-color-neutral-8: #bbbfc4; + --ds-color-neutral-9: #a6abb2; + --ds-color-neutral-10: #90969e; + --ds-color-neutral-11: #7a818c; + --ds-color-neutral-12: #9ea3ab; + --ds-color-neutral-13: #e1e3e5; + --ds-color-neutral-contrast-1: #000000; + --ds-color-neutral-contrast-2: #1b1b1d; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #251432; + --ds-color-brand1-2: #2f1a40; + --ds-color-brand1-3: #402358; + --ds-color-brand1-4: #512c6e; + --ds-color-brand1-5: #633687; + --ds-color-brand1-6: #6c3b93; + --ds-color-brand1-7: #9250c7; + --ds-color-brand1-8: #d3b0ee; + --ds-color-brand1-9: #9552cb; + --ds-color-brand1-10: #7b44a8; + --ds-color-brand1-11: #633687; + --ds-color-brand1-12: #c08ee7; + --ds-color-brand1-13: #ecddf8; + --ds-color-brand1-contrast-1: #ffffff; + --ds-color-brand1-contrast-2: #fbf8fd; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #281429; + --ds-color-brand2-2: #331a35; + --ds-color-brand2-3: #462447; + --ds-color-brand2-4: #582d5a; + --ds-color-brand2-5: #6c376e; + --ds-color-brand2-6: #753d78; + --ds-color-brand2-7: #9f52a2; + --ds-color-brand2-8: #eba8ee; + --ds-color-brand2-9: #753d78; + --ds-color-brand2-10: #5b2f5e; + --ds-color-brand2-11: #422244; + --ds-color-brand2-12: #e17ee6; + --ds-color-brand2-13: #f6d9f8; + --ds-color-brand2-contrast-1: #ffffff; + --ds-color-brand2-contrast-2: #f4eff4; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #2b1323; + --ds-color-brand3-2: #38192e; + --ds-color-brand3-3: #4b223e; + --ds-color-brand3-4: #5f2b4e; + --ds-color-brand3-5: #74355f; + --ds-color-brand3-6: #7f3a68; + --ds-color-brand3-7: #ab4e8d; + --ds-color-brand3-8: #f1a7d9; + --ds-color-brand3-9: #863d6e; + --ds-color-brand3-10: #693057; + --ds-color-brand3-11: #4e2440; + --ds-color-brand3-12: #eb7dc7; + --ds-color-brand3-13: #f9daef; + --ds-color-brand3-contrast-1: #ffffff; + --ds-color-brand3-contrast-2: #f8f4f7; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #031d30; + --ds-color-info-background-subtle: #032540; + --ds-color-info-surface-default: #043256; + --ds-color-info-surface-hover: #063f6c; + --ds-color-info-surface-active: #074d84; + --ds-color-info-border-subtle: #075490; + --ds-color-info-border-default: #0c72c1; + --ds-color-info-border-strong: #98c3e5; + --ds-color-info-base-default: #2a84c8; + --ds-color-info-base-hover: #0a6dba; + --ds-color-info-base-active: #085998; + --ds-color-info-text-subtle: #6ba9d9; + --ds-color-info-text-default: #d3e5f4; + --ds-color-info-contrast-default: #000000; + --ds-color-info-contrast-subtle: #040c13; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #131c27; + --ds-color-focus-outer: #e8e0ee; +color-scheme: dark; +} + +} + +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.typography.primary { +:root, [data-ds-typography="primary"] { + --ds-font-family: Inter; + --ds-font-weight-medium: 500; + --ds-font-weight-semibold: 600; + --ds-font-weight-regular: 400; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --ds-letter-spacing-7: 0.25%; + --ds-letter-spacing-8: 0.5%; + --ds-letter-spacing-9: 1.5%; + + .ds-error_message--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-error_message--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-error_message--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-error_message--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-label--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-label--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-long--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-long--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-short--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-short--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-ingress--sm { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-ingress--md { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--lg { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-heading--2xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--xs { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--sm { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-5); + } + + .ds-heading--md { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-3); + } + + .ds-heading--lg { + font-size: var(--ds-font-size-9); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-2); + } + + .ds-heading--xl { + font-size: var(--ds-font-size-10); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-heading--2xl { + font-size: var(--ds-font-size-11); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-font-weight--medium { + font-weight: 500; + } + + .ds-font-weight--semibold { + font-weight: 600; + } + + .ds-font-weight--regular { + font-weight: 400; + } + + .ds-line-height--sm { + line-height: 1.3; + } + + .ds-line-height--md { + line-height: 1.5; + } + + .ds-line-height--lg { + line-height: 1.7; + } +} +} \ No newline at end of file diff --git a/packages/theme/brand/uutilsynet.css b/packages/theme/brand/uutilsynet.css index 4883161881..8910bd9f57 100644 --- a/packages/theme/brand/uutilsynet.css +++ b/packages/theme/brand/uutilsynet.css @@ -2,8 +2,1899 @@ @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components; -@import url('uutilsynet/color-mode/light.css'); -@import url('uutilsynet/typography/secondary.css'); -@import url('uutilsynet/semantic.css'); -@import url('uutilsynet/color-mode/dark.css'); -@import url('uutilsynet/typography/primary.css'); \ No newline at end of file +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color-mode.light { +:root, [data-ds-color-mode="light"] { + --ds-global-blue-1: #fefeff; + --ds-global-blue-2: #edf5fa; + --ds-global-blue-3: #d3e5f4; + --ds-global-blue-4: #b7d5ed; + --ds-global-blue-5: #9bc5e5; + --ds-global-blue-6: #94c1e3; + --ds-global-blue-7: #2f86c9; + --ds-global-blue-8: #075089; + --ds-global-blue-9: #0A71C0; + --ds-global-blue-10: #085ea0; + --ds-global-blue-11: #074b80; + --ds-global-blue-12: #0966ac; + --ds-global-blue-13: #042d4d; + --ds-global-blue-contrast-1: #ffffff; + --ds-global-blue-contrast-2: #f3f8fc; + --ds-global-green-1: #fcfefc; + --ds-global-green-2: #ecf6ed; + --ds-global-green-3: #cfe9d3; + --ds-global-green-4: #b3dcb8; + --ds-global-green-5: #95ce9d; + --ds-global-green-6: #8bca94; + --ds-global-green-7: #189528; + --ds-global-green-8: #045a10; + --ds-global-green-9: #078D19; + --ds-global-green-10: #067615; + --ds-global-green-11: #056011; + --ds-global-green-12: #067314; + --ds-global-green-13: #033409; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #000401; + --ds-global-orange-1: #fffefd; + --ds-global-orange-2: #fbf1ec; + --ds-global-orange-3: #f4ddd0; + --ds-global-orange-4: #eecab7; + --ds-global-orange-5: #e7b69c; + --ds-global-orange-6: #e5b094; + --ds-global-orange-7: #cc632b; + --ds-global-orange-8: #7e3a15; + --ds-global-orange-9: #CA5C21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #a1491a; + --ds-global-orange-13: #47210c; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #0d0602; + --ds-global-purple-1: #fefefe; + --ds-global-purple-2: #f5f2f9; + --ds-global-purple-3: #e7dfef; + --ds-global-purple-4: #d9cce6; + --ds-global-purple-5: #ccbadd; + --ds-global-purple-6: #c7b4da; + --ds-global-purple-7: #9572b9; + --ds-global-purple-8: #663399; + --ds-global-purple-9: #663299; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #7b4ea7; + --ds-global-purple-13: #3b1d59; + --ds-global-purple-contrast-1: #ffffff; + --ds-global-purple-contrast-2: #eee8f3; + --ds-global-red-1: #fffefe; + --ds-global-red-2: #fbf1f1; + --ds-global-red-3: #f5dcdc; + --ds-global-red-4: #f0c7c7; + --ds-global-red-5: #eab3b3; + --ds-global-red-6: #e8acac; + --ds-global-red-7: #d25b5b; + --ds-global-red-8: #9a1616; + --ds-global-red-9: #C01B1B; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #c22020; + --ds-global-red-13: #5a0d0d; + --ds-global-red-contrast-1: #ffffff; + --ds-global-red-contrast-2: #f6dfdf; + --ds-global-yellow-1: #fffefc; + --ds-global-yellow-2: #fbf2d3; + --ds-global-yellow-3: #f5e19b; + --ds-global-yellow-4: #efcf5d; + --ds-global-yellow-5: #e6bc27; + --ds-global-yellow-6: #e0b726; + --ds-global-yellow-7: #9a7e1a; + --ds-global-yellow-8: #5d4c10; + --ds-global-yellow-9: #EABF28; + --ds-global-yellow-10: #d0aa24; + --ds-global-yellow-11: #b7951f; + --ds-global-yellow-12: #776114; + --ds-global-yellow-13: #352b09; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #fefeff; + --ds-color-accent-2: #eef4fa; + --ds-color-accent-3: #d1e3f3; + --ds-color-accent-4: #bad5ec; + --ds-color-accent-5: #a1c5e5; + --ds-color-accent-6: #97bfe3; + --ds-color-accent-7: #3885c9; + --ds-color-accent-8: #014e93; + --ds-color-accent-9: #0163ba; + --ds-color-accent-10: #015097; + --ds-color-accent-11: #013f75; + --ds-color-accent-12: #0163ba; + --ds-color-accent-13: #002d54; + --ds-color-accent-contrast-1: #ffffff; + --ds-color-accent-contrast-2: #dbe9f5; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #fefefe; + --ds-color-neutral-2: #f3f4f5; + --ds-color-neutral-3: #e1e3e5; + --ds-color-neutral-4: #ced1d4; + --ds-color-neutral-5: #bdc1c6; + --ds-color-neutral-6: #b8bcc1; + --ds-color-neutral-7: #7a818c; + --ds-color-neutral-8: #444e5d; + --ds-color-neutral-9: #1e2b3c; + --ds-color-neutral-10: #303c4b; + --ds-color-neutral-11: #444e5d; + --ds-color-neutral-12: #5b6471; + --ds-color-neutral-13: #202c3d; + --ds-color-neutral-contrast-1: #ffffff; + --ds-color-neutral-contrast-2: #bbbfc4; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #fefeff; + --ds-color-brand1-2: #f3f4fc; + --ds-color-brand1-3: #dfe0f6; + --ds-color-brand1-4: #cecff1; + --ds-color-brand1-5: #bbbdec; + --ds-color-brand1-6: #b5b7ea; + --ds-color-brand1-7: #7377d8; + --ds-color-brand1-8: #414595; + --ds-color-brand1-9: #5b60d1; + --ds-color-brand1-10: #4b4fad; + --ds-color-brand1-11: #3b3e88; + --ds-color-brand1-12: #5357be; + --ds-color-brand1-13: #252756; + --ds-color-brand1-contrast-1: #ffffff; + --ds-color-brand1-contrast-2: #f3f4fc; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #fffdfb; + --ds-color-brand2-2: #fff1e7; + --ds-color-brand2-3: #ffdac0; + --ds-color-brand2-4: #fec59c; + --ds-color-brand2-5: #feb078; + --ds-color-brand2-6: #fea769; + --ds-color-brand2-7: #b07349; + --ds-color-brand2-8: #6a452c; + --ds-color-brand2-9: #fea769; + --ds-color-brand2-10: #e0945d; + --ds-color-brand2-11: #c48151; + --ds-color-brand2-12: #875838; + --ds-color-brand2-13: #3c2719; + --ds-color-brand2-contrast-1: #000000; + --ds-color-brand2-contrast-2: #362316; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #fcfefd; + --ds-color-brand3-2: #edf5f3; + --ds-color-brand3-3: #d3e6e1; + --ds-color-brand3-4: #bad7cf; + --ds-color-brand3-5: #a1c9bf; + --ds-color-brand3-6: #98c4b9; + --ds-color-brand3-7: #508c7c; + --ds-color-brand3-8: #31544b; + --ds-color-brand3-9: #5da290; + --ds-color-brand3-10: #508c7c; + --ds-color-brand3-11: #437668; + --ds-color-brand3-12: #3e6b60; + --ds-color-brand3-13: #1c302b; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #050808; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #fefeff; + --ds-color-info-background-subtle: #edf5fa; + --ds-color-info-surface-default: #d3e5f4; + --ds-color-info-surface-hover: #b7d5ed; + --ds-color-info-surface-active: #9bc5e5; + --ds-color-info-border-subtle: #94c1e3; + --ds-color-info-border-default: #2f86c9; + --ds-color-info-border-strong: #075089; + --ds-color-info-base-default: #0A71C0; + --ds-color-info-base-hover: #085ea0; + --ds-color-info-base-active: #074b80; + --ds-color-info-text-subtle: #0966ac; + --ds-color-info-text-default: #042d4d; + --ds-color-info-contrast-default: #ffffff; + --ds-color-info-contrast-subtle: #f3f8fc; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #fefefe; + --ds-color-focus-outer: #002d54; +color-scheme: light; +} + +@media (prefers-color-scheme: light) { + [data-ds-color-mode="auto"] { + --ds-global-blue-1: #fefeff; + --ds-global-blue-2: #edf5fa; + --ds-global-blue-3: #d3e5f4; + --ds-global-blue-4: #b7d5ed; + --ds-global-blue-5: #9bc5e5; + --ds-global-blue-6: #94c1e3; + --ds-global-blue-7: #2f86c9; + --ds-global-blue-8: #075089; + --ds-global-blue-9: #0A71C0; + --ds-global-blue-10: #085ea0; + --ds-global-blue-11: #074b80; + --ds-global-blue-12: #0966ac; + --ds-global-blue-13: #042d4d; + --ds-global-blue-contrast-1: #ffffff; + --ds-global-blue-contrast-2: #f3f8fc; + --ds-global-green-1: #fcfefc; + --ds-global-green-2: #ecf6ed; + --ds-global-green-3: #cfe9d3; + --ds-global-green-4: #b3dcb8; + --ds-global-green-5: #95ce9d; + --ds-global-green-6: #8bca94; + --ds-global-green-7: #189528; + --ds-global-green-8: #045a10; + --ds-global-green-9: #078D19; + --ds-global-green-10: #067615; + --ds-global-green-11: #056011; + --ds-global-green-12: #067314; + --ds-global-green-13: #033409; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #000401; + --ds-global-orange-1: #fffefd; + --ds-global-orange-2: #fbf1ec; + --ds-global-orange-3: #f4ddd0; + --ds-global-orange-4: #eecab7; + --ds-global-orange-5: #e7b69c; + --ds-global-orange-6: #e5b094; + --ds-global-orange-7: #cc632b; + --ds-global-orange-8: #7e3a15; + --ds-global-orange-9: #CA5C21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #a1491a; + --ds-global-orange-13: #47210c; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #0d0602; + --ds-global-purple-1: #fefefe; + --ds-global-purple-2: #f5f2f9; + --ds-global-purple-3: #e7dfef; + --ds-global-purple-4: #d9cce6; + --ds-global-purple-5: #ccbadd; + --ds-global-purple-6: #c7b4da; + --ds-global-purple-7: #9572b9; + --ds-global-purple-8: #663399; + --ds-global-purple-9: #663299; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #7b4ea7; + --ds-global-purple-13: #3b1d59; + --ds-global-purple-contrast-1: #ffffff; + --ds-global-purple-contrast-2: #eee8f3; + --ds-global-red-1: #fffefe; + --ds-global-red-2: #fbf1f1; + --ds-global-red-3: #f5dcdc; + --ds-global-red-4: #f0c7c7; + --ds-global-red-5: #eab3b3; + --ds-global-red-6: #e8acac; + --ds-global-red-7: #d25b5b; + --ds-global-red-8: #9a1616; + --ds-global-red-9: #C01B1B; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #c22020; + --ds-global-red-13: #5a0d0d; + --ds-global-red-contrast-1: #ffffff; + --ds-global-red-contrast-2: #f6dfdf; + --ds-global-yellow-1: #fffefc; + --ds-global-yellow-2: #fbf2d3; + --ds-global-yellow-3: #f5e19b; + --ds-global-yellow-4: #efcf5d; + --ds-global-yellow-5: #e6bc27; + --ds-global-yellow-6: #e0b726; + --ds-global-yellow-7: #9a7e1a; + --ds-global-yellow-8: #5d4c10; + --ds-global-yellow-9: #EABF28; + --ds-global-yellow-10: #d0aa24; + --ds-global-yellow-11: #b7951f; + --ds-global-yellow-12: #776114; + --ds-global-yellow-13: #352b09; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #fefeff; + --ds-color-accent-2: #eef4fa; + --ds-color-accent-3: #d1e3f3; + --ds-color-accent-4: #bad5ec; + --ds-color-accent-5: #a1c5e5; + --ds-color-accent-6: #97bfe3; + --ds-color-accent-7: #3885c9; + --ds-color-accent-8: #014e93; + --ds-color-accent-9: #0163ba; + --ds-color-accent-10: #015097; + --ds-color-accent-11: #013f75; + --ds-color-accent-12: #0163ba; + --ds-color-accent-13: #002d54; + --ds-color-accent-contrast-1: #ffffff; + --ds-color-accent-contrast-2: #dbe9f5; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #fefefe; + --ds-color-neutral-2: #f3f4f5; + --ds-color-neutral-3: #e1e3e5; + --ds-color-neutral-4: #ced1d4; + --ds-color-neutral-5: #bdc1c6; + --ds-color-neutral-6: #b8bcc1; + --ds-color-neutral-7: #7a818c; + --ds-color-neutral-8: #444e5d; + --ds-color-neutral-9: #1e2b3c; + --ds-color-neutral-10: #303c4b; + --ds-color-neutral-11: #444e5d; + --ds-color-neutral-12: #5b6471; + --ds-color-neutral-13: #202c3d; + --ds-color-neutral-contrast-1: #ffffff; + --ds-color-neutral-contrast-2: #bbbfc4; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #fefeff; + --ds-color-brand1-2: #f3f4fc; + --ds-color-brand1-3: #dfe0f6; + --ds-color-brand1-4: #cecff1; + --ds-color-brand1-5: #bbbdec; + --ds-color-brand1-6: #b5b7ea; + --ds-color-brand1-7: #7377d8; + --ds-color-brand1-8: #414595; + --ds-color-brand1-9: #5b60d1; + --ds-color-brand1-10: #4b4fad; + --ds-color-brand1-11: #3b3e88; + --ds-color-brand1-12: #5357be; + --ds-color-brand1-13: #252756; + --ds-color-brand1-contrast-1: #ffffff; + --ds-color-brand1-contrast-2: #f3f4fc; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #fffdfb; + --ds-color-brand2-2: #fff1e7; + --ds-color-brand2-3: #ffdac0; + --ds-color-brand2-4: #fec59c; + --ds-color-brand2-5: #feb078; + --ds-color-brand2-6: #fea769; + --ds-color-brand2-7: #b07349; + --ds-color-brand2-8: #6a452c; + --ds-color-brand2-9: #fea769; + --ds-color-brand2-10: #e0945d; + --ds-color-brand2-11: #c48151; + --ds-color-brand2-12: #875838; + --ds-color-brand2-13: #3c2719; + --ds-color-brand2-contrast-1: #000000; + --ds-color-brand2-contrast-2: #362316; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #fcfefd; + --ds-color-brand3-2: #edf5f3; + --ds-color-brand3-3: #d3e6e1; + --ds-color-brand3-4: #bad7cf; + --ds-color-brand3-5: #a1c9bf; + --ds-color-brand3-6: #98c4b9; + --ds-color-brand3-7: #508c7c; + --ds-color-brand3-8: #31544b; + --ds-color-brand3-9: #5da290; + --ds-color-brand3-10: #508c7c; + --ds-color-brand3-11: #437668; + --ds-color-brand3-12: #3e6b60; + --ds-color-brand3-13: #1c302b; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #050808; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #fefeff; + --ds-color-info-background-subtle: #edf5fa; + --ds-color-info-surface-default: #d3e5f4; + --ds-color-info-surface-hover: #b7d5ed; + --ds-color-info-surface-active: #9bc5e5; + --ds-color-info-border-subtle: #94c1e3; + --ds-color-info-border-default: #2f86c9; + --ds-color-info-border-strong: #075089; + --ds-color-info-base-default: #0A71C0; + --ds-color-info-base-hover: #085ea0; + --ds-color-info-base-active: #074b80; + --ds-color-info-text-subtle: #0966ac; + --ds-color-info-text-default: #042d4d; + --ds-color-info-contrast-default: #ffffff; + --ds-color-info-contrast-subtle: #f3f8fc; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #fefefe; + --ds-color-focus-outer: #002d54; +color-scheme: light; +} + +} + +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.typography.secondary { +[data-ds-typography="secondary"] { + --ds-font-family: IBM Plex Mono; + --ds-font-weight-medium: 400; + --ds-font-weight-semibold: 700; + --ds-font-weight-regular: 400; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --ds-letter-spacing-7: 0.25%; + --ds-letter-spacing-8: 0.5%; + --ds-letter-spacing-9: 1.5%; + + .ds-error_message--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-error_message--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-error_message--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-error_message--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-label--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-label--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-long--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-long--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-short--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-short--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-ingress--sm { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-ingress--md { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--lg { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-heading--2xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--xs { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--sm { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-5); + } + + .ds-heading--md { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-3); + } + + .ds-heading--lg { + font-size: var(--ds-font-size-9); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-2); + } + + .ds-heading--xl { + font-size: var(--ds-font-size-10); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-heading--2xl { + font-size: var(--ds-font-size-11); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-font-weight--medium { + font-weight: 400; + } + + .ds-font-weight--semibold { + font-weight: 700; + } + + .ds-font-weight--regular { + font-weight: 400; + } + + .ds-line-height--sm { + line-height: 1.3; + } + + .ds-line-height--md { + line-height: 1.5; + } + + .ds-line-height--lg { + line-height: 1.7; + } +} +} +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.semantic { +:root { + --ds-typography-heading-2xl: 500 3.75rem/1.3 'Inter'; + --ds-typography-heading-xl: 500 3rem/1.3 'Inter'; + --ds-typography-heading-lg: 500 2.25rem/1.3 'Inter'; + --ds-typography-heading-md: 500 1.875rem/1.3 'Inter'; + --ds-typography-heading-sm: 500 1.5rem/1.3 'Inter'; + --ds-typography-heading-xs: 500 1.3125rem/1.3 'Inter'; + --ds-typography-heading-2xs: 500 1.125rem/1.3 'Inter'; + --ds-typography-ingress-lg: 400 1.875rem/1.7 'Inter'; + --ds-typography-ingress-md: 400 1.5rem/1.7 'Inter'; + --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Inter'; + --ds-typography-ingress-xs: 400 1.125rem/1.7 'Inter'; + --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Inter'; + --ds-typography-paragraph-md: 400 1.125rem/1.5 'Inter'; + --ds-typography-paragraph-sm: 400 1rem/1.5 'Inter'; + --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Inter'; + --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Inter'; + --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Inter'; + --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Inter'; + --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Inter'; + --ds-typography-paragraph-long-lg: 400 1.3125rem/1.7 'Inter'; + --ds-typography-paragraph-long-md: 400 1.125rem/1.7 'Inter'; + --ds-typography-paragraph-long-sm: 400 1rem/1.7 'Inter'; + --ds-typography-paragraph-long-xs: 400 0.875rem/1.7 'Inter'; + --ds-typography-label-lg: 500 1.3125rem/1.3 'Inter'; + --ds-typography-label-md: 500 1.125rem/1.3 'Inter'; + --ds-typography-label-sm: 500 1rem/1.3 'Inter'; + --ds-typography-label-xs: 500 0.875rem/1.3 'Inter'; + --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Inter'; + --ds-typography-error_message-md: 400 1.125rem/1.3 'Inter'; + --ds-typography-error_message-sm: 400 1rem/1.3 'Inter'; + --ds-typography-error_message-xs: 400 0.875rem/1.3 'Inter'; + --ds-disabled-opacity: 30%; + --ds-border-radius-sm: calc(var(--ds-border-radius-base)*0.5); + --ds-border-radius-md: calc(var(--ds-border-radius-base)*1); + --ds-border-radius-lg: calc(var(--ds-border-radius-base)*2); + --ds-border-radius-xl: calc(var(--ds-border-radius-base)*3); + --ds-border-radius-2xl: calc(var(--ds-border-radius-base)*4); + --ds-border-radius-3xl: calc(var(--ds-border-radius-base)*6); + --ds-border-radius-4xl: calc(var(--ds-border-radius-base)*8); + --ds-border-radius-full: 624.9375rem; + --ds-border-radius-base: 0.25rem; + --ds-spacing-0: calc(var(--ds-spacing-base)*0); + --ds-spacing-1: calc(var(--ds-spacing-base)*1); + --ds-spacing-2: calc(var(--ds-spacing-base)*2); + --ds-spacing-3: calc(var(--ds-spacing-base)*3); + --ds-spacing-4: calc(var(--ds-spacing-base)*4); + --ds-spacing-5: calc(var(--ds-spacing-base)*5); + --ds-spacing-6: calc(var(--ds-spacing-base)*6); + --ds-spacing-7: calc(var(--ds-spacing-base)*7); + --ds-spacing-8: calc(var(--ds-spacing-base)*8); + --ds-spacing-9: calc(var(--ds-spacing-base)*9); + --ds-spacing-10: calc(var(--ds-spacing-base)*10); + --ds-spacing-11: calc(var(--ds-spacing-base)*11); + --ds-spacing-12: calc(var(--ds-spacing-base)*12); + --ds-spacing-13: calc(var(--ds-spacing-base)*13); + --ds-spacing-14: calc(var(--ds-spacing-base)*14); + --ds-spacing-15: calc(var(--ds-spacing-base)*15); + --ds-spacing-18: calc(var(--ds-spacing-base)*18); + --ds-spacing-22: calc(var(--ds-spacing-base)*22); + --ds-spacing-26: calc(var(--ds-spacing-base)*26); + --ds-spacing-30: calc(var(--ds-spacing-base)*30); + --ds-spacing-base: 0.25rem; + --ds-sizing-0: calc(var(--ds-sizing-base)*0); + --ds-sizing-1: calc(var(--ds-sizing-base)*1); + --ds-sizing-2: calc(var(--ds-sizing-base)*2); + --ds-sizing-3: calc(var(--ds-sizing-base)*3); + --ds-sizing-4: calc(var(--ds-sizing-base)*4); + --ds-sizing-5: calc(var(--ds-sizing-base)*5); + --ds-sizing-6: calc(var(--ds-sizing-base)*6); + --ds-sizing-7: calc(var(--ds-sizing-base)*7); + --ds-sizing-8: calc(var(--ds-sizing-base)*8); + --ds-sizing-9: calc(var(--ds-sizing-base)*9); + --ds-sizing-10: calc(var(--ds-sizing-base)*10); + --ds-sizing-11: calc(var(--ds-sizing-base)*11); + --ds-sizing-12: calc(var(--ds-sizing-base)*12); + --ds-sizing-13: calc(var(--ds-sizing-base)*13); + --ds-sizing-14: calc(var(--ds-sizing-base)*14); + --ds-sizing-15: calc(var(--ds-sizing-base)*15); + --ds-sizing-18: calc(var(--ds-sizing-base)*18); + --ds-sizing-22: calc(var(--ds-sizing-base)*22); + --ds-sizing-26: calc(var(--ds-sizing-base)*26); + --ds-sizing-30: calc(var(--ds-sizing-base)*30); + --ds-sizing-base: 0.25rem; + --ds-border-width-default: 1px; + --ds-border-width-highlight: 2px; + --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12); + --ds-shadow-sm: 0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1); + --ds-shadow-md: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12); + --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14); + --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16); +} + +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color-mode.dark { +[data-ds-color-mode="dark"] { + --ds-global-blue-1: #031d30; + --ds-global-blue-2: #032540; + --ds-global-blue-3: #043256; + --ds-global-blue-4: #063f6c; + --ds-global-blue-5: #074d84; + --ds-global-blue-6: #075490; + --ds-global-blue-7: #0c72c1; + --ds-global-blue-8: #98c3e5; + --ds-global-blue-9: #2a84c8; + --ds-global-blue-10: #0a6dba; + --ds-global-blue-11: #085998; + --ds-global-blue-12: #6ba9d9; + --ds-global-blue-13: #d3e5f4; + --ds-global-blue-contrast-1: #000000; + --ds-global-blue-contrast-2: #040c13; + --ds-global-green-1: #022106; + --ds-global-green-2: #022b08; + --ds-global-green-3: #03380a; + --ds-global-green-4: #04480d; + --ds-global-green-5: #045810; + --ds-global-green-6: #056011; + --ds-global-green-7: #068117; + --ds-global-green-8: #90cc98; + --ds-global-green-9: #078818; + --ds-global-green-10: #067114; + --ds-global-green-11: #045a10; + --ds-global-green-12: #5fb56b; + --ds-global-green-13: #cfe9d3; + --ds-global-green-contrast-1: #ffffff; + --ds-global-green-contrast-2: #f9fcf9; + --ds-global-orange-1: #2e1508; + --ds-global-orange-2: #3a1b0a; + --ds-global-orange-3: #50240d; + --ds-global-orange-4: #652e10; + --ds-global-orange-5: #7a3814; + --ds-global-orange-6: #863d16; + --ds-global-orange-7: #b5531e; + --ds-global-orange-8: #e6b398; + --ds-global-orange-9: #ba541e; + --ds-global-orange-10: #994619; + --ds-global-orange-11: #7a3814; + --ds-global-orange-12: #db9169; + --ds-global-orange-13: #f4ddd0; + --ds-global-orange-contrast-1: #ffffff; + --ds-global-orange-contrast-2: #fcf8f6; + --ds-global-purple-1: #251238; + --ds-global-purple-2: #301748; + --ds-global-purple-3: #402060; + --ds-global-purple-4: #52287a; + --ds-global-purple-5: #643196; + --ds-global-purple-6: #6b399d; + --ds-global-purple-7: #865daf; + --ds-global-purple-8: #c9b7db; + --ds-global-purple-9: #b298cc; + --ds-global-purple-10: #a181c0; + --ds-global-purple-11: #8f69b5; + --ds-global-purple-12: #b298cc; + --ds-global-purple-13: #e7dfef; + --ds-global-purple-contrast-1: #000000; + --ds-global-purple-contrast-2: #18141b; + --ds-global-red-1: #3b0808; + --ds-global-red-2: #4b0a0a; + --ds-global-red-3: #620e0e; + --ds-global-red-4: #7c1212; + --ds-global-red-5: #961515; + --ds-global-red-6: #a31717; + --ds-global-red-7: #c93c3c; + --ds-global-red-8: #e9b0b0; + --ds-global-red-9: #d76e6e; + --ds-global-red-10: #ce4e4e; + --ds-global-red-11: #c32727; + --ds-global-red-12: #df8d8d; + --ds-global-red-13: #f5dcdc; + --ds-global-red-contrast-1: #000000; + --ds-global-red-contrast-2: #271414; + --ds-global-yellow-1: #221b06; + --ds-global-yellow-2: #2b2307; + --ds-global-yellow-3: #3a300a; + --ds-global-yellow-4: #4a3d0d; + --ds-global-yellow-5: #5a4a0f; + --ds-global-yellow-6: #635011; + --ds-global-yellow-7: #856d17; + --ds-global-yellow-8: #e4ba27; + --ds-global-yellow-9: #3d310a; + --ds-global-yellow-10: #52430e; + --ds-global-yellow-11: #695512; + --ds-global-yellow-12: #c39f21; + --ds-global-yellow-13: #f5e19b; + --ds-global-yellow-contrast-1: #ffffff; + --ds-global-yellow-contrast-2: #ccc9bf; + --ds-color-accent-1: #001c36; + --ds-color-accent-2: #002545; + --ds-color-accent-3: #00315b; + --ds-color-accent-4: #013f75; + --ds-color-accent-5: #014b8e; + --ds-color-accent-6: #01539b; + --ds-color-accent-7: #1971c0; + --ds-color-accent-8: #9bc2e4; + --ds-color-accent-9: #4b90ce; + --ds-color-accent-10: #277ac4; + --ds-color-accent-11: #0163ba; + --ds-color-accent-12: #72a8d9; + --ds-color-accent-13: #d1e3f3; + --ds-color-accent-contrast-1: #000000; + --ds-color-accent-contrast-2: #0d1823; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #131c27; + --ds-color-neutral-2: #192433; + --ds-color-neutral-3: #243142; + --ds-color-neutral-4: #333e4e; + --ds-color-neutral-5: #424d5b; + --ds-color-neutral-6: #495361; + --ds-color-neutral-7: #67707c; + --ds-color-neutral-8: #bbbfc4; + --ds-color-neutral-9: #a6abb2; + --ds-color-neutral-10: #90969e; + --ds-color-neutral-11: #7a818c; + --ds-color-neutral-12: #9ea3ab; + --ds-color-neutral-13: #e1e3e5; + --ds-color-neutral-contrast-1: #000000; + --ds-color-neutral-contrast-2: #1b1b1d; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #171835; + --ds-color-brand1-2: #1e1f45; + --ds-color-brand1-3: #292b5e; + --ds-color-brand1-4: #343677; + --ds-color-brand1-5: #3f4391; + --ds-color-brand1-6: #45499f; + --ds-color-brand1-7: #5e63d2; + --ds-color-brand1-8: #b8baeb; + --ds-color-brand1-9: #7377d8; + --ds-color-brand1-10: #5b60d1; + --ds-color-brand1-11: #4b4fad; + --ds-color-brand1-12: #999de3; + --ds-color-brand1-13: #dfe0f6; + --ds-color-brand1-contrast-1: #000000; + --ds-color-brand1-contrast-2: #0d0d18; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #25190f; + --ds-color-brand2-2: #312014; + --ds-color-brand2-3: #422b1b; + --ds-color-brand2-4: #543823; + --ds-color-brand2-5: #67442a; + --ds-color-brand2-6: #704a2e; + --ds-color-brand2-7: #97643f; + --ds-color-brand2-8: #feab70; + --ds-color-brand2-9: #4e3420; + --ds-color-brand2-10: #67442a; + --ds-color-brand2-11: #815535; + --ds-color-brand2-12: #dd915b; + --ds-color-brand2-13: #ffdac0; + --ds-color-brand2-contrast-1: #ffffff; + --ds-color-brand2-contrast-2: #d6d0cb; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #121e1b; + --ds-color-brand3-2: #162622; + --ds-color-brand3-3: #1e342f; + --ds-color-brand3-4: #26423b; + --ds-color-brand3-5: #2f5148; + --ds-color-brand3-6: #335a50; + --ds-color-brand3-7: #45786b; + --ds-color-brand3-8: #9cc6bb; + --ds-color-brand3-9: #376056; + --ds-color-brand3-10: #2c4c44; + --ds-color-brand3-11: #213933; + --ds-color-brand3-12: #73ae9f; + --ds-color-brand3-13: #d3e6e1; + --ds-color-brand3-contrast-1: #ffffff; + --ds-color-brand3-contrast-2: #f9fafa; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #031d30; + --ds-color-info-background-subtle: #032540; + --ds-color-info-surface-default: #043256; + --ds-color-info-surface-hover: #063f6c; + --ds-color-info-surface-active: #074d84; + --ds-color-info-border-subtle: #075490; + --ds-color-info-border-default: #0c72c1; + --ds-color-info-border-strong: #98c3e5; + --ds-color-info-base-default: #2a84c8; + --ds-color-info-base-hover: #0a6dba; + --ds-color-info-base-active: #085998; + --ds-color-info-text-subtle: #6ba9d9; + --ds-color-info-text-default: #d3e5f4; + --ds-color-info-contrast-default: #000000; + --ds-color-info-contrast-subtle: #040c13; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #131c27; + --ds-color-focus-outer: #d1e3f3; +color-scheme: dark; +} + +@media (prefers-color-scheme: dark) { + [data-ds-color-mode="auto"] { + --ds-global-blue-1: #031d30; + --ds-global-blue-2: #032540; + --ds-global-blue-3: #043256; + --ds-global-blue-4: #063f6c; + --ds-global-blue-5: #074d84; + --ds-global-blue-6: #075490; + --ds-global-blue-7: #0c72c1; + --ds-global-blue-8: #98c3e5; + --ds-global-blue-9: #2a84c8; + --ds-global-blue-10: #0a6dba; + --ds-global-blue-11: #085998; + --ds-global-blue-12: #6ba9d9; + --ds-global-blue-13: #d3e5f4; + --ds-global-blue-contrast-1: #000000; + --ds-global-blue-contrast-2: #040c13; + --ds-global-green-1: #022106; + --ds-global-green-2: #022b08; + --ds-global-green-3: #03380a; + --ds-global-green-4: #04480d; + --ds-global-green-5: #045810; + --ds-global-green-6: #056011; + --ds-global-green-7: #068117; + --ds-global-green-8: #90cc98; + --ds-global-green-9: #078818; + --ds-global-green-10: #067114; + --ds-global-green-11: #045a10; + --ds-global-green-12: #5fb56b; + --ds-global-green-13: #cfe9d3; + --ds-global-green-contrast-1: #ffffff; + --ds-global-green-contrast-2: #f9fcf9; + --ds-global-orange-1: #2e1508; + --ds-global-orange-2: #3a1b0a; + --ds-global-orange-3: #50240d; + --ds-global-orange-4: #652e10; + --ds-global-orange-5: #7a3814; + --ds-global-orange-6: #863d16; + --ds-global-orange-7: #b5531e; + --ds-global-orange-8: #e6b398; + --ds-global-orange-9: #ba541e; + --ds-global-orange-10: #994619; + --ds-global-orange-11: #7a3814; + --ds-global-orange-12: #db9169; + --ds-global-orange-13: #f4ddd0; + --ds-global-orange-contrast-1: #ffffff; + --ds-global-orange-contrast-2: #fcf8f6; + --ds-global-purple-1: #251238; + --ds-global-purple-2: #301748; + --ds-global-purple-3: #402060; + --ds-global-purple-4: #52287a; + --ds-global-purple-5: #643196; + --ds-global-purple-6: #6b399d; + --ds-global-purple-7: #865daf; + --ds-global-purple-8: #c9b7db; + --ds-global-purple-9: #b298cc; + --ds-global-purple-10: #a181c0; + --ds-global-purple-11: #8f69b5; + --ds-global-purple-12: #b298cc; + --ds-global-purple-13: #e7dfef; + --ds-global-purple-contrast-1: #000000; + --ds-global-purple-contrast-2: #18141b; + --ds-global-red-1: #3b0808; + --ds-global-red-2: #4b0a0a; + --ds-global-red-3: #620e0e; + --ds-global-red-4: #7c1212; + --ds-global-red-5: #961515; + --ds-global-red-6: #a31717; + --ds-global-red-7: #c93c3c; + --ds-global-red-8: #e9b0b0; + --ds-global-red-9: #d76e6e; + --ds-global-red-10: #ce4e4e; + --ds-global-red-11: #c32727; + --ds-global-red-12: #df8d8d; + --ds-global-red-13: #f5dcdc; + --ds-global-red-contrast-1: #000000; + --ds-global-red-contrast-2: #271414; + --ds-global-yellow-1: #221b06; + --ds-global-yellow-2: #2b2307; + --ds-global-yellow-3: #3a300a; + --ds-global-yellow-4: #4a3d0d; + --ds-global-yellow-5: #5a4a0f; + --ds-global-yellow-6: #635011; + --ds-global-yellow-7: #856d17; + --ds-global-yellow-8: #e4ba27; + --ds-global-yellow-9: #3d310a; + --ds-global-yellow-10: #52430e; + --ds-global-yellow-11: #695512; + --ds-global-yellow-12: #c39f21; + --ds-global-yellow-13: #f5e19b; + --ds-global-yellow-contrast-1: #ffffff; + --ds-global-yellow-contrast-2: #ccc9bf; + --ds-color-accent-1: #001c36; + --ds-color-accent-2: #002545; + --ds-color-accent-3: #00315b; + --ds-color-accent-4: #013f75; + --ds-color-accent-5: #014b8e; + --ds-color-accent-6: #01539b; + --ds-color-accent-7: #1971c0; + --ds-color-accent-8: #9bc2e4; + --ds-color-accent-9: #4b90ce; + --ds-color-accent-10: #277ac4; + --ds-color-accent-11: #0163ba; + --ds-color-accent-12: #72a8d9; + --ds-color-accent-13: #d1e3f3; + --ds-color-accent-contrast-1: #000000; + --ds-color-accent-contrast-2: #0d1823; + --ds-color-accent-background-default: var(--ds-color-accent-1); + --ds-color-accent-background-subtle: var(--ds-color-accent-2); + --ds-color-accent-surface-default: var(--ds-color-accent-3); + --ds-color-accent-surface-hover: var(--ds-color-accent-4); + --ds-color-accent-surface-active: var(--ds-color-accent-5); + --ds-color-accent-border-subtle: var(--ds-color-accent-6); + --ds-color-accent-border-default: var(--ds-color-accent-7); + --ds-color-accent-border-strong: var(--ds-color-accent-8); + --ds-color-accent-base-default: var(--ds-color-accent-9); + --ds-color-accent-base-hover: var(--ds-color-accent-10); + --ds-color-accent-base-active: var(--ds-color-accent-11); + --ds-color-accent-text-subtle: var(--ds-color-accent-12); + --ds-color-accent-text-default: var(--ds-color-accent-13); + --ds-color-accent-contrast-default: var(--ds-color-accent-contrast-1); + --ds-color-accent-contrast-subtle: var(--ds-color-accent-contrast-2); + --ds-color-neutral-1: #131c27; + --ds-color-neutral-2: #192433; + --ds-color-neutral-3: #243142; + --ds-color-neutral-4: #333e4e; + --ds-color-neutral-5: #424d5b; + --ds-color-neutral-6: #495361; + --ds-color-neutral-7: #67707c; + --ds-color-neutral-8: #bbbfc4; + --ds-color-neutral-9: #a6abb2; + --ds-color-neutral-10: #90969e; + --ds-color-neutral-11: #7a818c; + --ds-color-neutral-12: #9ea3ab; + --ds-color-neutral-13: #e1e3e5; + --ds-color-neutral-contrast-1: #000000; + --ds-color-neutral-contrast-2: #1b1b1d; + --ds-color-neutral-background-default: var(--ds-color-neutral-1); + --ds-color-neutral-background-subtle: var(--ds-color-neutral-2); + --ds-color-neutral-surface-default: var(--ds-color-neutral-3); + --ds-color-neutral-surface-hover: var(--ds-color-neutral-4); + --ds-color-neutral-surface-active: var(--ds-color-neutral-5); + --ds-color-neutral-border-subtle: var(--ds-color-neutral-6); + --ds-color-neutral-border-default: var(--ds-color-neutral-7); + --ds-color-neutral-border-strong: var(--ds-color-neutral-8); + --ds-color-neutral-base-default: var(--ds-color-neutral-9); + --ds-color-neutral-base-hover: var(--ds-color-neutral-10); + --ds-color-neutral-base-active: var(--ds-color-neutral-11); + --ds-color-neutral-text-subtle: var(--ds-color-neutral-12); + --ds-color-neutral-text-default: var(--ds-color-neutral-13); + --ds-color-neutral-contrast-default: var(--ds-color-neutral-contrast-1); + --ds-color-neutral-contrast-subtle: var(--ds-color-neutral-contrast-2); + --ds-color-brand1-1: #171835; + --ds-color-brand1-2: #1e1f45; + --ds-color-brand1-3: #292b5e; + --ds-color-brand1-4: #343677; + --ds-color-brand1-5: #3f4391; + --ds-color-brand1-6: #45499f; + --ds-color-brand1-7: #5e63d2; + --ds-color-brand1-8: #b8baeb; + --ds-color-brand1-9: #7377d8; + --ds-color-brand1-10: #5b60d1; + --ds-color-brand1-11: #4b4fad; + --ds-color-brand1-12: #999de3; + --ds-color-brand1-13: #dfe0f6; + --ds-color-brand1-contrast-1: #000000; + --ds-color-brand1-contrast-2: #0d0d18; + --ds-color-brand1-background-default: var(--ds-color-brand1-1); + --ds-color-brand1-background-subtle: var(--ds-color-brand1-2); + --ds-color-brand1-surface-default: var(--ds-color-brand1-3); + --ds-color-brand1-surface-hover: var(--ds-color-brand1-4); + --ds-color-brand1-surface-active: var(--ds-color-brand1-5); + --ds-color-brand1-border-subtle: var(--ds-color-brand1-6); + --ds-color-brand1-border-default: var(--ds-color-brand1-7); + --ds-color-brand1-border-strong: var(--ds-color-brand1-8); + --ds-color-brand1-base-default: var(--ds-color-brand1-9); + --ds-color-brand1-base-hover: var(--ds-color-brand1-10); + --ds-color-brand1-base-active: var(--ds-color-brand1-11); + --ds-color-brand1-text-subtle: var(--ds-color-brand1-12); + --ds-color-brand1-text-default: var(--ds-color-brand1-13); + --ds-color-brand1-contrast-default: var(--ds-color-brand1-contrast-1); + --ds-color-brand1-contrast-subtle: var(--ds-color-brand1-contrast-2); + --ds-color-brand2-1: #25190f; + --ds-color-brand2-2: #312014; + --ds-color-brand2-3: #422b1b; + --ds-color-brand2-4: #543823; + --ds-color-brand2-5: #67442a; + --ds-color-brand2-6: #704a2e; + --ds-color-brand2-7: #97643f; + --ds-color-brand2-8: #feab70; + --ds-color-brand2-9: #4e3420; + --ds-color-brand2-10: #67442a; + --ds-color-brand2-11: #815535; + --ds-color-brand2-12: #dd915b; + --ds-color-brand2-13: #ffdac0; + --ds-color-brand2-contrast-1: #ffffff; + --ds-color-brand2-contrast-2: #d6d0cb; + --ds-color-brand2-background-default: var(--ds-color-brand2-1); + --ds-color-brand2-background-subtle: var(--ds-color-brand2-2); + --ds-color-brand2-surface-default: var(--ds-color-brand2-3); + --ds-color-brand2-surface-hover: var(--ds-color-brand2-4); + --ds-color-brand2-surface-active: var(--ds-color-brand2-5); + --ds-color-brand2-border-subtle: var(--ds-color-brand2-6); + --ds-color-brand2-border-default: var(--ds-color-brand2-7); + --ds-color-brand2-border-strong: var(--ds-color-brand2-8); + --ds-color-brand2-base-default: var(--ds-color-brand2-9); + --ds-color-brand2-base-hover: var(--ds-color-brand2-10); + --ds-color-brand2-base-active: var(--ds-color-brand2-11); + --ds-color-brand2-text-subtle: var(--ds-color-brand2-12); + --ds-color-brand2-text-default: var(--ds-color-brand2-13); + --ds-color-brand2-contrast-default: var(--ds-color-brand2-contrast-1); + --ds-color-brand2-contrast-subtle: var(--ds-color-brand2-contrast-2); + --ds-color-brand3-1: #121e1b; + --ds-color-brand3-2: #162622; + --ds-color-brand3-3: #1e342f; + --ds-color-brand3-4: #26423b; + --ds-color-brand3-5: #2f5148; + --ds-color-brand3-6: #335a50; + --ds-color-brand3-7: #45786b; + --ds-color-brand3-8: #9cc6bb; + --ds-color-brand3-9: #376056; + --ds-color-brand3-10: #2c4c44; + --ds-color-brand3-11: #213933; + --ds-color-brand3-12: #73ae9f; + --ds-color-brand3-13: #d3e6e1; + --ds-color-brand3-contrast-1: #ffffff; + --ds-color-brand3-contrast-2: #f9fafa; + --ds-color-brand3-background-default: var(--ds-color-brand3-1); + --ds-color-brand3-background-subtle: var(--ds-color-brand3-2); + --ds-color-brand3-surface-default: var(--ds-color-brand3-3); + --ds-color-brand3-surface-hover: var(--ds-color-brand3-4); + --ds-color-brand3-surface-active: var(--ds-color-brand3-5); + --ds-color-brand3-border-subtle: var(--ds-color-brand3-6); + --ds-color-brand3-border-default: var(--ds-color-brand3-7); + --ds-color-brand3-border-strong: var(--ds-color-brand3-8); + --ds-color-brand3-base-default: var(--ds-color-brand3-9); + --ds-color-brand3-base-hover: var(--ds-color-brand3-10); + --ds-color-brand3-base-active: var(--ds-color-brand3-11); + --ds-color-brand3-text-subtle: var(--ds-color-brand3-12); + --ds-color-brand3-text-default: var(--ds-color-brand3-13); + --ds-color-brand3-contrast-default: var(--ds-color-brand3-contrast-1); + --ds-color-brand3-contrast-subtle: var(--ds-color-brand3-contrast-2); + --ds-color-success-background-default: var(--ds-global-green-1); + --ds-color-success-background-subtle: var(--ds-global-green-2); + --ds-color-success-surface-default: var(--ds-global-green-3); + --ds-color-success-surface-hover: var(--ds-global-green-4); + --ds-color-success-surface-active: var(--ds-global-green-5); + --ds-color-success-border-subtle: var(--ds-global-green-6); + --ds-color-success-border-default: var(--ds-global-green-7); + --ds-color-success-border-strong: var(--ds-global-green-8); + --ds-color-success-base-default: var(--ds-global-green-9); + --ds-color-success-base-hover: var(--ds-global-green-10); + --ds-color-success-base-active: var(--ds-global-green-11); + --ds-color-success-text-subtle: var(--ds-global-green-12); + --ds-color-success-text-default: var(--ds-global-green-13); + --ds-color-success-contrast-default: var(--ds-global-green-contrast-1); + --ds-color-success-contrast-subtle: var(--ds-global-green-contrast-2); + --ds-color-danger-background-default: var(--ds-global-red-1); + --ds-color-danger-background-subtle: var(--ds-global-red-2); + --ds-color-danger-surface-default: var(--ds-global-red-3); + --ds-color-danger-surface-hover: var(--ds-global-red-4); + --ds-color-danger-surface-active: var(--ds-global-red-5); + --ds-color-danger-border-subtle: var(--ds-global-red-6); + --ds-color-danger-border-default: var(--ds-global-red-7); + --ds-color-danger-border-strong: var(--ds-global-red-8); + --ds-color-danger-base-default: var(--ds-global-red-9); + --ds-color-danger-base-hover: var(--ds-global-red-10); + --ds-color-danger-base-active: var(--ds-global-red-11); + --ds-color-danger-text-subtle: var(--ds-global-red-12); + --ds-color-danger-text-default: var(--ds-global-red-13); + --ds-color-danger-contrast-default: var(--ds-global-red-contrast-1); + --ds-color-danger-contrast-subtle: var(--ds-global-red-contrast-2); + --ds-color-info-background-default: #031d30; + --ds-color-info-background-subtle: #032540; + --ds-color-info-surface-default: #043256; + --ds-color-info-surface-hover: #063f6c; + --ds-color-info-surface-active: #074d84; + --ds-color-info-border-subtle: #075490; + --ds-color-info-border-default: #0c72c1; + --ds-color-info-border-strong: #98c3e5; + --ds-color-info-base-default: #2a84c8; + --ds-color-info-base-hover: #0a6dba; + --ds-color-info-base-active: #085998; + --ds-color-info-text-subtle: #6ba9d9; + --ds-color-info-text-default: #d3e5f4; + --ds-color-info-contrast-default: #000000; + --ds-color-info-contrast-subtle: #040c13; + --ds-color-warning-background-default: var(--ds-global-yellow-1); + --ds-color-warning-background-subtle: var(--ds-global-yellow-2); + --ds-color-warning-surface-default: var(--ds-global-yellow-3); + --ds-color-warning-surface-hover: var(--ds-global-yellow-4); + --ds-color-warning-surface-active: var(--ds-global-yellow-5); + --ds-color-warning-border-subtle: var(--ds-global-yellow-6); + --ds-color-warning-border-default: var(--ds-global-yellow-7); + --ds-color-warning-border-strong: var(--ds-global-yellow-8); + --ds-color-warning-base-default: var(--ds-global-orange-9); + --ds-color-warning-base-hover: var(--ds-global-orange-10); + --ds-color-warning-base-active: var(--ds-global-orange-11); + --ds-color-warning-text-subtle: var(--ds-global-orange-12); + --ds-color-warning-text-default: var(--ds-global-orange-13); + --ds-color-warning-contrast-default: var(--ds-global-yellow-contrast-1); + --ds-color-warning-contrast-subtle: var(--ds-global-yellow-contrast-2); + --ds-color-focus-inner: #131c27; + --ds-color-focus-outer: #d1e3f3; +color-scheme: dark; +} + +} + +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.typography.primary { +:root, [data-ds-typography="primary"] { + --ds-font-family: Inter; + --ds-font-weight-medium: 500; + --ds-font-weight-semibold: 600; + --ds-font-weight-regular: 400; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --ds-letter-spacing-7: 0.25%; + --ds-letter-spacing-8: 0.5%; + --ds-letter-spacing-9: 1.5%; + + .ds-error_message--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-error_message--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-error_message--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-error_message--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-label--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-label--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-label--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-long--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-long--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-long--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph-short--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph-short--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph-short--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--xs { + font-size: var(--ds-font-size-3); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-paragraph--sm { + font-size: var(--ds-font-size-4); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-paragraph--md { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-paragraph--lg { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-md); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-ingress--sm { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-7); + } + + .ds-ingress--md { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-ingress--lg { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-lg); + font-weight: var(--ds-font-weight-regular); + letter-spacing: var(--ds-letter-spacing-8); + } + + .ds-heading--2xs { + font-size: var(--ds-font-size-5); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--xs { + font-size: var(--ds-font-size-6); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-6); + } + + .ds-heading--sm { + font-size: var(--ds-font-size-7); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-5); + } + + .ds-heading--md { + font-size: var(--ds-font-size-8); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-3); + } + + .ds-heading--lg { + font-size: var(--ds-font-size-9); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-2); + } + + .ds-heading--xl { + font-size: var(--ds-font-size-10); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-heading--2xl { + font-size: var(--ds-font-size-11); + line-height: var(--ds-line-height-sm); + font-weight: var(--ds-font-weight-medium); + letter-spacing: var(--ds-letter-spacing-1); + } + + .ds-font-weight--medium { + font-weight: 500; + } + + .ds-font-weight--semibold { + font-weight: 600; + } + + .ds-font-weight--regular { + font-weight: 400; + } + + .ds-line-height--sm { + line-height: 1.3; + } + + .ds-line-height--md { + line-height: 1.5; + } + + .ds-line-height--lg { + line-height: 1.7; + } +} +} \ No newline at end of file From b9297ba998c7408a9982a45e984072a240f6e539 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 6 Aug 2024 15:13:14 +0200 Subject: [PATCH 6/7] added changeset --- .changeset/five-apricots-scream.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/five-apricots-scream.md diff --git a/.changeset/five-apricots-scream.md b/.changeset/five-apricots-scream.md new file mode 100644 index 0000000000..cea113977a --- /dev/null +++ b/.changeset/five-apricots-scream.md @@ -0,0 +1,6 @@ +--- +'@digdir/designsystemet-theme': patch +'@digdir/designsystemet': patch +--- + +refactor: single CSS file for theme From 7f35b106afadeee768a04eea4bad8bacccb78b18 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Wed, 7 Aug 2024 08:28:34 +0200 Subject: [PATCH 7/7] removed test file --- packages/theme/index.html | 20 -------------------- 1 file changed, 20 deletions(-) delete mode 100644 packages/theme/index.html diff --git a/packages/theme/index.html b/packages/theme/index.html deleted file mode 100644 index 414d54b1ea..0000000000 --- a/packages/theme/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - My Website - - - - -

Welcome to My Website

-

This is the default index.html file.

- -