@digdir/designsystemet-css 1.0.0-next.33 → 1.0.0-next.35

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 (61) hide show
  1. package/accordion.css +23 -6
  2. package/alert.css +17 -7
  3. package/avatar.css +18 -7
  4. package/badge.css +46 -54
  5. package/breadcrumbs.css +52 -55
  6. package/button.css +13 -3
  7. package/card.css +90 -148
  8. package/chip.css +113 -152
  9. package/dist/accordion.css +1 -1
  10. package/dist/alert.css +1 -1
  11. package/dist/avatar.css +1 -1
  12. package/dist/badge.css +1 -1
  13. package/dist/breadcrumbs.css +1 -1
  14. package/dist/button.css +1 -1
  15. package/dist/card.css +1 -1
  16. package/dist/chip.css +1 -1
  17. package/dist/divider.css +1 -1
  18. package/dist/dropdown.css +1 -0
  19. package/dist/error-summary.css +1 -1
  20. package/dist/fieldset.css +1 -1
  21. package/dist/helptext.css +1 -1
  22. package/dist/index.css +1 -1
  23. package/dist/link.css +1 -1
  24. package/dist/list.css +1 -1
  25. package/dist/modal.css +1 -1
  26. package/dist/pagination.css +1 -1
  27. package/dist/popover.css +1 -1
  28. package/dist/skeleton.css +1 -1
  29. package/dist/skiplink.css +1 -1
  30. package/dist/spinner.css +1 -1
  31. package/dist/table.css +1 -1
  32. package/dist/tabs.css +1 -1
  33. package/dist/tag.css +1 -1
  34. package/dist/textarea.css +1 -1
  35. package/dist/togglegroup.css +1 -1
  36. package/dist/tooltip.css +1 -1
  37. package/dist/utilities.css +1 -1
  38. package/divider.css +2 -1
  39. package/dropdown.css +57 -0
  40. package/error-summary.css +8 -6
  41. package/fieldset.css +37 -36
  42. package/helptext.css +41 -52
  43. package/index.css +6 -9
  44. package/link.css +5 -4
  45. package/list.css +16 -10
  46. package/modal.css +58 -74
  47. package/package.json +1 -1
  48. package/pagination.css +33 -24
  49. package/popover.css +20 -9
  50. package/skeleton.css +32 -37
  51. package/skiplink.css +6 -10
  52. package/spinner.css +5 -6
  53. package/table.css +7 -0
  54. package/tabs.css +59 -58
  55. package/tag.css +6 -0
  56. package/textarea.css +1 -0
  57. package/togglegroup.css +7 -18
  58. package/tooltip.css +5 -2
  59. package/utilities.css +169 -13
  60. package/dist/dropdownmenu.css +0 -1
  61. package/dropdownmenu.css +0 -43
package/togglegroup.css CHANGED
@@ -1,27 +1,16 @@
1
1
  .ds-togglegroup {
2
- --dsc-togglegroup-padding: var(--ds-spacing-1);
3
2
  --dsc-togglegroup-background: var(--ds-color-neutral-background-default);
4
- --dsc-togglegroup-border-color: var(--ds-color-neutral-border-default);
3
+ --dsc-togglegroup-border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-default);
4
+ --dsc-togglegroup-padding: var(--ds-spacing-1);
5
5
 
6
- background-color: var(--dsc-togglegroup-background);
7
- border: var(--dsc-togglegroup-border-color) solid var(--ds-border-width-default);
6
+ background: var(--dsc-togglegroup-background);
8
7
  border-radius: calc(var(--ds-border-radius-md) + var(--dsc-togglegroup-padding));
9
- width: fit-content;
10
- height: fit-content;
11
- }
12
-
13
- .ds-togglegroup__content {
14
- display: inline-grid;
8
+ border: var(--dsc-togglegroup-border);
9
+ display: grid;
15
10
  gap: var(--dsc-togglegroup-padding);
16
11
  grid-auto-columns: 1fr;
17
12
  grid-auto-flow: column;
13
+ height: fit-content;
18
14
  padding: var(--dsc-togglegroup-padding);
19
- }
20
-
21
- .ds-togglegroup__input {
22
- display: none;
23
- }
24
-
25
- .ds-togglegroup__item:focus-visible {
26
- z-index: 1;
15
+ width: fit-content;
27
16
  }
package/tooltip.css CHANGED
@@ -2,9 +2,12 @@
2
2
  --dsc-tooltip-background: var(--ds-color-neutral-text-default);
