@oslokommune/punkt-css 9.3.2 → 9.4.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 (49) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/README.md +1 -1
  3. package/dist/css/components/alert.css +18 -16
  4. package/dist/css/components/alert.min.css +1 -1
  5. package/dist/css/components/badge.css +2 -13
  6. package/dist/css/components/badge.min.css +1 -1
  7. package/dist/css/components/footer.css +5 -5
  8. package/dist/css/components/footer.min.css +1 -1
  9. package/dist/css/components/header.css +20 -11
  10. package/dist/css/components/header.min.css +1 -1
  11. package/dist/css/components/inputwrapper.css +21 -16
  12. package/dist/css/components/inputwrapper.min.css +1 -1
  13. package/dist/css/components/linkcard.css +21 -12
  14. package/dist/css/components/linkcard.min.css +1 -1
  15. package/dist/css/components/messagebox.css +12 -12
  16. package/dist/css/components/messagebox.min.css +1 -1
  17. package/dist/css/components/tag.css +126 -40
  18. package/dist/css/components/tag.min.css +1 -1
  19. package/dist/css/components/textinput.css +61 -35
  20. package/dist/css/components/textinput.min.css +1 -1
  21. package/dist/css/pkt-base.css +1418 -243
  22. package/dist/css/pkt-base.min.css +1 -1
  23. package/dist/css/pkt-components.css +286 -160
  24. package/dist/css/pkt-components.min.css +1 -1
  25. package/dist/css/pkt-elements.css +484 -344
  26. package/dist/css/pkt-elements.min.css +1 -1
  27. package/dist/css/pkt.css +2127 -712
  28. package/dist/css/pkt.min.css +1 -1
  29. package/dist/scss/abstracts/variables/_colors.scss +108 -0
  30. package/dist/scss/abstracts/variables/_spacing.scss +12 -10
  31. package/dist/scss/base/_colors.scss +111 -9
  32. package/dist/scss/base/_typography.scss +15 -58
  33. package/dist/scss/components/_alert.scss +28 -25
  34. package/dist/scss/components/_badge.scss +56 -55
  35. package/dist/scss/components/_footer.scss +5 -8
  36. package/dist/scss/components/_header.scss +30 -16
  37. package/dist/scss/components/_inputwrapper.scss +27 -20
  38. package/dist/scss/components/_linkcard.scss +41 -16
  39. package/dist/scss/components/_messagebox.scss +16 -14
  40. package/dist/scss/components/_tag.scss +150 -41
  41. package/dist/scss/elements/_button.scss +220 -156
  42. package/dist/scss/elements/_checkbox-radio.scss +86 -150
  43. package/dist/scss/elements/_form.scss +26 -24
  44. package/dist/scss/elements/_hr.scss +1 -1
  45. package/dist/scss/elements/_input.scss +63 -41
  46. package/dist/scss/elements/_list.scss +11 -6
  47. package/dist/scss/elements/_section.scss +8 -8
  48. package/dist/scss/elements/_table.scss +8 -8
  49. package/package.json +2 -2
package/dist/scss/components/_tag.scss CHANGED
@@ -7,35 +7,61 @@
7
7
  @use '../abstracts/mixins/typography';
8
8
 
9
9
  .pkt-tag {
10
+
11
+ --pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);
12
+ --pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);
13
+ --pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);
14
+ --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
15
+
16
+ @at-root [data-mode='dark'] .pkt-tag {
17
+ --pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);
18
+ --pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);
19
+ --pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);
20
+ --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
21
+ }
22
+
10
23
  @include typography.get-text('pkt-txt-14-medium');
11
- background: var(--color-blue-light);
24
+ background: var(--pkt-color-surface-default-light-blue);
12
25
  padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-8');
13
26
  display: inline-flex;
14
27
  align-items: center;
15
28
  height: 1.875rem;
16
29
  column-gap: 0;
30
+ color: var(--pkt-color-tag-text-normal);
17
31
 
18
32
  &.pkt-btn:hover,
19
33
  &.pkt-tag--hover {
20
- background-color: var(--color-blue);
21
- color: var(--color-active);
34
+ background-color: var(--pkt-color-surface-strong-blue);
35
+ color: var(--pkt-color-tag-text-hover);
22
36
  text-decoration: underline;
23
37
  border-color: transparent;
38
+
39
+ >svg {
40
+ --fg-color: var(--pkt-color-tag-text-hover);
41
+ }
24
42
  }
25
43
 
26
44
  &.pkt-btn:focus,
27
45
  &.pkt-tag--focus {
28
- background-color: var(--color-blue);
29
- border-color: var(--color-active);
30
- outline: 4px solid var(--color-focus);
31
- color: var(--color-active);
46
+ background-color: var(--pkt-color-surface-strong-blue);
47
+ border-color: var(--pkt-color-text-action-active);
48
+ outline: 4px solid var(--pkt-color-border-states-focus);
49
+ color: var(--pkt-color-tag-text-focus);
50
+
51
+ >svg {
52
+ --fg-color: var(--pkt-color-tag-text-focus);
53
+ }
32
54
  }
