@udir-design/theme 1.0.0-beta.0 → 1.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +1 -1
  2. package/dist/udir.css +50 -97
  3. package/package.json +2 -2
package/README.md CHANGED
@@ -5,7 +5,7 @@ Dette biblioteket inneholder CSS-variabler for Utdanningsdirektoratets design to
5
5
  ## Installere biblioteket
6
6
 
7
7
  ```bash
8
- npm add @udir-design/theme@alpha
8
+ npm add @udir-design/theme@beta
9
9
  ```
10
10
 
11
11
  ## Ta i bruk
package/dist/udir.css CHANGED
@@ -1,10 +1,11 @@
1
1
  @charset "UTF-8";
2
2
 
3
- @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
3
+ @layer ds.theme, ds.base, ds.utilities, ds.components;
4
4
 
5
- /**
6
- * These files are generated from design tokens defind using Token Studio
7
- */
5
+ /*
6
+ build: v1.0.6
7
+ design-tokens: v1.0.6
8
+ */
8
9
 
9
10
  @layer ds.theme.color-scheme.light {
10
11
  :root, [data-color-scheme="light"] {
@@ -284,12 +285,30 @@
284
285
 
285
286
  }
286
287
 
287
- /**
288
- * These files are generated from design tokens defind using Token Studio
289
- */
290
-
291
288
  @layer ds.theme.typography.secondary {
292
289
  [data-typography="secondary"] {
290
+ --ds-line-height-sm: 1.3;
291
+ --ds-line-height-md: 1.5;
292
+ --ds-line-height-lg: 1.7;
293
+ --ds-font-size-1: 0.75rem;
294
+ --ds-font-size-2: 0.875rem;
295
+ --ds-font-size-3: 1rem;
296
+ --ds-font-size-4: 1.125rem;
297
+ --ds-font-size-5: 1.3125rem;
298
+ --ds-font-size-6: 1.5rem;
299
+ --ds-font-size-7: 1.875rem;
300
+ --ds-font-size-8: 2.25rem;
301
+ --ds-font-size-9: 3rem;
302
+ --ds-font-size-10: 3.75rem;
303
+ --ds-letter-spacing-1: -1%;
304
+ --ds-letter-spacing-2: -0.5%;
305
+ --ds-letter-spacing-3: -0.25%;
306
+ --ds-letter-spacing-4: -0.15%;
307
+ --ds-letter-spacing-5: 0%;
308
+ --ds-letter-spacing-6: 0.15%;
309
+ --ds-letter-spacing-7: 0.25%;
310
+ --ds-letter-spacing-8: 0.5%;
311
+ --ds-letter-spacing-9: 1.5%;
293
312
  --ds-font-family: Inter;
294
313
  --ds-font-weight-medium: 500;
295
314
  --ds-font-weight-semibold: 600;
@@ -382,34 +401,8 @@
382
401
  --ds-body-long-xs-line-height: 1.7;
383
402
  --ds-body-long-xs-font-size: 0.875rem;
384
403
  --ds-body-long-xs-letter-spacing: 0%;
385
- --ds-line-height-sm: 1.3;
386
- --ds-line-height-md: 1.5;
387
- --ds-line-height-lg: 1.7;
388
- --ds-font-size-1: 0.75rem;
389
- --ds-font-size-2: 0.875rem;
390
- --ds-font-size-3: 1rem;
391
- --ds-font-size-4: 1.125rem;
392
- --ds-font-size-5: 1.3125rem;
393
- --ds-font-size-6: 1.5rem;
394
- --ds-font-size-7: 1.875rem;
395
- --ds-font-size-8: 2.25rem;
396
- --ds-font-size-9: 3rem;
397
- --ds-font-size-10: 3.75rem;
398
- --ds-letter-spacing-1: -1%;
399
- --ds-letter-spacing-2: -0.5%;
400
- --ds-letter-spacing-3: -0.25%;
401
- --ds-letter-spacing-4: -0.15%;
402
- --ds-letter-spacing-5: 0%;
403
- --ds-letter-spacing-6: 0.15%;
404
- --ds-letter-spacing-7: 0.25%;
405
- --ds-letter-spacing-8: 0.5%;
406
- --ds-letter-spacing-9: 1.5%;
407
404
  }
408
405
  }
409
- /**
410
- * These files are generated from design tokens defind using Token Studio
411
- */
412
-
413
406
  @layer ds.theme.semantic {
414
407
  :root {
415
408
  --ds-size-base: 18;
@@ -422,7 +415,6 @@
422
415
  --ds-border-radius-xl: min(var(--ds-border-radius-base)*3,var(--ds-border-radius-scale)*4);
423
416
  --ds-border-radius-default: var(--ds-border-radius-base);
424
417
  --ds-border-radius-full: 624.9375rem;
425
- --ds-opacity-disabled: 30%;
426
418
  --ds-border-width-default: 1px;
427
419
  --ds-border-width-focus: 3px;
428
420
  --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
@@ -430,6 +422,7 @@
430
422
  --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);
431
423
  --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);
432
424
  --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);
