@oslokommune/punkt-css 13.16.0 → 13.18.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 (25) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/css/components/textinput.css +1 -39
  3. package/dist/css/components/textinput.min.css +1 -1
  4. package/dist/css/elements/checkbox-radio.css +34 -35
  5. package/dist/css/elements/checkbox-radio.min.css +1 -1
  6. package/dist/css/elements/input.css +1 -39
  7. package/dist/css/elements/input.min.css +1 -1
  8. package/dist/css/elements/select.css +1 -41
  9. package/dist/css/elements/select.min.css +1 -1
  10. package/dist/css/pkt-base.css +177 -1
  11. package/dist/css/pkt-base.min.css +1 -1
  12. package/dist/css/pkt-components.css +1 -39
  13. package/dist/css/pkt-components.min.css +1 -1
  14. package/dist/css/pkt-docs.css +212 -77
  15. package/dist/css/pkt-docs.min.css +1 -1
  16. package/dist/css/pkt-elements.css +35 -76
  17. package/dist/css/pkt-elements.min.css +1 -1
  18. package/dist/css/pkt.css +212 -77
  19. package/dist/css/pkt.min.css +1 -1
  20. package/dist/scss/abstracts/variables/_colors.scss +21 -1
  21. package/dist/scss/abstracts/variables/_index.scss +1 -1
  22. package/dist/scss/base/_colors.scss +20 -0
  23. package/dist/scss/elements/_checkbox-radio.scss +38 -40
  24. package/dist/scss/elements/_input.scss +0 -39
  25. package/package.json +2 -2
package/dist/scss/abstracts/variables/_colors.scss CHANGED
@@ -104,7 +104,27 @@ $pkt-semantic-colors: (
104
104
  text-action-disabled: map.get($pkt-colors, grays-gray-600),
105
105
  text-action-active: map.get($pkt-colors, brand-warm-blue-1000),
106
106
  text-action-hover: map.get($pkt-colors, brand-warm-blue-1000),
107
- text-action-normal: map.get($pkt-colors, brand-dark-blue-1000)
107
+ text-action-normal: map.get($pkt-colors, brand-dark-blue-1000),
108
+
109
+ // Input (shared)
110
+ input-background-normal: map.get($pkt-colors, brand-neutrals-white),
111
+ input-border-active: map.get($pkt-colors, brand-warm-blue-1000),
112
+ input-border-disabled: map.get($pkt-colors, grays-gray-300),
113
+ input-border-error: map.get($pkt-colors, brand-red-1000),
114
+ input-border-hover: map.get($pkt-colors, brand-warm-blue-1000),
115
+ input-border-normal: map.get($pkt-colors, brand-dark-blue-1000),
116
+ input-text-active: map.get($pkt-colors, brand-warm-blue-1000),
117
+ input-text-disabled: map.get($pkt-colors, grays-gray-500),
118
+ input-text-hover: map.get($pkt-colors, brand-warm-blue-1000),
119
+ input-text-normal: map.get($pkt-colors, brand-dark-blue-1000),
120
+ input-text-error: map.get($pkt-colors, brand-red-1000),
121
+ input-text-open: map.get($pkt-colors, brand-neutrals-white),
122
+
123
+ // Input - Checkbox/Radio specific
124
+ input-check-background: map.get($pkt-colors, brand-neutrals-white),
125
+ input-check-border: map.get($pkt-colors, brand-dark-blue-1000),
126
+ input-check-text-active: map.get($pkt-colors, brand-warm-blue-1000),
127
+ input-check-text-hover: map.get($pkt-colors, brand-warm-blue-1000),
108
128
  ) !default;
109
129
 
110
130
  // Deprecated colors
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/13.16/icons' !default;
9
+ $icon-path: 'https://punkt-cdn.oslo.kommune.no/13.18/icons' !default;
10
10
 
11
11
  // Borders
12
12
  $border-width: (
package/dist/scss/base/_colors.scss CHANGED
@@ -122,5 +122,25 @@
122
122
  --pkt-color-text-action-active: var(--pkt-color-brand-blue-500);
123
123
  --pkt-color-text-action-hover: var(--pkt-color-brand-blue-500);
124
124
  --pkt-color-text-action-normal: var(--pkt-color-brand-neutrals-white);
125
+
126
+ // Input (shared)
127
+ --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
128
+ --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
129
+ --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
130
+ --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
131
+ --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
132
+ --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
133
+ --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
134
+ --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
135
+ --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
136
+ --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
137
+ --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
138
+ --pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
139
+
140
+ // Input - Checkbox/Radio specific
141
+ --pkt-color-input-check-background: var(--pkt-color-brand-dark-blue-1000);
142
+ --pkt-color-input-check-border: var(--pkt-color-brand-neutrals-white);
143
+ --pkt-color-input-check-text-active: var(--pkt-color-brand-blue-500);
144
+ --pkt-color-input-check-text-hover: var(--pkt-color-brand-blue-500);
125
145
  }
126
146
  }
package/dist/scss/elements/_checkbox-radio.scss CHANGED
@@ -11,40 +11,6 @@
11
11
 
12
12
  $-module-name: 'pkt-input-check';
13
13
 
14
- // Color tokens
15
- .#{$-module-name} {
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);
23
- --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
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);
30
- --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
31
-
32
- [data-mode='dark'] & {
33
- --pkt-color-input-background-normal: var(--pkt-color-brand-dark-blue-1000);
34
- --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
35
- --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
36
- --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
37
- --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
38
- --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
39
- --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
40
- --pkt-color-input-text-active: var(--pkt-color-brand-blue-500);
41
- --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
42
- --pkt-color-input-text-hover: var(--pkt-color-brand-blue-500);
43
- --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
44
- }
45
- }
46
- }
47
-
48
14
  .#{$-module-name} {
