@enovaui/mobile-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 +81 -0
  4. package/css/color-semantic-mobile.css +81 -0
  5. package/css/color-semantic-mono-black.css +81 -0
  6. package/css/color-semantic-mono-white.css +81 -0
  7. package/css/color-semantic-web.css +81 -0
  8. package/index.js +6 -0
  9. package/json/color-semantic-lg-brand.json +77 -0
  10. package/json/color-semantic-mobile.json +77 -0
  11. package/json/color-semantic-mono-black.json +77 -0
  12. package/json/color-semantic-mono-white.json +77 -0
  13. package/json/color-semantic-web.json +77 -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 mobile 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
+ # Mobile Tokens
2
+
3
+ Design tokens for mobile platforms.
4
+
5
+ ## Overview
6
+
7
+ This package contains design tokens that define visual attributes for mobile 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/mobile-tokens
19
+ ```
20
+
21
+ or
22
+
23
+ ```bash
24
+ yarn add @enovaui/mobile-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,81 @@
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-default: var(--primitive-color-warm-gray-99);
15
+
16
+ /* onBackground */
17
+ --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
18
+
19
+ /* surface */
20
+ --semantic-color-surface-default: var(--primitive-color-white);
21
+ --semantic-color-surface-default-hover: var(--primitive-color-warm-gray-80);
22
+ --semantic-color-surface-default-focused: var(--primitive-color-warm-gray-75);
23
+ --semantic-color-surface-default-pressed: var(--primitive-color-warm-gray-75);
24
+ --semantic-color-surface-default-selected: var(--primitive-color-warm-gray-75);
25
+ --semantic-color-surface-default-handle: var(--primitive-color-black);
26
+ --semantic-color-surface-default-indicator: var(--primitive-color-pink-40);
27
+ --semantic-color-surface-default-notification: var(--primitive-color-active-red-50);
28
+ --semantic-color-surface-default-placeholder: var(--primitive-color-warm-gray-60);
29
+ --semantic-color-surface-default-track: 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-focused: var(--primitive-color-active-red-40);
36
+ --semantic-color-surface-button-primary-pressed: var(--primitive-color-active-red-30);
37
+ --semantic-color-surface-button-secondary: var(--primitive-color-warm-gray-75);
38
+ --semantic-color-surface-button-secondary-hover: var(--primitive-color-warm-gray-60);
39
+ --semantic-color-surface-button-secondary-focused: var(--primitive-color-warm-gray-60);
40
+ --semantic-color-surface-button-secondary-pressed: var(--primitive-color-warm-gray-60);
41
+ --semantic-color-surface-button-tertiary: var(--primitive-color-white);
42
+ --semantic-color-surface-button-tertiary-hover: var(--primitive-color-white);
43
+ --semantic-color-surface-button-tertiary-focused: var(--primitive-color-white);
44
+ --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-warm-gray-75);
45
+ --semantic-color-surface-button-icon: var(--primitive-color-warm-gray-75);
46
+ --semantic-color-surface-button-icon-pressed: var(--primitive-color-warm-gray-60);
47
+ --semantic-color-surface-chip: var(--primitive-color-white);
48
+ --semantic-color-surface-chip-selected: var(--primitive-color-active-red-50);
49
+ --semantic-color-surface-notification-card: var(--primitive-color-warm-gray-75);
50
+ --semantic-color-surface-selection-active: var(--primitive-color-warm-gray-15);
51
+ --semantic-color-surface-selection-inactive: var(--primitive-color-warm-gray-60);
52
+ --semantic-color-surface-toast: var(--primitive-color-warm-gray-10);
53
+ --semantic-color-surface-white: var(--primitive-color-white);
54
+ --semantic-color-surface-black: var(--primitive-color-warm-gray-10);
55
+
56
+ /* onSurface */
57
+ --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
58
+ --semantic-color-on-surface-default-success: var(--primitive-color-green-55);
59
+ --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
60
+ --semantic-color-on-surface-main-selected: var(--primitive-color-white);
61
+ --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
62
+ --semantic-color-on-surface-accent: var(--primitive-color-active-red-60);
63
+ --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
64
+ --semantic-color-on-surface-white: var(--primitive-color-white);
65
+ --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
66
+
67
+ /* stroke */
68
+ --semantic-color-stroke-default-error: var(--primitive-color-red-orange-60);
69
+ --semantic-color-stroke-default-success: var(--primitive-color-green-60);
70
+ --semantic-color-stroke-main: var(--primitive-color-warm-gray-75);
71
+ --semantic-color-stroke-main-focused: var(--primitive-color-warm-gray-30);
72
+ --semantic-color-stroke-sub: var(--primitive-color-warm-gray-60);
73
+ --semantic-color-stroke-accent: var(--primitive-color-active-red-50);
74
+ --semantic-color-stroke-button: var(--primitive-color-warm-gray-30);
75
+ --semantic-color-stroke-selection-active: var(--primitive-color-warm-gray-15);
76
+ --semantic-color-stroke-selection-inactive: var(--primitive-color-warm-gray-60);
77
+ --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
78
+
79
+ /* scrim */
80
+ --semantic-color-scrim-default: var(--primitive-color-black);
81
+ }
package/css/color-semantic-mobile.css ADDED
@@ -0,0 +1,81 @@
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-default: var(--primitive-color-mist-gray-95);
15
+
16
+ /* onBackground */
17
+ --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
18
+
19
+ /* surface */
20
+ --semantic-color-surface-default: var(--primitive-color-white);
21
+ --semantic-color-surface-default-hover: var(--primitive-color-blue-gray-95);
22
+ --semantic-color-surface-default-focused: var(--primitive-color-blue-gray-90);
23
+ --semantic-color-surface-default-pressed: var(--primitive-color-blue-gray-90);
24
+ --semantic-color-surface-default-selected: var(--primitive-color-blue-gray-90);
25
+ --semantic-color-surface-default-handle: var(--primitive-color-cobalt-blue-40);
26
+ --semantic-color-surface-default-indicator: var(--primitive-color-cobalt-blue-40);
27
+ --semantic-color-surface-default-notification: var(--primitive-color-red-orange-60);
28
+ --semantic-color-surface-default-placeholder: var(--primitive-color-mist-gray-80);
29
+ --semantic-color-surface-default-track: 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-focused: var(--primitive-color-cobalt-blue-30);
36
+ --semantic-color-surface-button-primary-pressed: var(--primitive-color-cobalt-blue-20);
37
+ --semantic-color-surface-button-secondary: var(--primitive-color-cobalt-blue-90);
38
+ --semantic-color-surface-button-secondary-hover: var(--primitive-color-cobalt-blue-80);
39
+ --semantic-color-surface-button-secondary-focused: var(--primitive-color-cobalt-blue-80);
40
+ --semantic-color-surface-button-secondary-pressed: var(--primitive-color-cobalt-blue-70);
41
+ --semantic-color-surface-button-tertiary: var(--primitive-color-white);
42
+ --semantic-color-surface-button-tertiary-hover: var(--primitive-color-white);
43
+ --semantic-color-surface-button-tertiary-focused: var(--primitive-color-white);
44
+ --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-mist-gray-90);
45
+ --semantic-color-surface-button-icon: var(--primitive-color-blue-gray-90);
46
+ --semantic-color-surface-button-icon-pressed: var(--primitive-color-blue-gray-70);
47
+ --semantic-color-surface-chip: var(--primitive-color-white);
48
+ --semantic-color-surface-chip-selected: var(--primitive-color-cobalt-blue-40);
49
+ --semantic-color-surface-notification-card: var(--primitive-color-blue-gray-90);
50
+ --semantic-color-surface-selection-active: var(--primitive-color-cobalt-blue-50);
51
+ --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-70);
52
+ --semantic-color-surface-toast: var(--primitive-color-blue-gray-10);
53
+ --semantic-color-surface-white: var(--primitive-color-white);
54
+ --semantic-color-surface-black: var(--primitive-color-blue-gray-10);
55
+
56
+ /* onSurface */
57
+ --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
58
+ --semantic-color-on-surface-default-success: var(--primitive-color-green-55);
59
+ --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
60
+ --semantic-color-on-surface-main-selected: var(--primitive-color-white);
61
+ --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
62
+ --semantic-color-on-surface-accent: var(--primitive-color-cobalt-blue-40);
63
+ --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
64
+ --semantic-color-on-surface-white: var(--primitive-color-white);
65
+ --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
66
+
67
+ /* stroke */
68
+ --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
69
+ --semantic-color-stroke-default-success: var(--primitive-color-green-60);
70
+ --semantic-color-stroke-main: var(--primitive-color-blue-gray-80);
71
+ --semantic-color-stroke-main-focused: var(--primitive-color-cobalt-blue-40);
72
+ --semantic-color-stroke-sub: var(--primitive-color-blue-gray-80);
73
+ --semantic-color-stroke-accent: var(--primitive-color-cobalt-blue-40);
74
+ --semantic-color-stroke-button: var(--primitive-color-blue-gray-80);
75
+ --semantic-color-stroke-selection-active: var(--primitive-color-cobalt-blue-50);
76
+ --semantic-color-stroke-selection-inactive: var(--primitive-color-mist-gray-70);
77
+ --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
78
+
79
+ /* scrim */
80
+ --semantic-color-scrim-default: var(--primitive-color-black);
81
+ }
package/css/color-semantic-mono-black.css ADDED
@@ -0,0 +1,81 @@
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-default: var(--primitive-color-black);
15
+
16
+ /* onBackground */
17
+ --semantic-color-on-background-default: var(--primitive-color-mist-gray-99);
18
+
19
+ /* surface */
20
+ --semantic-color-surface-default: var(--primitive-color-mist-gray-30);
21
+ --semantic-color-surface-default-hover: var(--primitive-color-mist-gray-95);
22
+ --semantic-color-surface-default-focused: var(--primitive-color-mist-gray-95);
23
+ --semantic-color-surface-default-pressed: var(--primitive-color-mist-gray-90);
24
+ --semantic-color-surface-default-selected: var(--primitive-color-mist-gray-50);
25
+ --semantic-color-surface-default-handle: var(--primitive-color-mist-gray-60);
26
+ --semantic-color-surface-default-indicator: var(--primitive-color-mist-gray-90);
27
+ --semantic-color-surface-default-notification: var(--primitive-color-red-orange-60);
28
+ --semantic-color-surface-default-placeholder: var(--primitive-color-mist-gray-60);
29
+ --semantic-color-surface-default-track: var(--primitive-color-mist-gray-40);
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-focused: var(--primitive-color-mist-gray-90);
36
+ --semantic-color-surface-button-primary-pressed: var(--primitive-color-mist-gray-30);
37
+ --semantic-color-surface-button-secondary: var(--primitive-color-mist-gray-50);
38
+ --semantic-color-surface-button-secondary-hover: var(--primitive-color-mist-gray-90);
39
+ --semantic-color-surface-button-secondary-focused: var(--primitive-color-mist-gray-90);
40
+ --semantic-color-surface-button-secondary-pressed: var(--primitive-color-mist-gray-30);
41
+ --semantic-color-surface-button-tertiary: var(--primitive-color-mist-gray-50);
42
+ --semantic-color-surface-button-tertiary-hover: var(--primitive-color-mist-gray-90);
43
+ --semantic-color-surface-button-tertiary-focused: var(--primitive-color-mist-gray-90);
44
+ --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-mist-gray-30);
45
+ --semantic-color-surface-button-icon: var(--primitive-color-mist-gray-40);
46
+ --semantic-color-surface-button-icon-pressed: var(--primitive-color-mist-gray-50);
47
+ --semantic-color-surface-chip: var(--primitive-color-mist-gray-40);
48
+ --semantic-color-surface-chip-selected: var(--primitive-color-mist-gray-90);
49
+ --semantic-color-surface-notification-card: var(--primitive-color-mist-gray-40);
50
+ --semantic-color-surface-selection-active: var(--primitive-color-green-60);
51
+ --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-50);
52
+ --semantic-color-surface-toast: var(--primitive-color-mist-gray-60);
53
+ --semantic-color-surface-white: var(--primitive-color-white);
54
+ --semantic-color-surface-black: var(--primitive-color-mist-gray-10);
55
+
56
+ /* onSurface */
57
+ --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
58
+ --semantic-color-on-surface-default-success: var(--primitive-color-green-70);
59
+ --semantic-color-on-surface-main: var(--primitive-color-mist-gray-99);
60
+ --semantic-color-on-surface-main-selected: var(--primitive-color-mist-gray-30);
61
+ --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-60);
62
+ --semantic-color-on-surface-accent: var(--primitive-color-mist-gray-90);
63
+ --semantic-color-on-surface-button: var(--primitive-color-white);
64
+ --semantic-color-on-surface-white: var(--primitive-color-white);
65
+ --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
66
+
67
+ /* stroke */
68
+ --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
69
+ --semantic-color-stroke-default-success: var(--primitive-color-green-70);
70
+ --semantic-color-stroke-main: var(--primitive-color-mist-gray-50);
71
+ --semantic-color-stroke-main-focused: var(--primitive-color-white);
72
+ --semantic-color-stroke-sub: var(--primitive-color-mist-gray-50);
73
+ --semantic-color-stroke-accent: var(--primitive-color-white);
74
+ --semantic-color-stroke-button: var(--primitive-color-mist-gray-95);
75
+ --semantic-color-stroke-selection-active: var(--primitive-color-green-60);
76
+ --semantic-color-stroke-selection-inactive: var(--primitive-color-white);
77
+ --semantic-color-stroke-tab: var(--primitive-color-mist-gray-99);
78
+
79
+ /* scrim */
80
+ --semantic-color-scrim-default: var(--primitive-color-black);
81
+ }
package/css/color-semantic-mono-white.css ADDED
@@ -0,0 +1,81 @@
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-default: var(--primitive-color-mist-gray-95);
15
+
16
+ /* onBackground */
17
+ --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
18
+
19
+ /* surface */
20
+ --semantic-color-surface-default: var(--primitive-color-white);
21
+ --semantic-color-surface-default-hover: var(--primitive-color-mist-gray-99);
22
+ --semantic-color-surface-default-focused: var(--primitive-color-mist-gray-90);
23
+ --semantic-color-surface-default-pressed: var(--primitive-color-mist-gray-90);
24
+ --semantic-color-surface-default-selected: var(--primitive-color-mist-gray-80);
25
+ --semantic-color-surface-default-handle: var(--primitive-color-mist-gray-50);
26
+ --semantic-color-surface-default-indicator: var(--primitive-color-mist-gray-50);
27
+ --semantic-color-surface-default-notification: var(--primitive-color-red-orange-60);
28
+ --semantic-color-surface-default-placeholder: var(--primitive-color-mist-gray-80);
29
+ --semantic-color-surface-default-track: 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-focused: var(--primitive-color-mist-gray-30);
36
+ --semantic-color-surface-button-primary-pressed: var(--primitive-color-mist-gray-20);
37
+ --semantic-color-surface-button-secondary: var(--primitive-color-mist-gray-90);
38
+ --semantic-color-surface-button-secondary-hover: var(--primitive-color-mist-gray-80);
39
+ --semantic-color-surface-button-secondary-focused: var(--primitive-color-mist-gray-80);
40
+ --semantic-color-surface-button-secondary-pressed: var(--primitive-color-mist-gray-70);
41
+ --semantic-color-surface-button-tertiary: var(--primitive-color-white);
42
+ --semantic-color-surface-button-tertiary-hover: var(--primitive-color-mist-gray-95);
43
+ --semantic-color-surface-button-tertiary-focused: var(--primitive-color-mist-gray-95);
44
+ --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-mist-gray-90);
45
+ --semantic-color-surface-button-icon: var(--primitive-color-mist-gray-90);
46
+ --semantic-color-surface-button-icon-pressed: var(--primitive-color-mist-gray-70);
47
+ --semantic-color-surface-chip: var(--primitive-color-white);
48
+ --semantic-color-surface-chip-selected: var(--primitive-color-mist-gray-30);
49
+ --semantic-color-surface-notification-card: var(--primitive-color-mist-gray-90);
50
+ --semantic-color-surface-selection-active: var(--primitive-color-mist-gray-40);
51
+ --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-70);
52
+ --semantic-color-surface-toast: var(--primitive-color-mist-gray-10);
53
+ --semantic-color-surface-white: var(--primitive-color-white);
54
+ --semantic-color-surface-black: var(--primitive-color-mist-gray-10);
55
+
56
+ /* onSurface */
57
+ --semantic-color-on-surface-default-error: var(--primitive-color-active-red-50);
58
+ --semantic-color-on-surface-default-success: var(--primitive-color-green-55);
59
+ --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
60
+ --semantic-color-on-surface-main-selected: var(--primitive-color-white);
61
+ --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
62
+ --semantic-color-on-surface-accent: var(--primitive-color-mist-gray-40);
63
+ --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
64
+ --semantic-color-on-surface-white: var(--primitive-color-white);
65
+ --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
66
+
67
+ /* stroke */
68
+ --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
69
+ --semantic-color-stroke-default-success: var(--primitive-color-green-60);
70
+ --semantic-color-stroke-main: var(--primitive-color-mist-gray-90);
71
+ --semantic-color-stroke-main-focused: var(--primitive-color-mist-gray-40);
72
+ --semantic-color-stroke-sub: var(--primitive-color-mist-gray-70);
73
+ --semantic-color-stroke-accent: var(--primitive-color-mist-gray-20);
74
+ --semantic-color-stroke-button: var(--primitive-color-mist-gray-80);
75
+ --semantic-color-stroke-selection-active: var(--primitive-color-mist-gray-40);
76
+ --semantic-color-stroke-selection-inactive: var(--primitive-color-mist-gray-70);
77
+ --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
78
+
79
+ /* scrim */
80
+ --semantic-color-scrim-default: var(--primitive-color-black);
81
+ }
package/css/color-semantic-web.css ADDED
@@ -0,0 +1,81 @@
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-default: var(--primitive-color-mist-gray-95);
15
+
16
+ /* onBackground */
17
+ --semantic-color-on-background-default: var(--primitive-color-mist-gray-10);
18
+
19
+ /* surface */
20
+ --semantic-color-surface-default: var(--primitive-color-white);
21
+ --semantic-color-surface-default-hover: var(--primitive-color-blue-gray-95);
22
+ --semantic-color-surface-default-focused: var(--primitive-color-blue-gray-90);
23
+ --semantic-color-surface-default-pressed: var(--primitive-color-blue-gray-90);
24
+ --semantic-color-surface-default-selected: var(--primitive-color-blue-gray-90);
25
+ --semantic-color-surface-default-handle: var(--primitive-color-blue-gray-80);
26
+ --semantic-color-surface-default-indicator: var(--primitive-color-navy-40);
27
+ --semantic-color-surface-default-notification: var(--primitive-color-blue-green-40);
28
+ --semantic-color-surface-default-placeholder: var(--primitive-color-mist-gray-80);
29
+ --semantic-color-surface-default-track: var(--primitive-color-blue-gray-80);
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-focused: var(--primitive-color-blue-green-30);
36
+ --semantic-color-surface-button-primary-pressed: var(--primitive-color-blue-green-20);
37
+ --semantic-color-surface-button-secondary: var(--primitive-color-blue-gray-90);
38
+ --semantic-color-surface-button-secondary-hover: var(--primitive-color-blue-gray-80);
39
+ --semantic-color-surface-button-secondary-focused: var(--primitive-color-blue-gray-80);
40
+ --semantic-color-surface-button-secondary-pressed: var(--primitive-color-blue-gray-70);
41
+ --semantic-color-surface-button-tertiary: var(--primitive-color-white);
42
+ --semantic-color-surface-button-tertiary-hover: var(--primitive-color-white);
43
+ --semantic-color-surface-button-tertiary-focused: var(--primitive-color-white);
44
+ --semantic-color-surface-button-tertiary-pressed: var(--primitive-color-blue-gray-90);
45
+ --semantic-color-surface-button-icon: var(--primitive-color-blue-gray-90);
46
+ --semantic-color-surface-button-icon-pressed: var(--primitive-color-blue-gray-70);
47
+ --semantic-color-surface-chip: var(--primitive-color-white);
48
+ --semantic-color-surface-chip-selected: var(--primitive-color-navy-40);
49
+ --semantic-color-surface-notification-card: var(--primitive-color-blue-gray-90);
50
+ --semantic-color-surface-selection-active: var(--primitive-color-blue-green-50);
51
+ --semantic-color-surface-selection-inactive: var(--primitive-color-mist-gray-70);
52
+ --semantic-color-surface-toast: var(--primitive-color-blue-gray-10);
53
+ --semantic-color-surface-white: var(--primitive-color-white);
54
+ --semantic-color-surface-black: var(--primitive-color-blue-gray-10);
55
+
56
+ /* onSurface */
57
+ --semantic-color-on-surface-default-error: var(--primitive-color-active-red-60);
58
+ --semantic-color-on-surface-default-success: var(--primitive-color-green-55);
59
+ --semantic-color-on-surface-main: var(--primitive-color-mist-gray-10);
60
+ --semantic-color-on-surface-main-selected: var(--primitive-color-white);
61
+ --semantic-color-on-surface-sub: var(--primitive-color-mist-gray-50);
62
+ --semantic-color-on-surface-accent: var(--primitive-color-blue-green-50);
63
+ --semantic-color-on-surface-button: var(--primitive-color-mist-gray-30);
64
+ --semantic-color-on-surface-white: var(--primitive-color-white);
65
+ --semantic-color-on-surface-black: var(--primitive-color-mist-gray-10);
66
+
67
+ /* stroke */
68
+ --semantic-color-stroke-default-error: var(--primitive-color-active-red-60);
69
+ --semantic-color-stroke-default-success: var(--primitive-color-green-60);
70
+ --semantic-color-stroke-main: var(--primitive-color-blue-gray-80);
71
+ --semantic-color-stroke-main-focused: var(--primitive-color-navy-40);
72
+ --semantic-color-stroke-sub: var(--primitive-color-blue-gray-80);
73
+ --semantic-color-stroke-accent: var(--primitive-color-blue-green-50);
74
+ --semantic-color-stroke-button: var(--primitive-color-blue-gray-80);
75
+ --semantic-color-stroke-selection-active: var(--primitive-color-navy-40);
76
+ --semantic-color-stroke-selection-inactive: var(--primitive-color-mist-gray-70);
77
+ --semantic-color-stroke-tab: var(--primitive-color-mist-gray-10);
78
+
79
+ /* scrim */
80
+ --semantic-color-scrim-default: var(--primitive-color-white);
81
+ }
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,77 @@
1
+ {
2
+ "semantic": {
3
+ "color": {
4
+ "background": {
5
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-99"}
6
+ },
7
+ "on": {
8
+ "background": {
9
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
10
+ },
11
+ "surface": {
12
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
13
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-55"},
14
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"},
15
+ "main-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
16
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
17
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
18
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
19
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
20
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
21
+ }
22
+ },
23
+ "surface": {
24
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
25
+ "default-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-80"},
26
+ "default-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
27
+ "default-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
28
+ "default-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
29
+ "default-handle": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/black"},
30
+ "default-indicator": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/pink-40"},
31
+ "default-notification": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-50"},
32
+ "default-placeholder": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
33
+ "default-track": {"$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-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-40"},
40
+ "button-primary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-30"},
41
+ "button-secondary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
42
+ "button-secondary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
43
+ "button-secondary-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
44
+ "button-secondary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
45
+ "button-tertiary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
46
+ "button-tertiary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
47
+ "button-tertiary-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
48
+ "button-tertiary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
49
+ "button-icon": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
50
+ "button-icon-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
51
+ "chip": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
52
+ "chip-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-50"},
53
+ "notification-card": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
54
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-15"},
55
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
56
+ "toast": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-10"},
57
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
58
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-10"}
59
+ },
60
+ "stroke": {
61
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/red-orange-60"},
62
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-60"},
63
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
64
+ "main-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-30"},
65
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
66
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-50"},
67
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-30"},
68
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-15"},
69
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
70
+ "tab": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
71
+ },
72
+ "scrim": {
73
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/black"}
74
+ }
75
+ }
76
+ }
77
+ }
package/json/color-semantic-mobile.json ADDED
@@ -0,0 +1,77 @@
1
+ {
2
+ "semantic": {
3
+ "color": {
4
+ "background": {
5
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"}
6
+ },
7
+ "on": {
8
+ "background": {
9
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
10
+ },
11
+ "surface": {
12
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
13
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-55"},
14
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"},
15
+ "main-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
16
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
17
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
18
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
19
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
20
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
21
+ }
22
+ },
23
+ "surface": {
24
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
25
+ "default-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-95"},
26
+ "default-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
27
+ "default-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
28
+ "default-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
29
+ "default-handle": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
30
+ "default-indicator": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
31
+ "default-notification": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/red-orange-60"},
32
+ "default-placeholder": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-80"},
33
+ "default-track": {"$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-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-30"},
40
+ "button-primary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-20"},
41
+ "button-secondary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-90"},
42
+ "button-secondary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-80"},
43
+ "button-secondary-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-80"},
44
+ "button-secondary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-70"},
45
+ "button-tertiary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
46
+ "button-tertiary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
47
+ "button-tertiary-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
48
+ "button-tertiary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
49
+ "button-icon": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
50
+ "button-icon-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-70"},
51
+ "chip": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
52
+ "chip-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
53
+ "notification-card": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
54
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-50"},
55
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
56
+ "toast": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-10"},
57
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
58
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-10"}
59
+ },
60
+ "stroke": {
61
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
62
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-60"},
63
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
64
+ "main-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
65
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
66
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-40"},
67
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
68
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/cobalt-blue-50"},
69
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
70
+ "tab": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
71
+ },
72
+ "scrim": {
73
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/black"}
74
+ }
75
+ }
76
+ }
77
+ }
package/json/color-semantic-mono-black.json ADDED
@@ -0,0 +1,77 @@
1
+ {
2
+ "semantic": {
3
+ "color": {
4
+ "background": {
5
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/black"}
6
+ },
7
+ "on": {
8
+ "background": {
9
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-99"}
10
+ },
11
+ "surface": {
12
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
13
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-70"},
14
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-99"},
15
+ "main-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
16
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-60"},
17
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
18
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
19
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
20
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
21
+ }
22
+ },
23
+ "surface": {
24
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
25
+ "default-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"},
26
+ "default-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"},
27
+ "default-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
28
+ "default-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
29
+ "default-handle": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-60"},
30
+ "default-indicator": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
31
+ "default-notification": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/red-orange-60"},
32
+ "default-placeholder": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-60"},
33
+ "default-track": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
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-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
40
+ "button-primary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
41
+ "button-secondary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
42
+ "button-secondary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
43
+ "button-secondary-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
44
+ "button-secondary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
45
+ "button-tertiary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
46
+ "button-tertiary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
47
+ "button-tertiary-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
48
+ "button-tertiary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
49
+ "button-icon": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
50
+ "button-icon-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
51
+ "chip": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
52
+ "chip-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
53
+ "notification-card": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
54
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-60"},
55
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
56
+ "toast": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-60"},
57
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
58
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
59
+ },
60
+ "stroke": {
61
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
62
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-70"},
63
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
64
+ "main-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
65
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
66
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
67
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"},
68
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-60"},
69
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
70
+ "tab": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-99"}
71
+ },
72
+ "scrim": {
73
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/black"}
74
+ }
75
+ }
76
+ }
77
+ }
package/json/color-semantic-mono-white.json ADDED
@@ -0,0 +1,77 @@
1
+ {
2
+ "semantic": {
3
+ "color": {
4
+ "background": {
5
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"}
6
+ },
7
+ "on": {
8
+ "background": {
9
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
10
+ },
11
+ "surface": {
12
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-50"},
13
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-55"},
14
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"},
15
+ "main-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
16
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
17
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
18
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
19
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
20
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
21
+ }
22
+ },
23
+ "surface": {
24
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
25
+ "default-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-99"},
26
+ "default-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
27
+ "default-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
28
+ "default-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-80"},
29
+ "default-handle": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
30
+ "default-indicator": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
31
+ "default-notification": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/red-orange-60"},
32
+ "default-placeholder": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-80"},
33
+ "default-track": {"$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-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
40
+ "button-primary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-20"},
41
+ "button-secondary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
42
+ "button-secondary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-80"},
43
+ "button-secondary-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-80"},
44
+ "button-secondary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
45
+ "button-tertiary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
46
+ "button-tertiary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"},
47
+ "button-tertiary-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"},
48
+ "button-tertiary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
49
+ "button-icon": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
50
+ "button-icon-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
51
+ "chip": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
52
+ "chip-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
53
+ "notification-card": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
54
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
55
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
56
+ "toast": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"},
57
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
58
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
59
+ },
60
+ "stroke": {
61
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
62
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-60"},
63
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-90"},
64
+ "main-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
65
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
66
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-20"},
67
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-80"},
68
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-40"},
69
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
70
+ "tab": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
71
+ },
72
+ "scrim": {
73
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/black"}
74
+ }
75
+ }
76
+ }
77
+ }
package/json/color-semantic-web.json ADDED
@@ -0,0 +1,77 @@
1
+ {
2
+ "semantic": {
3
+ "color": {
4
+ "background": {
5
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-95"}
6
+ },
7
+ "on": {
8
+ "background": {
9
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
10
+ },
11
+ "surface": {
12
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
13
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-55"},
14
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"},
15
+ "main-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
16
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-50"},
17
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-50"},
18
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-30"},
19
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
20
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
21
+ }
22
+ },
23
+ "surface": {
24
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
25
+ "default-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-95"},
26
+ "default-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
27
+ "default-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
28
+ "default-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
29
+ "default-handle": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
30
+ "default-indicator": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/navy-40"},
31
+ "default-notification": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-40"},
32
+ "default-placeholder": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-80"},
33
+ "default-track": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
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-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-30"},
40
+ "button-primary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-20"},
41
+ "button-secondary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
42
+ "button-secondary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
43
+ "button-secondary-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
44
+ "button-secondary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-70"},
45
+ "button-tertiary": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
46
+ "button-tertiary-hover": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
47
+ "button-tertiary-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
48
+ "button-tertiary-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
49
+ "button-icon": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
50
+ "button-icon-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-70"},
51
+ "chip": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
52
+ "chip-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/navy-40"},
53
+ "notification-card": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-90"},
54
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-50"},
55
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
56
+ "toast": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-10"},
57
+ "white": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"},
58
+ "black": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-10"}
59
+ },
60
+ "stroke": {
61
+ "default-error": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-60"},
62
+ "default-success": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/green-60"},
63
+ "main": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
64
+ "main-focused": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/navy-40"},
65
+ "sub": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
66
+ "accent": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-green-50"},
67
+ "button": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/blue-gray-80"},
68
+ "selection-active": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/navy-40"},
69
+ "selection-inactive": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-70"},
70
+ "tab": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/mist-gray-10"}
71
+ },
72
+ "scrim": {
73
+ "default": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/white"}
74
+ }
75
+ }
76
+ }
77
+ }
package/package.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "@enovaui/mobile-tokens",
3
+ "version": "0.6.0",
4
+ "description": "Theme design tokens for mobile",
5
+ "main": "index.js",
6
+ "license": "Apache-2.0",
7
+ "keywords": [
8
+ "design",
9
+ "tokens",
10
+ "mobile"
11
+ ],
12
+ "dependencies": {
13
+ "@enovaui/core-tokens": "^0.6.0"
14
+ }
15
+ }