33
55
 
34
56
  &.pkt-btn:active,
35
57
  &.pkt-tag--active,
36
58
  &.pkt-tag--active:hover {
37
- background-color: var(--color-blue);
38
- color: var(--color-active);
59
+ background-color: var(--pkt-color-surface-strong-blue);
60
+ color: var(--pkt-color-tag-text-active);
61
+
62
+ >svg {
63
+ --fg-color: var(--pkt-color-tag-text-active);
64
+ }
39
65
  }
40
66
 
41
67
  &__icon {
@@ -53,123 +79,210 @@
53
79
  // Modifiers
54
80
  // Skins
55
81
  &--green {
56
- background: var(--color-green-light);
82
+ background: var(--pkt-color-surface-strong-light-green);
57
83
 
58
84
  &.pkt-btn:hover,
59
85
  &.pkt-tag--hover {
60
- background-color: var(--color-green);
86
+ background-color: var(--pkt-color-surface-strong-green);
87
+ color: var(--pkt-color-tag-text-hover);
88
+
89
+ >svg {
90
+ --fg-color: var(--pkt-color-tag-text-hover);
91
+ }
61
92
 
62
93
  }
63
94
 
64
95
  &.pkt-btn:focus,
65
96
  &.pkt-tag--focus {
66
- background-color: var(--color-green);
97
+ background-color: var(--pkt-color-surface-strong-green);
98
+ color: var(--pkt-color-tag-text-focus);
99
+
100
+ >svg {
101
+ --fg-color: var(--pkt-color-tag-text-focus);
102
+ }
67
103
  }
68
104
 
69
105
  &.pkt-btn:active,
70
106
  &.pkt-tag--active {
71
- background-color: var(--color-green);
107
+ background-color: var(--pkt-color-surface-strong-green);
108
+ color: var(--pkt-color-tag-text-active);
109
+
110
+ >svg {
111
+ --fg-color: var(--pkt-color-tag-text-active);
112
+ }
72
113
  }
73
114
  }
74
115
 
75
116
 
76
117
  &--yellow {
77
- background: var(--color-yellow-50);
118
+ background: var(--pkt-color-surface-default-yellow);
78
119
 
79
120
  &.pkt-btn:hover,
80
121
  &.pkt-tag--hover {
81
- background-color: var(--color-yellow);
122
+ background-color: var(--pkt-color-surface-strong-yellow);
123
+ color: var(--pkt-color-tag-text-hover);
124
+
125
+ >svg {
126
+ --fg-color: var(--pkt-color-tag-text-hover);
127
+ }
82
128
  }
83
129
 
84
130
  &.pkt-btn:focus,
85
131
  &.pkt-tag--focus {
86
- background-color: var(--color-yellow);
132
+ background-color: var(--pkt-color-surface-strong-yellow);
133
+ color: var(--pkt-color-tag-text-focus);
134
+
135
+ >svg {
136
+ --fg-color: var(--pkt-color-tag-text-focus);
137
+ }
87
138
  }
88
139
 
89
140
  &.pkt-btn:active,
90
141
  &.pkt-tag--active {
91
- background-color: var(--color-yellow);
142
+ background-color: var(--pkt-color-surface-strong-yellow);
143
+ color: var(--pkt-color-tag-text-active);
144
+
145
+ >svg {
146
+ --fg-color: var(--pkt-color-tag-text-active);
147
+ }
92
148
  }
93
149
  }
94
150
 
95
151
  &--red {
96
- background: var(--color-red-light);
152
+ background: var(--pkt-color-surface-default-red);
97
153
 
98
154
  &.pkt-btn:hover,
99
155
  &.pkt-tag--hover {
100
- background-color: var(--color-red);
101
- color: var(--color-blue-dark);
156
+ background-color: var(--pkt-color-surface-strong-red);
157
+ color: var(--pkt-color-tag-text-hover);
158
+
159
+ >svg {
160
+ --fg-color: var(--pkt-color-tag-text-hover);
161
+ }
102
162
  }
103
163
 
104
164
  &.pkt-btn:focus,
105
165
  &.pkt-tag--focus {
106
- background-color: var(--color-red);
107
- color: var(--color-blue-dark);
166
+ background-color: var(--pkt-color-surface-strong-red);
167
+ color: var(--pkt-color-tag-text-focus);
168
+
169
+ >svg {
170
+ --fg-color: var(--pkt-color-tag-text-focus);
171
+ }
108
172
  }
109
173
 
110
174
  &.pkt-btn:active,
111
175
  &.pkt-tag--active {
112
- background-color: var(--color-red);
113
- color: var(--color-blue-dark);
176
+ background-color: var(--pkt-color-surface-strong-red);
177
+ color: var(--pkt-color-tag-text-active);
178
+
179
+ >svg {
180
+ --fg-color: var(--pkt-color-tag-text-active);
181
+ }
114
182
  }
115
183
  }
116
184
 
117
185
  &--beige {
118
- background: var(--color-beige-light);
186
+ background: var(--pkt-color-surface-default-light-beige);
119
187
 
120
188
  &.pkt-btn:hover,
121
189
  &.pkt-tag--hover {
122
- background-color: var(--color-beige-dark);
190
+ background-color: var(--pkt-color-surface-strong-beige);
191
+ color: var(--pkt-color-tag-text-hover);
192
+
193
+ >svg {
194
+ --fg-color: var(--pkt-color-tag-text-hover);
195
+ }
123
196
  }
124
197
 
125
198
  &.pkt-btn:focus,
126
199
  &.pkt-tag--focus {
127
- background-color: var(--color-beige-dark);
200
+ background-color: var(--pkt-color-surface-strong-beige);
201
+ color: var(--pkt-color-tag-text-focus);
202
+
203
+ >svg {
204
+ --fg-color: var(--pkt-color-tag-text-focus);
205
+ }
128
206
  }
129
207
 
130
208
  &.pkt-btn:active,
131
209
  &.pkt-tag--active {
132
- background-color: var(--color-beige-dark);
210
+ background-color: var(--pkt-color-surface-strong-beige);
211
+ color: var(--pkt-color-tag-text-active);
212
+
213
+ >svg {
214
+ --fg-color: var(--pkt-color-tag-text-active);
215
+ }
133
216
  }
134
217
  }
135
218
 
136
219
  &--grey {
137
- background: var(--color-gray-light);
220
+ background: var(--pkt-color-surface-default-gray);
138
221
 
139
222
  &.pkt-btn:hover,
140
223
  &.pkt-tag--hover {
141
- background-color: var(--color-grayscale-20);
224
+ background-color: var(--pkt-color-surface-strong-gray);
225
+ color: var(--pkt-color-tag-text-hover);
226
+
227
+ >svg {
228
+ --fg-color: var(--pkt-color-tag-text-hover);
229
+ }
142
230
  }
143
231
 
144
232
  &.pkt-btn:focus,
145
233
  &.pkt-tag--focus {
146
- background-color: var(--color-grayscale-20);
234
+ background-color: var(--pkt-color-surface-strong-gray);
235
+ color: var(--pkt-color-tag-text-active);
236
+
237
+ >svg {
238
+ --fg-color: var(--pkt-color-tag-text-active);
239
+ }
147
240
  }
148
241
 
149
242
  &.pkt-btn:active,
150
243
  &.pkt-tag--active {
151
- background-color: var(--color-grayscale-20);
244
+ background-color: var(--pkt-color-surface-strong-gray);
245
+ color: var(--pkt-color-tag-text-active);
246
+
247
+ >svg {
248
+ --fg-color: var(--pkt-color-tag-text-active);
249
+ }
152
250
  }
153
251
 
154
252
  }
155
253
 
156
254
 
157
255
  &--blue-light {
158
- background: var(--color-blue-10);
256
+ background: var(--pkt-color-surface-subtle-light-blue);
159
257
 
160
258
  &.pkt-btn:hover,
161
259
  &.pkt-tag--hover {
162
- background-color: var(--color-blue-light);
260
+ background-color: var(--pkt-color-surface-strong-blue);
261
+ color: var(--pkt-color-tag-text-hover);
262
+
263
+ >svg {
264
+ --fg-color: var(--pkt-color-tag-text-hover);
265
+ }
163
266
  }
164
267
 
165
268
  &.pkt-btn:focus,
166
269
  &.pkt-tag--focus {
167
- background-color: var(--color-blue-light);
270
+ background-color: var(--pkt-color-surface-strong-blue);
271
+ color: var(--pkt-color-tag-text-focus);
272
+
273
+ >svg {
274
+ --fg-color: var(--pkt-color-tag-text-focus);
275
+ }
168
276
  }
169
277
 
170
278
  &.pkt-btn:active,
171
279
  &.pkt-tag--active {
172
- background-color: var(--color-blue-light);
280
+ background-color: var(--pkt-color-surface-strong-blue);
281
+ color: var(--pkt-color-tag-text-active);
282
+
283
+ >svg {
284
+ --fg-color: var(--pkt-color-tag-text-active);
285
+ }
173
286
  }
174
287
 
175
288
  }
@@ -195,12 +308,8 @@
195
308
  &--normal-text {
196
309
  @include typography.get-text('pkt-txt-14-medium');
197
310
  }
311
+
198
312
  &--thin-text {
199
313
  @include typography.get-text('pkt-txt-14-light');
200
314
  }
201
315
  }
202
-
203
- // Dark mode
204
- :root [data-mode='dark'] .pkt-tag {
205
- color: var(--color-blue-dark);
206
- }