@oslokommune/punkt-css 1.0.1 → 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.
Files changed (7) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/css/pkt-elements.css +58 -75
  3. package/dist/css/pkt-elements.min.css +1 -1
  4. package/dist/css/pkt.css +58 -75
  5. package/dist/css/pkt.min.css +1 -1
  6. package/dist/scss/elements/_button.scss +62 -123
  7. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,19 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.0.0](https://github.com/oslokommune/punkt/compare/v1.0.2...v2.0.0) (2023-03-07)
7
+
8
+
9
+ ### ⚠ BREAKING CHANGES
10
+
11
+ * #595 Button (#696)
12
+
13
+ ### Features
14
+
15
+ * [#595](https://github.com/oslokommune/punkt/issues/595) Button ([#696](https://github.com/oslokommune/punkt/issues/696)) ([8870dd7](https://github.com/oslokommune/punkt/commit/8870dd732251160f06d59691064045b111c19ed7))
16
+
17
+
18
+
6
19
  ## [1.0.1](https://github.com/oslokommune/punkt/compare/v1.0.0...v1.0.1) (2023-02-27)
7
20
 
8
21
 
package/dist/css/pkt-elements.css CHANGED
@@ -23,7 +23,7 @@
23
23
  * Skin: primary, secondary, tertiary, flat, primary-confirm
24
24
  * State: normal, focus, hover, active, disabled
25
25
  * Variant: label-only, icon-left, icon-right, icon-only
26
- * Mode: light, dark
26
+ * Background: light, dark
27
27
  */
28
28
  .pkt-btn {
29
29
  --btn-link-bg: var(--color-blue-dark);
@@ -32,6 +32,7 @@
32
32
  --btn-focus-bg: var(--color-active);
33
33
  --btn-focus-bc: var(--color-active);
34
34
  --btn-focus-txt: var(--color-white);
35
+ --btn-focus-outline: var(--color-active);
35
36
  --btn-hover-bg: var(--color-active);
36
37
  --btn-hover-bc: var(--color-active);
37
38
  --btn-hover-txt: var(--color-white);
@@ -40,7 +41,7 @@
40
41
  --btn-active-txt: var(--color-white);
41
42
  --btn-disabled-bg: var(--color-gray);
42
43
  --btn-disabled-bc: var(--color-gray);
43
- --btn-disabled-txt: var(--color-grayscale-30);
44
+ --btn-disabled-txt: var(--color-disabled);
44
45
  }
45
46
 
46
47
  [data-mode=dark] .pkt-btn {
@@ -50,6 +51,7 @@
50
51
  --btn-focus-bg: var(--color-blue);
51
52
  --btn-focus-bc: var(--color-blue);
52
53
  --btn-focus-txt: var(--color-blue-dark);
54
+ --btn-focus-outline: var(--color-active-light);
53
55
  --btn-hover-bg: var(--color-blue);
54
56
  --btn-hover-bc: var(--color-blue);
55
57
  --btn-hover-txt: var(--color-blue-dark);
@@ -58,7 +60,7 @@
58
60
  --btn-active-txt: var(--color-blue-dark);
59
61
  --btn-disabled-bg: var(--color-gray);
60
62
  --btn-disabled-bc: var(--color-gray);
61
- --btn-disabled-txt: var(--color-grayscale-30);
63
+ --btn-disabled-txt: var(--color-disabled);
62
64
  }
63
65
 
64
66
  .pkt-btn--secondary {
@@ -66,39 +68,22 @@
66
68
  --btn-link-txt: var(--color-blue-dark);
67
69
  --btn-focus-bg: var(--color-transparent);
68
70
  --btn-focus-txt: var(--color-active);
69
- --btn-hover-bg: var(--color-transparent);
70
- --btn-hover-txt: var(--color-active);
71
71
  }
72
72
 
73
73
  [data-mode=dark] .pkt-btn--secondary {
74
74
  --btn-link-bg: var(--color-transparent);
75
75
  --btn-link-bc: var(--color-white);
76
76
  --btn-link-txt: var(--color-white);
77
- --btn-hover-bg: var(--color-transparent);
78
- --btn-hover-txt: var(--color-blue);
79
- }
80
-
81
- .pkt-btn--tertiary {
82
- --btn-link-bg: var(--color-transparent);
83
- --btn-link-bc: var(--color-yellow);
84
- --btn-link-txt: var(--color-blue-dark);
85
- --btn-focus-bg: var(--color-transparent);
86
- --btn-focus-txt: var(--color-active);
87
- --btn-hover-bg: var(--color-transparent);
88
- --btn-hover-txt: var(--color-active);
89
- }
90
-
91
- [data-mode=dark] .pkt-btn--tertiary {
92
- --btn-link-bg: var(--color-transparent);
93
- --btn-link-bc: var(--color-yellow);
94
- --btn-link-txt: var(--color-white);
95
77
  --btn-focus-bg: var(--color-transparent);
96
- --btn-focus-txt: var(--color-blue);
97
- --btn-hover-bg: var(--color-transparent);
98
- --btn-hover-txt: var(--color-blue);
78
+ --btn-focus-bc: var(--color-active-light);
79
+ --btn-focus-txt: var(--color-active-light);
80
+ --btn-hover-bg: var(--color-active-light);
81
+ --btn-hover-bc: var(--color-active-light);
82
+ --btn-active-bg: var(--color-active-light);
83
+ --btn-active-bc: var(--color-active-light);
99
84
  }
100
85
 
101
- .pkt-btn--flat {
86
+ .pkt-btn--tertiary {
102
87
  --btn-link-bg: var(--color-transparent);
103
88
  --btn-link-bc: var(--color-transparent);
104
89
  --btn-link-txt: var(--color-blue-dark);
@@ -108,40 +93,22 @@
108
93
  --btn-hover-bg: var(--color-gray);
109
94
  --btn-hover-bc: var(--color-gray);
110
95
  --btn-hover-txt: var(--color-active);
111
- --btn-active-bg: var(--color-transparent);
112
- --btn-active-bc: var(--color-transparent);
113
- --btn-active-txt: var(--color-active);
114
96
  --btn-disabled-bg: var(--color-transparent);
115
97
  --btn-disabled-bc: var(--color-transparent);
116
98
  }
117
99
 
118
- [data-mode=dark] .pkt-btn--flat {
100
+ [data-mode=dark] .pkt-btn--tertiary {
119
101
  --btn-link-bg: var(--color-transparent);
120
102
  --btn-link-bc: var(--color-transparent);
121
103
  --btn-link-txt: var(--color-white);
122
104
  --btn-focus-bg: var(--color-blue-5);
123
105
  --btn-focus-bc: var(--color-blue-5);
124
- --btn-focus-txt: var(--color-blue);
125
106
  --btn-hover-bg: var(--color-blue-5);
126
107
  --btn-hover-bc: var(--color-blue-5);
127
- --btn-hover-txt: var(--color-blue);
128
- --btn-active-bg: var(--color-transparent);
108
+ --btn-active-bg: var(--color-blue-dark-10);
129
109
  --btn-active-bc: var(--color-transparent);
130
- --btn-active-txt: var(--color-blue);
131
110
  --btn-disabled-bg: var(--color-transparent);
132
111
  --btn-disabled-bc: var(--color-transparent);
133
- --btn-disabled-txt: var(--color-white);
134
- }
135
-
136
- .pkt-btn--primary-confirm {
137
- --btn-link-bg: var(--color-green);
138
- --btn-link-bc: var(--color-green);
139
- --btn-link-txt: var(--color-blue-dark);
140
- }
141
-
142
- [data-mode=dark] .pkt-btn--primary-confirm {
143
- --btn-link-bg: var(--color-green);
144
- --btn-link-bc: var(--color-green);
145
112
  }
146
113
 
147
114
  .pkt-btn {
@@ -150,7 +117,7 @@
150
117
  display: inline-flex;
151
118
  font-family: inherit;
152
119
  font-weight: normal;
153
- margin: 0;
120
+ margin: 6px;
154
121
  overflow: hidden;
155
122
  position: relative;
156
123
  -moz-user-select: none;
@@ -166,8 +133,10 @@
166
133
  text-underline-offset: 0.3em;
167
134
  text-align: left;
168
135
  font-size: 1.125rem;
136
+ font-weight: 500;
137
+ letter-spacing: -0.2px;
169
138
  line-height: 1.5em;
170
- padding: 0.625rem 0.9375rem;
139
+ padding: 0.5rem 1rem;
171
140
  }
172
141
  .pkt-btn[class*=pkt-btn--icon] > .pkt-btn__icon {
173
142
  display: block;
@@ -182,10 +151,11 @@
182
151
  }
183
152
  a.pkt-btn:focus, .pkt-btn:enabled:focus, .pkt-btn.pkt-btn--focus {
184
153
  background-color: var(--btn-focus-bg);
185
- border-color: var(--btn-focus-bc);
186
154
  color: var(--btn-focus-txt);
187
- outline: 0;
188
- text-decoration: underline;
155
+ border-color: var(--btn-focus-bc);
156
+ outline: 2px solid var(--btn-focus-outline);
157
+ outline-offset: 4px;
158
+ text-decoration: none;
189
159
  }
190
160
 
191
161
  a.pkt-btn:hover, .pkt-btn:enabled:hover, .pkt-btn.pkt-btn--hover {
@@ -210,6 +180,26 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
210
180
  color: var(--btn-disabled-txt);
211
181
  cursor: inherit;
212
182
  }
183
+ .pkt-btn--small {
184
+ font-size: 0.875rem;
185
+ font-weight: 500;
186
+ letter-spacing: -0.2px;
187
+ line-height: 1.5em;
188
+ padding: 0.5rem 1rem;
189
+ }
190
+ .pkt-btn--small .pkt-btn__icon {
191
+ height: 1.25rem;
192
+ width: 1.25rem;
193
+ }
194
+ .pkt-btn--small.pkt-btn--icon-left .pkt-btn__icon {
195
+ margin: 0 0.5rem 0 0;
196
+ }
197
+ .pkt-btn--small.pkt-btn--icon-right .pkt-btn__icon {
198
+ margin: 0 0 0 0.5rem;
199
+ }
200
+ .pkt-btn--small.pkt-btn--icon-only .pkt-btn__icon {
201
+ margin: 0 -0.3125rem;
202
+ }
213
203
  .pkt-btn__icon {
214
204
  height: 1.5rem;
215
205
  width: 1.5rem;
@@ -221,49 +211,42 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
221
211
  flex-direction: row;
222
212
  }
223
213
  .pkt-btn--icon-left .pkt-btn__icon {
224
- margin: 0.09375rem 0.3125rem 0 0;
214
+ margin: 0.09375rem 0.5rem 0 0;
225
215
  }
226
216
  .pkt-btn--icon-right {
227
217
  flex-direction: row-reverse;
228
218
  }
229
219
  .pkt-btn--icon-right .pkt-btn__icon {
230
- margin: 0.09375rem 0 0 0.3125rem;
231
- }
232
- .pkt-btn--icon-only .pkt-btn__icon {
233
- margin: 0.09375rem -0.21875rem;
220
+ margin: 0.09375rem 0 0 0.5rem;
234
221
  }
235
- .pkt-btn--small {
236
- font-size: 1rem;
237
- line-height: 1.5em;
238
- padding: 0.3125rem 0.625rem;
239
- }
240
- .pkt-btn--small .pkt-btn__icon {
241
- height: 1.5rem;
242
- width: 1.5rem;
222
+ .pkt-btn--icons-right-and-left {
223
+ flex-direction: row;
243
224
  }
244
- .pkt-btn--small.pkt-btn--icon-left .pkt-btn__icon {
245
- margin: 0 0.3125rem 0 0;
225
+ .pkt-btn--icons-right-and-left .pkt-btn__icon:first-of-type {
226
+ margin: 0.09375rem 0.5rem 0 0;
246
227
  }
247
- .pkt-btn--small.pkt-btn--icon-right .pkt-btn__icon {
248
- margin: 0 0 0 0.3125rem;
228
+ .pkt-btn--icons-right-and-left .pkt-btn__icon:last-of-type {
229
+ margin: 0.09375rem 0 0 0.5rem;
249
230
  }
250
- .pkt-btn--small.pkt-btn--icon-only .pkt-btn__icon {
251
- margin: 0 -0.3125rem;
231
+ .pkt-btn--icon-only .pkt-btn__icon {
232
+ margin: 0.09375rem -0.21875rem;
252
233
  }
253
234
  .pkt-btn--large {
254
235
  font-size: 1.5rem;
255
- line-height: 1.4166666667em;
256
- padding: 0.9375rem 1.25rem;
236
+ font-weight: 500;
237
+ letter-spacing: -0.2px;
238
+ line-height: 1.5em;
239
+ padding: 0.75rem 1rem;
257
240
  }
258
241
  .pkt-btn--large .pkt-btn__icon {
259
242
  height: 2rem;
260
243
  width: 2rem;
261
244
  }
262
245
  .pkt-btn--large.pkt-btn--icon-left .pkt-btn__icon {
263
- margin: 0.0625rem 0.625rem 0 0;
246
+ margin: 0.0625rem 0.5rem 0 0;
264
247
  }
265
248
  .pkt-btn--large.pkt-btn--icon-right .pkt-btn__icon {
266
- margin: 0.0625rem 0 0 0.625rem;
249
+ margin: 0.0625rem 0 0 0.5rem;
267
250
  }
268
251
  .pkt-btn--large.pkt-btn--icon-only .pkt-btn__icon {
269
252
  margin: 0.0625rem -0.25rem;
package/dist/css/pkt-elements.min.css CHANGED
@@ -1 +1 @@
1
- .pkt-btn--icon-only .pkt-btn__text{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;margin:-1px !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.pkt-btn{--btn-link-bg: var(--color-blue-dark);--btn-link-bc: var(--color-blue-dark);--btn-link-txt: var(--color-white);--btn-focus-bg: var(--color-active);--btn-focus-bc: var(--color-active);--btn-focus-txt: var(--color-white);--btn-hover-bg: var(--color-active);--btn-hover-bc: var(--color-active);--btn-hover-txt: var(--color-white);--btn-active-bg: var(--color-active);--btn-active-bc: var(--color-active);--btn-active-txt: var(--color-white);--btn-disabled-bg: var(--color-gray);--btn-disabled-bc: var(--color-gray);--btn-disabled-txt: var(--color-grayscale-30)}[data-mode=dark] .pkt-btn{--btn-link-bg: var(--color-blue-light);--btn-link-bc: var(--color-blue-light);--btn-link-txt: var(--color-blue-dark);--btn-focus-bg: var(--color-blue);--btn-focus-bc: var(--color-blue);--btn-focus-txt: var(--color-blue-dark);--btn-hover-bg: var(--color-blue);--btn-hover-bc: var(--color-blue);--btn-hover-txt: var(--color-blue-dark);--btn-active-bg: var(--color-blue);--btn-active-bc: var(--color-blue);--btn-active-txt: var(--color-blue-dark);--btn-disabled-bg: var(--color-gray);--btn-disabled-bc: var(--color-gray);--btn-disabled-txt: var(--color-grayscale-30)}.pkt-btn--secondary{--btn-link-bg: var(--color-transparent);--btn-link-txt: var(--color-blue-dark);--btn-focus-bg: var(--color-transparent);--btn-focus-txt: var(--color-active);--btn-hover-bg: var(--color-transparent);--btn-hover-txt: var(--color-active)}[data-mode=dark] .pkt-btn--secondary{--btn-link-bg: var(--color-transparent);--btn-link-bc: var(--color-white);--btn-link-txt: var(--color-white);--btn-hover-bg: var(--color-transparent);--btn-hover-txt: var(--color-blue)}.pkt-btn--tertiary{--btn-link-bg: var(--color-transparent);--btn-link-bc: var(--color-yellow);--btn-link-txt: var(--color-blue-dark);--btn-focus-bg: var(--color-transparent);--btn-focus-txt: var(--color-active);--btn-hover-bg: var(--color-transparent);--btn-hover-txt: var(--color-active)}[data-mode=dark] .pkt-btn--tertiary{--btn-link-bg: var(--color-transparent);--btn-link-bc: var(--color-yellow);--btn-link-txt: var(--color-white);--btn-focus-bg: var(--color-transparent);--btn-focus-txt: var(--color-blue);--btn-hover-bg: var(--color-transparent);--btn-hover-txt: var(--color-blue)}.pkt-btn--flat{--btn-link-bg: var(--color-transparent);--btn-link-bc: var(--color-transparent);--btn-link-txt: var(--color-blue-dark);--btn-focus-bg: var(--color-gray);--btn-focus-bc: var(--color-gray);--btn-focus-txt: var(--color-active);--btn-hover-bg: var(--color-gray);--btn-hover-bc: var(--color-gray);--btn-hover-txt: var(--color-active);--btn-active-bg: var(--color-transparent);--btn-active-bc: var(--color-transparent);--btn-active-txt: var(--color-active);--btn-disabled-bg: var(--color-transparent);--btn-disabled-bc: var(--color-transparent)}[data-mode=dark] .pkt-btn--flat{--btn-link-bg: var(--color-transparent);--btn-link-bc: var(--color-transparent);--btn-link-txt: var(--color-white);--btn-focus-bg: var(--color-blue-5);--btn-focus-bc: var(--color-blue-5);--btn-focus-txt: var(--color-blue);--btn-hover-bg: var(--color-blue-5);--btn-hover-bc: var(--color-blue-5);--btn-hover-txt: var(--color-blue);--btn-active-bg: var(--color-transparent);--btn-active-bc: var(--color-transparent);--btn-active-txt: var(--color-blue);--btn-disabled-bg: var(--color-transparent);--btn-disabled-bc: var(--color-transparent);--btn-disabled-txt: var(--color-white)}.pkt-btn--primary-confirm{--btn-link-bg: var(--color-green);--btn-link-bc: var(--color-green);--btn-link-txt: var(--color-blue-dark)}[data-mode=dark] .pkt-btn--primary-confirm{--btn-link-bg: var(--color-green);--btn-link-bc: var(--color-green)}.pkt-btn{border-radius:0;cursor:pointer;display:inline-flex;font-family:inherit;font-weight:normal;margin:0;overflow:hidden;position:relative;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;background-color:var(--btn-link-bg);border:2px solid var(--btn-link-bc);color:var(--btn-link-txt);text-decoration:none;text-decoration-thickness:1px;text-underline-offset:.3em;text-align:left;font-size:1.125rem;line-height:1.5em;padding:.625rem .9375rem}.pkt-btn[class*=pkt-btn--icon]>.pkt-btn__icon{display:block}.pkt-btn__icon{--fg-color: currentColor;display:none;flex-shrink:0}.pkt-btn:link,.pkt-btn:visited{color:var(--btn-link-txt)}a.pkt-btn:focus,.pkt-btn:enabled:focus,.pkt-btn.pkt-btn--focus{background-color:var(--btn-focus-bg);border-color:var(--btn-focus-bc);color:var(--btn-focus-txt);outline:0;text-decoration:underline}a.pkt-btn:hover,.pkt-btn:enabled:hover,.pkt-btn.pkt-btn--hover{background-color:var(--btn-hover-bg);border-color:var(--btn-hover-bc);color:var(--btn-hover-txt);outline:0;text-decoration:underline}a.pkt-btn:active,.pkt-btn:enabled:active,.pkt-btn.pkt-btn--active,.pkt-btn.pkt-btn--active:hover{background-color:var(--btn-active-bg);border-color:var(--btn-active-bc);color:var(--btn-active-txt);outline:0;text-decoration:none}.pkt-btn:disabled{background-color:var(--btn-disabled-bg);border-color:var(--btn-disabled-bc);color:var(--btn-disabled-txt);cursor:inherit}.pkt-btn__icon{height:1.5rem;width:1.5rem}.pkt-btn--label-only .pkt-btn__icon{display:none}.pkt-btn--icon-left{flex-direction:row}.pkt-btn--icon-left .pkt-btn__icon{margin:.09375rem .3125rem 0 0}.pkt-btn--icon-right{flex-direction:row-reverse}.pkt-btn--icon-right .pkt-btn__icon{margin:.09375rem 0 0 .3125rem}.pkt-btn--icon-only .pkt-btn__icon{margin:.09375rem -0.21875rem}.pkt-btn--small{font-size:1rem;line-height:1.5em;padding:.3125rem .625rem}.pkt-btn--small .pkt-btn__icon{height:1.5rem;width:1.5rem}.pkt-btn--small.pkt-btn--icon-left .pkt-btn__icon{margin:0 .3125rem 0 0}.pkt-btn--small.pkt-btn--icon-right .pkt-btn__icon{margin:0 0 0 .3125rem}.pkt-btn--small.pkt-btn--icon-only .pkt-btn__icon{margin:0 -0.3125rem}.pkt-btn--large{font-size:1.5rem;line-height:1.4166666667em;padding:.9375rem 1.25rem}.pkt-btn--large .pkt-btn__icon{height:2rem;width:2rem}.pkt-btn--large.pkt-btn--icon-left .pkt-btn__icon{margin:.0625rem .625rem 0 0}.pkt-btn--large.pkt-btn--icon-right .pkt-btn__icon{margin:.0625rem 0 0 .625rem}.pkt-btn--large.pkt-btn--icon-only .pkt-btn__icon{margin:.0625rem -0.25rem}.pkt-btn::-moz-focus-inner{border:0}@keyframes enter{from{transform:scaleY(0)}to{transform:scaleY(1)}}.pkt-form-group{margin-bottom:1.5rem}.pkt-form-group:focus-within{color:var(--color-active)}.pkt-form-label{width:100%}.pkt-form-help{margin:.25em 0;font-size:.875rem;line-height:1.25em;opacity:.9}.pkt-form-validation{animation:enter .2s ease-in forwards;background-color:var(--color-red);border:2px solid var(--color-red);font-size:.875rem;line-height:2rem;margin:1rem 0 0;padding:.4375rem .5rem;transform-origin:0 0}.pkt-form-validation--warning{background-color:var(--color-yellow);border-color:var(--color-yellow)}.pkt-form-validation--error{background-color:var(--color-red);border-color:var(--color-red)}.pkt-form-input,.pkt-form-textarea{appearance:none;background-clip:padding-box;background-color:var(--color-white);border:2px solid var(--color-blue-dark);border-radius:0;color:var(--color-blue-dark);display:block;font-size:1rem;font-weight:400;line-height:2rem;margin:0;padding:.4375rem .5rem;position:relative;width:100%}.pkt-form-input:focus,.pkt-form-textarea:focus{background-color:var(--color-white);border-color:var(--color-active);box-shadow:0 0 var(--color-active);color:var(--color-active);outline:2px solid var(--color-active)}.pkt-form-input::placeholder,.pkt-form-textarea::placeholder{color:var(--color-grayscale-30);opacity:1}.pkt-form-input+.pkt-form-validation,.pkt-form-textarea+.pkt-form-validation{display:none}.pkt-form-input:not(:placeholder-shown):invalid,.pkt-form-textarea:not(:placeholder-shown):invalid{border-color:var(--color-red)}.pkt-form-input:not(:placeholder-shown):invalid+.pkt-form-validation,.pkt-form-textarea:not(:placeholder-shown):invalid+.pkt-form-validation{display:inherit}.pkt-form-input:disabled,.pkt-form-input[readonly],.pkt-form-textarea:disabled,.pkt-form-textarea[readonly]{background-color:var(--color-gray);border-color:var(--color-grayscale-30);color:var(--color-grayscale-30);cursor:inherit}.pkt-form-check-input{appearance:none;background-color:var(--color-white);background-repeat:no-repeat;background-position:center;background-size:contain;border:2px solid var(--color-blue-dark);display:inline-block;margin:.125rem .25rem 0 0;width:1.25rem;height:1.25rem;transition:all .3s ease-out;vertical-align:top}.pkt-form-check-input[type=checkbox]{border-radius:0}.pkt-form-check-input[type=radio]{border-radius:50%}.pkt-form-check-input:hover{border-color:var(--color-active)}.pkt-form-check-input:active{border-color:var(--color-active);outline:2px solid var(--color-active)}.pkt-form-check-input:focus{border-color:var(--color-active);outline:2px solid var(--color-hover)}.pkt-form-check-input:checked[type=radio]{background-color:var(--color-white);border:6px solid var(--color-active)}.pkt-form-check-input:checked[type=checkbox]{background-color:var(--color-active);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");border-color:var(--color-active)}.pkt-form-check-input:disabled{border-color:var(--color-grayscale-30);cursor:not-allowed}.pkt-form-check-input:disabled~.pkt-form-label{color:var(--color-grayscale-30);cursor:not-allowed}.pkt-hr{border:0;border-top:1px solid var(--color-grayscale-20)}.img-fluid{max-width:100%;height:auto}.img-round{border-radius:50%;overflow:hidden;object-fit:cover}.figure{display:inline-block}.pkt-list{display:grid;grid-template-columns:auto;grid-template-rows:auto;list-style:none;padding:0;position:relative;row-gap:1.5rem}@media screen and (min-width: 48rem){.pkt-list.two-cols-tablet-up{column-gap:1.5rem;grid-template-columns:1fr 1fr;grid-template-rows:auto}}@media screen and (min-width: 80rem){.pkt-list.three-cols-laptop-up{column-gap:1.5rem;grid-template-columns:1fr 1fr 1fr}}.pkt-list li>a{display:grid;grid-template-columns:2rem auto;column-gap:1rem}.pkt-dl,.pkt-dl--narrow{display:flex;flex-direction:column}@supports(display: grid){.pkt-dl,.pkt-dl--narrow{display:grid;flex-direction:column;grid-template-columns:1fr;margin:.5rem 0}}@media screen and (min-width: 48rem){.pkt-dl{grid-template-columns:minmax(9rem, auto) 1fr;border-bottom:0}}.pkt-dt{padding:.5em 0 0;font-size:.875rem;border-bottom:none}@media screen and (min-width: 48rem){.pkt-dt{font-size:inherit}}.pkt-dl--narrow>.pkt-dt{padding:.5em 0 0;font-size:.875rem;border-bottom:none}.pkt-dd{padding:0 0 .5em;font-weight:500;border-bottom:1px solid rgba(0,0,0,.15)}@media screen and (min-width: 48rem){.pkt-dd{border-bottom:1px solid rgba(0,0,0,.15)}@supports(display: grid){.pkt-dd{padding:.25em 0 .25em 1.25em;border-bottom:0}}}.pkt-dl--narrow>.pkt-dd{padding:0 0 .5em;font-weight:500;border-bottom:1px solid rgba(0,0,0,.15)}.pkt-section{margin:1rem 0}.pkt-section--dark{margin:1rem 0;padding:.75rem;background-color:#2a2859;color:#fff}@media screen and (min-width: 35.938rem){.pkt-section--dark{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--dark{padding:1.5rem}}.pkt-section--dark a.pkt-btn--ter{color:#fff}.pkt-section--danger{margin:1rem 0;padding:.75rem;background-color:#ff8274;color:#000}@media screen and (min-width: 35.938rem){.pkt-section--danger{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--danger{padding:1.5rem}}.pkt-section--danger a.pkt-btn--ter{color:#000}.pkt-section--grey{margin:1rem 0;padding:.75rem;background-color:#f2f2f2}@media screen and (min-width: 35.938rem){.pkt-section--grey{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--grey{padding:1.5rem}}.pkt-section--success{margin:1rem 0;padding:.75rem;background-color:#43f8b6;color:#000}@media screen and (min-width: 35.938rem){.pkt-section--success{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--success{padding:1.5rem}}.pkt-section--success a.pkt-btn--ter{color:#000}.pkt-section--warning{margin:1rem 0;padding:.75rem;background-color:#f9c66b}@media screen and (min-width: 35.938rem){.pkt-section--warning{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--warning{padding:1.5rem}}.pkt-section--info{margin:1rem 0;padding:.75rem;background-color:#b3f5ff}@media screen and (min-width: 35.938rem){.pkt-section--info{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--info{padding:1.5rem}}.pkt-section--info a.pkt-btn--ter{color:#000}.pkt-section--frame{margin:1rem 0;padding:.75rem;background-color:#fff;border:1px solid}@media screen and (min-width: 35.938rem){.pkt-section--frame{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--frame{padding:1.5rem}}[class*=ok-section-]>[class^=ok-title-]{margin-top:0}.pkt-section--margin-top{margin-top:2.5rem}.pkt-select{display:block;background-color:var(--color-white);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 19.41L6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z' fill-rule='evenodd' fill='%232a2859' /%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:2rem auto,100%;border:2px solid var(--color-blue-dark);border-radius:0;color:var(--color-blue-dark);font-family:inherit;font-size:1rem;font-weight:normal;height:3.125rem;line-height:2rem;margin:0;max-width:100%;padding:.4375rem 3rem .4375rem .5rem;width:100%;appearance:none;-moz-appearance:none;-webkit-appearance:none}.pkt-select::-ms-expand{display:none}.pkt-select:enabled:focus{border-color:var(--color-active);outline:2px solid var(--color-active)}.pkt-select:enabled:hover{--fg-color: var(--color-active);border-color:var(--color-active);color:var(--color-active)}.pkt-select:enabled:active{border-color:var(--color-active);outline:none}.pkt-select:-moz-focusring{color:rgba(0,0,0,0);text-shadow:0 0 0 var(--color-active)}.pkt-select:disabled{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 19.41L6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z' fill-rule='evenodd' fill='%23b9b9b9' /%3e%3c/svg%3e");border-color:var(--color-grayscale-30);color:var(--color-grayscale-30)}.pkt-select option{background-color:var(--color-white);color:var(--color-blue-dark);font-weight:normal}.pkt-table{width:100%;font-size:.875rem;border-radius:2px;border-collapse:collapse}.pkt-table__th{color:#000;font-weight:500;text-align:left;background:#f2f2f2;border-bottom:1px solid #f2f2f2}.pkt-table__th:first-child{border-top-left-radius:2px}.pkt-table__th:last-child{border-top-right-radius:2px}.pkt-table th,.pkt-table td{min-width:200px;padding:.5rem;text-align:left;border-bottom:1px solid #f2f2f2}.pkt-table tbody tr:hover>td{background:rgba(42,40,89,.02)}.pkt-table--info .pkt-table__th{background:rgba(249,198,107,.25);border-bottom:1px solid #f9c66b}.pkt-table--success .pkt-table__th{background:rgba(199,246,201,.25);border-bottom:1px solid #c7f6c9}.pkt-table--strong .pkt-table__th{background:rgba(42,40,89,.25);border-bottom:1px solid #2a2859}.pkt-table--shadow{background:#fff;box-shadow:0 1px 3px rgba(42,40,89,.25)}.pkt-table--shadow>tbody tr:last-of-type td{border-bottom:none}.pkt-table-container{margin:1rem 0;overflow-x:auto}
1
+ .pkt-btn--icon-only .pkt-btn__text{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;margin:-1px !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.pkt-btn{--btn-link-bg: var(--color-blue-dark);--btn-link-bc: var(--color-blue-dark);--btn-link-txt: var(--color-white);--btn-focus-bg: var(--color-active);--btn-focus-bc: var(--color-active);--btn-focus-txt: var(--color-white);--btn-focus-outline: var(--color-active);--btn-hover-bg: var(--color-active);--btn-hover-bc: var(--color-active);--btn-hover-txt: var(--color-white);--btn-active-bg: var(--color-active);--btn-active-bc: var(--color-active);--btn-active-txt: var(--color-white);--btn-disabled-bg: var(--color-gray);--btn-disabled-bc: var(--color-gray);--btn-disabled-txt: var(--color-disabled)}[data-mode=dark] .pkt-btn{--btn-link-bg: var(--color-blue-light);--btn-link-bc: var(--color-blue-light);--btn-link-txt: var(--color-blue-dark);--btn-focus-bg: var(--color-blue);--btn-focus-bc: var(--color-blue);--btn-focus-txt: var(--color-blue-dark);--btn-focus-outline: var(--color-active-light);--btn-hover-bg: var(--color-blue);--btn-hover-bc: var(--color-blue);--btn-hover-txt: var(--color-blue-dark);--btn-active-bg: var(--color-blue);--btn-active-bc: var(--color-blue);--btn-active-txt: var(--color-blue-dark);--btn-disabled-bg: var(--color-gray);--btn-disabled-bc: var(--color-gray);--btn-disabled-txt: var(--color-disabled)}.pkt-btn--secondary{--btn-link-bg: var(--color-transparent);--btn-link-txt: var(--color-blue-dark);--btn-focus-bg: var(--color-transparent);--btn-focus-txt: var(--color-active)}[data-mode=dark] .pkt-btn--secondary{--btn-link-bg: var(--color-transparent);--btn-link-bc: var(--color-white);--btn-link-txt: var(--color-white);--btn-focus-bg: var(--color-transparent);--btn-focus-bc: var(--color-active-light);--btn-focus-txt: var(--color-active-light);--btn-hover-bg: var(--color-active-light);--btn-hover-bc: var(--color-active-light);--btn-active-bg: var(--color-active-light);--btn-active-bc: var(--color-active-light)}.pkt-btn--tertiary{--btn-link-bg: var(--color-transparent);--btn-link-bc: var(--color-transparent);--btn-link-txt: var(--color-blue-dark);--btn-focus-bg: var(--color-gray);--btn-focus-bc: var(--color-gray);--btn-focus-txt: var(--color-active);--btn-hover-bg: var(--color-gray);--btn-hover-bc: var(--color-gray);--btn-hover-txt: var(--color-active);--btn-disabled-bg: var(--color-transparent);--btn-disabled-bc: var(--color-transparent)}[data-mode=dark] .pkt-btn--tertiary{--btn-link-bg: var(--color-transparent);--btn-link-bc: var(--color-transparent);--btn-link-txt: var(--color-white);--btn-focus-bg: var(--color-blue-5);--btn-focus-bc: var(--color-blue-5);--btn-hover-bg: var(--color-blue-5);--btn-hover-bc: var(--color-blue-5);--btn-active-bg: var(--color-blue-dark-10);--btn-active-bc: var(--color-transparent);--btn-disabled-bg: var(--color-transparent);--btn-disabled-bc: var(--color-transparent)}.pkt-btn{border-radius:0;cursor:pointer;display:inline-flex;font-family:inherit;font-weight:normal;margin:6px;overflow:hidden;position:relative;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;background-color:var(--btn-link-bg);border:2px solid var(--btn-link-bc);color:var(--btn-link-txt);text-decoration:none;text-decoration-thickness:1px;text-underline-offset:.3em;text-align:left;font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5em;padding:.5rem 1rem}.pkt-btn[class*=pkt-btn--icon]>.pkt-btn__icon{display:block}.pkt-btn__icon{--fg-color: currentColor;display:none;flex-shrink:0}.pkt-btn:link,.pkt-btn:visited{color:var(--btn-link-txt)}a.pkt-btn:focus,.pkt-btn:enabled:focus,.pkt-btn.pkt-btn--focus{background-color:var(--btn-focus-bg);color:var(--btn-focus-txt);border-color:var(--btn-focus-bc);outline:2px solid var(--btn-focus-outline);outline-offset:4px;text-decoration:none}a.pkt-btn:hover,.pkt-btn:enabled:hover,.pkt-btn.pkt-btn--hover{background-color:var(--btn-hover-bg);border-color:var(--btn-hover-bc);color:var(--btn-hover-txt);outline:0;text-decoration:underline}a.pkt-btn:active,.pkt-btn:enabled:active,.pkt-btn.pkt-btn--active,.pkt-btn.pkt-btn--active:hover{background-color:var(--btn-active-bg);border-color:var(--btn-active-bc);color:var(--btn-active-txt);outline:0;text-decoration:none}.pkt-btn:disabled{background-color:var(--btn-disabled-bg);border-color:var(--btn-disabled-bc);color:var(--btn-disabled-txt);cursor:inherit}.pkt-btn--small{font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5em;padding:.5rem 1rem}.pkt-btn--small .pkt-btn__icon{height:1.25rem;width:1.25rem}.pkt-btn--small.pkt-btn--icon-left .pkt-btn__icon{margin:0 .5rem 0 0}.pkt-btn--small.pkt-btn--icon-right .pkt-btn__icon{margin:0 0 0 .5rem}.pkt-btn--small.pkt-btn--icon-only .pkt-btn__icon{margin:0 -0.3125rem}.pkt-btn__icon{height:1.5rem;width:1.5rem}.pkt-btn--label-only .pkt-btn__icon{display:none}.pkt-btn--icon-left{flex-direction:row}.pkt-btn--icon-left .pkt-btn__icon{margin:.09375rem .5rem 0 0}.pkt-btn--icon-right{flex-direction:row-reverse}.pkt-btn--icon-right .pkt-btn__icon{margin:.09375rem 0 0 .5rem}.pkt-btn--icons-right-and-left{flex-direction:row}.pkt-btn--icons-right-and-left .pkt-btn__icon:first-of-type{margin:.09375rem .5rem 0 0}.pkt-btn--icons-right-and-left .pkt-btn__icon:last-of-type{margin:.09375rem 0 0 .5rem}.pkt-btn--icon-only .pkt-btn__icon{margin:.09375rem -0.21875rem}.pkt-btn--large{font-size:1.5rem;font-weight:500;letter-spacing:-0.2px;line-height:1.5em;padding:.75rem 1rem}.pkt-btn--large .pkt-btn__icon{height:2rem;width:2rem}.pkt-btn--large.pkt-btn--icon-left .pkt-btn__icon{margin:.0625rem .5rem 0 0}.pkt-btn--large.pkt-btn--icon-right .pkt-btn__icon{margin:.0625rem 0 0 .5rem}.pkt-btn--large.pkt-btn--icon-only .pkt-btn__icon{margin:.0625rem -0.25rem}.pkt-btn::-moz-focus-inner{border:0}@keyframes enter{from{transform:scaleY(0)}to{transform:scaleY(1)}}.pkt-form-group{margin-bottom:1.5rem}.pkt-form-group:focus-within{color:var(--color-active)}.pkt-form-label{width:100%}.pkt-form-help{margin:.25em 0;font-size:.875rem;line-height:1.25em;opacity:.9}.pkt-form-validation{animation:enter .2s ease-in forwards;background-color:var(--color-red);border:2px solid var(--color-red);font-size:.875rem;line-height:2rem;margin:1rem 0 0;padding:.4375rem .5rem;transform-origin:0 0}.pkt-form-validation--warning{background-color:var(--color-yellow);border-color:var(--color-yellow)}.pkt-form-validation--error{background-color:var(--color-red);border-color:var(--color-red)}.pkt-form-input,.pkt-form-textarea{appearance:none;background-clip:padding-box;background-color:var(--color-white);border:2px solid var(--color-blue-dark);border-radius:0;color:var(--color-blue-dark);display:block;font-size:1rem;font-weight:400;line-height:2rem;margin:0;padding:.4375rem .5rem;position:relative;width:100%}.pkt-form-input:focus,.pkt-form-textarea:focus{background-color:var(--color-white);border-color:var(--color-active);box-shadow:0 0 var(--color-active);color:var(--color-active);outline:2px solid var(--color-active)}.pkt-form-input::placeholder,.pkt-form-textarea::placeholder{color:var(--color-grayscale-30);opacity:1}.pkt-form-input+.pkt-form-validation,.pkt-form-textarea+.pkt-form-validation{display:none}.pkt-form-input:not(:placeholder-shown):invalid,.pkt-form-textarea:not(:placeholder-shown):invalid{border-color:var(--color-red)}.pkt-form-input:not(:placeholder-shown):invalid+.pkt-form-validation,.pkt-form-textarea:not(:placeholder-shown):invalid+.pkt-form-validation{display:inherit}.pkt-form-input:disabled,.pkt-form-input[readonly],.pkt-form-textarea:disabled,.pkt-form-textarea[readonly]{background-color:var(--color-gray);border-color:var(--color-grayscale-30);color:var(--color-grayscale-30);cursor:inherit}.pkt-form-check-input{appearance:none;background-color:var(--color-white);background-repeat:no-repeat;background-position:center;background-size:contain;border:2px solid var(--color-blue-dark);display:inline-block;margin:.125rem .25rem 0 0;width:1.25rem;height:1.25rem;transition:all .3s ease-out;vertical-align:top}.pkt-form-check-input[type=checkbox]{border-radius:0}.pkt-form-check-input[type=radio]{border-radius:50%}.pkt-form-check-input:hover{border-color:var(--color-active)}.pkt-form-check-input:active{border-color:var(--color-active);outline:2px solid var(--color-active)}.pkt-form-check-input:focus{border-color:var(--color-active);outline:2px solid var(--color-hover)}.pkt-form-check-input:checked[type=radio]{background-color:var(--color-white);border:6px solid var(--color-active)}.pkt-form-check-input:checked[type=checkbox]{background-color:var(--color-active);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");border-color:var(--color-active)}.pkt-form-check-input:disabled{border-color:var(--color-grayscale-30);cursor:not-allowed}.pkt-form-check-input:disabled~.pkt-form-label{color:var(--color-grayscale-30);cursor:not-allowed}.pkt-hr{border:0;border-top:1px solid var(--color-grayscale-20)}.img-fluid{max-width:100%;height:auto}.img-round{border-radius:50%;overflow:hidden;object-fit:cover}.figure{display:inline-block}.pkt-list{display:grid;grid-template-columns:auto;grid-template-rows:auto;list-style:none;padding:0;position:relative;row-gap:1.5rem}@media screen and (min-width: 48rem){.pkt-list.two-cols-tablet-up{column-gap:1.5rem;grid-template-columns:1fr 1fr;grid-template-rows:auto}}@media screen and (min-width: 80rem){.pkt-list.three-cols-laptop-up{column-gap:1.5rem;grid-template-columns:1fr 1fr 1fr}}.pkt-list li>a{display:grid;grid-template-columns:2rem auto;column-gap:1rem}.pkt-dl,.pkt-dl--narrow{display:flex;flex-direction:column}@supports(display: grid){.pkt-dl,.pkt-dl--narrow{display:grid;flex-direction:column;grid-template-columns:1fr;margin:.5rem 0}}@media screen and (min-width: 48rem){.pkt-dl{grid-template-columns:minmax(9rem, auto) 1fr;border-bottom:0}}.pkt-dt{padding:.5em 0 0;font-size:.875rem;border-bottom:none}@media screen and (min-width: 48rem){.pkt-dt{font-size:inherit}}.pkt-dl--narrow>.pkt-dt{padding:.5em 0 0;font-size:.875rem;border-bottom:none}.pkt-dd{padding:0 0 .5em;font-weight:500;border-bottom:1px solid rgba(0,0,0,.15)}@media screen and (min-width: 48rem){.pkt-dd{border-bottom:1px solid rgba(0,0,0,.15)}@supports(display: grid){.pkt-dd{padding:.25em 0 .25em 1.25em;border-bottom:0}}}.pkt-dl--narrow>.pkt-dd{padding:0 0 .5em;font-weight:500;border-bottom:1px solid rgba(0,0,0,.15)}.pkt-section{margin:1rem 0}.pkt-section--dark{margin:1rem 0;padding:.75rem;background-color:#2a2859;color:#fff}@media screen and (min-width: 35.938rem){.pkt-section--dark{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--dark{padding:1.5rem}}.pkt-section--dark a.pkt-btn--ter{color:#fff}.pkt-section--danger{margin:1rem 0;padding:.75rem;background-color:#ff8274;color:#000}@media screen and (min-width: 35.938rem){.pkt-section--danger{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--danger{padding:1.5rem}}.pkt-section--danger a.pkt-btn--ter{color:#000}.pkt-section--grey{margin:1rem 0;padding:.75rem;background-color:#f2f2f2}@media screen and (min-width: 35.938rem){.pkt-section--grey{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--grey{padding:1.5rem}}.pkt-section--success{margin:1rem 0;padding:.75rem;background-color:#43f8b6;color:#000}@media screen and (min-width: 35.938rem){.pkt-section--success{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--success{padding:1.5rem}}.pkt-section--success a.pkt-btn--ter{color:#000}.pkt-section--warning{margin:1rem 0;padding:.75rem;background-color:#f9c66b}@media screen and (min-width: 35.938rem){.pkt-section--warning{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--warning{padding:1.5rem}}.pkt-section--info{margin:1rem 0;padding:.75rem;background-color:#b3f5ff}@media screen and (min-width: 35.938rem){.pkt-section--info{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--info{padding:1.5rem}}.pkt-section--info a.pkt-btn--ter{color:#000}.pkt-section--frame{margin:1rem 0;padding:.75rem;background-color:#fff;border:1px solid}@media screen and (min-width: 35.938rem){.pkt-section--frame{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--frame{padding:1.5rem}}[class*=ok-section-]>[class^=ok-title-]{margin-top:0}.pkt-section--margin-top{margin-top:2.5rem}.pkt-select{display:block;background-color:var(--color-white);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 19.41L6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z' fill-rule='evenodd' fill='%232a2859' /%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:2rem auto,100%;border:2px solid var(--color-blue-dark);border-radius:0;color:var(--color-blue-dark);font-family:inherit;font-size:1rem;font-weight:normal;height:3.125rem;line-height:2rem;margin:0;max-width:100%;padding:.4375rem 3rem .4375rem .5rem;width:100%;appearance:none;-moz-appearance:none;-webkit-appearance:none}.pkt-select::-ms-expand{display:none}.pkt-select:enabled:focus{border-color:var(--color-active);outline:2px solid var(--color-active)}.pkt-select:enabled:hover{--fg-color: var(--color-active);border-color:var(--color-active);color:var(--color-active)}.pkt-select:enabled:active{border-color:var(--color-active);outline:none}.pkt-select:-moz-focusring{color:rgba(0,0,0,0);text-shadow:0 0 0 var(--color-active)}.pkt-select:disabled{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M16 19.41L6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z' fill-rule='evenodd' fill='%23b9b9b9' /%3e%3c/svg%3e");border-color:var(--color-grayscale-30);color:var(--color-grayscale-30)}.pkt-select option{background-color:var(--color-white);color:var(--color-blue-dark);font-weight:normal}.pkt-table{width:100%;font-size:.875rem;border-radius:2px;border-collapse:collapse}.pkt-table__th{color:#000;font-weight:500;text-align:left;background:#f2f2f2;border-bottom:1px solid #f2f2f2}.pkt-table__th:first-child{border-top-left-radius:2px}.pkt-table__th:last-child{border-top-right-radius:2px}.pkt-table th,.pkt-table td{min-width:200px;padding:.5rem;text-align:left;border-bottom:1px solid #f2f2f2}.pkt-table tbody tr:hover>td{background:rgba(42,40,89,.02)}.pkt-table--info .pkt-table__th{background:rgba(249,198,107,.25);border-bottom:1px solid #f9c66b}.pkt-table--success .pkt-table__th{background:rgba(199,246,201,.25);border-bottom:1px solid #c7f6c9}.pkt-table--strong .pkt-table__th{background:rgba(42,40,89,.25);border-bottom:1px solid #2a2859}.pkt-table--shadow{background:#fff;box-shadow:0 1px 3px rgba(42,40,89,.25)}.pkt-table--shadow>tbody tr:last-of-type td{border-bottom:none}.pkt-table-container{margin:1rem 0;overflow-x:auto}
package/dist/css/pkt.css CHANGED
@@ -9954,7 +9954,7 @@ a:active {
9954
9954
  * Skin: primary, secondary, tertiary, flat, primary-confirm
9955
9955
  * State: normal, focus, hover, active, disabled
9956
9956
  * Variant: label-only, icon-left, icon-right, icon-only
9957
- * Mode: light, dark
9957
+ * Background: light, dark
9958
9958
  */
9959
9959
  .pkt-btn {
9960
9960
  --btn-link-bg: var(--color-blue-dark);
@@ -9963,6 +9963,7 @@ a:active {
9963
9963
  --btn-focus-bg: var(--color-active);
9964
9964
  --btn-focus-bc: var(--color-active);
9965
9965
  --btn-focus-txt: var(--color-white);
9966
+ --btn-focus-outline: var(--color-active);
9966
9967
  --btn-hover-bg: var(--color-active);
9967
9968
  --btn-hover-bc: var(--color-active);
9968
9969
  --btn-hover-txt: var(--color-white);
@@ -9971,7 +9972,7 @@ a:active {
9971
9972
  --btn-active-txt: var(--color-white);
9972
9973
  --btn-disabled-bg: var(--color-gray);
9973
9974
  --btn-disabled-bc: var(--color-gray);
9974
- --btn-disabled-txt: var(--color-grayscale-30);
9975
+ --btn-disabled-txt: var(--color-disabled);
9975
9976
  }
9976
9977
 
9977
9978
  [data-mode=dark] .pkt-btn {
@@ -9981,6 +9982,7 @@ a:active {
9981
9982
  --btn-focus-bg: var(--color-blue);
9982
9983
  --btn-focus-bc: var(--color-blue);
9983
9984
  --btn-focus-txt: var(--color-blue-dark);
9985
+ --btn-focus-outline: var(--color-active-light);
9984
9986
  --btn-hover-bg: var(--color-blue);
9985
9987
  --btn-hover-bc: var(--color-blue);
9986
9988
  --btn-hover-txt: var(--color-blue-dark);
@@ -9989,7 +9991,7 @@ a:active {
9989
9991
  --btn-active-txt: var(--color-blue-dark);
9990
9992
  --btn-disabled-bg: var(--color-gray);
9991
9993
  --btn-disabled-bc: var(--color-gray);
9992
- --btn-disabled-txt: var(--color-grayscale-30);
9994
+ --btn-disabled-txt: var(--color-disabled);
9993
9995
  }
9994
9996
 
9995
9997
  .pkt-btn--secondary {
@@ -9997,39 +9999,22 @@ a:active {
9997
9999
  --btn-link-txt: var(--color-blue-dark);
9998
10000
  --btn-focus-bg: var(--color-transparent);
9999
10001
  --btn-focus-txt: var(--color-active);
10000
- --btn-hover-bg: var(--color-transparent);
10001
- --btn-hover-txt: var(--color-active);
10002
10002
  }
10003
10003
 
10004
10004
  [data-mode=dark] .pkt-btn--secondary {
10005
10005
  --btn-link-bg: var(--color-transparent);
10006
10006
  --btn-link-bc: var(--color-white);
10007
10007
  --btn-link-txt: var(--color-white);
10008
- --btn-hover-bg: var(--color-transparent);
10009
- --btn-hover-txt: var(--color-blue);
10010
- }
10011
-
10012
- .pkt-btn--tertiary {
10013
- --btn-link-bg: var(--color-transparent);
10014
- --btn-link-bc: var(--color-yellow);
10015
- --btn-link-txt: var(--color-blue-dark);
10016
10008
  --btn-focus-bg: var(--color-transparent);
10017
- --btn-focus-txt: var(--color-active);
10018
- --btn-hover-bg: var(--color-transparent);
10019
- --btn-hover-txt: var(--color-active);
10009
+ --btn-focus-bc: var(--color-active-light);
10010
+ --btn-focus-txt: var(--color-active-light);
10011
+ --btn-hover-bg: var(--color-active-light);
10012
+ --btn-hover-bc: var(--color-active-light);
10013
+ --btn-active-bg: var(--color-active-light);
10014
+ --btn-active-bc: var(--color-active-light);
10020
10015
  }
10021
10016
 
10022
- [data-mode=dark] .pkt-btn--tertiary {
10023
- --btn-link-bg: var(--color-transparent);
10024
- --btn-link-bc: var(--color-yellow);
10025
- --btn-link-txt: var(--color-white);
10026
- --btn-focus-bg: var(--color-transparent);
10027
- --btn-focus-txt: var(--color-blue);
10028
- --btn-hover-bg: var(--color-transparent);
10029
- --btn-hover-txt: var(--color-blue);
10030
- }
10031
-
10032
- .pkt-btn--flat {
10017
+ .pkt-btn--tertiary {
10033
10018
  --btn-link-bg: var(--color-transparent);
10034
10019
  --btn-link-bc: var(--color-transparent);
10035
10020
  --btn-link-txt: var(--color-blue-dark);
@@ -10039,40 +10024,22 @@ a:active {
10039
10024
  --btn-hover-bg: var(--color-gray);
10040
10025
  --btn-hover-bc: var(--color-gray);
10041
10026
  --btn-hover-txt: var(--color-active);
10042
- --btn-active-bg: var(--color-transparent);
10043
- --btn-active-bc: var(--color-transparent);
10044
- --btn-active-txt: var(--color-active);
10045
10027
  --btn-disabled-bg: var(--color-transparent);
10046
10028
  --btn-disabled-bc: var(--color-transparent);
10047
10029
  }
10048
10030
 
10049
- [data-mode=dark] .pkt-btn--flat {
10031
+ [data-mode=dark] .pkt-btn--tertiary {
10050
10032
  --btn-link-bg: var(--color-transparent);
10051
10033
  --btn-link-bc: var(--color-transparent);
10052
10034
  --btn-link-txt: var(--color-white);
10053
10035
  --btn-focus-bg: var(--color-blue-5);
10054
10036
  --btn-focus-bc: var(--color-blue-5);
10055
- --btn-focus-txt: var(--color-blue);
10056
10037
  --btn-hover-bg: var(--color-blue-5);
10057
10038
  --btn-hover-bc: var(--color-blue-5);
10058
- --btn-hover-txt: var(--color-blue);
10059
- --btn-active-bg: var(--color-transparent);
10039
+ --btn-active-bg: var(--color-blue-dark-10);
10060
10040
  --btn-active-bc: var(--color-transparent);
10061
- --btn-active-txt: var(--color-blue);
10062
10041
  --btn-disabled-bg: var(--color-transparent);
10063
10042
  --btn-disabled-bc: var(--color-transparent);
10064
- --btn-disabled-txt: var(--color-white);
10065
- }
10066
-
10067
- .pkt-btn--primary-confirm {
10068
- --btn-link-bg: var(--color-green);
10069
- --btn-link-bc: var(--color-green);
10070
- --btn-link-txt: var(--color-blue-dark);
10071
- }
10072
-
10073
- [data-mode=dark] .pkt-btn--primary-confirm {
10074
- --btn-link-bg: var(--color-green);
10075
- --btn-link-bc: var(--color-green);
10076
10043
  }
10077
10044
 
10078
10045
  .pkt-btn {
@@ -10081,7 +10048,7 @@ a:active {
10081
10048
  display: inline-flex;
10082
10049
  font-family: inherit;
10083
10050
  font-weight: normal;
10084
- margin: 0;
10051
+ margin: 6px;
10085
10052
  overflow: hidden;
10086
10053
  position: relative;
10087
10054
  -moz-user-select: none;
@@ -10097,8 +10064,10 @@ a:active {
10097
10064
  text-underline-offset: 0.3em;
10098
10065
  text-align: left;
10099
10066
  font-size: 1.125rem;
10067
+ font-weight: 500;
10068
+ letter-spacing: -0.2px;
10100
10069
  line-height: 1.5em;
10101
- padding: 0.625rem 0.9375rem;
10070
+ padding: 0.5rem 1rem;
10102
10071
  }
10103
10072
  .pkt-btn[class*=pkt-btn--icon] > .pkt-btn__icon {
10104
10073
  display: block;
@@ -10113,10 +10082,11 @@ a:active {
10113
10082
  }
10114
10083
  a.pkt-btn:focus, .pkt-btn:enabled:focus, .pkt-btn.pkt-btn--focus {
10115
10084
  background-color: var(--btn-focus-bg);
10116
- border-color: var(--btn-focus-bc);
10117
10085
  color: var(--btn-focus-txt);
10118
- outline: 0;
10119
- text-decoration: underline;
10086
+ border-color: var(--btn-focus-bc);
10087
+ outline: 2px solid var(--btn-focus-outline);
10088
+ outline-offset: 4px;
10089
+ text-decoration: none;
10120
10090
  }
10121
10091
 
10122
10092
  a.pkt-btn:hover, .pkt-btn:enabled:hover, .pkt-btn.pkt-btn--hover {
@@ -10141,6 +10111,26 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
10141
10111
  color: var(--btn-disabled-txt);
10142
10112
  cursor: inherit;
10143
10113
  }
10114
+ .pkt-btn--small {
10115
+ font-size: 0.875rem;
10116
+ font-weight: 500;
10117
+ letter-spacing: -0.2px;
10118
+ line-height: 1.5em;
10119
+ padding: 0.5rem 1rem;
10120
+ }
10121
+ .pkt-btn--small .pkt-btn__icon {
10122
+ height: 1.25rem;
10123
+ width: 1.25rem;
10124
+ }
10125
+ .pkt-btn--small.pkt-btn--icon-left .pkt-btn__icon {
10126
+ margin: 0 0.5rem 0 0;
10127
+ }
10128
+ .pkt-btn--small.pkt-btn--icon-right .pkt-btn__icon {
10129
+ margin: 0 0 0 0.5rem;
10130
+ }
10131
+ .pkt-btn--small.pkt-btn--icon-only .pkt-btn__icon {
10132
+ margin: 0 -0.3125rem;
10133
+ }
10144
10134
  .pkt-btn__icon {
10145
10135
  height: 1.5rem;
10146
10136
  width: 1.5rem;
@@ -10152,49 +10142,42 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
10152
10142
  flex-direction: row;
10153
10143
  }
10154
10144
  .pkt-btn--icon-left .pkt-btn__icon {
10155
- margin: 0.09375rem 0.3125rem 0 0;
10145
+ margin: 0.09375rem 0.5rem 0 0;
10156
10146
  }
10157
10147
  .pkt-btn--icon-right {
10158
10148
  flex-direction: row-reverse;
10159
10149
  }
10160
10150
  .pkt-btn--icon-right .pkt-btn__icon {
10161
- margin: 0.09375rem 0 0 0.3125rem;
10162
- }
10163
- .pkt-btn--icon-only .pkt-btn__icon {
10164
- margin: 0.09375rem -0.21875rem;
10165
- }
10166
- .pkt-btn--small {
10167
- font-size: 1rem;
10168
- line-height: 1.5em;
10169
- padding: 0.3125rem 0.625rem;
10151
+ margin: 0.09375rem 0 0 0.5rem;
10170
10152
  }
10171
- .pkt-btn--small .pkt-btn__icon {
10172
- height: 1.5rem;
10173
- width: 1.5rem;
10153
+ .pkt-btn--icons-right-and-left {
10154
+ flex-direction: row;
10174
10155
  }
10175
- .pkt-btn--small.pkt-btn--icon-left .pkt-btn__icon {
10176
- margin: 0 0.3125rem 0 0;
10156
+ .pkt-btn--icons-right-and-left .pkt-btn__icon:first-of-type {
10157
+ margin: 0.09375rem 0.5rem 0 0;
10177
10158
  }
10178
- .pkt-btn--small.pkt-btn--icon-right .pkt-btn__icon {
10179
- margin: 0 0 0 0.3125rem;
10159
+ .pkt-btn--icons-right-and-left .pkt-btn__icon:last-of-type {
10160
+ margin: 0.09375rem 0 0 0.5rem;
10180
10161
  }
10181
- .pkt-btn--small.pkt-btn--icon-only .pkt-btn__icon {
10182
- margin: 0 -0.3125rem;
10162
+ .pkt-btn--icon-only .pkt-btn__icon {
10163
+ margin: 0.09375rem -0.21875rem;
10183
10164
  }
10184
10165
  .pkt-btn--large {
10185
10166
  font-size: 1.5rem;
10186
- line-height: 1.4166666667em;
10187
- padding: 0.9375rem 1.25rem;
10167
+ font-weight: 500;
10168
+ letter-spacing: -0.2px;
10169
+ line-height: 1.5em;
10170
+ padding: 0.75rem 1rem;
10188
10171
  }
10189
10172
  .pkt-btn--large .pkt-btn__icon {
10190
10173
  height: 2rem;
10191
10174
  width: 2rem;
10192
10175
  }
10193
10176
  .pkt-btn--large.pkt-btn--icon-left .pkt-btn__icon {
10194
- margin: 0.0625rem 0.625rem 0 0;
10177
+ margin: 0.0625rem 0.5rem 0 0;
10195
10178
  }
10196
10179
  .pkt-btn--large.pkt-btn--icon-right .pkt-btn__icon {
10197
- margin: 0.0625rem 0 0 0.625rem;
10180
+ margin: 0.0625rem 0 0 0.5rem;
10198
10181
  }
10199
10182
  .pkt-btn--large.pkt-btn--icon-only .pkt-btn__icon {
10200
10183
  margin: 0.0625rem -0.25rem;