@phcdevworks/spectre-tokens 2.5.0 → 2.7.0

package/dist/index.js

@@ -176,7 +176,7 @@ var coreTokens = {
         "page": "{colors.neutral.50}",
         "card": "{colors.white}",
         "input": "{colors.white}",
-        "overlay": "{colors.neutral.900} / 0.6",
+        "overlay": "{colors.black} / 0.6",
         "alternate": "{colors.neutral.100}",
         "hero": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)"
       },
@@ -299,7 +299,7 @@ var coreTokens = {
         "badge": {
           "neutralBg": "{colors.neutral.700}",
           "neutralBgHover": "{colors.neutral.600}",
-          "neutralText": "{colors.neutral.100}",
+          "neutralText": "{colors.neutral.50}",
           "infoBg": "{colors.info.800}",
           "infoBgHover": "{colors.info.700}",
           "infoText": "{colors.info.100}",
@@ -470,13 +470,17 @@ var coreTokens = {
     "sm": "2px",
     "md": "4px",
     "lg": "8px",
+    "xl": "12px",
+    "2xl": "16px",
     "pill": "999px"
   },
   "shadows": {
     "none": "none",
     "sm": "0 1px 2px 0 {colors.black} / 0.06",
     "md": "0 2px 6px -1px {colors.black} / 0.08",
-    "lg": "0 6px 16px -4px {colors.black} / 0.12"
+    "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"
   },
   "breakpoints": {
     "sm": "640px",
@@ -493,64 +497,69 @@ var coreTokens = {
     "overlay": "1300",
     "modal": "1400",
     "popover": "1500",
-    "tooltip": "1600"
+    "tooltip": "1600",
+    "toast": "1700"
   },
   "transitions": {
     "duration": {
       "instant": "75ms",
       "fast": "150ms",
       "base": "200ms",
+      "relaxed": "250ms",
       "moderate": "300ms",
       "slow": "500ms",
-      "slower": "700ms"
+      "slower": "700ms",
+      "long": "1000ms",
+      "slowest": "1200ms"
     },
     "easing": {
       "linear": "linear",
       "in": "cubic-bezier(0.4, 0, 1, 1)",
       "out": "cubic-bezier(0, 0, 0.2, 1)",
       "inOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-      "spring": "cubic-bezier(0.4, 0, 0.2, 1)"
+      "spring": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "overshoot": "cubic-bezier(0.34, 1.56, 0.64, 1)"
     }
   },
   "animations": {
     "fadeIn": {
-      "duration": "200ms",
-      "easing": "cubic-bezier(0, 0, 0.2, 1)",
+      "duration": "{transitions.duration.base}",
+      "easing": "{transitions.easing.out}",
       "keyframes": "fade-in"
     },
     "fadeOut": {
-      "duration": "150ms",
-      "easing": "cubic-bezier(0.4, 0, 1, 1)",
+      "duration": "{transitions.duration.fast}",
+      "easing": "{transitions.easing.in}",
       "keyframes": "fade-out"
     },
     "slideUp": {
-      "duration": "300ms",
-      "easing": "cubic-bezier(0, 0, 0.2, 1)",
+      "duration": "{transitions.duration.moderate}",
+      "easing": "{transitions.easing.out}",
       "keyframes": "slide-up"
     },
     "slideDown": {
-      "duration": "300ms",
-      "easing": "cubic-bezier(0, 0, 0.2, 1)",
+      "duration": "{transitions.duration.moderate}",
+      "easing": "{transitions.easing.out}",
       "keyframes": "slide-down"
     },
     "scaleIn": {
-      "duration": "200ms",
-      "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "duration": "{transitions.duration.base}",
+      "easing": "{transitions.easing.overshoot}",
       "keyframes": "scale-in"
     },
     "bounce": {
-      "duration": "300ms",
-      "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "duration": "{transitions.duration.moderate}",
+      "easing": "{transitions.easing.spring}",
       "keyframes": "bounce"
     },
     "shake": {
-      "duration": "250ms",
-      "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "duration": "{transitions.duration.relaxed}",
+      "easing": "{transitions.easing.spring}",
       "keyframes": "shake"
     },
     "pulse": {
-      "duration": "1200ms",
-      "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "duration": "{transitions.duration.slowest}",
+      "easing": "{transitions.easing.spring}",
       "keyframes": "pulse"
     }
   },
@@ -558,6 +567,7 @@ var coreTokens = {
     "disabled": "0.38",
     "hover": "0.92",
     "active": "0.84",
+    "loading": "0.6",
     "focus": "1",
     "overlay": "0.5",
     "tooltip": "0.95"
@@ -565,6 +575,7 @@ var coreTokens = {
   "aspectRatios": {
     "square": "1/1",
     "video": "16/9",
+    "classic": "3/2",
     "portrait": "3/4",
     "landscape": "4/3",
     "ultrawide": "21/9",
@@ -592,13 +603,17 @@ var coreTokens = {
     "width": {
       "base": "1px",
       "thick": "2px"
+    },
+    "style": {
+      "none": "none",
+      "solid": "solid"
     }
   },
   "surface": {
     "page": "{colors.neutral.50}",
     "card": "{colors.white}",
     "input": "{colors.white}",
-    "overlay": "{colors.neutral.900} / 0.6"
+    "overlay": "{colors.black} / 0.6"
   },
   "text": {
     "onPage": {
@@ -655,47 +670,56 @@ var coreTokens = {
     "sm": {
       "size": "0.875rem",
       "lineHeight": "1.5rem",
-      "weight": 400
+      "weight": 400,
+      "letterSpacing": "0em"
     },
     "md": {
       "size": "1rem",
       "lineHeight": "1.75rem",
-      "weight": 500
+      "weight": 500,
+      "letterSpacing": "0em"
     },
     "lg": {
       "size": "1.25rem",
       "lineHeight": "2rem",
-      "weight": 600
+      "weight": 600,
+      "letterSpacing": "0em"
     },
     "xl": {
       "size": "1.5rem",
       "lineHeight": "2.125rem",
-      "weight": 600
+      "weight": 600,
+      "letterSpacing": "0em"
     },
     "2xl": {
       "size": "1.875rem",
       "lineHeight": "2.5rem",
-      "weight": 700
+      "weight": 700,
+      "letterSpacing": "0em"
     },
     "3xl": {
       "size": "2.25rem",
       "lineHeight": "2.75rem",
-      "weight": 700
+      "weight": 700,
+      "letterSpacing": "0em"
     },
     "4xl": {
       "size": "3rem",
       "lineHeight": "3.5rem",
-      "weight": 800
+      "weight": 800,
+      "letterSpacing": "0em"
     },
     "5xl": {
       "size": "3.75rem",
       "lineHeight": "4.25rem",
-      "weight": 800
+      "weight": 800,
+      "letterSpacing": "0em"
     },
     "6xl": {
       "size": "4.5rem",
       "lineHeight": "5rem",
-      "weight": 900
+      "weight": 900,
+      "letterSpacing": "0em"
     }
   },
   "typography": {
@@ -714,47 +738,56 @@ var coreTokens = {
       "sm": {
         "fontSize": "0.875rem",
         "lineHeight": "1.5rem",
-        "fontWeight": 400
+        "fontWeight": 400,
+        "letterSpacing": "0em"
       },
       "md": {
         "fontSize": "1rem",
         "lineHeight": "1.75rem",
-        "fontWeight": 500
+        "fontWeight": 500,
+        "letterSpacing": "0em"
       },
       "lg": {
         "fontSize": "1.25rem",
         "lineHeight": "2rem",
-        "fontWeight": 600
+        "fontWeight": 600,
+        "letterSpacing": "0em"
       },
       "xl": {
         "fontSize": "1.5rem",
         "lineHeight": "2.125rem",
-        "fontWeight": 600
+        "fontWeight": 600,
+        "letterSpacing": "0em"
       },
       "2xl": {
         "fontSize": "1.875rem",
         "lineHeight": "2.5rem",
-        "fontWeight": 700
+        "fontWeight": 700,
+        "letterSpacing": "0em"
       },
       "3xl": {
         "fontSize": "2.25rem",
         "lineHeight": "2.75rem",
-        "fontWeight": 700
+        "fontWeight": 700,
+        "letterSpacing": "0em"
       },
       "4xl": {
         "fontSize": "3rem",
         "lineHeight": "3.5rem",
-        "fontWeight": 800
+        "fontWeight": 800,
+        "letterSpacing": "0em"
       },
       "5xl": {
         "fontSize": "3.75rem",
         "lineHeight": "4.25rem",
-        "fontWeight": 800
+        "fontWeight": 800,
+        "letterSpacing": "0em"
       },
       "6xl": {
         "fontSize": "4.5rem",
         "lineHeight": "5rem",
-        "fontWeight": 900
+        "fontWeight": 900,
+        "letterSpacing": "0em"
       }
     }
   }
@@ -820,6 +853,23 @@ var resolveValue = (tokens2, value) => {
   str = str.replace(opacityRegex, (match, hex, opacity) => hexToRgba(hex, opacity));
   return str;
 };
+var resolveSemanticValue = (value, tokens2) => {
+  if (typeof value === "string" || typeof value === "number") {
+    return resolveValue(tokens2, value);
+  }
+  if (value && typeof value === "object" && "value" in value) {
+    return resolveValue(tokens2, value.value);
+  }
+  return void 0;
+};
+var getPath = (source, path) => path.reduce((acc, key) => acc && typeof acc === "object" ? acc[key] : void 0, source);
+var pickSemantic = (tokens2, ...candidates) => {
+  for (const candidate of candidates) {
+    const resolved = resolveSemanticValue(candidate, tokens2);
+    if (resolved !== void 0) return resolved;
+  }
+  return void 0;
+};
 var createCssVariableMap = (tokens2, options = {}) => {
   const prefix = options.prefix ?? DEFAULT_PREFIX;
   const map = {};
@@ -880,6 +930,11 @@ var createCssVariableMap = (tokens2, options = {}) => {
       assign(toVariableName(prefix, "border", "width", key), value);
     });
   }
+  if (border?.style) {
+    Object.entries(border.style).forEach(([key, value]) => {
+      assign(toVariableName(prefix, "border", "style", key), value);
+    });
+  }
   Object.entries(baseTokens.radii).forEach(([key, value]) => {
     assign(toVariableName(prefix, "radius", key), value);
   });
@@ -905,27 +960,6 @@ var createCssVariableMap = (tokens2, options = {}) => {
     const scaleEntry = entry;
     assign(toVariableName(prefix, "font", key, "letter-spacing"), scaleEntry.letterSpacing);
   });
-  assign(toVariableName(prefix, "text", "on", "page", "default"), tokens2.text.onPage.default);
-  assign(toVariableName(prefix, "text", "on", "page", "muted"), tokens2.text.onPage.muted);
-  assign(toVariableName(prefix, "text", "on", "page", "subtle"), tokens2.text.onPage.subtle);
-  assign(toVariableName(prefix, "text", "on", "page", "meta"), tokens2.text.onPage.meta);
-  assign(toVariableName(prefix, "text", "on", "surface", "default"), tokens2.text.onSurface.default);
-  assign(toVariableName(prefix, "text", "on", "surface", "muted"), tokens2.text.onSurface.muted);
-  assign(toVariableName(prefix, "text", "on", "surface", "subtle"), tokens2.text.onSurface.subtle);
-  assign(toVariableName(prefix, "text", "on", "surface", "meta"), tokens2.text.onSurface.meta);
-  const badge = tokens2.component?.badge;
-  if (badge) {
-    BADGE_VARIANTS.forEach(({ variant, bgKey, textKey }) => {
-      assign(toVariableName(prefix, "badge", variant, "bg"), badge[bgKey]);
-      assign(toVariableName(prefix, "badge", variant, "text"), badge[textKey]);
-    });
-  }
-  const iconBox = tokens2.component?.iconBox;
-  if (iconBox) {
-    ICON_BOX_FIELDS.forEach(({ name, tokenKey }) => {
-      assign(toVariableName(prefix, "icon-box", name), iconBox[tokenKey]);
-    });
-  }
   Object.entries(baseTokens.shadows).forEach(([key, value]) => {
     assign(toVariableName(prefix, "shadow", key), value);
   });
@@ -968,23 +1002,6 @@ var createCssVariableMap = (tokens2, options = {}) => {
   }
   return map;
 };
-var resolveSemanticValue = (value, tokens2) => {
-  if (typeof value === "string" || typeof value === "number") {
-    return resolveValue(tokens2, value);
-  }
-  if (value && typeof value === "object" && "value" in value) {
-    return resolveValue(tokens2, value.value);
-  }
-  return void 0;
-};
-var getPath = (source, path) => path.reduce((acc, key) => acc && typeof acc === "object" ? acc[key] : void 0, source);
-var pickSemantic = (tokens2, ...candidates) => {
-  for (const candidate of candidates) {
-    const resolved = resolveSemanticValue(candidate, tokens2);
-    if (resolved !== void 0) return resolved;
-  }
-  return void 0;
-};
 var generateCssVariables = (tokens2, options = {}) => {
   const selector = options.selector ?? DEFAULT_SELECTOR;
   const prefix = options.prefix ?? DEFAULT_PREFIX;