@norges-domstoler/dds-design-tokens 8.0.2 → 9.0.0

package/dist/css/ddsTokens-core-dark.css

@@ -0,0 +1,363 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dds-core-dark {
+  --dds-font-family-sans: 'IBM Plex Sans', Arial, sans-serif;
+  --dds-font-family-monospace: 'IBM Plex Mono', 'Courier New', monospace; /* For kode */
+  --dds-font-size-x5: 5rem;
+  --dds-font-size-x4: 4rem;
+  --dds-font-size-x3: 3rem;
+  --dds-font-size-x2-5: 2.5rem;
+  --dds-font-size-x2: 2rem;
+  --dds-font-size-x1-5: 1.5rem;
+  --dds-font-size-x1-25: 1.25rem;
+  --dds-font-size-x1-125: 1.125rem;
+  --dds-font-size-x1: 1rem;
+  --dds-font-size-x0-875: 0.875rem;
+  --dds-font-size-x0-75: 0.75rem;
+  --dds-font-weight-light: 300;
+  --dds-font-weight-normal: 400;
+  --dds-font-weight-semi-bold: 500;
+  --dds-font-weight-bold: 600;
+  --dds-font-lineheight-x1: 1.5; /* Brukes på mengetekst og artikler */
+  --dds-font-lineheight-x3: 1.2;
+  --dds-font-lineheight-x2: 1.3; /* Brukes i komponenter og overskrifter */
+  --dds-font-lineheight-list: 2; /* Brukes på lister */
+  --dds-font-letter-spacing-tight: -0.01em; /* Brukes på str ×2.5 og større */
+  --dds-font-letter-spacing-normal: 0em; /* Brukes på str ×1 og opp til og med ×2 */
+  --dds-font-letter-spacing-loose: 0.01em; /* Brukes på størrelser under ×1 */
+  --dds-font-paragraph-spacing-small: 1em; /* Brukes på str ×1_25 og mindre  */
+  --dds-font-paragraph-spacing-medium: 0.66em; /* Brukes på str x1.5, ×2 og ×3  */
+  --dds-font-paragraph-spacing-large: 0.5em; /* Brukes på str ×3 og større */
+  --dds-font-paragraph-spacing-heading: 0.4em; /* Brukes på på alle headere (bottom) */
+  --dds-font-style-underline: underline;
+  --dds-font-style-normal: none;
+  --dds-font-style-italic: italic;
+  --dds-spacing-padding-top-heading: 0.7em; /* Ekstra spacing over dds-header. 70% av størrelsen på headeren */
+  --dds-spacing-x0: 0rem;
+  --dds-spacing-x0-125: 0.125rem;
+  --dds-spacing-x0-25: 0.25rem;
+  --dds-spacing-x0-5: 0.5rem;
+  --dds-spacing-x0-75: 0.75rem;
+  --dds-spacing-x1: 1rem;
+  --dds-spacing-x1-5: 1.5rem;
+  --dds-spacing-x2: 2rem;
+  --dds-spacing-x2-5: 2.5rem;
+  --dds-spacing-x3: 3rem;
+  --dds-spacing-x4: 4rem;
+  --dds-spacing-x6: 6rem;
+  --dds-spacing-x10: 10rem;
+  --dds-grid-xs-gutter-size: 16px;
+  --dds-grid-xs-count: 4;
+  --dds-grid-sm-gutter-size: 16px;
+  --dds-grid-sm-count: 8;
+  --dds-grid-lg-gutter-size: 24px;
+  --dds-grid-lg-count: 12;
+  --dds-grid-md-gutter-size: 24px;
+  --dds-grid-md-count: 12;
+  --dds-grid-xl-gutter-size: 24px;
+  --dds-grid-xl-count: 12;
+  --dds-size-icon-large: 40px;
+  --dds-size-icon-medium: 24px;
+  --dds-size-icon-small: 16px;
+  --dds-size-icon-component: 1.3em; /* Brukes i komponenter. Relativ til tekststørrelsen */
+  --dds-breakpoint-xs: 1px;
+  --dds-breakpoint-sm: 600px;
+  --dds-breakpoint-md: 960px;
+  --dds-breakpoint-lg: 1280px;
+  --dds-breakpoint-xl: 1920px;
+  --dds-zindex-skiptocontent: 250; /* Brukes for dds-skiptocontent */
+  --dds-zindex-modal-backdrop: 200; /* Brukes for dds-modal */
+  --dds-zindex-drawer: 180; /* Brukes for dds-drawer */
+  --dds-zindex-drawer-backdrop: 180; /* Brukes for dds-drawer */
+  --dds-zindex-overflowmenu: 160; /* Brukes for dds-overflowmenu */
+  --dds-zindex-popover: 140; /* Brukes for dds-popover og kalender i datepicker */
+  --dds-zindex-tooltip: 120; /* Brukes for dds-tooltip */
+  --dds-zindex-dropdown: 100; /* Dropdown brukes for bl.a søkeforslag, dropdown i select */
+  --dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
+  --dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
+  --dds-color-data-10-default: #62abcb;
+  --dds-color-data-10-subtle: #135774;
+  --dds-color-data-10-border: #62abcb;
+  --dds-color-data-red-100: #f8d2d4;
+  --dds-color-data-red-200: #f0a5a9;
+  --dds-color-data-red-300: #f4858b;
+  --dds-color-data-red-400: #e14b53;
+  --dds-color-data-red-500: #da1e28;
+  --dds-color-data-red-600: #ae1820;
+  --dds-color-data-red-700: #831218;
+  --dds-color-data-red-800: #570c10;
+  --dds-color-data-red-900: #2c0608;
+  --dds-color-data-magenta-100: #f7d9f2;
+  --dds-color-data-magenta-200: #edb5e4;
+  --dds-color-data-magenta-300: #e079d0;
+  --dds-color-data-magenta-400: #d54dc0;
+  --dds-color-data-magenta-500: #cb20b0;
+  --dds-color-data-magenta-600: #a21a8d;
+  --dds-color-data-magenta-700: #7a136a;
+  --dds-color-data-magenta-800: #510d46;
+  --dds-color-data-magenta-900: #290623;
+  --dds-color-data-brown-100: #f0ddd5;
+  --dds-color-data-brown-200: #e1bcac;
+  --dds-color-data-brown-300: #d19a82;
+  --dds-color-data-brown-400: #c27959;
+  --dds-color-data-brown-500: #b3572f;
+  --dds-color-data-brown-600: #8f4626;
+  --dds-color-data-brown-700: #6b341c;
+  --dds-color-data-brown-800: #482313;
+  --dds-color-data-brown-900: #241109;
+  --dds-color-data-olive-100: #e9e7cd;
+  --dds-color-data-olive-200: #cdc9a1;
+  --dds-color-data-olive-300: #b3ae71;
+  --dds-color-data-olive-400: #989344;
+  --dds-color-data-olive-500: #7c7518;
+  --dds-color-data-olive-600: #635e13;
+  --dds-color-data-olive-700: #4a460e;
+  --dds-color-data-olive-800: #322f0a;
+  --dds-color-data-olive-900: #191705;
+  --dds-color-data-green-100: #d7e8cf;
+  --dds-color-data-green-200: #aed19e;
+  --dds-color-data-green-300: #95c280;
+  --dds-color-data-green-400: #619947;
+  --dds-color-data-green-500: #3a8019;
+  --dds-color-data-green-600: #2e6614;
+  --dds-color-data-green-700: #234d0f;
+  --dds-color-data-green-800: #17330a;
+  --dds-color-data-green-900: #0c1a05;
+  --dds-color-data-teal-100: #c2e2e1;
+  --dds-color-data-teal-200: #90ccc9;
+  --dds-color-data-teal-300: #5dafad;
+  --dds-color-data-teal-400: #2c9390;
+  --dds-color-data-teal-500: #007d79;
+  --dds-color-data-teal-600: #006461;
+  --dds-color-data-teal-700: #004b49;
+  --dds-color-data-teal-800: #003230;
+  --dds-color-data-teal-900: #001918;
+  --dds-color-data-deepblue-100: #c6e3f1;
+  --dds-color-data-deepblue-200: #93cee6;
+  --dds-color-data-deepblue-300: #62abcb;
+  --dds-color-data-deepblue-400: #358fb5;
+  --dds-color-data-deepblue-500: #196b8f;
+  --dds-color-data-deepblue-600: #135774;
+  --dds-color-data-deepblue-700: #0e455e;
+  --dds-color-data-deepblue-800: #0d3445;
+  --dds-color-data-deepblue-900: #05151d;
+  --dds-color-data-blue-100: #cfe0ff;
+  --dds-color-data-blue-200: #9fc0ff;
+  --dds-color-data-blue-300: #6fa1fe;
+  --dds-color-data-blue-400: #3f81fe;
+  --dds-color-data-blue-500: #0f62fe;
+  --dds-color-data-blue-600: #0c4ecb;
+  --dds-color-data-blue-700: #093b98;
+  --dds-color-data-blue-800: #062766;
+  --dds-color-data-blue-900: #031433;
+  --dds-color-data-purple-100: #e8d9fe;
+  --dds-color-data-purple-200: #d0b2fe;
+  --dds-color-data-purple-300: #b98cfd;
+  --dds-color-data-purple-400: #a165fd;
+  --dds-color-data-purple-500: #8a3ffc;
+  --dds-color-data-purple-600: #6e32ca;
+  --dds-color-data-purple-700: #532697;
+  --dds-color-data-purple-800: #371965;
+  --dds-color-data-purple-900: #1c0d32;
+  --dds-color-data-gray-100: #e3e3e3;
+  --dds-color-data-gray-200: #c7c7c7;
+  --dds-color-data-gray-300: #aaaaaa;
+  --dds-color-data-gray-400: #8e8e8e;
+  --dds-color-data-gray-500: #727272;
+  --dds-color-data-gray-600: #5b5b5b;
+  --dds-color-data-gray-700: #444444;
+  --dds-color-data-gray-800: #2e2e2e;
+  --dds-color-data-gray-900: #171717;
+  --dds-color-data-01-default: #6fa1fe;
+  --dds-color-data-01-subtle: #0c4ecb;
+  --dds-color-data-01-border: #6fa1fe;
+  --dds-color-data-02-default: #d19a82;
+  --dds-color-data-02-subtle: #8f4626;
+  --dds-color-data-02-border: #d19a82;
+  --dds-color-data-03-default: #aaaaaa;
+  --dds-color-data-03-subtle: #5b5b5b;
+  --dds-color-data-03-border: #aaaaaa;
+  --dds-color-data-04-default: #95c280;
+  --dds-color-data-04-subtle: #2e6614;
+  --dds-color-data-04-border: #95c280;
+  --dds-color-data-05-default: #b98cfd;
+  --dds-color-data-05-subtle: #6e32ca;
+  --dds-color-data-05-border: #b98cfd;
+  --dds-color-data-06-default: #e079d0;
+  --dds-color-data-06-subtle: #a21a8d;
+  --dds-color-data-06-border: #e079d0;
+  --dds-color-data-07-default: #b3ae71;
+  --dds-color-data-07-subtle: #635e13;
+  --dds-color-data-07-border: #b3ae71;
+  --dds-color-data-08-default: #f4858b;
+  --dds-color-data-08-subtle: #ae1820;
+  --dds-color-data-08-border: #f4858b;
+  --dds-color-data-09-default: #5dafad;
+  --dds-color-data-09-subtle: #006461;
+  --dds-color-data-09-border: #5dafad;
+  --dds-color-bg-default: #181a1c; /* UI shell base color */
+  --dds-color-bg-subtle: #22272a; /* Alternative UI shell base color */
+  --dds-color-surface-default: #181a1c; /* Default bg */
+  --dds-color-surface-subtle: #22272a; /* Subtle surface color */
+  --dds-color-surface-medium: #303438; /* Medium surface color */
+  --dds-color-surface-hover-default: #062c45; /* Hover on surface (default, subtle, medium) */
+  --dds-color-surface-hover-subtle: #22272a; /* Subtle hover on surface (default, medium) */
+  --dds-color-surface-selected-default: #062c45; /* Selected state for surface (default, subtle, medium) */
+  --dds-color-surface-inverse-default: #354754; /* Can be used as a surface for menu, navigation, footer etc */
+  --dds-color-surface-inverse-hover: #2a3943; /* Hover on surface.inverse */
+  --dds-color-surface-inverse-selected: #202b32; /* selected on surface.inverse */
+  --dds-color-surface-action-resting: #589ac6; /* Primary button bg */
+  --dds-color-surface-action-hover: #9fc5de; /* Hover on surface.action/selected */
+  --dds-color-surface-action-selected: #589ac6; /* Selected state for components such as togglebutton, togglebar, progress tracker, checkbox etc */
+  --dds-color-surface-action-danger-resting: #e47373; /* Danger button */
+  --dds-color-surface-action-danger-hover: #efafaf; /* Hover on surface.action-danger */
+  --dds-color-surface-action-selected-disabled: #77838c; /* bg on a selected disabled checkbox, radio etc */
+  --dds-color-surface-danger-default: #561616; /* tag, message, errormessage */
+  --dds-color-surface-danger-strong: #dc4b4b; /* tag strong value */
+  --dds-color-surface-success-default: #284c29; /* tag, message */
+  --dds-color-surface-success-strong: #65be66; /* tag with strong value */
+  --dds-color-surface-warning-default: #494317; /* tag, message */
+  --dds-color-surface-warning-strong: #f4e04d; /* tag strong value */
+  --dds-color-surface-info-default: #2a4b61; /* tag, message */
+  --dds-color-surface-info-strong: #75b9e6; /* tag strong value */
+  --dds-color-surface-paper-default: #3a4146; /* modal, drawer, popover etc */
+  --dds-color-surface-backdrop-default: #0b0d0e80; /* background overlay for modals (50%) */
+  --dds-color-surface-field-default: #0b0d0e; /* Form elements (textinput, datepicker etc) */
+  --dds-color-surface-field-disabled: #303438; /* disabled state on surface.field */
+  --dds-color-surface-highlighted-default: #833a21; /* bg for highlighted text on text.default. Use with $Text */
+  --dds-color-surface-scrollbar: #545c62; /* Used for scrollbar */
+  --dds-color-surface-notification: #d83737; /* bg on a notification */
+  --dds-color-surface-skeleton: #545c62; /* Used for skeleton */
+  --dds-color-border-default: #77838c; /* Form components, togglebutton, secondary button, checkbox etc */
+  --dds-color-border-subtle: #545c62; /* Dropdown, tooltip, overflow etc */
+  --dds-color-border-inverse: #acbbc6; /* Border or divider on surface.inverse */
+  --dds-color-border-action-default: #589ac6; /* Used in progress tracker */
+  --dds-color-border-action-hover: #9fc5de; /* Hover on secondary button etc */
+  --dds-color-border-success: #519852; /* Used with tag-default */
+  --dds-color-border-warning: #ccba35; /* Tag.default */
+  --dds-color-border-danger: #ad2c2c; /* Tag.default, error message field */
+  --dds-color-border-info: #5197c5; /* Tag.default */
+  --dds-color-border-on-action: #181a1c; /* Used on primary split button */
+  --dds-color-text-default: #ffffff; /* default text, heading, body. on surface.hover */
+  --dds-color-text-medium: #e9ebec; /* Label, etc */
+  --dds-color-text-subtle: #d6dadd; /* Disabled or less important text */
+  --dds-color-text-on-inverse: #ffffff; /* On surface.inverse */
+  --dds-color-text-danger: #efafaf; /* Error text on paper, or default or subtle surafce/bg */
+  --dds-color-text-on-action: #0b0d0e; /* On surface.action (primary and danger button) */
+  --dds-color-text-on-status-default: #ffffff; /* On default status surfaces */
+  --dds-color-text-on-status-strong: #0b0d0e; /* On status surfaces with strong prop */
+  --dds-color-text-action-resting: #9fc5de; /* Link, number in progress tracker */
+  --dds-color-text-action-hover: #e7f1f7; /* Hover on text.action */
+  --dds-color-text-requiredfield: #efafaf; /* Asterix to indicate required field */
+  --dds-color-text-action-visited: #cca9e1; /* Used for visited links */
+  --dds-color-text-action-visited-on-inverse: #cca9e1; /* Used for visited links on inverse surfaces */
+  --dds-color-text-on-notification: #ffffff; /* Used on surface.notification */
+  --dds-color-text-on-primary-default: #ffffff; /* Used on brand.primary-default */
+  --dds-color-text-on-primary-subtle: #ffffff; /* Used on brand.primary-subtle */
+  --dds-color-text-on-primary-medium: #ffffff; /* Used on brand.primary-medium */
+  --dds-color-text-on-primary-strong: #ffffff; /* Used on brand.primary-strong */
+  --dds-color-text-on-secondary-default: #0b0d0e; /* Used on brand.secondary-default */
+  --dds-color-text-on-secondary-subtle: #ffffff; /* Used on brand.secondary-subtle */
+  --dds-color-text-on-secondary-medium: #ffffff; /* Used on brand.secondary-medium */
+  --dds-color-text-on-secondary-strong: #0b0d0e; /* Used on brand.secondary-strong */
+  --dds-color-text-on-tertiary-default: #0b0d0e; /* Used on brand.tertiary-default */
+  --dds-color-text-on-tertiary-subtle: #ffffff; /* Used on brand.tertiary-subtle */
+  --dds-color-text-on-tertiary-medium: #0b0d0e; /* Used on brand.tertiary-medium */
+  --dds-color-text-on-tertiary-strong: #0b0d0e; /* Used on brand.tertiary-strong */
+  --dds-color-text-on-data-default: #0b0d0e; /* Used on data. with default value */
+  --dds-color-text-on-data-subtle: #ffffff; /* Used on data. with subtle value */
+  --dds-color-icon-default: #ffffff; /* Often used with text.default */
+  --dds-color-icon-medium: #e9ebec; /* Often used with text.medium */
+  --dds-color-icon-subtle: #d6dadd; /* Often used with text.subtle */
+  --dds-color-icon-on-inverse: #ffffff; /* On surface.inverse */
+  --dds-color-icon-on-action: #0b0d0e; /* On surface.action (primary and danger button) */
+  --dds-color-icon-action-resting: #9fc5de; /* Often used with Text.action */
+  --dds-color-icon-action-hover: #e7f1f7; /* hover on icon-action */
+  --dds-color-icon-on-success-default: #c1e5c2; /* On surface.success-default */
+  --dds-color-icon-on-success-strong: #0b0d0e; /* On surface-success-strong */
+  --dds-color-icon-on-warning-default: #fbf3b8; /* On surface.warning-default */
+  --dds-color-icon-on-warning-strong: #0b0d0e; /* On surface.warning-strong */
+  --dds-color-icon-on-danger-default: #efafaf; /* On surface.danger-default */
+  --dds-color-icon-on-danger-strong: #0b0d0e; /* On surface.danger-strong */
+  --dds-color-icon-on-info-default: #c8e3f5; /* On surface.info-default */
+  --dds-color-icon-on-info-strong: #0b0d0e; /* On surface.info-strong */
+  --dds-color-icon-danger: #efafaf; /* Error icon on paper, or default or subtle surafce/bg */
+  --dds-color-brand-primary-default: #354754; /* Primary brand color */
+  --dds-color-brand-primary-subtle: #2a3943; /* Primary brand color */
+  --dds-color-brand-primary-medium: #405767; /* Primary brand color */
+  --dds-color-brand-primary-strong: #4f6a7e; /* Primary brand color */
+  --dds-color-brand-secondary-default: #9ab8b7; /* Secondary brand color */
+  --dds-color-brand-secondary-subtle: #2b3a3a; /* Secondary brand color */
+  --dds-color-brand-secondary-medium: #4d6463; /* Secondary brand color */
+  --dds-color-brand-secondary-strong: #b8cdcd; /* Secondary brand color */
+  --dds-color-brand-tertiary-default: #f27e55; /* Tertiary brand color */
+  --dds-color-brand-tertiary-subtle: #a24422; /* Tertiary brand color */
+  --dds-color-brand-tertiary-medium: #f2a68f; /* Tertiary brand color */
+  --dds-color-brand-tertiary-strong: #ffd6ca; /* Tertiary brand color */
+  --dds-color-focus-outside: #f1f8fd; /* Contrast to .inside */
+  --dds-color-focus-inside: #2a4b61; /* Contrast to .outside */
+  --dds-shadow-large: 8px 16px 32px 0px rgba(11, 13, 14, 80%); /* Dialoger. Eksempel: modal, drawer, popover */
+  --dds-shadow-medium: 2px 4px 8px 0px rgba(11, 13, 14, 80%); /* Dropdowns. Eksempel: overflowmenu, dropdown */
+  --dds-shadow-small: 1px 2px 4px 0px rgba(11, 13, 14, 80%); /* Eksempel: tooltip */
+  --dds-border-radius-button: 2px; /* For use in button component and togglebutton */
+  --dds-border-radius-surface: 4px; /* Most surfaces, for example cards, papers, messages, backgrounds in GUI */
+  --dds-border-radius-input: 2px; /* All input fields, and check boxes */
+  --dds-border-radius-chip: 4px; /* Chips and tags */
+  --dds-border-radius-rounded: 9999px; /* Rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker */
+  --dds-font-label-medium: 600 0.875rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Label for form components */
+  --dds-font-body-long-xsmall: 400 0.75rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Xsmall body text for editorial content */
+  --dds-font-body-long-small: 400 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Small body text for editorial content */
+  --dds-font-body-long-medium: 400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default body text for editorial content */
+  --dds-font-body-long-large: 400 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Large body text for editorial content */
+  --dds-font-heading-xxsmall: 600 0.75rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h6 */
+  --dds-font-heading-xsmall: 600 0.875rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h5 */
+  --dds-font-heading-small: 600 1rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h4 */
+  --dds-font-heading-medium: 600 1.125rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h3 */
+  --dds-font-heading-large: 400 clamp(1.25rem, 0.833rem + 1.111vw, 1.5rem)/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h2 */
+  --dds-font-heading-xlarge: 400 clamp(1.5rem, 0.667rem + 2.222vw, 2rem)/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default H1 */
+  --dds-font-heading-xxlarge: 300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.3 'IBM Plex Sans', Arial, sans-serif; /* Display or extra large page title (h1) */
+  --dds-font-lead-medium: 300 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Lead brukes som ingress når man skriver artikler etc */
+  --dds-font-code-medium: 400 1rem/1.5 'IBM Plex Mono', 'Courier New', monospace; /* Brukes for kodesnutter etc */
+  --dds-font-body-short-xsmall: 400 0.75rem/1.3 'IBM Plex Sans', Arial, sans-serif; /*  used with xsmall button and input fields */
+  --dds-font-body-short-small: 400 0.875rem/1.3 'IBM Plex Sans', Arial, sans-serif; /*  used with small button and input fields */
+  --dds-font-body-short-medium: 400 1rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Used with medium button and input fields */
+  --dds-font-body-short-large: 400 1.125rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Used for large button and large search */
+  --dds-font-heading-xxlarge-letter-spacing: -0.01em;
+  --dds-font-heading-xxlarge-paragraph-spacing: 0.4em;
+  --dds-font-heading-xlarge-letter-spacing: 0em;
+  --dds-font-heading-xlarge-paragraph-spacing: 0.4em;
+  --dds-font-heading-large-letter-spacing: 0em;
+  --dds-font-heading-large-paragraph-spacing: 0.4em;
+  --dds-font-heading-medium-letter-spacing: 0em;
+  --dds-font-heading-medium-paragraph-spacing: 0.4em;
+  --dds-font-heading-small-letter-spacing: 0em;
+  --dds-font-heading-small-paragraph-spacing: 0.4em;
+  --dds-font-heading-xsmall-letter-spacing: 0.01em;
+  --dds-font-heading-xsmall-paragraph-spacing: 0.4em;
+  --dds-font-heading-xxsmall-letter-spacing: 0.01em;
+  --dds-font-heading-xxsmall-paragraph-spacing: 0.4em;
+  --dds-font-body-long-large-letter-spacing: 0em;
+  --dds-font-body-long-large-paragraph-spacing: 1em;
+  --dds-font-body-long-medium-letter-spacing: 0em;
+  --dds-font-body-long-medium-paragraph-spacing: 1em;
+  --dds-font-body-long-small-letter-spacing: 0.01em;
+  --dds-font-body-long-small-paragraph-spacing: 1em;
+  --dds-font-body-long-xsmall-letter-spacing: 0.01em;
+  --dds-font-body-long-xsmall-paragraph-spacing: 1em;
+  --dds-font-lead-medium-letter-spacing: 0em;
+  --dds-font-lead-medium-paragraph-spacing: 1em;
+  --dds-font-code-medium-letter-spacing: 0em;
+  --dds-font-code-medium-paragraph-spacing: 1em;
+  --dds-font-label-medium-letter-spacing: 0.01em;
+  --dds-font-label-medium-paragraph-spacing: 1em;
+  --dds-font-body-short-large-letter-spacing: 0em;
+  --dds-font-body-short-large-paragraph-spacing: 1em;
+  --dds-font-body-short-medium-letter-spacing: 0em;
+  --dds-font-body-short-medium-paragraph-spacing: 1em;
+  --dds-font-body-short-small-letter-spacing: 0.01em;
+  --dds-font-body-short-small-paragraph-spacing: 1em;
+  --dds-font-body-short-xsmall-letter-spacing: 0.01em;
+  --dds-font-body-short-xsmall-paragraph-spacing: 1em;
+}

