@digdir/designsystemet-css 0.10.0-alpha.0 → 0.10.0

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 (79) hide show
  1. package/accordion.css +46 -59
  2. package/alert.css +33 -37
  3. package/box.css +19 -19
  4. package/button.css +135 -91
  5. package/card.css +81 -103
  6. package/checkbox.css +58 -67
  7. package/chip.css +66 -66
  8. package/combobox.css +70 -83
  9. package/dist/accordion.css +1 -1
  10. package/dist/alert.css +1 -1
  11. package/dist/box.css +1 -1
  12. package/dist/button.css +1 -1
  13. package/dist/card.css +1 -1
  14. package/dist/checkbox.css +1 -1
  15. package/dist/chip.css +1 -1
  16. package/dist/combobox.css +1 -1
  17. package/dist/divider.css +1 -1
  18. package/dist/dropdownmenu.css +1 -1
  19. package/dist/error-message.css +1 -1
  20. package/dist/error-summary.css +1 -1
  21. package/dist/fieldset.css +1 -1
  22. package/dist/heading.css +1 -1
  23. package/dist/helptext.css +1 -1
  24. package/dist/index.css +1 -1
  25. package/dist/ingress.css +1 -1
  26. package/dist/label.css +1 -1
  27. package/dist/link.css +1 -1
  28. package/dist/list.css +1 -1
  29. package/dist/modal.css +1 -1
  30. package/dist/native-select.css +1 -1
  31. package/dist/pagination.css +1 -1
  32. package/dist/paragraph.css +1 -1
  33. package/dist/popover.css +1 -1
  34. package/dist/radio.css +1 -1
  35. package/dist/search.css +1 -1
  36. package/dist/skeleton.css +1 -1
  37. package/dist/skiplink.css +1 -1
  38. package/dist/spinner.css +1 -1
  39. package/dist/switch.css +1 -1
  40. package/dist/table.css +1 -1
  41. package/dist/tabs.css +1 -1
  42. package/dist/tag.css +1 -1
  43. package/dist/textarea.css +1 -1
  44. package/dist/textfield.css +1 -1
  45. package/dist/togglegroup.css +1 -1
  46. package/dist/tooltip.css +1 -1
  47. package/dist/utils.css +1 -1
  48. package/divider.css +4 -4
  49. package/dropdownmenu.css +11 -11
  50. package/error-message.css +12 -12
  51. package/error-summary.css +5 -9
  52. package/fieldset.css +4 -4
  53. package/heading.css +18 -18
  54. package/helptext.css +11 -12
  55. package/index.css +5 -5
  56. package/ingress.css +12 -12
  57. package/label.css +8 -8
  58. package/link.css +14 -14
  59. package/list.css +5 -5
  60. package/modal.css +20 -20
  61. package/native-select.css +31 -48
  62. package/package.json +2 -2
  63. package/pagination.css +19 -19
  64. package/paragraph.css +23 -23
  65. package/popover.css +27 -30
  66. package/radio.css +53 -47
  67. package/search.css +35 -40
  68. package/skeleton.css +5 -5
  69. package/skiplink.css +7 -31
  70. package/spinner.css +14 -6
  71. package/switch.css +49 -67
  72. package/table.css +27 -31
  73. package/tabs.css +28 -25
  74. package/tag.css +33 -33
  75. package/textarea.css +18 -18
  76. package/textfield.css +34 -36
  77. package/togglegroup.css +6 -7
  78. package/tooltip.css +16 -9
  79. package/utils.css +5 -5
