@enovaui/core-tokens 0.6.0 → 0.8.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 (10) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/README.md +22 -7
  3. package/css/color-primitive.css +28 -28
  4. package/css/radius-primitive.css +2 -1
  5. package/css/spacing-primitive.css +1 -1
  6. package/css/typography-primitive.css +1 -1
  7. package/index.js +1 -1
  8. package/json/color-primitive.json +25 -25
  9. package/json/radius-primitive.json +2 -1
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,27 @@
2
2
 
3
3
  The following is a curated list of changes in the core tokens module, newest changes on the top.
4
4
 
5
+ ## [0.8.0] - 2025-07-14
6
+
7
+ ### Changed
8
+
9
+ - `primitive-color-deep-orange-30` value to `#b43e1a`
10
+ - `primitive-color-deep-orange-35` value to `#cd4b1e`
11
+ - `primitive-color-deep-orange-40` value to `#ea561e`
12
+ - `primitive-color-deep-orange-45` value to `#ff6224`
13
+
14
+ ### Added
15
+
16
+ - `primitive-radius-54` value
17
+
18
+ ## [0.7.0] - 2025-07-04
19
+
20
+ ### Changed
21
+
22
+ - `primitive-color-pink` to `primitive-color-heritage-red`
23
+ - `primitive-color-active-red-55` value to `#fd312e`
24
+ - `primitive-color-heritage-red-35` value to `#a50034`
25
+
5
26
  ## [0.6.0] - 2025-06-11
6
27
 
7
28
  - No significant changes
package/README.md CHANGED
@@ -1,12 +1,20 @@
1
1
  # @enovaui/core-tokens
