@digdir/designsystemet 0.1.0-alpha.11

.github/workflows/npm-build-css.yml

@@ -18,7 +18,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '22.x'
+          node-version: '21.x'
 
       - name: Install dependencies
         run: npm ci

css/theme1.css

@@ -1,3 +1,6 @@
-@import url('./theme1/dark.css');
+@import url('./theme1/color-mode/light.css');
 @import url('./theme1/light.css');
-@import url('./theme1/typography.css');
+@import url('./theme1/color-mode/dark.css');
+@import url('./theme1/typography.css');
+@import url('./theme1/semantic.css');
+@import url('./theme1/dark.css');

css/theme1/semantic.css

@@ -0,0 +1,102 @@
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+:root {
+  --ds-typography-heading-2xl: 500 3.75rem/1.3 'Inter';
+  --ds-typography-heading-xl: 500 3rem/1.3 'Inter';
+  --ds-typography-heading-lg: 500 2.25rem/1.3 'Inter';
+  --ds-typography-heading-md: 500 1.875rem/1.3 'Inter';
+  --ds-typography-heading-sm: 500 1.5rem/1.3 'Inter';
+  --ds-typography-heading-xs: 500 1.3125rem/1.3 'Inter';
+  --ds-typography-heading-2xs: 500 1.125rem/1.3 'Inter';
+  --ds-typography-ingress-lg: 400 1.875rem/1.7 'Inter';
+  --ds-typography-ingress-md: 400 1.5rem/1.7 'Inter';
+  --ds-typography-ingress-sm: 400 1.3125rem/1.7 'Inter';
+  --ds-typography-ingress-xs: 400 1.125rem/1.7 'Inter';
+  --ds-typography-paragraph-lg: 400 1.3125rem/1.5 'Inter';
+  --ds-typography-paragraph-md: 400 1.125rem/1.5 'Inter';
+  --ds-typography-paragraph-sm: 400 1rem/1.5 'Inter';
+  --ds-typography-paragraph-xs: 400 0.875rem/1.5 'Inter';
+  --ds-typography-paragraph-short-lg: 400 1.3125rem/1.3 'Inter';
+  --ds-typography-paragraph-short-md: 400 1.125rem/1.3 'Inter';
+  --ds-typography-paragraph-short-sm: 400 1rem/1.3 'Inter';
+  --ds-typography-paragraph-short-xs: 400 0.875rem/1.3 'Inter';
+  --ds-typography-paragraph-long-lg: 400 1.125rem/1.7 'Inter';
+  --ds-typography-paragraph-long-md: 400 1rem/1.7 'Inter';
+  --ds-typography-paragraph-long-sm: 400 0.875rem/1.7 'Inter';
+  --ds-typography-paragraph-long-xs: 400 0.8125rem/1.7 'Inter';
+  --ds-typography-label-lg: 500 1.3125rem/1.3 'Inter';
+  --ds-typography-label-md: 500 1.125rem/1.3 'Inter';
+  --ds-typography-label-sm: 500 1rem/1.3 'Inter';
+  --ds-typography-label-xs: 500 0.875rem/1.3 'Inter';
+  --ds-typography-error_message-lg: 400 1.3125rem/1.3 'Inter';
+  --ds-typography-error_message-md: 400 1.125rem/1.3 'Inter';
+  --ds-typography-error_message-sm: 400 1rem/1.3 'Inter';
+  --ds-typography-error_message-xs: 400 0.875rem/1.3 'Inter';
+  --ds-disabled-opacity: 30%;
+  --ds-border-radius-2: 0.125rem;
+  --ds-border-radius-4: 0.25rem;
+  --ds-border-radius-8: 0.5rem;
+  --ds-border-radius-12: 0.75rem;
+  --ds-border-radius-16: 1rem;
+  --ds-border-radius-24: 1.5rem;
+  --ds-border-radius-32: 2rem;
+  --ds-border-radius-9999: 624.9375rem;
+  --ds-border-radius-sm: calc(var(--ds-border-radius-2));
+  --ds-border-radius-md: calc(var(--ds-border-radius-4));
+  --ds-border-radius-lg: calc(var(--ds-border-radius-8));
+  --ds-border-radius-xl: calc(var(--ds-border-radius-12));
+  --ds-border-radius-2xl: calc(var(--ds-border-radius-16));
+  --ds-border-radius-3xl: calc(var(--ds-border-radius-24));
+  --ds-border-radius-4xl: calc(var(--ds-border-radius-32));
+  --ds-border-radius-full: calc(var(--ds-border-radius-9999));
+  --ds-spacing-0: calc(var(--ds-sizing-base)*0);
+  --ds-spacing-1: calc(var(--ds-sizing-base)*1);
+  --ds-spacing-2: calc(var(--ds-sizing-base)*2);
+  --ds-spacing-3: calc(var(--ds-sizing-base)*3);
+  --ds-spacing-4: calc(var(--ds-sizing-base)*4);
+  --ds-spacing-5: calc(var(--ds-sizing-base)*5);
+  --ds-spacing-6: calc(var(--ds-sizing-base)*6);
+  --ds-spacing-7: calc(var(--ds-sizing-base)*7);
+  --ds-spacing-8: calc(var(--ds-sizing-base)*8);
+  --ds-spacing-9: calc(var(--ds-sizing-base)*9);
+  --ds-spacing-10: calc(var(--ds-sizing-base)*10);
+  --ds-spacing-11: calc(var(--ds-sizing-base)*11);
+  --ds-spacing-12: calc(var(--ds-sizing-base)*12);
+  --ds-spacing-13: calc(var(--ds-sizing-base)*13);
+  --ds-spacing-14: calc(var(--ds-sizing-base)*14);
+  --ds-spacing-15: calc(var(--ds-sizing-base)*15);
+  --ds-spacing-18: calc(var(--ds-sizing-base)*18);
+  --ds-spacing-22: calc(var(--ds-sizing-base)*22);
+  --ds-spacing-26: calc(var(--ds-sizing-base)*26);
+  --ds-spacing-30: calc(var(--ds-sizing-base)*30);
+  --ds-sizing-0: calc(var(--ds-sizing-base)*0);
+  --ds-sizing-1: calc(var(--ds-sizing-base)*1);
+  --ds-sizing-2: calc(var(--ds-sizing-base)*2);
+  --ds-sizing-3: calc(var(--ds-sizing-base)*3);
+  --ds-sizing-4: calc(var(--ds-sizing-base)*4);
+  --ds-sizing-5: calc(var(--ds-sizing-base)*5);
+  --ds-sizing-6: calc(var(--ds-sizing-base)*6);
+  --ds-sizing-7: calc(var(--ds-sizing-base)*7);
+  --ds-sizing-8: calc(var(--ds-sizing-base)*8);
+  --ds-sizing-9: calc(var(--ds-sizing-base)*9);
+  --ds-sizing-10: calc(var(--ds-sizing-base)*10);
+  --ds-sizing-11: calc(var(--ds-sizing-base)*11);
+  --ds-sizing-12: calc(var(--ds-sizing-base)*12);
+  --ds-sizing-13: calc(var(--ds-sizing-base)*13);
+  --ds-sizing-14: calc(var(--ds-sizing-base)*14);
+  --ds-sizing-15: calc(var(--ds-sizing-base)*15);
+  --ds-sizing-18: calc(var(--ds-sizing-base)*18);
+  --ds-sizing-22: calc(var(--ds-sizing-base)*22);
+  --ds-sizing-26: calc(var(--ds-sizing-base)*26);
+  --ds-sizing-30: calc(var(--ds-sizing-base)*30);
+  --ds-sizing-base: 0.25rem;
+  --ds-border-width-default: 1px;
+  --ds-border-width-highlight: 2px;
+  --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
+  --ds-shadow-sm: 0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1);
+  --ds-shadow-md: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12);
+  --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14);
+  --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16);
+}