@enovaui/web-tokens 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 The following is a curated list of changes in the web tokens module, newest changes on the top.
 
+## [0.8.0] - 2025-07-14
+
+- No significant changes
+
+## [0.7.0] - 2025-07-04
+
+- No significant changes
+
 ## [0.6.0] - 2025-06-11
 
 - Initial release

package/README.md

@@ -1,14 +1,20 @@
-# Web Tokens
+# @enovaui/web-tokens
+[![npm (scoped)](https://img.shields.io/npm/v/%40enovaui%2Fweb-tokens)](https://www.npmjs.com/package/@enovaui/web-tokens) [![license](https://img.shields.io/github/license/enovaui/design-tokens)](http://www.apache.org/licenses/LICENSE-2.0)
 
-Design tokens for web platforms.
+Semantic design tokens for web applications in the LG UI Kit design system.
 
 ## Overview
 
-This package contains design tokens that define visual attributes for web applications. Design tokens help maintain consistency and enable theming across the ecosystem.
+This package contains semantic design tokens specifically crafted for web applications. These tokens map primitive values from `@enovaui/core-tokens` to meaningful, context-specific design properties.
 
 ### What are Semantic Tokens?
 
-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.
+Semantic tokens translate primitive values into purpose-driven design tokens. They provide:
+
+* **Meaningful Names**: Tokens are named by their purpose (e.g., `on-background-main`) rather than their value
+* **Context-Aware Values**: Values are appropriate for specific UI contexts in web applications
+* **Consistent Theming**: A standardized token structure for web theming
+* **Platform Optimization**: Values are optimized for web browsers and responsive layouts
 
 ## Installation
 
@@ -31,6 +37,13 @@ To incorporate these design tokens into your project, follow these simple steps:
 1. Import the desired token values from this repository.
 2. Apply the imported tokens to your components and styles.
 
+### Token Categories
+
+* `color-semantic-lg-brand`: Semantic color tokens optimized for LG brand identity, featuring warm grays and accent reds
+* `color-semantic-mobile`: Mobile-specific color tokens with cobalt blue as the primary accent color
+* `color-semantic-mono-black`: Dark theme color tokens with mist gray variations for a monochromatic look
+* `color-semantic-mono-white`: Light theme color tokens with a clean, minimalist white-based design
+* `color-semantic-web`: Web-specific color tokens using blue-gray and blue-green combinations for a modern web interface
 
 ## Copyright and License Information
 

package/css/color-semantic-lg-brand.css

@@ -1,6 +1,6 @@
 /*
  * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
- * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
+ * SPDX-License-Identifier: Apache-2.0
  */
 
 @import "@enovaui/core-tokens/css/color-primitive.css";
@@ -19,7 +19,7 @@ Semantic Color Tokens
 
 	/* surface */
 	--semantic-color-surface-default-handle: var(--primitive-color-black);
-	--semantic-color-surface-default-indicator: var(--primitive-color-pink-40);
+	--semantic-color-surface-default-indicator: var(--primitive-color-heritage-red-40);
 	--semantic-color-surface-default-notification: var(--primitive-color-active-red-50);
 	--semantic-color-surface-default-placeholder: var(--primitive-color-warm-gray-60);
 	--semantic-color-surface-default-track: var(--primitive-color-warm-gray-75);

package/css/color-semantic-mobile.css

@@ -1,6 +1,6 @@
 /*
  * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
- * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
+ * SPDX-License-Identifier: Apache-2.0
  */
 
 @import "@enovaui/core-tokens/css/color-primitive.css";

package/css/color-semantic-mono-black.css

@@ -1,6 +1,6 @@
 /*
  * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
- * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
+ * SPDX-License-Identifier: Apache-2.0
  */
 
  @import "@enovaui/core-tokens/css/color-primitive.css";

package/css/color-semantic-mono-white.css

@@ -1,6 +1,6 @@
 /*
  * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
- * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
+ * SPDX-License-Identifier: Apache-2.0
  */
 
  @import "@enovaui/core-tokens/css/color-primitive.css";

package/css/color-semantic-web.css

@@ -1,6 +1,6 @@
 /*
  * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
- * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
+ * SPDX-License-Identifier: Apache-2.0
  */
 
 @import "@enovaui/core-tokens/css/color-primitive.css";

package/index.js

@@ -1,6 +1,6 @@
 /*
  * SPDX-FileCopyrightText: Copyright 2025 LG Electronics Inc.
- * SPDX-License-Identifier: LicenseRef-LGE-Proprietary
+ * SPDX-License-Identifier: Apache-2.0
  */
 
 // This space intentionally left blank

package/json/color-semantic-lg-brand.json

@@ -23,7 +23,7 @@
             },
             "surface": {
                 "default-handle": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/black"},
-                "default-indicator": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/pink-40"},
+                "default-indicator": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/heritage-red-40"},
                 "default-notification": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/active-red-50"},
                 "default-placeholder": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-60"},
                 "default-track": {"$ref": "core-tokens/json/color-primitive.json#/primitive/color/warm-gray-75"},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enovaui/web-tokens",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Theme design tokens for web",
   "main": "index.js",
   "license": "Apache-2.0",
@@ -10,6 +10,6 @@
     "web"
   ],
   "dependencies": {
-    "@enovaui/core-tokens": "^0.6.0"
+    "@enovaui/core-tokens": "^0.8.0"
   }
 }