2
+ [![npm (scoped)](https://img.shields.io/npm/v/%40enovaui%2Fcore-tokens)](https://www.npmjs.com/package/@enovaui/core-tokens) [![license](https://img.shields.io/github/license/enovaui/design-tokens)](http://www.apache.org/licenses/LICENSE-2.0)
3
+
4
+ Core design tokens package for the LG UI Kit design system.
2
5
 
3
6
  ## Overview
4
7
 
5
- This package provides the foundational design tokens used across the `enovaui` ecosystem.
8
+ This package provides the foundational, primitive design tokens used across the `enovaui` ecosystem. These tokens serve as the building blocks for all visual attributes in the LG UI Kit.
6
9
 
7
10
  ### What are Primitive Tokens?
8
11
 
9
- Primitive tokens are the raw values that defines visual attributes such as colors, typography, spacing, and more. They serve as the foundational building blocks of a design system and can be referenced by other tokens to ensure consistency and scalability.
12
+ Primitive tokens represent the most basic visual values in our design system:
13
+
14
+ * **Colors**: Base color palette
15
+ * **Typography**: Font sizes, weights, and line heights
16
+ * **Spacing**: Standard spacing and layout measurements
17
+ * **Radius**: Border radius values for consistent component shapes
10
18
 
11
19
  ## Installation
12
20
 
@@ -22,13 +30,20 @@ or
22
30
  yarn add @enovaui/core-tokens
23
31
  ```
24
32
 
25
- ### How to Use
26
-
27
- To incorporate these design tokens into your project, follow these simple steps:
33
+ ### Token Structure
28
34
 
29
- 1. Import the desired token values from this repository.
30
- 2. Apply the imported tokens to your components and styles.
35
+ The tokens are organized in the following categories:
31
36
 
37
+ * `color-primitive`: Base color values including:
38
+ - Gray scales (neutral, mist, cool, blue, warm)
39
+ - Brand colors (active red)
40
+ - Accent colors (orange, yellow, green, blue variants)
41
+ - Each color has a range from 5 to 99 for precise theming control
42
+ * `typography-primitive`: Typography-related values including:
43
+ - Font sizes from 10px to 180px
44
+ - Font weights from thin (100) to black (900)
45
+ * `spacing-primitive`: Spacing and sizing values from 2px to 156px for consistent layouts
46
+ * `radius-primitive`: Border radius values from 0 to 999px for component shapes
32
47
 
33
48
  ## Copyright and License Information
34
49
 
package/css/color-primitive.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*
2
2
  * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
3
- * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
3
+ * SPDX-License-Identifier: Apache-2.0
4
4
  */
5
-
5
+
6
6
  /* color-primitive.css */
7
7
 
8
8
  /* ----------------------------------------
@@ -142,7 +142,7 @@ Primitive Color Tokens
142
142
  --primitive-color-active-red-40: #c00011;
143
143
  --primitive-color-active-red-45: #d40b14;
144
144
  --primitive-color-active-red-50: #ea1917;
145
- --primitive-color-active-red-55: #f93430;
145
+ --primitive-color-active-red-55: #fd312e;
146
146
  --primitive-color-active-red-60: #ff5449;
147
147
  --primitive-color-active-red-65: #ff6b63;
148
148
  --primitive-color-active-red-70: #ff897d;
@@ -183,10 +183,10 @@ Primitive Color Tokens
183
183
  --primitive-color-deep-orange-15: #4a2114;
184
184
  --primitive-color-deep-orange-20: #662c1a;
185
185
  --primitive-color-deep-orange-25: #80361f;
186
- --primitive-color-deep-orange-30: #994227;
187
- --primitive-color-deep-orange-35: #b24d2c;
188
- --primitive-color-deep-orange-40: #cc5834;
189
- --primitive-color-deep-orange-45: #e8623b;
186
+ --primitive-color-deep-orange-30: #b43e1a;
187
+ --primitive-color-deep-orange-35: #cd4b1e;
188
+ --primitive-color-deep-orange-40: #ea561e;
189
+ --primitive-color-deep-orange-45: #ff6224;
190
190
  --primitive-color-deep-orange-50: #ff6e42;
191
191
  --primitive-color-deep-orange-55: #ff7f54;
192
192
  --primitive-color-deep-orange-60: #ff8b67;
@@ -475,28 +475,28 @@ Primitive Color Tokens
475
475
  --primitive-color-purple-95: #feeafe;
476
476
  --primitive-color-purple-99: #fefbff;
477
477
 
478
- /* Pink
478
+ /* Heritage-red
479
479
  --------------------------------------- */
480
- --primitive-color-pink-5: #20000c;
481
- --primitive-color-pink-10: #400017;
482
- --primitive-color-pink-15: #530021;
483
- --primitive-color-pink-20: #66002a;
484
- --primitive-color-pink-25: #780034;
485
- --primitive-color-pink-30: #8f003e;
486
- --primitive-color-pink-35: #a30244;
487
- --primitive-color-pink-40: #c60449;
488
- --primitive-color-pink-45: #d91757;
489
- --primitive-color-pink-50: #db3265;
490
- --primitive-color-pink-55: #ed3f76;
491
- --primitive-color-pink-60: #fe4e87;
492
- --primitive-color-pink-65: #ff6997;
493
- --primitive-color-pink-70: #ff84a6;
494
- --primitive-color-pink-75: #ffa0b5;
495
- --primitive-color-pink-80: #ffb1c3;
496
- --primitive-color-pink-85: #ffc5d2;
497
- --primitive-color-pink-90: #ffd9e1;
498
- --primitive-color-pink-95: #ffecef;
499
- --primitive-color-pink-99: #fffbfe;
480
+ --primitive-color-heritage-red-5: #20000c;
481
+ --primitive-color-heritage-red-10: #400017;
482
+ --primitive-color-heritage-red-15: #530021;
483
+ --primitive-color-heritage-red-20: #66002a;
484
+ --primitive-color-heritage-red-25: #780034;
485
+ --primitive-color-heritage-red-30: #8f003e;
486
+ --primitive-color-heritage-red-35: #a50034;
487
+ --primitive-color-heritage-red-40: #c60449;
488
+ --primitive-color-heritage-red-45: #d91757;
489
+ --primitive-color-heritage-red-50: #db3265;
490
+ --primitive-color-heritage-red-55: #ed3f76;
491
+ --primitive-color-heritage-red-60: #fe4e87;
492
+ --primitive-color-heritage-red-65: #ff6997;
493
+ --primitive-color-heritage-red-70: #ff84a6;
494
+ --primitive-color-heritage-red-75: #ffa0b5;
495
+ --primitive-color-heritage-red-80: #ffb1c3;
496
+ --primitive-color-heritage-red-85: #ffc5d2;
497
+ --primitive-color-heritage-red-90: #ffd9e1;
498
+ --primitive-color-heritage-red-95: #ffecef;
499
+ --primitive-color-heritage-red-99: #fffbfe;
500
500
 
501
501
  /* Red Brown
502
502
  --------------------------------------- */
package/css/radius-primitive.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /*
2
2
  * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
3
- * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
3
+ * SPDX-License-Identifier: Apache-2.0
4
4
  */
5
5
 
6
6
  /* radius-primitive.css */
@@ -25,6 +25,7 @@ Primitive Radius Tokens
25
25
  --primitive-radius-40: 40px;
26
26
  --primitive-radius-44: 44px;
27
27
  --primitive-radius-48: 48px;
28
+ --primitive-radius-54: 54px;
28
29
  --primitive-radius-60: 60px;
29
30
  --primitive-radius-999: 999px;
30
31
  }
package/css/spacing-primitive.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /*
2
2
  * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
3
- * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
3
+ * SPDX-License-Identifier: Apache-2.0
4
4
  */
5
5
 
6
6
  /* spacing-primitive.css */
package/css/typography-primitive.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /*
2
2
  * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
3
- * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
3
+ * SPDX-License-Identifier: Apache-2.0
4
4
  */
5
5
 
6
6
  /* typography-primitive.css */
package/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /*
2
2
  * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
3
- * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
3
+ * SPDX-License-Identifier: Apache-2.0
4
4
  */
5
5
 
6
6
  // This space intentionally left blank
package/json/color-primitive.json CHANGED
@@ -113,7 +113,7 @@
113
113
  "active-red-40": "#c00011",
114
114
  "active-red-45": "#d40b14",
115
115
  "active-red-50": "#ea1917",
116
- "active-red-55": "#f93430",
116
+ "active-red-55": "#fd312e",
117
117
  "active-red-60": "#ff5449",
118
118
  "active-red-65": "#ff6b63",
119
119
  "active-red-70": "#ff897d",
@@ -148,10 +148,10 @@
148
148
  "deep-orange-15": "#4a2114",
149
149
  "deep-orange-20": "#662c1a",
150
150
  "deep-orange-25": "#80361f",
151
- "deep-orange-30": "#994227",
152
- "deep-orange-35": "#b24d2c",
153
- "deep-orange-40": "#cc5834",
154
- "deep-orange-45": "#e8623b",
151
+ "deep-orange-30": "#b43e1a",
152
+ "deep-orange-35": "#cd4b1e",
153
+ "deep-orange-40": "#ea561e",
154
+ "deep-orange-45": "#ff6224",
155
155
  "deep-orange-50": "#ff6e42",
156
156
  "deep-orange-55": "#ff7f54",
157
157
  "deep-orange-60": "#ff8b67",
@@ -403,26 +403,26 @@
403
403
  "purple-90": "#ffd5ff",
404
404
  "purple-95": "#feeafe",
405
405
  "purple-99": "#fefbff",
406
- "pink-5": "#20000c",
407
- "pink-10": "#400017",
408
- "pink-15": "#530021",
409
- "pink-20": "#66002a",
410
- "pink-25": "#780034",
411
- "pink-30": "#8f003e",
412
- "pink-35": "#a30244",
413
- "pink-40": "#c60449",
414
- "pink-45": "#d91757",
415
- "pink-50": "#db3265",
416
- "pink-55": "#ed3f76",
417
- "pink-60": "#fe4e87",
418
- "pink-65": "#ff6997",
419
- "pink-70": "#ff84a6",
420
- "pink-75": "#ffa0b5",
421
- "pink-80": "#ffb1c3",
422
- "pink-85": "#ffc5d2",
423
- "pink-90": "#ffd9e1",
424
- "pink-95": "#ffecef",
425
- "pink-99": "#fffbfe",
406
+ "heritage-red-5": "#20000c",
407
+ "heritage-red-10": "#400017",
408
+ "heritage-red-15": "#530021",
409
+ "heritage-red-20": "#66002a",
410
+ "heritage-red-25": "#780034",
411
+ "heritage-red-30": "#8f003e",
412
+ "heritage-red-35": "#a50034",
413
+ "heritage-red-40": "#c60449",
414
+ "heritage-red-45": "#d91757",
415
+ "heritage-red-50": "#db3265",
416
+ "heritage-red-55": "#ed3f76",
417
+ "heritage-red-60": "#fe4e87",
418
+ "heritage-red-65": "#ff6997",
419
+ "heritage-red-70": "#ff84a6",
420
+ "heritage-red-75": "#ffa0b5",
421
+ "heritage-red-80": "#ffb1c3",
422
+ "heritage-red-85": "#ffc5d2",
423
+ "heritage-red-90": "#ffd9e1",
424
+ "heritage-red-95": "#ffecef",
425
+ "heritage-red-99": "#fffbfe",
426
426
  "red-brown-5": "#200001",
427
427
  "red-brown-10": "#410102",
428
428
  "red-brown-15": "#500d0b",
package/json/radius-primitive.json CHANGED
@@ -15,7 +15,8 @@
15
15
  "radius-40": "40px",
16
16
  "radius-44": "44px",
17
17
  "radius-48": "48px",
18
+ "radius-54": "54px",
18
19
  "radius-60": "60px",
19
- "radius-999": "999x"
20
+ "radius-999": "999px"
20
21
  }
21
22
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enovaui/core-tokens",
3
- "version": "0.6.0",
3
+ "version": "0.8.0",
4
4
  "description": "Core design tokens",
5
5
  "main": "index.js",
6
6
  "license": "Apache-2.0",