@enovaui/web-tokens

Semantic design tokens for web applications in the LG UI Kit design system.

Overview

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 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

To install the package, use your preferred package manager:

npm install @enovaui/web-tokens

yarn add @enovaui/web-tokens

How to Use

To incorporate these design tokens into your project, follow these simple steps:

Import the desired token values from this repository.
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

Unless otherwise specified, all content, including all source code files and documentation files in this repository are:

Unless otherwise specified or set forth in the NOTICE file, all content, including all source code files and documentation files in this repository are: Licensed under the Apache License, Version 2.0 (the "License"); you may not use this content except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.