@oslokommune/punkt-css 12.33.0 → 12.34.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 (22) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/css/components/accordion.css +84 -21
  3. package/dist/css/components/accordion.min.css +1 -1
  4. package/dist/css/components/textinput.css +1 -1
  5. package/dist/css/components/textinput.min.css +1 -1
  6. package/dist/css/elements/checkbox-radio.css +2 -2
  7. package/dist/css/elements/checkbox-radio.min.css +1 -1
  8. package/dist/css/elements/input.css +1 -1
  9. package/dist/css/elements/input.min.css +1 -1
  10. package/dist/css/elements/select.css +1 -1
  11. package/dist/css/elements/select.min.css +1 -1
  12. package/dist/css/pkt-base.css +1 -1
  13. package/dist/css/pkt-base.min.css +1 -1
  14. package/dist/css/pkt-components.css +85 -22
  15. package/dist/css/pkt-components.min.css +1 -1
  16. package/dist/css/pkt-elements.css +3 -3
  17. package/dist/css/pkt-elements.min.css +1 -1
  18. package/dist/css/pkt.css +88 -25
  19. package/dist/css/pkt.min.css +1 -1
  20. package/dist/scss/abstracts/variables/_index.scss +1 -1
  21. package/dist/scss/components/_accordion.scss +115 -53
  22. 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/12.33/icons' !default;
9
+ $icon-path: 'https://punkt-cdn.oslo.kommune.no/12.34/icons' !default;
10
10
 
11
11
  // Borders
