@oslokommune/punkt-css 11.2.2 → 11.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 (20) hide show
  1. package/CHANGELOG.md +54 -0
  2. package/dist/css/components/alert.css +7 -4
  3. package/dist/css/components/alert.min.css +1 -1
  4. package/dist/css/components/messagebox.css +17 -1
  5. package/dist/css/components/messagebox.min.css +1 -1
  6. package/dist/css/components/textinput.css +1 -1
  7. package/dist/css/components/textinput.min.css +1 -1
  8. package/dist/css/pkt-base.css +1 -1
  9. package/dist/css/pkt-base.min.css +1 -1
  10. package/dist/css/pkt-components.css +25 -6
  11. package/dist/css/pkt-components.min.css +1 -1
  12. package/dist/css/pkt-elements.css +71 -17
  13. package/dist/css/pkt-elements.min.css +1 -1
  14. package/dist/css/pkt.css +96 -23
  15. package/dist/css/pkt.min.css +1 -1
  16. package/dist/scss/abstracts/variables/_index.scss +1 -1
  17. package/dist/scss/components/_alert.scss +8 -3
  18. package/dist/scss/components/_messagebox.scss +18 -2
  19. package/dist/scss/elements/_checkbox-radio.scss +126 -51
  20. package/package.json +2 -2
package/dist/scss/abstracts/variables/_index.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  @forward 'spacing';
7
7
 
8
8
  // Default icon path
9
- $icon-path: 'https://punkt-cdn.oslo.kommune.no/11.2/icons' !default;
9
+ $icon-path: 'https://punkt-cdn.oslo.kommune.no/11.4/icons' !default;
10
10
 
11
11
  // Borders
12
12
  $border-width: (
package/dist/scss/components/_alert.scss CHANGED
@@ -105,8 +105,10 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
105
105
  }
106
106
 
107
107
  // Utelukkende for bruk i feilmeldinger i InputWrapper
108
- .#{$-module-name}--slim {
109
- padding: map.get(variables.$spacing, 'size-12') map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-12') map.get(variables.$spacing, 'size-4');
108
+ .#{$-module-name}--compact {
109
+ padding: map.get(variables.$spacing, 'size-12')
110
+ map.get(variables.$spacing, 'size-16')
111
+ map.get(variables.$spacing, 'size-12') map.get(variables.$spacing, 'size-4');
110
112
 
111
113
  .#{$-module-name}__icon {
112
114
  width: 1.375rem;
@@ -117,6 +119,9 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
117
119
 
118
120
  .#{$-module-name}__text {
119
121
  @include get-text('pkt-txt-16-light');
120
- margin: 0 0 0 2.875rem;
122
+ margin: 0 2.875rem;
123
+ }
124
+ .#{$-module-name}__close {
125
+ top: 0.25rem;
121
126
  }
122
127
  }
package/dist/scss/components/_messagebox.scss CHANGED
@@ -1,4 +1,4 @@
1
- /*
1
+ /*
2
2
  * Messagebox component
3
3
  */
4
4
  @use 'sass:map';
@@ -10,6 +10,7 @@ $-module-name: 'pkt-messagebox';
10
10
 
11
11
  // Spacing
12
12
  $-messagebox-spacing: map.get(variables.$spacing, 'size-24');
13
+ $-messagebox-spacing-compact: map.get(variables.$spacing, 'size-16');
13
14
  $-border-thickness: map.get(variables.$spacing, 'size-4');
14
15
 
15
16
  // default is "info"
@@ -35,7 +36,8 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
35
36
  }
36
37
 
37
38
  .#{$-module-name} {
38
- padding: $-messagebox-spacing $-messagebox-spacing $-messagebox-spacing calc($-messagebox-spacing - $-border-thickness);
39
+ padding: $-messagebox-spacing $-messagebox-spacing $-messagebox-spacing
40
+ calc($-messagebox-spacing - $-border-thickness);
39
41
  display: block;
40
42
  position: relative;
41
43
  border-left: $-border-thickness solid var(--pkt-color-messagebox-bc);
@@ -60,3 +62,17 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
60
62
  }
61
63
  }
62
64
  }
65
+
66
+ // Compact variant
67
+ .#{$-module-name}--compact {
68
+ padding: $-messagebox-spacing-compact $-messagebox-spacing-compact
69
+ $-messagebox-spacing-compact
70
+ calc($-messagebox-spacing-compact - $-border-thickness);
71
+ .#{$-module-name}__title {
72
+ @include get-text('pkt-txt-16-medium');
73
+ }
74
+
75
+ .#{$-module-name}__text {
76
+ @include get-text('pkt-txt-16-light');
77
+ }
78
+ }
package/dist/scss/elements/_checkbox-radio.scss CHANGED
@@ -13,28 +13,37 @@ $-module-name: 'pkt-input-check';
13
13
 
14
14
  // Color tokens
15
15
  .#{$-module-name} {
