nve-designsystem 0.1.67 → 0.1.69
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/components/nve-radio-button/nve-radio-button.component.d.ts +1 -0
- package/components/nve-radio-button/nve-radio-button.component.js +35 -32
- package/components/nve-radio-group/nve-radio-group.component.d.ts +1 -0
- package/components/nve-radio-group/nve-radio-group.component.js +34 -31
- package/css/nve.css +1 -1
- package/css/nve_dark.css +109 -106
- package/css/varsom.css +1 -1
- package/css/varsom_dark.css +109 -106
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ import SlRadioButton from '@shoelace-style/shoelace/dist/components/radio-button
|
|
|
6
6
|
export default class NveRadioButton extends SlRadioButton {
|
|
7
7
|
constructor();
|
|
8
8
|
static styles: import("lit").CSSResultGroup[];
|
|
9
|
+
testId: string;
|
|
9
10
|
}
|
|
10
11
|
declare global {
|
|
11
12
|
interface HTMLElementTagNameMap {
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { n as i, t as
|
|
2
|
-
import { i as b } from "../../chunks/lit-element.js";
|
|
1
|
+
import { n as i, t as b } from "../../chunks/property.js";
|
|
3
2
|
import { b as f } from "../../chunks/chunk.MGOBPGE5.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import { e as x } from "../../chunks/
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
|
|
3
|
+
import { i as m } from "../../chunks/lit-element.js";
|
|
4
|
+
import { H as _ } from "../../chunks/chunk.NYIIDP5N.js";
|
|
5
|
+
import { w as y } from "../../chunks/chunk.Q6ASPMKT.js";
|
|
6
|
+
import { b as e, S as x } from "../../chunks/chunk.JS655M6J.js";
|
|
7
|
+
import { e as v } from "../../chunks/class-map.js";
|
|
8
|
+
import { n as $ } from "../../chunks/static.js";
|
|
9
|
+
import { o as w } from "../../chunks/if-defined.js";
|
|
10
|
+
import { r as C } from "../../chunks/state.js";
|
|
11
|
+
import { e as h } from "../../chunks/query.js";
|
|
12
|
+
var g = m`
|
|
13
13
|
${f}
|
|
14
14
|
|
|
15
15
|
.button__prefix,
|
|
@@ -33,9 +33,9 @@ var C = b`
|
|
|
33
33
|
opacity: 0;
|
|
34
34
|
z-index: -1;
|
|
35
35
|
}
|
|
36
|
-
`, t = class extends
|
|
36
|
+
`, t = class extends x {
|
|
37
37
|
constructor() {
|
|
38
|
-
super(...arguments), this.hasSlotController = new
|
|
38
|
+
super(...arguments), this.hasSlotController = new _(this, "[default]", "prefix", "suffix"), this.hasFocus = !1, this.checked = !1, this.disabled = !1, this.size = "medium", this.pill = !1;
|
|
39
39
|
}
|
|
40
40
|
connectedCallback() {
|
|
41
41
|
super.connectedCallback(), this.setAttribute("role", "presentation");
|
|
@@ -65,13 +65,13 @@ var C = b`
|
|
|
65
65
|
this.input.blur();
|
|
66
66
|
}
|
|
67
67
|
render() {
|
|
68
|
-
return
|
|
68
|
+
return $`
|
|
69
69
|
<div part="base" role="presentation">
|
|
70
70
|
<button
|
|
71
71
|
part="${`button${this.checked ? " button--checked" : ""}`}"
|
|
72
72
|
role="radio"
|
|
73
73
|
aria-checked="${this.checked}"
|
|
74
|
-
class=${
|
|
74
|
+
class=${v({
|
|
75
75
|
button: !0,
|
|
76
76
|
"button--default": !0,
|
|
77
77
|
"button--small": this.size === "small",
|
|
@@ -88,7 +88,7 @@ var C = b`
|
|
|
88
88
|
})}
|
|
89
89
|
aria-disabled=${this.disabled}
|
|
90
90
|
type="button"
|
|
91
|
-
value=${
|
|
91
|
+
value=${w(this.value)}
|
|
92
92
|
tabindex="${this.checked ? "0" : "-1"}"
|
|
93
93
|
@blur=${this.handleBlur}
|
|
94
94
|
@focus=${this.handleFocus}
|
|
@@ -102,15 +102,15 @@ var C = b`
|
|
|
102
102
|
`;
|
|
103
103
|
}
|
|
104
104
|
};
|
|
105
|
-
t.styles =
|
|
105
|
+
t.styles = g;
|
|
106
106
|
e([
|
|
107
|
-
|
|
107
|
+
h(".button")
|
|
108
108
|
], t.prototype, "input", 2);
|
|
109
109
|
e([
|
|
110
|
-
|
|
110
|
+
h(".hidden-input")
|
|
111
111
|
], t.prototype, "hiddenInput", 2);
|
|
112
112
|
e([
|
|
113
|
-
|
|
113
|
+
C()
|
|
114
114
|
], t.prototype, "hasFocus", 2);
|
|
115
115
|
e([
|
|
116
116
|
i({ type: Boolean, reflect: !0 })
|
|
@@ -128,24 +128,27 @@ e([
|
|
|
128
128
|
i({ type: Boolean, reflect: !0 })
|
|
129
129
|
], t.prototype, "pill", 2);
|
|
130
130
|
e([
|
|
131
|
-
|
|
131
|
+
y("disabled", { waitUntilFirstUpdate: !0 })
|
|
132
132
|
], t.prototype, "handleDisabledChange", 1);
|
|
133
133
|
var p = t;
|
|
134
134
|
t.define("sl-radio-button");
|
|
135
|
-
var k = Object.defineProperty,
|
|
136
|
-
for (var o = r > 1 ? void 0 : r ?
|
|
137
|
-
(
|
|
138
|
-
return r && o && k(l,
|
|
135
|
+
var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, c = (s, l, u, r) => {
|
|
136
|
+
for (var o = r > 1 ? void 0 : r ? S(l, u) : l, n = s.length - 1, d; n >= 0; n--)
|
|
137
|
+
(d = s[n]) && (o = (r ? d(l, u, o) : d(o)) || o);
|
|
138
|
+
return r && o && k(l, u, o), o;
|
|
139
139
|
};
|
|
140
|
-
let
|
|
140
|
+
let a = class extends p {
|
|
141
141
|
constructor() {
|
|
142
|
-
super();
|
|
142
|
+
super(), this.testId = "";
|
|
143
143
|
}
|
|
144
144
|
};
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
],
|
|
145
|
+
a.styles = [p.styles];
|
|
146
|
+
c([
|
|
147
|
+
i({ reflect: !0, type: String })
|
|
148
|
+
], a.prototype, "testId", 2);
|
|
149
|
+
a = c([
|
|
150
|
+
b("nve-radio-button")
|
|
151
|
+
], a);
|
|
149
152
|
export {
|
|
150
|
-
|
|
153
|
+
a as default
|
|
151
154
|
};
|
|
@@ -41,6 +41,7 @@ export default class NveRadioGroup extends SlRadioGroup {
|
|
|
41
41
|
/**
|
|
42
42
|
* Hjelpe variabel som sjekker om radio gruppe er allerede invalid
|
|
43
43
|
*/
|
|
44
|
+
testId: string;
|
|
44
45
|
private alreadyInvalid;
|
|
45
46
|
/**
|
|
46
47
|
* Ikke mulig å få taket i errorMessage til superklassen (SlRadioGroup), og den trengs for å vise feilmelding under radio gruppe.
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { n, t as M } from "../../chunks/property.js";
|
|
2
2
|
import { r as p } from "../../chunks/state.js";
|
|
3
|
-
import { f as
|
|
3
|
+
import { f as S } from "../../chunks/chunk.SI4ACBFK.js";
|
|
4
4
|
import { c as R, b as l, S as w } from "../../chunks/chunk.JS655M6J.js";
|
|
5
5
|
import { i as E, x as g } from "../../chunks/lit-element.js";
|
|
6
|
-
import { F as
|
|
6
|
+
import { F as A, c as $, a as q, v as I } from "../../chunks/chunk.UEQZEZFU.js";
|
|
7
7
|
import { e as v } from "../../chunks/query.js";
|
|
8
|
-
import { H as
|
|
8
|
+
import { H as L } from "../../chunks/chunk.NYIIDP5N.js";
|
|
9
9
|
import { w as V } from "../../chunks/chunk.Q6ASPMKT.js";
|
|
10
10
|
import { e as B } from "../../chunks/class-map.js";
|
|
11
11
|
import G from "./nve-radio-group.styles.js";
|
|
12
12
|
import { t as _ } from "../../chunks/updateInvalidProperty.js";
|
|
13
13
|
var O = E`
|
|
14
14
|
${R}
|
|
15
|
-
${
|
|
15
|
+
${S}
|
|
16
16
|
|
|
17
17
|
:host {
|
|
18
18
|
display: block;
|
|
@@ -117,12 +117,12 @@ function f(t) {
|
|
|
117
117
|
}
|
|
118
118
|
var a = class extends w {
|
|
119
119
|
constructor() {
|
|
120
|
-
super(...arguments), this.formControlController = new
|
|
120
|
+
super(...arguments), this.formControlController = new A(this), this.hasSlotController = new L(this, "help-text", "label"), this.customValidityMessage = "", this.hasButtonGroup = !1, this.errorMessage = "", this.defaultValue = "", this.label = "", this.helpText = "", this.name = "option", this.value = "", this.size = "medium", this.form = "", this.required = !1;
|
|
121
121
|
}
|
|
122
122
|
/** Gets the validity state object */
|
|
123
123
|
get validity() {
|
|
124
124
|
const t = this.required && !this.value;
|
|
125
|
-
return this.customValidityMessage !== "" ? $ : t ? q :
|
|
125
|
+
return this.customValidityMessage !== "" ? $ : t ? q : I;
|
|
126
126
|
}
|
|
127
127
|
/** Gets the validation message */
|
|
128
128
|
get validationMessage() {
|
|
@@ -146,11 +146,11 @@ var a = class extends w {
|
|
|
146
146
|
var e;
|
|
147
147
|
if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(t.key))
|
|
148
148
|
return;
|
|
149
|
-
const s = this.getAllRadios().filter((
|
|
149
|
+
const s = this.getAllRadios().filter((h) => !h.disabled), o = (e = s.find((h) => h.checked)) != null ? e : s[0], i = t.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(t.key) ? -1 : 1, u = this.value;
|
|
150
150
|
let r = s.indexOf(o) + i;
|
|
151
|
-
r < 0 && (r = s.length - 1), r > s.length - 1 && (r = 0), this.getAllRadios().forEach((
|
|
152
|
-
|
|
153
|
-
}), this.value = s[r].value, s[r].checked = !0, this.hasButtonGroup ? s[r].shadowRoot.querySelector("button").focus() : (s[r].tabIndex = 0, s[r].focus()), this.value !==
|
|
151
|
+
r < 0 && (r = s.length - 1), r > s.length - 1 && (r = 0), this.getAllRadios().forEach((h) => {
|
|
152
|
+
h.checked = !1, this.hasButtonGroup || (h.tabIndex = -1);
|
|
153
|
+
}), this.value = s[r].value, s[r].checked = !0, this.hasButtonGroup ? s[r].shadowRoot.querySelector("button").focus() : (s[r].tabIndex = 0, s[r].focus()), this.value !== u && (this.emit("sl-change"), this.emit("sl-input")), t.preventDefault();
|
|
154
154
|
}
|
|
155
155
|
handleLabelClick() {
|
|
156
156
|
const t = this.getAllRadios(), s = t.find((o) => o.checked) || t[0];
|
|
@@ -329,26 +329,26 @@ function D(t, e) {
|
|
|
329
329
|
...e
|
|
330
330
|
};
|
|
331
331
|
return (o, i) => {
|
|
332
|
-
const { update:
|
|
333
|
-
o.update = function(
|
|
332
|
+
const { update: u } = o, r = Array.isArray(t) ? t : [t];
|
|
333
|
+
o.update = function(h) {
|
|
334
334
|
r.forEach((x) => {
|
|
335
335
|
const b = x;
|
|
336
|
-
if (
|
|
337
|
-
const y =
|
|
336
|
+
if (h.has(b)) {
|
|
337
|
+
const y = h.get(b), C = this[b];
|
|
338
338
|
y !== C && (!s.waitUntilFirstUpdate || this.hasUpdated) && this[i](y, C);
|
|
339
339
|
}
|
|
340
|
-
}),
|
|
340
|
+
}), u.call(this, h);
|
|
341
341
|
};
|
|
342
342
|
};
|
|
343
343
|
}
|
|
344
344
|
var T = Object.defineProperty, U = Object.getOwnPropertyDescriptor, c = (t, e, s, o) => {
|
|
345
|
-
for (var i = o > 1 ? void 0 : o ? U(e, s) : e,
|
|
346
|
-
(r = t[
|
|
345
|
+
for (var i = o > 1 ? void 0 : o ? U(e, s) : e, u = t.length - 1, r; u >= 0; u--)
|
|
346
|
+
(r = t[u]) && (i = (o ? r(e, s, i) : r(i)) || i);
|
|
347
347
|
return o && i && T(e, s, i), i;
|
|
348
348
|
};
|
|
349
|
-
let
|
|
349
|
+
let d = class extends k {
|
|
350
350
|
constructor() {
|
|
351
|
-
super(), this.orientation = "vertical", this.disabled = !1, this.requiredLabel = "*Obligatorisk", this.alreadyInvalid = !1, this.errorMessageCopy = "", this.getAllRadios = function() {
|
|
351
|
+
super(), this.orientation = "vertical", this.disabled = !1, this.requiredLabel = "*Obligatorisk", this.testId = "", this.alreadyInvalid = !1, this.errorMessageCopy = "", this.getAllRadios = function() {
|
|
352
352
|
return [
|
|
353
353
|
// @ts-expect-error - bruk av this i private metode
|
|
354
354
|
...this.querySelectorAll(
|
|
@@ -360,7 +360,7 @@ let h = class extends k {
|
|
|
360
360
|
if (!e || e.disabled)
|
|
361
361
|
return;
|
|
362
362
|
const i = e.shadowRoot.querySelectorAll("span[part='base']");
|
|
363
|
-
i.length > 0 && i[0].focus(), this.value = e.value, s.forEach((
|
|
363
|
+
i.length > 0 && i[0].focus(), this.value = e.value, s.forEach((u) => u.checked = u === e), this.value !== o && (this.emit("sl-change"), this.emit("sl-input"));
|
|
364
364
|
}, this.syncRadioElements = async function() {
|
|
365
365
|
var e, s, o;
|
|
366
366
|
const t = this.getAllRadios();
|
|
@@ -422,31 +422,34 @@ let h = class extends k {
|
|
|
422
422
|
this.errorMessageCopy = "", _(t, !1, "data-invalid"), this.setCustomValidity(""), this.style.removeProperty("--radio-group-error-message");
|
|
423
423
|
}
|
|
424
424
|
};
|
|
425
|
-
|
|
425
|
+
d.styles = [k.styles, G];
|
|
426
426
|
c([
|
|
427
427
|
n({ reflect: !0 })
|
|
428
|
-
],
|
|
428
|
+
], d.prototype, "orientation", 2);
|
|
429
429
|
c([
|
|
430
430
|
n({ type: Boolean, reflect: !0 })
|
|
431
|
-
],
|
|
431
|
+
], d.prototype, "disabled", 2);
|
|
432
432
|
c([
|
|
433
433
|
n({ reflect: !0 })
|
|
434
|
-
],
|
|
434
|
+
], d.prototype, "errorMessage", 2);
|
|
435
435
|
c([
|
|
436
436
|
n()
|
|
437
|
-
],
|
|
437
|
+
], d.prototype, "requiredLabel", 2);
|
|
438
|
+
c([
|
|
439
|
+
n({ reflect: !0, type: String })
|
|
440
|
+
], d.prototype, "testId", 2);
|
|
438
441
|
c([
|
|
439
442
|
p()
|
|
440
|
-
],
|
|
443
|
+
], d.prototype, "alreadyInvalid", 2);
|
|
441
444
|
c([
|
|
442
445
|
p()
|
|
443
|
-
],
|
|
446
|
+
], d.prototype, "errorMessageCopy", 2);
|
|
444
447
|
c([
|
|
445
448
|
D("disabled")
|
|
446
|
-
],
|
|
447
|
-
|
|
449
|
+
], d.prototype, "connectedCallback", 1);
|
|
450
|
+
d = c([
|
|
448
451
|
M("nve-radio-group")
|
|
449
|
-
],
|
|
452
|
+
], d);
|
|
450
453
|
export {
|
|
451
|
-
|
|
454
|
+
d as default
|
|
452
455
|
};
|
package/css/nve.css
CHANGED
package/css/nve_dark.css
CHANGED
|
@@ -1,112 +1,115 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 11 Jul 2024 08:53:45 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
@import './global.css';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
7
|
+
@media not print {
|
|
8
|
+
:root.darkmode {
|
|
9
|
+
--dangerlevel-foreground-subtle-level5: var(--grey-950);
|
|
10
|
+
--dangerlevel-foreground-subtle-level4: var(--grey-950);
|
|
11
|
+
--dangerlevel-foreground-subtle-level3: var(--grey-950);
|
|
12
|
+
--dangerlevel-foreground-subtle-level2: var(--grey-950);
|
|
13
|
+
--dangerlevel-foreground-subtle-level1: var(--grey-950);
|
|
14
|
+
--dangerlevel-foreground-mute-level5: var(--grey-950);
|
|
15
|
+
--dangerlevel-foreground-mute-level4: var(--grey-950);
|
|
16
|
+
--dangerlevel-foreground-mute-level3: var(--grey-950);
|
|
17
|
+
--dangerlevel-foreground-mute-level2: var(--grey-950);
|
|
18
|
+
--dangerlevel-foreground-mute-level1: var(--grey-950);
|
|
19
|
+
--dangerlevel-foreground-default-level5: var(--grey-000);
|
|
20
|
+
--dangerlevel-foreground-default-level4: var(--grey-950);
|
|
21
|
+
--dangerlevel-foreground-default-level3: var(--grey-950);
|
|
22
|
+
--dangerlevel-foreground-default-level2: var(--grey-950);
|
|
23
|
+
--dangerlevel-foreground-default-level1: var(--grey-950);
|
|
24
|
+
--dangerlevel-background-default-level5: var(--grey-950);
|
|
25
|
+
--dangerlevel-background-default-level4: var(--red-500);
|
|
26
|
+
--dangerlevel-background-default-level3: var(--orange-400);
|
|
27
|
+
--dangerlevel-background-default-level2: var(--yellow-500);
|
|
28
|
+
--dangerlevel-background-default-level1: var(--green-500);
|
|
29
|
+
--dangerlevel-background-subtle-level5: var(--grey-150);
|
|
30
|
+
--dangerlevel-background-subtle-level4: var(--red-000);
|
|
31
|
+
--dangerlevel-background-subtle-level3: var(--orange-050);
|
|
32
|
+
--dangerlevel-background-subtle-level2: var(--yellow-100);
|
|
33
|
+
--dangerlevel-background-subtle-level1: var(--green-100);
|
|
34
|
+
--dangerlevel-background-mute-level5: var(--grey-200);
|
|
35
|
+
--dangerlevel-background-mute-level4: var(--red-050);
|
|
36
|
+
--dangerlevel-background-mute-level3: var(--orange-150);
|
|
37
|
+
--dangerlevel-background-mute-level2: var(--yellow-200);
|
|
38
|
+
--dangerlevel-background-mute-level1: var(--green-150);
|
|
39
|
+
--feedback-foreground-emphasized-neutral: var(--grey-950);
|
|
40
|
+
--feedback-foreground-emphasized-success: var(--grey-000);
|
|
41
|
+
--feedback-foreground-emphasized-warning: var(--grey-950);
|
|
42
|
+
--feedback-foreground-emphasized-error: var(--grey-000);
|
|
43
|
+
--feedback-foreground-emphasized-info: var(--grey-000);
|
|
44
|
+
--feedback-foreground-subtle-neutral: var(--grey-000);
|
|
45
|
+
--feedback-foreground-subtle-success: var(--grey-000);
|
|
46
|
+
--feedback-foreground-subtle-warning: var(--grey-000);
|
|
47
|
+
--feedback-foreground-subtle-error: var(--grey-000);
|
|
48
|
+
--feedback-foreground-subtle-info: var(--grey-000);
|
|
49
|
+
--feedback-foreground-default-neutral: var(--grey-000);
|
|
50
|
+
--feedback-foreground-default-success: var(--grey-000);
|
|
51
|
+
--feedback-foreground-default-warning: var(--grey-000);
|
|
52
|
+
--feedback-foreground-default-error: var(--grey-000);
|
|
53
|
+
--feedback-foreground-default-info: var(--grey-000);
|
|
54
|
+
--feedback-background-emphasized-neutral: var(--grey-150);
|
|
55
|
+
--feedback-background-emphasized-success: var(--green-800);
|
|
56
|
+
--feedback-background-emphasized-warning: var(--yellow-500);
|
|
57
|
+
--feedback-background-emphasized-error: var(--red-700);
|
|
58
|
+
--feedback-background-emphasized-info: var(--blue-700);
|
|
59
|
+
--feedback-background-subtle-neutral: var(--grey-850);
|
|
60
|
+
--feedback-background-subtle-success: var(--green-999);
|
|
61
|
+
--feedback-background-subtle-warning: var(--yellow-999);
|
|
62
|
+
--feedback-background-subtle-error: var(--red-999);
|
|
63
|
+
--feedback-background-subtle-info: var(--blue-999);
|
|
64
|
+
--feedback-background-default-neutral: var(--grey-800);
|
|
65
|
+
--feedback-background-default-success: var(--green-950);
|
|
66
|
+
--feedback-background-default-warning: var(--yellow-950);
|
|
67
|
+
--feedback-background-default-error: var(--red-950);
|
|
68
|
+
--feedback-background-default-info: var(--blue-950);
|
|
69
|
+
--interactive-links-visited: var(--grey-200);
|
|
70
|
+
--interactive-links-focus: var(--blue-500);
|
|
71
|
+
--interactive-links-hover: var(--grey-000);
|
|
72
|
+
--interactive-links-default: var(--blue-400);
|
|
73
|
+
--interactive-ghost-border-focus: var(--blue-500);
|
|
74
|
+
--interactive-ghost-foreground-disabled: var(--grey-000);
|
|
75
|
+
--interactive-ghost-foreground-hover: var(--grey-000);
|
|
76
|
+
--interactive-ghost-foreground-default: var(--grey-000);
|
|
77
|
+
--interactive-ghost-background-hover: var(--grey-700);
|
|
78
|
+
--interactive-outlined-border-disabled: var(--grey-600);
|
|
79
|
+
--interactive-outlined-border-focus: var(--blue-500);
|
|
80
|
+
--interactive-outlined-border-hover: var(--grey-000);
|
|
81
|
+
--interactive-outlined-border-default: var(--grey-600);
|
|
82
|
+
--interactive-outlined-foreground-disabled: var(--grey-000);
|
|
83
|
+
--interactive-outlined-foreground-hover: var(--grey-000);
|
|
84
|
+
--interactive-outlined-foreground-default: var(--grey-000);
|
|
85
|
+
--interactive-secondary-border-focus: var(--blue-500);
|
|
86
|
+
--interactive-secondary-foreground-disabled: var(--grey-000);
|
|
87
|
+
--interactive-secondary-foreground-hover: var(--grey-000);
|
|
88
|
+
--interactive-secondary-foreground-default: var(--grey-000);
|
|
89
|
+
--interactive-secondary-background-disabled: var(--grey-700);
|
|
90
|
+
--interactive-secondary-background-hover: var(--grey-600);
|
|
91
|
+
--interactive-secondary-background-default: var(--grey-700);
|
|
92
|
+
--interactive-primary-foreground-border-focus: var(--blue-500);
|
|
93
|
+
--interactive-primary-foreground-disabled: var(--grey-950);
|
|
94
|
+
--interactive-primary-foreground-hover: var(--grey-950);
|
|
95
|
+
--interactive-primary-foreground-default: var(--grey-950);
|
|
96
|
+
--interactive-primary-background-disabled: var(--grey-000);
|
|
97
|
+
--interactive-primary-background-hover: var(--grey-150);
|
|
98
|
+
--interactive-primary-background-default: var(--grey-000);
|
|
99
|
+
--neutrals-border-disabled: var(--grey-500);
|
|
100
|
+
--neutrals-border-subtle: var(--grey-800);
|
|
101
|
+
--neutrals-border-mute: var(--grey-950);
|
|
102
|
+
--neutrals-border-default: var(--grey-500);
|
|
103
|
+
--neutrals-foreground-colored: var(--nve-brand-000);
|
|
104
|
+
--neutrals-foreground-subtle: var(--grey-200);
|
|
105
|
+
--neutrals-foreground-primary: var(--grey-000);
|
|
106
|
+
--neutrals-background-canvas: var(--grey-850);
|
|
107
|
+
--neutrals-background-secondary: var(--grey-700);
|
|
108
|
+
--neutrals-background-primary: var(--grey-950);
|
|
109
|
+
--neutrals-background-primary-contrast: var(--grey-850);
|
|
110
|
+
--brand-deep: var(--nve-brand-700);
|
|
111
|
+
--brand-light: var(--nve-brand-500);
|
|
112
|
+
--brand-primary: var(--nve-brand-300);
|
|
113
|
+
}
|
|
114
|
+
|
|
112
115
|
}
|
package/css/varsom.css
CHANGED
package/css/varsom_dark.css
CHANGED
|
@@ -1,112 +1,115 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 11 Jul 2024 08:53:49 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
@import './global.css';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
7
|
+
@media not print {
|
|
8
|
+
:root.darkmode {
|
|
9
|
+
--dangerlevel-foreground-subtle-level5: var(--varsom-blue-999);
|
|
10
|
+
--dangerlevel-foreground-subtle-level4: var(--varsom-blue-999);
|
|
11
|
+
--dangerlevel-foreground-subtle-level3: var(--varsom-blue-999);
|
|
12
|
+
--dangerlevel-foreground-subtle-level2: var(--varsom-blue-999);
|
|
13
|
+
--dangerlevel-foreground-subtle-level1: var(--varsom-blue-999);
|
|
14
|
+
--dangerlevel-foreground-mute-level5: var(--varsom-blue-999);
|
|
15
|
+
--dangerlevel-foreground-mute-level4: var(--varsom-blue-999);
|
|
16
|
+
--dangerlevel-foreground-mute-level3: var(--varsom-blue-999);
|
|
17
|
+
--dangerlevel-foreground-mute-level2: var(--varsom-blue-999);
|
|
18
|
+
--dangerlevel-foreground-mute-level1: var(--varsom-blue-999);
|
|
19
|
+
--dangerlevel-foreground-default-level5: var(--grey-000);
|
|
20
|
+
--dangerlevel-foreground-default-level4: var(--varsom-blue-999);
|
|
21
|
+
--dangerlevel-foreground-default-level3: var(--varsom-blue-999);
|
|
22
|
+
--dangerlevel-foreground-default-level2: var(--varsom-blue-999);
|
|
23
|
+
--dangerlevel-foreground-default-level1: var(--varsom-blue-999);
|
|
24
|
+
--dangerlevel-background-default-level5: var(--grey-950);
|
|
25
|
+
--dangerlevel-background-default-level4: var(--red-500);
|
|
26
|
+
--dangerlevel-background-default-level3: var(--orange-400);
|
|
27
|
+
--dangerlevel-background-default-level2: var(--yellow-500);
|
|
28
|
+
--dangerlevel-background-default-level1: var(--green-500);
|
|
29
|
+
--dangerlevel-background-subtle-level5: var(--grey-150);
|
|
30
|
+
--dangerlevel-background-subtle-level4: var(--red-000);
|
|
31
|
+
--dangerlevel-background-subtle-level3: var(--orange-050);
|
|
32
|
+
--dangerlevel-background-subtle-level2: var(--yellow-100);
|
|
33
|
+
--dangerlevel-background-subtle-level1: var(--green-100);
|
|
34
|
+
--dangerlevel-background-mute-level5: var(--grey-200);
|
|
35
|
+
--dangerlevel-background-mute-level4: var(--red-050);
|
|
36
|
+
--dangerlevel-background-mute-level3: var(--orange-150);
|
|
37
|
+
--dangerlevel-background-mute-level2: var(--yellow-200);
|
|
38
|
+
--dangerlevel-background-mute-level1: var(--green-150);
|
|
39
|
+
--feedback-foreground-emphasized-neutral: var(--varsom-blue-999);
|
|
40
|
+
--feedback-foreground-emphasized-success: var(--grey-000);
|
|
41
|
+
--feedback-foreground-emphasized-warning: var(--varsom-blue-999);
|
|
42
|
+
--feedback-foreground-emphasized-error: var(--grey-000);
|
|
43
|
+
--feedback-foreground-emphasized-info: var(--grey-000);
|
|
44
|
+
--feedback-foreground-subtle-neutral: var(--grey-000);
|
|
45
|
+
--feedback-foreground-subtle-success: var(--grey-000);
|
|
46
|
+
--feedback-foreground-subtle-warning: var(--grey-000);
|
|
47
|
+
--feedback-foreground-subtle-error: var(--grey-000);
|
|
48
|
+
--feedback-foreground-subtle-info: var(--grey-000);
|
|
49
|
+
--feedback-foreground-default-neutral: var(--grey-000);
|
|
50
|
+
--feedback-foreground-default-success: var(--grey-000);
|
|
51
|
+
--feedback-foreground-default-warning: var(--grey-000);
|
|
52
|
+
--feedback-foreground-default-error: var(--grey-000);
|
|
53
|
+
--feedback-foreground-default-info: var(--grey-000);
|
|
54
|
+
--feedback-background-emphasized-neutral: var(--grey-150);
|
|
55
|
+
--feedback-background-emphasized-success: var(--green-800);
|
|
56
|
+
--feedback-background-emphasized-warning: var(--yellow-500);
|
|
57
|
+
--feedback-background-emphasized-error: var(--red-700);
|
|
58
|
+
--feedback-background-emphasized-info: var(--blue-700);
|
|
59
|
+
--feedback-background-subtle-neutral: var(--grey-850);
|
|
60
|
+
--feedback-background-subtle-success: var(--green-999);
|
|
61
|
+
--feedback-background-subtle-warning: var(--yellow-999);
|
|
62
|
+
--feedback-background-subtle-error: var(--red-999);
|
|
63
|
+
--feedback-background-subtle-info: var(--blue-999);
|
|
64
|
+
--feedback-background-default-neutral: var(--grey-800);
|
|
65
|
+
--feedback-background-default-success: var(--green-950);
|
|
66
|
+
--feedback-background-default-warning: var(--yellow-950);
|
|
67
|
+
--feedback-background-default-error: var(--red-950);
|
|
68
|
+
--feedback-background-default-info: var(--blue-950);
|
|
69
|
+
--interactive-links-visited: var(--grey-500);
|
|
70
|
+
--interactive-links-focus: var(--blue-500);
|
|
71
|
+
--interactive-links-hover: var(--grey-000);
|
|
72
|
+
--interactive-links-default: var(--blue-400);
|
|
73
|
+
--interactive-ghost-border-focus: var(--blue-500);
|
|
74
|
+
--interactive-ghost-foreground-disabled: var(--grey-000);
|
|
75
|
+
--interactive-ghost-foreground-hover: var(--grey-000);
|
|
76
|
+
--interactive-ghost-foreground-default: var(--grey-000);
|
|
77
|
+
--interactive-ghost-background-hover: var(--varsom-blue-800);
|
|
78
|
+
--interactive-outlined-border-disabled: var(--varsom-blue-100);
|
|
79
|
+
--interactive-outlined-border-focus: var(--blue-500);
|
|
80
|
+
--interactive-outlined-border-hover: var(--grey-000);
|
|
81
|
+
--interactive-outlined-border-default: var(--varsom-blue-500);
|
|
82
|
+
--interactive-outlined-foreground-disabled: var(--grey-000);
|
|
83
|
+
--interactive-outlined-foreground-hover: var(--grey-000);
|
|
84
|
+
--interactive-outlined-foreground-default: var(--grey-000);
|
|
85
|
+
--interactive-secondary-border-focus: var(--blue-500);
|
|
86
|
+
--interactive-secondary-foreground-disabled: var(--grey-000);
|
|
87
|
+
--interactive-secondary-foreground-hover: var(--grey-000);
|
|
88
|
+
--interactive-secondary-foreground-default: var(--grey-000);
|
|
89
|
+
--interactive-secondary-background-disabled: var(--varsom-blue-800);
|
|
90
|
+
--interactive-secondary-background-hover: var(--varsom-blue-600);
|
|
91
|
+
--interactive-secondary-background-default: var(--varsom-blue-800);
|
|
92
|
+
--interactive-primary-foreground-border-focus: var(--blue-500);
|
|
93
|
+
--interactive-primary-foreground-disabled: var(--varsom-blue-999);
|
|
94
|
+
--interactive-primary-foreground-hover: var(--varsom-blue-999);
|
|
95
|
+
--interactive-primary-foreground-default: var(--varsom-blue-999);
|
|
96
|
+
--interactive-primary-background-disabled: var(--varsom-blue-000);
|
|
97
|
+
--interactive-primary-background-hover: var(--varsom-blue-050);
|
|
98
|
+
--interactive-primary-background-default: var(--varsom-blue-000);
|
|
99
|
+
--neutrals-border-disabled: var(--grey-500);
|
|
100
|
+
--neutrals-border-subtle: var(--varsom-blue-800);
|
|
101
|
+
--neutrals-border-mute: var(--varsom-blue-999);
|
|
102
|
+
--neutrals-border-default: var(--grey-500);
|
|
103
|
+
--neutrals-foreground-colored: var(--varsom-blue-100);
|
|
104
|
+
--neutrals-foreground-subtle: var(--grey-200);
|
|
105
|
+
--neutrals-foreground-primary: var(--grey-000);
|
|
106
|
+
--neutrals-background-canvas: var(--varsom-blue-950);
|
|
107
|
+
--neutrals-background-secondary: var(--varsom-blue-800);
|
|
108
|
+
--neutrals-background-primary: var(--varsom-blue-999);
|
|
109
|
+
--neutrals-background-primary-contrast: var(--varsom-blue-950);
|
|
110
|
+
--brand-deep: var(--varsom-brand-600);
|
|
111
|
+
--brand-light: var(--varsom-brand-000);
|
|
112
|
+
--brand-primary: var(--varsom-brand-500);
|
|
113
|
+
}
|
|
114
|
+
|
|
112
115
|
}
|