From 9dd81964e440863908b70d48ea8ac51a36ca7262 Mon Sep 17 00:00:00 2001 From: Erik Betshammar Date: Wed, 4 Feb 2026 12:47:45 +0100 Subject: [PATCH 1/3] Refresh system shades --- design-tokens-build/colors.d.ts | 20 + design-tokens-build/ntnu.css | 1155 +++++++++++++++++ design-tokens-build/types.d.ts | 19 + design-tokens/$metadata.json | 9 +- design-tokens/$themes.json | 42 +- .../modes/color-scheme/dark/ntnu.json | 484 ++----- .../modes/color-scheme/light/ntnu.json | 446 ++----- design-tokens/semantic/color.json | 300 +---- .../modes/support-color/support-color-1.json | 70 + .../modes/support-color/support-color-2.json | 70 + .../modes/support-color/support-color-3.json | 70 + design-tokens/themes/ntnu.json | 300 +---- designsystemet.config.json | 22 +- 13 files changed, 1794 insertions(+), 1213 deletions(-) create mode 100644 design-tokens-build/colors.d.ts create mode 100644 design-tokens-build/ntnu.css create mode 100644 design-tokens-build/types.d.ts create mode 100644 design-tokens/semantic/modes/support-color/support-color-1.json create mode 100644 design-tokens/semantic/modes/support-color/support-color-2.json create mode 100644 design-tokens/semantic/modes/support-color/support-color-3.json diff --git a/design-tokens-build/colors.d.ts b/design-tokens-build/colors.d.ts new file mode 100644 index 0000000..0658a90 --- /dev/null +++ b/design-tokens-build/colors.d.ts @@ -0,0 +1,20 @@ +/* This file is deprecated and will be removed in a future release. Use types.d.ts instead */ +/* build: v1.11.0 */ +import type {} from '@digdir/designsystemet-types'; + +// Augment types based on theme +declare module '@digdir/designsystemet-types' { + export interface ColorDefinitions { + accent: never; + 'support-color-1': never; + 'support-color-2': never; + 'support-color-3': never; + neutral: never; + } + export interface SeverityColorDefinitions { + info: never; + success: never; + warning: never; + danger: never; + } +} diff --git a/design-tokens-build/ntnu.css b/design-tokens-build/ntnu.css new file mode 100644 index 0000000..9c32473 --- /dev/null +++ b/design-tokens-build/ntnu.css @@ -0,0 +1,1155 @@ +@charset "UTF-8"; +/* +build: v1.11.0 +design-tokens: v1.11.0 +*/ + +@layer ds.theme.size-mode { +:root /* small */ { + --ds-size-mode-font-size--sm: 1; +} +} + +@layer ds.theme.size-mode { +:root /* medium */ { + --ds-size-mode-font-size--md: 1.125; +} +} + +@layer ds.theme.size-mode { +:root /* large */ { + --ds-size-mode-font-size--lg: 1.3125; +} +} + +@layer ds.theme.size-mode { +:root, [data-size] { + --ds-size: var(--ds-size--md); + --ds-size--sm: var(--ds-size,); + --ds-size--md: var(--ds-size,); + --ds-size--lg: var(--ds-size,); + --ds-size-mode-font-size: + var(--ds-size--sm, var(--ds-size-mode-font-size--sm)) + var(--ds-size--md, var(--ds-size-mode-font-size--md)) + var(--ds-size--lg, var(--ds-size-mode-font-size--lg)); +} + +[data-size='sm'] { --ds-size: var(--ds-size--sm); } +[data-size='md'] { --ds-size: var(--ds-size--md); } +[data-size='lg'] { --ds-size: var(--ds-size--lg); } +} + +@layer ds.theme.type-scale { +:root, [data-size] { + --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / 16)); + --ds-font-size-1: calc(0.75rem * var(--_ds-font-size-factor)); + --ds-font-size-2: calc(0.875rem * var(--_ds-font-size-factor)); + --ds-font-size-3: calc(1rem * var(--_ds-font-size-factor)); + --ds-font-size-4: calc(1.125rem * var(--_ds-font-size-factor)); + --ds-font-size-5: calc(1.3125rem * var(--_ds-font-size-factor)); + --ds-font-size-6: calc(1.5rem * var(--_ds-font-size-factor)); + --ds-font-size-7: calc(1.875rem * var(--_ds-font-size-factor)); + --ds-font-size-8: calc(2.25rem * var(--_ds-font-size-factor)); + --ds-font-size-9: calc(3rem * var(--_ds-font-size-factor)); + --ds-font-size-10: calc(3.75rem * var(--_ds-font-size-factor)); + --ds-heading-2xl-font-size: var(--ds-font-size-10); + --ds-heading-xl-font-size: var(--ds-font-size-9); + --ds-heading-lg-font-size: var(--ds-font-size-8); + --ds-heading-md-font-size: var(--ds-font-size-7); + --ds-heading-sm-font-size: var(--ds-font-size-6); + --ds-heading-xs-font-size: var(--ds-font-size-5); + --ds-heading-2xs-font-size: var(--ds-font-size-4); + --ds-body-xl-font-size: var(--ds-font-size-6); + --ds-body-lg-font-size: var(--ds-font-size-5); + --ds-body-md-font-size: var(--ds-font-size-4); + --ds-body-sm-font-size: var(--ds-font-size-3); + --ds-body-xs-font-size: var(--ds-font-size-2); + --ds-body-short-xl-font-size: var(--ds-font-size-6); + --ds-body-short-lg-font-size: var(--ds-font-size-5); + --ds-body-short-md-font-size: var(--ds-font-size-4); + --ds-body-short-sm-font-size: var(--ds-font-size-3); + --ds-body-short-xs-font-size: var(--ds-font-size-2); + --ds-body-long-xl-font-size: var(--ds-font-size-6); + --ds-body-long-lg-font-size: var(--ds-font-size-5); + --ds-body-long-md-font-size: var(--ds-font-size-4); + --ds-body-long-sm-font-size: var(--ds-font-size-3); + --ds-body-long-xs-font-size: var(--ds-font-size-2); + + @supports (width: round(down, .1em, 1px)) { + --ds-font-size-1: round(calc(0.75rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-2: round(calc(0.875rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-3: round(calc(1rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-4: round(calc(1.125rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-5: round(calc(1.3125rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-6: round(calc(1.5rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-7: round(calc(1.875rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-8: round(calc(2.25rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-9: round(calc(3rem * var(--_ds-font-size-factor)), 1px); + --ds-font-size-10: round(calc(3.75rem * var(--_ds-font-size-factor)), 1px); + } +} +} +@layer ds.theme.color-scheme.light { +:root, [data-color-scheme="light"] { + --ds-color-accent-background-default: #ffffff; + --ds-color-accent-background-tinted: #eff4fa; + --ds-color-accent-surface-default: #ffffff; + --ds-color-accent-surface-tinted: #e0e9f6; + --ds-color-accent-surface-hover: #ccdbf0; + --ds-color-accent-surface-active: #b6cce9; + --ds-color-accent-border-subtle: #a2bee3; + --ds-color-accent-border-default: #407ac5; + --ds-color-accent-border-strong: #135bb8; + --ds-color-accent-text-subtle: #135bb8; + --ds-color-accent-text-default: #002960; + --ds-color-accent-base-default: #004DB2; + --ds-color-accent-base-hover: #003c8b; + --ds-color-accent-base-active: #002c65; + --ds-color-accent-base-contrast-subtle: #ecf2f9; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-neutral-background-default: #ffffff; + --ds-color-neutral-background-tinted: #f6f3f0; + --ds-color-neutral-surface-default: #ffffff; + --ds-color-neutral-surface-tinted: #eee7e1; + --ds-color-neutral-surface-hover: #e3d8cd; + --ds-color-neutral-surface-active: #d7c7b8; + --ds-color-neutral-border-subtle: #c9b9a9; + --ds-color-neutral-border-default: #81776d; + --ds-color-neutral-border-strong: #645c54; + --ds-color-neutral-text-subtle: #645c54; + --ds-color-neutral-text-default: #2e2b27; + --ds-color-neutral-base-default: #D4C3B2; + --ds-color-neutral-base-hover: #bdae9f; + --ds-color-neutral-base-active: #a5988b; + --ds-color-neutral-base-contrast-subtle: #332f2b; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-support-color-1-background-default: #ffffff; + --ds-color-support-color-1-background-tinted: #fcf3e3; + --ds-color-support-color-1-surface-default: #ffffff; + --ds-color-support-color-1-surface-tinted: #f8e6c7; + --ds-color-support-color-1-surface-hover: #f4d6a2; + --ds-color-support-color-1-surface-active: #ecc47f; + --ds-color-support-color-1-border-subtle: #dbb676; + --ds-color-support-color-1-border-default: #8d754c; + --ds-color-support-color-1-border-strong: #6d5b3b; + --ds-color-support-color-1-text-subtle: #6d5b3b; + --ds-color-support-color-1-text-default: #332a1b; + --ds-color-support-color-1-base-default: #F0C881; + --ds-color-support-color-1-base-hover: #d7b373; + --ds-color-support-color-1-base-active: #bd9e66; + --ds-color-support-color-1-base-contrast-subtle: #3f3522; + --ds-color-support-color-1-base-contrast-default: #000000; + --ds-color-support-color-2-background-default: #ffffff; + --ds-color-support-color-2-background-tinted: #fbf1f4; + --ds-color-support-color-2-surface-default: #ffffff; + --ds-color-support-color-2-surface-tinted: #f7e4ea; + --ds-color-support-color-2-surface-hover: #f2d2dc; + --ds-color-support-color-2-surface-active: #ecbecd; + --ds-color-support-color-2-border-subtle: #dbb0be; + --ds-color-support-color-2-border-default: #8d727a; + --ds-color-support-color-2-border-strong: #6d585f; + --ds-color-support-color-2-text-subtle: #6d585f; + --ds-color-support-color-2-text-default: #33292c; + --ds-color-support-color-2-base-default: #ECBECD; + --ds-color-support-color-2-base-hover: #d2a9b7; + --ds-color-support-color-2-base-active: #ba96a1; + --ds-color-support-color-2-base-contrast-subtle: #3c3034; + --ds-color-support-color-2-base-contrast-default: #000000; + --ds-color-support-color-3-background-default: #ffffff; + --ds-color-support-color-3-background-tinted: #f2f4f1; + --ds-color-support-color-3-surface-default: #ffffff; + --ds-color-support-color-3-surface-tinted: #e5eae4; + --ds-color-support-color-3-surface-hover: #d4dcd3; + --ds-color-support-color-3-surface-active: #c1cdc1; + --ds-color-support-color-3-border-subtle: #b1c0b0; + --ds-color-support-color-3-border-default: #628060; + --ds-color-support-color-3-border-strong: #42663f; + --ds-color-support-color-3-text-subtle: #42663f; + --ds-color-support-color-3-text-default: #0d330b; + --ds-color-support-color-3-base-default: #103E0D; + --ds-color-support-color-3-base-hover: #265024; + --ds-color-support-color-3-base-active: #3e633b; + --ds-color-support-color-3-base-contrast-subtle: #c5d0c4; + --ds-color-support-color-3-base-contrast-default: #ffffff; + --ds-color-info-background-default: #ffffff; + --ds-color-info-background-tinted: #edf5f6; + --ds-color-info-surface-default: #ffffff; + --ds-color-info-surface-tinted: #dcebed; + --ds-color-info-surface-hover: #c6dfe1; + --ds-color-info-surface-active: #add1d4; + --ds-color-info-border-subtle: #a0c2c5; + --ds-color-info-border-default: #677d7e; + --ds-color-info-border-strong: #506062; + --ds-color-info-text-subtle: #506062; + --ds-color-info-text-default: #252d2d; + --ds-color-info-base-default: #ACD0D3; + --ds-color-info-base-hover: #99b9bc; + --ds-color-info-base-active: #87a3a6; + --ds-color-info-base-contrast-subtle: #2c3535; + --ds-color-info-base-contrast-default: #000000; + --ds-color-success-background-default: #ffffff; + --ds-color-success-background-tinted: #edf6ef; + --ds-color-success-surface-default: #ffffff; + --ds-color-success-surface-tinted: #ddeddf; + --ds-color-success-surface-hover: #c6e1ca; + --ds-color-success-surface-active: #add4b3; + --ds-color-success-border-subtle: #96c79e; + --ds-color-success-border-default: #248b33; + --ds-color-success-border-strong: #116c1e; + --ds-color-success-text-subtle: #116c1e; + --ds-color-success-text-default: #08330e; + --ds-color-success-base-default: #148224; + --ds-color-success-base-hover: #116c1e; + --ds-color-success-base-active: #0d5618; + --ds-color-success-base-contrast-subtle: #f3f9f4; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-warning-background-default: #ffffff; + --ds-color-warning-background-tinted: #fef2e3; + --ds-color-warning-surface-default: #ffffff; + --ds-color-warning-surface-tinted: #fce5c8; + --ds-color-warning-surface-hover: #fbd4a3; + --ds-color-warning-surface-active: #f9c079; + --ds-color-warning-border-subtle: #f7ac51; + --ds-color-warning-border-default: #a46d2a; + --ds-color-warning-border-strong: #7f5420; + --ds-color-warning-text-subtle: #7f5420; + --ds-color-warning-text-default: #3b270f; + --ds-color-warning-base-default: #F6A43F; + --ds-color-warning-base-hover: #d99138; + --ds-color-warning-base-active: #bd7e30; + --ds-color-warning-base-contrast-subtle: #30200c; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-danger-background-default: #ffffff; + --ds-color-danger-background-tinted: #fdf1f1; + --ds-color-danger-surface-default: #ffffff; + --ds-color-danger-surface-tinted: #fbe3e3; + --ds-color-danger-surface-hover: #f8d1d1; + --ds-color-danger-surface-active: #f5bcbc; + --ds-color-danger-border-subtle: #f2a9a9; + --ds-color-danger-border-default: #e13737; + --ds-color-danger-border-strong: #bd0808; + --ds-color-danger-text-subtle: #bd0808; + --ds-color-danger-text-default: #5e0404; + --ds-color-danger-base-default: #DA0909; + --ds-color-danger-base-hover: #b50707; + --ds-color-danger-base-active: #910606; + --ds-color-danger-base-contrast-subtle: #fdf0f0; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-focus-inner: #ffffff; + --ds-color-focus-outer: #2e2b27; + --ds-link-color-visited: #663299; + + color-scheme: light; +} + +@media (prefers-color-scheme: light) { + [data-color-scheme="auto"] { + --ds-color-accent-background-default: #ffffff; + --ds-color-accent-background-tinted: #eff4fa; + --ds-color-accent-surface-default: #ffffff; + --ds-color-accent-surface-tinted: #e0e9f6; + --ds-color-accent-surface-hover: #ccdbf0; + --ds-color-accent-surface-active: #b6cce9; + --ds-color-accent-border-subtle: #a2bee3; + --ds-color-accent-border-default: #407ac5; + --ds-color-accent-border-strong: #135bb8; + --ds-color-accent-text-subtle: #135bb8; + --ds-color-accent-text-default: #002960; + --ds-color-accent-base-default: #004DB2; + --ds-color-accent-base-hover: #003c8b; + --ds-color-accent-base-active: #002c65; + --ds-color-accent-base-contrast-subtle: #ecf2f9; + --ds-color-accent-base-contrast-default: #ffffff; + --ds-color-neutral-background-default: #ffffff; + --ds-color-neutral-background-tinted: #f6f3f0; + --ds-color-neutral-surface-default: #ffffff; + --ds-color-neutral-surface-tinted: #eee7e1; + --ds-color-neutral-surface-hover: #e3d8cd; + --ds-color-neutral-surface-active: #d7c7b8; + --ds-color-neutral-border-subtle: #c9b9a9; + --ds-color-neutral-border-default: #81776d; + --ds-color-neutral-border-strong: #645c54; + --ds-color-neutral-text-subtle: #645c54; + --ds-color-neutral-text-default: #2e2b27; + --ds-color-neutral-base-default: #D4C3B2; + --ds-color-neutral-base-hover: #bdae9f; + --ds-color-neutral-base-active: #a5988b; + --ds-color-neutral-base-contrast-subtle: #332f2b; + --ds-color-neutral-base-contrast-default: #000000; + --ds-color-support-color-1-background-default: #ffffff; + --ds-color-support-color-1-background-tinted: #fcf3e3; + --ds-color-support-color-1-surface-default: #ffffff; + --ds-color-support-color-1-surface-tinted: #f8e6c7; + --ds-color-support-color-1-surface-hover: #f4d6a2; + --ds-color-support-color-1-surface-active: #ecc47f; + --ds-color-support-color-1-border-subtle: #dbb676; + --ds-color-support-color-1-border-default: #8d754c; + --ds-color-support-color-1-border-strong: #6d5b3b; + --ds-color-support-color-1-text-subtle: #6d5b3b; + --ds-color-support-color-1-text-default: #332a1b; + --ds-color-support-color-1-base-default: #F0C881; + --ds-color-support-color-1-base-hover: #d7b373; + --ds-color-support-color-1-base-active: #bd9e66; + --ds-color-support-color-1-base-contrast-subtle: #3f3522; + --ds-color-support-color-1-base-contrast-default: #000000; + --ds-color-support-color-2-background-default: #ffffff; + --ds-color-support-color-2-background-tinted: #fbf1f4; + --ds-color-support-color-2-surface-default: #ffffff; + --ds-color-support-color-2-surface-tinted: #f7e4ea; + --ds-color-support-color-2-surface-hover: #f2d2dc; + --ds-color-support-color-2-surface-active: #ecbecd; + --ds-color-support-color-2-border-subtle: #dbb0be; + --ds-color-support-color-2-border-default: #8d727a; + --ds-color-support-color-2-border-strong: #6d585f; + --ds-color-support-color-2-text-subtle: #6d585f; + --ds-color-support-color-2-text-default: #33292c; + --ds-color-support-color-2-base-default: #ECBECD; + --ds-color-support-color-2-base-hover: #d2a9b7; + --ds-color-support-color-2-base-active: #ba96a1; + --ds-color-support-color-2-base-contrast-subtle: #3c3034; + --ds-color-support-color-2-base-contrast-default: #000000; + --ds-color-support-color-3-background-default: #ffffff; + --ds-color-support-color-3-background-tinted: #f2f4f1; + --ds-color-support-color-3-surface-default: #ffffff; + --ds-color-support-color-3-surface-tinted: #e5eae4; + --ds-color-support-color-3-surface-hover: #d4dcd3; + --ds-color-support-color-3-surface-active: #c1cdc1; + --ds-color-support-color-3-border-subtle: #b1c0b0; + --ds-color-support-color-3-border-default: #628060; + --ds-color-support-color-3-border-strong: #42663f; + --ds-color-support-color-3-text-subtle: #42663f; + --ds-color-support-color-3-text-default: #0d330b; + --ds-color-support-color-3-base-default: #103E0D; + --ds-color-support-color-3-base-hover: #265024; + --ds-color-support-color-3-base-active: #3e633b; + --ds-color-support-color-3-base-contrast-subtle: #c5d0c4; + --ds-color-support-color-3-base-contrast-default: #ffffff; + --ds-color-info-background-default: #ffffff; + --ds-color-info-background-tinted: #edf5f6; + --ds-color-info-surface-default: #ffffff; + --ds-color-info-surface-tinted: #dcebed; + --ds-color-info-surface-hover: #c6dfe1; + --ds-color-info-surface-active: #add1d4; + --ds-color-info-border-subtle: #a0c2c5; + --ds-color-info-border-default: #677d7e; + --ds-color-info-border-strong: #506062; + --ds-color-info-text-subtle: #506062; + --ds-color-info-text-default: #252d2d; + --ds-color-info-base-default: #ACD0D3; + --ds-color-info-base-hover: #99b9bc; + --ds-color-info-base-active: #87a3a6; + --ds-color-info-base-contrast-subtle: #2c3535; + --ds-color-info-base-contrast-default: #000000; + --ds-color-success-background-default: #ffffff; + --ds-color-success-background-tinted: #edf6ef; + --ds-color-success-surface-default: #ffffff; + --ds-color-success-surface-tinted: #ddeddf; + --ds-color-success-surface-hover: #c6e1ca; + --ds-color-success-surface-active: #add4b3; + --ds-color-success-border-subtle: #96c79e; + --ds-color-success-border-default: #248b33; + --ds-color-success-border-strong: #116c1e; + --ds-color-success-text-subtle: #116c1e; + --ds-color-success-text-default: #08330e; + --ds-color-success-base-default: #148224; + --ds-color-success-base-hover: #116c1e; + --ds-color-success-base-active: #0d5618; + --ds-color-success-base-contrast-subtle: #f3f9f4; + --ds-color-success-base-contrast-default: #ffffff; + --ds-color-warning-background-default: #ffffff; + --ds-color-warning-background-tinted: #fef2e3; + --ds-color-warning-surface-default: #ffffff; + --ds-color-warning-surface-tinted: #fce5c8; + --ds-color-warning-surface-hover: #fbd4a3; + --ds-color-warning-surface-active: #f9c079; + --ds-color-warning-border-subtle: #f7ac51; + --ds-color-warning-border-default: #a46d2a; + --ds-color-warning-border-strong: #7f5420; + --ds-color-warning-text-subtle: #7f5420; + --ds-color-warning-text-default: #3b270f; + --ds-color-warning-base-default: #F6A43F; + --ds-color-warning-base-hover: #d99138; + --ds-color-warning-base-active: #bd7e30; + --ds-color-warning-base-contrast-subtle: #30200c; + --ds-color-warning-base-contrast-default: #000000; + --ds-color-danger-background-default: #ffffff; + --ds-color-danger-background-tinted: #fdf1f1; + --ds-color-danger-surface-default: #ffffff; + --ds-color-danger-surface-tinted: #fbe3e3; + --ds-color-danger-surface-hover: #f8d1d1; + --ds-color-danger-surface-active: #f5bcbc; + --ds-color-danger-border-subtle: #f2a9a9; + --ds-color-danger-border-default: #e13737; + --ds-color-danger-border-strong: #bd0808; + --ds-color-danger-text-subtle: #bd0808; + --ds-color-danger-text-default: #5e0404; + --ds-color-danger-base-default: #DA0909; + --ds-color-danger-base-hover: #b50707; + --ds-color-danger-base-active: #910606; + --ds-color-danger-base-contrast-subtle: #fdf0f0; + --ds-color-danger-base-contrast-default: #ffffff; + --ds-color-focus-inner: #ffffff; + --ds-color-focus-outer: #2e2b27; + --ds-link-color-visited: #663299; + + color-scheme: light; +} + +} + +} + +@layer ds.theme.typography.secondary { +[data-typography="secondary"] { + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-letter-spacing-1: -0.01em; + --ds-letter-spacing-2: -0.005em; + --ds-letter-spacing-3: -0.0025em; + --ds-letter-spacing-4: -0.0015em; + --ds-letter-spacing-5: 0em; + --ds-letter-spacing-6: 0.0015em; + --ds-letter-spacing-7: 0.0025em; + --ds-letter-spacing-8: 0.005em; + --ds-letter-spacing-9: 0.015em; + --ds-font-family: Open Sans; + --ds-font-weight-medium: 500; + --ds-font-weight-semibold: 600; + --ds-font-weight-regular: 400; + --ds-heading-2xl-font-weight: 500; + --ds-heading-2xl-line-height: 1.3; + --ds-heading-2xl-letter-spacing: -0.01em; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-letter-spacing: -0.01em; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-letter-spacing: -0.005em; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-letter-spacing: -0.0025em; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-letter-spacing: 0em; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-letter-spacing: 0.0015em; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-letter-spacing: 0.0015em; + --ds-body-xl-font-weight: 400; + --ds-body-xl-line-height: 1.5; + --ds-body-xl-letter-spacing: 0.005em; + --ds-body-lg-font-weight: 400; + --ds-body-lg-line-height: 1.5; + --ds-body-lg-letter-spacing: 0.005em; + --ds-body-md-font-weight: 400; + --ds-body-md-line-height: 1.5; + --ds-body-md-letter-spacing: 0.005em; + --ds-body-sm-font-weight: 400; + --ds-body-sm-line-height: 1.5; + --ds-body-sm-letter-spacing: 0.0025em; + --ds-body-xs-font-weight: 400; + --ds-body-xs-line-height: 1.5; + --ds-body-xs-letter-spacing: 0.0015em; + --ds-body-short-xl-font-weight: 400; + --ds-body-short-xl-line-height: 1.3; + --ds-body-short-xl-letter-spacing: 0.005em; + --ds-body-short-lg-font-weight: 400; + --ds-body-short-lg-line-height: 1.3; + --ds-body-short-lg-letter-spacing: 0.005em; + --ds-body-short-md-font-weight: 400; + --ds-body-short-md-line-height: 1.3; + --ds-body-short-md-letter-spacing: 0.005em; + --ds-body-short-sm-font-weight: 400; + --ds-body-short-sm-line-height: 1.3; + --ds-body-short-sm-letter-spacing: 0.0025em; + --ds-body-short-xs-font-weight: 400; + --ds-body-short-xs-line-height: 1.3; + --ds-body-short-xs-letter-spacing: 0.0015em; + --ds-body-long-xl-font-weight: 400; + --ds-body-long-xl-line-height: 1.7; + --ds-body-long-xl-letter-spacing: 0.005em; + --ds-body-long-lg-font-weight: 400; + --ds-body-long-lg-line-height: 1.7; + --ds-body-long-lg-letter-spacing: 0.005em; + --ds-body-long-md-font-weight: 400; + --ds-body-long-md-line-height: 1.7; + --ds-body-long-md-letter-spacing: 0.005em; + --ds-body-long-sm-font-weight: 400; + --ds-body-long-sm-line-height: 1.7; + --ds-body-long-sm-letter-spacing: 0.0025em; + --ds-body-long-xs-font-weight: 400; + --ds-body-long-xs-line-height: 1.7; + --ds-body-long-xs-letter-spacing: 0.0015em; +} +} +@layer ds.theme.size { +:root, [data-size] { + --ds-size-base: 18; + --ds-size-step: 4; + + --ds-size-0: calc(var(--ds-size-unit) * 0); + --ds-size-1: calc(var(--ds-size-unit) * 1); + --ds-size-2: calc(var(--ds-size-unit) * 2); + --ds-size-3: calc(var(--ds-size-unit) * 3); + --ds-size-4: calc(var(--ds-size-unit) * 4); + --ds-size-5: calc(var(--ds-size-unit) * 5); + --ds-size-6: calc(var(--ds-size-unit) * 6); + --ds-size-7: calc(var(--ds-size-unit) * 7); + --ds-size-8: calc(var(--ds-size-unit) * 8); + --ds-size-9: calc(var(--ds-size-unit) * 9); + --ds-size-10: calc(var(--ds-size-unit) * 10); + --ds-size-11: calc(var(--ds-size-unit) * 11); + --ds-size-12: calc(var(--ds-size-unit) * 12); + --ds-size-13: calc(var(--ds-size-unit) * 13); + --ds-size-14: calc(var(--ds-size-unit) * 14); + --ds-size-15: calc(var(--ds-size-unit) * 15); + --ds-size-18: calc(var(--ds-size-unit) * 18); + --ds-size-22: calc(var(--ds-size-unit) * 22); + --ds-size-26: calc(var(--ds-size-unit) * 26); + --ds-size-30: calc(var(--ds-size-unit) * 30); + --ds-size-unit: calc(1rem * var(--ds-size-step) / var(--ds-size-base) * var(--ds-size-mode-font-size)); + + @supports (width: round(down, .1em, 1px)) { + --ds-size-0: round(down, calc(var(--ds-size-unit) * 0), 1px); + --ds-size-1: round(down, calc(var(--ds-size-unit) * 1), 1px); + --ds-size-2: round(down, calc(var(--ds-size-unit) * 2), 1px); + --ds-size-3: round(down, calc(var(--ds-size-unit) * 3), 1px); + --ds-size-4: round(down, calc(var(--ds-size-unit) * 4), 1px); + --ds-size-5: round(down, calc(var(--ds-size-unit) * 5), 1px); + --ds-size-6: round(down, calc(var(--ds-size-unit) * 6), 1px); + --ds-size-7: round(down, calc(var(--ds-size-unit) * 7), 1px); + --ds-size-8: round(down, calc(var(--ds-size-unit) * 8), 1px); + --ds-size-9: round(down, calc(var(--ds-size-unit) * 9), 1px); + --ds-size-10: round(down, calc(var(--ds-size-unit) * 10), 1px); + --ds-size-11: round(down, calc(var(--ds-size-unit) * 11), 1px); + --ds-size-12: round(down, calc(var(--ds-size-unit) * 12), 1px); + --ds-size-13: round(down, calc(var(--ds-size-unit) * 13), 1px); + --ds-size-14: round(down, calc(var(--ds-size-unit) * 14), 1px); + --ds-size-15: round(down, calc(var(--ds-size-unit) * 15), 1px); + --ds-size-18: round(down, calc(var(--ds-size-unit) * 18), 1px); + --ds-size-22: round(down, calc(var(--ds-size-unit) * 22), 1px); + --ds-size-26: round(down, calc(var(--ds-size-unit) * 26), 1px); + --ds-size-30: round(down, calc(var(--ds-size-unit) * 30), 1px); + } +} + +} + +@layer ds.theme.semantic { +:root { + --ds-border-radius-base: 0.125rem; + --ds-border-radius-scale: 0.25rem; + --ds-border-radius-sm: min(var(--ds-border-radius-base)*0.5,var(--ds-border-radius-scale)); + --ds-border-radius-md: min(var(--ds-border-radius-base),var(--ds-border-radius-scale)*2); + --ds-border-radius-lg: min(var(--ds-border-radius-base)*2,var(--ds-border-radius-scale)*5); + --ds-border-radius-xl: min(var(--ds-border-radius-base)*3,var(--ds-border-radius-scale)*7); + --ds-border-radius-default: var(--ds-border-radius-base); + --ds-border-radius-full: 624.9375rem; + --ds-border-width-default: 1px; + --ds-border-width-focus: 3px; + --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); + --ds-opacity-disabled: 30%; +} + +} + +@layer ds.theme.color-scheme.dark { +[data-color-scheme="dark"] { + --ds-color-accent-background-default: #0b182b; + --ds-color-accent-background-tinted: #0f1f39; + --ds-color-accent-surface-default: #132848; + --ds-color-accent-surface-tinted: #152e53; + --ds-color-accent-surface-hover: #193560; + --ds-color-accent-surface-active: #1f4279; + --ds-color-accent-border-subtle: #254f90; + --ds-color-accent-border-default: #6382b4; + --ds-color-accent-border-strong: #93a9cb; + --ds-color-accent-text-subtle: #93a9cb; + --ds-color-accent-text-default: #e8edf4; + --ds-color-accent-base-default: #78a1d6; + --ds-color-accent-base-hover: #96b6df; + --ds-color-accent-base-active: #b5cbe9; + --ds-color-accent-base-contrast-subtle: #0d1117; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-neutral-background-default: #191816; + --ds-color-neutral-background-tinted: #211f1d; + --ds-color-neutral-surface-default: #2a2725; + --ds-color-neutral-surface-tinted: #302d2b; + --ds-color-neutral-surface-hover: #383532; + --ds-color-neutral-surface-active: #46423e; + --ds-color-neutral-border-subtle: #544f4a; + --ds-color-neutral-border-default: #888078; + --ds-color-neutral-border-strong: #b0a69c; + --ds-color-neutral-text-subtle: #b0a69c; + --ds-color-neutral-text-default: #f0ece8; + --ds-color-neutral-base-default: #35302c; + --ds-color-neutral-base-hover: #48423c; + --ds-color-neutral-base-active: #5b544d; + --ds-color-neutral-base-contrast-subtle: #c8c7c6; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-support-color-1-background-default: #1b1712; + --ds-color-support-color-1-background-tinted: #231f18; + --ds-color-support-color-1-surface-default: #2d271e; + --ds-color-support-color-1-surface-tinted: #332d22; + --ds-color-support-color-1-surface-hover: #3c3428; + --ds-color-support-color-1-surface-active: #4b4232; + --ds-color-support-color-1-border-subtle: #594f3c; + --ds-color-support-color-1-border-default: #917f61; + --ds-color-support-color-1-border-strong: #bca57e; + --ds-color-support-color-1-text-subtle: #bca57e; + --ds-color-support-color-1-text-default: #f6ebd9; + --ds-color-support-color-1-base-default: #322a1b; + --ds-color-support-color-1-base-hover: #463a26; + --ds-color-support-color-1-base-active: #5c4d32; + --ds-color-support-color-1-base-contrast-subtle: #c1bfba; + --ds-color-support-color-1-base-contrast-default: #ffffff; + --ds-color-support-color-2-background-default: #1b1718; + --ds-color-support-color-2-background-tinted: #231e20; + --ds-color-support-color-2-surface-default: #2d2628; + --ds-color-support-color-2-surface-tinted: #332c2e; + --ds-color-support-color-2-surface-hover: #3c3336; + --ds-color-support-color-2-surface-active: #4b4044; + --ds-color-support-color-2-border-subtle: #5a4d51; + --ds-color-support-color-2-border-default: #917c83; + --ds-color-support-color-2-border-strong: #bca1aa; + --ds-color-support-color-2-text-subtle: #bca1aa; + --ds-color-support-color-2-text-default: #f5e9ed; + --ds-color-support-color-2-base-default: #352a2e; + --ds-color-support-color-2-base-hover: #4a3b40; + --ds-color-support-color-2-base-active: #604d53; + --ds-color-support-color-2-base-contrast-subtle: #c4c1c2; + --ds-color-support-color-2-base-contrast-default: #ffffff; + --ds-color-support-color-3-background-default: #0e1b0d; + --ds-color-support-color-3-background-tinted: #122311; + --ds-color-support-color-3-surface-default: #172d15; + --ds-color-support-color-3-surface-tinted: #1a3318; + --ds-color-support-color-3-surface-hover: #1f3c1d; + --ds-color-support-color-3-surface-active: #2f492d; + --ds-color-support-color-3-border-subtle: #3d563b; + --ds-color-support-color-3-border-default: #748673; + --ds-color-support-color-3-border-strong: #9fab9e; + --ds-color-support-color-3-text-subtle: #9fab9e; + --ds-color-support-color-3-text-default: #eaedea; + --ds-color-support-color-3-base-default: #9db09c; + --ds-color-support-color-3-base-hover: #859c83; + --ds-color-support-color-3-base-active: #6c886a; + --ds-color-support-color-3-base-contrast-subtle: #191c19; + --ds-color-support-color-3-base-contrast-default: #000000; + --ds-color-info-background-default: #151819; + --ds-color-info-background-tinted: #1c2020; + --ds-color-info-surface-default: #242929; + --ds-color-info-surface-tinted: #292f2f; + --ds-color-info-surface-hover: #303737; + --ds-color-info-surface-active: #3c4545; + --ds-color-info-border-subtle: #485253; + --ds-color-info-border-default: #748486; + --ds-color-info-border-strong: #97acad; + --ds-color-info-text-subtle: #97acad; + --ds-color-info-text-default: #e5eeef; + --ds-color-info-base-default: #273030; + --ds-color-info-base-hover: #374243; + --ds-color-info-base-active: #465556; + --ds-color-info-base-contrast-subtle: #c2c5c5; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-success-background-default: #0d1b0e; + --ds-color-success-background-tinted: #122312; + --ds-color-success-surface-default: #162d17; + --ds-color-success-surface-tinted: #1a331b; + --ds-color-success-surface-hover: #1e3c1f; + --ds-color-success-surface-active: #264b27; + --ds-color-success-border-subtle: #2d5a2e; + --ds-color-success-border-default: #588e5a; + --ds-color-success-border-strong: #8cb18d; + --ds-color-success-text-subtle: #8cb18d; + --ds-color-success-text-default: #e6eee7; + --ds-color-success-base-default: #2e903d; + --ds-color-success-base-hover: #52a35e; + --ds-color-success-base-active: #77b780; + --ds-color-success-base-contrast-subtle: #040c05; + --ds-color-success-base-contrast-default: #000000; + --ds-color-warning-background-default: #1e160e; + --ds-color-warning-background-tinted: #281e13; + --ds-color-warning-surface-default: #322618; + --ds-color-warning-surface-tinted: #392b1c; + --ds-color-warning-surface-hover: #433220; + --ds-color-warning-surface-active: #543f28; + --ds-color-warning-border-subtle: #644b30; + --ds-color-warning-border-default: #a27a4e; + --ds-color-warning-border-strong: #d29e65; + --ds-color-warning-text-subtle: #d29e65; + --ds-color-warning-text-default: #f8eada; + --ds-color-warning-base-default: #543816; + --ds-color-warning-base-hover: #6d491c; + --ds-color-warning-base-active: #865a22; + --ds-color-warning-base-contrast-subtle: #dcd6cf; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-danger-background-default: #2b100d; + --ds-color-danger-background-tinted: #381411; + --ds-color-danger-surface-default: #461a15; + --ds-color-danger-surface-tinted: #511d18; + --ds-color-danger-surface-hover: #5e221c; + --ds-color-danger-surface-active: #752b23; + --ds-color-danger-border-subtle: #8b332a; + --ds-color-danger-border-default: #ca6258; + --ds-color-danger-border-strong: #db968f; + --ds-color-danger-text-subtle: #db968f; + --ds-color-danger-text-default: #f8e9e8; + --ds-color-danger-base-default: #e44d4d; + --ds-color-danger-base-hover: #ea7171; + --ds-color-danger-base-active: #ef9393; + --ds-color-danger-base-contrast-subtle: #1c0a0a; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-focus-inner: #191816; + --ds-color-focus-outer: #f0ece8; + --ds-link-color-visited: #b49acd; + + color-scheme: dark; +} + +@media (prefers-color-scheme: dark) { + [data-color-scheme="auto"] { + --ds-color-accent-background-default: #0b182b; + --ds-color-accent-background-tinted: #0f1f39; + --ds-color-accent-surface-default: #132848; + --ds-color-accent-surface-tinted: #152e53; + --ds-color-accent-surface-hover: #193560; + --ds-color-accent-surface-active: #1f4279; + --ds-color-accent-border-subtle: #254f90; + --ds-color-accent-border-default: #6382b4; + --ds-color-accent-border-strong: #93a9cb; + --ds-color-accent-text-subtle: #93a9cb; + --ds-color-accent-text-default: #e8edf4; + --ds-color-accent-base-default: #78a1d6; + --ds-color-accent-base-hover: #96b6df; + --ds-color-accent-base-active: #b5cbe9; + --ds-color-accent-base-contrast-subtle: #0d1117; + --ds-color-accent-base-contrast-default: #000000; + --ds-color-neutral-background-default: #191816; + --ds-color-neutral-background-tinted: #211f1d; + --ds-color-neutral-surface-default: #2a2725; + --ds-color-neutral-surface-tinted: #302d2b; + --ds-color-neutral-surface-hover: #383532; + --ds-color-neutral-surface-active: #46423e; + --ds-color-neutral-border-subtle: #544f4a; + --ds-color-neutral-border-default: #888078; + --ds-color-neutral-border-strong: #b0a69c; + --ds-color-neutral-text-subtle: #b0a69c; + --ds-color-neutral-text-default: #f0ece8; + --ds-color-neutral-base-default: #35302c; + --ds-color-neutral-base-hover: #48423c; + --ds-color-neutral-base-active: #5b544d; + --ds-color-neutral-base-contrast-subtle: #c8c7c6; + --ds-color-neutral-base-contrast-default: #ffffff; + --ds-color-support-color-1-background-default: #1b1712; + --ds-color-support-color-1-background-tinted: #231f18; + --ds-color-support-color-1-surface-default: #2d271e; + --ds-color-support-color-1-surface-tinted: #332d22; + --ds-color-support-color-1-surface-hover: #3c3428; + --ds-color-support-color-1-surface-active: #4b4232; + --ds-color-support-color-1-border-subtle: #594f3c; + --ds-color-support-color-1-border-default: #917f61; + --ds-color-support-color-1-border-strong: #bca57e; + --ds-color-support-color-1-text-subtle: #bca57e; + --ds-color-support-color-1-text-default: #f6ebd9; + --ds-color-support-color-1-base-default: #322a1b; + --ds-color-support-color-1-base-hover: #463a26; + --ds-color-support-color-1-base-active: #5c4d32; + --ds-color-support-color-1-base-contrast-subtle: #c1bfba; + --ds-color-support-color-1-base-contrast-default: #ffffff; + --ds-color-support-color-2-background-default: #1b1718; + --ds-color-support-color-2-background-tinted: #231e20; + --ds-color-support-color-2-surface-default: #2d2628; + --ds-color-support-color-2-surface-tinted: #332c2e; + --ds-color-support-color-2-surface-hover: #3c3336; + --ds-color-support-color-2-surface-active: #4b4044; + --ds-color-support-color-2-border-subtle: #5a4d51; + --ds-color-support-color-2-border-default: #917c83; + --ds-color-support-color-2-border-strong: #bca1aa; + --ds-color-support-color-2-text-subtle: #bca1aa; + --ds-color-support-color-2-text-default: #f5e9ed; + --ds-color-support-color-2-base-default: #352a2e; + --ds-color-support-color-2-base-hover: #4a3b40; + --ds-color-support-color-2-base-active: #604d53; + --ds-color-support-color-2-base-contrast-subtle: #c4c1c2; + --ds-color-support-color-2-base-contrast-default: #ffffff; + --ds-color-support-color-3-background-default: #0e1b0d; + --ds-color-support-color-3-background-tinted: #122311; + --ds-color-support-color-3-surface-default: #172d15; + --ds-color-support-color-3-surface-tinted: #1a3318; + --ds-color-support-color-3-surface-hover: #1f3c1d; + --ds-color-support-color-3-surface-active: #2f492d; + --ds-color-support-color-3-border-subtle: #3d563b; + --ds-color-support-color-3-border-default: #748673; + --ds-color-support-color-3-border-strong: #9fab9e; + --ds-color-support-color-3-text-subtle: #9fab9e; + --ds-color-support-color-3-text-default: #eaedea; + --ds-color-support-color-3-base-default: #9db09c; + --ds-color-support-color-3-base-hover: #859c83; + --ds-color-support-color-3-base-active: #6c886a; + --ds-color-support-color-3-base-contrast-subtle: #191c19; + --ds-color-support-color-3-base-contrast-default: #000000; + --ds-color-info-background-default: #151819; + --ds-color-info-background-tinted: #1c2020; + --ds-color-info-surface-default: #242929; + --ds-color-info-surface-tinted: #292f2f; + --ds-color-info-surface-hover: #303737; + --ds-color-info-surface-active: #3c4545; + --ds-color-info-border-subtle: #485253; + --ds-color-info-border-default: #748486; + --ds-color-info-border-strong: #97acad; + --ds-color-info-text-subtle: #97acad; + --ds-color-info-text-default: #e5eeef; + --ds-color-info-base-default: #273030; + --ds-color-info-base-hover: #374243; + --ds-color-info-base-active: #465556; + --ds-color-info-base-contrast-subtle: #c2c5c5; + --ds-color-info-base-contrast-default: #ffffff; + --ds-color-success-background-default: #0d1b0e; + --ds-color-success-background-tinted: #122312; + --ds-color-success-surface-default: #162d17; + --ds-color-success-surface-tinted: #1a331b; + --ds-color-success-surface-hover: #1e3c1f; + --ds-color-success-surface-active: #264b27; + --ds-color-success-border-subtle: #2d5a2e; + --ds-color-success-border-default: #588e5a; + --ds-color-success-border-strong: #8cb18d; + --ds-color-success-text-subtle: #8cb18d; + --ds-color-success-text-default: #e6eee7; + --ds-color-success-base-default: #2e903d; + --ds-color-success-base-hover: #52a35e; + --ds-color-success-base-active: #77b780; + --ds-color-success-base-contrast-subtle: #040c05; + --ds-color-success-base-contrast-default: #000000; + --ds-color-warning-background-default: #1e160e; + --ds-color-warning-background-tinted: #281e13; + --ds-color-warning-surface-default: #322618; + --ds-color-warning-surface-tinted: #392b1c; + --ds-color-warning-surface-hover: #433220; + --ds-color-warning-surface-active: #543f28; + --ds-color-warning-border-subtle: #644b30; + --ds-color-warning-border-default: #a27a4e; + --ds-color-warning-border-strong: #d29e65; + --ds-color-warning-text-subtle: #d29e65; + --ds-color-warning-text-default: #f8eada; + --ds-color-warning-base-default: #543816; + --ds-color-warning-base-hover: #6d491c; + --ds-color-warning-base-active: #865a22; + --ds-color-warning-base-contrast-subtle: #dcd6cf; + --ds-color-warning-base-contrast-default: #ffffff; + --ds-color-danger-background-default: #2b100d; + --ds-color-danger-background-tinted: #381411; + --ds-color-danger-surface-default: #461a15; + --ds-color-danger-surface-tinted: #511d18; + --ds-color-danger-surface-hover: #5e221c; + --ds-color-danger-surface-active: #752b23; + --ds-color-danger-border-subtle: #8b332a; + --ds-color-danger-border-default: #ca6258; + --ds-color-danger-border-strong: #db968f; + --ds-color-danger-text-subtle: #db968f; + --ds-color-danger-text-default: #f8e9e8; + --ds-color-danger-base-default: #e44d4d; + --ds-color-danger-base-hover: #ea7171; + --ds-color-danger-base-active: #ef9393; + --ds-color-danger-base-contrast-subtle: #1c0a0a; + --ds-color-danger-base-contrast-default: #000000; + --ds-color-focus-inner: #191816; + --ds-color-focus-outer: #f0ece8; + --ds-link-color-visited: #b49acd; + + color-scheme: dark; +} + +} + +} + +@layer ds.theme.typography.primary { +:root, [data-typography="primary"] { + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-letter-spacing-1: -0.01em; + --ds-letter-spacing-2: -0.005em; + --ds-letter-spacing-3: -0.0025em; + --ds-letter-spacing-4: -0.0015em; + --ds-letter-spacing-5: 0em; + --ds-letter-spacing-6: 0.0015em; + --ds-letter-spacing-7: 0.0025em; + --ds-letter-spacing-8: 0.005em; + --ds-letter-spacing-9: 0.015em; + --ds-font-family: Open Sans; + --ds-font-weight-medium: 500; + --ds-font-weight-semibold: 600; + --ds-font-weight-regular: 400; + --ds-heading-2xl-font-weight: 500; + --ds-heading-2xl-line-height: 1.3; + --ds-heading-2xl-letter-spacing: -0.01em; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-letter-spacing: -0.01em; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-letter-spacing: -0.005em; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-letter-spacing: -0.0025em; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-letter-spacing: 0em; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-letter-spacing: 0.0015em; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-letter-spacing: 0.0015em; + --ds-body-xl-font-weight: 400; + --ds-body-xl-line-height: 1.5; + --ds-body-xl-letter-spacing: 0.005em; + --ds-body-lg-font-weight: 400; + --ds-body-lg-line-height: 1.5; + --ds-body-lg-letter-spacing: 0.005em; + --ds-body-md-font-weight: 400; + --ds-body-md-line-height: 1.5; + --ds-body-md-letter-spacing: 0.005em; + --ds-body-sm-font-weight: 400; + --ds-body-sm-line-height: 1.5; + --ds-body-sm-letter-spacing: 0.0025em; + --ds-body-xs-font-weight: 400; + --ds-body-xs-line-height: 1.5; + --ds-body-xs-letter-spacing: 0.0015em; + --ds-body-short-xl-font-weight: 400; + --ds-body-short-xl-line-height: 1.3; + --ds-body-short-xl-letter-spacing: 0.005em; + --ds-body-short-lg-font-weight: 400; + --ds-body-short-lg-line-height: 1.3; + --ds-body-short-lg-letter-spacing: 0.005em; + --ds-body-short-md-font-weight: 400; + --ds-body-short-md-line-height: 1.3; + --ds-body-short-md-letter-spacing: 0.005em; + --ds-body-short-sm-font-weight: 400; + --ds-body-short-sm-line-height: 1.3; + --ds-body-short-sm-letter-spacing: 0.0025em; + --ds-body-short-xs-font-weight: 400; + --ds-body-short-xs-line-height: 1.3; + --ds-body-short-xs-letter-spacing: 0.0015em; + --ds-body-long-xl-font-weight: 400; + --ds-body-long-xl-line-height: 1.7; + --ds-body-long-xl-letter-spacing: 0.005em; + --ds-body-long-lg-font-weight: 400; + --ds-body-long-lg-line-height: 1.7; + --ds-body-long-lg-letter-spacing: 0.005em; + --ds-body-long-md-font-weight: 400; + --ds-body-long-md-line-height: 1.7; + --ds-body-long-md-letter-spacing: 0.005em; + --ds-body-long-sm-font-weight: 400; + --ds-body-long-sm-line-height: 1.7; + --ds-body-long-sm-letter-spacing: 0.0025em; + --ds-body-long-xs-font-weight: 400; + --ds-body-long-xs-line-height: 1.7; + --ds-body-long-xs-letter-spacing: 0.0015em; +} +} +@layer ds.theme.color { +:root, [data-color-scheme], [data-color="accent"] { + --ds-color-background-default: var(--ds-color-accent-background-default); + --ds-color-background-tinted: var(--ds-color-accent-background-tinted); + --ds-color-surface-default: var(--ds-color-accent-surface-default); + --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted); + --ds-color-surface-hover: var(--ds-color-accent-surface-hover); + --ds-color-surface-active: var(--ds-color-accent-surface-active); + --ds-color-border-subtle: var(--ds-color-accent-border-subtle); + --ds-color-border-default: var(--ds-color-accent-border-default); + --ds-color-border-strong: var(--ds-color-accent-border-strong); + --ds-color-text-subtle: var(--ds-color-accent-text-subtle); + --ds-color-text-default: var(--ds-color-accent-text-default); + --ds-color-base-default: var(--ds-color-accent-base-default); + --ds-color-base-hover: var(--ds-color-accent-base-hover); + --ds-color-base-active: var(--ds-color-accent-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="danger"], [data-color-scheme][data-color="danger"] { + --ds-color-background-default: var(--ds-color-danger-background-default); + --ds-color-background-tinted: var(--ds-color-danger-background-tinted); + --ds-color-surface-default: var(--ds-color-danger-surface-default); + --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted); + --ds-color-surface-hover: var(--ds-color-danger-surface-hover); + --ds-color-surface-active: var(--ds-color-danger-surface-active); + --ds-color-border-subtle: var(--ds-color-danger-border-subtle); + --ds-color-border-default: var(--ds-color-danger-border-default); + --ds-color-border-strong: var(--ds-color-danger-border-strong); + --ds-color-text-subtle: var(--ds-color-danger-text-subtle); + --ds-color-text-default: var(--ds-color-danger-text-default); + --ds-color-base-default: var(--ds-color-danger-base-default); + --ds-color-base-hover: var(--ds-color-danger-base-hover); + --ds-color-base-active: var(--ds-color-danger-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="info"], [data-color-scheme][data-color="info"] { + --ds-color-background-default: var(--ds-color-info-background-default); + --ds-color-background-tinted: var(--ds-color-info-background-tinted); + --ds-color-surface-default: var(--ds-color-info-surface-default); + --ds-color-surface-tinted: var(--ds-color-info-surface-tinted); + --ds-color-surface-hover: var(--ds-color-info-surface-hover); + --ds-color-surface-active: var(--ds-color-info-surface-active); + --ds-color-border-subtle: var(--ds-color-info-border-subtle); + --ds-color-border-default: var(--ds-color-info-border-default); + --ds-color-border-strong: var(--ds-color-info-border-strong); + --ds-color-text-subtle: var(--ds-color-info-text-subtle); + --ds-color-text-default: var(--ds-color-info-text-default); + --ds-color-base-default: var(--ds-color-info-base-default); + --ds-color-base-hover: var(--ds-color-info-base-hover); + --ds-color-base-active: var(--ds-color-info-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="neutral"], [data-color-scheme][data-color="neutral"] { + --ds-color-background-default: var(--ds-color-neutral-background-default); + --ds-color-background-tinted: var(--ds-color-neutral-background-tinted); + --ds-color-surface-default: var(--ds-color-neutral-surface-default); + --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted); + --ds-color-surface-hover: var(--ds-color-neutral-surface-hover); + --ds-color-surface-active: var(--ds-color-neutral-surface-active); + --ds-color-border-subtle: var(--ds-color-neutral-border-subtle); + --ds-color-border-default: var(--ds-color-neutral-border-default); + --ds-color-border-strong: var(--ds-color-neutral-border-strong); + --ds-color-text-subtle: var(--ds-color-neutral-text-subtle); + --ds-color-text-default: var(--ds-color-neutral-text-default); + --ds-color-base-default: var(--ds-color-neutral-base-default); + --ds-color-base-hover: var(--ds-color-neutral-base-hover); + --ds-color-base-active: var(--ds-color-neutral-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="success"], [data-color-scheme][data-color="success"] { + --ds-color-background-default: var(--ds-color-success-background-default); + --ds-color-background-tinted: var(--ds-color-success-background-tinted); + --ds-color-surface-default: var(--ds-color-success-surface-default); + --ds-color-surface-tinted: var(--ds-color-success-surface-tinted); + --ds-color-surface-hover: var(--ds-color-success-surface-hover); + --ds-color-surface-active: var(--ds-color-success-surface-active); + --ds-color-border-subtle: var(--ds-color-success-border-subtle); + --ds-color-border-default: var(--ds-color-success-border-default); + --ds-color-border-strong: var(--ds-color-success-border-strong); + --ds-color-text-subtle: var(--ds-color-success-text-subtle); + --ds-color-text-default: var(--ds-color-success-text-default); + --ds-color-base-default: var(--ds-color-success-base-default); + --ds-color-base-hover: var(--ds-color-success-base-hover); + --ds-color-base-active: var(--ds-color-success-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="support-color-1"], [data-color-scheme][data-color="support-color-1"] { + --ds-color-background-default: var(--ds-color-support-color-1-background-default); + --ds-color-background-tinted: var(--ds-color-support-color-1-background-tinted); + --ds-color-surface-default: var(--ds-color-support-color-1-surface-default); + --ds-color-surface-tinted: var(--ds-color-support-color-1-surface-tinted); + --ds-color-surface-hover: var(--ds-color-support-color-1-surface-hover); + --ds-color-surface-active: var(--ds-color-support-color-1-surface-active); + --ds-color-border-subtle: var(--ds-color-support-color-1-border-subtle); + --ds-color-border-default: var(--ds-color-support-color-1-border-default); + --ds-color-border-strong: var(--ds-color-support-color-1-border-strong); + --ds-color-text-subtle: var(--ds-color-support-color-1-text-subtle); + --ds-color-text-default: var(--ds-color-support-color-1-text-default); + --ds-color-base-default: var(--ds-color-support-color-1-base-default); + --ds-color-base-hover: var(--ds-color-support-color-1-base-hover); + --ds-color-base-active: var(--ds-color-support-color-1-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-support-color-1-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-support-color-1-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="support-color-2"], [data-color-scheme][data-color="support-color-2"] { + --ds-color-background-default: var(--ds-color-support-color-2-background-default); + --ds-color-background-tinted: var(--ds-color-support-color-2-background-tinted); + --ds-color-surface-default: var(--ds-color-support-color-2-surface-default); + --ds-color-surface-tinted: var(--ds-color-support-color-2-surface-tinted); + --ds-color-surface-hover: var(--ds-color-support-color-2-surface-hover); + --ds-color-surface-active: var(--ds-color-support-color-2-surface-active); + --ds-color-border-subtle: var(--ds-color-support-color-2-border-subtle); + --ds-color-border-default: var(--ds-color-support-color-2-border-default); + --ds-color-border-strong: var(--ds-color-support-color-2-border-strong); + --ds-color-text-subtle: var(--ds-color-support-color-2-text-subtle); + --ds-color-text-default: var(--ds-color-support-color-2-text-default); + --ds-color-base-default: var(--ds-color-support-color-2-base-default); + --ds-color-base-hover: var(--ds-color-support-color-2-base-hover); + --ds-color-base-active: var(--ds-color-support-color-2-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-support-color-2-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-support-color-2-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="support-color-3"], [data-color-scheme][data-color="support-color-3"] { + --ds-color-background-default: var(--ds-color-support-color-3-background-default); + --ds-color-background-tinted: var(--ds-color-support-color-3-background-tinted); + --ds-color-surface-default: var(--ds-color-support-color-3-surface-default); + --ds-color-surface-tinted: var(--ds-color-support-color-3-surface-tinted); + --ds-color-surface-hover: var(--ds-color-support-color-3-surface-hover); + --ds-color-surface-active: var(--ds-color-support-color-3-surface-active); + --ds-color-border-subtle: var(--ds-color-support-color-3-border-subtle); + --ds-color-border-default: var(--ds-color-support-color-3-border-default); + --ds-color-border-strong: var(--ds-color-support-color-3-border-strong); + --ds-color-text-subtle: var(--ds-color-support-color-3-text-subtle); + --ds-color-text-default: var(--ds-color-support-color-3-text-default); + --ds-color-base-default: var(--ds-color-support-color-3-base-default); + --ds-color-base-hover: var(--ds-color-support-color-3-base-hover); + --ds-color-base-active: var(--ds-color-support-color-3-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-support-color-3-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-support-color-3-base-contrast-default); +} + +} + +@layer ds.theme.color { +[data-color="warning"], [data-color-scheme][data-color="warning"] { + --ds-color-background-default: var(--ds-color-warning-background-default); + --ds-color-background-tinted: var(--ds-color-warning-background-tinted); + --ds-color-surface-default: var(--ds-color-warning-surface-default); + --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted); + --ds-color-surface-hover: var(--ds-color-warning-surface-hover); + --ds-color-surface-active: var(--ds-color-warning-surface-active); + --ds-color-border-subtle: var(--ds-color-warning-border-subtle); + --ds-color-border-default: var(--ds-color-warning-border-default); + --ds-color-border-strong: var(--ds-color-warning-border-strong); + --ds-color-text-subtle: var(--ds-color-warning-text-subtle); + --ds-color-text-default: var(--ds-color-warning-text-default); + --ds-color-base-default: var(--ds-color-warning-base-default); + --ds-color-base-hover: var(--ds-color-warning-base-hover); + --ds-color-base-active: var(--ds-color-warning-base-active); + --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle); + --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default); +} + +} diff --git a/design-tokens-build/types.d.ts b/design-tokens-build/types.d.ts new file mode 100644 index 0000000..adb8d09 --- /dev/null +++ b/design-tokens-build/types.d.ts @@ -0,0 +1,19 @@ +/* build: v1.11.0 */ +import type {} from '@digdir/designsystemet-types'; + +// Augment types based on theme +declare module '@digdir/designsystemet-types' { + export interface ColorDefinitions { + accent: never; + 'support-color-1': never; + 'support-color-2': never; + 'support-color-3': never; + neutral: never; + } + export interface SeverityColorDefinitions { + info: never; + success: never; + warning: never; + danger: never; + } +} diff --git a/design-tokens/$metadata.json b/design-tokens/$metadata.json index 5ca66de..90bd258 100644 --- a/design-tokens/$metadata.json +++ b/design-tokens/$metadata.json @@ -15,12 +15,9 @@ "themes/ntnu", "semantic/color", "semantic/modes/main-color/accent", - "semantic/modes/main-color/base", - "semantic/modes/main-color/primary", - "semantic/modes/main-color/secondary", - "semantic/modes/support-color/vimu", - "semantic/modes/support-color/ub", - "semantic/modes/support-color/student", + "semantic/modes/support-color/support-color-1", + "semantic/modes/support-color/support-color-2", + "semantic/modes/support-color/support-color-3", "semantic/style" ] } \ No newline at end of file diff --git a/design-tokens/$themes.json b/design-tokens/$themes.json index 2f6f474..cd04a40 100644 --- a/design-tokens/$themes.json +++ b/design-tokens/$themes.json @@ -109,50 +109,26 @@ "group": "Main color" }, { - "id": "d3d13a7b4bd42efbfa75922c54630b9bb6bdd56d", - "name": "base", + "id": "3be8e16ad743ddaea63802d50e1390bc0ec51c9e", + "name": "support-color-1", "selectedTokenSets": { - "semantic/modes/main-color/base": "enabled" - }, - "group": "Main color" - }, - { - "id": "593774a74235b661fff40693ca7bda160aadfb74", - "name": "primary", - "selectedTokenSets": { - "semantic/modes/main-color/primary": "enabled" - }, - "group": "Main color" - }, - { - "id": "e610f39341776da3131ab35ba751b53d9a14b80a", - "name": "secondary", - "selectedTokenSets": { - "semantic/modes/main-color/secondary": "enabled" - }, - "group": "Main color" - }, - { - "id": "4de07c8fb02a00a2278ea6bc04c6b2ed79c13b9c", - "name": "vimu", - "selectedTokenSets": { - "semantic/modes/support-color/vimu": "enabled" + "semantic/modes/support-color/support-color-1": "enabled" }, "group": "Support color" }, { - "id": "e7306b49409eb94d27ce9a52e22fe4809f8a0708", - "name": "ub", + "id": "14535e7d44b0dbab359d5d951a6f39119246090d", + "name": "support-color-2", "selectedTokenSets": { - "semantic/modes/support-color/ub": "enabled" + "semantic/modes/support-color/support-color-2": "enabled" }, "group": "Support color" }, { - "id": "da1649bc0c9a5da02f9a397759175a21171d9577", - "name": "student", + "id": "83179fe40ba1746d1fd4a64c853b7fec54aa08ed", + "name": "support-color-3", "selectedTokenSets": { - "semantic/modes/support-color/student": "enabled" + "semantic/modes/support-color/support-color-3": "enabled" }, "group": "Support color" } diff --git a/design-tokens/primitives/modes/color-scheme/dark/ntnu.json b/design-tokens/primitives/modes/color-scheme/dark/ntnu.json index 77b5c09..4d9b1fb 100644 --- a/design-tokens/primitives/modes/color-scheme/dark/ntnu.json +++ b/design-tokens/primitives/modes/color-scheme/dark/ntnu.json @@ -3,459 +3,261 @@ "accent": { "1": { "$type": "color", - "$value": "#0b1828" + "$value": "#0b182b" }, "2": { "$type": "color", - "$value": "#0f2035" + "$value": "#0f1f39" }, "3": { "$type": "color", - "$value": "#132943" + "$value": "#132848" }, "4": { "$type": "color", - "$value": "#162f4c" + "$value": "#152e53" }, "5": { "$type": "color", - "$value": "#1a3659" + "$value": "#193560" }, "6": { "$type": "color", - "$value": "#20446f" + "$value": "#1f4279" }, "7": { "$type": "color", - "$value": "#265185" + "$value": "#254f90" }, "8": { "$type": "color", - "$value": "#6484aa" + "$value": "#6382b4" }, "9": { "$type": "color", - "$value": "#94aac4" + "$value": "#93a9cb" }, "10": { "$type": "color", - "$value": "#94aac4" + "$value": "#93a9cb" }, "11": { "$type": "color", - "$value": "#e8edf2" + "$value": "#e8edf4" }, "12": { "$type": "color", - "$value": "#79a3cc" + "$value": "#78a1d6" }, "13": { "$type": "color", - "$value": "#5b8ec0" + "$value": "#96b6df" }, "14": { "$type": "color", - "$value": "#3d7ab5" + "$value": "#b5cbe9" }, "15": { "$type": "color", - "$value": "#0e1317" + "$value": "#0d1117" }, "16": { "$type": "color", "$value": "#000000" } }, - "base": { + "support-color-1": { "1": { "$type": "color", - "$value": "#171818" + "$value": "#1b1712" }, "2": { "$type": "color", - "$value": "#1f2020" + "$value": "#231f18" }, "3": { "$type": "color", - "$value": "#272829" + "$value": "#2d271e" }, "4": { "$type": "color", - "$value": "#2d2e2f" + "$value": "#332d22" }, "5": { "$type": "color", - "$value": "#343637" + "$value": "#3c3428" }, "6": { "$type": "color", - "$value": "#424345" + "$value": "#4b4232" }, "7": { "$type": "color", - "$value": "#4e5052" + "$value": "#594f3c" }, "8": { "$type": "color", - "$value": "#7e8284" + "$value": "#917f61" }, "9": { "$type": "color", - "$value": "#a4a8ac" + "$value": "#bca57e" }, "10": { "$type": "color", - "$value": "#a4a8ac" + "$value": "#bca57e" }, "11": { "$type": "color", - "$value": "#e7edf2" + "$value": "#f6ebd9" }, "12": { "$type": "color", - "$value": "#0a0a0a" + "$value": "#322a1b" }, "13": { "$type": "color", - "$value": "#1c1d1e" + "$value": "#463a26" }, "14": { "$type": "color", - "$value": "#2d2e30" + "$value": "#5c4d32" }, "15": { "$type": "color", - "$value": "#989898" + "$value": "#c1bfba" }, "16": { "$type": "color", "$value": "#ffffff" } }, - "primary": { + "support-color-2": { "1": { "$type": "color", - "$value": "#0b1828" + "$value": "#1b1718" }, "2": { "$type": "color", - "$value": "#0f2035" + "$value": "#231e20" }, "3": { "$type": "color", - "$value": "#132943" + "$value": "#2d2628" }, "4": { "$type": "color", - "$value": "#162f4c" + "$value": "#332c2e" }, "5": { "$type": "color", - "$value": "#1a3659" + "$value": "#3c3336" }, "6": { "$type": "color", - "$value": "#20446f" + "$value": "#4b4044" }, "7": { "$type": "color", - "$value": "#265185" + "$value": "#5a4d51" }, "8": { "$type": "color", - "$value": "#6484aa" + "$value": "#917c83" }, "9": { "$type": "color", - "$value": "#94aac4" + "$value": "#bca1aa" }, "10": { "$type": "color", - "$value": "#94aac4" + "$value": "#bca1aa" }, "11": { "$type": "color", - "$value": "#e8edf2" + "$value": "#f5e9ed" }, "12": { "$type": "color", - "$value": "#79a3cc" + "$value": "#352a2e" }, "13": { "$type": "color", - "$value": "#5b8ec0" + "$value": "#4a3b40" }, "14": { "$type": "color", - "$value": "#3d7ab5" + "$value": "#604d53" }, "15": { "$type": "color", - "$value": "#0e1317" - }, - "16": { - "$type": "color", - "$value": "#000000" - } - }, - "secondary": { - "1": { - "$type": "color", - "$value": "#22150c" - }, - "2": { - "$type": "color", - "$value": "#2d1c10" - }, - "3": { - "$type": "color", - "$value": "#392314" - }, - "4": { - "$type": "color", - "$value": "#412817" - }, - "5": { - "$type": "color", - "$value": "#4c2f1a" - }, - "6": { - "$type": "color", - "$value": "#5f3a21" - }, - "7": { - "$type": "color", - "$value": "#714628" - }, - "8": { - "$type": "color", - "$value": "#a47859" - }, - "9": { - "$type": "color", - "$value": "#c1a28d" - }, - "10": { - "$type": "color", - "$value": "#c1a28d" - }, - "11": { - "$type": "color", - "$value": "#f2ebe7" - }, - "12": { - "$type": "color", - "$value": "#b87e44" - }, - "13": { - "$type": "color", - "$value": "#c59667" - }, - "14": { - "$type": "color", - "$value": "#d3af8b" - }, - "15": { - "$type": "color", - "$value": "#1f150b" - }, - "16": { - "$type": "color", - "$value": "#000000" - } - }, - "vimu": { - "1": { - "$type": "color", - "$value": "#1b180c" - }, - "2": { - "$type": "color", - "$value": "#241f10" - }, - "3": { - "$type": "color", - "$value": "#2d2815" - }, - "4": { - "$type": "color", - "$value": "#342d18" - }, - "5": { - "$type": "color", - "$value": "#3c351c" - }, - "6": { - "$type": "color", - "$value": "#4c4223" - }, - "7": { - "$type": "color", - "$value": "#5a4f29" - }, - "8": { - "$type": "color", - "$value": "#928043" - }, - "9": { - "$type": "color", - "$value": "#bea657" - }, - "10": { - "$type": "color", - "$value": "#bea657" - }, - "11": { - "$type": "color", - "$value": "#faecbe" - }, - "12": { - "$type": "color", - "$value": "#2b2400" - }, - "13": { - "$type": "color", - "$value": "#403400" - }, - "14": { - "$type": "color", - "$value": "#554600" - }, - "15": { - "$type": "color", - "$value": "#bab7ac" + "$value": "#c4c1c2" }, "16": { "$type": "color", "$value": "#ffffff" } }, - "ub": { - "1": { - "$type": "color", - "$value": "#10191a" - }, - "2": { - "$type": "color", - "$value": "#152222" - }, - "3": { - "$type": "color", - "$value": "#1b2a2b" - }, - "4": { - "$type": "color", - "$value": "#1f3131" - }, - "5": { - "$type": "color", - "$value": "#24393a" - }, - "6": { - "$type": "color", - "$value": "#2e4748" - }, - "7": { - "$type": "color", - "$value": "#365556" - }, - "8": { - "$type": "color", - "$value": "#6f8586" - }, - "9": { - "$type": "color", - "$value": "#9babab" - }, - "10": { - "$type": "color", - "$value": "#9babab" - }, - "11": { - "$type": "color", - "$value": "#eaeded" - }, - "12": { - "$type": "color", - "$value": "#8aa4a5" - }, - "13": { - "$type": "color", - "$value": "#709091" - }, - "14": { - "$type": "color", - "$value": "#577d7e" - }, - "15": { - "$type": "color", - "$value": "#101313" - }, - "16": { - "$type": "color", - "$value": "#000000" - } - }, - "student": { + "support-color-3": { "1": { "$type": "color", - "$value": "#0e191f" + "$value": "#0e1b0d" }, "2": { "$type": "color", - "$value": "#122129" + "$value": "#122311" }, "3": { "$type": "color", - "$value": "#172a33" + "$value": "#172d15" }, "4": { "$type": "color", - "$value": "#1a313b" + "$value": "#1a3318" }, "5": { "$type": "color", - "$value": "#1f3945" + "$value": "#1f3c1d" }, "6": { "$type": "color", - "$value": "#264756" + "$value": "#2f492d" }, "7": { "$type": "color", - "$value": "#2e5567" + "$value": "#3d563b" }, "8": { "$type": "color", - "$value": "#5488a0" + "$value": "#748673" }, "9": { "$type": "color", - "$value": "#89adbe" + "$value": "#9fab9e" }, "10": { "$type": "color", - "$value": "#89adbe" + "$value": "#9fab9e" }, "11": { "$type": "color", - "$value": "#e6edf1" + "$value": "#eaedea" }, "12": { "$type": "color", - "$value": "#2081a8" + "$value": "#9db09c" }, "13": { "$type": "color", - "$value": "#4696b7" + "$value": "#859c83" }, "14": { "$type": "color", - "$value": "#6aabc5" + "$value": "#6c886a" }, "15": { "$type": "color", - "$value": "#010203" + "$value": "#191c19" }, "16": { "$type": "color", @@ -465,129 +267,129 @@ "neutral": { "1": { "$type": "color", - "$value": "#181818" + "$value": "#191816" }, "2": { "$type": "color", - "$value": "#1f1f1f" + "$value": "#211f1d" }, "3": { "$type": "color", - "$value": "#282828" + "$value": "#2a2725" }, "4": { "$type": "color", - "$value": "#2e2e2e" + "$value": "#302d2b" }, "5": { "$type": "color", - "$value": "#353535" + "$value": "#383532" }, "6": { "$type": "color", - "$value": "#434343" + "$value": "#46423e" }, "7": { "$type": "color", - "$value": "#505050" + "$value": "#544f4a" }, "8": { "$type": "color", - "$value": "#818181" + "$value": "#888078" }, "9": { "$type": "color", - "$value": "#a8a8a8" + "$value": "#b0a69c" }, "10": { "$type": "color", - "$value": "#a8a8a8" + "$value": "#b0a69c" }, "11": { "$type": "color", - "$value": "#ececec" + "$value": "#f0ece8" }, "12": { "$type": "color", - "$value": "#ababab" + "$value": "#35302c" }, "13": { "$type": "color", - "$value": "#969696" + "$value": "#48423c" }, "14": { "$type": "color", - "$value": "#818181" + "$value": "#5b544d" }, "15": { "$type": "color", - "$value": "#1b1b1b" + "$value": "#c8c7c6" }, "16": { "$type": "color", - "$value": "#000000" + "$value": "#ffffff" } }, "info": { "1": { "$type": "color", - "$value": "#13181e" + "$value": "#151819" }, "2": { "$type": "color", - "$value": "#192027" + "$value": "#1c2020" }, "3": { "$type": "color", - "$value": "#1f2932" + "$value": "#242929" }, "4": { "$type": "color", - "$value": "#242f39" + "$value": "#292f2f" }, "5": { "$type": "color", - "$value": "#2a3742" + "$value": "#303737" }, "6": { "$type": "color", - "$value": "#344553" + "$value": "#3c4545" }, "7": { "$type": "color", - "$value": "#3e5264" + "$value": "#485253" }, "8": { "$type": "color", - "$value": "#6585a1" + "$value": "#748486" }, "9": { "$type": "color", - "$value": "#95abbe" + "$value": "#97acad" }, "10": { "$type": "color", - "$value": "#95abbe" + "$value": "#97acad" }, "11": { "$type": "color", - "$value": "#e8edf1" + "$value": "#e5eeef" }, "12": { "$type": "color", - "$value": "#497193" + "$value": "#273030" }, "13": { "$type": "color", - "$value": "#3c5d79" + "$value": "#374243" }, "14": { "$type": "color", - "$value": "#304a60" + "$value": "#465556" }, "15": { "$type": "color", - "$value": "#f1f4f7" + "$value": "#c2c5c5" }, "16": { "$type": "color", @@ -597,129 +399,129 @@ "success": { "1": { "$type": "color", - "$value": "#101a12" + "$value": "#0d1b0e" }, "2": { "$type": "color", - "$value": "#152318" + "$value": "#122312" }, "3": { "$type": "color", - "$value": "#1b2c1e" + "$value": "#162d17" }, "4": { "$type": "color", - "$value": "#1f3222" + "$value": "#1a331b" }, "5": { "$type": "color", - "$value": "#243a28" + "$value": "#1e3c1f" }, "6": { "$type": "color", - "$value": "#2d4932" + "$value": "#264b27" }, "7": { "$type": "color", - "$value": "#36583c" + "$value": "#2d5a2e" }, "8": { "$type": "color", - "$value": "#578d61" + "$value": "#588e5a" }, "9": { "$type": "color", - "$value": "#83b38c" + "$value": "#8cb18d" }, "10": { "$type": "color", - "$value": "#83b38c" + "$value": "#8cb18d" }, "11": { "$type": "color", - "$value": "#e5efe7" + "$value": "#e6eee7" }, "12": { "$type": "color", - "$value": "#2c693b" + "$value": "#2e903d" }, "13": { "$type": "color", - "$value": "#23542f" + "$value": "#52a35e" }, "14": { "$type": "color", - "$value": "#1b3f24" + "$value": "#77b780" }, "15": { "$type": "color", - "$value": "#fefefe" + "$value": "#040c05" }, "16": { "$type": "color", - "$value": "#ffffff" + "$value": "#000000" } }, "warning": { "1": { "$type": "color", - "$value": "#1e1611" + "$value": "#1e160e" }, "2": { "$type": "color", - "$value": "#281d17" + "$value": "#281e13" }, "3": { "$type": "color", - "$value": "#32251d" + "$value": "#322618" }, "4": { "$type": "color", - "$value": "#3a2b21" + "$value": "#392b1c" }, "5": { "$type": "color", - "$value": "#433226" + "$value": "#433220" }, "6": { "$type": "color", - "$value": "#543e30" + "$value": "#543f28" }, "7": { "$type": "color", - "$value": "#654a39" + "$value": "#644b30" }, "8": { "$type": "color", - "$value": "#a2785d" + "$value": "#a27a4e" }, "9": { "$type": "color", - "$value": "#ca9f83" + "$value": "#d29e65" }, "10": { "$type": "color", - "$value": "#ca9f83" + "$value": "#d29e65" }, "11": { "$type": "color", - "$value": "#f4ebe5" + "$value": "#f8eada" }, "12": { "$type": "color", - "$value": "#764e32" + "$value": "#543816" }, "13": { "$type": "color", - "$value": "#5d3d27" + "$value": "#6d491c" }, "14": { "$type": "color", - "$value": "#462e1d" + "$value": "#865a22" }, "15": { "$type": "color", - "$value": "#f8f6f4" + "$value": "#dcd6cf" }, "16": { "$type": "color", @@ -729,67 +531,67 @@ "danger": { "1": { "$type": "color", - "$value": "#241413" + "$value": "#2b100d" }, "2": { "$type": "color", - "$value": "#2f1a19" + "$value": "#381411" }, "3": { "$type": "color", - "$value": "#3b2020" + "$value": "#461a15" }, "4": { "$type": "color", - "$value": "#442524" + "$value": "#511d18" }, "5": { "$type": "color", - "$value": "#4f2b2a" + "$value": "#5e221c" }, "6": { "$type": "color", - "$value": "#633635" + "$value": "#752b23" }, "7": { "$type": "color", - "$value": "#76413f" + "$value": "#8b332a" }, "8": { "$type": "color", - "$value": "#bf6966" + "$value": "#ca6258" }, "9": { "$type": "color", - "$value": "#d69896" + "$value": "#db968f" }, "10": { "$type": "color", - "$value": "#d69896" + "$value": "#db968f" }, "11": { "$type": "color", - "$value": "#f6e9e9" + "$value": "#f8e9e8" }, "12": { "$type": "color", - "$value": "#b04949" + "$value": "#e44d4d" }, "13": { "$type": "color", - "$value": "#913c3c" + "$value": "#ea7171" }, "14": { "$type": "color", - "$value": "#722f2f" + "$value": "#ef9393" }, "15": { "$type": "color", - "$value": "#f8eeee" + "$value": "#1c0a0a" }, "16": { "$type": "color", - "$value": "#ffffff" + "$value": "#000000" } }, "link": { @@ -801,11 +603,11 @@ "focus": { "inner": { "$type": "color", - "$value": "#181818" + "$value": "#191816" }, "outer": { "$type": "color", - "$value": "#ececec" + "$value": "#f0ece8" } } } diff --git a/design-tokens/primitives/modes/color-scheme/light/ntnu.json b/design-tokens/primitives/modes/color-scheme/light/ntnu.json index 5de8d5d..06d5a47 100644 --- a/design-tokens/primitives/modes/color-scheme/light/ntnu.json +++ b/design-tokens/primitives/modes/color-scheme/light/ntnu.json @@ -7,7 +7,7 @@ }, "2": { "$type": "color", - "$value": "#eff4f9" + "$value": "#eff4fa" }, "3": { "$type": "color", @@ -15,65 +15,65 @@ }, "4": { "$type": "color", - "$value": "#e0eaf3" + "$value": "#e0e9f6" }, "5": { "$type": "color", - "$value": "#ccdcec" + "$value": "#ccdbf0" }, "6": { "$type": "color", - "$value": "#b6cde3" + "$value": "#b6cce9" }, "7": { "$type": "color", - "$value": "#a2bfdb" + "$value": "#a2bee3" }, "8": { "$type": "color", - "$value": "#417cb7" + "$value": "#407ac5" }, "9": { "$type": "color", - "$value": "#155ea6" + "$value": "#135bb8" }, "10": { "$type": "color", - "$value": "#155ea6" + "$value": "#135bb8" }, "11": { "$type": "color", - "$value": "#002c56" + "$value": "#002960" }, "12": { "$type": "color", - "$value": "#00509E" + "$value": "#004DB2" }, "13": { "$type": "color", - "$value": "#003e7a" + "$value": "#003c8b" }, "14": { "$type": "color", - "$value": "#002d59" + "$value": "#002c65" }, "15": { "$type": "color", - "$value": "#e9f0f7" + "$value": "#ecf2f9" }, "16": { "$type": "color", "$value": "#ffffff" } }, - "base": { + "support-color-1": { "1": { "$type": "color", "$value": "#ffffff" }, "2": { "$type": "color", - "$value": "#edf5fb" + "$value": "#fcf3e3" }, "3": { "$type": "color", @@ -81,65 +81,65 @@ }, "4": { "$type": "color", - "$value": "#e2e9f0" + "$value": "#f8e6c7" }, "5": { "$type": "color", - "$value": "#d4dbe1" + "$value": "#f4d6a2" }, "6": { "$type": "color", - "$value": "#c4cbd1" + "$value": "#ecc47f" }, "7": { "$type": "color", - "$value": "#b6bcc2" + "$value": "#dbb676" }, "8": { "$type": "color", - "$value": "#75797d" + "$value": "#8d754c" }, "9": { "$type": "color", - "$value": "#5b5e60" + "$value": "#6d5b3b" }, "10": { "$type": "color", - "$value": "#5b5e60" + "$value": "#6d5b3b" }, "11": { "$type": "color", - "$value": "#2a2c2d" + "$value": "#332a1b" }, "12": { "$type": "color", - "$value": "#f0f8ff" + "$value": "#F0C881" }, "13": { "$type": "color", - "$value": "#dae1e7" + "$value": "#d7b373" }, "14": { "$type": "color", - "$value": "#c4cbd1" + "$value": "#bd9e66" }, "15": { "$type": "color", - "$value": "#55575a" + "$value": "#3f3522" }, "16": { "$type": "color", "$value": "#000000" } }, - "primary": { + "support-color-2": { "1": { "$type": "color", "$value": "#ffffff" }, "2": { "$type": "color", - "$value": "#eff4f9" + "$value": "#fbf1f4" }, "3": { "$type": "color", @@ -147,197 +147,65 @@ }, "4": { "$type": "color", - "$value": "#e0eaf3" + "$value": "#f7e4ea" }, "5": { "$type": "color", - "$value": "#ccdcec" + "$value": "#f2d2dc" }, "6": { "$type": "color", - "$value": "#b6cde3" + "$value": "#ecbecd" }, "7": { "$type": "color", - "$value": "#a2bfdb" + "$value": "#dbb0be" }, "8": { "$type": "color", - "$value": "#417cb7" + "$value": "#8d727a" }, "9": { "$type": "color", - "$value": "#155ea6" + "$value": "#6d585f" }, "10": { "$type": "color", - "$value": "#155ea6" + "$value": "#6d585f" }, "11": { "$type": "color", - "$value": "#002c56" + "$value": "#33292c" }, "12": { "$type": "color", - "$value": "#00509E" + "$value": "#ECBECD" }, "13": { "$type": "color", - "$value": "#003e7a" + "$value": "#d2a9b7" }, "14": { "$type": "color", - "$value": "#002d59" + "$value": "#ba96a1" }, "15": { "$type": "color", - "$value": "#e9f0f7" - }, - "16": { - "$type": "color", - "$value": "#ffffff" - } - }, - "secondary": { - "1": { - "$type": "color", - "$value": "#ffffff" - }, - "2": { - "$type": "color", - "$value": "#f8f3ed" - }, - "3": { - "$type": "color", - "$value": "#ffffff" - }, - "4": { - "$type": "color", - "$value": "#f2e7dc" - }, - "5": { - "$type": "color", - "$value": "#e9d7c5" - }, - "6": { - "$type": "color", - "$value": "#e0c6ac" - }, - "7": { - "$type": "color", - "$value": "#d7b696" - }, - "8": { - "$type": "color", - "$value": "#ad6926" - }, - "9": { - "$type": "color", - "$value": "#944900" - }, - "10": { - "$type": "color", - "$value": "#944900" - }, - "11": { - "$type": "color", - "$value": "#462200" - }, - "12": { - "$type": "color", - "$value": "#9e4e00" - }, - "13": { - "$type": "color", - "$value": "#803f00" - }, - "14": { - "$type": "color", - "$value": "#633100" - }, - "15": { - "$type": "color", - "$value": "#f2e7dd" - }, - "16": { - "$type": "color", - "$value": "#ffffff" - } - }, - "vimu": { - "1": { - "$type": "color", - "$value": "#ffffff" - }, - "2": { - "$type": "color", - "$value": "#fff4c2" - }, - "3": { - "$type": "color", - "$value": "#ffffff" - }, - "4": { - "$type": "color", - "$value": "#ffe981" - }, - "5": { - "$type": "color", - "$value": "#ffd71d" - }, - "6": { - "$type": "color", - "$value": "#f0c600" - }, - "7": { - "$type": "color", - "$value": "#dfb800" - }, - "8": { - "$type": "color", - "$value": "#907700" - }, - "9": { - "$type": "color", - "$value": "#6f5c00" - }, - "10": { - "$type": "color", - "$value": "#6f5c00" - }, - "11": { - "$type": "color", - "$value": "#342b00" - }, - "12": { - "$type": "color", - "$value": "#ffd200" - }, - "13": { - "$type": "color", - "$value": "#e5bc00" - }, - "14": { - "$type": "color", - "$value": "#cba700" - }, - "15": { - "$type": "color", - "$value": "#493c00" + "$value": "#3c3034" }, "16": { "$type": "color", "$value": "#000000" } }, - "ub": { + "support-color-3": { "1": { "$type": "color", "$value": "#ffffff" }, "2": { "$type": "color", - "$value": "#f1f4f4" + "$value": "#f2f4f1" }, "3": { "$type": "color", @@ -345,117 +213,51 @@ }, "4": { "$type": "color", - "$value": "#e4eaea" + "$value": "#e5eae4" }, "5": { "$type": "color", - "$value": "#d2dcdc" + "$value": "#d4dcd3" }, "6": { "$type": "color", - "$value": "#becdcd" + "$value": "#c1cdc1" }, "7": { "$type": "color", - "$value": "#adbfc0" + "$value": "#b1c0b0" }, "8": { "$type": "color", - "$value": "#5a7f81" + "$value": "#628060" }, "9": { "$type": "color", - "$value": "#386466" + "$value": "#42663f" }, "10": { "$type": "color", - "$value": "#386466" + "$value": "#42663f" }, "11": { "$type": "color", - "$value": "#162f30" + "$value": "#0d330b" }, "12": { "$type": "color", - "$value": "#28585A" + "$value": "#103E0D" }, "13": { "$type": "color", - "$value": "#1f4445" + "$value": "#265024" }, "14": { "$type": "color", - "$value": "#163132" + "$value": "#3e633b" }, "15": { "$type": "color", - "$value": "#ecf0f0" - }, - "16": { - "$type": "color", - "$value": "#ffffff" - } - }, - "student": { - "1": { - "$type": "color", - "$value": "#ffffff" - }, - "2": { - "$type": "color", - "$value": "#edf5f8" - }, - "3": { - "$type": "color", - "$value": "#ffffff" - }, - "4": { - "$type": "color", - "$value": "#dcebf1" - }, - "5": { - "$type": "color", - "$value": "#c5dee8" - }, - "6": { - "$type": "color", - "$value": "#abd0de" - }, - "7": { - "$type": "color", - "$value": "#94c3d5" - }, - "8": { - "$type": "color", - "$value": "#2181a8" - }, - "9": { - "$type": "color", - "$value": "#156484" - }, - "10": { - "$type": "color", - "$value": "#156484" - }, - "11": { - "$type": "color", - "$value": "#0a2f3e" - }, - "12": { - "$type": "color", - "$value": "#1b7ea6" - }, - "13": { - "$type": "color", - "$value": "#4193b5" - }, - "14": { - "$type": "color", - "$value": "#65a8c3" - }, - "15": { - "$type": "color", - "$value": "#fcfdfe" + "$value": "#c5d0c4" }, "16": { "$type": "color", @@ -469,7 +271,7 @@ }, "2": { "$type": "color", - "$value": "#f3f3f3" + "$value": "#f6f3f0" }, "3": { "$type": "color", @@ -477,55 +279,55 @@ }, "4": { "$type": "color", - "$value": "#e8e8e8" + "$value": "#eee7e1" }, "5": { "$type": "color", - "$value": "#dadada" + "$value": "#e3d8cd" }, "6": { "$type": "color", - "$value": "#cacaca" + "$value": "#d7c7b8" }, "7": { "$type": "color", - "$value": "#bcbcbc" + "$value": "#c9b9a9" }, "8": { "$type": "color", - "$value": "#797979" + "$value": "#81776d" }, "9": { "$type": "color", - "$value": "#5d5d5d" + "$value": "#645c54" }, "10": { "$type": "color", - "$value": "#5d5d5d" + "$value": "#645c54" }, "11": { "$type": "color", - "$value": "#2b2b2b" + "$value": "#2e2b27" }, "12": { "$type": "color", - "$value": "#262626" + "$value": "#D4C3B2" }, "13": { "$type": "color", - "$value": "#373737" + "$value": "#bdae9f" }, "14": { "$type": "color", - "$value": "#494949" + "$value": "#a5988b" }, "15": { "$type": "color", - "$value": "#b9b9b9" + "$value": "#332f2b" }, "16": { "$type": "color", - "$value": "#ffffff" + "$value": "#000000" } }, "info": { @@ -535,7 +337,7 @@ }, "2": { "$type": "color", - "$value": "#f0f4f8" + "$value": "#edf5f6" }, "3": { "$type": "color", @@ -543,51 +345,51 @@ }, "4": { "$type": "color", - "$value": "#e1eaf1" + "$value": "#dcebed" }, "5": { "$type": "color", - "$value": "#cedce7" + "$value": "#c6dfe1" }, "6": { "$type": "color", - "$value": "#b9cddd" + "$value": "#add1d4" }, "7": { "$type": "color", - "$value": "#a6bfd4" + "$value": "#a0c2c5" }, "8": { "$type": "color", - "$value": "#517da2" + "$value": "#677d7e" }, "9": { "$type": "color", - "$value": "#3e617e" + "$value": "#506062" }, "10": { "$type": "color", - "$value": "#3e617e" + "$value": "#506062" }, "11": { "$type": "color", - "$value": "#1d2d3b" + "$value": "#252d2d" }, "12": { "$type": "color", - "$value": "#5685ad" + "$value": "#ACD0D3" }, "13": { "$type": "color", - "$value": "#7299bb" + "$value": "#99b9bc" }, "14": { "$type": "color", - "$value": "#8faec8" + "$value": "#87a3a6" }, "15": { "$type": "color", - "$value": "#090e12" + "$value": "#2c3535" }, "16": { "$type": "color", @@ -601,7 +403,7 @@ }, "2": { "$type": "color", - "$value": "#ecf6ef" + "$value": "#edf6ef" }, "3": { "$type": "color", @@ -609,55 +411,55 @@ }, "4": { "$type": "color", - "$value": "#dbeddf" + "$value": "#ddeddf" }, "5": { "$type": "color", - "$value": "#c3e2ca" + "$value": "#c6e1ca" }, "6": { "$type": "color", - "$value": "#a8d5b3" + "$value": "#add4b3" }, "7": { "$type": "color", - "$value": "#90c99e" + "$value": "#96c79e" }, "8": { "$type": "color", - "$value": "#39884c" + "$value": "#248b33" }, "9": { "$type": "color", - "$value": "#2c693b" + "$value": "#116c1e" }, "10": { "$type": "color", - "$value": "#2c693b" + "$value": "#116c1e" }, "11": { "$type": "color", - "$value": "#15311c" + "$value": "#08330e" }, "12": { "$type": "color", - "$value": "#45a45c" + "$value": "#148224" }, "13": { "$type": "color", - "$value": "#6cb77e" + "$value": "#116c1e" }, "14": { "$type": "color", - "$value": "#91c99e" + "$value": "#0d5618" }, "15": { "$type": "color", - "$value": "#010201" + "$value": "#f3f9f4" }, "16": { "$type": "color", - "$value": "#000000" + "$value": "#ffffff" } }, "warning": { @@ -667,7 +469,7 @@ }, "2": { "$type": "color", - "$value": "#faf2ed" + "$value": "#fef2e3" }, "3": { "$type": "color", @@ -675,51 +477,51 @@ }, "4": { "$type": "color", - "$value": "#f5e6db" + "$value": "#fce5c8" }, "5": { "$type": "color", - "$value": "#eed5c4" + "$value": "#fbd4a3" }, "6": { "$type": "color", - "$value": "#e7c3ab" + "$value": "#f9c079" }, "7": { "$type": "color", - "$value": "#e0b293" + "$value": "#f7ac51" }, "8": { "$type": "color", - "$value": "#a46c45" + "$value": "#a46d2a" }, "9": { "$type": "color", - "$value": "#7f5335" + "$value": "#7f5420" }, "10": { "$type": "color", - "$value": "#7f5335" + "$value": "#7f5420" }, "11": { "$type": "color", - "$value": "#3b2719" + "$value": "#3b270f" }, "12": { "$type": "color", - "$value": "#cf8857" + "$value": "#F6A43F" }, "13": { "$type": "color", - "$value": "#daa27c" + "$value": "#d99138" }, "14": { "$type": "color", - "$value": "#e4bca1" + "$value": "#bd7e30" }, "15": { "$type": "color", - "$value": "#0f0a06" + "$value": "#30200c" }, "16": { "$type": "color", @@ -733,7 +535,7 @@ }, "2": { "$type": "color", - "$value": "#fcf1f1" + "$value": "#fdf1f1" }, "3": { "$type": "color", @@ -741,55 +543,55 @@ }, "4": { "$type": "color", - "$value": "#f9e4e4" + "$value": "#fbe3e3" }, "5": { "$type": "color", - "$value": "#f5d2d2" + "$value": "#f8d1d1" }, "6": { "$type": "color", - "$value": "#f0bebe" + "$value": "#f5bcbc" }, "7": { "$type": "color", - "$value": "#ecabab" + "$value": "#f2a9a9" }, "8": { "$type": "color", - "$value": "#c85353" + "$value": "#e13737" }, "9": { "$type": "color", - "$value": "#9b4040" + "$value": "#bd0808" }, "10": { "$type": "color", - "$value": "#9b4040" + "$value": "#bd0808" }, "11": { "$type": "color", - "$value": "#491e1e" + "$value": "#5e0404" }, "12": { "$type": "color", - "$value": "#da5a5a" + "$value": "#DA0909" }, "13": { "$type": "color", - "$value": "#e17a7a" + "$value": "#b50707" }, "14": { "$type": "color", - "$value": "#e89999" + "$value": "#910606" }, "15": { "$type": "color", - "$value": "#1d0c0c" + "$value": "#fdf0f0" }, "16": { "$type": "color", - "$value": "#000000" + "$value": "#ffffff" } }, "link": { @@ -805,7 +607,7 @@ }, "outer": { "$type": "color", - "$value": "#2b2b2b" + "$value": "#2e2b27" } } } diff --git a/design-tokens/semantic/color.json b/design-tokens/semantic/color.json index cc70db6..19343df 100644 --- a/design-tokens/semantic/color.json +++ b/design-tokens/semantic/color.json @@ -66,204 +66,6 @@ "$value": "{color.accent.16}" } }, - "base": { - "background-default": { - "$type": "color", - "$value": "{color.base.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.base.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.base.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.base.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.base.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.base.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.base.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.base.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.base.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.base.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.base.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.base.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.base.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.base.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.base.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.base.16}" - } - }, - "primary": { - "background-default": { - "$type": "color", - "$value": "{color.primary.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.primary.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.primary.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.primary.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.primary.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.primary.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.primary.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.primary.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.primary.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.primary.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.primary.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.primary.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.primary.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.primary.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.primary.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.primary.16}" - } - }, - "secondary": { - "background-default": { - "$type": "color", - "$value": "{color.secondary.1}" - }, - "background-tinted": { - "$type": "color", - "$value": "{color.secondary.2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color.secondary.3}" - }, - "surface-tinted": { - "$type": "color", - "$value": "{color.secondary.4}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color.secondary.5}" - }, - "surface-active": { - "$type": "color", - "$value": "{color.secondary.6}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color.secondary.7}" - }, - "border-default": { - "$type": "color", - "$value": "{color.secondary.8}" - }, - "border-strong": { - "$type": "color", - "$value": "{color.secondary.9}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color.secondary.10}" - }, - "text-default": { - "$type": "color", - "$value": "{color.secondary.11}" - }, - "base-default": { - "$type": "color", - "$value": "{color.secondary.12}" - }, - "base-hover": { - "$type": "color", - "$value": "{color.secondary.13}" - }, - "base-active": { - "$type": "color", - "$value": "{color.secondary.14}" - }, - "base-contrast-subtle": { - "$type": "color", - "$value": "{color.secondary.15}" - }, - "base-contrast-default": { - "$type": "color", - "$value": "{color.secondary.16}" - } - }, "neutral": { "background-default": { "$type": "color", @@ -330,202 +132,202 @@ "$value": "{color.neutral.16}" } }, - "vimu": { + "support-color-1": { "background-default": { "$type": "color", - "$value": "{color.vimu.1}" + "$value": "{color.support-color-1.1}" }, "background-tinted": { "$type": "color", - "$value": "{color.vimu.2}" + "$value": "{color.support-color-1.2}" }, "surface-default": { "$type": "color", - "$value": "{color.vimu.3}" + "$value": "{color.support-color-1.3}" }, "surface-tinted": { "$type": "color", - "$value": "{color.vimu.4}" + "$value": "{color.support-color-1.4}" }, "surface-hover": { "$type": "color", - "$value": "{color.vimu.5}" + "$value": "{color.support-color-1.5}" }, "surface-active": { "$type": "color", - "$value": "{color.vimu.6}" + "$value": "{color.support-color-1.6}" }, "border-subtle": { "$type": "color", - "$value": "{color.vimu.7}" + "$value": "{color.support-color-1.7}" }, "border-default": { "$type": "color", - "$value": "{color.vimu.8}" + "$value": "{color.support-color-1.8}" }, "border-strong": { "$type": "color", - "$value": "{color.vimu.9}" + "$value": "{color.support-color-1.9}" }, "text-subtle": { "$type": "color", - "$value": "{color.vimu.10}" + "$value": "{color.support-color-1.10}" }, "text-default": { "$type": "color", - "$value": "{color.vimu.11}" + "$value": "{color.support-color-1.11}" }, "base-default": { "$type": "color", - "$value": "{color.vimu.12}" + "$value": "{color.support-color-1.12}" }, "base-hover": { "$type": "color", - "$value": "{color.vimu.13}" + "$value": "{color.support-color-1.13}" }, "base-active": { "$type": "color", - "$value": "{color.vimu.14}" + "$value": "{color.support-color-1.14}" }, "base-contrast-subtle": { "$type": "color", - "$value": "{color.vimu.15}" + "$value": "{color.support-color-1.15}" }, "base-contrast-default": { "$type": "color", - "$value": "{color.vimu.16}" + "$value": "{color.support-color-1.16}" } }, - "ub": { + "support-color-2": { "background-default": { "$type": "color", - "$value": "{color.ub.1}" + "$value": "{color.support-color-2.1}" }, "background-tinted": { "$type": "color", - "$value": "{color.ub.2}" + "$value": "{color.support-color-2.2}" }, "surface-default": { "$type": "color", - "$value": "{color.ub.3}" + "$value": "{color.support-color-2.3}" }, "surface-tinted": { "$type": "color", - "$value": "{color.ub.4}" + "$value": "{color.support-color-2.4}" }, "surface-hover": { "$type": "color", - "$value": "{color.ub.5}" + "$value": "{color.support-color-2.5}" }, "surface-active": { "$type": "color", - "$value": "{color.ub.6}" + "$value": "{color.support-color-2.6}" }, "border-subtle": { "$type": "color", - "$value": "{color.ub.7}" + "$value": "{color.support-color-2.7}" }, "border-default": { "$type": "color", - "$value": "{color.ub.8}" + "$value": "{color.support-color-2.8}" }, "border-strong": { "$type": "color", - "$value": "{color.ub.9}" + "$value": "{color.support-color-2.9}" }, "text-subtle": { "$type": "color", - "$value": "{color.ub.10}" + "$value": "{color.support-color-2.10}" }, "text-default": { "$type": "color", - "$value": "{color.ub.11}" + "$value": "{color.support-color-2.11}" }, "base-default": { "$type": "color", - "$value": "{color.ub.12}" + "$value": "{color.support-color-2.12}" }, "base-hover": { "$type": "color", - "$value": "{color.ub.13}" + "$value": "{color.support-color-2.13}" }, "base-active": { "$type": "color", - "$value": "{color.ub.14}" + "$value": "{color.support-color-2.14}" }, "base-contrast-subtle": { "$type": "color", - "$value": "{color.ub.15}" + "$value": "{color.support-color-2.15}" }, "base-contrast-default": { "$type": "color", - "$value": "{color.ub.16}" + "$value": "{color.support-color-2.16}" } }, - "student": { + "support-color-3": { "background-default": { "$type": "color", - "$value": "{color.student.1}" + "$value": "{color.support-color-3.1}" }, "background-tinted": { "$type": "color", - "$value": "{color.student.2}" + "$value": "{color.support-color-3.2}" }, "surface-default": { "$type": "color", - "$value": "{color.student.3}" + "$value": "{color.support-color-3.3}" }, "surface-tinted": { "$type": "color", - "$value": "{color.student.4}" + "$value": "{color.support-color-3.4}" }, "surface-hover": { "$type": "color", - "$value": "{color.student.5}" + "$value": "{color.support-color-3.5}" }, "surface-active": { "$type": "color", - "$value": "{color.student.6}" + "$value": "{color.support-color-3.6}" }, "border-subtle": { "$type": "color", - "$value": "{color.student.7}" + "$value": "{color.support-color-3.7}" }, "border-default": { "$type": "color", - "$value": "{color.student.8}" + "$value": "{color.support-color-3.8}" }, "border-strong": { "$type": "color", - "$value": "{color.student.9}" + "$value": "{color.support-color-3.9}" }, "text-subtle": { "$type": "color", - "$value": "{color.student.10}" + "$value": "{color.support-color-3.10}" }, "text-default": { "$type": "color", - "$value": "{color.student.11}" + "$value": "{color.support-color-3.11}" }, "base-default": { "$type": "color", - "$value": "{color.student.12}" + "$value": "{color.support-color-3.12}" }, "base-hover": { "$type": "color", - "$value": "{color.student.13}" + "$value": "{color.support-color-3.13}" }, "base-active": { "$type": "color", - "$value": "{color.student.14}" + "$value": "{color.support-color-3.14}" }, "base-contrast-subtle": { "$type": "color", - "$value": "{color.student.15}" + "$value": "{color.support-color-3.15}" }, "base-contrast-default": { "$type": "color", - "$value": "{color.student.16}" + "$value": "{color.support-color-3.16}" } }, "info": { diff --git a/design-tokens/semantic/modes/support-color/support-color-1.json b/design-tokens/semantic/modes/support-color/support-color-1.json new file mode 100644 index 0000000..a10208d --- /dev/null +++ b/design-tokens/semantic/modes/support-color/support-color-1.json @@ -0,0 +1,70 @@ +{ + "color": { + "support": { + "background-default": { + "$type": "color", + "$value": "{color.support-color-1.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.support-color-1.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.support-color-1.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.support-color-1.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.support-color-1.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.support-color-1.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.support-color-1.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.support-color-1.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.support-color-1.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.support-color-1.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.support-color-1.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.support-color-1.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.support-color-1.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.support-color-1.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.support-color-1.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.support-color-1.base-contrast-default}" + } + } + } +} \ No newline at end of file diff --git a/design-tokens/semantic/modes/support-color/support-color-2.json b/design-tokens/semantic/modes/support-color/support-color-2.json new file mode 100644 index 0000000..501989d --- /dev/null +++ b/design-tokens/semantic/modes/support-color/support-color-2.json @@ -0,0 +1,70 @@ +{ + "color": { + "support": { + "background-default": { + "$type": "color", + "$value": "{color.support-color-2.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.support-color-2.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.support-color-2.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.support-color-2.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.support-color-2.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.support-color-2.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.support-color-2.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.support-color-2.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.support-color-2.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.support-color-2.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.support-color-2.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.support-color-2.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.support-color-2.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.support-color-2.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.support-color-2.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.support-color-2.base-contrast-default}" + } + } + } +} \ No newline at end of file diff --git a/design-tokens/semantic/modes/support-color/support-color-3.json b/design-tokens/semantic/modes/support-color/support-color-3.json new file mode 100644 index 0000000..7ea2bc8 --- /dev/null +++ b/design-tokens/semantic/modes/support-color/support-color-3.json @@ -0,0 +1,70 @@ +{ + "color": { + "support": { + "background-default": { + "$type": "color", + "$value": "{color.support-color-3.background-default}" + }, + "background-tinted": { + "$type": "color", + "$value": "{color.support-color-3.background-tinted}" + }, + "surface-default": { + "$type": "color", + "$value": "{color.support-color-3.surface-default}" + }, + "surface-tinted": { + "$type": "color", + "$value": "{color.support-color-3.surface-tinted}" + }, + "surface-hover": { + "$type": "color", + "$value": "{color.support-color-3.surface-hover}" + }, + "surface-active": { + "$type": "color", + "$value": "{color.support-color-3.surface-active}" + }, + "border-subtle": { + "$type": "color", + "$value": "{color.support-color-3.border-subtle}" + }, + "border-default": { + "$type": "color", + "$value": "{color.support-color-3.border-default}" + }, + "border-strong": { + "$type": "color", + "$value": "{color.support-color-3.border-strong}" + }, + "text-subtle": { + "$type": "color", + "$value": "{color.support-color-3.text-subtle}" + }, + "text-default": { + "$type": "color", + "$value": "{color.support-color-3.text-default}" + }, + "base-default": { + "$type": "color", + "$value": "{color.support-color-3.base-default}" + }, + "base-hover": { + "$type": "color", + "$value": "{color.support-color-3.base-hover}" + }, + "base-active": { + "$type": "color", + "$value": "{color.support-color-3.base-active}" + }, + "base-contrast-subtle": { + "$type": "color", + "$value": "{color.support-color-3.base-contrast-subtle}" + }, + "base-contrast-default": { + "$type": "color", + "$value": "{color.support-color-3.base-contrast-default}" + } + } + } +} \ No newline at end of file diff --git a/design-tokens/themes/ntnu.json b/design-tokens/themes/ntnu.json index 6c83ead..3e419d5 100644 --- a/design-tokens/themes/ntnu.json +++ b/design-tokens/themes/ntnu.json @@ -66,204 +66,6 @@ "$value": "{ntnu.accent.16}" } }, - "base": { - "1": { - "$type": "color", - "$value": "{ntnu.base.1}" - }, - "2": { - "$type": "color", - "$value": "{ntnu.base.2}" - }, - "3": { - "$type": "color", - "$value": "{ntnu.base.3}" - }, - "4": { - "$type": "color", - "$value": "{ntnu.base.4}" - }, - "5": { - "$type": "color", - "$value": "{ntnu.base.5}" - }, - "6": { - "$type": "color", - "$value": "{ntnu.base.6}" - }, - "7": { - "$type": "color", - "$value": "{ntnu.base.7}" - }, - "8": { - "$type": "color", - "$value": "{ntnu.base.8}" - }, - "9": { - "$type": "color", - "$value": "{ntnu.base.9}" - }, - "10": { - "$type": "color", - "$value": "{ntnu.base.10}" - }, - "11": { - "$type": "color", - "$value": "{ntnu.base.11}" - }, - "12": { - "$type": "color", - "$value": "{ntnu.base.12}" - }, - "13": { - "$type": "color", - "$value": "{ntnu.base.13}" - }, - "14": { - "$type": "color", - "$value": "{ntnu.base.14}" - }, - "15": { - "$type": "color", - "$value": "{ntnu.base.15}" - }, - "16": { - "$type": "color", - "$value": "{ntnu.base.16}" - } - }, - "primary": { - "1": { - "$type": "color", - "$value": "{ntnu.primary.1}" - }, - "2": { - "$type": "color", - "$value": "{ntnu.primary.2}" - }, - "3": { - "$type": "color", - "$value": "{ntnu.primary.3}" - }, - "4": { - "$type": "color", - "$value": "{ntnu.primary.4}" - }, - "5": { - "$type": "color", - "$value": "{ntnu.primary.5}" - }, - "6": { - "$type": "color", - "$value": "{ntnu.primary.6}" - }, - "7": { - "$type": "color", - "$value": "{ntnu.primary.7}" - }, - "8": { - "$type": "color", - "$value": "{ntnu.primary.8}" - }, - "9": { - "$type": "color", - "$value": "{ntnu.primary.9}" - }, - "10": { - "$type": "color", - "$value": "{ntnu.primary.10}" - }, - "11": { - "$type": "color", - "$value": "{ntnu.primary.11}" - }, - "12": { - "$type": "color", - "$value": "{ntnu.primary.12}" - }, - "13": { - "$type": "color", - "$value": "{ntnu.primary.13}" - }, - "14": { - "$type": "color", - "$value": "{ntnu.primary.14}" - }, - "15": { - "$type": "color", - "$value": "{ntnu.primary.15}" - }, - "16": { - "$type": "color", - "$value": "{ntnu.primary.16}" - } - }, - "secondary": { - "1": { - "$type": "color", - "$value": "{ntnu.secondary.1}" - }, - "2": { - "$type": "color", - "$value": "{ntnu.secondary.2}" - }, - "3": { - "$type": "color", - "$value": "{ntnu.secondary.3}" - }, - "4": { - "$type": "color", - "$value": "{ntnu.secondary.4}" - }, - "5": { - "$type": "color", - "$value": "{ntnu.secondary.5}" - }, - "6": { - "$type": "color", - "$value": "{ntnu.secondary.6}" - }, - "7": { - "$type": "color", - "$value": "{ntnu.secondary.7}" - }, - "8": { - "$type": "color", - "$value": "{ntnu.secondary.8}" - }, - "9": { - "$type": "color", - "$value": "{ntnu.secondary.9}" - }, - "10": { - "$type": "color", - "$value": "{ntnu.secondary.10}" - }, - "11": { - "$type": "color", - "$value": "{ntnu.secondary.11}" - }, - "12": { - "$type": "color", - "$value": "{ntnu.secondary.12}" - }, - "13": { - "$type": "color", - "$value": "{ntnu.secondary.13}" - }, - "14": { - "$type": "color", - "$value": "{ntnu.secondary.14}" - }, - "15": { - "$type": "color", - "$value": "{ntnu.secondary.15}" - }, - "16": { - "$type": "color", - "$value": "{ntnu.secondary.16}" - } - }, "neutral": { "1": { "$type": "color", @@ -330,202 +132,202 @@ "$value": "{ntnu.neutral.16}" } }, - "vimu": { + "support-color-1": { "1": { "$type": "color", - "$value": "{ntnu.vimu.1}" + "$value": "{ntnu.support-color-1.1}" }, "2": { "$type": "color", - "$value": "{ntnu.vimu.2}" + "$value": "{ntnu.support-color-1.2}" }, "3": { "$type": "color", - "$value": "{ntnu.vimu.3}" + "$value": "{ntnu.support-color-1.3}" }, "4": { "$type": "color", - "$value": "{ntnu.vimu.4}" + "$value": "{ntnu.support-color-1.4}" }, "5": { "$type": "color", - "$value": "{ntnu.vimu.5}" + "$value": "{ntnu.support-color-1.5}" }, "6": { "$type": "color", - "$value": "{ntnu.vimu.6}" + "$value": "{ntnu.support-color-1.6}" }, "7": { "$type": "color", - "$value": "{ntnu.vimu.7}" + "$value": "{ntnu.support-color-1.7}" }, "8": { "$type": "color", - "$value": "{ntnu.vimu.8}" + "$value": "{ntnu.support-color-1.8}" }, "9": { "$type": "color", - "$value": "{ntnu.vimu.9}" + "$value": "{ntnu.support-color-1.9}" }, "10": { "$type": "color", - "$value": "{ntnu.vimu.10}" + "$value": "{ntnu.support-color-1.10}" }, "11": { "$type": "color", - "$value": "{ntnu.vimu.11}" + "$value": "{ntnu.support-color-1.11}" }, "12": { "$type": "color", - "$value": "{ntnu.vimu.12}" + "$value": "{ntnu.support-color-1.12}" }, "13": { "$type": "color", - "$value": "{ntnu.vimu.13}" + "$value": "{ntnu.support-color-1.13}" }, "14": { "$type": "color", - "$value": "{ntnu.vimu.14}" + "$value": "{ntnu.support-color-1.14}" }, "15": { "$type": "color", - "$value": "{ntnu.vimu.15}" + "$value": "{ntnu.support-color-1.15}" }, "16": { "$type": "color", - "$value": "{ntnu.vimu.16}" + "$value": "{ntnu.support-color-1.16}" } }, - "ub": { + "support-color-2": { "1": { "$type": "color", - "$value": "{ntnu.ub.1}" + "$value": "{ntnu.support-color-2.1}" }, "2": { "$type": "color", - "$value": "{ntnu.ub.2}" + "$value": "{ntnu.support-color-2.2}" }, "3": { "$type": "color", - "$value": "{ntnu.ub.3}" + "$value": "{ntnu.support-color-2.3}" }, "4": { "$type": "color", - "$value": "{ntnu.ub.4}" + "$value": "{ntnu.support-color-2.4}" }, "5": { "$type": "color", - "$value": "{ntnu.ub.5}" + "$value": "{ntnu.support-color-2.5}" }, "6": { "$type": "color", - "$value": "{ntnu.ub.6}" + "$value": "{ntnu.support-color-2.6}" }, "7": { "$type": "color", - "$value": "{ntnu.ub.7}" + "$value": "{ntnu.support-color-2.7}" }, "8": { "$type": "color", - "$value": "{ntnu.ub.8}" + "$value": "{ntnu.support-color-2.8}" }, "9": { "$type": "color", - "$value": "{ntnu.ub.9}" + "$value": "{ntnu.support-color-2.9}" }, "10": { "$type": "color", - "$value": "{ntnu.ub.10}" + "$value": "{ntnu.support-color-2.10}" }, "11": { "$type": "color", - "$value": "{ntnu.ub.11}" + "$value": "{ntnu.support-color-2.11}" }, "12": { "$type": "color", - "$value": "{ntnu.ub.12}" + "$value": "{ntnu.support-color-2.12}" }, "13": { "$type": "color", - "$value": "{ntnu.ub.13}" + "$value": "{ntnu.support-color-2.13}" }, "14": { "$type": "color", - "$value": "{ntnu.ub.14}" + "$value": "{ntnu.support-color-2.14}" }, "15": { "$type": "color", - "$value": "{ntnu.ub.15}" + "$value": "{ntnu.support-color-2.15}" }, "16": { "$type": "color", - "$value": "{ntnu.ub.16}" + "$value": "{ntnu.support-color-2.16}" } }, - "student": { + "support-color-3": { "1": { "$type": "color", - "$value": "{ntnu.student.1}" + "$value": "{ntnu.support-color-3.1}" }, "2": { "$type": "color", - "$value": "{ntnu.student.2}" + "$value": "{ntnu.support-color-3.2}" }, "3": { "$type": "color", - "$value": "{ntnu.student.3}" + "$value": "{ntnu.support-color-3.3}" }, "4": { "$type": "color", - "$value": "{ntnu.student.4}" + "$value": "{ntnu.support-color-3.4}" }, "5": { "$type": "color", - "$value": "{ntnu.student.5}" + "$value": "{ntnu.support-color-3.5}" }, "6": { "$type": "color", - "$value": "{ntnu.student.6}" + "$value": "{ntnu.support-color-3.6}" }, "7": { "$type": "color", - "$value": "{ntnu.student.7}" + "$value": "{ntnu.support-color-3.7}" }, "8": { "$type": "color", - "$value": "{ntnu.student.8}" + "$value": "{ntnu.support-color-3.8}" }, "9": { "$type": "color", - "$value": "{ntnu.student.9}" + "$value": "{ntnu.support-color-3.9}" }, "10": { "$type": "color", - "$value": "{ntnu.student.10}" + "$value": "{ntnu.support-color-3.10}" }, "11": { "$type": "color", - "$value": "{ntnu.student.11}" + "$value": "{ntnu.support-color-3.11}" }, "12": { "$type": "color", - "$value": "{ntnu.student.12}" + "$value": "{ntnu.support-color-3.12}" }, "13": { "$type": "color", - "$value": "{ntnu.student.13}" + "$value": "{ntnu.support-color-3.13}" }, "14": { "$type": "color", - "$value": "{ntnu.student.14}" + "$value": "{ntnu.support-color-3.14}" }, "15": { "$type": "color", - "$value": "{ntnu.student.15}" + "$value": "{ntnu.support-color-3.15}" }, "16": { "$type": "color", - "$value": "{ntnu.student.16}" + "$value": "{ntnu.support-color-3.16}" } }, "info": { diff --git a/designsystemet.config.json b/designsystemet.config.json index 04ab4d4..8f51e22 100644 --- a/designsystemet.config.json +++ b/designsystemet.config.json @@ -1,29 +1,25 @@ { "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json", "outDir": "./design-tokens", - "clean": true, "themes": { "ntnu": { "colors": { "main": { - "accent": "#00509E", - "base": "#f0f8ff", - "primary": "#00509E", - "secondary": "#9e4e00" + "accent": "#004DB2" }, "support": { - "vimu": "#ffd200", - "ub": "#28585A", - "student": "#1b7ea6" + "support-color-1": "#F0C881", + "support-color-2": "#ECBECD", + "support-color-3": "#103E0D" }, - "neutral": "#262626" + "neutral": "#D4C3B2" }, "overrides": { "severity": { - "info": "#5685ad", - "success": "#45a45c", - "warning": "#cf8857", - "danger": "#da5a5a" + "info": "#ACD0D3", + "success": "#148224", + "warning": "#F6A43F", + "danger": "#DA0909" } }, "borderRadius": 2, From 03ad19b6da503407537bf020e3caf8ddec7cd689 Mon Sep 17 00:00:00 2001 From: Erik Betshammar Date: Wed, 4 Feb 2026 13:03:57 +0100 Subject: [PATCH 2/3] Changes "Last updated" date --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ddaece9..6077b48 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ I roten av dette repoet finner du en kopi av config-filen for NTNU: `designsystemet.config.json` -**Sist oppdatert**: 2025-11-26 +**Sist oppdatert**: 2026-02-04 Denne kopien av filen vedlikeholdes og offentliggjøres her med jevne mellomrom fra [designsystemet.config.json](https://git.ntnu.no/it-dev/designsystemet/blob/main/designsystemet.config.json). From fb8732845f087b79deed4d4031f8a21759bb55e4 Mon Sep 17 00:00:00 2001 From: Erik Betshammar Date: Wed, 4 Feb 2026 13:35:32 +0100 Subject: [PATCH 3/3] Adds link to config preview. --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 6077b48..415da4d 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,8 @@ I roten av dette repoet finner du en kopi av config-filen for NTNU: `designsystemet.config.json` +Visualisering av config-filen kan ses i [temabyggern](https://theme.designsystemet.no/no/themebuilder?main=accent%3A%23004DB2&neutral=%23D4C3B2&support=support-color-1%3A%23F0C881+support-color-2%3A%23ECBECD+support-color-3%3A%23103E0D&severity=info%3A%23ACD0D3+warning%3A%23F6A43F+danger%3A%23DA0909&severity-enabled=true&border-radius=2&appearance=light&tab=colorsystem). + **Sist oppdatert**: 2026-02-04 Denne kopien av filen vedlikeholdes og offentliggjøres her med jevne mellomrom fra [designsystemet.config.json](https://git.ntnu.no/it-dev/designsystemet/blob/main/designsystemet.config.json).