16
- --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
17
- --pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
18
- --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
19
- --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
20
- --pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
21
- --pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
22
- --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
23
- --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
24
- --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
25
- --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
26
-
27
- @at-root [data-mode='dark'] .#{$-module-name} {
28
- --pkt-color-input-background-normal: var(--pkt-color-brand-dark-blue-1000);
29
- --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
30
- --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
16
+ &,
17
+ &__input,
18
+ &__input-checkbox,
19
+ &__input--tile {
20
+ --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
21
+ --pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
22
+ --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
31
23
  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
32
- --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
33
- --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
34
- --pkt-color-input-text-active: var(--pkt-color-brand-blue-500);
35
- --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
36
- --pkt-color-input-text-hover: var(--pkt-color-brand-blue-500);
24
+ --pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
25
+ --pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
26
+ --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
27
+ --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
28
+ --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
29
+ --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
37
30
  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
31
+
32
+ [data-mode='dark'] & {
33
+ --pkt-color-input-background-normal: var(
34
+ --pkt-color-brand-dark-blue-1000
35
+ );
36
+ --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
37
+ --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
38
+ --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
39
+ --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
40
+ --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
41
+ --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
42
+ --pkt-color-input-text-active: var(--pkt-color-brand-blue-500);
43
+ --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
44
+ --pkt-color-input-text-hover: var(--pkt-color-brand-blue-500);
45
+ --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
46
+ }
38
47
  }
39
48
  }
40
49
 
@@ -69,7 +78,7 @@ $-module-name: 'pkt-input-check';
69
78
  &-checkbox {
70
79
  appearance: none;
71
80
  background-color: var(--pkt-color-input-background-normal);
72
- border: 2px solid var(--pkt-color-input-border-normal);
81
+ border: 2px solid var(--pkt-color-input-check-border);
73
82
  width: 1.5rem;
74
83
  height: 1.5rem;
75
84
  flex-shrink: 0;
@@ -79,6 +88,26 @@ $-module-name: 'pkt-input-check';
79
88
  border-radius: 0;
80
89
  }
81
90
 
91
+ &[type='checkbox'][role='switch'] {
92
+ position: relative;
93
+ height: calc(1.5rem + 2px);
94
+ width: 2.5rem;
95
+ border-radius: calc(0.75rem + 2px);
96
+ &:after {
97
+ display: block;
98
+ content: '';
99
+ border: 2px solid var(--pkt-color-input-check-border);
100
+ background-color: var(--pkt-color-input-background-normal);
101
+ position: absolute;
102
+ top: -1px;
103
+ bottom: -1px;
104
+ left: -1px;
105
+ width: 1.5rem;
106
+ border-radius: 0.75rem;
107
+ transition: all 0.3s ease-out;
108
+ }
109
+ }
110
+
82
111
  &[type='radio'] {
83
112
  border-radius: 50%;
84
113
  border: none;
@@ -93,16 +122,16 @@ $-module-name: 'pkt-input-check';
93
122
  }
94
123
 
95
124
  &[type='checkbox']:hover {
96
- border-color: var(--pkt-color-input-border-hover);
125
+ --pkt-color-input-check-border: var(--pkt-color-input-border-hover);
97
126
  }
98
127
 
99
128
  &[type='checkbox']:active:not(:disabled) {
100
- border-color: var(--pkt-color-input-border-active);
129
+ --pkt-color-input-check-border: var(--pkt-color-input-border-active);
101
130
  outline: 6px solid var(--pkt-color-input-border-active);
102
131
  }
103
132
 
104
133
  &[type='checkbox']:focus-visible {
105
- border-color: var(--pkt-color-input-border-active);
134
+ --pkt-color-input-check-border: var(--pkt-color-input-border-active);
106
135
  outline: 4px solid var(--pkt-color-border-states-focus);
107
136
  outline-offset: 0;
108
137
  }
@@ -114,35 +143,48 @@ $-module-name: 'pkt-input-check';
114
143
  }
115
144
 