12
12
  $border-width: (
package/dist/scss/components/_accordion.scss CHANGED
@@ -7,25 +7,52 @@
7
7
  @use '../abstracts/mixins/breakpoints' as *;
8
8
  @use '../abstracts/' as *;
9
9
 
10
- .pkt-accordion {
10
+ @mixin pkt-accordion-item-standard-title {
11
+ font-size: map.get(variables.$font-size, 'size-24');
12
+ font-weight: map.get(variables.$font-weight, 'medium');
13
+ letter-spacing: map.get(variables.$letter-spacing, 'tight');
14
+ line-height: map.get(variables.$line-height, 'lh-36');
15
+ }
16
+
17
+ @mixin pkt-accordion-item-standard-content {
18
+ font-size: map.get(variables.$font-size, 'size-18');
19
+ font-weight: map.get(variables.$font-weight, 'light');
20
+ letter-spacing: map.get(variables.$letter-spacing, 'tight');
21
+ line-height: map.get(variables.$line-height, 'lh-28');
22
+ padding: map.get(variables.$spacing, 'size-24');
23
+ }
24
+
25
+ @mixin pkt-accordion-item-compact-title {
26
+ font-size: map.get(variables.$font-size, 'size-16');
27
+ font-weight: map.get(variables.$font-weight, 'medium');
28
+ letter-spacing: map.get(variables.$letter-spacing, 'tight');
29
+ line-height: map.get(variables.$line-height, 'lh-24');
30
+ padding: map.get(variables.$spacing, 'size-16');
31
+ }
32
+
33
+ @mixin pkt-accordion-item-compact-content {
34
+ font-size: map.get(variables.$font-size, 'size-16');
35
+ font-weight: map.get(variables.$font-weight, 'light');
36
+ letter-spacing: map.get(variables.$letter-spacing, 'tight');
37
+ line-height: map.get(variables.$line-height, 'lh-24');
38
+ }
39
+
40
+ .pkt-accordion,
41
+ pkt-accordion::part(container) {
11
42
  display: grid;
12
43
  grid-template-columns: 1fr;
13
44
  grid-template-rows: 0fr;
14
45
  row-gap: map.get(variables.$spacing, 'size-8');
15
46
  transition: grid-template-rows 500ms;
16
47
 
17
- font-size: map.get(variables.$font-size, 'size-24');
18
- font-weight: map.get(variables.$font-weight, 'medium');
19
- letter-spacing: map.get(variables.$letter-spacing, 'tight');
20
- line-height: map.get(variables.$line-height, 'lh-36');
21
-
22
48
  &:focus-visible {
23
49
  border: 0.25rem solid var(--pkt-color-border-states-hover);
24
50
  }
25
51
  }
26
52
 
27
- // Skin variations
28
- .pkt-accordion--borderless {
53
+ // Skin variations for default accordion
54
+ .pkt-accordion--borderless,
55
+ pkt-accordion[skin='borderless'] {
29
56
  .pkt-accordion-item {
30
57
  border: none;
31
58
 
@@ -37,36 +64,43 @@
37
64
  }
38
65
  }
39
66
 
40
- .pkt-accordion--outlined {
67
+ .pkt-accordion--outlined,
68
+ pkt-accordion[skin='outlined'] {
41
69
  .pkt-accordion-item {
42
70
  border: 2px solid var(--pkt-color-border-subtle);
43
71
  }
44
72
  }
45
73
 
46
- .pkt-accordion--beige {
74
+ pkt-accordion[skin='beige']::part(container),
75
+ pkt-accordion[skin='blue']::part(container) {
47
76
  row-gap: 0;
77
+ }
48
78
 
49
- .pkt-accordion-item {
50
- &:nth-child(odd) {
51
- background-color: var(--pkt-color-surface-default-light-beige);
52
- }
79
+ .pkt-accordion--beige,
80
+ pkt-accordion[skin='beige'] {
81
+ row-gap: 0;
82
+ > .pkt-accordion-item:nth-of-type(odd),
83
+ > pkt-accordion-item:nth-of-type(odd) .pkt-accordion-item {
84
+ background-color: var(--pkt-color-surface-default-light-beige);
53
85
  }
54
86
  }
55
87
 
56
- .pkt-accordion--blue {
88
+ .pkt-accordion--blue,
89
+ pkt-accordion[skin='blue'] {
57
90
  row-gap: 0;
58
91
 
59
- .pkt-accordion-item {
60
- &:nth-child(odd) {
61
- background-color: var(--pkt-color-surface-default-light-blue);
62
- }
92
+ > .pkt-accordion-item:nth-of-type(odd),
93
+ > pkt-accordion-item:nth-of-type(odd) .pkt-accordion-item {
94
+ background-color: var(--pkt-color-surface-default-light-blue);
63
95
  }
64
96
  }
65
97
 
66
98
  // COMPACT
67
99
 
68
- .pkt-accordion--compact.pkt-accordion--borderless {
69
- .pkt-accordion-item {
100
+ .pkt-accordion--compact.pkt-accordion--borderless,
101
+ pkt-accordion[compact][skin='borderless'] {
102
+ .pkt-accordion-item,
103
+ .pkt-accordion-item--compact.pkt-accordion-item--borderless {
70
104
  border: none;
71
105
 
72
106
  &--open {
@@ -76,26 +110,20 @@
76
110
  }
77
111
  }
78
112
  }
79
- .pkt-accordion--compact > .pkt-accordion-item {
80
- .pkt-accordion-item {
81
- &__title {
82
- padding: map.get(variables.$spacing, 'size-16');
83
- font-size: map.get(variables.$font-size, 'size-16');
84
- font-weight: map.get(variables.$font-weight, 'medium');
85
- letter-spacing: map.get(variables.$letter-spacing, 'tight');
86
- line-height: map.get(variables.$line-height, 'lh-24');
87
- }
88
113
 
89
- &__content {
90
- padding: map.get(variables.$spacing, 'size-16');
91
- font-size: map.get(variables.$font-size, 'size-16');
92
- font-weight: map.get(variables.$font-weight, 'light');
93
- letter-spacing: map.get(variables.$letter-spacing, 'tight');
94
- line-height: map.get(variables.$line-height, 'lh-24');
114
+ // Set compact styles when using accordion component as wrapper and standalone accordion item
115
+ .pkt-accordion--compact,
116
+ pkt-accordion[compact] {
117
+ > .pkt-accordion-item,
118
+ > pkt-accordion-item > .pkt-accordion-item {
119
+ .pkt-accordion-item__title {
120
+ @include pkt-accordion-item-compact-title;
121
+ }
122
+ .pkt-accordion-item__content {
123
+ @include pkt-accordion-item-compact-content;
95
124
  }
96
125
  }
97
126
  }
98
-
99
127
  // Accordion item
100
128
  .pkt-accordion-item {
101
129
  color: var(--pkt-color-brand-dark-blue-1000);
@@ -109,6 +137,7 @@
109
137
  }
110
138
 
111
139
  &__title {
140
+ @include pkt-accordion-item-standard-title;
112
141
  align-items: center;
113
142
  cursor: pointer;
114
143
  display: flex;
@@ -133,33 +162,66 @@
133
162
  }
134
163
 
135
164
  &__content {
165
+ @include pkt-accordion-item-standard-content;
136
166
  border-top: none;
137
167
  display: none;
138
- font-size: map.get(variables.$font-size, 'size-18');
139
- font-weight: map.get(variables.$font-weight, 'light');
140
- letter-spacing: map.get(variables.$letter-spacing, 'tight');
141
- line-height: map.get(variables.$line-height, 'lh-28');
142
- padding: map.get(variables.$spacing, 'size-24');
143
168
  }
144
- }
145
169
 
146
- // Accordion item when opened
147
- .pkt-accordion-item[open] {
148
- .pkt-accordion-item__title {
149
- border-bottom: none;
150
- &:hover {
151
- .pkt-accordion-item__icon {
152
- transform: rotate(180deg) translateY(0.25rem);
170
+ // Skin variations for single accordion item (standalone)
171
+ &--borderless,
172
+ pkt-accordion-item[skin='borderless'] {
173
+ border: none;
174
+
175
+ &[open] {
176
+ .pkt-accordion-item__title {
177
+ box-shadow: inset 0 0 0 0.25rem var(--pkt-color-border-states-active);
153
178
  }
154
179
  }
155
180
  }
156
181
 
182
+ &--outlined,
183
+ pkt-accordion-item[skin='outlined'] {
184
+ border: 2px solid var(--pkt-color-border-subtle);
185
+ }
186
+
187
+ &--beige,
188
+ pkt-accordion-item[skin='beige'] {
189
+ background-color: var(--pkt-color-surface-default-light-beige);
190
+ }
191
+
192
+ &--blue,
193
+ pkt-accordion-item[skin='blue'] {
194
+ background-color: var(--pkt-color-surface-default-light-blue);
195
+ }
196
+ }
197
+
198
+ .pkt-accordion-item--compact {
199
+ .pkt-accordion-item__title {
200
+ @include pkt-accordion-item-compact-title;
201
+ }
157
202
  .pkt-accordion-item__content {
158
- display: block;
203
+ @include pkt-accordion-item-compact-content;
159
204
  }
205
+ }
206
+ // Accordion item when opened
207
+ .pkt-accordion-item[open] {
208
+ .pkt-accordion-item {
209
+ &__title {
210
+ border-bottom: none;
211
+ &:hover {
212
+ .pkt-accordion-item__icon {
213
+ transform: rotate(180deg) translateY(0.25rem);
214
+ }
215
+ }
216
+ }
160
217
 
161
- .pkt-accordion-item__icon {
162
- transform: rotate(180deg) translateY(0);
218
+ &__content {
219
+ display: block;
220
+ }
221
+
222
+ &__icon {
223
+ transform: rotate(180deg) translateY(0);
224
+ }
163
225
  }
164
226
  }
165
227
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-css",
3
- "version": "12.33.0",
3
+ "version": "12.34.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",
@@ -54,5 +54,5 @@
54
54
  "url": "https://github.com/oslokommune/punkt/issues"
55
55
  },
56
56
  "license": "MIT",
57
- "gitHead": "892989f59c2dd0af07cb234344ffdd828a652c7c"
57
+ "gitHead": "4ab2b5b6508cf1749c9b1a66d92c6d214f737b26"
58
58
  }