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