116
145
  &:checked {
117
- // Checkbox
146
+ // Checkbox and switch
118
147
  &[type='checkbox'] {
119
148
  --svg: url(#{variables.$icon-path}/check-medium.svg);
120
149
  position: relative;
121
150
  background-color: var(--pkt-color-input-border-normal);
122
151
  }
123
152
 
124
- &[type='checkbox']::before {
125
- content: '';
126
- position: absolute;
127
- top: 0;
128
- left: 0;
129
- width: 100%;
130
- height: 100%;
131
- z-index: -1;
153
+ // Checkbox
154
+ &:not([role='switch']) {
155
+ &[type='checkbox']:before {
156
+ content: '';
157
+ position: absolute;
158
+ top: 0;
159
+ left: 0;
160
+ width: 100%;
161
+ height: 100%;
162
+ z-index: -1;
163
+ }
164
+
165
+ &[type='checkbox']:after {
166
+ content: '';
167
+ position: absolute;
168
+ top: 50%;
169
+ left: 50%;
170
+ transform: translate(-50%, -50%);
171
+ width: 24px;
172
+ height: 24px;
173
+ background-image: var(--svg);
174
+ background-repeat: no-repeat;
175
+ filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
176
+ saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
177
+ }
132
178
  }
133
179
 
134
- &[type='checkbox']::after {
135
- content: '';
136
- position: absolute;
137
- top: 50%;
138
- left: 50%;
139
- transform: translate(-50%, -50%);
140
- width: 24px;
141
- height: 24px;
142
- background-image: var(--svg);
143
- background-repeat: no-repeat;
144
- filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
145
- saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
180
+ // Switch
181
+ &[role='switch'] {
182
+ &:after {
183
+ left: calc(100% + 1px);
184
+ transform: translate(-100%, 0);
185
+ background-image: var(--svg);
186
+ background-repeat: no-repeat;
187
+ }
146
188
  }
147
189
 
148
190
  // Radio
@@ -179,8 +221,17 @@ $-module-name: 'pkt-input-check';
179
221
  &:disabled {
180
222
  &[type='checkbox'] {
181
223
  background-color: var(--pkt-color-surface-default-gray);
182
- border-color: var(--pkt-color-input-border-disabled);
224
+ --pkt-color-input-check-border: var(
225
+ --pkt-color-input-border-disabled
226
+ );
183
227
  cursor: not-allowed;
228
+ &[role='switch']:checked:after {
229
+ --svg: url(#{variables.$icon-path}/check-medium.svg);
230
+ --pkt-color-input-check-border: var(
231
+ --pkt-color-input-border-normal
232
+ );
233
+ filter: grayscale(100%) brightness(400%);
234
+ }
184
235
  }
185
236
 
186
237
  &[type='radio'] {
@@ -195,7 +246,9 @@ $-module-name: 'pkt-input-check';
195
246
  &:disabled:checked {
196
247
  &[type='checkbox'] {
197
248
  background-color: var(--pkt-color-input-border-disabled);
198
- border-color: var(--pkt-color-input-border-disabled);
249
+ --pkt-color-input-check-border: var(
250
+ --pkt-color-input-border-disabled
251
+ );
199
252
  }
200
253
 
201
254
  &[type='radio'] {
@@ -213,7 +266,7 @@ $-module-name: 'pkt-input-check';
213
266
  //Modifiers checkbox and radio
214
267
  &--error {
215
268
  //Checkmark
216
- &[type='checkbox']:checked::after {
269
+ &[type='checkbox']:not([role='switch']):checked:after {
217
270
  filter: brightness(0) saturate(100%) invert(15%) sepia(11%)
218
271
  saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%);
219
272
  }
@@ -225,9 +278,9 @@ $-module-name: 'pkt-input-check';
225
278
  &[type='checkbox']:checked:focus-visible,
226
279
  &[type='checkbox']:checked:hover,
227
280
  &[type='checkbox']:active:not(:disabled),
228
- &:checked[type='checkbox']:checked::before {
281
+ &:checked[type='checkbox']:checked:before {
229
282
  background-color: var(--pkt-color-surface-default-faded-red);
230
- border-color: var(--pkt-color-input-border-error);
283
+ --pkt-color-input-check-border: var(--pkt-color-input-border-error);
231
284
  outline-color: var(--pkt-color-input-border-error);
232
285
  }
233
286
 
@@ -333,8 +386,30 @@ $-module-name: 'pkt-input-check';
333
386
  }
334
387
 
335
388
  [data-mode='dark'] .#{$-module-name} {
336
- &__input-checkbox[type='checkbox']::after {
389
+ &__input-checkbox[type='checkbox']:not([role='switch']):after {
337
390
  filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%)
338
391
  hue-rotate(212deg) brightness(96%) contrast(94%);
339
392
  }
393
+ &__input-checkbox[type='checkbox'][role='switch'] {
394
+ &:checked {
395
+ &:not(:disabled) {
396
+ background-color: var(--pkt-color-input-border-hover);
397
+ border-color: var(--pkt-color-input-border-hover);
398
+ }
399
+ &:after {
400
+ background-color: var(--pkt-color-brand-neutrals-white);
401
+ }
402
+ }
403
+ &:disabled:not(:checked) {
404
+ background-color: transparent;
405
+ }
406
+ }
407
+ &__input-checkbox--error[type='checkbox'][role='switch']:is(input) {
408
+ &,
409
+ &:checked:checked {
410
+ // Double `:checked` is to add a level of specificity to the selector
411
+ background-color: var(--pkt-color-surface-default-faded-red);
412
+ border-color: var(--pkt-color-input-border-error);
413
+ }
414
+ }
340
415
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-css",
3
- "version": "11.2.2",
3
+ "version": "11.4.0",
4
4
  "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
5
5
  "homepage": "https://punkt.oslo.kommune.no",
6
6
  "author": "Team Designsystem, Oslo Origo",
@@ -55,5 +55,5 @@
55
55
  "url": "https://github.com/oslokommune/punkt/issues"
56
56
  },
57
57
  "license": "MIT",
58
- "gitHead": "774e405fe043821677feddd5ad6bdeeefd2d6cdb"
58
+ "gitHead": "1e04495e9ba9208f350a7550e97cc2dc2b2de0f5"
59
59
  }