@veracity/vui-poc 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +584 -0
  2. package/dist/index.mjs +653 -0
  3. package/package.json +47 -0
  4. package/src/color-dark.css +185 -0
  5. package/src/color-light.css +185 -0
  6. package/src/color-primitives.css +318 -0
  7. package/src/default.css +184 -0
  8. package/src/styles.css +323 -0
package/package.json ADDED
@@ -0,0 +1,47 @@
1
+ {
2
+ "name": "@veracity/vui-poc",
3
+ "version": "0.1.0",
4
+ "publishConfig": {
5
+ "access": "public"
6
+ },
7
+ "files": [
8
+ "dist",
9
+ "src/*.css"
10
+ ],
11
+ "type": "module",
12
+ "sideEffects": [
13
+ "./src/styles.css"
14
+ ],
15
+ "main": "./dist/index.mjs",
16
+ "module": "./dist/index.mjs",
17
+ "types": "./dist/index.d.mts",
18
+ "exports": {
19
+ ".": {
20
+ "types": "./dist/index.d.mts",
21
+ "import": "./dist/index.mjs",
22
+ "default": "./dist/index.mjs"
23
+ },
24
+ "./styles.css": "./src/styles.css"
25
+ },
26
+ "scripts": {
27
+ "build": "tsdown src/index.ts --format esm --dts --clean --out-dir dist --publint",
28
+ "lint": "pnpm exec oxlint .",
29
+ "format": "pnpm exec oxfmt .",
30
+ "typecheck": "tsc -p tsconfig.json --noEmit"
31
+ },
32
+ "dependencies": {
33
+ "clsx": "^2.1.1",
34
+ "react-aria-components": "^1.17.0"
35
+ },
36
+ "devDependencies": {
37
+ "@arethetypeswrong/core": "^0.18.2",
38
+ "@types/react": "^19.2.14",
39
+ "publint": "^0.3.21",
40
+ "tsdown": "^0.21.10",
41
+ "typescript": "^6.0.3"
42
+ },
43
+ "peerDependencies": {
44
+ "react": ">=18.2.0",
45
+ "react-dom": ">=18.2.0"
46
+ }
47
+ }
package/src/color-dark.css ADDED
@@ -0,0 +1,185 @@
1
+ :root[data-theme="dark"],
2
+ :host([data-theme="dark"]) {
3
+ --vui-action-ai-solid: var(--color-digi-green-78);
4
+ --vui-action-ai-solid-hover: var(--color-digi-green-70);
5
+ --vui-action-ai-solid-inverse: var(--color-dark-blue-18);
6
+ --vui-action-ai-solid-pressed: var(--color-digi-green-85);
7
+ --vui-action-ai-sublte: var(--vui-gradient-ai-1);
8
+ --vui-action-ai-subtle-hover: var(--vui-gradient-ai-1);
9
+ --vui-action-ai-subtle-inverse: var(--color-white);
10
+ --vui-action-ai-subtle-pressed: var(--vui-gradient-ai-1);
11
+ --vui-action-blue-solid: var(--color-sky-blue-40);
12
+ --vui-action-blue-solid-hover: var(--color-sky-blue-50);
13
+ --vui-action-blue-solid-inverse: var(--color-white);
14
+ --vui-action-blue-solid-pressed: var(--color-sky-blue-45);
15
+ --vui-action-blue-subtle: var(--color-sky-blue-15);
16
+ --vui-action-blue-subtle-hover: var(--color-sky-blue-25);
17
+ --vui-action-blue-subtle-inverse: var(--color-white);
18
+ --vui-action-blue-subtle-pressed: var(--color-sky-blue-20);
19
+ --vui-action-brand-solid: var(--color-digi-green-78);
20
+ --vui-action-brand-solid-hover: var(--color-digi-green-70);
21
+ --vui-action-brand-solid-inverse: var(--color-dark-blue-18);
22
+ --vui-action-brand-solid-pressed: var(--color-digi-green-85);
23
+ --vui-action-brand-subtle: var(--color-opacity-light-10);
24
+ --vui-action-brand-subtle-hover: var(--color-opacity-light-20);
25
+ --vui-action-brand-subtle-inverse: var(--color-digi-green-78);
26
+ --vui-action-brand-subtle-pressed: var(--color-opacity-light-15);
27
+ --vui-action-contrast-solid: var(--color-digi-green-78);
28
+ --vui-action-contrast-solid-hover: var(--color-digi-green-70);
29
+ --vui-action-contrast-solid-inverse: var(--color-dark-blue-18);
30
+ --vui-action-contrast-solid-pressed: var(--color-digi-green-85);
31
+ --vui-action-contrast-subtle: var(--color-opacity-light-10);
32
+ --vui-action-contrast-subtle-hover: var(--color-opacity-light-20);
33
+ --vui-action-contrast-subtle-inverse: var(--color-digi-green-78);
34
+ --vui-action-contrast-subtle-pressed: var(--color-opacity-light-15);
35
+ --vui-action-danger-solid: var(--color-energy-red-45);
36
+ --vui-action-danger-solid-hover: var(--color-energy-red-35);
37
+ --vui-action-danger-solid-inverse: var(--color-white);
38
+ --vui-action-danger-solid-pressed: var(--color-energy-red-30);
39
+ --vui-action-danger-subtle: var(--color-energy-red-15);
40
+ --vui-action-danger-subtle-hover: var(--color-energy-red-25);
41
+ --vui-action-danger-subtle-inverse: var(--color-white);
42
+ --vui-action-danger-subtle-pressed: var(--color-energy-red-20);
43
+ --vui-action-disabled-background: var(--color-sandstone-30);
44
+ --vui-action-disabled-foreground: var(--color-sandstone-75);
45
+ --vui-action-eucalyptus-solid: var(--color-eucalyptus-30);
46
+ --vui-action-eucalyptus-solid-hover: var(--color-eucalyptus-41);
47
+ --vui-action-eucalyptus-solid-inverse: var(--color-white);
48
+ --vui-action-eucalyptus-solid-pressed: var(--color-eucalyptus-35);
49
+ --vui-action-eucalyptus-subtle: var(--color-eucalyptus-15);
50
+ --vui-action-eucalyptus-subtle-hover: var(--color-eucalyptus-25);
51
+ --vui-action-eucalyptus-subtle-inverse: var(--color-white);
52
+ --vui-action-eucalyptus-subtle-pressed: var(--color-eucalyptus-20);
53
+ --vui-action-generic-hover: var(--color-opacity-light-20);
54
+ --vui-action-generic-pressed: var(--color-opacity-light-15);
55
+ --vui-action-grey-solid: var(--color-sandstone-40);
56
+ --vui-action-grey-solid-hover: var(--color-sandstone-50);
57
+ --vui-action-grey-solid-inverse: var(--color-white);
58
+ --vui-action-grey-solid-pressed: var(--color-sandstone-45);
59
+ --vui-action-grey-subtle: var(--color-sandstone-25);
60
+ --vui-action-grey-subtle-hover: var(--color-sandstone-35);
61
+ --vui-action-grey-subtle-inverse: var(--color-white);
62
+ --vui-action-grey-subtle-pressed: var(--color-sandstone-30);
63
+ --vui-action-lavender-solid: var(--color-lavender-60);
64
+ --vui-action-lavender-solid-hover: var(--color-lavender-70);
65
+ --vui-action-lavender-solid-inverse: var(--color-white);
66
+ --vui-action-lavender-solid-pressed: var(--color-lavender-65);
67
+ --vui-action-lavender-subtle: var(--color-lavender-15);
68
+ --vui-action-lavender-subtle-hover: var(--color-lavender-25);
69
+ --vui-action-lavender-subtle-inverse: var(--color-white);
70
+ --vui-action-lavender-subtle-pressed: var(--color-lavender-20);
71
+ --vui-action-success-solid: var(--color-land-green-41);
72
+ --vui-action-success-solid-hover: var(--color-land-green-35);
73
+ --vui-action-success-solid-inverse: var(--color-white);
74
+ --vui-action-success-solid-pressed: var(--color-land-green-30);
75
+ --vui-action-success-subtle: var(--color-land-green-15);
76
+ --vui-action-success-subtle-hover: var(--color-land-green-25);
77
+ --vui-action-success-subtle-inverse: var(--color-white);
78
+ --vui-action-success-subtle-pressed: var(--color-land-green-20);
79
+ --vui-action-terracotta-solid: var(--color-terracotta-30);
80
+ --vui-action-terracotta-solid-hover: var(--color-terracotta-40);
81
+ --vui-action-terracotta-solid-inverse: var(--color-white);
82
+ --vui-action-terracotta-solid-pressed: var(--color-terracotta-35);
83
+ --vui-action-terracotta-subtle: var(--color-terracotta-15);
84
+ --vui-action-terracotta-subtle-hover: var(--color-terracotta-25);
85
+ --vui-action-terracotta-subtle-inverse: var(--color-white);
86
+ --vui-action-terracotta-subtle-pressed: var(--color-terracotta-20);
87
+ --vui-action-yellow-solid: var(--color-sunflower-45);
88
+ --vui-action-yellow-solid-hover: var(--color-sunflower-55);
89
+ --vui-action-yellow-solid-inverse: var(--color-sunflower-15);
90
+ --vui-action-yellow-solid-pressed: var(--color-sunflower-50);
91
+ --vui-action-yellow-sublte-inverse: var(--color-white);
92
+ --vui-action-yellow-subtle: var(--color-sunflower-15);
93
+ --vui-action-yellow-subtle-hover: var(--color-sunflower-25);
94
+ --vui-action-yellow-subtle-pressed: var(--color-sunflower-20);
95
+ --vui-background-cold: var(--color-dark-blue-5);
96
+ --vui-background-contrast: var(--color-black);
97
+ --vui-background-default: var(--color-sandstone-5);
98
+ --vui-background-elevated: var(--color-sandstone-15);
99
+ --vui-background-muted: var(--color-sandstone-12);
100
+ --vui-background-subtle: var(--color-sandstone-10);
101
+ --vui-background-warm: var(--color-earth-5);
102
+ --vui-control-background-default: var(--color-opacity-dark-50);
103
+ --vui-control-background-disabled: var(--color-opacity-dark-90);
104
+ --vui-control-background-off: var(--color-opacity-light-25);
105
+ --vui-control-background-on: var(--color-digi-green-78);
106
+ --vui-control-border-default: var(--color-sandstone-30);
107
+ --vui-control-border-hover: var(--color-sandstone-90);
108
+ --vui-control-foreground-default: var(--color-white);
109
+ --vui-control-foreground-disabled: var(--color-sandstone-50);
110
+ --vui-control-foreground-off: var(--color-dark-blue-18);
111
+ --vui-control-foreground-on: var(--color-dark-blue-18);
112
+ --vui-control-helper: var(--color-sandstone-85);
113
+ --vui-control-label: var(--color-white);
114
+ --vui-control-placeholder: var(--color-sandstone-55);
115
+ --vui-data-black: var(--color-black);
116
+ --vui-data-cyan: var(--color-cyan-60);
117
+ --vui-data-darkblue: var(--color-sea-blue-70);
118
+ --vui-data-earth: var(--color-earth-75);
119
+ --vui-data-eucalyptus: var(--color-eucalyptus-80);
120
+ --vui-data-landgreen: var(--color-land-green-60);
121
+ --vui-data-lavender: var(--color-lavender-85);
122
+ --vui-data-orange: var(--color-terracotta-70);
123
+ --vui-data-pine: var(--color-pine-70);
124
+ --vui-data-red: var(--color-energy-red-70);
125
+ --vui-data-skyblue: var(--color-sky-blue-55);
126
+ --vui-data-sunflower: var(--color-sunflower-80);
127
+ --vui-data-terracotta: var(--color-terracotta-40);
128
+ --vui-data-warmgrey: var(--color-warm-grey-65);
129
+ --vui-data-white: var(--color-white);
130
+ --vui-feedback-danger-solid: var(--color-energy-red-54);
131
+ --vui-feedback-danger-subtle: var(--color-energy-red-10);
132
+ --vui-feedback-info-solid: var(--color-sky-blue-77);
133
+ --vui-feedback-info-subtle: var(--color-sky-blue-10);
134
+ --vui-feedback-neutral-solid: var(--color-warm-grey-40);
135
+ --vui-feedback-neutral-subtle: var(--color-warm-grey-20);
136
+ --vui-feedback-success-solid: var(--color-land-green-55);
137
+ --vui-feedback-success-subtle: var(--color-land-green-10);
138
+ --vui-feedback-warning-solid: var(--color-sunflower-73);
139
+ --vui-feedback-warning-subtle: var(--color-sunflower-10);
140
+ --vui-foreground-brand-primary: var(--color-digi-green-78);
141
+ --vui-foreground-brand-secondary: var(--color-white);
142
+ --vui-foreground-contrast: var(--color-digi-green-78);
143
+ --vui-foreground-default: var(--color-white);
144
+ --vui-foreground-inverse: var(--color-white);
145
+ --vui-foreground-muted: var(--color-warm-grey-80);
146
+ --vui-gradient-ai-1: var(--color-sky-blue-15);
147
+ --vui-gradient-ai-2: var(--color-digi-green-10);
148
+ --vui-gradient-brand-1: var(--color-sky-blue-30);
149
+ --vui-gradient-brand-2: var(--color-sky-blue-15);
150
+ --vui-gradient-brand-3: var(--color-digi-green-15);
151
+ --vui-gradient-motion-1: var(--color-sky-blue-25);
152
+ --vui-gradient-motion-2: var(--color-digi-green-15);
153
+ --vui-gradient-motion-3: var(--color-sea-blue-20);
154
+ --vui-gradient-motion-4: var(--color-eucalyptus-20);
155
+ --vui-navigation-background-active: var(--color-opacity-light-5);
156
+ --vui-navigation-background-default: var(--vui-background-elevated);
157
+ --vui-navigation-background-disabled: var(--color-opacity-none);
158
+ --vui-navigation-background-hover: var(--color-opacity-light-15);
159
+ --vui-navigation-background-pressed: var(--color-opacity-light-10);
160
+ --vui-navigation-border-active: var(--color-digi-green-78);
161
+ --vui-navigation-border-default: var(--color-opacity-light-10);
162
+ --vui-navigation-border-disabled: var(--color-opacity-light-10);
163
+ --vui-navigation-border-hover: var(--color-white);
164
+ --vui-navigation-border-pressed: var(--color-digi-green-78);
165
+ --vui-navigation-foreground-active: var(--color-digi-green-78);
166
+ --vui-navigation-foreground-default: var(--color-white);
167
+ --vui-navigation-foreground-disabled: var(--color-sandstone-55);
168
+ --vui-navigation-foreground-hover: var(--color-white);
169
+ --vui-navigation-foreground-pressed: var(--color-white);
170
+ --vui-utility-border-brand: var(--color-digi-green-78);
171
+ --vui-utility-border-default: var(--color-opacity-light-30);
172
+ --vui-utility-border-inverse: var(--color-white);
173
+ --vui-utility-border-subtle: var(--color-opacity-light-15);
174
+ --vui-utility-focus: var(--color-digi-green-78);
175
+ --vui-utility-indicator: var(--color-digi-green-78);
176
+ --vui-utility-loading-brand: var(--color-digi-green-78);
177
+ --vui-utility-loading-danger: var(--color-energy-red-54);
178
+ --vui-utility-loading-inverse: var(--color-white);
179
+ --vui-utility-loading-skeleton: var(--color-opacity-light-30);
180
+ --vui-utility-loading-success: var(--color-land-green-41);
181
+ --vui-utility-opacity-none: var(--color-opacity-dark-0);
182
+ --vui-utility-overlay: var(--color-opacity-light-10);
183
+ --vui-utility-tooltip-background: var(--color-white);
184
+ --vui-utility-tooltip-foreground: var(--color-sandstone-10);
185
+ }
package/src/color-light.css ADDED
@@ -0,0 +1,185 @@
1
+ :root,
2
+ :host {
3
+ --vui-action-ai-solid: var(--color-cyan-43);
4
+ --vui-action-ai-solid-hover: var(--color-sea-blue-20);
5
+ --vui-action-ai-solid-inverse: var(--color-white);
6
+ --vui-action-ai-solid-pressed: var(--color-sea-blue-35);
7
+ --vui-action-ai-sublte: var(--vui-gradient-ai-1);
8
+ --vui-action-ai-subtle-hover: var(--vui-gradient-ai-1);
9
+ --vui-action-ai-subtle-inverse: var(--color-dark-blue-18);
10
+ --vui-action-ai-subtle-pressed: var(--vui-gradient-ai-1);
11
+ --vui-action-blue-solid: var(--color-dark-blue-18);
12
+ --vui-action-blue-solid-hover: var(--color-dark-blue-25);
13
+ --vui-action-blue-solid-inverse: var(--color-white);
14
+ --vui-action-blue-solid-pressed: var(--color-sea-blue-28);
15
+ --vui-action-blue-subtle: var(--color-sky-blue-90);
16
+ --vui-action-blue-subtle-hover: var(--color-sky-blue-80);
17
+ --vui-action-blue-subtle-inverse: var(--color-dark-blue-18);
18
+ --vui-action-blue-subtle-pressed: var(--color-sky-blue-85);
19
+ --vui-action-brand-solid: var(--color-sea-blue-28);
20
+ --vui-action-brand-solid-hover: var(--color-sea-blue-20);
21
+ --vui-action-brand-solid-inverse: var(--color-white);
22
+ --vui-action-brand-solid-pressed: var(--color-sea-blue-35);
23
+ --vui-action-brand-subtle: var(--color-sky-blue-95);
24
+ --vui-action-brand-subtle-hover: var(--color-sky-blue-85);
25
+ --vui-action-brand-subtle-inverse: var(--color-sea-blue-28);
26
+ --vui-action-brand-subtle-pressed: var(--color-sky-blue-90);
27
+ --vui-action-contrast-solid: var(--color-digi-green-78);
28
+ --vui-action-contrast-solid-hover: var(--color-digi-green-70);
29
+ --vui-action-contrast-solid-inverse: var(--color-dark-blue-18);
30
+ --vui-action-contrast-solid-pressed: var(--color-digi-green-85);
31
+ --vui-action-contrast-subtle: var(--color-opacity-light-10);
32
+ --vui-action-contrast-subtle-hover: var(--color-opacity-light-20);
33
+ --vui-action-contrast-subtle-inverse: var(--color-dark-blue-18);
34
+ --vui-action-contrast-subtle-pressed: var(--color-opacity-light-15);
35
+ --vui-action-danger-solid: var(--color-energy-red-45);
36
+ --vui-action-danger-solid-hover: var(--color-energy-red-35);
37
+ --vui-action-danger-solid-inverse: var(--color-white);
38
+ --vui-action-danger-solid-pressed: var(--color-energy-red-50);
39
+ --vui-action-danger-subtle: var(--color-energy-red-95);
40
+ --vui-action-danger-subtle-hover: var(--color-energy-red-85);
41
+ --vui-action-danger-subtle-inverse: var(--color-energy-red-45);
42
+ --vui-action-danger-subtle-pressed: var(--color-energy-red-90);
43
+ --vui-action-disabled-background: var(--color-sandstone-90);
44
+ --vui-action-disabled-foreground: var(--color-sandstone-70);
45
+ --vui-action-eucalyptus-solid: var(--color-eucalyptus-30);
46
+ --vui-action-eucalyptus-solid-hover: var(--color-eucalyptus-41);
47
+ --vui-action-eucalyptus-solid-inverse: var(--color-white);
48
+ --vui-action-eucalyptus-solid-pressed: var(--color-eucalyptus-35);
49
+ --vui-action-eucalyptus-subtle: var(--color-eucalyptus-95);
50
+ --vui-action-eucalyptus-subtle-hover: var(--color-eucalyptus-85);
51
+ --vui-action-eucalyptus-subtle-inverse: var(--color-eucalyptus-20);
52
+ --vui-action-eucalyptus-subtle-pressed: var(--color-eucalyptus-90);
53
+ --vui-action-generic-hover: var(--color-opacity-dark-20);
54
+ --vui-action-generic-pressed: var(--color-opacity-dark-15);
55
+ --vui-action-grey-solid: var(--color-sandstone-40);
56
+ --vui-action-grey-solid-hover: var(--color-sandstone-50);
57
+ --vui-action-grey-solid-inverse: var(--color-white);
58
+ --vui-action-grey-solid-pressed: var(--color-sandstone-45);
59
+ --vui-action-grey-subtle: var(--color-sandstone-90);
60
+ --vui-action-grey-subtle-hover: var(--color-sandstone-79);
61
+ --vui-action-grey-subtle-inverse: var(--color-sandstone-10);
62
+ --vui-action-grey-subtle-pressed: var(--color-sandstone-85);
63
+ --vui-action-lavender-solid: var(--color-lavender-60);
64
+ --vui-action-lavender-solid-hover: var(--color-lavender-70);
65
+ --vui-action-lavender-solid-inverse: var(--color-white);
66
+ --vui-action-lavender-solid-pressed: var(--color-lavender-65);
67
+ --vui-action-lavender-subtle: var(--color-lavender-95);
68
+ --vui-action-lavender-subtle-hover: var(--color-lavender-85);
69
+ --vui-action-lavender-subtle-inverse: var(--color-lavender-20);
70
+ --vui-action-lavender-subtle-pressed: var(--color-lavender-90);
71
+ --vui-action-success-solid: var(--color-land-green-41);
72
+ --vui-action-success-solid-hover: var(--color-land-green-25);
73
+ --vui-action-success-solid-inverse: var(--color-white);
74
+ --vui-action-success-solid-pressed: var(--color-land-green-30);
75
+ --vui-action-success-subtle: var(--color-land-green-95);
76
+ --vui-action-success-subtle-hover: var(--color-land-green-85);
77
+ --vui-action-success-subtle-inverse: var(--color-land-green-20);
78
+ --vui-action-success-subtle-pressed: var(--color-land-green-90);
79
+ --vui-action-terracotta-solid: var(--color-terracotta-30);
80
+ --vui-action-terracotta-solid-hover: var(--color-terracotta-40);
81
+ --vui-action-terracotta-solid-inverse: var(--vui-data-white);
82
+ --vui-action-terracotta-solid-pressed: var(--color-terracotta-35);
83
+ --vui-action-terracotta-subtle: var(--color-terracotta-90);
84
+ --vui-action-terracotta-subtle-hover: var(--color-terracotta-80);
85
+ --vui-action-terracotta-subtle-inverse: var(--color-terracotta-20);
86
+ --vui-action-terracotta-subtle-pressed: var(--color-terracotta-85);
87
+ --vui-action-yellow-solid: var(--color-sunflower-60);
88
+ --vui-action-yellow-solid-hover: var(--color-sunflower-80);
89
+ --vui-action-yellow-solid-inverse: var(--color-sunflower-15);
90
+ --vui-action-yellow-solid-pressed: var(--color-sunflower-70);
91
+ --vui-action-yellow-sublte-inverse: var(--color-sunflower-15);
92
+ --vui-action-yellow-subtle: var(--color-sunflower-85);
93
+ --vui-action-yellow-subtle-hover: var(--color-sunflower-73);
94
+ --vui-action-yellow-subtle-pressed: var(--color-sunflower-80);
95
+ --vui-background-cold: var(--color-sky-blue-97);
96
+ --vui-background-contrast: var(--color-dark-blue-18);
97
+ --vui-background-default: var(--color-white);
98
+ --vui-background-elevated: var(--color-white);
99
+ --vui-background-muted: var(--color-sandstone-95);
100
+ --vui-background-subtle: var(--color-sandstone-97);
101
+ --vui-background-warm: var(--color-earth-95);
102
+ --vui-control-background-default: var(--color-white);
103
+ --vui-control-background-disabled: var(--color-sandstone-90);
104
+ --vui-control-background-off: var(--color-sandstone-50);
105
+ --vui-control-background-on: var(--color-dark-blue-18);
106
+ --vui-control-border-default: var(--color-sandstone-70);
107
+ --vui-control-border-hover: var(--color-sandstone-10);
108
+ --vui-control-foreground-default: var(--color-sandstone-10);
109
+ --vui-control-foreground-disabled: var(--color-sandstone-70);
110
+ --vui-control-foreground-off: var(--color-white);
111
+ --vui-control-foreground-on: var(--color-white);
112
+ --vui-control-helper: var(--color-sandstone-35);
113
+ --vui-control-label: var(--color-sandstone-10);
114
+ --vui-control-placeholder: var(--color-sandstone-55);
115
+ --vui-data-black: var(--color-black);
116
+ --vui-data-cyan: var(--color-cyan-43);
117
+ --vui-data-darkblue: var(--color-dark-blue-18);
118
+ --vui-data-earth: var(--color-earth-75);
119
+ --vui-data-eucalyptus: var(--color-eucalyptus-41);
120
+ --vui-data-landgreen: var(--color-land-green-41);
121
+ --vui-data-lavender: var(--color-lavender-77);
122
+ --vui-data-orange: var(--color-terracotta-50);
123
+ --vui-data-pine: var(--color-pine-31);
124
+ --vui-data-red: var(--color-energy-red-54);
125
+ --vui-data-skyblue: var(--color-sky-blue-77);
126
+ --vui-data-sunflower: var(--color-sunflower-73);
127
+ --vui-data-terracotta: var(--color-terracotta-30);
128
+ --vui-data-warmgrey: var(--color-warm-grey-56);
129
+ --vui-data-white: var(--color-white);
130
+ --vui-feedback-danger-solid: var(--color-energy-red-45);
131
+ --vui-feedback-danger-subtle: var(--color-energy-red-95);
132
+ --vui-feedback-info-solid: var(--color-sea-blue-28);
133
+ --vui-feedback-info-subtle: var(--color-sky-blue-95);
134
+ --vui-feedback-neutral-solid: var(--color-warm-grey-50);
135
+ --vui-feedback-neutral-subtle: var(--color-warm-grey-90);
136
+ --vui-feedback-success-solid: var(--color-land-green-30);
137
+ --vui-feedback-success-subtle: var(--color-land-green-95);
138
+ --vui-feedback-warning-solid: var(--color-sunflower-15);
139
+ --vui-feedback-warning-subtle: var(--color-sunflower-90);
140
+ --vui-foreground-brand-primary: var(--color-sea-blue-28);
141
+ --vui-foreground-brand-secondary: var(--color-dark-blue-18);
142
+ --vui-foreground-contrast: var(--color-digi-green-78);
143
+ --vui-foreground-default: var(--color-sandstone-10);
144
+ --vui-foreground-inverse: var(--color-white);
145
+ --vui-foreground-muted: var(--color-warm-grey-30);
146
+ --vui-gradient-ai-1: var(--color-sky-blue-95);
147
+ --vui-gradient-ai-2: var(--color-digi-green-95);
148
+ --vui-gradient-brand-1: var(--color-sky-blue-80);
149
+ --vui-gradient-brand-2: var(--color-sky-blue-95);
150
+ --vui-gradient-brand-3: var(--color-digi-green-90);
151
+ --vui-gradient-motion-1: var(--color-sky-blue-90);
152
+ --vui-gradient-motion-2: var(--color-digi-green-90);
153
+ --vui-gradient-motion-3: var(--color-sea-blue-90);
154
+ --vui-gradient-motion-4: var(--color-eucalyptus-80);
155
+ --vui-navigation-background-active: var(--color-sky-blue-95);
156
+ --vui-navigation-background-default: var(--vui-background-elevated);
157
+ --vui-navigation-background-disabled: var(--color-sandstone-90);
158
+ --vui-navigation-background-hover: var(--color-sky-blue-85);
159
+ --vui-navigation-background-pressed: var(--color-sky-blue-90);
160
+ --vui-navigation-border-active: var(--color-sea-blue-28);
161
+ --vui-navigation-border-default: var(--color-opacity-dark-5);
162
+ --vui-navigation-border-disabled: var(--color-opacity-dark-10);
163
+ --vui-navigation-border-hover: var(--color-dark-blue-18);
164
+ --vui-navigation-border-pressed: var(--color-sea-blue-28);
165
+ --vui-navigation-foreground-active: var(--color-sea-blue-28);
166
+ --vui-navigation-foreground-default: var(--color-sandstone-10);
167
+ --vui-navigation-foreground-disabled: var(--color-sandstone-70);
168
+ --vui-navigation-foreground-hover: var(--color-sandstone-10);
169
+ --vui-navigation-foreground-pressed: var(--color-sandstone-10);
170
+ --vui-utility-border-brand: var(--color-dark-blue-18);
171
+ --vui-utility-border-default: var(--color-opacity-dark-20);
172
+ --vui-utility-border-inverse: var(--color-white);
173
+ --vui-utility-border-subtle: var(--color-opacity-dark-10);
174
+ --vui-utility-focus: var(--color-cyan-43);
175
+ --vui-utility-indicator: var(--vui-data-cyan);
176
+ --vui-utility-loading-brand: var(--color-sea-blue-28);
177
+ --vui-utility-loading-danger: var(--color-energy-red-54);
178
+ --vui-utility-loading-inverse: var(--color-white);
179
+ --vui-utility-loading-skeleton: var(--color-opacity-dark-30);
180
+ --vui-utility-loading-success: var(--color-land-green-41);
181
+ --vui-utility-opacity-none: var(--color-opacity-light-0);
182
+ --vui-utility-overlay: var(--color-opacity-dark-50);
183
+ --vui-utility-tooltip-background: var(--color-dark-blue-18);
184
+ --vui-utility-tooltip-foreground: var(--color-white);
185
+ }