@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/elements/_button.scss CHANGED
@@ -39,108 +39,109 @@ $-sizes: (
39
39
  );
40
40
 
41
41
  $-skins: (
42
- 'primary': ('light': ('link-bg': --color-blue-dark,
43
- 'link-bc': --color-blue-dark,
44
- 'link-txt': --color-white,
45
- 'focus-bg': --color-active,
46
- 'focus-bc': --color-active,
47
- 'focus-txt': --color-white,
48
- 'focus-outline': --color-focus,
49
- 'hover-bg': --color-active,
50
- 'hover-bc': --color-active,
51
- 'hover-txt': --color-white,
52
- 'active-bg': --color-active,
53
- 'active-bc': --color-active,
54
- 'active-txt': --color-white,
55
- 'disabled-bg': --color-gray,
56
- 'disabled-bc': --color-gray,
57
- 'disabled-txt': --color-disabled,
42
+ 'primary': ('light': ('button-background-normal': --pkt-color-brand-dark-blue-1000,
43
+ 'button-border-normal': --pkt-color-brand-dark-blue-1000,
44
+ 'button-text-normal': --pkt-color-brand-neutrals-white,
45
+ 'button-background-focus': --pkt-color-brand-warm-blue-1000,
46
+ 'button-border-focus': --pkt-color-brand-warm-blue-1000,
47
+ 'button-text-focus': --pkt-color-brand-neutrals-white,
48
+ 'border-states-focus': --pkt-color-brand-purple-1000,
49
+ 'button-background-hover': --pkt-color-brand-warm-blue-1000,
50
+ 'button-border-hover': --pkt-color-brand-warm-blue-1000,
51
+ 'button-text-hover': --pkt-color-brand-neutrals-white,
52
+ 'button-background-active': --pkt-color-brand-warm-blue-1000,
53
+ 'button-border-active': --pkt-color-brand-warm-blue-1000,
54
+ 'button-text-active': --pkt-color-brand-neutrals-white,
55
+ 'button-background-disabled': --pkt-color-brand-neutrals-100,
56
+ 'button-border-disabled': --pkt-color-brand-neutrals-100,
57
+ 'button-text-disabled': --pkt-color-grays-gray-500,
58
58
  ),
59
- 'dark': ('link-bg': --color-blue-light,
60
- 'link-bc': --color-blue-light,
61
- 'link-txt': --color-blue-dark,
62
- 'focus-bg': --color-blue,
63
- 'focus-bc': --color-blue,
64
- 'focus-txt': --color-blue-dark,
65
- 'focus-outline': --color-focus,
66
- 'hover-bg': --color-blue,
67
- 'hover-bc': --color-blue,
68
- 'hover-txt': --color-blue-dark,
69
- 'active-bg': --color-blue,
70
- 'active-bc': --color-blue,
71
- 'active-txt': --color-blue-dark,
72
- 'disabled-bg': --color-gray,
73
- 'disabled-bc': --color-gray,
74
- 'disabled-txt': --color-disabled,
59
+ 'dark': ('button-background-normal': --pkt-color-brand-blue-500,
60
+ 'button-border-normal': --pkt-color-brand-blue-500,
61
+ 'button-text-normal': --pkt-color-brand-dark-blue-1000,
62
+ 'button-background-focus': --pkt-color-brand-blue-1000,
63
+ 'button-border-focus': --pkt-color-brand-blue-1000,
64
+ 'button-text-focus': --pkt-color-brand-dark-blue-1000,
65
+ 'border-states-focus': --pkt-color-brand-purple-1000,
66
+ 'button-background-hover': --pkt-color-brand-blue-1000,
67
+ 'button-border-hover': --pkt-color-brand-blue-1000,
68
+ 'button-text-hover': --pkt-color-brand-dark-blue-1000,
69
+ 'button-background-active': --pkt-color-brand-blue-1000,
70
+ 'button-border-active': --pkt-color-brand-blue-1000,
71
+ 'button-text-active': --pkt-color-brand-dark-blue-1000,
72
+ 'button-background-disabled': --pkt-color-brand-neutrals-100,
73
+ 'button-border-disabled': --pkt-color-brand-neutrals-100,
74
+ 'button-text-disabled': --pkt-color-grays-gray-600,
75
75
  ),
76
76
  ),
77
- 'secondary': ('light': ('link-bg': --color-transparent,
78
- 'link-bc': --color-blue-dark,
79
- 'link-txt': --color-blue-dark,
80
- 'focus-bg': --color-transparent,
81
- 'focus-bc': --color-active,
82
- 'focus-txt': --color-active,
83
- 'focus-outline': --color-focus,
84
- 'hover-bg': --color-active,
85
- 'hover-bc': --color-active,
86
- 'hover-txt': --color-white,
87
- 'active-bg': --color-active,
88
- 'active-bc': --color-active,
89
- 'active-txt': --color-white,
90
- 'disabled-bg': --color-gray,
91
- 'disabled-bc': --color-gray,
92
- 'disabled-txt': --color-disabled,
77
+ 'secondary': ('light': ('button-background-normal': --pkt-color-brand-neutrals-transparent,
78
+ 'button-border-normal': --pkt-color-brand-neutrals-transparent,
79
+ 'button-text-normal': --pkt-color-brand-dark-blue-1000,
80
+ 'button-background-focus': --pkt-color-brand-warm-blue-1000,
81
+ 'button-border-focus': --pkt-color-brand-warm-blue-1000,
82
+ 'button-text-focus': --pkt-color-brand-neutrals-white,
83
+ 'border-states-focus': --pkt-color-brand-purple-1000,
84
+ 'button-background-hover': --pkt-color-brand-warm-blue-1000,
85
+ 'button-border-hover': --pkt-color-brand-warm-blue-1000,
86
+ 'button-text-hover': --pkt-color-brand-neutrals-white,
87
+ 'button-background-active': --pkt-color-brand-warm-blue-1000,
88
+ 'button-border-active': --pkt-color-brand-warm-blue-1000,
89
+ 'button-text-active': --pkt-color-brand-neutrals-white,
90
+ 'button-background-disabled': --pkt-color-brand-neutrals-100,
91
+ 'button-border-disabled': --pkt-color-brand-neutrals-100,
92
+ 'button-text-disabled': --pkt-color-grays-gray-600,
93
93
  ),
94
- 'dark': ('link-bg': --color-transparent,
95
- 'link-bc': --color-white,
96
- 'link-txt': --color-white,
97
- 'focus-bg': --color-transparent,
98
- 'focus-bc': --color-active-light,
99
- 'focus-txt': --color-active-light,
100
- 'focus-outline': --color-focus,
101
- 'hover-bg': --color-active-light,
102
- 'hover-bc': --color-active-light,
103
- 'hover-txt': --color-blue-dark,
104
- 'active-bg': --color-active-light,
105
- 'active-bc': --color-active-light,
106
- 'active-txt': --color-blue-dark,
107
- 'disabled-bg': --color-gray,
108
- 'disabled-bc': --color-gray,
109
- 'disabled-txt': --color-disabled,
94
+ 'dark': ('button-background-normal': --pkt-color-brand-neutrals-transparent,
95
+ 'button-border-normal': --pkt-color-brand-neutrals-white,
96
+ 'button-text-normal': --pkt-color-brand-neutrals-white,
97
+ 'button-background-focus': --pkt-color-brand-blue-500,
98
+ 'button-border-focus': --pkt-color-brand-blue-500,
99
+ 'button-text-focus': --pkt-color-brand-dark-blue-1000,
100
+ 'border-states-focus': --pkt-color-brand-purple-1000,
101
+ 'button-background-hover': --pkt-color-brand-blue-500,
102
+ 'button-border-hover': --pkt-color-brand-blue-500,
103
+ 'button-text-hover': --pkt-color-brand-dark-blue-1000,
104
+ 'button-background-active': --pkt-color-brand-blue-500,
105
+ 'button-border-active': --pkt-color-brand-blue-500,
106
+ 'button-text-active': --pkt-color-brand-dark-blue-1000,
107
+ 'button-background-disabled': --pkt-color-grays-gray-100,
108
+ 'button-border-disabled': --pkt-color-grays-gray-100,
109
+ 'button-text-disabled': --pkt-color-grays-gray-600,
110
110
  ),
111
111
  ),
112
- 'tertiary': ('light': ('link-bg': --color-transparent,
113
- 'link-bc': --color-transparent,
114
- 'link-txt': --color-blue-dark,
115
- 'focus-bg': --color-gray,
116
- 'focus-bc': --color-active,
117
- 'focus-txt': --color-active,
118
- 'hover-bg': --color-gray,
119
- 'hover-bc': --color-gray,
120
- 'hover-txt': --color-active,
121
- 'active-bg': --color-active,
122
- 'active-bc': --color-active,
123
- 'active-txt': --color-white,
124
- 'disabled-bg': --color-transparent,
125
- 'disabled-bc': --color-transparent,
126
- 'disabled-txt': --color-disabled,
112
+ 'tertiary': ('light': ('button-background-normal': --pkt-color-brand-neutrals-transparent,
113
+ 'button-border-normal': --pkt-color-brand-neutrals-transparent,
114
+ 'button-text-normal': --pkt-color-brand-dark-blue-1000,
115
+ 'button-background-focus': --pkt-color-brand-neutrals-200,
116
+ 'button-border-focus': --pkt-color-brand-warm-blue-1000,
117
+ 'button-text-focus': --pkt-color-brand-warm-blue-1000,
118
+ 'border-states-focus': --pkt-color-brand-purple-1000,
119
+ 'button-background-hover': --pkt-color-brand-neutrals-200,
120
+ 'button-border-hover': --pkt-color-brand-neutrals-200,
121
+ 'button-text-hover': --pkt-color-brand-warm-blue-1000,
122
+ 'button-background-active': --pkt-color-brand-warm-blue-1000,
123
+ 'button-border-active': --pkt-color-brand-warm-blue-1000,
124
+ 'button-text-active': --pkt-color-brand-neutrals-white,
125
+ 'button-background-disabled': --pkt-color-brand-neutrals-100,
126
+ 'button-border-disabled': --pkt-color-brand-neutrals-100,
127
+ 'button-text-disabled': --pkt-color-grays-gray-600,
127
128
  ),
128
- 'dark': ('link-bg': --color-transparent,
129
- 'link-bc': --color-transparent,
130
- 'link-txt': --color-white,
131
- 'focus-bg': --color-blue-5,
132
- 'focus-bc': --color-active,
133
- 'focus-txt': --color-blue-dark,
134
- 'focus-outline': --color-focus,
135
- 'hover-bg': --color-blue-5,
136
- 'hover-bc': --color-blue-5,
137
- 'hover-txt': --color-blue-dark,
138
- 'active-bg': --color-blue-dark-10,
139
- 'active-bc': --color-transparent,
140
- 'active-txt': --color-blue-dark,
141
- 'disabled-bg': --color-transparent,
142
- 'disabled-bc': --color-transparent,
143
- 'disabled-txt': --color-disabled,
129
+ 'dark': ('button-background-normal': --pkt-color-brand-neutrals-transparent,
130
+ 'button-border-normal': --pkt-color-brand-neutrals-transparent,
131
+ 'button-text-normal': --pkt-color-brand-neutrals-white,
132
+ 'button-background-focus': --pkt-color-brand-dark-blue-700,
133
+ 'button-border-focus': --pkt-color-brand-dark-blue-700,
134
+ 'border-states-focus': --pkt-color-brand-purple-1000,
135
+ 'button-text-focus': --pkt-color-brand-neutrals-white,
136
+ 'button-background-hover': --pkt-color-brand-dark-blue-700,
137
+ 'button-border-hover': --pkt-color-brand-dark-blue-700,
138
+ 'button-text-hover': --pkt-color-brand-neutrals-white,
139
+ 'button-background-active': --pkt-color-brand-dark-blue-700,
140
+ 'button-border-active': --pkt-color-brand-dark-blue-700,
141
+ 'button-text-active': --pkt-color-brand-neutrals-white,
142
+ 'button-background-disabled': --pkt-color-brand-neutrals-100,
143
+ 'button-border-disabled': --pkt-color-brand-neutrals-100,
144
+ 'button-text-disabled': --pkt-color-grays-gray-600,
144
145
  ),
145
146
  ),
146
147
  );
@@ -152,7 +153,7 @@ $-skins: (
152
153
 
153
154
  // Only print primary skin and css vars that differ from primary
154
155
  @if $name =='primary' or $value !=map.get($-skins, 'primary', $mode, $key) {
155
- --btn-#{$key}: var(#{$value});
156
+ --pkt-color-#{$key}: var(#{$value});
156
157
  }
157
158
  }
158
159
  }
@@ -239,13 +240,76 @@ $-skins: (
239
240
  );
240
241
 
241
242
  // Dark mode
242
- &--green-dark-outline,
243
- &--green-outline,
244
- &--blue-outline,
245
- &--beige-dark-outline,
246
- &--yellow-outline,
243
+ &--green-dark {
244
+ --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
245
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
246
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
247
+ }
248
+
249
+ &--green-dark-outline {
250
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
251
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
252
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
253
+ }
254
+
255
+ &--green {
256
+ --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
257
+ --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
258
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
259
+ }
260
+
261
+ &--green-outline {
262
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
263
+ --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
264
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
265
+ }
266
+
267
+ &--blue {
268
+ --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
269
+ --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
270
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
271
+ }
272
+
273
+ &--blue-outline {
274
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
275
+ --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
276
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
277
+ }
278
+
279
+ &--beige-light {
280
+ --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
281
+ --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
282
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
283
+ }
284
+
285
+ &--beige-dark-outline {
286
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
287
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
288
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
289
+ }
290
+
291
+ &--yellow {
292
+ --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
293
+ --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
294
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
295
+ }
296
+
297
+ &--yellow-outline {
298
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
299
+ --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
300
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
301
+ }
302
+
303
+ &--red {
304
+ --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
305
+ --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
306
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
307
+ }
308
+
247
309
  &--red-outline {
248
- color: var(--color-white);
310
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
311
+ --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
312
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
249
313
  }
250
314
  }
251
315
  }
@@ -269,9 +333,9 @@ $value in $-skins {
269
333
  -ms-user-select: none;
270
334
  user-select: none;
271
335
  vertical-align: top;
272
- background-color: var(--btn-link-bg);
273
- border: 2px solid var(--btn-link-bc);
274
- color: var(--btn-link-txt);
336
+ background-color: var(--pkt-color-button-background-normal);
337
+ border: 2px solid var(--pkt-color-button-border-normal);
338
+ color: var(--pkt-color-button-text-normal);
275
339
  text-decoration: none;
276
340
  text-decoration-thickness: 1px;
277
341
  text-underline-offset: 0.3em;
@@ -291,25 +355,25 @@ $value in $-skins {
291
355
 
292
356
  &:link,
293
357
  &:visited {
294
- color: var(--btn-link-txt);
358
+ color: var(--pkt-color-button-text-normal);
295
359
  }
296
360
 
297
361
  @at-root a.#{$-module-name}:focus,
298
362
  &:enabled:focus,
299
363
  &.#{$-module-name}--focus {
300
- background-color: var(--btn-focus-bg);
301
- color: var(--btn-focus-txt);
302
- border-color: var(--btn-focus-bc);
303
- outline: 4px solid var(--btn-focus-outline);
364
+ background-color: var(--pkt-color-button-background-focus);
365
+ color: var(--pkt-color-button-text-focus);
366
+ border-color: var(--pkt-color-button-border-focus);
367
+ outline: 4px solid var(--pkt-color-border-states-focus);
304
368
  text-decoration: none;
305
369
  }
306
370
 
307
371
  @at-root a.#{$-module-name}:hover,
308
372
  &:enabled:hover,
309
373
  &.#{$-module-name}--hover {
310
- background-color: var(--btn-hover-bg);
311
- border-color: var(--btn-hover-bc);
312
- color: var(--btn-hover-txt);
374
+ background-color: var(--pkt-color-button-background-hover);
375
+ border-color: var(--pkt-color-button-border-hover);
376
+ color: var(--pkt-color-button-text-hover);
313
377
  outline: 0;
314
378
  text-decoration: underline;
315
379
  }
@@ -318,17 +382,17 @@ $value in $-skins {
318
382
  &:enabled:active,
319
383
  &.#{$-module-name}--active,
320
384
  &.#{$-module-name}--active:hover {
321
- background-color: var(--btn-active-bg);
322
- border-color: var(--btn-active-bc);
323
- color: var(--btn-active-txt);
385
+ background-color: var(--pkt-color-button-background-active);
386
+ border-color: var(--pkt-color-button-border-active);
387
+ color: var(--pkt-color-button-text-active);
324
388
  outline: 0;
325
389
  text-decoration: none;
326
390
  }
327
391
 
328
392
  &:disabled {
329
- background-color: var(--btn-disabled-bg);
330
- border-color: var(--btn-disabled-bc);
331
- color: var(--btn-disabled-txt);
393
+ background-color: var(--pkt-color-button-background-disabled);
394
+ border-color: var(--pkt-color-button-border-disabled);
395
+ color: var(--pkt-color-button-text-disabled);
332
396
  cursor: inherit;
333
397
  }
334
398
 
@@ -345,76 +409,76 @@ $value in $-skins {
345
409
  }
346
410
 
347
411
 
348
- // button colors
412
+ // button colors modifiers
349
413
  &--green-dark {
350
- --btn-link-bg: var(--color-green-dark);
351
- --btn-link-bc: var(--color-green-dark);
352
- --btn-link-txt: var(--color-white);
414
+ --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
415
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
416
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
353
417
  }
354
418
 
355
419
  &--green-dark-outline {
356
- --btn-link-bg: transparent;
357
- --btn-link-bc: var(--color-green-dark);
358
- --btn-link-txt: var(--color-blue-dark);
420
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
421
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
422
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
359
423
  }
360
424
 
361
425
  &--green {
362
- --btn-link-bg: var(--color-green);
363
- --btn-link-bc: var(--color-green);
364
- --btn-link-txt: var(--color-blue-dark);
426
+ --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
427
+ --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
428
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
365
429
  }
366
430
 
367
431
  &--green-outline {
368
- --btn-link-bg: transparent;
369
- --btn-link-bc: var(--color-green);
370
- --btn-link-txt: var(--color-blue-dark);
432
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
433
+ --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
434
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
371
435
  }
372
436
 
373
437
  &--blue {
374
- --btn-link-bg: var(--color-blue);
375
- --btn-link-bc: var(--color-blue);
376
- --btn-link-txt: var(--color-blue-dark);
438
+ --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
439
+ --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
440
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
377
441
  }
378
442
 
379
443
  &--blue-outline {
380
- --btn-link-bg: transparent;
381
- --btn-link-bc: var(--color-blue);
382
- --btn-link-txt: var(--color-blue-dark);
444
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
445
+ --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
446
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
383
447
  }
384
448
 
385
449
  &--beige-light {
386
- --btn-link-bg: var(--color-beige-light);
387
- --btn-link-bc: var(--color-beige-light);
388
- --btn-link-txt: var(--color-blue-dark);
450
+ --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
451
+ --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
452
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
389
453
  }
390
454
 
391
455
  &--beige-dark-outline {
392
- --btn-link-bg: transparent;
393
- --btn-link-bc: var(--color-beige-dark);
394
- --btn-link-txt: var(--color-blue-dark);
456
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
457
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
458
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
395
459
  }
396
460
 
397
461
  &--yellow {
398
- --btn-link-bg: var(--color-yellow);
399
- --btn-link-bc: var(--color-yellow);
400
- --btn-link-txt: var(--color-blue-dark);
462
+ --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
463
+ --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
464
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
401
465
  }
402
466
 
403
467
  &--yellow-outline {
404
- --btn-link-bg: transparent;
405
- --btn-link-bc: var(--color-yellow);
406
- --btn-link-txt: var(--color-blue-dark);
468
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
469
+ --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
470
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
407
471
  }
408
472
 
409
473
  &--red {
410
- --btn-link-bg: var(--color-red);
411
- --btn-link-bc: var(--color-red);
412
- --btn-link-txt: var(--color-blue-dark);
474
+ --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
475
+ --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
476
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
413
477
  }
414
478
 
415
479
  &--red-outline {
416
- --btn-link-bg: transparent;
417
- --btn-link-bc: var(--color-red);
418
- --btn-link-txt: var(--color-blue-dark);
480
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
481
+ --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
482
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
419
483
  }
420
484
  }