@phcdevworks/spectre-tokens 4.3.0 → 4.5.0

package/dist/index.css

@@ -571,6 +571,13 @@
   --sp-radius-3xl: 24px;
   --sp-radius-4xl: 32px;
   --sp-radius-pill: 999px;
+  --sp-tracking-tightest: -0.075em;
+  --sp-tracking-tighter: -0.05em;
+  --sp-tracking-tight: -0.025em;
+  --sp-tracking-normal: 0em;
+  --sp-tracking-wide: 0.025em;
+  --sp-tracking-wider: 0.05em;
+  --sp-tracking-widest: 0.1em;
   --sp-icon-xs: 12px;
   --sp-icon-sm: 16px;
   --sp-icon-md: 20px;
@@ -669,6 +676,11 @@
   --sp-shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, 0.12);
   --sp-shadow-xl: 0 12px 24px -6px rgba(0, 0, 0, 0.15);
   --sp-shadow-2xl: 0 20px 48px -12px rgba(0, 0, 0, 0.20);
+  --sp-shadow-inset-sm: inset 0 1px 2px 0 rgba(0, 0, 0, 0.06), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.06);
+  --sp-shadow-inset-md: inset 0 2px 6px -1px rgba(0, 0, 0, 0.08), inset 0 -2px 6px -1px rgba(0, 0, 0, 0.08);
+  --sp-shadow-inset-lg: inset 0 6px 16px -4px rgba(0, 0, 0, 0.12), inset 0 -6px 16px -4px rgba(0, 0, 0, 0.12);
+  --sp-shadow-inset-xl: inset 0 12px 24px -6px rgba(0, 0, 0, 0.15), inset 0 -12px 24px -6px rgba(0, 0, 0, 0.15);
+  --sp-shadow-inset-2xl: inset 0 20px 48px -12px rgba(0, 0, 0, 0.20), inset 0 -20px 48px -12px rgba(0, 0, 0, 0.20);
   --sp-breakpoint-sm: 640px;
   --sp-breakpoint-md: 768px;
   --sp-breakpoint-lg: 1024px;

package/dist/index.d.cts

@@ -1181,6 +1181,13 @@ interface SpectreGeneratedTokens {
         lg: string;
         xl: string;
         '2xl': string;
+        inset: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
     };
     breakpoints: {
         sm: string;
@@ -1357,6 +1364,15 @@ interface SpectreGeneratedTokens {
             dotted: string;
         };
     };
+    tracking: {
+        tightest: string;
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
     surface: {
         page: string;
         card: string;

package/dist/index.d.ts

@@ -1181,6 +1181,13 @@ interface SpectreGeneratedTokens {
         lg: string;
         xl: string;
         '2xl': string;
+        inset: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
     };
     breakpoints: {
         sm: string;
@@ -1357,6 +1364,15 @@ interface SpectreGeneratedTokens {
             dotted: string;
         };
     };
+    tracking: {
+        tightest: string;
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
     surface: {
         page: string;
         card: string;

package/dist/index.js

@@ -1181,7 +1181,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",
@@ -1358,6 +1365,15 @@ var coreTokens = {
       "dotted": "dotted"
     }
   },
+  "tracking": {
+    "tightest": "-0.075em",
+    "tighter": "-0.05em",
+    "tight": "-0.025em",
+    "normal": "0em",
+    "wide": "0.025em",
+    "wider": "0.05em",
+    "widest": "0.1em"
+  },
   "surface": {
     "page": "{colors.neutral.50}",
     "card": "{colors.white}",
@@ -1756,6 +1772,12 @@ var createCssVariableMap = (tokens2, options = {}) => {
   Object.entries(baseTokens.radii).forEach(([key, value]) => {
     assign(toVariableName(prefix, "radius", key), value);
   });
+  const tracking = baseTokens.tracking;
+  if (tracking) {
+    Object.entries(tracking).forEach(([key, value]) => {
+      assign(toVariableName(prefix, "tracking", key), value);
+    });
+  }
   const icons = baseTokens.icons;
   if (icons) {
     Object.entries(icons).forEach(([key, value]) => {
@@ -1808,7 +1830,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);