@felleslosninger/minid-elements 0.0.140 → 0.1.0

package/dist/designsystemet-tailwind.css

@@ -1,302 +1,211 @@
 @theme {
-  --spacing: calc(4 / 18 * 1em);
-  --radius: 0.25rem;
-  --radius-sm: min(0.25rem * 0.5, 0.25rem);
-  --radius-md: min(0.25rem, 0.25rem * 2);
-  --radius-lg: min(0.25rem * 2, 0.25rem * 5);
-  --radius-xl: min(0.25rem * 3, 0.25rem * 7);
-  --radius-full: 624.9375rem;
-  --opacity-disabled: 30%;
-  --border-width: 1px;
-  --border-width-focus: 3px;
-  --shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
-  --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);
-  --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);
-  --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);
-  --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);
-
-  /****************************** 
-  * Typography 
-   ******************************/
-  --font-*: initial;
-  --font-sans: 'Inter', 'Arial', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-sans--font-feature-settings: 'cv05' 1;
-  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-  --text-1: 0.75rem;
-  --text-2: 0.875rem;
-  --text-3: 1rem;
-  --text-4: 1.125rem;
-  --text-5: 1.3125rem;
-  --text-6: 1.5rem;
-  --text-7: 1.875rem;
-  --text-8: 2.25rem;
-  --text-9: 3rem;
-  --text-10: 3.75rem;
-  --text-heading-2xl--font-weight: 500;
-  --text-heading-2xl--line-height: 1.3;
-  --text-heading-2xl: 3.75rem;
-  --text-heading-2xl--letter-spacing: -1%;
-  --text-heading-xl--font-weight: 500;
-  --text-heading-xl--line-height: 1.3;
-  --text-heading-xl: 3rem;
-  --text-heading-xl--letter-spacing: -1%;
-  --text-heading-lg--font-weight: 500;
-  --text-heading-lg--line-height: 1.3;
-  --text-heading-lg: 2.25rem;
-  --text-heading-lg--letter-spacing: -0.5%;
-  --text-heading-md--font-weight: 500;
-  --text-heading-md--line-height: 1.3;
-  --text-heading-md: 1.875rem;
-  --text-heading-md--letter-spacing: -0.25%;
-  --text-heading-sm--font-weight: 500;
-  --text-heading-sm--line-height: 1.3;
-  --text-heading-sm: 1.5rem;
-  --text-heading-sm--letter-spacing: 0%;
-  --text-heading-xs--font-weight: 500;
-  --text-heading-xs--line-height: 1.3;
-  --text-heading-xs: 1.3125rem;
-  --text-heading-xs--letter-spacing: 0.15%;
-  --text-heading-2xs--font-weight: 500;
-  --text-heading-2xs--line-height: 1.3;
-  --text-heading-2xs: 1.125rem;
-  --text-heading-2xs--letter-spacing: 0.15%;
-  --text-body-xl--font-weight: 400;
-  --text-body-xl--line-height: 1.5;
-  --text-body-xl: 1.5rem;
-  --text-body-xl--letter-spacing: 0.5%;
-  --text-body-lg--font-weight: 400;
-  --text-body-lg--line-height: 1.5;
-  --text-body-lg: 1.3125rem;
-  --text-body-lg--letter-spacing: 0.5%;
-  --text-body-md--font-weight: 400;
-  --text-body-md--line-height: 1.5;
-  --text-body-md: 1.125rem;
-  --text-body-md--letter-spacing: 0.5%;
-  --text-body-sm--font-weight: 400;
-  --text-body-sm--line-height: 1.5;
-  --text-body-sm: 1rem;
-  --text-body-sm--letter-spacing: 0.25%;
-  --text-body-xs--font-weight: 400;
-  --text-body-xs--line-height: 1.5;
-  --text-body-xs: 0.875rem;
-  --text-body-xs--letter-spacing: 0.15%;
-  --text-body-short-xl--font-weight: 400;
-  --text-body-short-xl--line-height: 1.3;
-  --text-body-short-xl: 1.5rem;
-  --text-body-short-xl--letter-spacing: 0.5%;
-  --text-body-short-lg--font-weight: 400;
-  --text-body-short-lg--line-height: 1.3;
-  --text-body-short-lg: 1.3125rem;
-  --text-body-short-lg--letter-spacing: 0.5%;
-  --text-body-short-md--font-weight: 400;
-  --text-body-short-md--line-height: 1.3;
-  --text-body-short-md: 1.125rem;
-  --text-body-short-md--letter-spacing: 0.5%;
-  --text-body-short-sm--font-weight: 400;
-  --text-body-short-sm--line-height: 1.3;
-  --text-body-short-sm: 1rem;
-  --text-body-short-sm--letter-spacing: 0.25%;
-  --text-body-short-xs--font-weight: 400;
-  --text-body-short-xs--line-height: 1.3;
-  --text-body-short-xs: 0.875rem;
-  --text-body-short-xs--letter-spacing: 0.15%;
-  --text-body-long-xl--font-weight: 400;
-  --text-body-long-xl--line-height: 1.7;
-  --text-body-long-xl: 1.5rem;
-  --text-body-long-xl--letter-spacing: 0.5%;
-  --text-body-long-lg--font-weight: 400;
-  --text-body-long-lg--line-height: 1.7;
-  --text-body-long-lg: 1.3125rem;
-  --text-body-long-lg--letter-spacing: 0.5%;
-  --text-body-long-md--font-weight: 400;
-  --text-body-long-md--line-height: 1.7;
-  --text-body-long-md: 1.125rem;
-  --text-body-long-md--letter-spacing: 0.5%;
-  --text-body-long-sm--font-weight: 400;
-  --text-body-long-sm--line-height: 1.7;
-  --text-body-long-sm: 1rem;
-  --text-body-long-sm--letter-spacing: 0.25%;
-  --text-body-long-xs--font-weight: 400;
-  --text-body-long-xs--line-height: 1.7;
-  --text-body-long-xs: 0.875rem;
-  --text-body-long-xs--letter-spacing: 0.15%;
-  --leading-sm: 1.3;
-  --leading-md: 1.5;
-  --leading-lg: 1.7;
-  --tracking-1: -1%;
-  --tracking-2: -0.5%;
-  --tracking-3: -0.25%;
-  --tracking-4: -0.15%;
-  --tracking-5: 0%;
-  --tracking-6: 0.15%;
-  --tracking-7: 0.25%;
-  --tracking-8: 0.5%;
-  --tracking-9: 1.5%;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-regular: 400;
-
-  /****************************** 
-  * Color 
-   ******************************/
-  --color-*: initial;
-  --color-white: #fff;
-  --color-black: #000;
-
-  --color-accent-surface: #ffffff;
-  --color-accent-surface-tinted: #ddeaf6;
-  --color-accent-surface-hover: #c7ddf0;
-  --color-accent-surface-active: #afcee9;
-  --color-accent-base: #0062BA;
-  --color-accent-base-hover: #004f96;
-  --color-accent-base-active: #003d75;
-  --color-accent-base-contrast-subtle: #dbe9f5;
-  --color-accent-base-contrast: #ffffff;
-  --color-neutral-surface: #ffffff;
-  --color-neutral-surface-tinted: #e7e9ea;
-  --color-neutral-surface-hover: #d8dadd;
-  --color-neutral-surface-active: #c7cacf;
-  --color-neutral-base: #1E2B3C;
-  --color-neutral-base-hover: #313d4d;
-  --color-neutral-base-active: #444f5d;
-  --color-neutral-base-contrast-subtle: #babec4;
-  --color-neutral-base-contrast: #ffffff;
-  --color-brand1-surface: #ffffff;
-  --color-brand1-surface-tinted: #fde2e3;
-  --color-brand1-surface-hover: #fccfd1;
-  --color-brand1-surface-active: #fababc;
-  --color-brand1-base: #F45F63;
-  --color-brand1-base-hover: #f78588;
-  --color-brand1-base-active: #f9a6a8;
-  --color-brand1-base-contrast-subtle: #020101;
-  --color-brand1-base-contrast: #000000;
-  --color-brand2-surface: #ffffff;
-  --color-brand2-surface-tinted: #f8e7c1;
-  --color-brand2-surface-hover: #f3d797;
-  --color-brand2-surface-active: #edc567;
-  --color-brand2-base: #E5AA20;
-  --color-brand2-base-hover: #c9951c;
-  --color-brand2-base-active: #af8218;
-  --color-brand2-base-contrast-subtle: #2c2006;
-  --color-brand2-base-contrast: #000000;
-  --color-brand3-surface: #ffffff;
-  --color-brand3-surface-tinted: #d5ecfd;
-  --color-brand3-surface-hover: #b9dffc;
-  --color-brand3-surface-active: #99d0fa;
-  --color-brand3-base: #1E98F5;
-  --color-brand3-base-hover: #53b0f7;
-  --color-brand3-base-active: #81c5f9;
-  --color-brand3-base-contrast-subtle: #010507;
-  --color-brand3-base-contrast: #000000;
-  --color-success-surface: #ffffff;
-  --color-success-surface-tinted: #daeddd;
-  --color-success-surface-hover: #c3e2c7;
-  --color-success-surface-active: #a8d5ae;
-  --color-success-base: #068718;
-  --color-success-base-hover: #057014;
-  --color-success-base-active: #045a10;
-  --color-success-base-contrast-subtle: #fafdfb;
-  --color-success-base-contrast: #ffffff;
-  --color-danger-surface: #ffffff;
-  --color-danger-surface-tinted: #f8e4e4;
-  --color-danger-surface-hover: #f3d2d2;
-  --color-danger-surface-active: #edbfbf;
-  --color-danger-base: #C01B1B;
-  --color-danger-base-hover: #9b1616;
-  --color-danger-base-active: #791111;
-  --color-danger-base-contrast-subtle: #f7e1e1;
-  --color-danger-base-contrast: #ffffff;
-  --color-info-surface: #ffffff;
-  --color-info-surface-tinted: #dcebf6;
-  --color-info-surface-hover: #c5ddf0;
-  --color-info-surface-active: #abcfe9;
-  --color-info-base: #0A71C0;
-  --color-info-base-hover: #085d9f;
-  --color-info-base-active: #074a7e;
-  --color-info-base-contrast-subtle: #eff6fb;
-  --color-info-base-contrast: #ffffff;
-  --color-warning-surface: #ffffff;
-  --color-warning-surface-tinted: #fae6c6;
-  --color-warning-surface-hover: #f6d5a0;
-  --color-warning-surface-active: #f2c275;
-  --color-warning-base: #EA9B1B;
-  --color-warning-base-hover: #cd8818;
-  --color-warning-base-active: #b27614;
-  --color-warning-base-contrast-subtle: #271a04;
-  --color-warning-base-contrast: #000000;
-  --color-focus-inner: #ffffff;
-  --color-focus-outer: #1f2c3d;
-  --color-link-visited: #663299;
-
-  /* Text Colors */
-  --text-color-accent-subtle: #005db1;
-  --text-color-accent: #002c54;
-  --text-color-neutral-subtle: #545e6b;
-  --text-color-neutral: #1f2c3d;
-  --text-color-brand1-subtle: #9e3d40;
-  --text-color-brand1: #4b1d1e;
-  --text-color-brand2-subtle: #775811;
-  --text-color-brand2: #382908;
-  --text-color-brand3-subtle: #13619c;
-  --text-color-brand3: #092d49;
-  --text-color-success-subtle: #056d13;
-  --text-color-success: #023409;
-  --text-color-danger-subtle: #b81a1a;
-  --text-color-danger: #590d0d;
-  --text-color-info-subtle: #0860a3;
-  --text-color-info: #042d4d;
-  --text-color-warning-subtle: #80540f;
-  --text-color-warning: #3c2807;
-
-  /* Background Colors */
-  --background-color-accent: #ffffff;
-  --background-color-accent-tinted: #eef4fa;
-  --background-color-neutral: #ffffff;
-  --background-color-neutral-tinted: #f3f4f4;
-  --background-color-brand1: #ffffff;
-  --background-color-brand1-tinted: #fef0f1;
-  --background-color-brand2: #ffffff;
-  --background-color-brand2-tinted: #fbf3df;
-  --background-color-brand3: #ffffff;
-  --background-color-brand3-tinted: #eaf5fe;
-  --background-color-success: #ffffff;
-  --background-color-success-tinted: #ecf6ee;
-  --background-color-danger: #ffffff;
-  --background-color-danger-tinted: #fbf1f1;
-  --background-color-info: #ffffff;
-  --background-color-info-tinted: #edf5fa;
-  --background-color-warning: #ffffff;
-  --background-color-warning-tinted: #fcf2e2;
-
-  /* Border Colors */
-  --border-color-accent-subtle: #99c0e3;
-  --border-color-accent: #2a7cc5;
-  --border-color-accent-strong: #005db1;
-  --border-color-neutral-subtle: #b8bcc1;
-  --border-color-neutral: #717a84;
-  --border-color-neutral-strong: #545e6b;
-  --border-color-brand1-subtle: #f9a5a8;
-  --border-color-brand1: #cb4f53;
-  --border-color-brand1-strong: #9e3d40;
-  --border-color-brand2-subtle: #e8b43a;
-  --border-color-brand2: #9a7216;
-  --border-color-brand2-strong: #775811;
-  --border-color-brand3-subtle: #7bc3f9;
-  --border-color-brand3: #197dc9;
-  --border-color-brand3-strong: #13619c;
-  --border-color-success-subtle: #8fc997;
-  --border-color-success: #108c22;
-  --border-color-success-strong: #056d13;
-  --border-color-danger-subtle: #e8adad;
-  --border-color-danger: #ce4d4d;
-  --border-color-danger-strong: #b81a1a;
-  --border-color-info-subtle: #94c1e3;
-  --border-color-info: #1f7dc5;
-  --border-color-info-strong: #0860a3;
-  --border-color-warning-subtle: #eeb04c;
-  --border-color-warning: #a56d13;
-  --border-color-warning-strong: #80540f;
+  --font-sans: var(--ds-font-family);
+  --radius-lg: var(--ds-border-radius-lg);
+  --radius-md: var(--ds-border-radius-md);
+  --radius-sm: var(--ds-border-radius-sm);
+  --radius-xl: var(--ds-border-radius-xl);
+  --color-accent-background-default: var(--ds-color-accent-background-default);
+  --color-accent-background-tinted: var(--ds-color-accent-background-tinted);
+  --color-accent-base-active: var(--ds-color-accent-base-active);
+  --color-accent-base-contrast-default: var(--ds-color-accent-base-contrast-default);
+  --color-accent-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle);
+  --color-accent-base-default: var(--ds-color-accent-base-default);
+  --color-accent-base-hover: var(--ds-color-accent-base-hover);
+  --color-accent-border-default: var(--ds-color-accent-border-default);
+  --color-accent-border-strong: var(--ds-color-accent-border-strong);
+  --color-accent-border-subtle: var(--ds-color-accent-border-subtle);
+  --color-accent-surface-active: var(--ds-color-accent-surface-active);
+  --color-accent-surface-default: var(--ds-color-accent-surface-default);
+  --color-accent-surface-hover: var(--ds-color-accent-surface-hover);
+  --color-accent-surface-tinted: var(--ds-color-accent-surface-tinted);
+  --color-accent-text-default: var(--ds-color-accent-text-default);
+  --color-accent-text-subtle: var(--ds-color-accent-text-subtle);
+  --color-background-default: var(--ds-color-background-default);
+  --color-background-tinted: var(--ds-color-background-tinted);
+  --color-base-active: var(--ds-color-base-active);
+  --color-base-contrast-default: var(--ds-color-base-contrast-default);
+  --color-base-contrast-subtle: var(--ds-color-base-contrast-subtle);
+  --color-base-default: var(--ds-color-base-default);
+  --color-base-hover: var(--ds-color-base-hover);
+  --color-border-default: var(--ds-color-border-default);
+  --color-border-strong: var(--ds-color-border-strong);
+  --color-border-subtle: var(--ds-color-border-subtle);
+  --color-brand1-background-default: var(--ds-color-brand1-background-default);
+  --color-brand1-background-tinted: var(--ds-color-brand1-background-tinted);
+  --color-brand1-base-active: var(--ds-color-brand1-base-active);
+  --color-brand1-base-contrast-default: var(--ds-color-brand1-base-contrast-default);
+  --color-brand1-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle);
+  --color-brand1-base-default: var(--ds-color-brand1-base-default);
+  --color-brand1-base-hover: var(--ds-color-brand1-base-hover);
+  --color-brand1-border-default: var(--ds-color-brand1-border-default);
+  --color-brand1-border-strong: var(--ds-color-brand1-border-strong);
+  --color-brand1-border-subtle: var(--ds-color-brand1-border-subtle);
+  --color-brand1-surface-active: var(--ds-color-brand1-surface-active);
+  --color-brand1-surface-default: var(--ds-color-brand1-surface-default);
+  --color-brand1-surface-hover: var(--ds-color-brand1-surface-hover);
+  --color-brand1-surface-tinted: var(--ds-color-brand1-surface-tinted);
+  --color-brand1-text-default: var(--ds-color-brand1-text-default);
+  --color-brand1-text-subtle: var(--ds-color-brand1-text-subtle);
+  --color-brand2-background-default: var(--ds-color-brand2-background-default);
+  --color-brand2-background-tinted: var(--ds-color-brand2-background-tinted);
+  --color-brand2-base-active: var(--ds-color-brand2-base-active);
+  --color-brand2-base-contrast-default: var(--ds-color-brand2-base-contrast-default);
+  --color-brand2-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle);
+  --color-brand2-base-default: var(--ds-color-brand2-base-default);
+  --color-brand2-base-hover: var(--ds-color-brand2-base-hover);
+  --color-brand2-border-default: var(--ds-color-brand2-border-default);
+  --color-brand2-border-strong: var(--ds-color-brand2-border-strong);
+  --color-brand2-border-subtle: var(--ds-color-brand2-border-subtle);
+  --color-brand2-surface-active: var(--ds-color-brand2-surface-active);
+  --color-brand2-surface-default: var(--ds-color-brand2-surface-default);
+  --color-brand2-surface-hover: var(--ds-color-brand2-surface-hover);
+  --color-brand2-surface-tinted: var(--ds-color-brand2-surface-tinted);
+  --color-brand2-text-default: var(--ds-color-brand2-text-default);
+  --color-brand2-text-subtle: var(--ds-color-brand2-text-subtle);
+  --color-brand3-background-default: var(--ds-color-brand3-background-default);
+  --color-brand3-background-tinted: var(--ds-color-brand3-background-tinted);
+  --color-brand3-base-active: var(--ds-color-brand3-base-active);
+  --color-brand3-base-contrast-default: var(--ds-color-brand3-base-contrast-default);
+  --color-brand3-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle);
+  --color-brand3-base-default: var(--ds-color-brand3-base-default);
+  --color-brand3-base-hover: var(--ds-color-brand3-base-hover);
+  --color-brand3-border-default: var(--ds-color-brand3-border-default);
+  --color-brand3-border-strong: var(--ds-color-brand3-border-strong);
+  --color-brand3-border-subtle: var(--ds-color-brand3-border-subtle);
+  --color-brand3-surface-active: var(--ds-color-brand3-surface-active);
+  --color-brand3-surface-default: var(--ds-color-brand3-surface-default);
+  --color-brand3-surface-hover: var(--ds-color-brand3-surface-hover);
+  --color-brand3-surface-tinted: var(--ds-color-brand3-surface-tinted);
+  --color-brand3-text-default: var(--ds-color-brand3-text-default);
+  --color-brand3-text-subtle: var(--ds-color-brand3-text-subtle);
+  --color-danger-background-default: var(--ds-color-danger-background-default);
+  --color-danger-background-tinted: var(--ds-color-danger-background-tinted);
+  --color-danger-base-active: var(--ds-color-danger-base-active);
+  --color-danger-base-contrast-default: var(--ds-color-danger-base-contrast-default);
+  --color-danger-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle);
+  --color-danger-base-default: var(--ds-color-danger-base-default);
+  --color-danger-base-hover: var(--ds-color-danger-base-hover);
+  --color-danger-border-default: var(--ds-color-danger-border-default);
+  --color-danger-border-strong: var(--ds-color-danger-border-strong);
+  --color-danger-border-subtle: var(--ds-color-danger-border-subtle);
+  --color-danger-surface-active: var(--ds-color-danger-surface-active);
+  --color-danger-surface-default: var(--ds-color-danger-surface-default);
+  --color-danger-surface-hover: var(--ds-color-danger-surface-hover);
+  --color-danger-surface-tinted: var(--ds-color-danger-surface-tinted);
+  --color-danger-text-default: var(--ds-color-danger-text-default);
+  --color-danger-text-subtle: var(--ds-color-danger-text-subtle);
+  --color-info-background-default: var(--ds-color-info-background-default);
+  --color-info-background-tinted: var(--ds-color-info-background-tinted);
+  --color-info-base-active: var(--ds-color-info-base-active);
+  --color-info-base-contrast-default: var(--ds-color-info-base-contrast-default);
+  --color-info-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle);
+  --color-info-base-default: var(--ds-color-info-base-default);
+  --color-info-base-hover: var(--ds-color-info-base-hover);
+  --color-info-border-default: var(--ds-color-info-border-default);
+  --color-info-border-strong: var(--ds-color-info-border-strong);
+  --color-info-border-subtle: var(--ds-color-info-border-subtle);
+  --color-info-surface-active: var(--ds-color-info-surface-active);
+  --color-info-surface-default: var(--ds-color-info-surface-default);
+  --color-info-surface-hover: var(--ds-color-info-surface-hover);
+  --color-info-surface-tinted: var(--ds-color-info-surface-tinted);
+  --color-info-text-default: var(--ds-color-info-text-default);
+  --color-info-text-subtle: var(--ds-color-info-text-subtle);
+  --color-neutral-background-default: var(--ds-color-neutral-background-default);
+  --color-neutral-background-tinted: var(--ds-color-neutral-background-tinted);
+  --color-neutral-base-active: var(--ds-color-neutral-base-active);
+  --color-neutral-base-contrast-default: var(--ds-color-neutral-base-contrast-default);
+  --color-neutral-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle);
+  --color-neutral-base-default: var(--ds-color-neutral-base-default);
+  --color-neutral-base-hover: var(--ds-color-neutral-base-hover);
+  --color-neutral-border-default: var(--ds-color-neutral-border-default);
+  --color-neutral-border-strong: var(--ds-color-neutral-border-strong);
+  --color-neutral-border-subtle: var(--ds-color-neutral-border-subtle);
+  --color-neutral-surface-active: var(--ds-color-neutral-surface-active);
+  --color-neutral-surface-default: var(--ds-color-neutral-surface-default);
+  --color-neutral-surface-hover: var(--ds-color-neutral-surface-hover);
+  --color-neutral-surface-tinted: var(--ds-color-neutral-surface-tinted);
+  --color-neutral-text-default: var(--ds-color-neutral-text-default);
+  --color-neutral-text-subtle: var(--ds-color-neutral-text-subtle);
+  --color-success-background-default: var(--ds-color-success-background-default);
+  --color-success-background-tinted: var(--ds-color-success-background-tinted);
+  --color-success-base-active: var(--ds-color-success-base-active);
+  --color-success-base-contrast-default: var(--ds-color-success-base-contrast-default);
+  --color-success-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle);
+  --color-success-base-default: var(--ds-color-success-base-default);
+  --color-success-base-hover: var(--ds-color-success-base-hover);
+  --color-success-border-default: var(--ds-color-success-border-default);
+  --color-success-border-strong: var(--ds-color-success-border-strong);
+  --color-success-border-subtle: var(--ds-color-success-border-subtle);
+  --color-success-surface-active: var(--ds-color-success-surface-active);
+  --color-success-surface-default: var(--ds-color-success-surface-default);
+  --color-success-surface-hover: var(--ds-color-success-surface-hover);
+  --color-success-surface-tinted: var(--ds-color-success-surface-tinted);
+  --color-success-text-default: var(--ds-color-success-text-default);
+  --color-success-text-subtle: var(--ds-color-success-text-subtle);
+  --color-surface-active: var(--ds-color-surface-active);
+  --color-surface-default: var(--ds-color-surface-default);
+  --color-surface-hover: var(--ds-color-surface-hover);
+  --color-surface-tinted: var(--ds-color-surface-tinted);
+  --color-text-default: var(--ds-color-text-default);
+  --color-text-subtle: var(--ds-color-text-subtle);
+  --color-warning-background-default: var(--ds-color-warning-background-default);
+  --color-warning-background-tinted: var(--ds-color-warning-background-tinted);
+  --color-warning-base-active: var(--ds-color-warning-base-active);
+  --color-warning-base-contrast-default: var(--ds-color-warning-base-contrast-default);
+  --color-warning-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle);
+  --color-warning-base-default: var(--ds-color-warning-base-default);
+  --color-warning-base-hover: var(--ds-color-warning-base-hover);
+  --color-warning-border-default: var(--ds-color-warning-border-default);
+  --color-warning-border-strong: var(--ds-color-warning-border-strong);
+  --color-warning-border-subtle: var(--ds-color-warning-border-subtle);
+  --color-warning-surface-active: var(--ds-color-warning-surface-active);
+  --color-warning-surface-default: var(--ds-color-warning-surface-default);
+  --color-warning-surface-hover: var(--ds-color-warning-surface-hover);
+  --color-warning-surface-tinted: var(--ds-color-warning-surface-tinted);
+  --color-warning-text-default: var(--ds-color-warning-text-default);
+  --color-warning-text-subtle: var(--ds-color-warning-text-subtle);
+  --font-weight-medium: var(--ds-font-weight-medium);
+  --font-weight-regular: var(--ds-font-weight-regular);
+  --font-weight-semibold: var(--ds-font-weight-semibold);
+  --spacing-0: var(--ds-size-0);
+  --spacing-1: var(--ds-size-1);
+  --spacing-2: var(--ds-size-2);
+  --spacing-3: var(--ds-size-3);
+  --spacing-4: var(--ds-size-4);
+  --spacing-5: var(--ds-size-5);
+  --spacing-6: var(--ds-size-6);
+  --spacing-7: var(--ds-size-7);
+  --spacing-8: var(--ds-size-8);
+  --spacing-9: var(--ds-size-9);
+  --spacing-10: var(--ds-size-10);
+  --spacing-11: var(--ds-size-11);
+  --spacing-12: var(--ds-size-12);
+  --spacing-13: var(--ds-size-13);
+  --spacing-14: var(--ds-size-14);
+  --spacing-15: var(--ds-size-15);
+  --spacing-18: var(--ds-size-18);
+  --spacing-22: var(--ds-size-22);
+  --spacing-26: var(--ds-size-26);
+  --spacing-30: var(--ds-size-30);
 }
