@phcdevworks/spectre-tokens 4.4.0 → 4.7.0

package/README.md

@@ -17,7 +17,7 @@ contracts for specific frameworks and runtimes.
 | Project team           | `project-design`                 |
 | Repository role        | Spectre L1 design-token contract |
 | Package/artifact       | `@phcdevworks/spectre-tokens`    |
-| Current version/status | 4.4.0                            |
+| Current version/status | 4.7.0                            |
 
 ## Standard Workflow
 
@@ -312,8 +312,8 @@ of every token path, resolved value, and usage note.
 
 The `layout` namespace includes section, stack, and container spacing tokens,
 plus fixed layout width tokens for common consumer shells:
-`layout.container.maxWidth`, `layout.container.maxWidthProse`, and
-`layout.sidebar.width`.
+`layout.container.maxWidth`, `layout.container.maxWidthProse`,
+`layout.container.maxWidthWide`, and `layout.sidebar.width`.
 
 ## Public Contract Guarantees
 

package/dist/index.cjs

@@ -31,7 +31,12 @@ var coreTokens = {
   "component": {
     "card": {
       "text": "{colors.neutral.900}",
-      "textMuted": "{colors.neutral.600}"
+      "textMuted": "{colors.neutral.600}",
+      "padding": {
+        "sm": "1.5rem",
+        "md": "2rem",
+        "lg": "2.5rem"
+      }
     },
     "input": {
       "text": "{colors.neutral.900}",
@@ -56,7 +61,11 @@ var coreTokens = {
       "warningText": "{colors.warning.800}",
       "dangerBg": "{colors.error.100}",
       "dangerBgHover": "{colors.error.200}",
-      "dangerText": "{colors.error.800}"
+      "dangerText": "{colors.error.800}",
+      "inverseBg": "{colors.white} / 0.16",
+      "inverseBgHover": "{colors.white} / 0.24",
+      "inverseText": "{colors.white}",
+      "inverseBorder": "{colors.white} / 0.3"
     },
     "iconBox": {
       "bg": "{colors.white}",
@@ -283,6 +292,18 @@ var coreTokens = {
       "textDisabled": "{colors.neutral.400}",
       "focusRing": "{colors.accent.500} / 0.4",
       "focusVisible": "{colors.accent.500} / 0.4"
+    },
+    "inverse": {
+      "bg": "{colors.white} / 0.12",
+      "bgHover": "{colors.white} / 0.2",
+      "bgActive": "{colors.white} / 0.28",
+      "bgDisabled": "{colors.white} / 0.08",
+      "text": "{colors.white}",
+      "textDisabled": "{colors.neutral.400}",
+      "border": "{colors.white} / 0.3",
+      "borderDisabled": "{colors.white} / 0.16",
+      "focusRing": "{colors.info.500} / 0.4",
+      "focusVisible": "{colors.info.500} / 0.4"
     }
   },
   "forms": {
@@ -1165,6 +1186,97 @@ var coreTokens = {
         "800": "#2b2422",
         "900": "#1d1816",
         "950": "#0c0a09"
+      },
+      "integration-ink": {
+        "50": "#fafafb",
+        "100": "#f5f5f6",
+        "200": "#e7e8e9",
+        "300": "#d3d4d6",
+        "400": "#9ea0a3",
+        "500": "#707376",
+        "600": "#525457",
+        "700": "#3e4143",
+        "800": "#27292b",
+        "900": "#16181a",
+        "950": "#06080a"
+      },
+      "integration-gunmetal": {
+        "50": "#f0f0f1",
+        "100": "#eaebec",
+        "200": "#dddedf",
+        "300": "#c8cbcd",
+        "400": "#93979a",
+        "500": "#666b6e",
+        "600": "#484c50",
+        "700": "#35393c",
+        "800": "#1f2225",
+        "900": "#0c1014",
+        "950": "#000104"
+      },
+      "integration-signal-blue": {
+        "50": "#ebf0f9",
+        "100": "#d8e3f8",
+        "200": "#bfd4f9",
+        "300": "#95bdf9",
+        "400": "#4a9df7",
+        "500": "#0083f7",
+        "600": "#006dfa",
+        "700": "#005ce8",
+        "800": "#004bb8",
+        "900": "#003f8a",
+        "950": "#002552"
+      },
+      "integration-icy-blue": {
+        "50": "#e4f0fa",
+        "100": "#cbe5fb",
+        "200": "#a4d8ff",
+        "300": "#59c4ff",
+        "400": "#00a8ff",
+        "500": "#0090ff",
+        "600": "#007cff",
+        "700": "#006aff",
+        "800": "#0055ce",
+        "900": "#004699",
+        "950": "#002a5a"
+      },
+      "phcdevworks-raspberry-red": {
+        "50": "#fff3f4",
+        "100": "#ffe7e8",
+        "200": "#ffcfd2",
+        "300": "#fea5ae",
+        "400": "#fd6982",
+        "500": "#fe2b67",
+        "600": "#ee005a",
+        "700": "#c8054b",
+        "800": "#a4113e",
+        "900": "#8a1635",
+        "950": "#4d081a"
+      },
+      "phcdevworks-deep-space-blue": {
+        "50": "#edf1f7",
+        "100": "#dce5f1",
+        "200": "#c4d5ec",
+        "300": "#a1bee3",
+        "400": "#6b9ed5",
+        "500": "#2583ca",
+        "600": "#006dc2",
+        "700": "#005bb0",
+        "800": "#004a8c",
+        "900": "#003f6d",
+        "950": "#012641"
+      },
+      "phcdevworks-paper": {
+        "50": "#fcfaf7",
+        "100": "#f7f5f2",
+        "200": "#e9e5e0",
+        "300": "#d9d3ca",
+        "400": "#aca08b",
+        "500": "#807056",
+        "600": "#5e523d",
+        "700": "#4a3f2d",
+        "800": "#2b251b",
+        "900": "#1f190e",
+        "950": "#0e0a05"
       }
     }
   },
@@ -1209,7 +1321,14 @@ var coreTokens = {
     "md": "0 2px 6px -1px {colors.black} / 0.08",
     "lg": "0 6px 16px -4px {colors.black} / 0.12",
     "xl": "0 12px 24px -6px {colors.black} / 0.15",
-    "2xl": "0 20px 48px -12px {colors.black} / 0.20"
+    "2xl": "0 20px 48px -12px {colors.black} / 0.20",
+    "inset": {
+      "sm": "inset 0 1px 2px 0 {colors.black} / 0.06, inset 0 -1px 2px 0 {colors.black} / 0.06",
+      "md": "inset 0 2px 6px -1px {colors.black} / 0.08, inset 0 -2px 6px -1px {colors.black} / 0.08",
+      "lg": "inset 0 6px 16px -4px {colors.black} / 0.12, inset 0 -6px 16px -4px {colors.black} / 0.12",
+      "xl": "inset 0 12px 24px -6px {colors.black} / 0.15, inset 0 -12px 24px -6px {colors.black} / 0.15",
+      "2xl": "inset 0 20px 48px -12px {colors.black} / 0.20, inset 0 -20px 48px -12px {colors.black} / 0.20"
+    }
   },
   "breakpoints": {
     "sm": "640px",
@@ -1403,13 +1522,16 @@ var coreTokens = {
     "hover": "{colors.neutral.100}",
     "selected": "{colors.info.50}",
     "active": "{colors.neutral.200}",
-    "divider": "{colors.neutral.200}"
+    "divider": "{colors.neutral.200}",
+    "inverse": "{colors.neutral.900}"
   },
   "link": {
     "default": "{colors.brand.600}",
     "hover": "{colors.brand.700}",
     "active": "{colors.brand.800}",
-    "visited": "{colors.accent.700}"
+    "visited": "{colors.accent.700}",
+    "onInverse": "{colors.neutral.300}",
+    "onInverseHover": "{colors.brand.300}"
   },
   "text": {
     "onPage": {
@@ -1425,6 +1547,10 @@ var coreTokens = {
       "subtle": "{colors.neutral.500}",
       "meta": "{colors.neutral.500}",
       "brand": "{colors.brand.600}"
+    },
+    "onInverse": {
+      "default": "{colors.neutral.50}",
+      "muted": "{colors.neutral.300}"
     }
   },
   "layout": {
@@ -1454,7 +1580,8 @@ var coreTokens = {
         "lg": "2rem"
       },
       "maxWidth": "72rem",
-      "maxWidthProse": "65ch"
+      "maxWidthProse": "65ch",
+      "maxWidthWide": "80rem"
     },
     "sidebar": {
       "width": "16rem"
@@ -1774,6 +1901,9 @@ var createCssVariableMap = (tokens2, options = {}) => {
     if (container?.maxWidthProse) {
       assign(toVariableName(prefix, "layout", "container", "max-width-prose"), container.maxWidthProse);
     }
+    if (container?.maxWidthWide) {
+      assign(toVariableName(prefix, "layout", "container", "max-width-wide"), container.maxWidthWide);
+    }
     const sidebar = layout.sidebar;
     if (sidebar?.width) {
       assign(toVariableName(prefix, "layout", "sidebar", "width"), sidebar.width);
@@ -1851,7 +1981,13 @@ var createCssVariableMap = (tokens2, options = {}) => {
     assignRole(["body"], body);
   }
   Object.entries(baseTokens.shadows).forEach(([key, value]) => {
-    assign(toVariableName(prefix, "shadow", key), value);
+    if (typeof value === "string") {
+      assign(toVariableName(prefix, "shadow", key), value);
+      return;
+    }
+    Object.entries(value).forEach(([nestedKey, nestedValue]) => {
+      assign(toVariableName(prefix, "shadow", key, nestedKey), nestedValue);
+    });
   });
   Object.entries(baseTokens.breakpoints).forEach(([key, value]) => {
     assign(toVariableName(prefix, "breakpoint", key), value);
@@ -1976,7 +2112,7 @@ var generateCssVariables = (tokens2, options = {}) => {
     componentAliases
   );
   Object.entries(linkTokens).forEach(([key, value]) => {
-    const varName = toVariableName(prefix, "link", key);
+    const varName = toVariableName(prefix, "link", kebabPathSegment(key));
     const resolved = pickSemantic(tokens2, value);
     addBase(varName, resolved);
     addDark(varName, resolved);