From 435a19add71a6c97de76e77bae18db128ea2dd6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Br=C3=A5ten?= Date: Wed, 19 Jun 2024 13:58:01 +0200 Subject: [PATCH] @digdir/designsystemet 0.1.0-alpha.11 --- .github/workflows/npm-build-css.yml | 2 +- css/theme1.css | 7 +- css/theme1/color-mode/dark.css | 616 ++++++++++++++++++++++++++++ css/theme1/color-mode/light.css | 616 ++++++++++++++++++++++++++++ css/theme1/semantic.css | 102 +++++ css/theme1/typography.css | 295 +++++++------ css/theme2.css | 7 +- css/theme2/color-mode/dark.css | 616 ++++++++++++++++++++++++++++ css/theme2/color-mode/light.css | 616 ++++++++++++++++++++++++++++ css/theme2/semantic.css | 102 +++++ css/theme2/typography.css | 295 +++++++------ package-lock.json | 12 +- package.json | 2 +- 13 files changed, 3030 insertions(+), 258 deletions(-) create mode 100644 css/theme1/color-mode/dark.css create mode 100644 css/theme1/color-mode/light.css create mode 100644 css/theme1/semantic.css create mode 100644 css/theme2/color-mode/dark.css create mode 100644 css/theme2/color-mode/light.css create mode 100644 css/theme2/semantic.css diff --git a/.github/workflows/npm-build-css.yml b/.github/workflows/npm-build-css.yml index 7b9c04b..51c23f7 100644 --- a/.github/workflows/npm-build-css.yml +++ b/.github/workflows/npm-build-css.yml @@ -18,7 +18,7 @@ jobs: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: - node-version: '22.x' + node-version: '21.x' - name: Install dependencies run: npm ci diff --git a/css/theme1.css b/css/theme1.css index fff25b7..432626b 100644 --- a/css/theme1.css +++ b/css/theme1.css @@ -1,3 +1,6 @@ -@import url('./theme1/dark.css'); +@import url('./theme1/color-mode/light.css'); @import url('./theme1/light.css'); -@import url('./theme1/typography.css'); \ No newline at end of file +@import url('./theme1/color-mode/dark.css'); +@import url('./theme1/typography.css'); +@import url('./theme1/semantic.css'); +@import url('./theme1/dark.css'); \ No newline at end of file diff --git a/css/theme1/color-mode/dark.css b/css/theme1/color-mode/dark.css new file mode 100644 index 0000000..1a944e1 --- /dev/null +++ b/css/theme1/color-mode/dark.css @@ -0,0 +1,616 @@ +/** + * These files are generated from design tokens defind using Token Studio + */ + +[data-ds-color-mode="dark"] { + --ds-global-blue-1: #001c36; + --ds-global-blue-2: #002445; + --ds-global-blue-3: #00315c; + --ds-global-blue-4: #003d75; + --ds-global-blue-5: #004b8f; + --ds-global-blue-6: #00529d; + --ds-global-blue-7: #1972c1; + --ds-global-blue-8: #9cc2e4; + --ds-global-blue-9: #0062BA; + --ds-global-blue-10: #005099; + --ds-global-blue-11: #003d75; + --ds-global-blue-12: #69a2d6; + --ds-global-blue-13: #cee1f2; + --ds-global-blue-contrast-1: #fefeff; + --ds-global-blue-contrast-2: #dbe9f5; + --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: #078d19; + --ds-global-green-10: #067615; + --ds-global-green-11: #056011; + --ds-global-green-12: #54b061; + --ds-global-green-13: #cbe7cf; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #000401; + --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: #c95c21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #d98a5f; + --ds-global-orange-13: #f3dbcd; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #0d0602; + --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: #663399; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #ae93c9; + --ds-global-purple-13: #e4dbed; + --ds-global-purple-contrast-1: #fefefe; + --ds-global-purple-contrast-2: #eee8f3; + --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: #bf1b1b; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #dd8585; + --ds-global-red-13: #f5d9d9; + --ds-global-red-contrast-1: #fffefe; + --ds-global-red-contrast-2: #f6dfdf; + --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: #eabf28; + --ds-global-yellow-10: #d0aa24; + --ds-global-yellow-11: #b7951f; + --ds-global-yellow-12: #bd9a20; + --ds-global-yellow-13: #f4de8f; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #001c36; + --ds-color-accent-2: #002445; + --ds-color-accent-3: #00315c; + --ds-color-accent-4: #003d75; + --ds-color-accent-5: #004b8f; + --ds-color-accent-6: #00529d; + --ds-color-accent-7: #1972c1; + --ds-color-accent-8: #9cc2e4; + --ds-color-accent-9: #0062BA; + --ds-color-accent-10: #005099; + --ds-color-accent-11: #003d75; + --ds-color-accent-12: #69a2d6; + --ds-color-accent-13: #cee1f2; + --ds-color-accent-contrast-1: #fefeff; + --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: #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: #1E2B3C; + --ds-color-neutral-10: #303c4b; + --ds-color-neutral-11: #444e5d; + --ds-color-neutral-12: #989ea5; + --ds-color-neutral-13: #dddfe1; + --ds-color-neutral-contrast-1: #fefefe; + --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: #191c1c; + --ds-color-brand1-2: #202424; + --ds-color-brand1-3: #2c3131; + --ds-color-brand1-4: #393f3f; + --ds-color-brand1-5: #454d4d; + --ds-color-brand1-6: #4c5454; + --ds-color-brand1-7: #687071; + --ds-color-brand1-8: #bbbfbf; + --ds-color-brand1-9: #576061; + --ds-color-brand1-10: #454d4d; + --ds-color-brand1-11: #343a3b; + --ds-color-brand1-12: #999e9f; + --ds-color-brand1-13: #dee0e0; + --ds-color-brand1-contrast-1: #fefefe; + --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: #021e2a; + --ds-color-brand2-2: #032736; + --ds-color-brand2-3: #033448; + --ds-color-brand2-4: #04425b; + --ds-color-brand2-5: #055170; + --ds-color-brand2-6: #065879; + --ds-color-brand2-7: #0877a4; + --ds-color-brand2-8: #92c5da; + --ds-color-brand2-9: #087caa; + --ds-color-brand2-10: #07688e; + --ds-color-brand2-11: #055473; + --ds-color-brand2-12: #5aa7c6; + --ds-color-brand2-13: #cbe3ed; + --ds-color-brand2-contrast-1: #fdfefe; + --ds-color-brand2-contrast-2: #f9fcfd; + --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: #0e1d25; + --ds-color-brand3-2: #12252e; + --ds-color-brand3-3: #183340; + --ds-color-brand3-4: #1f4151; + --ds-color-brand3-5: #265063; + --ds-color-brand3-6: #29576c; + --ds-color-brand3-7: #387793; + --ds-color-brand3-8: #a4c2d0; + --ds-color-brand3-9: #3b7d9b; + --ds-color-brand3-10: #30677f; + --ds-color-brand3-11: #275366; + --ds-color-brand3-12: #76a4b9; + --ds-color-brand3-13: #d3e2e8; + --ds-color-brand3-contrast-1: #fefefe; + --ds-color-brand3-contrast-2: #fafcfc; + --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: #001c36; + --ds-color-info-background-subtle: #002445; + --ds-color-info-surface-default: #00315c; + --ds-color-info-surface-hover: #003d75; + --ds-color-info-surface-active: #004b8f; + --ds-color-info-border-subtle: #00529d; + --ds-color-info-border-default: #1972c1; + --ds-color-info-border-strong: #9cc2e4; + --ds-color-info-base-default: #0062BA; + --ds-color-info-base-hover: #005099; + --ds-color-info-base-active: #003d75; + --ds-color-info-text-subtle: #69a2d6; + --ds-color-info-text-default: #cee1f2; + --ds-color-info-contrast-default: #fefeff; + --ds-color-info-contrast-subtle: #dbe9f5; + --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-focus-outer: #dddfe1; + --ds-focus-inner: #ECC238; +} + +@media (prefers-color-scheme: dark) { + [data-ds-color-mode="auto"] { + --ds-global-blue-1: #001c36; + --ds-global-blue-2: #002445; + --ds-global-blue-3: #00315c; + --ds-global-blue-4: #003d75; + --ds-global-blue-5: #004b8f; + --ds-global-blue-6: #00529d; + --ds-global-blue-7: #1972c1; + --ds-global-blue-8: #9cc2e4; + --ds-global-blue-9: #0062BA; + --ds-global-blue-10: #005099; + --ds-global-blue-11: #003d75; + --ds-global-blue-12: #69a2d6; + --ds-global-blue-13: #cee1f2; + --ds-global-blue-contrast-1: #fefeff; + --ds-global-blue-contrast-2: #dbe9f5; + --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: #078d19; + --ds-global-green-10: #067615; + --ds-global-green-11: #056011; + --ds-global-green-12: #54b061; + --ds-global-green-13: #cbe7cf; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #000401; + --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: #c95c21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #d98a5f; + --ds-global-orange-13: #f3dbcd; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #0d0602; + --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: #663399; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #ae93c9; + --ds-global-purple-13: #e4dbed; + --ds-global-purple-contrast-1: #fefefe; + --ds-global-purple-contrast-2: #eee8f3; + --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: #bf1b1b; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #dd8585; + --ds-global-red-13: #f5d9d9; + --ds-global-red-contrast-1: #fffefe; + --ds-global-red-contrast-2: #f6dfdf; + --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: #eabf28; + --ds-global-yellow-10: #d0aa24; + --ds-global-yellow-11: #b7951f; + --ds-global-yellow-12: #bd9a20; + --ds-global-yellow-13: #f4de8f; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #001c36; + --ds-color-accent-2: #002445; + --ds-color-accent-3: #00315c; + --ds-color-accent-4: #003d75; + --ds-color-accent-5: #004b8f; + --ds-color-accent-6: #00529d; + --ds-color-accent-7: #1972c1; + --ds-color-accent-8: #9cc2e4; + --ds-color-accent-9: #0062BA; + --ds-color-accent-10: #005099; + --ds-color-accent-11: #003d75; + --ds-color-accent-12: #69a2d6; + --ds-color-accent-13: #cee1f2; + --ds-color-accent-contrast-1: #fefeff; + --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: #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: #1E2B3C; + --ds-color-neutral-10: #303c4b; + --ds-color-neutral-11: #444e5d; + --ds-color-neutral-12: #989ea5; + --ds-color-neutral-13: #dddfe1; + --ds-color-neutral-contrast-1: #fefefe; + --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: #191c1c; + --ds-color-brand1-2: #202424; + --ds-color-brand1-3: #2c3131; + --ds-color-brand1-4: #393f3f; + --ds-color-brand1-5: #454d4d; + --ds-color-brand1-6: #4c5454; + --ds-color-brand1-7: #687071; + --ds-color-brand1-8: #bbbfbf; + --ds-color-brand1-9: #576061; + --ds-color-brand1-10: #454d4d; + --ds-color-brand1-11: #343a3b; + --ds-color-brand1-12: #999e9f; + --ds-color-brand1-13: #dee0e0; + --ds-color-brand1-contrast-1: #fefefe; + --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: #021e2a; + --ds-color-brand2-2: #032736; + --ds-color-brand2-3: #033448; + --ds-color-brand2-4: #04425b; + --ds-color-brand2-5: #055170; + --ds-color-brand2-6: #065879; + --ds-color-brand2-7: #0877a4; + --ds-color-brand2-8: #92c5da; + --ds-color-brand2-9: #087caa; + --ds-color-brand2-10: #07688e; + --ds-color-brand2-11: #055473; + --ds-color-brand2-12: #5aa7c6; + --ds-color-brand2-13: #cbe3ed; + --ds-color-brand2-contrast-1: #fdfefe; + --ds-color-brand2-contrast-2: #f9fcfd; + --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: #0e1d25; + --ds-color-brand3-2: #12252e; + --ds-color-brand3-3: #183340; + --ds-color-brand3-4: #1f4151; + --ds-color-brand3-5: #265063; + --ds-color-brand3-6: #29576c; + --ds-color-brand3-7: #387793; + --ds-color-brand3-8: #a4c2d0; + --ds-color-brand3-9: #3b7d9b; + --ds-color-brand3-10: #30677f; + --ds-color-brand3-11: #275366; + --ds-color-brand3-12: #76a4b9; + --ds-color-brand3-13: #d3e2e8; + --ds-color-brand3-contrast-1: #fefefe; + --ds-color-brand3-contrast-2: #fafcfc; + --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: #001c36; + --ds-color-info-background-subtle: #002445; + --ds-color-info-surface-default: #00315c; + --ds-color-info-surface-hover: #003d75; + --ds-color-info-surface-active: #004b8f; + --ds-color-info-border-subtle: #00529d; + --ds-color-info-border-default: #1972c1; + --ds-color-info-border-strong: #9cc2e4; + --ds-color-info-base-default: #0062BA; + --ds-color-info-base-hover: #005099; + --ds-color-info-base-active: #003d75; + --ds-color-info-text-subtle: #69a2d6; + --ds-color-info-text-default: #cee1f2; + --ds-color-info-contrast-default: #fefeff; + --ds-color-info-contrast-subtle: #dbe9f5; + --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-focus-outer: #dddfe1; + --ds-focus-inner: #ECC238; +} + +} diff --git a/css/theme1/color-mode/light.css b/css/theme1/color-mode/light.css new file mode 100644 index 0000000..9705133 --- /dev/null +++ b/css/theme1/color-mode/light.css @@ -0,0 +1,616 @@ +/** + * These files are generated from design tokens defind using Token Studio + */ + +: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: #0c72c1; + --ds-global-blue-10: #085ea0; + --ds-global-blue-11: #074b80; + --ds-global-blue-12: #0966ac; + --ds-global-blue-13: #043256; + --ds-global-blue-contrast-1: #fefeff; + --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: #03380a; + --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: #c95c21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #a1491a; + --ds-global-orange-13: #50240d; + --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: #663399; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #7b4ea7; + --ds-global-purple-13: #402060; + --ds-global-purple-contrast-1: #fefefe; + --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: #bf1b1b; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #c22020; + --ds-global-red-13: #620e0e; + --ds-global-red-contrast-1: #fffefe; + --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: #3a300a; + --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: #d4e5f3; + --ds-color-accent-4: #bad5ec; + --ds-color-accent-5: #a1c5e5; + --ds-color-accent-6: #97bfe3; + --ds-color-accent-7: #3a85ca; + --ds-color-accent-8: #004d93; + --ds-color-accent-9: #0062BA; + --ds-color-accent-10: #005099; + --ds-color-accent-11: #003d75; + --ds-color-accent-12: #0163ba; + --ds-color-accent-13: #00315c; + --ds-color-accent-contrast-1: #fefeff; + --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: #243142; + --ds-color-neutral-contrast-1: #fefefe; + --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: #fefefe; + --ds-color-brand1-2: #f4f4f4; + --ds-color-brand1-3: #e1e3e3; + --ds-color-brand1-4: #cfd2d2; + --ds-color-brand1-5: #bdc1c1; + --ds-color-brand1-6: #b8bcbc; + --ds-color-brand1-7: #7b8283; + --ds-color-brand1-8: #474f4f; + --ds-color-brand1-9: #576061; + --ds-color-brand1-10: #454d4d; + --ds-color-brand1-11: #343a3b; + --ds-color-brand1-12: #5c6565; + --ds-color-brand1-13: #2c3131; + --ds-color-brand1-contrast-1: #fefefe; + --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: #fdfefe; + --ds-color-brand2-2: #eaf4f8; + --ds-color-brand2-3: #d0e6ef; + --ds-color-brand2-4: #b4d7e5; + --ds-color-brand2-5: #97c8db; + --ds-color-brand2-6: #8ec3d8; + --ds-color-brand2-7: #238bb3; + --ds-color-brand2-8: #055473; + --ds-color-brand2-9: #087caa; + --ds-color-brand2-10: #07688e; + --ds-color-brand2-11: #055473; + --ds-color-brand2-12: #076a91; + --ds-color-brand2-13: #033448; + --ds-color-brand2-contrast-1: #fdfefe; + --ds-color-brand2-contrast-2: #f9fcfd; + --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: #fefefe; + --ds-color-brand3-2: #f0f5f7; + --ds-color-brand3-3: #d7e5eb; + --ds-color-brand3-4: #bfd4de; + --ds-color-brand3-5: #a7c5d2; + --ds-color-brand3-6: #a0c0cf; + --ds-color-brand3-7: #4c88a4; + --ds-color-brand3-8: #275366; + --ds-color-brand3-9: #3b7d9b; + --ds-color-brand3-10: #30677f; + --ds-color-brand3-11: #275366; + --ds-color-brand3-12: #326983; + --ds-color-brand3-13: #183340; + --ds-color-brand3-contrast-1: #fefefe; + --ds-color-brand3-contrast-2: #fafcfc; + --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: #0c72c1; + --ds-color-info-base-hover: #085ea0; + --ds-color-info-base-active: #074b80; + --ds-color-info-text-subtle: #0966ac; + --ds-color-info-text-default: #043256; + --ds-color-info-contrast-default: #fefeff; + --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-focus-outer: #243142; + --ds-focus-inner: #ECC238; +} + +@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: #0c72c1; + --ds-global-blue-10: #085ea0; + --ds-global-blue-11: #074b80; + --ds-global-blue-12: #0966ac; + --ds-global-blue-13: #043256; + --ds-global-blue-contrast-1: #fefeff; + --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: #03380a; + --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: #c95c21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #a1491a; + --ds-global-orange-13: #50240d; + --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: #663399; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #7b4ea7; + --ds-global-purple-13: #402060; + --ds-global-purple-contrast-1: #fefefe; + --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: #bf1b1b; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #c22020; + --ds-global-red-13: #620e0e; + --ds-global-red-contrast-1: #fffefe; + --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: #3a300a; + --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: #d4e5f3; + --ds-color-accent-4: #bad5ec; + --ds-color-accent-5: #a1c5e5; + --ds-color-accent-6: #97bfe3; + --ds-color-accent-7: #3a85ca; + --ds-color-accent-8: #004d93; + --ds-color-accent-9: #0062BA; + --ds-color-accent-10: #005099; + --ds-color-accent-11: #003d75; + --ds-color-accent-12: #0163ba; + --ds-color-accent-13: #00315c; + --ds-color-accent-contrast-1: #fefeff; + --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: #243142; + --ds-color-neutral-contrast-1: #fefefe; + --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: #fefefe; + --ds-color-brand1-2: #f4f4f4; + --ds-color-brand1-3: #e1e3e3; + --ds-color-brand1-4: #cfd2d2; + --ds-color-brand1-5: #bdc1c1; + --ds-color-brand1-6: #b8bcbc; + --ds-color-brand1-7: #7b8283; + --ds-color-brand1-8: #474f4f; + --ds-color-brand1-9: #576061; + --ds-color-brand1-10: #454d4d; + --ds-color-brand1-11: #343a3b; + --ds-color-brand1-12: #5c6565; + --ds-color-brand1-13: #2c3131; + --ds-color-brand1-contrast-1: #fefefe; + --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: #fdfefe; + --ds-color-brand2-2: #eaf4f8; + --ds-color-brand2-3: #d0e6ef; + --ds-color-brand2-4: #b4d7e5; + --ds-color-brand2-5: #97c8db; + --ds-color-brand2-6: #8ec3d8; + --ds-color-brand2-7: #238bb3; + --ds-color-brand2-8: #055473; + --ds-color-brand2-9: #087caa; + --ds-color-brand2-10: #07688e; + --ds-color-brand2-11: #055473; + --ds-color-brand2-12: #076a91; + --ds-color-brand2-13: #033448; + --ds-color-brand2-contrast-1: #fdfefe; + --ds-color-brand2-contrast-2: #f9fcfd; + --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: #fefefe; + --ds-color-brand3-2: #f0f5f7; + --ds-color-brand3-3: #d7e5eb; + --ds-color-brand3-4: #bfd4de; + --ds-color-brand3-5: #a7c5d2; + --ds-color-brand3-6: #a0c0cf; + --ds-color-brand3-7: #4c88a4; + --ds-color-brand3-8: #275366; + --ds-color-brand3-9: #3b7d9b; + --ds-color-brand3-10: #30677f; + --ds-color-brand3-11: #275366; + --ds-color-brand3-12: #326983; + --ds-color-brand3-13: #183340; + --ds-color-brand3-contrast-1: #fefefe; + --ds-color-brand3-contrast-2: #fafcfc; + --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: #0c72c1; + --ds-color-info-base-hover: #085ea0; + --ds-color-info-base-active: #074b80; + --ds-color-info-text-subtle: #0966ac; + --ds-color-info-text-default: #043256; + --ds-color-info-contrast-default: #fefeff; + --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-focus-outer: #243142; + --ds-focus-inner: #ECC238; +} + +} diff --git a/css/theme1/semantic.css b/css/theme1/semantic.css new file mode 100644 index 0000000..92a8e36 --- /dev/null +++ b/css/theme1/semantic.css @@ -0,0 +1,102 @@ +/** + * These files are generated from design tokens defind using Token Studio + */ + +: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.125rem/1.7 'Inter'; + --ds-typography-paragraph-long-md: 400 1rem/1.7 'Inter'; + --ds-typography-paragraph-long-sm: 400 0.875rem/1.7 'Inter'; + --ds-typography-paragraph-long-xs: 400 0.8125rem/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-2: 0.125rem; + --ds-border-radius-4: 0.25rem; + --ds-border-radius-8: 0.5rem; + --ds-border-radius-12: 0.75rem; + --ds-border-radius-16: 1rem; + --ds-border-radius-24: 1.5rem; + --ds-border-radius-32: 2rem; + --ds-border-radius-9999: 624.9375rem; + --ds-border-radius-sm: calc(var(--ds-border-radius-2)); + --ds-border-radius-md: calc(var(--ds-border-radius-4)); + --ds-border-radius-lg: calc(var(--ds-border-radius-8)); + --ds-border-radius-xl: calc(var(--ds-border-radius-12)); + --ds-border-radius-2xl: calc(var(--ds-border-radius-16)); + --ds-border-radius-3xl: calc(var(--ds-border-radius-24)); + --ds-border-radius-4xl: calc(var(--ds-border-radius-32)); + --ds-border-radius-full: calc(var(--ds-border-radius-9999)); + --ds-spacing-0: calc(var(--ds-sizing-base)*0); + --ds-spacing-1: calc(var(--ds-sizing-base)*1); + --ds-spacing-2: calc(var(--ds-sizing-base)*2); + --ds-spacing-3: calc(var(--ds-sizing-base)*3); + --ds-spacing-4: calc(var(--ds-sizing-base)*4); + --ds-spacing-5: calc(var(--ds-sizing-base)*5); + --ds-spacing-6: calc(var(--ds-sizing-base)*6); + --ds-spacing-7: calc(var(--ds-sizing-base)*7); + --ds-spacing-8: calc(var(--ds-sizing-base)*8); + --ds-spacing-9: calc(var(--ds-sizing-base)*9); + --ds-spacing-10: calc(var(--ds-sizing-base)*10); + --ds-spacing-11: calc(var(--ds-sizing-base)*11); + --ds-spacing-12: calc(var(--ds-sizing-base)*12); + --ds-spacing-13: calc(var(--ds-sizing-base)*13); + --ds-spacing-14: calc(var(--ds-sizing-base)*14); + --ds-spacing-15: calc(var(--ds-sizing-base)*15); + --ds-spacing-18: calc(var(--ds-sizing-base)*18); + --ds-spacing-22: calc(var(--ds-sizing-base)*22); + --ds-spacing-26: calc(var(--ds-sizing-base)*26); + --ds-spacing-30: calc(var(--ds-sizing-base)*30); + --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); +} diff --git a/css/theme1/typography.css b/css/theme1/typography.css index 367faa1..35ddd8c 100644 --- a/css/theme1/typography.css +++ b/css/theme1/typography.css @@ -2,192 +2,241 @@ * These files are generated from design tokens defind using Token Studio */ - @layer ds.typography { +:root { + --ds-font-family-main: Inter; + --ds-line-height-300: 1.3; + --ds-line-height-500: 1.5; + --ds-line-height-600: 1.6; + --ds-line-height-700: 1.7; + --ds-font-weight-medium: 500; + --ds-font-weight-semibold: 600; + --ds-font-weight-regular: 400; + --ds-font-size-f-3: 0.75rem; + --ds-font-size-f-2: 0.8125rem; + --ds-font-size-f-1: 0.875rem; + --ds-font-size-f0: 1rem; + --ds-font-size-f1: 1.125rem; + --ds-font-size-f2: 1.3125rem; + --ds-font-size-f3: 1.5rem; + --ds-font-size-f4: 1.875rem; + --ds-font-size-f5: 2.25rem; + --ds-font-size-f6: 3rem; + --ds-font-size-f7: 3.75rem; +} - .ds-typography-heading-2xl { - font-size: 3.75rem; - line-height: 1.3; - font-weight: 500; + + .ds-error_message--xs { + font-size: var(--ds-font-size-f-1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-heading-xl { - font-size: 3rem; - line-height: 1.3; - font-weight: 500; + .ds-error_message--sm { + font-size: var(--ds-font-size-f0); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-heading-lg { - font-size: 2.25rem; - line-height: 1.3; - font-weight: 500; + .ds-error_message--md { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-heading-md { - font-size: 1.875rem; - line-height: 1.3; - font-weight: 500; + .ds-error_message--lg { + font-size: var(--ds-font-size-f2); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-heading-sm { - font-size: 1.5rem; - line-height: 1.3; - font-weight: 500; + .ds-label--xs { + font-size: var(--ds-font-size-f-1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-heading-xs { - font-size: 1.3125rem; - line-height: 1.3; - font-weight: 500; + .ds-label--sm { + font-size: var(--ds-font-size-f0); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-heading-2xs { - font-size: 1.125rem; - line-height: 1.3; - font-weight: 500; + .ds-label--md { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-ingress-lg { - font-size: 1.875rem; - line-height: 1.7; - font-weight: 400; + .ds-label--lg { + font-size: var(--ds-font-size-f2); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-ingress-md { - font-size: 1.5rem; - line-height: 1.7; - font-weight: 400; + .ds-paragraph-long--xs { + font-size: var(--ds-font-size-f-2); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-ingress-sm { - font-size: 1.3125rem; - line-height: 1.7; - font-weight: 400; + .ds-paragraph-long--sm { + font-size: var(--ds-font-size-f-1); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-ingress-xs { - font-size: 1.125rem; - line-height: 1.7; - font-weight: 400; + .ds-paragraph-long--md { + font-size: var(--ds-font-size-f0); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-lg { - font-size: 1.3125rem; - line-height: 1.5; - font-weight: 400; + .ds-paragraph-long--lg { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-md { - font-size: 1.125rem; - line-height: 1.5; - font-weight: 400; + .ds-paragraph-short--xs { + font-size: var(--ds-font-size-f-1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-sm { - font-size: 1rem; - line-height: 1.5; - font-weight: 400; + .ds-paragraph-short--sm { + font-size: var(--ds-font-size-f0); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-xs { - font-size: 0.875rem; - line-height: 1.5; - font-weight: 400; + .ds-paragraph-short--md { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-short-lg { - font-size: 1.3125rem; - line-height: 1.3; - font-weight: 400; + .ds-paragraph-short--lg { + font-size: var(--ds-font-size-f2); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-short-md { - font-size: 1.125rem; - line-height: 1.3; - font-weight: 400; + .ds-paragraph--xs { + font-size: var(--ds-font-size-f-1); + line-height: var(--ds-line-height-500); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-short-sm { - font-size: 1rem; - line-height: 1.3; - font-weight: 400; + .ds-paragraph--sm { + font-size: var(--ds-font-size-f0); + line-height: var(--ds-line-height-500); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-short-xs { - font-size: 0.875rem; - line-height: 1.3; - font-weight: 400; + .ds-paragraph--md { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-500); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-long-lg { - font-size: 1.125rem; - line-height: 1.7; - font-weight: 400; + .ds-paragraph--lg { + font-size: var(--ds-font-size-f2); + line-height: var(--ds-line-height-500); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-long-md { - font-size: 1rem; - line-height: 1.7; - font-weight: 400; + .ds-ingress--xs { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-long-sm { - font-size: 0.875rem; - line-height: 1.7; - font-weight: 400; + .ds-ingress--sm { + font-size: var(--ds-font-size-f2); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-long-xs { - font-size: 0.8125rem; - line-height: 1.7; - font-weight: 400; + .ds-ingress--md { + font-size: var(--ds-font-size-f3); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-label-lg { - font-size: 1.3125rem; - line-height: 1.3; - font-weight: 500; + .ds-ingress--lg { + font-size: var(--ds-font-size-f4); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-label-md { - font-size: 1.125rem; - line-height: 1.3; - font-weight: 500; + .ds-heading--2xs { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-label-sm { - font-size: 1rem; - line-height: 1.3; - font-weight: 500; + .ds-heading--xs { + font-size: var(--ds-font-size-f2); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-label-xs { - font-size: 0.875rem; - line-height: 1.3; - font-weight: 500; + .ds-heading--sm { + font-size: var(--ds-font-size-f3); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-error_message-lg { - font-size: 1.3125rem; - line-height: 1.3; - font-weight: 400; + .ds-heading--md { + font-size: var(--ds-font-size-f4); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-error_message-md { - font-size: 1.125rem; - line-height: 1.3; - font-weight: 400; + .ds-heading--lg { + font-size: var(--ds-font-size-f5); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-error_message-sm { - font-size: 1rem; - line-height: 1.3; - font-weight: 400; + .ds-heading--xl { + font-size: var(--ds-font-size-f6); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); + } + + .ds-heading--2xl { + font-size: var(--ds-font-size-f7); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-error_message-xs { - font-size: 0.875rem; + .ds-line-height--300 { line-height: 1.3; + } + + .ds-line-height--500 { + line-height: 1.5; + } + + .ds-line-height--600 { + line-height: 1.6; + } + + .ds-line-height--700 { + line-height: 1.7; + } + + .ds-font-weight--medium { + font-weight: 500; + } + + .ds-font-weight--semibold { + font-weight: 600; + } + + .ds-font-weight--regular { font-weight: 400; } } diff --git a/css/theme2.css b/css/theme2.css index 73927d9..f3430c6 100644 --- a/css/theme2.css +++ b/css/theme2.css @@ -1,3 +1,6 @@ -@import url('./theme2/dark.css'); +@import url('./theme2/color-mode/light.css'); @import url('./theme2/light.css'); -@import url('./theme2/typography.css'); \ No newline at end of file +@import url('./theme2/color-mode/dark.css'); +@import url('./theme2/typography.css'); +@import url('./theme2/semantic.css'); +@import url('./theme2/dark.css'); \ No newline at end of file diff --git a/css/theme2/color-mode/dark.css b/css/theme2/color-mode/dark.css new file mode 100644 index 0000000..e36b259 --- /dev/null +++ b/css/theme2/color-mode/dark.css @@ -0,0 +1,616 @@ +/** + * These files are generated from design tokens defind using Token Studio + */ + +[data-ds-color-mode="dark"] { + --ds-global-blue-1: #001c36; + --ds-global-blue-2: #002445; + --ds-global-blue-3: #00315c; + --ds-global-blue-4: #003d75; + --ds-global-blue-5: #004b8f; + --ds-global-blue-6: #00529d; + --ds-global-blue-7: #1972c1; + --ds-global-blue-8: #9cc2e4; + --ds-global-blue-9: #0062BA; + --ds-global-blue-10: #005099; + --ds-global-blue-11: #003d75; + --ds-global-blue-12: #69a2d6; + --ds-global-blue-13: #cee1f2; + --ds-global-blue-contrast-1: #fefeff; + --ds-global-blue-contrast-2: #dbe9f5; + --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: #078d19; + --ds-global-green-10: #067615; + --ds-global-green-11: #056011; + --ds-global-green-12: #54b061; + --ds-global-green-13: #cbe7cf; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #000401; + --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: #c95c21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #d98a5f; + --ds-global-orange-13: #f3dbcd; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #0d0602; + --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: #663399; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #ae93c9; + --ds-global-purple-13: #e4dbed; + --ds-global-purple-contrast-1: #fefefe; + --ds-global-purple-contrast-2: #eee8f3; + --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: #bf1b1b; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #dd8585; + --ds-global-red-13: #f5d9d9; + --ds-global-red-contrast-1: #fffefe; + --ds-global-red-contrast-2: #f6dfdf; + --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: #eabf28; + --ds-global-yellow-10: #d0aa24; + --ds-global-yellow-11: #b7951f; + --ds-global-yellow-12: #bd9a20; + --ds-global-yellow-13: #f4de8f; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #021f21; + --ds-color-accent-2: #03282b; + --ds-color-accent-3: #043639; + --ds-color-accent-4: #06454a; + --ds-color-accent-5: #1a5358; + --ds-color-accent-6: #22595e; + --ds-color-accent-7: #48767a; + --ds-color-accent-8: #acc1c2; + --ds-color-accent-9: #054449; + --ds-color-accent-10: #1f585c; + --ds-color-accent-11: #396b6f; + --ds-color-accent-12: #85a3a6; + --ds-color-accent-13: #d7e1e2; + --ds-color-accent-contrast-1: #fefefe; + --ds-color-accent-contrast-2: #ccd9da; + --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: #101d1f; + --ds-color-neutral-2: #152628; + --ds-color-neutral-3: #243335; + --ds-color-neutral-4: #324042; + --ds-color-neutral-5: #404d4f; + --ds-color-neutral-6: #475556; + --ds-color-neutral-7: #667273; + --ds-color-neutral-8: #babfbf; + --ds-color-neutral-9: #142527; + --ds-color-neutral-10: #253537; + --ds-color-neutral-11: #384748; + --ds-color-neutral-12: #989fa0; + --ds-color-neutral-13: #dcdfdf; + --ds-color-neutral-contrast-1: #fefefe; + --ds-color-neutral-contrast-2: #aeb4b5; + --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: #1e1f44; + --ds-color-brand1-3: #292b5e; + --ds-color-brand1-4: #343676; + --ds-color-brand1-5: #3f4390; + --ds-color-brand1-6: #45499e; + --ds-color-brand1-7: #5e63d3; + --ds-color-brand1-8: #b8baeb; + --ds-color-brand1-9: #5c61d2; + --ds-color-brand1-10: #4b4fab; + --ds-color-brand1-11: #3b3f87; + --ds-color-brand1-12: #9497e1; + --ds-color-brand1-13: #dddef5; + --ds-color-brand1-contrast-1: #fefeff; + --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: #25190f; + --ds-color-brand2-2: #312014; + --ds-color-brand2-3: #412b1b; + --ds-color-brand2-4: #543723; + --ds-color-brand2-5: #66442a; + --ds-color-brand2-6: #704a2e; + --ds-color-brand2-7: #98643e; + --ds-color-brand2-8: #ffab6e; + --ds-color-brand2-9: #ffa869; + --ds-color-brand2-10: #e1945d; + --ds-color-brand2-11: #c38150; + --ds-color-brand2-12: #d58d58; + --ds-color-brand2-13: #ffd9bd; + --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: #111e1b; + --ds-color-brand3-2: #162723; + --ds-color-brand3-3: #1e342e; + --ds-color-brand3-4: #26433c; + --ds-color-brand3-5: #2e5248; + --ds-color-brand3-6: #33594f; + --ds-color-brand3-7: #44786a; + --ds-color-brand3-8: #9cc6bb; + --ds-color-brand3-9: #5ca28f; + --ds-color-brand3-10: #4f8c7b; + --ds-color-brand3-11: #437669; + --ds-color-brand3-12: #69a998; + --ds-color-brand3-13: #cee3dd; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #050807; + --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: #001c36; + --ds-color-info-background-subtle: #002445; + --ds-color-info-surface-default: #00315c; + --ds-color-info-surface-hover: #003d75; + --ds-color-info-surface-active: #004b8f; + --ds-color-info-border-subtle: #00529d; + --ds-color-info-border-default: #1972c1; + --ds-color-info-border-strong: #9cc2e4; + --ds-color-info-base-default: #0062BA; + --ds-color-info-base-hover: #005099; + --ds-color-info-base-active: #003d75; + --ds-color-info-text-subtle: #69a2d6; + --ds-color-info-text-default: #cee1f2; + --ds-color-info-contrast-default: #fefeff; + --ds-color-info-contrast-subtle: #dbe9f5; + --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-focus-outer: #dcdfdf; + --ds-focus-inner: #ECC238; +} + +@media (prefers-color-scheme: dark) { + [data-ds-color-mode="auto"] { + --ds-global-blue-1: #001c36; + --ds-global-blue-2: #002445; + --ds-global-blue-3: #00315c; + --ds-global-blue-4: #003d75; + --ds-global-blue-5: #004b8f; + --ds-global-blue-6: #00529d; + --ds-global-blue-7: #1972c1; + --ds-global-blue-8: #9cc2e4; + --ds-global-blue-9: #0062BA; + --ds-global-blue-10: #005099; + --ds-global-blue-11: #003d75; + --ds-global-blue-12: #69a2d6; + --ds-global-blue-13: #cee1f2; + --ds-global-blue-contrast-1: #fefeff; + --ds-global-blue-contrast-2: #dbe9f5; + --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: #078d19; + --ds-global-green-10: #067615; + --ds-global-green-11: #056011; + --ds-global-green-12: #54b061; + --ds-global-green-13: #cbe7cf; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #000401; + --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: #c95c21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #d98a5f; + --ds-global-orange-13: #f3dbcd; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #0d0602; + --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: #663399; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #ae93c9; + --ds-global-purple-13: #e4dbed; + --ds-global-purple-contrast-1: #fefefe; + --ds-global-purple-contrast-2: #eee8f3; + --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: #bf1b1b; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #dd8585; + --ds-global-red-13: #f5d9d9; + --ds-global-red-contrast-1: #fffefe; + --ds-global-red-contrast-2: #f6dfdf; + --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: #eabf28; + --ds-global-yellow-10: #d0aa24; + --ds-global-yellow-11: #b7951f; + --ds-global-yellow-12: #bd9a20; + --ds-global-yellow-13: #f4de8f; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #021f21; + --ds-color-accent-2: #03282b; + --ds-color-accent-3: #043639; + --ds-color-accent-4: #06454a; + --ds-color-accent-5: #1a5358; + --ds-color-accent-6: #22595e; + --ds-color-accent-7: #48767a; + --ds-color-accent-8: #acc1c2; + --ds-color-accent-9: #054449; + --ds-color-accent-10: #1f585c; + --ds-color-accent-11: #396b6f; + --ds-color-accent-12: #85a3a6; + --ds-color-accent-13: #d7e1e2; + --ds-color-accent-contrast-1: #fefefe; + --ds-color-accent-contrast-2: #ccd9da; + --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: #101d1f; + --ds-color-neutral-2: #152628; + --ds-color-neutral-3: #243335; + --ds-color-neutral-4: #324042; + --ds-color-neutral-5: #404d4f; + --ds-color-neutral-6: #475556; + --ds-color-neutral-7: #667273; + --ds-color-neutral-8: #babfbf; + --ds-color-neutral-9: #142527; + --ds-color-neutral-10: #253537; + --ds-color-neutral-11: #384748; + --ds-color-neutral-12: #989fa0; + --ds-color-neutral-13: #dcdfdf; + --ds-color-neutral-contrast-1: #fefefe; + --ds-color-neutral-contrast-2: #aeb4b5; + --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: #1e1f44; + --ds-color-brand1-3: #292b5e; + --ds-color-brand1-4: #343676; + --ds-color-brand1-5: #3f4390; + --ds-color-brand1-6: #45499e; + --ds-color-brand1-7: #5e63d3; + --ds-color-brand1-8: #b8baeb; + --ds-color-brand1-9: #5c61d2; + --ds-color-brand1-10: #4b4fab; + --ds-color-brand1-11: #3b3f87; + --ds-color-brand1-12: #9497e1; + --ds-color-brand1-13: #dddef5; + --ds-color-brand1-contrast-1: #fefeff; + --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: #25190f; + --ds-color-brand2-2: #312014; + --ds-color-brand2-3: #412b1b; + --ds-color-brand2-4: #543723; + --ds-color-brand2-5: #66442a; + --ds-color-brand2-6: #704a2e; + --ds-color-brand2-7: #98643e; + --ds-color-brand2-8: #ffab6e; + --ds-color-brand2-9: #ffa869; + --ds-color-brand2-10: #e1945d; + --ds-color-brand2-11: #c38150; + --ds-color-brand2-12: #d58d58; + --ds-color-brand2-13: #ffd9bd; + --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: #111e1b; + --ds-color-brand3-2: #162723; + --ds-color-brand3-3: #1e342e; + --ds-color-brand3-4: #26433c; + --ds-color-brand3-5: #2e5248; + --ds-color-brand3-6: #33594f; + --ds-color-brand3-7: #44786a; + --ds-color-brand3-8: #9cc6bb; + --ds-color-brand3-9: #5ca28f; + --ds-color-brand3-10: #4f8c7b; + --ds-color-brand3-11: #437669; + --ds-color-brand3-12: #69a998; + --ds-color-brand3-13: #cee3dd; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #050807; + --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: #001c36; + --ds-color-info-background-subtle: #002445; + --ds-color-info-surface-default: #00315c; + --ds-color-info-surface-hover: #003d75; + --ds-color-info-surface-active: #004b8f; + --ds-color-info-border-subtle: #00529d; + --ds-color-info-border-default: #1972c1; + --ds-color-info-border-strong: #9cc2e4; + --ds-color-info-base-default: #0062BA; + --ds-color-info-base-hover: #005099; + --ds-color-info-base-active: #003d75; + --ds-color-info-text-subtle: #69a2d6; + --ds-color-info-text-default: #cee1f2; + --ds-color-info-contrast-default: #fefeff; + --ds-color-info-contrast-subtle: #dbe9f5; + --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-focus-outer: #dcdfdf; + --ds-focus-inner: #ECC238; +} + +} diff --git a/css/theme2/color-mode/light.css b/css/theme2/color-mode/light.css new file mode 100644 index 0000000..0d058df --- /dev/null +++ b/css/theme2/color-mode/light.css @@ -0,0 +1,616 @@ +/** + * These files are generated from design tokens defind using Token Studio + */ + +: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: #0c72c1; + --ds-global-blue-10: #085ea0; + --ds-global-blue-11: #074b80; + --ds-global-blue-12: #0966ac; + --ds-global-blue-13: #043256; + --ds-global-blue-contrast-1: #fefeff; + --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: #03380a; + --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: #c95c21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #a1491a; + --ds-global-orange-13: #50240d; + --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: #663399; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #7b4ea7; + --ds-global-purple-13: #402060; + --ds-global-purple-contrast-1: #fefefe; + --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: #bf1b1b; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #c22020; + --ds-global-red-13: #620e0e; + --ds-global-red-contrast-1: #fffefe; + --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: #3a300a; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #FEFEFE; + --ds-color-accent-2: #EBF4FF; + --ds-color-accent-3: #D6E9FF; + --ds-color-accent-4: #ADD2FF; + --ds-color-accent-5: #85BCFF; + --ds-color-accent-6: #66ABFF; + --ds-color-accent-7: #2E78D1; + --ds-color-accent-8: #0049A3; + --ds-color-accent-9: #0049A3; + --ds-color-accent-10: #00306B; + --ds-color-accent-11: #001E42; + --ds-color-accent-12: #00295C; + --ds-color-accent-13: #001E42; + --ds-color-accent-contrast-1: #fefefe; + --ds-color-accent-contrast-2: #ccd9da; + --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: #F7F9FA; + --ds-color-neutral-3: #E1E5EB; + --ds-color-neutral-4: #CBD0D6; + --ds-color-neutral-5: #B2B9C2; + --ds-color-neutral-6: #A1A9B2; + --ds-color-neutral-7: #697380; + --ds-color-neutral-8: #45505D; + --ds-color-neutral-9: #45505D; + --ds-color-neutral-10: #25303D; + --ds-color-neutral-11: #14202E; + --ds-color-neutral-12: #222C38; + --ds-color-neutral-13: #14202E; + --ds-color-neutral-contrast-1: #fefefe; + --ds-color-neutral-contrast-2: #aeb4b5; + --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: #FAFCFF; + --ds-color-brand1-2: #EBF4FF; + --ds-color-brand1-3: #D6E9FF; + --ds-color-brand1-4: #ADD2FF; + --ds-color-brand1-5: #85BCFF; + --ds-color-brand1-6: #66ABFF; + --ds-color-brand1-7: #2E78D1; + --ds-color-brand1-8: #0049A3; + --ds-color-brand1-9: #0049A3; + --ds-color-brand1-10: #00306B; + --ds-color-brand1-11: #001E42; + --ds-color-brand1-12: #00295C; + --ds-color-brand1-13: #001E42; + --ds-color-brand1-contrast-1: #fefeff; + --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: #FFFCFA; + --ds-color-brand2-2: #FFF2E5; + --ds-color-brand2-3: #FFE6CC; + --ds-color-brand2-4: #FFCF9E; + --ds-color-brand2-5: #FFB870; + --ds-color-brand2-6: #FFA142; + --ds-color-brand2-7: #C26D19; + --ds-color-brand2-8: #854200; + --ds-color-brand2-9: #854200; + --ds-color-brand2-10: #5C2E00; + --ds-color-brand2-11: #331A00; + --ds-color-brand2-12: #522900; + --ds-color-brand2-13: #331A00; + --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: #FDFCFF; + --ds-color-brand3-2: #F6EDFF; + --ds-color-brand3-3: #F0E0FF; + --ds-color-brand3-4: #DEBDFF; + --ds-color-brand3-5: #CC99FF; + --ds-color-brand3-6: #B266FF; + --ds-color-brand3-7: #802ED1; + --ds-color-brand3-8: #5200A3; + --ds-color-brand3-9: #5B14A3; + --ds-color-brand3-10: #3A096B; + --ds-color-brand3-11: #210042; + --ds-color-brand3-12: #330066; + --ds-color-brand3-13: #1A0033; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #050807; + --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: #0c72c1; + --ds-color-info-base-hover: #085ea0; + --ds-color-info-base-active: #074b80; + --ds-color-info-text-subtle: #0966ac; + --ds-color-info-text-default: #043256; + --ds-color-info-contrast-default: #fefeff; + --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-focus-outer: #14202E; + --ds-focus-inner: #ECC238; +} + +@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: #0c72c1; + --ds-global-blue-10: #085ea0; + --ds-global-blue-11: #074b80; + --ds-global-blue-12: #0966ac; + --ds-global-blue-13: #043256; + --ds-global-blue-contrast-1: #fefeff; + --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: #03380a; + --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: #c95c21; + --ds-global-orange-10: #a94d1c; + --ds-global-orange-11: #8a3f17; + --ds-global-orange-12: #a1491a; + --ds-global-orange-13: #50240d; + --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: #663399; + --ds-global-purple-10: #4f2777; + --ds-global-purple-11: #381b54; + --ds-global-purple-12: #7b4ea7; + --ds-global-purple-13: #402060; + --ds-global-purple-contrast-1: #fefefe; + --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: #bf1b1b; + --ds-global-red-10: #9a1616; + --ds-global-red-11: #771111; + --ds-global-red-12: #c22020; + --ds-global-red-13: #620e0e; + --ds-global-red-contrast-1: #fffefe; + --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: #3a300a; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #382d0a; + --ds-color-accent-1: #FEFEFE; + --ds-color-accent-2: #EBF4FF; + --ds-color-accent-3: #D6E9FF; + --ds-color-accent-4: #ADD2FF; + --ds-color-accent-5: #85BCFF; + --ds-color-accent-6: #66ABFF; + --ds-color-accent-7: #2E78D1; + --ds-color-accent-8: #0049A3; + --ds-color-accent-9: #0049A3; + --ds-color-accent-10: #00306B; + --ds-color-accent-11: #001E42; + --ds-color-accent-12: #00295C; + --ds-color-accent-13: #001E42; + --ds-color-accent-contrast-1: #fefefe; + --ds-color-accent-contrast-2: #ccd9da; + --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: #F7F9FA; + --ds-color-neutral-3: #E1E5EB; + --ds-color-neutral-4: #CBD0D6; + --ds-color-neutral-5: #B2B9C2; + --ds-color-neutral-6: #A1A9B2; + --ds-color-neutral-7: #697380; + --ds-color-neutral-8: #45505D; + --ds-color-neutral-9: #45505D; + --ds-color-neutral-10: #25303D; + --ds-color-neutral-11: #14202E; + --ds-color-neutral-12: #222C38; + --ds-color-neutral-13: #14202E; + --ds-color-neutral-contrast-1: #fefefe; + --ds-color-neutral-contrast-2: #aeb4b5; + --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: #FAFCFF; + --ds-color-brand1-2: #EBF4FF; + --ds-color-brand1-3: #D6E9FF; + --ds-color-brand1-4: #ADD2FF; + --ds-color-brand1-5: #85BCFF; + --ds-color-brand1-6: #66ABFF; + --ds-color-brand1-7: #2E78D1; + --ds-color-brand1-8: #0049A3; + --ds-color-brand1-9: #0049A3; + --ds-color-brand1-10: #00306B; + --ds-color-brand1-11: #001E42; + --ds-color-brand1-12: #00295C; + --ds-color-brand1-13: #001E42; + --ds-color-brand1-contrast-1: #fefeff; + --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: #FFFCFA; + --ds-color-brand2-2: #FFF2E5; + --ds-color-brand2-3: #FFE6CC; + --ds-color-brand2-4: #FFCF9E; + --ds-color-brand2-5: #FFB870; + --ds-color-brand2-6: #FFA142; + --ds-color-brand2-7: #C26D19; + --ds-color-brand2-8: #854200; + --ds-color-brand2-9: #854200; + --ds-color-brand2-10: #5C2E00; + --ds-color-brand2-11: #331A00; + --ds-color-brand2-12: #522900; + --ds-color-brand2-13: #331A00; + --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: #FDFCFF; + --ds-color-brand3-2: #F6EDFF; + --ds-color-brand3-3: #F0E0FF; + --ds-color-brand3-4: #DEBDFF; + --ds-color-brand3-5: #CC99FF; + --ds-color-brand3-6: #B266FF; + --ds-color-brand3-7: #802ED1; + --ds-color-brand3-8: #5200A3; + --ds-color-brand3-9: #5B14A3; + --ds-color-brand3-10: #3A096B; + --ds-color-brand3-11: #210042; + --ds-color-brand3-12: #330066; + --ds-color-brand3-13: #1A0033; + --ds-color-brand3-contrast-1: #000000; + --ds-color-brand3-contrast-2: #050807; + --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: #0c72c1; + --ds-color-info-base-hover: #085ea0; + --ds-color-info-base-active: #074b80; + --ds-color-info-text-subtle: #0966ac; + --ds-color-info-text-default: #043256; + --ds-color-info-contrast-default: #fefeff; + --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-focus-outer: #14202E; + --ds-focus-inner: #ECC238; +} + +} diff --git a/css/theme2/semantic.css b/css/theme2/semantic.css new file mode 100644 index 0000000..92a8e36 --- /dev/null +++ b/css/theme2/semantic.css @@ -0,0 +1,102 @@ +/** + * These files are generated from design tokens defind using Token Studio + */ + +: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.125rem/1.7 'Inter'; + --ds-typography-paragraph-long-md: 400 1rem/1.7 'Inter'; + --ds-typography-paragraph-long-sm: 400 0.875rem/1.7 'Inter'; + --ds-typography-paragraph-long-xs: 400 0.8125rem/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-2: 0.125rem; + --ds-border-radius-4: 0.25rem; + --ds-border-radius-8: 0.5rem; + --ds-border-radius-12: 0.75rem; + --ds-border-radius-16: 1rem; + --ds-border-radius-24: 1.5rem; + --ds-border-radius-32: 2rem; + --ds-border-radius-9999: 624.9375rem; + --ds-border-radius-sm: calc(var(--ds-border-radius-2)); + --ds-border-radius-md: calc(var(--ds-border-radius-4)); + --ds-border-radius-lg: calc(var(--ds-border-radius-8)); + --ds-border-radius-xl: calc(var(--ds-border-radius-12)); + --ds-border-radius-2xl: calc(var(--ds-border-radius-16)); + --ds-border-radius-3xl: calc(var(--ds-border-radius-24)); + --ds-border-radius-4xl: calc(var(--ds-border-radius-32)); + --ds-border-radius-full: calc(var(--ds-border-radius-9999)); + --ds-spacing-0: calc(var(--ds-sizing-base)*0); + --ds-spacing-1: calc(var(--ds-sizing-base)*1); + --ds-spacing-2: calc(var(--ds-sizing-base)*2); + --ds-spacing-3: calc(var(--ds-sizing-base)*3); + --ds-spacing-4: calc(var(--ds-sizing-base)*4); + --ds-spacing-5: calc(var(--ds-sizing-base)*5); + --ds-spacing-6: calc(var(--ds-sizing-base)*6); + --ds-spacing-7: calc(var(--ds-sizing-base)*7); + --ds-spacing-8: calc(var(--ds-sizing-base)*8); + --ds-spacing-9: calc(var(--ds-sizing-base)*9); + --ds-spacing-10: calc(var(--ds-sizing-base)*10); + --ds-spacing-11: calc(var(--ds-sizing-base)*11); + --ds-spacing-12: calc(var(--ds-sizing-base)*12); + --ds-spacing-13: calc(var(--ds-sizing-base)*13); + --ds-spacing-14: calc(var(--ds-sizing-base)*14); + --ds-spacing-15: calc(var(--ds-sizing-base)*15); + --ds-spacing-18: calc(var(--ds-sizing-base)*18); + --ds-spacing-22: calc(var(--ds-sizing-base)*22); + --ds-spacing-26: calc(var(--ds-sizing-base)*26); + --ds-spacing-30: calc(var(--ds-sizing-base)*30); + --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); +} diff --git a/css/theme2/typography.css b/css/theme2/typography.css index 367faa1..35ddd8c 100644 --- a/css/theme2/typography.css +++ b/css/theme2/typography.css @@ -2,192 +2,241 @@ * These files are generated from design tokens defind using Token Studio */ - @layer ds.typography { +:root { + --ds-font-family-main: Inter; + --ds-line-height-300: 1.3; + --ds-line-height-500: 1.5; + --ds-line-height-600: 1.6; + --ds-line-height-700: 1.7; + --ds-font-weight-medium: 500; + --ds-font-weight-semibold: 600; + --ds-font-weight-regular: 400; + --ds-font-size-f-3: 0.75rem; + --ds-font-size-f-2: 0.8125rem; + --ds-font-size-f-1: 0.875rem; + --ds-font-size-f0: 1rem; + --ds-font-size-f1: 1.125rem; + --ds-font-size-f2: 1.3125rem; + --ds-font-size-f3: 1.5rem; + --ds-font-size-f4: 1.875rem; + --ds-font-size-f5: 2.25rem; + --ds-font-size-f6: 3rem; + --ds-font-size-f7: 3.75rem; +} - .ds-typography-heading-2xl { - font-size: 3.75rem; - line-height: 1.3; - font-weight: 500; + + .ds-error_message--xs { + font-size: var(--ds-font-size-f-1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-heading-xl { - font-size: 3rem; - line-height: 1.3; - font-weight: 500; + .ds-error_message--sm { + font-size: var(--ds-font-size-f0); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-heading-lg { - font-size: 2.25rem; - line-height: 1.3; - font-weight: 500; + .ds-error_message--md { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-heading-md { - font-size: 1.875rem; - line-height: 1.3; - font-weight: 500; + .ds-error_message--lg { + font-size: var(--ds-font-size-f2); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-heading-sm { - font-size: 1.5rem; - line-height: 1.3; - font-weight: 500; + .ds-label--xs { + font-size: var(--ds-font-size-f-1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-heading-xs { - font-size: 1.3125rem; - line-height: 1.3; - font-weight: 500; + .ds-label--sm { + font-size: var(--ds-font-size-f0); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-heading-2xs { - font-size: 1.125rem; - line-height: 1.3; - font-weight: 500; + .ds-label--md { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-ingress-lg { - font-size: 1.875rem; - line-height: 1.7; - font-weight: 400; + .ds-label--lg { + font-size: var(--ds-font-size-f2); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-ingress-md { - font-size: 1.5rem; - line-height: 1.7; - font-weight: 400; + .ds-paragraph-long--xs { + font-size: var(--ds-font-size-f-2); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-ingress-sm { - font-size: 1.3125rem; - line-height: 1.7; - font-weight: 400; + .ds-paragraph-long--sm { + font-size: var(--ds-font-size-f-1); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-ingress-xs { - font-size: 1.125rem; - line-height: 1.7; - font-weight: 400; + .ds-paragraph-long--md { + font-size: var(--ds-font-size-f0); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-lg { - font-size: 1.3125rem; - line-height: 1.5; - font-weight: 400; + .ds-paragraph-long--lg { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-md { - font-size: 1.125rem; - line-height: 1.5; - font-weight: 400; + .ds-paragraph-short--xs { + font-size: var(--ds-font-size-f-1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-sm { - font-size: 1rem; - line-height: 1.5; - font-weight: 400; + .ds-paragraph-short--sm { + font-size: var(--ds-font-size-f0); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-xs { - font-size: 0.875rem; - line-height: 1.5; - font-weight: 400; + .ds-paragraph-short--md { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-short-lg { - font-size: 1.3125rem; - line-height: 1.3; - font-weight: 400; + .ds-paragraph-short--lg { + font-size: var(--ds-font-size-f2); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-short-md { - font-size: 1.125rem; - line-height: 1.3; - font-weight: 400; + .ds-paragraph--xs { + font-size: var(--ds-font-size-f-1); + line-height: var(--ds-line-height-500); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-short-sm { - font-size: 1rem; - line-height: 1.3; - font-weight: 400; + .ds-paragraph--sm { + font-size: var(--ds-font-size-f0); + line-height: var(--ds-line-height-500); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-short-xs { - font-size: 0.875rem; - line-height: 1.3; - font-weight: 400; + .ds-paragraph--md { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-500); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-long-lg { - font-size: 1.125rem; - line-height: 1.7; - font-weight: 400; + .ds-paragraph--lg { + font-size: var(--ds-font-size-f2); + line-height: var(--ds-line-height-500); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-long-md { - font-size: 1rem; - line-height: 1.7; - font-weight: 400; + .ds-ingress--xs { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-long-sm { - font-size: 0.875rem; - line-height: 1.7; - font-weight: 400; + .ds-ingress--sm { + font-size: var(--ds-font-size-f2); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-paragraph-long-xs { - font-size: 0.8125rem; - line-height: 1.7; - font-weight: 400; + .ds-ingress--md { + font-size: var(--ds-font-size-f3); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-label-lg { - font-size: 1.3125rem; - line-height: 1.3; - font-weight: 500; + .ds-ingress--lg { + font-size: var(--ds-font-size-f4); + line-height: var(--ds-line-height-700); + font-weight: var(--ds-font-weight-regular); } - .ds-typography-label-md { - font-size: 1.125rem; - line-height: 1.3; - font-weight: 500; + .ds-heading--2xs { + font-size: var(--ds-font-size-f1); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-label-sm { - font-size: 1rem; - line-height: 1.3; - font-weight: 500; + .ds-heading--xs { + font-size: var(--ds-font-size-f2); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-label-xs { - font-size: 0.875rem; - line-height: 1.3; - font-weight: 500; + .ds-heading--sm { + font-size: var(--ds-font-size-f3); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-error_message-lg { - font-size: 1.3125rem; - line-height: 1.3; - font-weight: 400; + .ds-heading--md { + font-size: var(--ds-font-size-f4); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-error_message-md { - font-size: 1.125rem; - line-height: 1.3; - font-weight: 400; + .ds-heading--lg { + font-size: var(--ds-font-size-f5); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-error_message-sm { - font-size: 1rem; - line-height: 1.3; - font-weight: 400; + .ds-heading--xl { + font-size: var(--ds-font-size-f6); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); + } + + .ds-heading--2xl { + font-size: var(--ds-font-size-f7); + line-height: var(--ds-line-height-300); + font-weight: var(--ds-font-weight-medium); } - .ds-typography-error_message-xs { - font-size: 0.875rem; + .ds-line-height--300 { line-height: 1.3; + } + + .ds-line-height--500 { + line-height: 1.5; + } + + .ds-line-height--600 { + line-height: 1.6; + } + + .ds-line-height--700 { + line-height: 1.7; + } + + .ds-font-weight--medium { + font-weight: 500; + } + + .ds-font-weight--semibold { + font-weight: 600; + } + + .ds-font-weight--regular { font-weight: 400; } } diff --git a/package-lock.json b/package-lock.json index 38f17d7..484bc4b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,15 @@ { "name": "@brreg/designsystemet-theme", - "version": "0.1.1", + "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@brreg/designsystemet-theme", - "version": "0.1.1", + "version": "0.1.0", "license": "ISC", "devDependencies": { - "@digdir/designsystemet": "0.1.0-alpha.10" + "@digdir/designsystemet": "^0.1.0-alpha.11" } }, "node_modules/@adobe/leonardo-contrast-colors": { @@ -753,9 +753,9 @@ } }, "node_modules/@digdir/designsystemet": { - "version": "0.1.0-alpha.10", - "resolved": "https://registry.npmjs.org/@digdir/designsystemet/-/designsystemet-0.1.0-alpha.10.tgz", - "integrity": "sha512-19c0l7mZW5snsMF3UT3MxDhX+Hp9J9EjtBRkKJdEU9zLIV4FyNrE3XQamrJVEC3mQta1w8sD42cPPN7t46ZwMg==", + "version": "0.1.0-alpha.11", + "resolved": "https://registry.npmjs.org/@digdir/designsystemet/-/designsystemet-0.1.0-alpha.11.tgz", + "integrity": "sha512-l4jU52m7KUzn6AaodY0a0V9LrFWMZgHpGsamlX+TOdzvPwhr5FMqCEu/uUhFsMM+u14mgsge/GP7c/MZ2ILMVA==", "dev": true, "dependencies": { "@adobe/leonardo-contrast-colors": "^1.0.0", diff --git a/package.json b/package.json index b724702..780bcb8 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,6 @@ "author": "", "license": "ISC", "devDependencies": { - "@digdir/designsystemet": "0.1.0-alpha.10" + "@digdir/designsystemet": "^0.1.0-alpha.11" } }