@oslokommune/punkt-css 1.0.0 → 2.0.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.
- package/CHANGELOG.md +25 -1
- package/README.md +0 -1
- package/dist/css/pkt-elements.css +58 -75
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +58 -75
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/elements/_button.scss +62 -123
- package/package.json +3 -3
|
@@ -4,40 +4,38 @@
|
|
|
4
4
|
* Skin: primary, secondary, tertiary, flat, primary-confirm
|
|
5
5
|
* State: normal, focus, hover, active, disabled
|
|
6
6
|
* Variant: label-only, icon-left, icon-right, icon-only
|
|
7
|
-
*
|
|
7
|
+
* Background: light, dark
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
@use 'sass:map';
|
|
11
11
|
@use 'sass:selector';
|
|
12
12
|
@use '../abstracts/variables';
|
|
13
13
|
@use '../abstracts/placeholders';
|
|
14
|
+
@use '../abstracts/mixins/typography';
|
|
14
15
|
|
|
15
16
|
$-module-name: 'pkt-btn';
|
|
16
17
|
$-sizes: (
|
|
17
|
-
'medium': (
|
|
18
|
-
'font-size': 'size-18',
|
|
19
|
-
'line-height': 1.5em,
|
|
20
|
-
'padding': 0.625rem 0.9375rem,
|
|
21
|
-
'icon-m-icon-left': 0.09375rem 0.3125rem 0 0,
|
|
22
|
-
'icon-m-icon-right': 0.09375rem 0 0 0.3125rem,
|
|
23
|
-
'icon-m-icon-only': 0.09375rem -0.21875rem,
|
|
24
|
-
'icon-size': 1.5rem,
|
|
25
|
-
),
|
|
26
18
|
'small': (
|
|
27
|
-
'
|
|
28
|
-
'
|
|
29
|
-
'
|
|
30
|
-
'icon-m-icon-
|
|
31
|
-
'icon-m-icon-right': 0 0 0 0.3125rem,
|
|
19
|
+
'text-class': 'pkt-txt-14-medium',
|
|
20
|
+
'padding': 0.5rem 1rem,
|
|
21
|
+
'icon-m-icon-left': 0 0.5rem 0 0,
|
|
22
|
+
'icon-m-icon-right': 0 0 0 0.5rem,
|
|
32
23
|
'icon-m-icon-only': 0 -0.3125rem,
|
|
24
|
+
'icon-size': 1.25rem,
|
|
25
|
+
),
|
|
26
|
+
'medium': (
|
|
27
|
+
'text-class': 'pkt-txt-18-medium',
|
|
28
|
+
'padding': 0.5rem 1rem,
|
|
29
|
+
'icon-m-icon-left': 0.09375rem 0.5rem 0 0,
|
|
30
|
+
'icon-m-icon-right': 0.09375rem 0 0 0.5rem,
|
|
31
|
+
'icon-m-icon-only': 0.09375rem -0.21875rem,
|
|
33
32
|
'icon-size': 1.5rem,
|
|
34
33
|
),
|
|
35
34
|
'large': (
|
|
36
|
-
'
|
|
37
|
-
'
|
|
38
|
-
'
|
|
39
|
-
'icon-m-icon-
|
|
40
|
-
'icon-m-icon-right': 0.0625rem 0 0 0.625rem,
|
|
35
|
+
'text-class': 'pkt-txt-24-medium',
|
|
36
|
+
'padding': 0.75rem 1rem,
|
|
37
|
+
'icon-m-icon-left': 0.0625rem 0.5rem 0 0,
|
|
38
|
+
'icon-m-icon-right': 0.0625rem 0 0 0.5rem,
|
|
41
39
|
'icon-m-icon-only': 0.0625rem -0.25rem,
|
|
42
40
|
'icon-size': 2rem,
|
|
43
41
|
),
|
|
@@ -51,6 +49,7 @@ $-skins: (
|
|
|
51
49
|
'focus-bg': --color-active,
|
|
52
50
|
'focus-bc': --color-active,
|
|
53
51
|
'focus-txt': --color-white,
|
|
52
|
+
'focus-outline': --color-active,
|
|
54
53
|
'hover-bg': --color-active,
|
|
55
54
|
'hover-bc': --color-active,
|
|
56
55
|
'hover-txt': --color-white,
|
|
@@ -59,7 +58,7 @@ $-skins: (
|
|
|
59
58
|
'active-txt': --color-white,
|
|
60
59
|
'disabled-bg': --color-gray,
|
|
61
60
|
'disabled-bc': --color-gray,
|
|
62
|
-
'disabled-txt': --color-
|
|
61
|
+
'disabled-txt': --color-disabled,
|
|
63
62
|
),
|
|
64
63
|
'dark': (
|
|
65
64
|
'link-bg': --color-blue-light,
|
|
@@ -68,6 +67,7 @@ $-skins: (
|
|
|
68
67
|
'focus-bg': --color-blue,
|
|
69
68
|
'focus-bc': --color-blue,
|
|
70
69
|
'focus-txt': --color-blue-dark,
|
|
70
|
+
'focus-outline': --color-active-light,
|
|
71
71
|
'hover-bg': --color-blue,
|
|
72
72
|
'hover-bc': --color-blue,
|
|
73
73
|
'hover-txt': --color-blue-dark,
|
|
@@ -76,7 +76,7 @@ $-skins: (
|
|
|
76
76
|
'active-txt': --color-blue-dark,
|
|
77
77
|
'disabled-bg': --color-gray,
|
|
78
78
|
'disabled-bc': --color-gray,
|
|
79
|
-
'disabled-txt': --color-
|
|
79
|
+
'disabled-txt': --color-disabled,
|
|
80
80
|
),
|
|
81
81
|
),
|
|
82
82
|
'secondary': (
|
|
@@ -87,71 +87,37 @@ $-skins: (
|
|
|
87
87
|
'focus-bg': --color-transparent,
|
|
88
88
|
'focus-bc': --color-active,
|
|
89
89
|
'focus-txt': --color-active,
|
|
90
|
-
'
|
|
90
|
+
'focus-outline': --color-active,
|
|
91
|
+
'hover-bg': --color-active,
|
|
91
92
|
'hover-bc': --color-active,
|
|
92
|
-
'hover-txt': --color-
|
|
93
|
+
'hover-txt': --color-white,
|
|
93
94
|
'active-bg': --color-active,
|
|
94
95
|
'active-bc': --color-active,
|
|
95
96
|
'active-txt': --color-white,
|
|
96
97
|
'disabled-bg': --color-gray,
|
|
97
98
|
'disabled-bc': --color-gray,
|
|
98
|
-
'disabled-txt': --color-
|
|
99
|
+
'disabled-txt': --color-disabled,
|
|
99
100
|
),
|
|
100
101
|
'dark': (
|
|
101
102
|
'link-bg': --color-transparent,
|
|
102
103
|
'link-bc': --color-white,
|
|
103
104
|
'link-txt': --color-white,
|
|
104
|
-
'focus-bg': --color-blue,
|
|
105
|
-
'focus-bc': --color-blue,
|
|
106
|
-
'focus-txt': --color-blue-dark,
|
|
107
|
-
'hover-bg': --color-transparent,
|
|
108
|
-
'hover-bc': --color-blue,
|
|
109
|
-
'hover-txt': --color-blue,
|
|
110
|
-
'active-bg': --color-blue,
|
|
111
|
-
'active-bc': --color-blue,
|
|
112
|
-
'active-txt': --color-blue-dark,
|
|
113
|
-
'disabled-bg': --color-gray,
|
|
114
|
-
'disabled-bc': --color-gray,
|
|
115
|
-
'disabled-txt': --color-grayscale-30,
|
|
116
|
-
),
|
|
117
|
-
),
|
|
118
|
-
'tertiary': (
|
|
119
|
-
'light': (
|
|
120
|
-
'link-bg': --color-transparent,
|
|
121
|
-
'link-bc': --color-yellow,
|
|
122
|
-
'link-txt': --color-blue-dark,
|
|
123
|
-
'focus-bg': --color-transparent,
|
|
124
|
-
'focus-bc': --color-active,
|
|
125
|
-
'focus-txt': --color-active,
|
|
126
|
-
'hover-bg': --color-transparent,
|
|
127
|
-
'hover-bc': --color-active,
|
|
128
|
-
'hover-txt': --color-active,
|
|
129
|
-
'active-bg': --color-active,
|
|
130
|
-
'active-bc': --color-active,
|
|
131
|
-
'active-txt': --color-white,
|
|
132
|
-
'disabled-bg': --color-gray,
|
|
133
|
-
'disabled-bc': --color-gray,
|
|
134
|
-
'disabled-txt': --color-grayscale-30,
|
|
135
|
-
),
|
|
136
|
-
'dark': (
|
|
137
|
-
'link-bg': --color-transparent,
|
|
138
|
-
'link-bc': --color-yellow,
|
|
139
|
-
'link-txt': --color-white,
|
|
140
105
|
'focus-bg': --color-transparent,
|
|
141
|
-
'focus-bc': --color-
|
|
142
|
-
'focus-txt': --color-
|
|
143
|
-
'
|
|
144
|
-
'hover-
|
|
145
|
-
'hover-
|
|
146
|
-
'
|
|
147
|
-
'active-
|
|
106
|
+
'focus-bc': --color-active-light,
|
|
107
|
+
'focus-txt': --color-active-light,
|
|
108
|
+
'focus-outline': --color-active-light,
|
|
109
|
+
'hover-bg': --color-active-light,
|
|
110
|
+
'hover-bc': --color-active-light,
|
|
111
|
+
'hover-txt': --color-blue-dark,
|
|
112
|
+
'active-bg': --color-active-light,
|
|
113
|
+
'active-bc': --color-active-light,
|
|
148
114
|
'active-txt': --color-blue-dark,
|
|
149
115
|
'disabled-bg': --color-gray,
|
|
150
116
|
'disabled-bc': --color-gray,
|
|
151
|
-
'disabled-txt': --color-
|
|
117
|
+
'disabled-txt': --color-disabled,
|
|
152
118
|
),
|
|
153
119
|
),
|
|
154
|
-
'
|
|
120
|
+
'tertiary': (
|
|
155
121
|
'light': (
|
|
156
122
|
'link-bg': --color-transparent,
|
|
157
123
|
'link-bc': --color-transparent,
|
|
@@ -162,12 +128,12 @@ $-skins: (
|
|
|
162
128
|
'hover-bg': --color-gray,
|
|
163
129
|
'hover-bc': --color-gray,
|
|
164
130
|
'hover-txt': --color-active,
|
|
165
|
-
'active-bg': --color-
|
|
166
|
-
'active-bc': --color-
|
|
167
|
-
'active-txt': --color-
|
|
131
|
+
'active-bg': --color-active,
|
|
132
|
+
'active-bc': --color-active,
|
|
133
|
+
'active-txt': --color-white,
|
|
168
134
|
'disabled-bg': --color-transparent,
|
|
169
135
|
'disabled-bc': --color-transparent,
|
|
170
|
-
'disabled-txt': --color-
|
|
136
|
+
'disabled-txt': --color-disabled,
|
|
171
137
|
),
|
|
172
138
|
'dark': (
|
|
173
139
|
'link-bg': --color-transparent,
|
|
@@ -175,52 +141,17 @@ $-skins: (
|
|
|
175
141
|
'link-txt': --color-white,
|
|
176
142
|
'focus-bg': --color-blue-5,
|
|
177
143
|
'focus-bc': --color-blue-5,
|
|
178
|
-
'focus-txt': --color-blue,
|
|
144
|
+
'focus-txt': --color-blue-dark,
|
|
145
|
+
'focus-outline': --color-active-light,
|
|
179
146
|
'hover-bg': --color-blue-5,
|
|
180
147
|
'hover-bc': --color-blue-5,
|
|
181
|
-
'hover-txt': --color-blue,
|
|
182
|
-
'active-bg': --color-
|
|
148
|
+
'hover-txt': --color-blue-dark,
|
|
149
|
+
'active-bg': --color-blue-dark-10,
|
|
183
150
|
'active-bc': --color-transparent,
|
|
184
|
-
'active-txt': --color-blue,
|
|
151
|
+
'active-txt': --color-blue-dark,
|
|
185
152
|
'disabled-bg': --color-transparent,
|
|
186
153
|
'disabled-bc': --color-transparent,
|
|
187
|
-
'disabled-txt': --color-
|
|
188
|
-
),
|
|
189
|
-
),
|
|
190
|
-
'primary-confirm': (
|
|
191
|
-
'light': (
|
|
192
|
-
'link-bg': --color-green,
|
|
193
|
-
'link-bc': --color-green,
|
|
194
|
-
'link-txt': --color-blue-dark,
|
|
195
|
-
'focus-bg': --color-active,
|
|
196
|
-
'focus-bc': --color-active,
|
|
197
|
-
'focus-txt': --color-white,
|
|
198
|
-
'hover-bg': --color-active,
|
|
199
|
-
'hover-bc': --color-active,
|
|
200
|
-
'hover-txt': --color-white,
|
|
201
|
-
'active-bg': --color-active,
|
|
202
|
-
'active-bc': --color-active,
|
|
203
|
-
'active-txt': --color-white,
|
|
204
|
-
'disabled-bg': --color-gray,
|
|
205
|
-
'disabled-bc': --color-gray,
|
|
206
|
-
'disabled-txt': --color-grayscale-30,
|
|
207
|
-
),
|
|
208
|
-
'dark': (
|
|
209
|
-
'link-bg': --color-green,
|
|
210
|
-
'link-bc': --color-green,
|
|
211
|
-
'link-txt': --color-blue-dark,
|
|
212
|
-
'focus-bg': --color-blue,
|
|
213
|
-
'focus-bc': --color-blue,
|
|
214
|
-
'focus-txt': --color-blue-dark,
|
|
215
|
-
'hover-bg': --color-blue,
|
|
216
|
-
'hover-bc': --color-blue,
|
|
217
|
-
'hover-txt': --color-blue-dark,
|
|
218
|
-
'active-bg': --color-blue,
|
|
219
|
-
'active-bc': --color-blue,
|
|
220
|
-
'active-txt': --color-blue-dark,
|
|
221
|
-
'disabled-bg': --color-gray,
|
|
222
|
-
'disabled-bc': --color-gray,
|
|
223
|
-
'disabled-txt': --color-grayscale-30,
|
|
154
|
+
'disabled-txt': --color-disabled,
|
|
224
155
|
),
|
|
225
156
|
),
|
|
226
157
|
);
|
|
@@ -237,8 +168,7 @@ $-skins: (
|
|
|
237
168
|
|
|
238
169
|
@mixin -size($name, $o) {
|
|
239
170
|
@if $name == medium {
|
|
240
|
-
|
|
241
|
-
line-height: map.get($o, 'line-height');
|
|
171
|
+
@include typography.get-text(map.get($o, 'text-class'));
|
|
242
172
|
padding: map.get($o, 'padding');
|
|
243
173
|
|
|
244
174
|
&__icon {
|
|
@@ -269,6 +199,15 @@ $-skins: (
|
|
|
269
199
|
margin: map.get($o, 'icon-m-icon-right');
|
|
270
200
|
}
|
|
271
201
|
}
|
|
202
|
+
&--icons-right-and-left {
|
|
203
|
+
flex-direction: row;
|
|
204
|
+
.#{$-module-name}__icon:first-of-type {
|
|
205
|
+
margin: map.get($o, 'icon-m-icon-left');
|
|
206
|
+
}
|
|
207
|
+
.#{$-module-name}__icon:last-of-type {
|
|
208
|
+
margin: map.get($o, 'icon-m-icon-right');
|
|
209
|
+
}
|
|
210
|
+
}
|
|
272
211
|
&--icon-only {
|
|
273
212
|
.#{$-module-name}__text {
|
|
274
213
|
@extend %sr-only;
|
|
@@ -279,8 +218,7 @@ $-skins: (
|
|
|
279
218
|
}
|
|
280
219
|
} @else {
|
|
281
220
|
&--#{$name} {
|
|
282
|
-
|
|
283
|
-
line-height: map.get($o, 'line-height');
|
|
221
|
+
@include typography.get-text(map.get($o, 'text-class'));
|
|
284
222
|
padding: map.get($o, 'padding');
|
|
285
223
|
}
|
|
286
224
|
&--#{$name} &__icon {
|
|
@@ -334,7 +272,7 @@ $-skins: (
|
|
|
334
272
|
display: inline-flex;
|
|
335
273
|
font-family: inherit;
|
|
336
274
|
font-weight: normal;
|
|
337
|
-
margin:
|
|
275
|
+
margin: 6px;
|
|
338
276
|
overflow: hidden;
|
|
339
277
|
position: relative;
|
|
340
278
|
-moz-user-select: none;
|
|
@@ -369,10 +307,11 @@ $-skins: (
|
|
|
369
307
|
&:enabled:focus,
|
|
370
308
|
&.#{$-module-name}--focus {
|
|
371
309
|
background-color: var(--btn-focus-bg);
|
|
372
|
-
border-color: var(--btn-focus-bc);
|
|
373
310
|
color: var(--btn-focus-txt);
|
|
374
|
-
|
|
375
|
-
|
|
311
|
+
border-color: var(--btn-focus-bc);
|
|
312
|
+
outline: 2px solid var(--btn-focus-outline);
|
|
313
|
+
outline-offset: 4px;
|
|
314
|
+
text-decoration: none;
|
|
376
315
|
}
|
|
377
316
|
@at-root a.#{$-module-name}:hover,
|
|
378
317
|
&:enabled:hover,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-css",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.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",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"watch": "chokidar \"src/scss/**/*\" -c \"npm run build\""
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
|
-
"@oslokommune/punkt-assets": "^
|
|
24
|
+
"@oslokommune/punkt-assets": "^2.0.0",
|
|
25
25
|
"astro": "^2.0.2",
|
|
26
26
|
"chokidar-cli": "^3.0.0",
|
|
27
27
|
"edit-json-file": "^1.7.0",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
58
58
|
},
|
|
59
59
|
"license": "MIT",
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "3506407f2b0d9e777e2e7d9322faefeca0ae8201"
|
|
61
61
|
}
|