425
+ --ds-opacity-disabled: 30%;
433
426
 
434
427
  --ds-size-0: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *0);
435
428
  --ds-size-1: calc(var(--ds-size-step) / var(--ds-size-base) * 1em *1);
@@ -478,10 +471,6 @@
478
471
 
479
472
  }
480
473
 
481
- /**
482
- * These files are generated from design tokens defind using Token Studio
483
- */
484
-
485
474
  @layer ds.theme.color-scheme.dark {
486
475
  [data-color-scheme="dark"] {
487
476
  --ds-color-accent-background-default: #121916;
@@ -760,12 +749,30 @@
760
749
 
761
750
  }
762
751
 
763
- /**
764
- * These files are generated from design tokens defind using Token Studio
765
- */
766
-
767
752
  @layer ds.theme.typography.primary {
768
753
  :root, [data-typography="primary"] {
754
+ --ds-line-height-sm: 1.3;
755
+ --ds-line-height-md: 1.5;
756
+ --ds-line-height-lg: 1.7;
757
+ --ds-font-size-1: 0.75rem;
758
+ --ds-font-size-2: 0.875rem;
759
+ --ds-font-size-3: 1rem;
760
+ --ds-font-size-4: 1.125rem;
761
+ --ds-font-size-5: 1.3125rem;
762
+ --ds-font-size-6: 1.5rem;
763
+ --ds-font-size-7: 1.875rem;
764
+ --ds-font-size-8: 2.25rem;
765
+ --ds-font-size-9: 3rem;
766
+ --ds-font-size-10: 3.75rem;
767
+ --ds-letter-spacing-1: -1%;
768
+ --ds-letter-spacing-2: -0.5%;
769
+ --ds-letter-spacing-3: -0.25%;
770
+ --ds-letter-spacing-4: -0.15%;
771
+ --ds-letter-spacing-5: 0%;
772
+ --ds-letter-spacing-6: 0.15%;
773
+ --ds-letter-spacing-7: 0.25%;
774
+ --ds-letter-spacing-8: 0.5%;
775
+ --ds-letter-spacing-9: 1.5%;
769
776
  --ds-font-family: Inter;
770
777
  --ds-font-weight-medium: 500;
771
778
  --ds-font-weight-semibold: 600;
@@ -858,34 +865,8 @@
858
865
  --ds-body-long-xs-line-height: 1.7;
859
866
  --ds-body-long-xs-font-size: 0.875rem;
860
867
  --ds-body-long-xs-letter-spacing: 0%;
861
- --ds-line-height-sm: 1.3;
862
- --ds-line-height-md: 1.5;
863
- --ds-line-height-lg: 1.7;
864
- --ds-font-size-1: 0.75rem;
865
- --ds-font-size-2: 0.875rem;
866
- --ds-font-size-3: 1rem;
867
- --ds-font-size-4: 1.125rem;
868
- --ds-font-size-5: 1.3125rem;
869
- --ds-font-size-6: 1.5rem;
870
- --ds-font-size-7: 1.875rem;
871
- --ds-font-size-8: 2.25rem;
872
- --ds-font-size-9: 3rem;
873
- --ds-font-size-10: 3.75rem;
874
- --ds-letter-spacing-1: -1%;
875
- --ds-letter-spacing-2: -0.5%;
876
- --ds-letter-spacing-3: -0.25%;
877
- --ds-letter-spacing-4: -0.15%;
878
- --ds-letter-spacing-5: 0%;
879
- --ds-letter-spacing-6: 0.15%;
880
- --ds-letter-spacing-7: 0.25%;
881
- --ds-letter-spacing-8: 0.5%;
882
- --ds-letter-spacing-9: 1.5%;
883
868
  }
884
869
  }
885
- /**
886
- * These files are generated from design tokens defind using Token Studio
887
- */
888
-
889
870
  @layer ds.theme.color {
890
871
  [data-color="accent"] {
891
872
  --ds-color-background-default: var(--ds-color-accent-background-default);
@@ -908,10 +889,6 @@
908
889
 
909
890
  }
910
891
 
911
- /**
912
- * These files are generated from design tokens defind using Token Studio
913
- */
914
-
915
892
  @layer ds.theme.color {
916
893
  [data-color="danger"], [data-color-scheme][data-color="danger"] {
917
894
  --ds-color-background-default: var(--ds-color-danger-background-default);
@@ -934,10 +911,6 @@
934
911
 
935
912
  }
936
913
 
937
- /**
938
- * These files are generated from design tokens defind using Token Studio
939
- */
940
-
941
914
  @layer ds.theme.color {
942
915
  [data-color="info"], [data-color-scheme][data-color="info"] {
943
916
  --ds-color-background-default: var(--ds-color-info-background-default);
@@ -960,10 +933,6 @@
960
933
 
961
934
  }
962
935
 
963
- /**
964
- * These files are generated from design tokens defind using Token Studio
965
- */
966
-
967
936
  @layer ds.theme.color {
968
937
  :root, [data-color-scheme], :not([data-color]):where(.ds-breadcrumbs, .ds-button, .ds-field, .ds-input, .ds-link, .ds-pagination, .ds-suggestion, .ds-togglegroup), [data-color="neutral"], [data-color-scheme][data-color="neutral"] {
969
938
  --ds-color-background-default: var(--ds-color-neutral-background-default);
@@ -986,10 +955,6 @@
986
955
 
987
956
  }
988
957
 
989
- /**
990
- * These files are generated from design tokens defind using Token Studio
991
- */
992
-
993
958
  @layer ds.theme.color {
994
959
  [data-color="success"], [data-color-scheme][data-color="success"] {
995
960
  --ds-color-background-default: var(--ds-color-success-background-default);
@@ -1012,10 +977,6 @@
1012
977
 
1013
978
  }
1014
979
 
1015
- /**
1016
- * These files are generated from design tokens defind using Token Studio
1017
- */
1018
-
1019
980
  @layer ds.theme.color {
1020
981
  [data-color="support1"], [data-color-scheme][data-color="support1"] {
1021
982
  --ds-color-background-default: var(--ds-color-support1-background-default);
@@ -1038,10 +999,6 @@
1038
999
 
1039
1000
  }
1040
1001
 
1041
- /**
1042
- * These files are generated from design tokens defind using Token Studio
1043
- */
1044
-
1045
1002
  @layer ds.theme.color {
1046
1003
  [data-color="support2"], [data-color-scheme][data-color="support2"] {
1047
1004
  --ds-color-background-default: var(--ds-color-support2-background-default);
@@ -1064,10 +1021,6 @@
1064
1021
 
1065
1022
  }
1066
1023
 
1067
- /**
1068
- * These files are generated from design tokens defind using Token Studio
1069
- */
1070
-
1071
1024
  @layer ds.theme.color {
1072
1025
  [data-color="warning"], [data-color-scheme][data-color="warning"] {
1073
1026
  --ds-color-background-default: var(--ds-color-warning-background-default);
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "directory": "@udir-design/theme"
7
7
  },
8
8
  "license": "MIT",
9
- "version": "1.0.0-beta.0",
9
+ "version": "1.0.0-beta.2",
10
10
  "type": "module",
11
11
  "exports": {
12
12
  ".": {
@@ -18,7 +18,7 @@
18
18
  "./dist"
19
19
  ],
20
20
  "dependencies": {
21
- "@digdir/designsystemet-react": "1.0.3"
21
+ "@digdir/designsystemet-react": "1.0.6"
22
22
  },
23
23
  "devDependencies": {
24
24
  "rimraf": "^6.0.1",