@enovaui/mobile-tokens 0.6.0 → 0.7.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.
- package/CHANGELOG.md +4 -0
- package/README.md +17 -4
- package/css/color-semantic-lg-brand.css +2 -2
- package/css/color-semantic-mobile.css +1 -1
- package/css/color-semantic-mono-black.css +1 -1
- package/css/color-semantic-mono-white.css +1 -1
- package/css/color-semantic-web.css +1 -1
- package/index.js +1 -1
- package/json/color-semantic-lg-brand.json +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,14 +1,20 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @enovaui/mobile-tokens
|
|
2
|
+
[](https://www.npmjs.com/package/@enovaui/mobile-tokens) [](http://www.apache.org/licenses/LICENSE-2.0)
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
Semantic design tokens for mobile applications in the LG UI Kit design system.
|
|
4
5
|
|
|
5
6
|
## Overview
|
|
6
7
|
|
|
7
|
-
This package contains design tokens
|
|
8
|
+
This package contains semantic design tokens specifically crafted for mobile applications. These tokens map primitive values from `@enovaui/core-tokens` to meaningful, context-specific design properties.
|
|
8
9
|
|
|
9
10
|
### What are Semantic Tokens?
|
|
10
11
|
|
|
11
|
-
Semantic tokens
|
|
12
|
+
Semantic tokens translate primitive values into purpose-driven design tokens. They provide:
|
|
13
|
+
|
|
14
|
+
* **Meaningful Names**: Tokens are named by their purpose (e.g., `on-background-main`) rather than their value
|
|
15
|
+
* **Context-Aware Values**: Values are appropriate for specific UI contexts in mobile applications
|
|
16
|
+
* **Consistent Theming**: A standardized token structure for mobile theming
|
|
17
|
+
* **Platform Optimization**: Values are optimized for mobile displays
|
|
12
18
|
|
|
13
19
|
## Installation
|
|
14
20
|
|
|
@@ -31,6 +37,13 @@ To incorporate these design tokens into your project, follow these simple steps:
|
|
|
31
37
|
1. Import the desired token values from this repository.
|
|
32
38
|
2. Apply the imported tokens to your components and styles.
|
|
33
39
|
|
|
40
|
+
### Token Categories
|
|
41
|
+
|
|
42
|
+
* `color-semantic-lg-brand`: Semantic color tokens optimized for LG brand identity, featuring warm grays and red accent colors with a focus on clean, modern aesthetics
|
|
43
|
+
* `color-semantic-mobile`: Mobile-optimized color tokens using cobalt blue as the primary accent color with crisp, clear states for touch interactions
|
|
44
|
+
* `color-semantic-mono-black`: Dark theme color tokens with mist gray variations, optimized for OLED displays and dark mode interfaces
|
|
45
|
+
* `color-semantic-mono-white`: Light theme color tokens with bright, minimal design using mist gray scales for subtle depth
|
|
46
|
+
* `color-semantic-web`: Web-focused color tokens using blue-gray and blue-green combinations for responsive layouts
|
|
34
47
|
|
|
35
48
|
## Copyright and License Information
|
|
36
49
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
|
|
3
|
-
* SPDX-License-Identifier:
|
|
3
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
@import "@enovaui/core-tokens/css/color-primitive.css";
|
|
@@ -23,7 +23,7 @@ Semantic Color Tokens
|
|
|
23
23
|
--semantic-color-surface-default-pressed: var(--primitive-color-warm-gray-75);
|
|
24
24
|
--semantic-color-surface-default-selected: var(--primitive-color-warm-gray-75);
|
|
25
25
|
--semantic-color-surface-default-handle: var(--primitive-color-black);
|
|
26
|
-
--semantic-color-surface-default-indicator: var(--primitive-color-
|
|
26
|
+
--semantic-color-surface-default-indicator: var(--primitive-color-heritage-red-40);
|
|
27
27
|
--semantic-color-surface-default-notification: var(--primitive-color-active-red-50);
|
|
28
28
|
--semantic-color-surface-default-placeholder: var(--primitive-color-warm-gray-60);
|
|
29
29
|
--semantic-color-surface-default-track: var(--primitive-color-warm-gray-75);
|
package/index.js
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"default-pressed": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
|
|
28
28
|
"default-selected": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
|
|
29
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/
|
|
30
|
+
"default-indicator": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/heritage-red-40"},
|
|
31
31
|
"default-notification": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-50"},
|
|
32
32
|
"default-placeholder": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
|
|
33
33
|
"default-track": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@enovaui/mobile-tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "Theme design tokens for mobile",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -10,6 +10,6 @@
|
|
|
10
10
|
"mobile"
|
|
11
11
|
],
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@enovaui/core-tokens": "^0.
|
|
13
|
+
"@enovaui/core-tokens": "^0.7.0"
|
|
14
14
|
}
|
|
15
15
|
}
|