+[data-color] {
+      --color-background-default: var(--ds-color-background-default);
+      --color-background-tinted: var(--ds-color-background-tinted);
+      --color-surface-default: var(--ds-color-surface-default);
+      --color-surface-tinted: var(--ds-color-surface-tinted);
+      --color-surface-hover: var(--ds-color-surface-hover);
+      --color-surface-active: var(--ds-color-surface-active);
+      --color-border-subtle: var(--ds-color-border-subtle);
+      --color-border-default: var(--ds-color-border-default);
+      --color-border-strong: var(--ds-color-border-strong);
+      --color-text-subtle: var(--ds-color-text-subtle);
+      --color-text-default: var(--ds-color-text-default);
+      --color-base-default: var(--ds-color-base-default);
+      --color-base-hover: var(--ds-color-base-hover);
+      --color-base-active: var(--ds-color-base-active);
+      --color-base-contrast-subtle: var(--ds-color-base-contrast-subtle);
+      --color-base-contrast-default: var(--ds-color-base-contrast-default);
+    }
 @utility focus-ring {
   @apply ring-focus-inner outline-focus-outer ring-[3px] outline-[3px] outline-offset-[3px];
 }
@@ -305,6 +214,57 @@
   @apply ring-focus-inner outline-focus-outer ring-2 outline-2 outline-offset-2;
 }
 
