@estebanruano/design-tokens 1.0.2 → 1.0.4

package/README.md

@@ -70,6 +70,8 @@ design-system-foundations.md    ← Designers edit this (the human-readable sour
 
 Release numbers for **npm** (`@estebanruano/design-tokens`), **Android Maven** (`tokensVersion`), and the `version` field in `package.json` all come from the `**Version:** x.y.z` line at the top of `design-system-foundations.md`. **`pnpm run parse`** and **`pnpm run sync`** write that value into `package.json`; Gradle uses `package.json` when `-PtokensVersion` / `TOKENS_VERSION` are unset. Bump `**Version:**` for each release (npm and GitHub Packages reject duplicate versions).
 
+**Further reading:** [General next steps (all platforms)](docs/general-next-steps.md) · [Android + Material 3](docs/android-material3-next-steps.md)
+
 ## Using tokens on the web
 
 Web artifacts are **`dist/web/tokens.css`** (CSS custom properties on `:root`) and **`dist/web/tokens.js`** (named ES module exports, e.g. `ColorPrimary500`). **`dist/json/tokens.json`** is a flat JSON dump for scripts or design tooling.
@@ -302,6 +304,8 @@ gpr.key=YOUR_PAT_WITH_read:packages
 
 In **CI** for the consuming app, inject the same values (e.g. repository secrets mapped to env vars or `ORG_GRADLE_PROJECT_gpr.*` so Gradle picks them up).
 
+**Material 3 and multi-project structure:** see [docs/android-material3-next-steps.md](docs/android-material3-next-steps.md) for mapping tokens to M3 (Compose + Views), shared theme libraries vs apps, and flavors / multiple products.
+
 ### Using tokens in Android app code
 
 The **`tokens-android`** artifact is a normal **`com.android.library`**: it ships **resource XML** only (colors, dimens, font dimens, etc.). After `implementation(...)`, those resources are **merged** into your app module, so you reference them like any other library resource.

package/dist/json/tokens.json

@@ -1,48 +1,48 @@
 {
-  "ColorNeutral0": "#fffaf7",
-  "ColorNeutral50": "#f7efea",
-  "ColorNeutral100": "#eadfd5",
-  "ColorNeutral200": "#d9c8bb",
-  "ColorNeutral300": "#bea89a",
-  "ColorNeutral400": "#948272",
-  "ColorNeutral500": "#6f5e52",
-  "ColorNeutral600": "#51443c",
-  "ColorNeutral700": "#3a302a",
-  "ColorNeutral800": "#241e1a",
-  "ColorNeutral900": "#0f0d0b",
+  "ColorNeutral0": "#ffffff",
+  "ColorNeutral50": "#f7faf8",
+  "ColorNeutral100": "#edf2ef",
+  "ColorNeutral200": "#d8e3dc",
+  "ColorNeutral300": "#b8c9bf",
+  "ColorNeutral400": "#8a9e90",
+  "ColorNeutral500": "#5f7566",
+  "ColorNeutral600": "#47594c",
+  "ColorNeutral700": "#344038",
+  "ColorNeutral800": "#212922",
+  "ColorNeutral900": "#121714",
   "ColorNeutral1000": "#000000",
-  "ColorPrimary50": "#ffedd5",
-  "ColorPrimary100": "#fed7aa",
-  "ColorPrimary200": "#fdba74",
-  "ColorPrimary300": "#fb923c",
-  "ColorPrimary400": "#f97316",
-  "ColorPrimary500": "#ea580c",
-  "ColorPrimary600": "#c2410c",
-  "ColorPrimary700": "#9a3412",
-  "ColorPrimary800": "#7c2d12",
-  "ColorPrimary00": "#fff8f3",
-  "ColorSecondary50": "#fef3c7",
-  "ColorSecondary100": "#fde68a",
-  "ColorSecondary200": "#fcd34d",
-  "ColorSecondary300": "#fbbf24",
-  "ColorSecondary400": "#f59e0b",
-  "ColorSecondary500": "#d97706",
-  "ColorSecondary600": "#b45309",
-  "ColorSecondary700": "#92400e",
-  "ColorSecondary800": "#78350f",
-  "ColorSecondary00": "#fffbeb",
-  "ColorSemanticSuccessLight": "#fce7d4",
-  "ColorSemanticSuccess": "#c45c26",
-  "ColorSemanticSuccessDark": "#7a3a18",
+  "ColorPrimary50": "#d1fae5",
+  "ColorPrimary100": "#a7f3d0",
+  "ColorPrimary200": "#6ee7b7",
+  "ColorPrimary300": "#34d399",
+  "ColorPrimary400": "#10b981",
+  "ColorPrimary500": "#059669",
+  "ColorPrimary600": "#047857",
+  "ColorPrimary700": "#065f46",
+  "ColorPrimary800": "#064e3b",
+  "ColorPrimary00": "#ecfdf5",
+  "ColorSecondary50": "#ccfbf1",
+  "ColorSecondary100": "#99f6e4",
+  "ColorSecondary200": "#5eead4",
+  "ColorSecondary300": "#2dd4bf",
+  "ColorSecondary400": "#14b8a6",
+  "ColorSecondary500": "#0d9488",
+  "ColorSecondary600": "#0f766e",
+  "ColorSecondary700": "#115e59",
+  "ColorSecondary800": "#134e4a",
+  "ColorSecondary00": "#f0fdfa",
+  "ColorSemanticSuccessLight": "#d1fae5",
+  "ColorSemanticSuccess": "#059669",
+  "ColorSemanticSuccessDark": "#064e3b",
   "ColorSemanticWarningLight": "#fef9c3",
-  "ColorSemanticWarning": "#f59e0b",
-  "ColorSemanticWarningDark": "#b45309",
-  "ColorSemanticErrorLight": "#ffdad6",
-  "ColorSemanticError": "#d84315",
-  "ColorSemanticErrorDark": "#8b2500",
-  "ColorSemanticInfoLight": "#fff4e6",
-  "ColorSemanticInfo": "#ff8f00",
-  "ColorSemanticInfoDark": "#e65100",
+  "ColorSemanticWarning": "#ca8a04",
+  "ColorSemanticWarningDark": "#713f12",
+  "ColorSemanticErrorLight": "#fee2e2",
+  "ColorSemanticError": "#dc2626",
+  "ColorSemanticErrorDark": "#7f1d1d",
+  "ColorSemanticInfoLight": "#ccfbf1",
+  "ColorSemanticInfo": "#0d9488",
+  "ColorSemanticInfoDark": "#134e4a",
   "DurationInstant": "100ms",
   "DurationFast": "150ms",
   "DurationNormal": "300ms",

package/dist/web/tokens.css

@@ -3,50 +3,50 @@
  */
 
 :root {
-  --color-neutral-0: #fffaf7;
-  --color-neutral-50: #f7efea;
-  --color-neutral-100: #eadfd5;
-  --color-neutral-200: #d9c8bb;
-  --color-neutral-300: #bea89a;
-  --color-neutral-400: #948272;
-  --color-neutral-500: #6f5e52;
-  --color-neutral-600: #51443c;
-  --color-neutral-700: #3a302a;
-  --color-neutral-800: #241e1a;
-  --color-neutral-900: #0f0d0b;
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f7faf8;
+  --color-neutral-100: #edf2ef;
+  --color-neutral-200: #d8e3dc;
+  --color-neutral-300: #b8c9bf;
+  --color-neutral-400: #8a9e90;
+  --color-neutral-500: #5f7566;
+  --color-neutral-600: #47594c;
+  --color-neutral-700: #344038;
+  --color-neutral-800: #212922;
+  --color-neutral-900: #121714;
   --color-neutral-1000: #000000;
-  --color-primary-50: #ffedd5;
-  --color-primary-100: #fed7aa;
-  --color-primary-200: #fdba74;
-  --color-primary-300: #fb923c;
-  --color-primary-400: #f97316;
-  --color-primary-500: #ea580c;
-  --color-primary-600: #c2410c;
-  --color-primary-700: #9a3412;
-  --color-primary-800: #7c2d12;
-  --color-primary-00: #fff8f3;
-  --color-secondary-50: #fef3c7;
-  --color-secondary-100: #fde68a;
-  --color-secondary-200: #fcd34d;
-  --color-secondary-300: #fbbf24;
-  --color-secondary-400: #f59e0b;
-  --color-secondary-500: #d97706;
-  --color-secondary-600: #b45309;
-  --color-secondary-700: #92400e;
-  --color-secondary-800: #78350f;
-  --color-secondary-00: #fffbeb;
-  --color-semantic-success-light: #fce7d4;
-  --color-semantic-success: #c45c26;
-  --color-semantic-success-dark: #7a3a18;
+  --color-primary-50: #d1fae5;
+  --color-primary-100: #a7f3d0;
+  --color-primary-200: #6ee7b7;
+  --color-primary-300: #34d399;
+  --color-primary-400: #10b981;
+  --color-primary-500: #059669;
+  --color-primary-600: #047857;
+  --color-primary-700: #065f46;
+  --color-primary-800: #064e3b;
+  --color-primary-00: #ecfdf5;
+  --color-secondary-50: #ccfbf1;
+  --color-secondary-100: #99f6e4;
+  --color-secondary-200: #5eead4;
+  --color-secondary-300: #2dd4bf;
+  --color-secondary-400: #14b8a6;
+  --color-secondary-500: #0d9488;
+  --color-secondary-600: #0f766e;
+  --color-secondary-700: #115e59;
+  --color-secondary-800: #134e4a;
+  --color-secondary-00: #f0fdfa;
+  --color-semantic-success-light: #d1fae5;
+  --color-semantic-success: #059669;
+  --color-semantic-success-dark: #064e3b;
   --color-semantic-warning-light: #fef9c3;
-  --color-semantic-warning: #f59e0b;
-  --color-semantic-warning-dark: #b45309;
-  --color-semantic-error-light: #ffdad6;
-  --color-semantic-error: #d84315;
-  --color-semantic-error-dark: #8b2500;
-  --color-semantic-info-light: #fff4e6;
-  --color-semantic-info: #ff8f00;
-  --color-semantic-info-dark: #e65100;
+  --color-semantic-warning: #ca8a04;
+  --color-semantic-warning-dark: #713f12;
+  --color-semantic-error-light: #fee2e2;
+  --color-semantic-error: #dc2626;
+  --color-semantic-error-dark: #7f1d1d;
+  --color-semantic-info-light: #ccfbf1;
+  --color-semantic-info: #0d9488;
+  --color-semantic-info-dark: #134e4a;
   --duration-instant: 100ms; /** Micro-interactions */
   --duration-fast: 150ms; /** Hover states */
   --duration-normal: 300ms; /** Transitions */

package/dist/web/tokens.js

@@ -2,50 +2,50 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const ColorNeutral0 = "#fffaf7";
-export const ColorNeutral50 = "#f7efea";
-export const ColorNeutral100 = "#eadfd5";
-export const ColorNeutral200 = "#d9c8bb";
-export const ColorNeutral300 = "#bea89a";
-export const ColorNeutral400 = "#948272";
-export const ColorNeutral500 = "#6f5e52";
-export const ColorNeutral600 = "#51443c";
-export const ColorNeutral700 = "#3a302a";
-export const ColorNeutral800 = "#241e1a";
-export const ColorNeutral900 = "#0f0d0b";
+export const ColorNeutral0 = "#ffffff";
+export const ColorNeutral50 = "#f7faf8";
+export const ColorNeutral100 = "#edf2ef";
+export const ColorNeutral200 = "#d8e3dc";
+export const ColorNeutral300 = "#b8c9bf";
+export const ColorNeutral400 = "#8a9e90";
+export const ColorNeutral500 = "#5f7566";
+export const ColorNeutral600 = "#47594c";
+export const ColorNeutral700 = "#344038";
+export const ColorNeutral800 = "#212922";
+export const ColorNeutral900 = "#121714";
 export const ColorNeutral1000 = "#000000";
-export const ColorPrimary50 = "#ffedd5";
-export const ColorPrimary100 = "#fed7aa";
-export const ColorPrimary200 = "#fdba74";
-export const ColorPrimary300 = "#fb923c";
-export const ColorPrimary400 = "#f97316";
-export const ColorPrimary500 = "#ea580c";
-export const ColorPrimary600 = "#c2410c";
-export const ColorPrimary700 = "#9a3412";
-export const ColorPrimary800 = "#7c2d12";
-export const ColorPrimary00 = "#fff8f3";
-export const ColorSecondary50 = "#fef3c7";
-export const ColorSecondary100 = "#fde68a";
-export const ColorSecondary200 = "#fcd34d";
-export const ColorSecondary300 = "#fbbf24";
-export const ColorSecondary400 = "#f59e0b";
-export const ColorSecondary500 = "#d97706";
-export const ColorSecondary600 = "#b45309";
-export const ColorSecondary700 = "#92400e";
-export const ColorSecondary800 = "#78350f";
-export const ColorSecondary00 = "#fffbeb";
-export const ColorSemanticSuccessLight = "#fce7d4";
-export const ColorSemanticSuccess = "#c45c26";
-export const ColorSemanticSuccessDark = "#7a3a18";
+export const ColorPrimary50 = "#d1fae5";
+export const ColorPrimary100 = "#a7f3d0";
+export const ColorPrimary200 = "#6ee7b7";
+export const ColorPrimary300 = "#34d399";
+export const ColorPrimary400 = "#10b981";
+export const ColorPrimary500 = "#059669";
+export const ColorPrimary600 = "#047857";
+export const ColorPrimary700 = "#065f46";
+export const ColorPrimary800 = "#064e3b";
+export const ColorPrimary00 = "#ecfdf5";
+export const ColorSecondary50 = "#ccfbf1";
+export const ColorSecondary100 = "#99f6e4";
+export const ColorSecondary200 = "#5eead4";
+export const ColorSecondary300 = "#2dd4bf";
+export const ColorSecondary400 = "#14b8a6";
+export const ColorSecondary500 = "#0d9488";
+export const ColorSecondary600 = "#0f766e";
+export const ColorSecondary700 = "#115e59";
+export const ColorSecondary800 = "#134e4a";
+export const ColorSecondary00 = "#f0fdfa";
+export const ColorSemanticSuccessLight = "#d1fae5";
+export const ColorSemanticSuccess = "#059669";
+export const ColorSemanticSuccessDark = "#064e3b";
 export const ColorSemanticWarningLight = "#fef9c3";
-export const ColorSemanticWarning = "#f59e0b";
-export const ColorSemanticWarningDark = "#b45309";
-export const ColorSemanticErrorLight = "#ffdad6";
-export const ColorSemanticError = "#d84315";
-export const ColorSemanticErrorDark = "#8b2500";
-export const ColorSemanticInfoLight = "#fff4e6";
-export const ColorSemanticInfo = "#ff8f00";
-export const ColorSemanticInfoDark = "#e65100";
+export const ColorSemanticWarning = "#ca8a04";
+export const ColorSemanticWarningDark = "#713f12";
+export const ColorSemanticErrorLight = "#fee2e2";
+export const ColorSemanticError = "#dc2626";
+export const ColorSemanticErrorDark = "#7f1d1d";
+export const ColorSemanticInfoLight = "#ccfbf1";
+export const ColorSemanticInfo = "#0d9488";
+export const ColorSemanticInfoDark = "#134e4a";
 export const DurationInstant = "100ms"; // Micro-interactions
 export const DurationFast = "150ms"; // Hover states
 export const DurationNormal = "300ms"; // Transitions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estebanruano/design-tokens",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "packageManager": "pnpm@10.33.4",
   "description": "Design system tokens — single source of truth for all platforms",
   "type": "module",