@oslokommune/punkt-css 11.19.3 → 12.1.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 +20 -0
- package/dist/css/components/tag.css +14 -11
- package/dist/css/components/tag.min.css +1 -1
- package/dist/css/components/textinput.css +1 -1
- package/dist/css/components/textinput.min.css +1 -1
- package/dist/css/pkt-base.css +1 -1
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +15 -12
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-elements.css +44 -44
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +59 -56
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/abstracts/variables/_index.scss +1 -1
- package/dist/scss/base/_colors.scss +5 -5
- package/dist/scss/base/_visibility.scss +1 -1
- package/dist/scss/components/_tag.scss +10 -8
- package/dist/scss/elements/_button.scss +5 -5
- package/package.json +10 -11
|
@@ -23,6 +23,11 @@
|
|
|
23
23
|
--pkt-color-#{$name}: #{$color};
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
// Deprecated colors
|
|
27
|
+
@each $name, $color in variables.$colors {
|
|
28
|
+
--#{$name}: #{$color};
|
|
29
|
+
}
|
|
30
|
+
|
|
26
31
|
// Lager css-klasser basert på pkt-fargevariabler
|
|
27
32
|
@each $name, $color in variables.$pkt-colors {
|
|
28
33
|
.pkt-color-bg-#{$name} {
|
|
@@ -53,11 +58,6 @@
|
|
|
53
58
|
}
|
|
54
59
|
}
|
|
55
60
|
|
|
56
|
-
// Deprecated colors
|
|
57
|
-
@each $name, $color in variables.$colors {
|
|
58
|
-
--#{$name}: #{$color};
|
|
59
|
-
}
|
|
60
|
-
|
|
61
61
|
// Lager css-klasser basert på gamle fargevariabler - deprecated
|
|
62
62
|
@each $name, $color in variables.$colors {
|
|
63
63
|
.bg-#{$name} {
|
|
@@ -7,20 +7,20 @@
|
|
|
7
7
|
@use '../abstracts/mixins/typography';
|
|
8
8
|
|
|
9
9
|
.pkt-tag {
|
|
10
|
-
|
|
11
10
|
--pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);
|
|
12
11
|
--pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);
|
|
13
12
|
--pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);
|
|
14
13
|
--pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
|
|
14
|
+
}
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
16
|
+
[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
22
|
|
|
23
|
-
|
|
23
|
+
.pkt-tag {
|
|
24
24
|
background: var(--pkt-color-surface-default-light-blue);
|
|
25
25
|
padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-8');
|
|
26
26
|
display: inline-flex;
|
|
@@ -29,6 +29,8 @@
|
|
|
29
29
|
column-gap: 0;
|
|
30
30
|
color: var(--pkt-color-tag-text-normal);
|
|
31
31
|
|
|
32
|
+
@include typography.get-text('pkt-txt-14-medium');
|
|
33
|
+
|
|
32
34
|
&.pkt-btn:hover,
|
|
33
35
|
&.pkt-tag--hover {
|
|
34
36
|
background-color: var(--pkt-color-surface-strong-blue);
|
|
@@ -352,6 +352,11 @@ $-skins: (
|
|
|
352
352
|
align-items: center;
|
|
353
353
|
column-gap: 0.5rem;
|
|
354
354
|
|
|
355
|
+
// button sizes & variants
|
|
356
|
+
@each $key, $value in $-sizes {
|
|
357
|
+
@include -size($key, $value);
|
|
358
|
+
}
|
|
359
|
+
|
|
355
360
|
&[class*='pkt-btn--icon'] > .pkt-btn__icon {
|
|
356
361
|
display: flex;
|
|
357
362
|
}
|
|
@@ -405,11 +410,6 @@ $-skins: (
|
|
|
405
410
|
cursor: inherit;
|
|
406
411
|
}
|
|
407
412
|
|
|
408
|
-
// button sizes & variants
|
|
409
|
-
@each $key, $value in $-sizes {
|
|
410
|
-
@include -size($key, $value);
|
|
411
|
-
}
|
|
412
|
-
|
|
413
413
|
// Til slutt: dette er okay å gjøre siden vi spesifiserer en synlig focus state
|
|
414
414
|
&::-moz-focus-inner {
|
|
415
415
|
border: 0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-css",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "12.1.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",
|
|
@@ -20,20 +20,19 @@
|
|
|
20
20
|
"preview": "astro preview"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@oslokommune/punkt-assets": "^
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"svgson": "^5.3.0"
|
|
23
|
+
"@oslokommune/punkt-assets": "^12.1.0",
|
|
24
|
+
"edit-json-file": "^1.8.0",
|
|
25
|
+
"fs-extra": "^11.2.0",
|
|
26
|
+
"prettier": "^3.3.3",
|
|
27
|
+
"sass": "^1.78.0",
|
|
28
|
+
"svgo": "^3.3.2",
|
|
29
|
+
"svgson": "^5.3.1"
|
|
31
30
|
},
|
|
32
31
|
"peerDependencies": {
|
|
33
32
|
"@oslokommune/punkt-assets": ">=3.1.0"
|
|
34
33
|
},
|
|
35
34
|
"engines": {
|
|
36
|
-
"node": ">=
|
|
35
|
+
"node": ">=18.19.0"
|
|
37
36
|
},
|
|
38
37
|
"private": false,
|
|
39
38
|
"publishConfig": {
|
|
@@ -55,5 +54,5 @@
|
|
|
55
54
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
56
55
|
},
|
|
57
56
|
"license": "MIT",
|
|
58
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "540906f27796c832d177f5f2bedd1bbe4bced7c4"
|
|
59
58
|
}
|