@hpe-web/design-tokens 1.0.0 → 1.2.0

package/README.md

@@ -2,6 +2,17 @@
 
 HPE Design System design tokens — CSS custom properties, DTCG source, locale overrides, and utilities.
 
+## What's new in v1.2.0
+
+- `sm-xs` breakpoint renamed to `xs-sm` in `src/breakpoints.json` and source file paths
+- Updated `button`, `color.light`, and `color.dark` token values from Supernova sync
+
+> **Migration:** Update `range["sm-xs"]` → `range["xs-sm"]` and any direct path references to `dimension.sm-xs.json` → `dimension.xs-sm.json`.
+
+[Full changelog →](https://github.com/HPE-EMU/design-system/blob/main/packages/tokens/CHANGELOG.md)
+
+---
+
 ## Install
 
 ```bash
@@ -25,12 +36,12 @@ Load the base file and any overrides your app needs. The cascade handles viewpor
 
 <!-- Locales (if your app serves multiple languages) -->
 <link rel="stylesheet" href="node_modules/@hpe-web/design-tokens/css/locales/de.tokens.css">
-<link rel="stylesheet" href="node_modules/@hpe-web/design-tokens/css/fonts/de.fonts.css">
+<link rel="stylesheet" href="node_modules/@hpe-web/design-tokens/css/fonts/de.css">
 ```
 
 | File | Contents | Applied when |
 |------|----------|-------------|
-| `tokens.css` | All tokens — sm-xs base, light theme | Always |
+| `tokens.css` | All tokens — xs-sm base, light theme | Always |
 | `tokens.dark.css` | Dark theme color overrides | `[data-theme="dark"]` |
 | `tokens.md-lg.css` | Typography + border-radius overrides | `@media (min-width: 992px)` |
 | `tokens.xl.css` | Typography + border-radius overrides | `@media (min-width: 1600px)` |
@@ -65,15 +76,15 @@ No breakpoint logic needed in component CSS. Token values shift automatically as
 All three metadata files live in `static/`:
 
 ```js
-import breakpoints from '@hpe-web/design-tokens/static/breakpoints.json' assert { type: 'json' };
+import breakpoints from '@hpe-web/design-tokens/src/breakpoints.json' assert { type: 'json' };
 // { values: { xs: '0px', md: '992px', xl: '1600px' },
 //   ranges: { 'md-lg': { mediaQuery: '(min-width: 992px)' }, ... } }
 
-import locales from '@hpe-web/design-tokens/static/locales.json' assert { type: 'json' };
+import locales from '@hpe-web/design-tokens/src/locales.json' assert { type: 'json' };
 // locales.de.coefficient.display === 0.75
 // locales.ja.minFontSize === '14px'
 
-import fonts from '@hpe-web/design-tokens/static/fonts.json' assert { type: 'json' };
+import fonts from '@hpe-web/design-tokens/src/fonts.json' assert { type: 'json' };
 ```
 
 `breakpoints.json` is generated from DTCG token values at build time. `fonts.json` and `locales.json` are hand-maintained. All three are for tooling and pipeline scripts — the browser gets everything it needs from the CSS files.
@@ -88,10 +99,9 @@ import { lineHeightUnitless, letterSpacingEm } from '@hpe-web/design-tokens/tran
 
 const sd = new StyleDictionary({
   source: [
-    'node_modules/@hpe-web/design-tokens/dtcg/foundation/**/*.tokens.json',
-    'node_modules/@hpe-web/design-tokens/dtcg/semantic/**/*.tokens.json',
-    'node_modules/@hpe-web/design-tokens/dtcg/theme/light/**/*.tokens.json',
-    'node_modules/@hpe-web/design-tokens/dtcg/viewport/sm-xs/**/*.tokens.json',
+    'node_modules/@hpe-web/design-tokens/src/primitive/primitives.json',
+    'node_modules/@hpe-web/design-tokens/src/semantic/color.light.json',
+    'node_modules/@hpe-web/design-tokens/src/semantic/dimension.xs-sm.json',
   ],
   platforms: { /* your config */ },
 });
@@ -102,12 +112,12 @@ sd.registerTransform(letterSpacingEm);     // px letter-spacing → em
 await sd.buildAllPlatforms();
 ```
 
-See `dtcg/hpe.resolver.json` for the canonical token load order.
+See `src/hpe.resolver.json` for the canonical token load order.
 
 **Locale metadata** for custom pipelines:
 
 ```js
-import locales from '@hpe-web/design-tokens/static/locales.json' assert { type: 'json' };
+import locales from '@hpe-web/design-tokens/src/locales.json' assert { type: 'json' };
 // locales.de.coefficient.display === 0.75
 // locales.ja.minFontSize === '14px'
 ```
@@ -117,8 +127,7 @@ import locales from '@hpe-web/design-tokens/static/locales.json' assert { type:
 | Export | What |
 |--------|------|
 | `@hpe-web/design-tokens/css/*` | CSS custom properties (primary format) |
-| `@hpe-web/design-tokens/static/*` | System metadata — `breakpoints.json`, `locales.json`, `fonts.json` |
-| `@hpe-web/design-tokens/dtcg/*` | DTCG 2025.10 source (for custom pipelines) |
+| `@hpe-web/design-tokens/src/*` | DTCG source + system metadata (`breakpoints.json`, `locales.json`, `fonts.json`) |
 | `@hpe-web/design-tokens/transforms` | SD transforms + `applyLocale` utility |
 
 ## License

package/dist/css/fonts/de.css

@@ -153,167 +153,3 @@
   font-style: italic;
   font-display: swap;
 }
-
-/* ——— HPE Graphik (condensed) ——— */
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Thin-Web.woff2') format('woff2');
-  font-weight: 100;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-ThinItalic-Web.woff2') format('woff2');
-  font-weight: 100;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Extralight-Web.woff2') format('woff2');
-  font-weight: 200;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-ExtralightItalic-Web.woff2') format('woff2');
-  font-weight: 200;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Light-Web.woff2') format('woff2');
-  font-weight: 300;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-LightItalic-Web.woff2') format('woff2');
-  font-weight: 300;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Regular-Web.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-RegularItalic-Web.woff2') format('woff2');
-  font-weight: 400;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Medium-Web.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-MediumItalic-Web.woff2') format('woff2');
-  font-weight: 500;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Semibold-Web.woff2') format('woff2');
-  font-weight: 600;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-SemiboldItalic-Web.woff2') format('woff2');
-  font-weight: 600;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Bold-Web.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-BoldItalic-Web.woff2') format('woff2');
-  font-weight: 700;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Black-Web.woff2') format('woff2');
-  font-weight: 800;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-BlackItalic-Web.woff2') format('woff2');
-  font-weight: 800;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Super-Web.woff2') format('woff2');
-  font-weight: 900;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-SuperItalic-Web.woff2') format('woff2');
-  font-weight: 900;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}