package/dist/css/{ddsTokens-core.css → ddsTokens-core-light.css}

@@ -2,7 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-.dds-core {
+.dds-core-light {
   --dds-font-family-sans: 'IBM Plex Sans', Arial, sans-serif;
   --dds-font-family-monospace: 'IBM Plex Mono', 'Courier New', monospace; /* For kode */
   --dds-font-size-x5: 5rem;
@@ -20,9 +20,9 @@
   --dds-font-weight-normal: 400;
   --dds-font-weight-semi-bold: 500;
   --dds-font-weight-bold: 600;
-  --dds-font-lineheight-x1: 1.5; /* Brukes på str ×1_25 og mindre  */
-  --dds-font-lineheight-x2: 1.35; /* Brukes på str x1.5, ×2 og ×3  */
-  --dds-font-lineheight-x3: 1.2; /* Brukes på str ×3 og større */
+  --dds-font-lineheight-x1: 1.5; /* Brukes på mengetekst og artikler */
+  --dds-font-lineheight-x3: 1.2;
+  --dds-font-lineheight-x2: 1.3; /* Brukes i komponenter og overskrifter */
   --dds-font-lineheight-list: 2; /* Brukes på lister */
   --dds-font-letter-spacing-tight: -0.01em; /* Brukes på str ×2.5 og større */
   --dds-font-letter-spacing-normal: 0em; /* Brukes på str ×1 og opp til og med ×2 */
@@ -48,10 +48,6 @@
   --dds-spacing-x4: 4rem;
   --dds-spacing-x6: 6rem;
   --dds-spacing-x10: 10rem;
-  --dds-shadow-1: 1px 2px 4px 0px rgba(11, 13, 14, 10%);
-  --dds-shadow-2: 2px 4px 8px 0px rgba(11, 13, 14, 10%);
-  --dds-shadow-3: 4px 8px 16px 0px rgba(11, 13, 14, 10%);
-  --dds-shadow-4: 8px 16px 32px 0px rgba(11, 13, 14, 10%);
   --dds-grid-xs-gutter-size: 16px;
   --dds-grid-xs-count: 4;
   --dds-grid-sm-gutter-size: 16px;
@@ -62,9 +58,10 @@
   --dds-grid-md-count: 12;
   --dds-grid-xl-gutter-size: 24px;
   --dds-grid-xl-count: 12;
-  --dds-icon-size-large: 40px;
-  --dds-icon-size-medium: 24px;
-  --dds-icon-size-small: 16px;
+  --dds-size-icon-large: 40px;
+  --dds-size-icon-medium: 24px;
+  --dds-size-icon-small: 16px;
+  --dds-size-icon-component: 1.3em; /* Brukes i komponenter. Relativ til tekststørrelsen */
   --dds-breakpoint-xs: 1px;
   --dds-breakpoint-sm: 600px;
   --dds-breakpoint-md: 960px;
@@ -81,26 +78,26 @@
   --dds-zindex-sticky: 50; /* Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater */
   --dds-zindex-absolute-element: 1; /* Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder */
   --dds-color-data-10-default: #196b8f;
-  --dds-color-data-10-subtle: #96c5d9;
+  --dds-color-data-10-subtle: #93cee6;
   --dds-color-data-10-border: #196b8f;
   --dds-color-data-red-100: #f8d2d4;
   --dds-color-data-red-200: #f0a5a9;
-  --dds-color-data-red-300: #e9787e;
+  --dds-color-data-red-300: #f4858b;
   --dds-color-data-red-400: #e14b53;
   --dds-color-data-red-500: #da1e28;
   --dds-color-data-red-600: #ae1820;
   --dds-color-data-red-700: #831218;
   --dds-color-data-red-800: #570c10;
   --dds-color-data-red-900: #2c0608;
-  --dds-color-data-magenta-100: #eed3df;
-  --dds-color-data-magenta-200: #dfa5bf;
-  --dds-color-data-magenta-300: #cf789e;
-  --dds-color-data-magenta-400: #c74f84;
-  --dds-color-data-magenta-500: #b62665;
-  --dds-color-data-magenta-600: #8a1a4b;
-  --dds-color-data-magenta-700: #671438;
-  --dds-color-data-magenta-800: #440e26;
-  --dds-color-data-magenta-900: #220713;
+  --dds-color-data-magenta-100: #f7d9f2;
+  --dds-color-data-magenta-200: #edb5e4;
+  --dds-color-data-magenta-300: #e079d0;
+  --dds-color-data-magenta-400: #d54dc0;
+  --dds-color-data-magenta-500: #cb20b0;
+  --dds-color-data-magenta-600: #a21a8d;
+  --dds-color-data-magenta-700: #7a136a;
+  --dds-color-data-magenta-800: #510d46;
+  --dds-color-data-magenta-900: #290623;
   --dds-color-data-brown-100: #f0ddd5;
   --dds-color-data-brown-200: #e1bcac;
   --dds-color-data-brown-300: #d19a82;
@@ -110,7 +107,7 @@
   --dds-color-data-brown-700: #6b341c;
   --dds-color-data-brown-800: #482313;
   --dds-color-data-brown-900: #241109;
-  --dds-color-data-olive-100: #e6e4d0;
+  --dds-color-data-olive-100: #e9e7cd;
   --dds-color-data-olive-200: #cdc9a1;
   --dds-color-data-olive-300: #b3ae71;
   --dds-color-data-olive-400: #989344;
@@ -119,15 +116,15 @@
   --dds-color-data-olive-700: #4a460e;
   --dds-color-data-olive-800: #322f0a;
   --dds-color-data-olive-900: #191705;
-  --dds-color-data-green-100: #d1e6d7;
-  --dds-color-data-green-200: #a3ccaf;
-  --dds-color-data-green-300: #75b388;
-  --dds-color-data-green-400: #479960;
-  --dds-color-data-green-500: #198038;
-  --dds-color-data-green-600: #14662d;
-  --dds-color-data-green-700: #0f4d22;
-  --dds-color-data-green-800: #0a3316;
-  --dds-color-data-green-900: #051a0b;
+  --dds-color-data-green-100: #d7e8cf;
+  --dds-color-data-green-200: #aed19e;
+  --dds-color-data-green-300: #95c280;
+  --dds-color-data-green-400: #619947;
+  --dds-color-data-green-500: #3a8019;
+  --dds-color-data-green-600: #2e6614;
+  --dds-color-data-green-700: #234d0f;
+  --dds-color-data-green-800: #17330a;
+  --dds-color-data-green-900: #0c1a05;
   --dds-color-data-teal-100: #c2e2e1;
   --dds-color-data-teal-200: #90ccc9;
   --dds-color-data-teal-300: #5dafad;
@@ -137,10 +134,10 @@
   --dds-color-data-teal-700: #004b49;
   --dds-color-data-teal-800: #003230;
   --dds-color-data-teal-900: #001918;
-  --dds-color-data-deepblue-100: #b9d7e5;
-  --dds-color-data-deepblue-200: #96c5d9;
-  --dds-color-data-deepblue-300: #6aa8c3;
-  --dds-color-data-deepblue-400: #3e8bac;
+  --dds-color-data-deepblue-100: #c6e3f1;
+  --dds-color-data-deepblue-200: #93cee6;
+  --dds-color-data-deepblue-300: #62abcb;
+  --dds-color-data-deepblue-400: #358fb5;
   --dds-color-data-deepblue-500: #196b8f;
   --dds-color-data-deepblue-600: #135774;
   --dds-color-data-deepblue-700: #0e455e;
@@ -182,15 +179,15 @@
   --dds-color-data-03-default: #727272;
   --dds-color-data-03-subtle: #c7c7c7;
   --dds-color-data-03-border: #727272;
-  --dds-color-data-04-default: #198038;
-  --dds-color-data-04-subtle: #a3ccaf;
-  --dds-color-data-04-border: #198038;
+  --dds-color-data-04-default: #3a8019;
+  --dds-color-data-04-subtle: #aed19e;
+  --dds-color-data-04-border: #3a8019;
   --dds-color-data-05-default: #8a3ffc;
   --dds-color-data-05-subtle: #d0b2fe;
   --dds-color-data-05-border: #8a3ffc;
-  --dds-color-data-06-default: #b62665;
-  --dds-color-data-06-subtle: #dfa5bf;
-  --dds-color-data-06-border: #b62665;
+  --dds-color-data-06-default: #cb20b0;
+  --dds-color-data-06-subtle: #edb5e4;
+  --dds-color-data-06-border: #cb20b0;
   --dds-color-data-07-default: #7c7518;
   --dds-color-data-07-subtle: #cdc9a1;
   --dds-color-data-07-border: #7c7518;
@@ -247,6 +244,7 @@
   --dds-color-text-medium: #3a4146; /* Label, etc */
   --dds-color-text-subtle: #545c62; /* Disabled or less important text */
   --dds-color-text-on-inverse: #ffffff; /* On surface.inverse */
+  --dds-color-text-danger: #ad2c2c; /* Error text on paper, or default or subtle surafce/bg */
   --dds-color-text-on-action: #ffffff; /* On surface.action (primary and danger button) */
   --dds-color-text-on-status-default: #0b0d0e; /* On default status surfaces */
   --dds-color-text-on-status-strong: #0b0d0e; /* On status surfaces with strong prop */
@@ -256,7 +254,20 @@
   --dds-color-text-action-visited: #7f29b4; /* Used for visited links */
   --dds-color-text-action-visited-on-inverse: #cca9e1; /* Used for visited links on inverse surfaces */
   --dds-color-text-on-notification: #ffffff; /* Used on surface.notification */
-  --dds-color-text-danger: #ad2c2c; /* Error text on paper, or default or subtle surafce/bg */
+  --dds-color-text-on-primary-default: #ffffff; /* Used on brand.primary-default */
+  --dds-color-text-on-primary-subtle: #0b0d0e; /* Used on brand.primary-subtle */
+  --dds-color-text-on-primary-medium: #ffffff; /* Used on brand.primary-medium */
+  --dds-color-text-on-primary-strong: #ffffff; /* Used on brand.primary-strong */
+  --dds-color-text-on-secondary-default: #0b0d0e; /* Used on brand.secondary-default */
+  --dds-color-text-on-secondary-subtle: #0b0d0e; /* Used on brand.secondary-subtle */
+  --dds-color-text-on-secondary-medium: #0b0d0e; /* Used on brand.secondary-medium */
+  --dds-color-text-on-secondary-strong: #ffffff; /* Used on brand.secondary-strong */
+  --dds-color-text-on-tertiary-default: #0b0d0e; /* Used on brand.tertiary-default */
+  --dds-color-text-on-tertiary-subtle: #0b0d0e; /* Used on brand.tertiary-subtle */
+  --dds-color-text-on-tertiary-medium: #0b0d0e; /* Used on brand.tertiary-medium */
+  --dds-color-text-on-tertiary-strong: #0b0d0e; /* Used on brand.tertiary-strong */
+  --dds-color-text-on-data-default: #ffffff; /* Used on data. with default value */
+  --dds-color-text-on-data-subtle: #0b0d0e; /* Used on data. with subtle value */
   --dds-color-icon-default: #0b0d0e; /* Often used with text.default */
   --dds-color-icon-medium: #3a4146; /* Often used with text.medium */
   --dds-color-icon-subtle: #545c62; /* Often used with text.subtle */
@@ -287,25 +298,32 @@
   --dds-color-brand-tertiary-strong: #d45d32; /* Tertiary brand color */
   --dds-color-focus-outside: #2a4b61; /* Contrast to .inside */
   --dds-color-focus-inside: #f1f8fd; /* Contrast to .outside */
-  --dds-font-label-medium: 600 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Label for form components */
-  --dds-font-body-xsmall: 400 0.75rem/1.5 'IBM Plex Sans', Arial, sans-serif; /*  used with xsmall button and input fields */
-  --dds-font-body-small: 400 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif; /*  used with small button and input fields */
-  --dds-font-body-medium: 400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* standard body text, used with medium button and input fields */
-  --dds-font-body-large: 400 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Used for large button and large search */
-  --dds-font-heading-xxsmall: 600 0.75rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default h6 */
-  --dds-font-heading-xsmall: 600 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default h5 */
-  --dds-font-heading-small: 600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default h4 */
-  --dds-font-heading-medium: 600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default h3 */
-  --dds-font-heading-large: 400 1.5rem/1.35 'IBM Plex Sans', Arial, sans-serif; /* Default h2 */
-  --dds-font-heading-xlarge: 400 2rem/1.35 'IBM Plex Sans', Arial, sans-serif; /* Default H1 */
-  --dds-font-heading-xxlarge: 300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.2 'IBM Plex Sans', Arial, sans-serif; /* Display or extra large page title (h1) */
-  --dds-font-lead-medium: 300 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Lead brukes som ingress når man skriver artikler etc */
-  --dds-font-code-medium: 400 1rem/1.5 'IBM Plex Mono', 'Courier New', monospace; /* Brukes for kodesnutter etc */
+  --dds-shadow-large: 8px 16px 32px 0px rgba(11, 13, 14, 10%); /* Dialoger. Eksempel: modal, drawer, popover */
+  --dds-shadow-medium: 2px 4px 8px 0px rgba(11, 13, 14, 10%); /* Dropdowns. Eksempel: overflowmenu, dropdown */
+  --dds-shadow-small: 1px 2px 4px 0px rgba(11, 13, 14, 10%); /* Eksempel: tooltip */
   --dds-border-radius-button: 2px; /* For use in button component and togglebutton */
   --dds-border-radius-surface: 4px; /* Most surfaces, for example cards, papers, messages, backgrounds in GUI */
   --dds-border-radius-input: 2px; /* All input fields, and check boxes */
   --dds-border-radius-chip: 4px; /* Chips and tags */
   --dds-border-radius-rounded: 9999px; /* Rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker */
+  --dds-font-label-medium: 600 0.875rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Label for form components */
+  --dds-font-body-long-xsmall: 400 0.75rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Xsmall body text for editorial content */
+  --dds-font-body-long-small: 400 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Small body text for editorial content */
+  --dds-font-body-long-medium: 400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Default body text for editorial content */
+  --dds-font-body-long-large: 400 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Large body text for editorial content */
+  --dds-font-heading-xxsmall: 600 0.75rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h6 */
+  --dds-font-heading-xsmall: 600 0.875rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h5 */
+  --dds-font-heading-small: 600 1rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h4 */
+  --dds-font-heading-medium: 600 1.125rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h3 */
+  --dds-font-heading-large: 400 clamp(1.25rem, 0.833rem + 1.111vw, 1.5rem)/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default h2 */
+  --dds-font-heading-xlarge: 400 clamp(1.5rem, 0.667rem + 2.222vw, 2rem)/1.3 'IBM Plex Sans', Arial, sans-serif; /* Default H1 */
+  --dds-font-heading-xxlarge: 300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.3 'IBM Plex Sans', Arial, sans-serif; /* Display or extra large page title (h1) */
+  --dds-font-lead-medium: 300 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif; /* Lead brukes som ingress når man skriver artikler etc */
+  --dds-font-code-medium: 400 1rem/1.5 'IBM Plex Mono', 'Courier New', monospace; /* Brukes for kodesnutter etc */
+  --dds-font-body-short-xsmall: 400 0.75rem/1.3 'IBM Plex Sans', Arial, sans-serif; /*  used with xsmall button and input fields */
+  --dds-font-body-short-small: 400 0.875rem/1.3 'IBM Plex Sans', Arial, sans-serif; /*  used with small button and input fields */
+  --dds-font-body-short-medium: 400 1rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Used with medium button and input fields */
+  --dds-font-body-short-large: 400 1.125rem/1.3 'IBM Plex Sans', Arial, sans-serif; /* Used for large button and large search */
   --dds-font-heading-xxlarge-letter-spacing: -0.01em;
   --dds-font-heading-xxlarge-paragraph-spacing: 0.4em;
   --dds-font-heading-xlarge-letter-spacing: 0em;
@@ -320,18 +338,26 @@
   --dds-font-heading-xsmall-paragraph-spacing: 0.4em;
   --dds-font-heading-xxsmall-letter-spacing: 0.01em;
   --dds-font-heading-xxsmall-paragraph-spacing: 0.4em;
-  --dds-font-body-large-letter-spacing: 0em;
-  --dds-font-body-large-paragraph-spacing: 1em;
-  --dds-font-body-medium-letter-spacing: 0em;
-  --dds-font-body-medium-paragraph-spacing: 1em;
-  --dds-font-body-small-letter-spacing: 0.01em;
-  --dds-font-body-small-paragraph-spacing: 1em;
-  --dds-font-body-xsmall-letter-spacing: 0.01em;
-  --dds-font-body-xsmall-paragraph-spacing: 1em;
+  --dds-font-body-long-large-letter-spacing: 0em;
+  --dds-font-body-long-large-paragraph-spacing: 1em;
+  --dds-font-body-long-medium-letter-spacing: 0em;
+  --dds-font-body-long-medium-paragraph-spacing: 1em;
+  --dds-font-body-long-small-letter-spacing: 0.01em;
+  --dds-font-body-long-small-paragraph-spacing: 1em;
+  --dds-font-body-long-xsmall-letter-spacing: 0.01em;
+  --dds-font-body-long-xsmall-paragraph-spacing: 1em;
   --dds-font-lead-medium-letter-spacing: 0em;
   --dds-font-lead-medium-paragraph-spacing: 1em;
   --dds-font-code-medium-letter-spacing: 0em;
   --dds-font-code-medium-paragraph-spacing: 1em;
   --dds-font-label-medium-letter-spacing: 0.01em;
   --dds-font-label-medium-paragraph-spacing: 1em;
+  --dds-font-body-short-large-letter-spacing: 0em;
+  --dds-font-body-short-large-paragraph-spacing: 1em;
+  --dds-font-body-short-medium-letter-spacing: 0em;
+  --dds-font-body-short-medium-paragraph-spacing: 1em;
+  --dds-font-body-short-small-letter-spacing: 0.01em;
+  --dds-font-body-short-small-paragraph-spacing: 1em;
+  --dds-font-body-short-xsmall-letter-spacing: 0.01em;
+  --dds-font-body-short-xsmall-paragraph-spacing: 1em;
 }