package/accordion.css CHANGED
@@ -1,29 +1,23 @@
1
- @layer ds.accordion {
1
+ @layer fds.accordion {
2
2
  .fds-accordion {
3
- --dsc-accordion-border-radius: var(--ds-border-radius-md);
4
- --dsc-accordion-border-color: var(--ds-color-neutral-border-subtle);
3
+ --fds-accordion-border-radius: var(--fds-border_radius-interactive);
4
+ --fds-accordion-border-color: var(--fds-semantic-border-neutral-subtle);
5
5
 
6
- border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
6
+ border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
7
7
  box-sizing: border-box;
8
8
  }
9
9
 
10
10
  .fds-accordion--border {
11
- border: 1px solid var(--dsc-accordion-border-color);
12
- border-radius: var(--dsc-accordion-border-radius);
11
+ border: 1px solid var(--fds-accordion-border-color);
12
+ border-radius: var(--fds-accordion-border-radius);
13
13
  }
14
14
 
15
15
  .fds-accordion__expand-icon {
16
- border-radius: var(--ds-border-radius-md);
17
- fill: var(--ds-color-neutral-text-default);
18
- color: var(--ds-color-neutral-text-default);
19
- }
20
-
21
- .fds-accordion__expand-icon path {
22
- fill: var(--ds-color-neutral-text-default);
16
+ border-radius: var(--fds-border_radius-interactive);
23
17
  }
24
18
 
25
19
  .fds-accordion__content {
26
- padding: var(--ds-spacing-5, 1rem);
20
+ padding: var(--fds-spacing-5, 1rem);
27
21
  overflow: hidden;
28
22
  text-overflow: ellipsis;
29
23
  }
@@ -37,18 +31,19 @@
37
31
  display: flex;
38
32
  justify-content: flex-start;
39
33
  align-items: center;
40
- gap: var(--ds-spacing-2);
34
+ gap: var(--fds-spacing-2);
41
35
  margin: 0;
42
36
  text-align: left;
43
37
  cursor: pointer;
44
38
  border: none;
45
- border-top: 1px solid var(--ds-color-neutral-border-subtle);
46
- padding: var(--ds-spacing-4);
39
+ border-top: 1px solid var(--fds-semantic-border-neutral-subtle);
40
+ padding: var(--fds-spacing-4);
41
+ }
42
+
43
+ .fds-accordion--border .fds-accordion__button {
44
+ border-radius: var(--fds-accordion-border-radius);
47
45
  }
48
46
 
49
- /* .fds-accordion--border .fds-accordion__button {
50
- border-radius: 0;
51
- } */
52
47
 
53
48
  .fds-accordion__item:focus-within {
54
49
  position: relative;
@@ -60,64 +55,56 @@
60
55
 
61
56
  .fds-accordion--neutral,
62
57
  .fds-accordion--neutral .fds-accordion__button {
63
- background-color: var(--ds-color-neutral-background-default);
58
+ background-color: var(--fds-semantic-surface-neutral-default);
64
59
  }
65
60
 
66
61
  .fds-accordion--subtle,
67
62
  .fds-accordion--subtle .fds-accordion__button {
68
- background-color: var(--ds-color-neutral-background-subtle);
63
+ background-color: var(--fds-semantic-surface-neutral-subtle);
69
64
  }
70
65
 
71
- .fds-accordion--brand1,
72
- .fds-accordion--brand1 .fds-accordion__button {
73
- --dsc-accordion-border-color: var(--ds-color-brand1-border-subtle);
66
+ .fds-accordion--first,
67
+ .fds-accordion--first .fds-accordion__button {
68
+ --fds-accordion-border-color: var(--fds-semantic-border-first-default);
74
69
 
75
- background: var(--ds-color-brand1-surface-default);
70
+ background: var(--fds-semantic-surface-first-light);
76
71
  }
77
72
 
78
- .fds-accordion--brand2,
79
- .fds-accordion--brand2 .fds-accordion__button {
80
- --dsc-accordion-border-color: var(--ds-color-brand2-border-subtle);
81
73
 
82
- background: var(--ds-color-brand2-surface-default);
74
+ .fds-accordion--second,
75
+ .fds-accordion--second .fds-accordion__button {
76
+ --fds-accordion-border-color: var(--fds-semantic-border-second-default);
77
+
78
+ background: var(--fds-semantic-surface-second-light);
83
79
  }
84
80
 
85
- .fds-accordion--brand3,
86
- .fds-accordion--brand3 .fds-accordion__button {
87
- --dsc-accordion-border-color: var(--ds-color-brand3-border-subtle);
88
81
 
89
- background: var(--ds-color-brand3-surface-default);
82
+ .fds-accordion--third,
83
+ .fds-accordion--third .fds-accordion__button {
84
+ --fds-accordion-border-color: var(--fds-semantic-border-third-default);
85
+
86
+ background: var(--fds-semantic-surface-third-light);
90
87
  }
91
88
 
92
- .fds-accordion--brand1 .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
93
- .fds-accordion--brand2 .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
94
- .fds-accordion--brand3 .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
89
+ .fds-accordion--first .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
90
+ .fds-accordion--second .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
91
+ .fds-accordion--third .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
95
92
  background-color: rgba(0 0 0 / 0.03);
96
93
  }
97
94
 
98
95
  .fds-accordion--neutral .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
99
96
  .fds-accordion--subtle .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
100
- background-color: var(--ds-color-accent-surface-default);
97
+ background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
101
98
  }
102
99
 
103
100
  .fds-accordion--border .fds-accordion__item:first-child .fds-accordion__button {
104
101
  border-top: 0;
105
102
  }
106
103
 
107
- .fds-accordion--brand1 .fds-accordion__item:not(:first-child) .fds-accordion__button,
108
- .fds-accordion--brand2 .fds-accordion__item:not(:first-child) .fds-accordion__button,
109
- .fds-accordion--brand3 .fds-accordion__item:not(:first-child) .fds-accordion__button {
110
- border-top: 1px solid var(--ds-color-neutral-background-default);
111
- }
112
-
113
- .fds-accordion--border .fds-accordion__item:first-of-type .fds-accordion__button:first-of-type {
114
- border-top-left-radius: var(--dsc-accordion-border-radius);
115
- border-top-right-radius: var(--dsc-accordion-border-radius);
116
- }
117
-
118
- .fds-accordion--border .fds-accordion__item:last-of-type:not(.fds-accordion__item--open) .fds-accordion__button:first-of-type {
119
- border-bottom-left-radius: var(--dsc-accordion-border-radius);
120
- border-bottom-right-radius: var(--dsc-accordion-border-radius);
104
+ .fds-accordion--first .fds-accordion__item:not(:first-child) .fds-accordion__button,
105
+ .fds-accordion--second .fds-accordion__item:not(:first-child) .fds-accordion__button,
106
+ .fds-accordion--third .fds-accordion__item:not(:first-child) .fds-accordion__button {
107
+ border-top: 1px solid var(--fds-semantic-surface-neutral-default);
121
108
  }
122
109
 
123
110
  @media (hover: hover) and (pointer: fine) {
@@ -127,19 +114,19 @@
127
114
 
128
115
  .fds-accordion--neutral .fds-accordion__button:hover,
129
116
  .fds-accordion--subtle .fds-accordion__button:hover {
130
- background-color: var(--ds-color-neutral-surface-default);
117
+ background-color: var(--fds-semantic-surface-neutral-subtle-hover);
131
118
  }
132
119
 
133
- .fds-accordion--brand1 .fds-accordion__button:hover {
134
- background-color: var(--ds-color-brand1-surface-hover);
120
+ .fds-accordion--first .fds-accordion__button:hover {
121
+ background-color: var(--fds-semantic-surface-first-light-hover);
135
122
  }
136
123
 
137
- .fds-accordion--brand2 .fds-accordion__button:hover {
138
- background-color: var(--ds-color-brand2-surface-hover);
124
+ .fds-accordion--second .fds-accordion__button:hover {
125
+ background-color: var(--fds-semantic-surface-second-light-hover);
139
126
  }
140
127
 
141
- .fds-accordion--brand3 .fds-accordion__button:hover {
142
- background-color: var(--ds-color-brand3-surface-hover);
128
+ .fds-accordion--third .fds-accordion__button:hover {
129
+ background-color: var(--fds-semantic-surface-third-light-hover);
143
130
  }
144
131
  }
145
132
  }
package/alert.css CHANGED
@@ -1,29 +1,29 @@
1
- @layer ds.alert {
1
+ @layer fds.alert {
2
2
  .fds-alert {
3
- --dsc-alert-border-color: var(--ds-color-info-border-strong);
4
- --dsc-alert-border-radius: var(--ds-border-radius-md);
5
- --dsc-alert-color: var(--ds-color-neutral-text-default);
6
- --dsc-alert-icon-color: var(--dsc-alert-border-color);
7
- --dsc-alert-icon-size: var(--ds-sizing-7);
8
- --dsc-alert-background: var(--ds-color-info-surface-default);
9
- --dsc-alert-padding: var(--ds-spacing-6);
3
+ --fds-alert-border-color: var(--fds-semantic-border-info-default);
4
+ --fds-alert-border-radius: var(--fds-border_radius-medium);
5
+ --fds-alert-color: var(--fds-semantic-text-neutral-default);
6
+ --fds-alert-icon-color: var(--fds-alert-border-color);
7
+ --fds-alert-icon-size: var(--fds-sizing-7);
8
+ --fds-alert-background: var(--fds-semantic-surface-info-subtle);
9
+ --fds-alert-padding: var(--fds-spacing-6);
10
10
 
11
- border: 1px solid var(--dsc-alert-border-color);
12
- border-radius: var(--dsc-alert-border-radius);
13
- background: var(--dsc-alert-background);
14
- color: var(--dsc-alert-color);
15
- padding: var(--dsc-alert-padding);
11
+ border: 1px solid var(--fds-alert-border-color);
12
+ border-radius: var(--fds-alert-border-radius);
13
+ background: var(--fds-alert-background);
14
+ color: var(--fds-alert-color);
15
+ padding: var(--fds-alert-padding);
16
16
  display: grid;
17
17
  grid-auto-flow: column;
18
18
  grid-auto-columns: min-content auto;
19
- gap: var(--ds-spacing-2);
20
- font: var(--ds-typography-paragraph-md);
19
+ gap: var(--fds-spacing-2);
20
+ font: var(--fds-typography-paragraph-medium);
21
21
  }
22
22
 
23
23
  .fds-alert__icon {
24
- height: var(--dsc-alert-icon-size);
25
- width: var(--dsc-alert-icon-size);
26
- color: var(--dsc-alert-icon-color);
24
+ height: var(--fds-alert-icon-size);
25
+ width: var(--fds-alert-icon-size);
26
+ color: var(--fds-alert-icon-color);
27
27
  }
28
28
 
29
29
  .fds-alert__content {
@@ -32,45 +32,41 @@
32
32
  }
33
33
 
34
34
  .fds-alert--info {
35
- --dsc-alert-border-color: var(--ds-color-info-border-strong);
36
- --dsc-alert-icon-color: var(--ds-color-info-base-default);
37
- --dsc-alert-background: var(--ds-color-info-surface-default);
35
+ --fds-alert-border-color: var(--fds-semantic-border-info-default);
36
+ --fds-alert-background: var(--fds-semantic-surface-info-subtle);
38
37
  }
39
38
 
40
39
  .fds-alert--warning {
41
- --dsc-alert-border-color: var(--ds-color-warning-border-default);
42
- --dsc-alert-icon-color: var(--ds-color-warning-base-default);
43
- --dsc-alert-background: var(--ds-color-warning-surface-default);
40
+ --fds-alert-border-color: var(--fds-semantic-border-warning-default);
41
+ --fds-alert-background: var(--fds-semantic-surface-warning-subtle);
44
42
  }
45
43
 
46
44
  .fds-alert--success {
47
- --dsc-alert-border-color: var(--ds-color-success-border-default);
48
- --dsc-alert-icon-color: var(--ds-color-success-base-default);
49
- --dsc-alert-background: var(--ds-color-success-surface-default);
45
+ --fds-alert-border-color: var(--fds-semantic-border-success-default);
46
+ --fds-alert-background: var(--fds-semantic-surface-success-subtle);
50
47
  }
51
48
 
52
49
  .fds-alert--danger {
53
- --dsc-alert-border-color: var(--ds-color-danger-border-default);
54
- --dsc-alert-icon-color: var(--ds-color-danger-base-default);
55
- --dsc-alert-background: var(--ds-color-danger-surface-default);
50
+ --fds-alert-border-color: var(--fds-semantic-border-danger-default);
51
+ --fds-alert-background: var(--fds-semantic-surface-danger-subtle);
56
52
  }
57
53
 
58
54
  .fds-alert--sm {
59
- --dsc-alert-padding: var(--ds-spacing-5);
60
- --dsc-alert-icon-size: var(--ds-sizing-6);
55
+ --fds-alert-padding: var(--fds-spacing-5);
56
+ --fds-alert-icon-size: var(--fds-sizing-6);
61
57
  }
62
58
 
63
59
  .fds-alert--md {
64
- --dsc-alert-padding: var(--ds-spacing-6);
65
- --dsc-alert-icon-size: var(--ds-sizing-7);
60
+ --fds-alert-padding: var(--fds-spacing-6);
61
+ --fds-alert-icon-size: var(--fds-sizing-7);
66
62
  }
67
63
 
68
64
  .fds-alert--lg {
69
- --dsc-alert-padding: var(--ds-spacing-7);
70
- --dsc-alert-icon-size: var(--ds-sizing-8);
65
+ --fds-alert-padding: var(--fds-spacing-7);
66
+ --fds-alert-icon-size: var(--fds-sizing-8);
71
67
  }
72
68
 
73
69
  .fds-alert--elevated {
74
- box-shadow: var(--ds-shadow-sm);
70
+ box-shadow: var(--fds-shadow-small);
75
71
  }
76
72
  }
package/box.css CHANGED
@@ -1,73 +1,73 @@
1
- @layer ds.box {
1
+ @layer fds.box {
2
2
  .fds-box--xs-shadow {
3
- box-shadow: var(--ds-shadow-xs);
3
+ box-shadow: var(--fds-shadow-xsmall);
4
4
  }
5
5
 
6
6
  .fds-box--sm-shadow {
7
- box-shadow: var(--ds-shadow-sm);
7
+ box-shadow: var(--fds-shadow-small);
8
8
  }
9
9
 
10
10
  .fds-box--md-shadow {
11
- box-shadow: var(--ds-shadow-md);
11
+ box-shadow: var(--fds-shadow-medium);
12
12
  }
13
13
 
14
14
  .fds-box--lg-shadow {
15
- box-shadow: var(--ds-shadow-lg);
15
+ box-shadow: var(--fds-shadow-large);
16
16
  }
17
17
 
18
18
  .fds-box--xl-shadow {
19
- box-shadow: var(--ds-shadow-xl);
19
+ box-shadow: var(--fds-shadow-xlarge);
20
20
  }
21
21
 
22
22
  .fds-box--default-border-color {
23
- border: 1px solid var(--ds-color-neutral-border-default);
23
+ border: 1px solid var(--fds-semantic-border-neutral-default);
24
24
  }
25
25
 
26
26
  .fds-box--subtle-border-color {
27
- border: 1px solid var(--ds-color-neutral-border-subtle);
27
+ border: 1px solid var(--fds-semantic-border-neutral-subtle);
28
28
  }
29
29
 
30
30
  .fds-box--strong-border-color {
31
- border: 1px solid var(--ds-color-neutral-base-strong);
31
+ border: 1px solid var(--fds-semantic-border-neutral-strong);
32
32
  }
33
33
 
34
34
  .fds-box--sm-border-radius {
35
- border-radius: var(--ds-border-radius-sm);
35
+ border-radius: var(--fds-border_radius-small);
36
36
  }
37
37
 
38
38
  .fds-box--md-border-radius {
39
- border-radius: var(--ds-border-radius-md);
39
+ border-radius: var(--fds-border_radius-medium);
40
40
  }
41
41
 
42
42
  .fds-box--lg-border-radius {
43
- border-radius: var(--ds-border-radius-lg);
43
+ border-radius: var(--fds-border_radius-large);
44
44
  }
45
45
 
46
46
  .fds-box--xl-border-radius {
47
- border-radius: var(--ds-border-radius-xl);
47
+ border-radius: var(--fds-border_radius-xlarge);
48
48
  }
49
49
 
50
50
  .fds-box--2xl-border-radius {
51
- border-radius: var(--ds-border-radius-2xl);
51
+ border-radius: var(--fds-border_radius-xxlarge);
52
52
  }
53
53
 
54
54
  .fds-box--3xl-border-radius {
55
- border-radius: var(--ds-border-radius-3xl);
55
+ border-radius: var(--fds-border_radius-xxxlarge);
56
56
  }
57
57
 
58
58
  .fds-box--4xl-border-radius {
59
- border-radius: var(--ds-border-radius-4xl);
59
+ border-radius: var(--fds-border_radius-xxxxlarge);
60
60
  }
61
61
 
62
62
  .fds-box--full-border-radius {
63
- border-radius: var(--ds-border-radius-full);
63
+ border-radius: var(--fds-border_radius-full);
64
64
  }
65
65
 
66
66
  .fds-box--default-background {
67
- background-color: var(--ds-color-neutral-background-default);
67
+ background-color: var(--fds-semantic-background-default);
68
68
  }
69
69
 
70
70
  .fds-box--subtle-background {
71
- background-color: var(--ds-color-neutral-background-subtle);
71
+ background-color: var(--fds-semantic-background-subtle);
72
72
  }
73
73
  }