49
15
  display: flex;
50
16
  flex-direction: column;
@@ -73,12 +39,12 @@ $-module-name: 'pkt-input-check';
73
39
 
74
40
  // Input states
75
41
  &:hover > .pkt-input-check__input-checkbox:not(:disabled) + .pkt-input-check__input-label {
76
- color: var(--pkt-color-input-text-hover);
42
+ color: var(--pkt-color-input-check-text-hover);
77
43
  }
78
44
 
79
45
  &-checkbox {
80
46
  appearance: none;
81
- background-color: var(--pkt-color-input-background-normal);
47
+ background-color: var(--pkt-color-input-check-background);
82
48
  border: 2px solid var(--pkt-color-input-check-border);
83
49
  width: 1.5rem;
84
50
  height: 1.5rem;
@@ -98,7 +64,7 @@ $-module-name: 'pkt-input-check';
98
64
  display: block;
99
65
  content: '';
100
66
  border: 2px solid var(--pkt-color-input-check-border);
101
- background-color: var(--pkt-color-input-background-normal);
67
+ background-color: var(--pkt-color-input-check-background);
102
68
  position: absolute;
103
69
  top: -1px;
104
70
  bottom: -1px;
@@ -119,7 +85,7 @@ $-module-name: 'pkt-input-check';
119
85
 
120
86
  // Checkbox states
121
87
  &:focus-visible:not(:disabled) + .pkt-input-check__input-label {
122
- color: var(--pkt-color-input-text-hover);
88
+ color: var(--pkt-color-input-check-text-hover);
123
89
  }
124
90
 
125
91
  &[type='checkbox']:hover {
@@ -143,6 +109,38 @@ $-module-name: 'pkt-input-check';
143
109
  outline-color: var(--pkt-color-input-border-hover);
144
110
  }
145
111
 
112
+ &:indeterminate {
113
+ &[type='checkbox']:not([role='switch']) {
114
+ --svg: url(#{variables.$icon-path}/minus-sign.svg);
115
+ position: relative;
116
+ background-color: var(--pkt-color-input-border-normal);
117
+
118
+ &:before {
119
+ content: '';
120
+ position: absolute;
121
+ top: 0;
122
+ left: 0;
123
+ width: 100%;
124
+ height: 100%;
125
+ z-index: -1;
126
+ }
127
+
128
+ &:after {
129
+ content: '';
130
+ position: absolute;
131
+ top: 50%;
132
+ left: 50%;
133
+ transform: translate(-50%, -50%);
134
+ width: 24px;
135
+ height: 24px;
136
+ background-image: var(--svg);
137
+ background-repeat: no-repeat;
138
+ filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%)
139
+ contrast(101%);
140
+ }
141
+ }
142
+ }
143
+
146
144
  &:checked {
147
145
  // Checkbox and switch
148
146
  &[type='checkbox'] {
@@ -191,7 +189,7 @@ $-module-name: 'pkt-input-check';
191
189
  // Radio
192
190
  &[type='radio'] {
193
191
  background-color: var(--pkt-color-input-border-normal);
194
- border: 3px solid var(--pkt-color-input-background-normal);
192
+ border: 3px solid var(--pkt-color-input-check-background);
195
193
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
196
194
  }
197
195
 
@@ -206,7 +204,7 @@ $-module-name: 'pkt-input-check';
206
204
 
207
205
  &[type='radio']:focus-visible {
208
206
  background-color: var(--pkt-color-input-border-active);
209
- border: 3px solid var(--pkt-color-input-background-normal);
207
+ border: 3px solid var(--pkt-color-input-check-background);
210
208
  outline: none;
211
209
  box-shadow:
212
210
  0px 0px 0px 0.125rem var(--pkt-color-input-border-active),
package/dist/scss/elements/_input.scss CHANGED
@@ -10,45 +10,6 @@ pkt-select {
10
10
  display: block;
11
11
  }
12
12
 
13
- // Color tokens
14
- .pkt-input,
15
- .pkt-input-prefix,
16
- .pkt-input-suffix,
17
- .pkt-input-icon,
18
- .pkt-input__container {
19
- --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
20
- --pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
21
- --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
22
- --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
23
- --pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
24
- --pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
25
- --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
26
- --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
27
- --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
28
- --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
29
- --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
30
- --pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white);
31
- }
32
-
33
- @at-root [data-mode='dark'] .pkt-input,
34
- [data-mode='dark'] .pkt-input-prefix,
35
- [data-mode='dark'] .pkt-input-suffix,
36
- [data-mode='dark'] .pkt-input-icon,
37
- [data-mode='dark'] .pkt-input__container {
38
- --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
39
- --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
40
- --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
41
- --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
42
- --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
43
- --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
44
- --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
45
- --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
46
- --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
47
- --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
48
- --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
49
- --pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
50
- }
51
-
52
13
  .pkt-input {
53
14
  display: flex;
54
15
  align-items: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-css",
3
- "version": "13.16.0",
3
+ "version": "13.18.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": "fd4584ed1b629e67a752a6a5f6315b3bd80549f2"
58
+ "gitHead": "d1f7500eed274abde4ea0532a746a54d74a38877"
59
59
  }