package/dist/css/fonts/en.css

@@ -153,167 +153,3 @@
   font-style: italic;
   font-display: swap;
 }
-
-/* ——— HPE Graphik (condensed) ——— */
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Thin-Web.woff2') format('woff2');
-  font-weight: 100;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-ThinItalic-Web.woff2') format('woff2');
-  font-weight: 100;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Extralight-Web.woff2') format('woff2');
-  font-weight: 200;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-ExtralightItalic-Web.woff2') format('woff2');
-  font-weight: 200;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Light-Web.woff2') format('woff2');
-  font-weight: 300;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-LightItalic-Web.woff2') format('woff2');
-  font-weight: 300;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Regular-Web.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-RegularItalic-Web.woff2') format('woff2');
-  font-weight: 400;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Medium-Web.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-MediumItalic-Web.woff2') format('woff2');
-  font-weight: 500;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Semibold-Web.woff2') format('woff2');
-  font-weight: 600;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-SemiboldItalic-Web.woff2') format('woff2');
-  font-weight: 600;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Bold-Web.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-BoldItalic-Web.woff2') format('woff2');
-  font-weight: 700;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Black-Web.woff2') format('woff2');
-  font-weight: 800;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-BlackItalic-Web.woff2') format('woff2');
-  font-weight: 800;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Super-Web.woff2') format('woff2');
-  font-weight: 900;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-SuperItalic-Web.woff2') format('woff2');
-  font-weight: 900;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}

package/dist/css/fonts/es.css

@@ -153,167 +153,3 @@
   font-style: italic;
   font-display: swap;
 }
-
-/* ——— HPE Graphik (condensed) ——— */
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Thin-Web.woff2') format('woff2');
-  font-weight: 100;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-ThinItalic-Web.woff2') format('woff2');
-  font-weight: 100;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Extralight-Web.woff2') format('woff2');
-  font-weight: 200;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-ExtralightItalic-Web.woff2') format('woff2');
-  font-weight: 200;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Light-Web.woff2') format('woff2');
-  font-weight: 300;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-LightItalic-Web.woff2') format('woff2');
-  font-weight: 300;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Regular-Web.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-RegularItalic-Web.woff2') format('woff2');
-  font-weight: 400;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Medium-Web.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-MediumItalic-Web.woff2') format('woff2');
-  font-weight: 500;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Semibold-Web.woff2') format('woff2');
-  font-weight: 600;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-SemiboldItalic-Web.woff2') format('woff2');
-  font-weight: 600;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Bold-Web.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-BoldItalic-Web.woff2') format('woff2');
-  font-weight: 700;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Black-Web.woff2') format('woff2');
-  font-weight: 800;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-BlackItalic-Web.woff2') format('woff2');
-  font-weight: 800;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-Super-Web.woff2') format('woff2');
-  font-weight: 900;
-  font-style: normal;
-  font-stretch: condensed;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'HPE Graphik';
-  src: url('https://www.hpe.com/content/dam/hpe/fonts/graphik/HPEGraphikXXCondensed-SuperItalic-Web.woff2') format('woff2');
-  font-weight: 900;
-  font-style: italic;
-  font-stretch: condensed;
-  font-display: swap;
-}