@enovaui/web-tokens 0.6.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 (14) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +54 -0
  3. package/css/color-semantic-lg-brand.css +79 -0
  4. package/css/color-semantic-mobile.css +79 -0
  5. package/css/color-semantic-mono-black.css +79 -0
  6. package/css/color-semantic-mono-white.css +79 -0
  7. package/css/color-semantic-web.css +79 -0
  8. package/index.js +6 -0
  9. package/json/color-semantic-lg-brand.json +75 -0
  10. package/json/color-semantic-mobile.json +75 -0
  11. package/json/color-semantic-mono-black.json +75 -0
  12. package/json/color-semantic-mono-white.json +75 -0
  13. package/json/color-semantic-web.json +75 -0
  14. package/package.json +15 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,7 @@
1
+ # Change Log
2
+
3
+ The following is a curated list of changes in the web tokens module, newest changes on the top.
4
+
5
+ ## [0.6.0] - 2025-06-11
6
+
7
+ - Initial release
package/README.md ADDED
@@ -0,0 +1,54 @@
1
+ # Web Tokens
2
+
3
+ Design tokens for web platforms.
4
+
5
+ ## Overview
6
+
7
+ This package contains design tokens that define visual attributes for web applications. Design tokens help maintain consistency and enable theming across the ecosystem.
8
+
9
+ ### What are Semantic Tokens?
10
+
11
+ Semantic tokens are design tokens that define the intended meaning or purpose of a design element, rather than its raw value. By abstracting the design intent, semantic tokens enable consistent styling across different components.
12
+
13
+ ## Installation
14
+
15
+ To install the package, use your preferred package manager:
16
+
17
+ ```bash
18
+ npm install @enovaui/web-tokens
19
+ ```
20
+
21
+ or
22
+
23
+ ```bash
24
+ yarn add @enovaui/web-tokens
25
+ ```
26
+
27
+ ### How to Use
28
+
29
+ To incorporate these design tokens into your project, follow these simple steps:
30
+
31
+ 1. Import the desired token values from this repository.
32
+ 2. Apply the imported tokens to your components and styles.
33
+
34
+
35
+ ## Copyright and License Information
36
+
37
+ Unless otherwise specified, all content, including all source code files and
38
+ documentation files in this repository are:
39
+
40
+ Copyright (c) 2025 LG Electronics
41
+
42
+ Unless otherwise specified or set forth in the NOTICE file, all content,
43
+ including all source code files and documentation files in this repository are:
44
+ Licensed under the Apache License, Version 2.0 (the "License");
45
+ you may not use this content except in compliance with the License.
46
+ You may obtain a copy of the License at
47
+
48
+ http://www.apache.org/licenses/LICENSE-2.0
49
+
50
+ Unless required by applicable law or agreed to in writing, software
51
+ distributed under the License is distributed on an "AS IS" BASIS,
52
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
53
+ See the License for the specific language governing permissions and
54
+ limitations under the License.
package/css/color-semantic-lg-brand.css ADDED
@@ -0,0 +1,79 @@
1
+ /*
2
+ * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
3
+ * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
4
+ */
5
+
6
+ @import "@enovaui/core-tokens/css/color-primitive.css";
7
+
8
+ /* ----------------------------------------
9
+ Semantic Color Tokens
10
+ ------------------------------------------- */
11
+
12
+ :root {
13
+ /* background */
14
+ --semantic-color-background-main: var(--primitive-color-warm-gray-99);
15
+ --semantic-color-background-sub: var(--primitive-color-white);
16
+
17
+ /* onBackground */
18
+ --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
19
+
20
+ /* surface */
21
+ --semantic-color-surface-default-handle: var(--primitive-color-black);
22
+ --semantic-color-surface-default-indicator: var(--primitive-color-pink-40);
23
+ --semantic-color-surface-default-notification: var(--primitive-color-active-red-50);
24
+ --semantic-color-surface-default-placeholder: var(--primitive-color-warm-gray-60);
25
+ --semantic-color-surface-default-track: var(--primitive-color-warm-gray-75);
26
+ --semantic-color-surface-main: var(--primitive-color-white);
27
+ --semantic-color-surface-main-hover: var(--primitive-color-warm-gray-85);
28
+ --semantic-color-surface-main-pressed: var(--primitive-color-warm-gray-75);
29
+ --semantic-color-surface-sub: var(--primitive-color-warm-gray-75);
30
+ --semantic-color-surface-accent: var(--primitive-color-active-red-50);
31
+ --semantic-color-surface-badge-dark: var(--primitive-color-warm-gray-10);
32
+ --semantic-color-surface-badge-light: var(--primitive-color-warm-gray-75);
33
+ --semantic-color-surface-button-primary: var(--primitive-color-active-red-50);
34
+ --semantic-color-surface-button-primary-hover: var(--primitive-color-active-red-40);
35
+ --semantic-color-surface-button-primary-pressed: var(--primitive-color-active-red-30);
36
+ --semantic-color-surface-button-secondary: var(--primitive-color-warm-gray-75);
37
+ --semantic-color-surface-button-secondary-hover: var(--primitive-color-warm-gray-75);
38
+ --semantic-color-surface-button-secondary-pressed: var(--primitive-color-warm-gray-60);
39
+ --semantic-color-surface-button-tertiary: var(--primitive-color-white);
40
+ --semantic-color-surface-button-tertiary-hover: var(--primitive-color-white);
41
+ --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-warm-gray-75);
42
+ --semantic-color-surface-button-icon: var(--primitive-color-warm-gray-75);
43
+ --semantic-color-surface-button-icon-pressed: var(--primitive-color-warm-gray-60);
44
+ --semantic-color-surface-chip: var(--primitive-color-white);
45
+ --semantic-color-surface-chip-selected: var(--primitive-color-active-red-50);
46
+ --semantic-color-surface-notification-card: var(--primitive-color-warm-gray-75);
47
+ --semantic-color-surface-selection-active: var(--primitive-color-warm-gray-15);
48
+ --semantic-color-surface-selection-inactive: var(--primitive-color-warm-gray-60);
49
+ --semantic-color-surface-text-field-disabled: var(--primitive-color-warm-gray-75);
50
+ --semantic-color-surface-toast: var(--primitive-color-warm-gray-10);
51
+ --semantic-color-surface-white: var(--primitive-color-white);
52
+ --semantic-color-surface-black: var(--primitive-color-warm-gray-10);
53
+
54
+ /* onSurface */
55
+ --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
56
+ --semantic-color-on-surface-default-success: var(--primitive-color-green-55);
57
+ --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
58
+ --semantic-color-on-surface-main-selected: var(--primitive-color-white);
59
+ --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
60
+ --semantic-color-on-surface-accent: var(--primitive-color-active-red-60);
61
+ --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
62
+ --semantic-color-on-surface-white: var(--primitive-color-white);
63
+ --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
64
+
65
+ /* stroke */
66
+ --semantic-color-stroke-default-error: var(--primitive-color-red-orange-60);
67
+ --semantic-color-stroke-default-success: var(--primitive-color-green-60);
68
+ --semantic-color-stroke-main: var(--primitive-color-warm-gray-75);
69
+ --semantic-color-stroke-main-focused: var(--primitive-color-warm-gray-30);
70
+ --semantic-color-stroke-sub: var(--primitive-color-warm-gray-60);
71
+ --semantic-color-stroke-accent: var(--primitive-color-active-red-50);
72
+ --semantic-color-stroke-button: var(--primitive-color-warm-gray-30);
73
+ --semantic-color-stroke-selection-active: var(--primitive-color-warm-gray-15);
74
+ --semantic-color-stroke-selection-inactive: var(--primitive-color-warm-gray-60);
75
+ --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
76
+
77
+ /* scrim */
78
+ --semantic-color-scrim-default: var(--primitive-color-black);
79
+ }
package/css/color-semantic-mobile.css ADDED
@@ -0,0 +1,79 @@
1
+ /*
2
+ * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
3
+ * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
4
+ */
5
+
6
+ @import "@enovaui/core-tokens/css/color-primitive.css";
7
+
8
+ /* ----------------------------------------
9
+ Semantic Color Tokens
10
+ ------------------------------------------- */
11
+
12
+ :root {
13
+ /* background */
14
+ --semantic-color-background-main: var(--primitive-color-mist-gray-95);
15
+ --semantic-color-background-sub: var(--primitive-color-white);
16
+
17
+ /* onBackground */
18
+ --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
19
+
20
+ /* surface */
21
+ --semantic-color-surface-default-handle: var(--primitive-color-cobalt-blue-40);
22
+ --semantic-color-surface-default-indicator: var(--primitive-color-cobalt-blue-40);
23
+ --semantic-color-surface-default-notification: var(--primitive-color-red-orange-60);
24
+ --semantic-color-surface-default-placeholder: var(--primitive-color-mist-gray-80);
25
+ --semantic-color-surface-default-track: var(--primitive-color-blue-gray-90);
26
+ --semantic-color-surface-main: var(--primitive-color-white);
27
+ --semantic-color-surface-main-hover: var(--primitive-color-blue-gray-95);
28
+ --semantic-color-surface-main-pressed: var(--primitive-color-blue-gray-90);
29
+ --semantic-color-surface-sub: var(--primitive-color-blue-gray-90);
30
+ --semantic-color-surface-accent: var(--primitive-color-cobalt-blue-40);
31
+ --semantic-color-surface-badge-dark: var(--primitive-color-blue-gray-10);
32
+ --semantic-color-surface-badge-light: var(--primitive-color-blue-gray-90);
33
+ --semantic-color-surface-button-primary: var(--primitive-color-cobalt-blue-40);
34
+ --semantic-color-surface-button-primary-hover: var(--primitive-color-cobalt-blue-30);
35
+ --semantic-color-surface-button-primary-pressed: var(--primitive-color-cobalt-blue-20);
36
+ --semantic-color-surface-button-secondary: var(--primitive-color-cobalt-blue-90);
37
+ --semantic-color-surface-button-secondary-hover: var(--primitive-color-cobalt-blue-80);
38
+ --semantic-color-surface-button-secondary-pressed: var(--primitive-color-cobalt-blue-70);
39
+ --semantic-color-surface-button-tertiary: var(--primitive-color-white);
40
+ --semantic-color-surface-button-tertiary-hover: var(--primitive-color-white);
41
+ --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-mist-gray-90);
42
+ --semantic-color-surface-button-icon: var(--primitive-color-blue-gray-90);
43
+ --semantic-color-surface-button-icon-pressed: var(--primitive-color-blue-gray-70);
44
+ --semantic-color-surface-chip: var(--primitive-color-white);
45
+ --semantic-color-surface-chip-selected: var(--primitive-color-cobalt-blue-40);
46
+ --semantic-color-surface-notification-card: var(--primitive-color-blue-gray-90);
47
+ --semantic-color-surface-selection-active: var(--primitive-color-cobalt-blue-50);
48
+ --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-70);
49
+ --semantic-color-surface-text-field-disabled: var(--primitive-color-blue-gray-90);
50
+ --semantic-color-surface-toast: var(--primitive-color-blue-gray-10);
51
+ --semantic-color-surface-white: var(--primitive-color-white);
52
+ --semantic-color-surface-black: var(--primitive-color-blue-gray-10);
53
+
54
+ /* onSurface */
55
+ --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
56
+ --semantic-color-on-surface-default-success: var(--primitive-color-green-55);
57
+ --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
58
+ --semantic-color-on-surface-main-selected: var(--primitive-color-white);
59
+ --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
60
+ --semantic-color-on-surface-accent: var(--primitive-color-cobalt-blue-40);
61
+ --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
62
+ --semantic-color-on-surface-white: var(--primitive-color-white);
63
+ --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
64
+
65
+ /* stroke */
66
+ --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
67
+ --semantic-color-stroke-default-success: var(--primitive-color-green-60);
68
+ --semantic-color-stroke-main: var(--primitive-color-blue-gray-80);
69
+ --semantic-color-stroke-main-focused: var(--primitive-color-cobalt-blue-40);
70
+ --semantic-color-stroke-sub: var(--primitive-color-blue-gray-80);
71
+ --semantic-color-stroke-accent: var(--primitive-color-cobalt-blue-40);
72
+ --semantic-color-stroke-button: var(--primitive-color-blue-gray-80);
73
+ --semantic-color-stroke-selection-active: var(--primitive-color-cobalt-blue-50);
74
+ --semantic-color-stroke-selection-inactive: var(--primitive-color-mist-gray-70);
75
+ --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
76
+
77
+ /* scrim */
78
+ --semantic-color-scrim-default: var(--primitive-color-black);
79
+ }
package/css/color-semantic-mono-black.css ADDED
@@ -0,0 +1,79 @@
1
+ /*
2
+ * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
3
+ * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
4
+ */
5
+
6
+ @import "@enovaui/core-tokens/css/color-primitive.css";
7
+
8
+ /* ----------------------------------------
9
+ Semantic Color Tokens
10
+ ------------------------------------------- */
11
+
12
+ :root {
13
+ /* background */
14
+ --semantic-color-background-main: var(--primitive-color-black);
15
+ --semantic-color-background-sub: var(--primitive-color-mist-gray-30);
16
+
17
+ /* onBackground */
18
+ --semantic-color-on-background-default: var(--primitive-color-mist-gray-99);
19
+
20
+ /* surface */
21
+ --semantic-color-surface-default-handle: var(--primitive-color-mist-gray-60);
22
+ --semantic-color-surface-default-indicator: var(--primitive-color-mist-gray-90);
23
+ --semantic-color-surface-default-notification: var(--primitive-color-red-orange-60);
24
+ --semantic-color-surface-default-placeholder: var(--primitive-color-mist-gray-60);
25
+ --semantic-color-surface-default-track: var(--primitive-color-mist-gray-40);
26
+ --semantic-color-surface-main: var(--primitive-color-mist-gray-30);
27
+ --semantic-color-surface-main-hover: var(--primitive-color-mist-gray-95);
28
+ --semantic-color-surface-main-pressed: var(--primitive-color-mist-gray-90);
29
+ --semantic-color-surface-sub: var(--primitive-color-mist-gray-90);
30
+ --semantic-color-surface-accent: var(--primitive-color-mist-gray-50);
31
+ --semantic-color-surface-badge-dark: var(--primitive-color-mist-gray-60);
32
+ --semantic-color-surface-badge-light: var(--primitive-color-mist-gray-40);
33
+ --semantic-color-surface-button-primary: var(--primitive-color-mist-gray-50);
34
+ --semantic-color-surface-button-primary-hover: var(--primitive-color-mist-gray-90);
35
+ --semantic-color-surface-button-primary-pressed: var(--primitive-color-mist-gray-30);
36
+ --semantic-color-surface-button-secondary: var(--primitive-color-mist-gray-50);
37
+ --semantic-color-surface-button-secondary-hover: var(--primitive-color-mist-gray-90);
38
+ --semantic-color-surface-button-secondary-pressed: var(--primitive-color-mist-gray-30);
39
+ --semantic-color-surface-button-tertiary: var(--primitive-color-mist-gray-50);
40
+ --semantic-color-surface-button-tertiary-hover: var(--primitive-color-mist-gray-90);
41
+ --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-mist-gray-30);
42
+ --semantic-color-surface-button-icon: var(--primitive-color-mist-gray-40);
43
+ --semantic-color-surface-button-icon-pressed: var(--primitive-color-mist-gray-50);
44
+ --semantic-color-surface-chip: var(--primitive-color-mist-gray-40);
45
+ --semantic-color-surface-chip-selected: var(--primitive-color-mist-gray-90);
46
+ --semantic-color-surface-notification-card: var(--primitive-color-mist-gray-40);
47
+ --semantic-color-surface-selection-active: var(--primitive-color-green-60);
48
+ --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-50);
49
+ --semantic-color-surface-text-field-disabled: var(--primitive-color-mist-gray-40);
50
+ --semantic-color-surface-toast: var(--primitive-color-mist-gray-60);
51
+ --semantic-color-surface-white: var(--primitive-color-white);
52
+ --semantic-color-surface-black: var(--primitive-color-mist-gray-10);
53
+
54
+ /* onSurface */
55
+ --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
56
+ --semantic-color-on-surface-default-success: var(--primitive-color-green-70);
57
+ --semantic-color-on-surface-main: var(--primitive-color-mist-gray-99);
58
+ --semantic-color-on-surface-main-selected: var(--primitive-color-mist-gray-30);
59
+ --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-60);
60
+ --semantic-color-on-surface-accent: var(--primitive-color-mist-gray-90);
61
+ --semantic-color-on-surface-button: var(--primitive-color-white);
62
+ --semantic-color-on-surface-white: var(--primitive-color-white);
63
+ --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
64
+
65
+ /* stroke */
66
+ --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
67
+ --semantic-color-stroke-default-success: var(--primitive-color-green-70);
68
+ --semantic-color-stroke-main: var(--primitive-color-mist-gray-50);
69
+ --semantic-color-stroke-main-focused: var(--primitive-color-white);
70
+ --semantic-color-stroke-sub: var(--primitive-color-mist-gray-50);
71
+ --semantic-color-stroke-accent: var(--primitive-color-white);
72
+ --semantic-color-stroke-button: var(--primitive-color-mist-gray-95);
73
+ --semantic-color-stroke-selection-active: var(--primitive-color-green-60);
74
+ --semantic-color-stroke-selection-inactive: var(--primitive-color-white);
75
+ --semantic-color-stroke-tab: var(--primitive-color-mist-gray-99);
76
+
77
+ /* scrim */
78
+ --semantic-color-scrim-default: var(--primitive-color-black);
79
+ }
package/css/color-semantic-mono-white.css ADDED
@@ -0,0 +1,79 @@
1
+ /*
2
+ * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
3
+ * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
4
+ */
5
+
6
+ @import "@enovaui/core-tokens/css/color-primitive.css";
7
+
8
+ /* ----------------------------------------
9
+ Semantic Color Tokens
10
+ ------------------------------------------- */
11
+
12
+ :root {
13
+ /* background */
14
+ --semantic-color-background-main: var(--primitive-color-mist-gray-95);
15
+ --semantic-color-background-sub: var(--primitive-color-white);
16
+
17
+ /* onBackground */
18
+ --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
19
+
20
+ /* surface */
21
+ --semantic-color-surface-default-handle: var(--primitive-color-mist-gray-50);
22
+ --semantic-color-surface-default-indicator: var(--primitive-color-mist-gray-50);
23
+ --semantic-color-surface-default-notification: var(--primitive-color-red-orange-60);
24
+ --semantic-color-surface-default-placeholder: var(--primitive-color-mist-gray-80);
25
+ --semantic-color-surface-default-track: var(--primitive-color-mist-gray-90);
26
+ --semantic-color-surface-main: var(--primitive-color-white);
27
+ --semantic-color-surface-main-hover: var(--primitive-color-mist-gray-99);
28
+ --semantic-color-surface-main-pressed: var(--primitive-color-mist-gray-90);
29
+ --semantic-color-surface-sub: var(--primitive-color-mist-gray-90);
30
+ --semantic-color-surface-accent: var(--primitive-color-mist-gray-40);
31
+ --semantic-color-surface-badge-dark: var(--primitive-color-mist-gray-10);
32
+ --semantic-color-surface-badge-light: var(--primitive-color-mist-gray-90);
33
+ --semantic-color-surface-button-primary: var(--primitive-color-mist-gray-40);
34
+ --semantic-color-surface-button-primary-hover: var(--primitive-color-mist-gray-30);
35
+ --semantic-color-surface-button-primary-pressed: var(--primitive-color-mist-gray-20);
36
+ --semantic-color-surface-button-secondary: var(--primitive-color-mist-gray-90);
37
+ --semantic-color-surface-button-secondary-hover: var(--primitive-color-mist-gray-80);
38
+ --semantic-color-surface-button-secondary-pressed: var(--primitive-color-mist-gray-70);
39
+ --semantic-color-surface-button-tertiary: var(--primitive-color-white);
40
+ --semantic-color-surface-button-tertiary-hover: var(--primitive-color-mist-gray-95);
41
+ --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-mist-gray-90);
42
+ --semantic-color-surface-button-icon: var(--primitive-color-mist-gray-90);
43
+ --semantic-color-surface-button-icon-pressed: var(--primitive-color-mist-gray-70);
44
+ --semantic-color-surface-chip: var(--primitive-color-white);
45
+ --semantic-color-surface-chip-selected: var(--primitive-color-mist-gray-30);
46
+ --semantic-color-surface-notification-card: var(--primitive-color-mist-gray-90);
47
+ --semantic-color-surface-selection-active: var(--primitive-color-mist-gray-40);
48
+ --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-70);
49
+ --semantic-color-surface-text-field-disabled: var(--primitive-color-mist-gray-90);
50
+ --semantic-color-surface-toast: var(--primitive-color-mist-gray-10);
51
+ --semantic-color-surface-white: var(--primitive-color-white);
52
+ --semantic-color-surface-black: var(--primitive-color-mist-gray-10);
53
+
54
+ /* onSurface */
55
+ --semantic-color-on-surface-default-error: var(--primitive-color-active-red-50);
56
+ --semantic-color-on-surface-default-success: var(--primitive-color-green-55);
57
+ --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
58
+ --semantic-color-on-surface-main-selected: var(--primitive-color-white);
59
+ --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
60
+ --semantic-color-on-surface-accent: var(--primitive-color-mist-gray-40);
61
+ --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
62
+ --semantic-color-on-surface-white: var(--primitive-color-white);
63
+ --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
64
+
65
+ /* stroke */
66
+ --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
67
+ --semantic-color-stroke-default-success: var(--primitive-color-green-60);
68
+ --semantic-color-stroke-main: var(--primitive-color-mist-gray-90);
69
+ --semantic-color-stroke-main-focused: var(--primitive-color-mist-gray-40);
70
+ --semantic-color-stroke-sub: var(--primitive-color-mist-gray-70);
71
+ --semantic-color-stroke-accent: var(--primitive-color-mist-gray-20);
72
+ --semantic-color-stroke-button: var(--primitive-color-mist-gray-80);
73
+ --semantic-color-stroke-selection-active: var(--primitive-color-mist-gray-40);
74
+ --semantic-color-stroke-selection-inactive: var(--primitive-color-mist-gray-70);
75
+ --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
76
+
77
+ /* scrim */
78
+ --semantic-color-scrim-default: var(--primitive-color-black);
79
+ }
package/css/color-semantic-web.css ADDED
@@ -0,0 +1,79 @@
1
+ /*
2
+ * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
3
+ * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
4
+ */
5
+
6
+ @import "@enovaui/core-tokens/css/color-primitive.css";
7
+
8
+ /* ----------------------------------------
9
+ Semantic Color Tokens
10
+ ------------------------------------------- */
11
+
12
+ :root {
13
+ /* background */
14
+ --semantic-color-background-main: var(--primitive-color-mist-gray-95);
15
+ --semantic-color-background-sub: var(--primitive-color-white);
16
+
17
+ /* onBackground */
18
+ --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
19
+
20
+ /* surface */
21
+ --semantic-color-surface-default-handle: var(--primitive-color-blue-gray-80);
22
+ --semantic-color-surface-default-indicator: var(--primitive-color-navy-40);
23
+ --semantic-color-surface-default-notification: var(--primitive-color-blue-green-40);
24
+ --semantic-color-surface-default-placeholder: var(--primitive-color-mist-gray-80);
25
+ --semantic-color-surface-default-track: var(--primitive-color-blue-gray-80);
26
+ --semantic-color-surface-main: var(--primitive-color-white);
27
+ --semantic-color-surface-main-hover: var(--primitive-color-blue-gray-95);
28
+ --semantic-color-surface-main-pressed: var(--primitive-color-blue-gray-90);
29
+ --semantic-color-surface-aub: var(--primitive-color-blue-gray-90);
30
+ --semantic-color-surface-accent: var(--primitive-color-blue-green-40);
31
+ --semantic-color-surface-badge-dark: var(--primitive-color-blue-gray-10);
32
+ --semantic-color-surface-badge-light: var(--primitive-color-blue-gray-90);
33
+ --semantic-color-surface-button-primary: var(--primitive-color-blue-green-40);
34
+ --semantic-color-surface-button-primary-hover: var(--primitive-color-blue-green-30);
35
+ --semantic-color-surface-button-primary-pressed: var(--primitive-color-blue-green-20);
36
+ --semantic-color-surface-button-secondary: var(--primitive-color-blue-gray-90);
37
+ --semantic-color-surface-button-secondary-hover: var(--primitive-color-blue-gray-80);
38
+ --semantic-color-surface-button-secondary-pressed: var(--primitive-color-blue-gray-70);
39
+ --semantic-color-surface-button-tertiary: var(--primitive-color-white);
40
+ --semantic-color-surface-button-tertiary-hover: var(--primitive-color-white);
41
+ --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-blue-gray-90);
42
+ --semantic-color-surface-button-icon: var(--primitive-color-blue-gray-90);
43
+ --semantic-color-surface-button-icon-pressed: var(--primitive-color-blue-gray-70);
44
+ --semantic-color-surface-chip: var(--primitive-color-white);
45
+ --semantic-color-surface-chip-selected: var(--primitive-color-navy-40);
46
+ --semantic-color-surface-notification-card: var(--primitive-color-blue-gray-90);
47
+ --semantic-color-surface-selection-active: var(--primitive-color-blue-green-50);
48
+ --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-70);
49
+ --semantic-color-surface-text-field-disabled: var(--primitive-color-blue-gray-90);
50
+ --semantic-color-surface-toast: var(--primitive-color-blue-gray-10);
51
+ --semantic-color-surface-white: var(--primitive-color-white);
52
+ --semantic-color-surface-black: var(--primitive-color-blue-gray-10);
53
+
54
+ /* onSurface */
55
+ --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
56
+ --semantic-color-on-surface-default-success: var(--primitive-color-green-55);
57
+ --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
58
+ --semantic-color-on-surface-main-selected: var(--primitive-color-white);
59
+ --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
60
+ --semantic-color-on-surface-accent: var(--primitive-color-blue-green-50);
61
+ --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
62
+ --semantic-color-on-surface-white: var(--primitive-color-white);
63
+ --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
64
+
65
+ /* stroke */
66
+ --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
67
+ --semantic-color-stroke-default-success: var(--primitive-color-green-60);
68
+ --semantic-color-stroke-main: var(--primitive-color-blue-gray-80);
69
+ --semantic-color-stroke-main-focused: var(--primitive-color-navy-40);
70
+ --semantic-color-stroke-sub: var(--primitive-color-blue-gray-80);
71
+ --semantic-color-stroke-accent: var(--primitive-color-blue-green-50);
72
+ --semantic-color-stroke-button: var(--primitive-color-blue-gray-80);
73
+ --semantic-color-stroke-selection-active: var(--primitive-color-navy-40);
74
+ --semantic-color-stroke-selection-inactive: var(--primitive-color-mist-gray-70);
75
+ --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
76
+
77
+ /* scrim */
78
+ --semantic-color-scrim-default: var(--primitive-color-white);
79
+ }
package/index.js ADDED
@@ -0,0 +1,6 @@
1
+ /*
2
+ * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
3
+ * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
4
+ */
5
+
6
+ // This space intentionally left blank
package/json/color-semantic-lg-brand.json ADDED
@@ -0,0 +1,75 @@
1
+ {
2
+ "semantic": {
3
+ "color": {
4
+ "background": {
5
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-99"},
6
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"}
7
+ },
8
+ "on": {
9
+ "background": {
10
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
11
+ },
12
+ "surface": {
13
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
14
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-55"},
15
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"},
16
+ "main-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
17
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
18
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
19
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
20
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
21
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
22
+ }
23
+ },
24
+ "surface": {
25
+ "default-handle": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/black"},
26
+ "default-indicator": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/pink-40"},
27
+ "default-notification": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-50"},
28
+ "default-placeholder": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
29
+ "default-track": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
30
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
31
+ "main-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-85"},
32
+ "main-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
33
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
34
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-50"},
35
+ "badge-dark": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-10"},
36
+ "badge-light": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
37
+ "button-primary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-50"},
38
+ "button-primary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-40"},
39
+ "button-primary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-30"},
40
+ "button-secondary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
41
+ "button-secondary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
42
+ "button-secondary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
43
+ "button-tertiary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
44
+ "button-tertiary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
45
+ "button-tertiary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
46
+ "button-icon": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
47
+ "button-icon-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
48
+ "chip": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
49
+ "chip-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-50"},
50
+ "notification-card": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
51
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-15"},
52
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
53
+ "text-field-disabled": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
54
+ "toast": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-10"},
55
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
56
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-10"}
57
+ },
58
+ "stroke": {
59
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/red-orange-60"},
60
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-60"},
61
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
62
+ "main-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-30"},
63
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
64
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-50"},
65
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-30"},
66
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-15"},
67
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
68
+ "tab": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
69
+ },
70
+ "scrim": {
71
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/black"}
72
+ }
73
+ }
74
+ }
75
+ }
package/json/color-semantic-mobile.json ADDED
@@ -0,0 +1,75 @@
1
+ {
2
+ "semantic": {
3
+ "color": {
4
+ "background": {
5
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"},
6
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"}
7
+ },
8
+ "on": {
9
+ "background": {
10
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
11
+ },
12
+ "surface": {
13
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
14
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-55"},
15
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"},
16
+ "main-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
17
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
18
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
19
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
20
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
21
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
22
+ }
23
+ },
24
+ "surface": {
25
+ "default-handle": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
26
+ "default-indicator": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
27
+ "default-notification": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/red-orange-60"},
28
+ "default-placeholder": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-80"},
29
+ "default-track": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
30
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
31
+ "main-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-95"},
32
+ "main-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
33
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
34
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
35
+ "badge-dark": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-10"},
36
+ "badge-light": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
37
+ "button-primary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
38
+ "button-primary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-30"},
39
+ "button-primary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-20"},
40
+ "button-secondary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-90"},
41
+ "button-secondary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-80"},
42
+ "button-secondary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-70"},
43
+ "button-tertiary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
44
+ "button-tertiary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
45
+ "button-tertiary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
46
+ "button-icon": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
47
+ "button-icon-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-70"},
48
+ "chip": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
49
+ "chip-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
50
+ "notification-card": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
51
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-50"},
52
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
53
+ "text-field-disabled": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
54
+ "toast": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-10"},
55
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
56
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-10"}
57
+ },
58
+ "stroke": {
59
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
60
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-60"},
61
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
62
+ "main-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
63
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
64
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
65
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
66
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-50"},
67
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
68
+ "tab": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
69
+ },
70
+ "scrim": {
71
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/black"}
72
+ }
73
+ }
74
+ }
75
+ }
package/json/color-semantic-mono-black.json ADDED
@@ -0,0 +1,75 @@
1
+ {
2
+ "semantic": {
3
+ "color": {
4
+ "background": {
5
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/black"},
6
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"}
7
+ },
8
+ "on": {
9
+ "background": {
10
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-99"}
11
+ },
12
+ "surface": {
13
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
14
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-70"},
15
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-99"},
16
+ "main-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
17
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-60"},
18
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
19
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
20
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
21
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
22
+ }
23
+ },
24
+ "surface": {
25
+ "default-handle": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-60"},
26
+ "default-indicator": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
27
+ "default-notification": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/red-orange-60"},
28
+ "default-placeholder": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-60"},
29
+ "default-track": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
30
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
31
+ "main-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"},
32
+ "main-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
33
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
34
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
35
+ "badge-dark": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-60"},
36
+ "badge-light": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
37
+ "button-primary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
38
+ "button-primary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
39
+ "button-primary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
40
+ "button-secondary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
41
+ "button-secondary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
42
+ "button-secondary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
43
+ "button-tertiary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
44
+ "button-tertiary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
45
+ "button-tertiary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
46
+ "button-icon": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
47
+ "button-icon-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
48
+ "chip": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
49
+ "chip-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
50
+ "notification-card": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
51
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-60"},
52
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
53
+ "text-field-disabled": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
54
+ "toast": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-60"},
55
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
56
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
57
+ },
58
+ "stroke": {
59
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
60
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-70"},
61
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
62
+ "main-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
63
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
64
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
65
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"},
66
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-60"},
67
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
68
+ "tab": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-99"}
69
+ },
70
+ "scrim": {
71
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/black"}
72
+ }
73
+ }
74
+ }
75
+ }
package/json/color-semantic-mono-white.json ADDED
@@ -0,0 +1,75 @@
1
+ {
2
+ "semantic": {
3
+ "color": {
4
+ "background": {
5
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"},
6
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"}
7
+ },
8
+ "on": {
9
+ "background": {
10
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
11
+ },
12
+ "surface": {
13
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-50"},
14
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-55"},
15
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"},
16
+ "main-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
17
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
18
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
19
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
20
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
21
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
22
+ }
23
+ },
24
+ "surface": {
25
+ "default-handle": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
26
+ "default-indicator": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
27
+ "default-notification": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/red-orange-60"},
28
+ "default-placeholder": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-80"},
29
+ "default-track": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
30
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
31
+ "main-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-99"},
32
+ "main-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
33
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
34
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
35
+ "badge-dark": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"},
36
+ "badge-light": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
37
+ "button-primary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
38
+ "button-primary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
39
+ "button-primary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-20"},
40
+ "button-secondary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
41
+ "button-secondary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-80"},
42
+ "button-secondary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
43
+ "button-tertiary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
44
+ "button-tertiary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"},
45
+ "button-tertiary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
46
+ "button-icon": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
47
+ "button-icon-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
48
+ "chip": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
49
+ "chip-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
50
+ "notification-card": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
51
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
52
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
53
+ "text-field-disabled": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
54
+ "toast": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"},
55
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
56
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
57
+ },
58
+ "stroke": {
59
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
60
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-60"},
61
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
62
+ "main-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
63
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
64
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-20"},
65
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-80"},
66
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
67
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
68
+ "tab": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
69
+ },
70
+ "scrim": {
71
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/black"}
72
+ }
73
+ }
74
+ }
75
+ }
package/json/color-semantic-web.json ADDED
@@ -0,0 +1,75 @@
1
+ {
2
+ "semantic": {
3
+ "color": {
4
+ "background": {
5
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"},
6
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"}
7
+ },
8
+ "on": {
9
+ "background": {
10
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
11
+ },
12
+ "surface": {
13
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
14
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-55"},
15
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"},
16
+ "main-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
17
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
18
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-50"},
19
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
20
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
21
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
22
+ }
23
+ },
24
+ "surface": {
25
+ "default-handle": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
26
+ "default-indicator": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/navy-40"},
27
+ "default-notification": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-40"},
28
+ "default-placeholder": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-80"},
29
+ "default-track": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
30
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
31
+ "main-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-95"},
32
+ "main-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
33
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
34
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-40"},
35
+ "badge-dark": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-10"},
36
+ "badge-light": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
37
+ "button-primary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-40"},
38
+ "button-primary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-30"},
39
+ "button-primary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-20"},
40
+ "button-secondary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
41
+ "button-secondary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
42
+ "button-secondary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-70"},
43
+ "button-tertiary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
44
+ "button-tertiary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
45
+ "button-tertiary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
46
+ "button-icon": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
47
+ "button-icon-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-70"},
48
+ "chip": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
49
+ "chip-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/navy-40"},
50
+ "notification-card": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
51
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-50"},
52
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
53
+ "text-field-disabled": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
54
+ "toast": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-10"},
55
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
56
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-10"}
57
+ },
58
+ "stroke": {
59
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
60
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-60"},
61
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
62
+ "main-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/navy-40"},
63
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
64
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-50"},
65
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
66
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/navy-40"},
67
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
68
+ "tab": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
69
+ },
70
+ "scrim": {
71
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"}
72
+ }
73
+ }
74
+ }
75
+ }
package/package.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "@enovaui/web-tokens",
3
+ "version": "0.6.0",
4
+ "description": "Theme design tokens for web",
5
+ "main": "index.js",
6
+ "license": "Apache-2.0",
7
+ "keywords": [
8
+ "design",
9
+ "tokens",
10
+ "web"
11
+ ],
12
+ "dependencies": {
13
+ "@enovaui/core-tokens": "^0.6.0"
14
+ }
15
+ }