+/*
+ * Custom utilities for ambiguous bare-name color classes.
+ * Tailwind v4 maps text-*, bg-*, border-* all to --color-*, but
+ * Designsystemet has separate tokens for text/background/border.
+ */
+@utility bg-accent {
+  background-color: var(--ds-color-accent-background-default);
+}
+@utility text-accent {
+  color: var(--ds-color-accent-text-default);
+}
+@utility bg-neutral {
+  background-color: var(--ds-color-neutral-background-default);
+}
+@utility text-neutral {
+  color: var(--ds-color-neutral-text-default);
+}
+@utility border-neutral {
+  border-color: var(--ds-color-neutral-border-default);
+}
+@utility text-neutral-subtle {
+  color: var(--ds-color-neutral-text-subtle);
+}
+@utility border-neutral-subtle {
+  border-color: var(--ds-color-neutral-border-subtle);
+}
+@utility text-danger {
+  color: var(--ds-color-danger-text-default);
+}
+@utility border-danger {
+  border-color: var(--ds-color-danger-border-default);
+}
+@utility text-info {
+  color: var(--ds-color-info-text-default);
+}
+@utility border-info {
+  border-color: var(--ds-color-info-border-default);
+}
+@utility text-success {
+  color: var(--ds-color-success-text-default);
+}
+@utility border-success {
+  border-color: var(--ds-color-success-border-default);
+}
+@utility text-warning {
+  color: var(--ds-color-warning-text-default);
+}
+@utility border-warning {
+  border-color: var(--ds-color-warning-border-default);
+}
+
 @custom-variant slotted (& ::slotted(*));
 
 @theme {
@@ -312,6 +272,104 @@
   --animate-spin-slow: spin 2.2s linear infinite;
   --animate-fade-out: fade-out 200ms ease-in forwards;
 
+  /* Shorthand aliases: strip "-default" suffix from base/surface tokens */
+  --color-accent-base: var(--ds-color-accent-base-default);
+  --color-accent-base-contrast: var(--ds-color-accent-base-contrast-default);
+  --color-danger-base: var(--ds-color-danger-base-default);
+  --color-danger-base-contrast: var(--ds-color-danger-base-contrast-default);
+  --color-neutral-base: var(--ds-color-neutral-base-default);
+  --color-neutral-base-contrast: var(--ds-color-neutral-base-contrast-default);
+  --color-neutral-surface: var(--ds-color-neutral-surface-default);
+  --color-accent-surface: var(--ds-color-accent-surface-default);
+
+  /* Tinted shorthands → surface-tinted */
+  --color-accent-tinted: var(--ds-color-accent-surface-tinted);
+  --color-danger-tinted: var(--ds-color-danger-surface-tinted);
+  --color-info-tinted: var(--ds-color-info-surface-tinted);
+
+  /* Subtle shorthands → text-subtle */
+  --color-accent-subtle: var(--ds-color-accent-text-subtle);
+  --color-danger-subtle: var(--ds-color-danger-text-subtle);
+  --color-info-subtle: var(--ds-color-info-text-subtle);
+  --color-success-subtle: var(--ds-color-success-text-subtle);
+  --color-warning-subtle: var(--ds-color-warning-text-subtle);
+
+  /* Border strength shorthands */
+  --color-accent-strong: var(--ds-color-accent-border-strong);
+
+  /* Focus and link colors */
+  --color-focus-inner: var(--ds-color-focus-inner);
+  --color-focus-outer: var(--ds-color-focus-outer);
+  --color-link-visited: var(--ds-link-color-visited);
+
+  /* Shadows */
+  --shadow-md: var(--ds-shadow-md);
+  --shadow-xl: var(--ds-shadow-xl);
+
+  /* Line heights */
+  --leading-sm: var(--ds-line-height-sm);
+  --leading-md: var(--ds-line-height-md);
+  --leading-lg: var(--ds-line-height-lg);
+
+  /* Opacity */
+  --opacity-disabled: var(--ds-opacity-disabled);
+
+  /* Border widths */
+  --border-width: var(--ds-border-width-default);
+  --border-width-focus: var(--ds-border-width-focus);
+
+  /* Typography: headings */
+  --text-heading-2xl: var(--ds-heading-2xl-font-size);
+  --text-heading-2xl--font-weight: var(--ds-heading-2xl-font-weight);
+  --text-heading-2xl--line-height: var(--ds-heading-2xl-line-height);
+  --text-heading-2xl--letter-spacing: var(--ds-heading-2xl-letter-spacing);
+  --text-heading-xl: var(--ds-heading-xl-font-size);
+  --text-heading-xl--font-weight: var(--ds-heading-xl-font-weight);
+  --text-heading-xl--line-height: var(--ds-heading-xl-line-height);
+  --text-heading-xl--letter-spacing: var(--ds-heading-xl-letter-spacing);
+  --text-heading-lg: var(--ds-heading-lg-font-size);
+  --text-heading-lg--font-weight: var(--ds-heading-lg-font-weight);
+  --text-heading-lg--line-height: var(--ds-heading-lg-line-height);
+  --text-heading-lg--letter-spacing: var(--ds-heading-lg-letter-spacing);
+  --text-heading-md: var(--ds-heading-md-font-size);
+  --text-heading-md--font-weight: var(--ds-heading-md-font-weight);
+  --text-heading-md--line-height: var(--ds-heading-md-line-height);
+  --text-heading-md--letter-spacing: var(--ds-heading-md-letter-spacing);
+  --text-heading-sm: var(--ds-heading-sm-font-size);
+  --text-heading-sm--font-weight: var(--ds-heading-sm-font-weight);
+  --text-heading-sm--line-height: var(--ds-heading-sm-line-height);
+  --text-heading-sm--letter-spacing: var(--ds-heading-sm-letter-spacing);
+  --text-heading-xs: var(--ds-heading-xs-font-size);
+  --text-heading-xs--font-weight: var(--ds-heading-xs-font-weight);
+  --text-heading-xs--line-height: var(--ds-heading-xs-line-height);
+  --text-heading-xs--letter-spacing: var(--ds-heading-xs-letter-spacing);
+  --text-heading-2xs: var(--ds-heading-2xs-font-size);
+  --text-heading-2xs--font-weight: var(--ds-heading-2xs-font-weight);
+  --text-heading-2xs--line-height: var(--ds-heading-2xs-line-height);
+  --text-heading-2xs--letter-spacing: var(--ds-heading-2xs-letter-spacing);
+
+  /* Typography: body */
+  --text-body-xl: var(--ds-body-xl-font-size);
+  --text-body-xl--font-weight: var(--ds-body-xl-font-weight);
+  --text-body-xl--line-height: var(--ds-body-xl-line-height);
+  --text-body-xl--letter-spacing: var(--ds-body-xl-letter-spacing);
+  --text-body-lg: var(--ds-body-lg-font-size);
+  --text-body-lg--font-weight: var(--ds-body-lg-font-weight);
+  --text-body-lg--line-height: var(--ds-body-lg-line-height);
+  --text-body-lg--letter-spacing: var(--ds-body-lg-letter-spacing);
+  --text-body-md: var(--ds-body-md-font-size);
+  --text-body-md--font-weight: var(--ds-body-md-font-weight);
+  --text-body-md--line-height: var(--ds-body-md-line-height);
+  --text-body-md--letter-spacing: var(--ds-body-md-letter-spacing);
+  --text-body-sm: var(--ds-body-sm-font-size);
+  --text-body-sm--font-weight: var(--ds-body-sm-font-weight);
+  --text-body-sm--line-height: var(--ds-body-sm-line-height);
+  --text-body-sm--letter-spacing: var(--ds-body-sm-letter-spacing);
+  --text-body-xs: var(--ds-body-xs-font-size);
+  --text-body-xs--font-weight: var(--ds-body-xs-font-weight);
+  --text-body-xs--line-height: var(--ds-body-xs-line-height);
+  --text-body-xs--letter-spacing: var(--ds-body-xs-letter-spacing);
+
   @keyframes dash {
     0% {
       stroke-dasharray: 1, 150;