@asafarim/design-tokens 0.4.5 → 0.4.9

package/CHANGELOG.md

@@ -1,20 +1,26 @@
-# Changelog
-
-All notable changes to `@asafarim/design-tokens` will be documented in this file.
-
-This project follows [Semantic Versioning](https://semver.org/).
-
-## 0.4.4
-
-- Added automated GitHub Pages demo deployment
-- Demo app now deployed to https://alisafari-it.github.io/design-tokens/
-- Fixed GitHub Actions workflow environment configuration
-- Updated package homepage to point to live demo
-
-## 0.1.0
-
-- Initial release.
-- Added token model with strongly typed token tree.
-- Added CSS variable output (`--asm-*`) for base + light/dark/high-contrast + density + RTL.
-- Added theme helpers (`applyThemeToElement`, `prefersColorScheme`).
-- Added build helpers (`toCssVars`, `toJson`, `validateTokens`).
+# Changelog
+
+All notable changes to `@asafarim/design-tokens` will be documented in this file.
+
+This project follows [Semantic Versioning](https://semver.org/).
+
+## 0.4.6
+
+- Fixed GitHub Actions workflow to work without lock file
+- Removed frozen-lockfile requirement from CI/CD
+- Made package independent from monorepo workspace
+
+## 0.4.4
+
+- Added automated GitHub Pages demo deployment
+- Demo app now deployed to https://alisafari-it.github.io/design-tokens/
+- Fixed GitHub Actions workflow environment configuration
+- Updated package homepage to point to live demo
+
+## 0.1.0
+
+- Initial release.
+- Added token model with strongly typed token tree.
+- Added CSS variable output (`--asm-*`) for base + light/dark/high-contrast + density + RTL.
+- Added theme helpers (`applyThemeToElement`, `prefersColorScheme`).
+- Added build helpers (`toCssVars`, `toJson`, `validateTokens`).

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 ASafariM
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 ASafariM
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,139 +1,139 @@
-# @asafarim/design-tokens
-
-A production-grade design-tokens package for the ASafariM ecosystem.
-
-This package provides:
-
-- CSS variables (runtime theming) for:
-  - light / dark / high-contrast
-  - density (compact / comfortable)
-  - RTL support (logical property guidance)
-- TypeScript exports for strongly-typed token consumption
-- Programmatic theming helpers (SSR-safe)
-- Validation utilities for safe token evolution
-
-## Why design tokens
-
-Design tokens are the single source of truth for design decisions (color, typography, spacing, motion…).
-
-- **Consistency** across apps (React/Angular/Vue/vanilla)
-- **Themeability** at runtime via CSS variables
-- **Governance**: controlled evolution with semantic versioning
-
-## Install
-
-From the monorepo root (pnpm workspaces):
-
-```bash
-pnpm -C packages/design-tokens build
-```
-
-In a consuming package/app:
-
-```bash
-pnpm add @asafarim/design-tokens
-```
-
-## CSS usage (any framework)
-
-Import the CSS entrypoint once at app startup:
-
-```ts
-import "@asafarim/design-tokens/css";
-```
-
-This ships a layered CSS setup:
-
-1. `:root` base tokens (spacing, typography, motion, radii, z-index…)
-2. `[data-theme]` theme tokens (colors, surfaces)
-3. `[data-density]` density tokens
-4. `[dir="rtl"]` RTL helpers
-
-### Playground screenshots
-
-![Design tokens playground (light)](./demo/public/design-tokens-light.png)
-
-![Design tokens playground (dark)](./demo/public/design-tokens-dark.png)
-
-### Theme switching
-
-```ts
-document.documentElement.dataset.theme = "light";
-// or
-document.documentElement.dataset.theme = "dark";
-// or
-document.documentElement.dataset.contrast = "high";
-```
-
-### Density switching
-
-```ts
-document.documentElement.dataset.density = "compact";
-// or
-document.documentElement.dataset.density = "comfortable";
-```
-
-## TypeScript usage
-
-```ts
-import { tokens, themes, applyThemeToElement } from "@asafarim/design-tokens";
-
-console.log(tokens.color.brand.primary500.value); // "#3A5AFE"
-
-applyThemeToElement(document.documentElement, themes.light);
-```
-
-### Accessing CSS variable names
-
-```ts
-import { cssVarNames } from "@asafarim/design-tokens";
-
-// dot-path -> CSS var
-console.log(cssVarNames["color.brand.primary500"]); // "--asm-color-brand-primary-500"
-```
-
-## SSR safety
-
-- `prefersColorScheme()` will not crash when `window` is unavailable.
-- `applyThemeToElement()` can be used in tests or SSR hydration flows.
-
-## Client overrides (branding)
-
-You can apply partial overrides without forking the package:
-
-```ts
-import { applyThemeToElement, themes } from "@asafarim/design-tokens";
-
-applyThemeToElement(document.documentElement, themes.light, {
-  overrides: {
-    "--asm-color-brand-primary-500": "#00A3FF"
-  }
-});
-```
-
-## High-contrast + reduced motion guidance
-
-- High contrast is enabled using `[data-contrast="high"]`.
-- Reduced motion is handled via `@media (prefers-reduced-motion: reduce)` and the motion preset tokens.
-
-## Contribution rules (token governance)
-
-- **Never rename or delete** existing semantic token keys in a minor/patch release.
-- **Prefer adding** new semantic tokens, deprecating old ones with `meta.deprecated`.
-- When changing a value of an existing token:
-  - Patch: only if it’s a clear bug fix (e.g., invalid color)
-  - Minor: safe visual adjustments
-  - Major: visual/systemic shifts
-
-Run validation before publishing:
-
-```bash
-pnpm -C packages/design-tokens build
-node -e "import('@asafarim/design-tokens').then(m => console.log(m.validateTokens()))"
-```
-
-## Versioning rules
-
-- **PATCH**: bug fixes, documentation, token metadata
-- **MINOR**: additive tokens, new themes, non-breaking build changes
-- **MAJOR**: renames/removals, behavior changes in theming helpers, breaking token semantics
+# @asafarim/design-tokens
+
+A production-grade design-tokens package for the ASafariM ecosystem.
+
+This package provides:
+
+- CSS variables (runtime theming) for:
+  - light / dark / high-contrast
+  - density (compact / comfortable)
+  - RTL support (logical property guidance)
+- TypeScript exports for strongly-typed token consumption
+- Programmatic theming helpers (SSR-safe)
+- Validation utilities for safe token evolution
+
+## Why design tokens
+
+Design tokens are the single source of truth for design decisions (color, typography, spacing, motion…).
+
+- **Consistency** across apps (React/Angular/Vue/vanilla)
+- **Themeability** at runtime via CSS variables
+- **Governance**: controlled evolution with semantic versioning
+
+## Install
+
+From the monorepo root (pnpm workspaces):
+
+```bash
+pnpm -C packages/design-tokens build
+```
+
+In a consuming package/app:
+
+```bash
+pnpm add @asafarim/design-tokens
+```
+
+## CSS usage (any framework)
+
+Import the CSS entrypoint once at app startup:
+
+```ts
+import "@asafarim/design-tokens/css";
+```
+
+This ships a layered CSS setup:
+
+1. `:root` base tokens (spacing, typography, motion, radii, z-index…)
+2. `[data-theme]` theme tokens (colors, surfaces)
+3. `[data-density]` density tokens
+4. `[dir="rtl"]` RTL helpers
+
+### Playground screenshots
+
+![Design tokens playground (light)](./demo/public/design-tokens-light.png)
+
+![Design tokens playground (dark)](./demo/public/design-tokens-dark.png)
+
+### Theme switching
+
+```ts
+document.documentElement.dataset.theme = "light";
+// or
+document.documentElement.dataset.theme = "dark";
+// or
+document.documentElement.dataset.contrast = "high";
+```
+
+### Density switching
+
+```ts
+document.documentElement.dataset.density = "compact";
+// or
+document.documentElement.dataset.density = "comfortable";
+```
+
+## TypeScript usage
+
+```ts
+import { tokens, themes, applyThemeToElement } from "@asafarim/design-tokens";
+
+console.log(tokens.color.brand.primary500.value); // "#3A5AFE"
+
+applyThemeToElement(document.documentElement, themes.light);
+```
+
+### Accessing CSS variable names
+
+```ts
+import { cssVarNames } from "@asafarim/design-tokens";
+
+// dot-path -> CSS var
+console.log(cssVarNames["color.brand.primary500"]); // "--asm-color-brand-primary-500"
+```
+
+## SSR safety
+
+- `prefersColorScheme()` will not crash when `window` is unavailable.
+- `applyThemeToElement()` can be used in tests or SSR hydration flows.
+
+## Client overrides (branding)
+
+You can apply partial overrides without forking the package:
+
+```ts
+import { applyThemeToElement, themes } from "@asafarim/design-tokens";
+
+applyThemeToElement(document.documentElement, themes.light, {
+  overrides: {
+    "--asm-color-brand-primary-500": "#00A3FF"
+  }
+});
+```
+
+## High-contrast + reduced motion guidance
+
+- High contrast is enabled using `[data-contrast="high"]`.
+- Reduced motion is handled via `@media (prefers-reduced-motion: reduce)` and the motion preset tokens.
+
+## Contribution rules (token governance)
+
+- **Never rename or delete** existing semantic token keys in a minor/patch release.
+- **Prefer adding** new semantic tokens, deprecating old ones with `meta.deprecated`.
+- When changing a value of an existing token:
+  - Patch: only if it’s a clear bug fix (e.g., invalid color)
+  - Minor: safe visual adjustments
+  - Major: visual/systemic shifts
+
+Run validation before publishing:
+
+```bash
+pnpm -C packages/design-tokens build
+node -e "import('@asafarim/design-tokens').then(m => console.log(m.validateTokens()))"
+```
+
+## Versioning rules
+
+- **PATCH**: bug fixes, documentation, token metadata
+- **MINOR**: additive tokens, new themes, non-breaking build changes
+- **MAJOR**: renames/removals, behavior changes in theming helpers, breaking token semantics

package/css/index.css

@@ -1,8 +1,8 @@
-@import "./tokens.base.css";
-@import "./tokens.light.css";
-@import "./tokens.dark.css";
-@import "./tokens.high-contrast.css";
-@import "./tokens.density.compact.css";
-@import "./tokens.density.comfortable.css";
-@import "./tokens.rtl.css";
-@import "./tokens.utilities.css";
+@import "./tokens.base.css";
+@import "./tokens.light.css";
+@import "./tokens.dark.css";
+@import "./tokens.high-contrast.css";
+@import "./tokens.density.compact.css";
+@import "./tokens.density.comfortable.css";
+@import "./tokens.rtl.css";
+@import "./tokens.utilities.css";