3
3
 
4
4
  background: var(--dsc-tooltip-background);
5
- padding: var(--ds-spacing-1) var(--ds-spacing-2);
6
- color: var(--ds-color-neutral-background-default);
7
5
  border-radius: var(--ds-border-radius-md);
6
+ box-sizing: border-box;
7
+ color: var(--ds-color-neutral-background-default);
8
+ padding: var(--ds-spacing-1) var(--ds-spacing-2);
9
+
10
+ @composes ds-body-text--short-xs from './utilities.css';
8
11
  }
9
12
 
10
13
  .ds-tooltip__arrow {
package/utilities.css CHANGED
@@ -12,30 +12,186 @@
12
12
  width: 1px;
13
13
  }
14
14
 
15
- :root {
15
+ :root,
16
+ [data-ds-color-mode] {
16
17
  --dsc-focus-border-width: 3px; /* Default focus border width */
17
- --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner),
18
- 0 0 0 calc(var(--dsc-focus-border-width) * 2) var(--ds-color-focus-outer);
18
+ --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
19
+ --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--dsc-focus-border-width);
19
20
  }
20
21
 
21
22
  /**
22
23
  * Apply a focus outline on an element when it is focused with keyboard
23
24
  */
24
- .ds-focus:focus-visible {
25
- outline: none;
25
+ .ds-focus:focus-visible {
26
+ @composes ds-focus--visible from './utilities.css';
27
+ }
28
+
29
+ /**
30
+ * Focus outline that can be composed if it needs a specific selector
31
+ */
32
+ .ds-focus--visible {
33
+ /**
34
+ * We use both box-shadow and outline to ensure that the focus style is visible,
35
+ * in case box-shadow is overridden.
36
+ */
26
37
  box-shadow: var(--dsc-focus-boxShadow);
38
+ outline: var(--dsc-focus-outline);
39
+ outline-offset: var(--dsc-focus-border-width);
27
40
  }
28
41
 
29
- .ds-animate-height--openingOrClosing,
30
- .ds-animate-height--closed {
31
- overflow: hidden;
42
+ /** Body typography */
43
+ .ds-body-text--xs {
44
+ font-weight: var(--ds-body-xs-font-weight);
45
+ line-height: var(--ds-body-xs-line-height);
46
+ font-size: var(--ds-body-xs-font-size);
47
+ letter-spacing: var(--ds-body-xs-letter-spacing);
48
+ }
49
+
50
+ .ds-body-text--sm {
51
+ font-weight: var(--ds-body-sm-font-weight);
52
+ line-height: var(--ds-body-sm-line-height);
53
+ font-size: var(--ds-body-sm-font-size);
54
+ letter-spacing: var(--ds-body-sm-letter-spacing);
55
+ }
56
+
57
+ .ds-body-text--md {
58
+ font-weight: var(--ds-body-md-font-weight);
59
+ line-height: var(--ds-body-md-line-height);
60
+ font-size: var(--ds-body-md-font-size);
61
+ letter-spacing: var(--ds-body-md-letter-spacing);
62
+ }
63
+
64
+ .ds-body-text--lg {
65
+ font-weight: var(--ds-body-lg-font-weight);
66
+ line-height: var(--ds-body-lg-line-height);
67
+ font-size: var(--ds-body-lg-font-size);
68
+ letter-spacing: var(--ds-body-lg-letter-spacing);
69
+ }
70
+
71
+ .ds-body-text--xl {
72
+ font-weight: var(--ds-body-xl-font-weight);
73
+ line-height: var(--ds-body-xl-line-height);
74
+ font-size: var(--ds-body-xl-font-size);
75
+ letter-spacing: var(--ds-body-xl-letter-spacing);
76
+ }
77
+
78
+ .ds-body-text--long-xs {
79
+ font-weight: var(--ds-body-long-xs-font-weight);
80
+ line-height: var(--ds-body-long-xs-line-height);
81
+ font-size: var(--ds-body-long-xs-font-size);
82
+ letter-spacing: var(--ds-body-long-xs-letter-spacing);
83
+ }
84
+
85
+ .ds-body-text--long-sm {
86
+ font-weight: var(--ds-body-long-sm-font-weight);
87
+ line-height: var(--ds-body-long-sm-line-height);
88
+ font-size: var(--ds-body-long-sm-font-size);
89
+ letter-spacing: var(--ds-body-long-sm-letter-spacing);
90
+ }
91
+
92
+ .ds-body-text--long-md {
93
+ font-weight: var(--ds-body-long-md-font-weight);
94
+ line-height: var(--ds-body-long-md-line-height);
95
+ font-size: var(--ds-body-long-md-font-size);
96
+ letter-spacing: var(--ds-body-long-md-letter-spacing);
97
+ }
98
+
99
+ .ds-body-text--long-lg {
100
+ font-weight: var(--ds-body-long-lg-font-weight);
101
+ line-height: var(--ds-body-long-lg-line-height);
102
+ font-size: var(--ds-body-long-lg-font-size);
103
+ letter-spacing: var(--ds-body-long-lg-letter-spacing);
104
+ }
105
+
106
+ .ds-body-text--long-xl {
107
+ font-weight: var(--ds-body-long-xl-font-weight);
108
+ line-height: var(--ds-body-long-xl-line-height);
109
+ font-size: var(--ds-body-long-xl-font-size);
110
+ letter-spacing: var(--ds-body-long-xl-letter-spacing);
111
+ }
112
+
113
+ .ds-body-text--short-xs {
114
+ font-weight: var(--ds-body-short-xs-font-weight);
115
+ line-height: var(--ds-body-short-xs-line-height);
116
+ font-size: var(--ds-body-short-xs-font-size);
117
+ letter-spacing: var(--ds-body-short-xs-letter-spacing);
118
+ }
119
+
120
+ .ds-body-text--short-sm {
121
+ font-weight: var(--ds-body-short-sm-font-weight);
122
+ line-height: var(--ds-body-short-sm-line-height);
123
+ font-size: var(--ds-body-short-sm-font-size);
124
+ letter-spacing: var(--ds-body-short-sm-letter-spacing);
125
+ }
126
+
127
+ .ds-body-text--short-md {
128
+ font-weight: var(--ds-body-short-md-font-weight);
129
+ line-height: var(--ds-body-short-md-line-height);
130
+ font-size: var(--ds-body-short-md-font-size);
131
+ letter-spacing: var(--ds-body-short-md-letter-spacing);
132
+ }
133
+
134
+ .ds-body-text--short-lg {
135
+ font-weight: var(--ds-body-short-lg-font-weight);
136
+ line-height: var(--ds-body-short-lg-line-height);
137
+ font-size: var(--ds-body-short-lg-font-size);
138
+ letter-spacing: var(--ds-body-short-lg-letter-spacing);
139
+ }
140
+
141
+ .ds-body-text--short-xl {
142
+ font-weight: var(--ds-body-short-xl-font-weight);
143
+ line-height: var(--ds-body-short-xl-line-height);
144
+ font-size: var(--ds-body-short-xl-font-size);
145
+ letter-spacing: var(--ds-body-short-xl-letter-spacing);
146
+ }
147
+
148
+ /** Heading */
149
+
150
+ .ds-heading-text--2xs {
151
+ font-weight: var(--ds-heading-2xs-font-weight);
152
+ line-height: var(--ds-heading-2xs-line-height);
153
+ font-size: var(--ds-heading-2xs-font-size);
154
+ letter-spacing: var(--ds-heading-2xs-letter-spacing);
155
+ }
156
+
157
+ .ds-heading-text--xs {
158
+ font-weight: var(--ds-heading-xs-font-weight);
159
+ line-height: var(--ds-heading-xs-line-height);
160
+ font-size: var(--ds-heading-xs-font-size);
161
+ letter-spacing: var(--ds-heading-xs-letter-spacing);
162
+ }
163
+
164
+ .ds-heading-text--sm {
165
+ font-weight: var(--ds-heading-sm-font-weight);
166
+ line-height: var(--ds-heading-sm-line-height);
167
+ font-size: var(--ds-heading-sm-font-size);
168
+ letter-spacing: var(--ds-heading-sm-letter-spacing);
169
+ }
170
+
171
+ .ds-heading-text--md {
172
+ font-size: var(--ds-heading-md-font-size);
173
+ font-weight: var(--ds-heading-md-font-weight);
174
+ letter-spacing: var(--ds-heading-md-letter-spacing);
175
+ line-height: var(--ds-heading-md-line-height);
176
+ }
177
+
178
+ .ds-heading-text--lg {
179
+ font-weight: var(--ds-heading-lg-font-weight);
180
+ line-height: var(--ds-heading-lg-line-height);
181
+ font-size: var(--ds-heading-lg-font-size);
182
+ letter-spacing: var(--ds-heading-lg-letter-spacing);
32
183
  }
33
184
 
34
- .ds-animate-height--open .ds-animate-height__content {
35
- height: auto;
185
+ .ds-heading-text--xl {
186
+ font-weight: var(--ds-heading-xl-font-weight);
187
+ line-height: var(--ds-heading-xl-line-height);
188
+ font-size: var(--ds-heading-xl-font-size);
189
+ letter-spacing: var(--ds-heading-xl-letter-spacing);
36
190
  }
37
191
 
38
- .ds-animate-height--closed .ds-animate-height__content {
39
- height: 0;
40
- display: none;
192
+ .ds-heading-text--2xl {
193
+ font-weight: var(--ds-heading-2xl-font-weight);
194
+ line-height: var(--ds-heading-2xl-line-height);
195
+ font-size: var(--ds-heading-2xl-font-size);
196
+ letter-spacing: var(--ds-heading-2xl-letter-spacing);
41
197
  }
package/dist/dropdownmenu.css DELETED
@@ -1 +0,0 @@
1
- .ds-dropdownmenu{--dsc-dropdownmenu-padding:var(--ds-spacing-3) var(--ds-spacing-2);--dsc-dropdownmenu-min-width:16rem;--dsc-dropdownmenu-item-padding:0 var(--ds-spacing-4);--dsc-dropdownmenu-header-padding:var(--ds-spacing-2) var(--ds-spacing-4);background-color:var(--ds-color-neutral-background-default);border:1px solid var(--ds-color-neutral-border-subtle);border-radius:min(1rem,var(--ds-border-radius-md));box-shadow:var(--ds-shadow-md);list-style:none;margin:0;min-width:var(--dsc-dropdownmenu-min-width);padding:var(--dsc-dropdownmenu-padding);position:relative;z-index:1500}.ds-dropdownmenu[data-size=sm]{--dsc-dropdownmenu-padding:var(--ds-spacing-2);--dsc-dropdownmenu-min-width:15rem}.ds-dropdownmenu[data-size=lg]{--dsc-dropdownmenu-padding:var(--ds-spacing-4) var(--ds-spacing-2);--dsc-dropdownmenu-min-width:18rem}.ds-dropdownmenu__item{justify-content:start;padding:var(--dsc-dropdownmenu-item-padding);width:100%}.ds-dropdownmenu__group{list-style:none;margin:0;padding:0}.ds-dropdownmenu__heading{padding:var(--dsc-dropdownmenu-header-padding)}
package/dropdownmenu.css DELETED
@@ -1,43 +0,0 @@
1
- .ds-dropdownmenu {
2
- --dsc-dropdownmenu-padding: var(--ds-spacing-3) var(--ds-spacing-2);
3
- --dsc-dropdownmenu-min-width: 16rem;
4
- --dsc-dropdownmenu-item-padding: 0 var(--ds-spacing-4);
5
- --dsc-dropdownmenu-header-padding: var(--ds-spacing-2) var(--ds-spacing-4);
6
-
7
- position: relative;
8
- padding: var(--dsc-dropdownmenu-padding);
9
- z-index: 1500;
10
- margin: 0;
11
- list-style: none;
12
- border-radius: min(1rem, var(--ds-border-radius-md));
13
- box-shadow: var(--ds-shadow-md);
14
- background-color: var(--ds-color-neutral-background-default);
15
- border: 1px solid var(--ds-color-neutral-border-subtle);
16
- min-width: var(--dsc-dropdownmenu-min-width);
17
-
18
- &[data-size='sm'] {
19
- --dsc-dropdownmenu-padding: var(--ds-spacing-2);
20
- --dsc-dropdownmenu-min-width: 15rem;
21
- }
22
-
23
- &[data-size='lg'] {
24
- --dsc-dropdownmenu-padding: var(--ds-spacing-4) var(--ds-spacing-2);
25
- --dsc-dropdownmenu-min-width: 18rem;
26
- }
27
- }
28
-
29
- .ds-dropdownmenu__item {
30
- justify-content: start;
31
- padding: var(--dsc-dropdownmenu-item-padding);
32
- width: 100%;
33
- }
34
-
35
- .ds-dropdownmenu__group {
36
- margin: 0;
37
- padding: 0;
38
- list-style: none;
39
- }
40
-
41
- .ds-dropdownmenu__heading {
42
- padding: var(--dsc-dropdownmenu-header-padding);
43
- }