@phcdevworks/spectre-tokens 3.5.0 → 4.0.0

package/dist/index.js

@@ -765,7 +765,347 @@ var coreTokens = {
       "info": "{colors.info.600}"
     },
     "white": "#ffffff",
-    "black": "#000000"
+    "black": "#000000",
+    "palette": {
+      "red": {
+        "50": "#fef2f2",
+        "100": "#ffe2e2",
+        "200": "#ffc9c9",
+        "300": "#ffa2a2",
+        "400": "#ff6467",
+        "500": "#fb2c36",
+        "600": "#e7000b",
+        "700": "#c10007",
+        "800": "#9f0712",
+        "900": "#82181a",
+        "950": "#460809"
+      },
+      "orange": {
+        "50": "#fff7ed",
+        "100": "#ffedd4",
+        "200": "#ffd6a7",
+        "300": "#ffb86a",
+        "400": "#ff8904",
+        "500": "#ff6900",
+        "600": "#f54900",
+        "700": "#ca3500",
+        "800": "#9f2d00",
+        "900": "#7e2a0c",
+        "950": "#441306"
+      },
+      "amber": {
+        "50": "#fffbeb",
+        "100": "#fef3c6",
+        "200": "#fee685",
+        "300": "#ffd230",
+        "400": "#ffb900",
+        "500": "#fe9a00",
+        "600": "#e17100",
+        "700": "#bb4d00",
+        "800": "#973c00",
+        "900": "#7b3306",
+        "950": "#461901"
+      },
+      "yellow": {
+        "50": "#fefce8",
+        "100": "#fef9c2",
+        "200": "#fff085",
+        "300": "#ffdf20",
+        "400": "#fdc700",
+        "500": "#f0b100",
+        "600": "#d08700",
+        "700": "#a65f00",
+        "800": "#894b00",
+        "900": "#733e0a",
+        "950": "#432004"
+      },
+      "lime": {
+        "50": "#f7fee7",
+        "100": "#ecfcca",
+        "200": "#d8f999",
+        "300": "#bbf451",
+        "400": "#9ae600",
+        "500": "#7ccf00",
+        "600": "#5ea500",
+        "700": "#497d00",
+        "800": "#3c6300",
+        "900": "#35530e",
+        "950": "#192e03"
+      },
+      "green": {
+        "50": "#f0fdf4",
+        "100": "#dcfce7",
+        "200": "#b9f8cf",
+        "300": "#7bf1a8",
+        "400": "#05df72",
+        "500": "#00c950",
+        "600": "#00a63e",
+        "700": "#008236",
+        "800": "#016630",
+        "900": "#0d542b",
+        "950": "#032e15"
+      },
+      "emerald": {
+        "50": "#ecfdf5",
+        "100": "#d0fae5",
+        "200": "#a4f4cf",
+        "300": "#5ee9b5",
+        "400": "#00d492",
+        "500": "#00bc7d",
+        "600": "#009966",
+        "700": "#007a55",
+        "800": "#006045",
+        "900": "#004f3b",
+        "950": "#002c22"
+      },
+      "teal": {
+        "50": "#f0fdfa",
+        "100": "#cbfbf1",
+        "200": "#96f7e4",
+        "300": "#46ecd5",
+        "400": "#00d5be",
+        "500": "#00bba7",
+        "600": "#009689",
+        "700": "#00786f",
+        "800": "#005f5a",
+        "900": "#0b4f4a",
+        "950": "#022f2e"
+      },
+      "cyan": {
+        "50": "#ecfeff",
+        "100": "#cefafe",
+        "200": "#a2f4fd",
+        "300": "#53eafd",
+        "400": "#00d3f2",
+        "500": "#00b8db",
+        "600": "#0092b8",
+        "700": "#007595",
+        "800": "#005f78",
+        "900": "#104e64",
+        "950": "#053345"
+      },
+      "sky": {
+        "50": "#f0f9ff",
+        "100": "#dff2fe",
+        "200": "#b8e6fe",
+        "300": "#74d4ff",
+        "400": "#00bcff",
+        "500": "#00a6f4",
+        "600": "#0084d1",
+        "700": "#0069a8",
+        "800": "#00598a",
+        "900": "#024a70",
+        "950": "#052f4a"
+      },
+      "blue": {
+        "50": "#eff6ff",
+        "100": "#dbeafe",
+        "200": "#bedbff",
+        "300": "#8ec5ff",
+        "400": "#51a2ff",
+        "500": "#2b7fff",
+        "600": "#155dfc",
+        "700": "#1447e6",
+        "800": "#193cb8",
+        "900": "#1c398e",
+        "950": "#162456"
+      },
+      "indigo": {
+        "50": "#eef2ff",
+        "100": "#e0e7ff",
+        "200": "#c6d2ff",
+        "300": "#a3b3ff",
+        "400": "#7c86ff",
+        "500": "#615fff",
+        "600": "#4f39f6",
+        "700": "#432dd7",
+        "800": "#372aac",
+        "900": "#312c85",
+        "950": "#1e1a4d"
+      },
+      "violet": {
+        "50": "#f5f3ff",
+        "100": "#ede9fe",
+        "200": "#ddd6ff",
+        "300": "#c4b4ff",
+        "400": "#a684ff",
+        "500": "#8e51ff",
+        "600": "#7f22fe",
+        "700": "#7008e7",
+        "800": "#5d0ec0",
+        "900": "#4d179a",
+        "950": "#2f0d68"
+      },
+      "purple": {
+        "50": "#faf5ff",
+        "100": "#f3e8ff",
+        "200": "#e9d4ff",
+        "300": "#dab2ff",
+        "400": "#c27aff",
+        "500": "#ad46ff",
+        "600": "#9810fa",
+        "700": "#8200db",
+        "800": "#6e11b0",
+        "900": "#59168b",
+        "950": "#3c0366"
+      },
+      "fuchsia": {
+        "50": "#fdf4ff",
+        "100": "#fae8ff",
+        "200": "#f6cfff",
+        "300": "#f4a8ff",
+        "400": "#ed6aff",
+        "500": "#e12afb",
+        "600": "#c800de",
+        "700": "#a800b7",
+        "800": "#8a0194",
+        "900": "#721378",
+        "950": "#4b004f"
+      },
+      "pink": {
+        "50": "#fdf2f8",
+        "100": "#fce7f3",
+        "200": "#fccee8",
+        "300": "#fda5d5",
+        "400": "#fb64b6",
+        "500": "#f6339a",
+        "600": "#e60076",
+        "700": "#c6005c",
+        "800": "#a3004c",
+        "900": "#861043",
+        "950": "#510424"
+      },
+      "rose": {
+        "50": "#fff1f2",
+        "100": "#ffe4e6",
+        "200": "#ffccd3",
+        "300": "#ffa1ad",
+        "400": "#ff637e",
+        "500": "#ff2056",
+        "600": "#ec003f",
+        "700": "#c70036",
+        "800": "#a50036",
+        "900": "#8b0836",
+        "950": "#4d0218"
+      },
+      "slate": {
+        "50": "#f8fafc",
+        "100": "#f1f5f9",
+        "200": "#e2e8f0",
+        "300": "#cad5e2",
+        "400": "#90a1b9",
+        "500": "#62748e",
+        "600": "#45556c",
+        "700": "#314158",
+        "800": "#1d293d",
+        "900": "#0f172b",
+        "950": "#020618"
+      },
+      "gray": {
+        "50": "#f9fafb",
+        "100": "#f3f4f6",
+        "200": "#e5e7eb",
+        "300": "#d1d5dc",
+        "400": "#99a1af",
+        "500": "#6a7282",
+        "600": "#4a5565",
+        "700": "#364153",
+        "800": "#1e2939",
+        "900": "#101828",
+        "950": "#030712"
+      },
+      "zinc": {
+        "50": "#fafafa",
+        "100": "#f4f4f5",
+        "200": "#e4e4e7",
+        "300": "#d4d4d8",
+        "400": "#9f9fa9",
+        "500": "#71717b",
+        "600": "#52525c",
+        "700": "#3f3f46",
+        "800": "#27272a",
+        "900": "#18181b",
+        "950": "#09090b"
+      },
+      "neutral": {
+        "50": "#fafafa",
+        "100": "#f5f5f5",
+        "200": "#e5e5e5",
+        "300": "#d4d4d4",
+        "400": "#a1a1a1",
+        "500": "#737373",
+        "600": "#525252",
+        "700": "#404040",
+        "800": "#262626",
+        "900": "#171717",
+        "950": "#0a0a0a"
+      },
+      "stone": {
+        "50": "#fafaf9",
+        "100": "#f5f5f4",
+        "200": "#e7e5e4",
+        "300": "#d6d3d1",
+        "400": "#a6a09b",
+        "500": "#79716b",
+        "600": "#57534d",
+        "700": "#44403b",
+        "800": "#292524",
+        "900": "#1c1917",
+        "950": "#0c0a09"
+      },
+      "mauve": {
+        "50": "#fafafa",
+        "100": "#f3f1f3",
+        "200": "#e7e4e7",
+        "300": "#d7d0d7",
+        "400": "#a89ea9",
+        "500": "#79697b",
+        "600": "#594c5b",
+        "700": "#463947",
+        "800": "#2a212c",
+        "900": "#1d161e",
+        "950": "#0c090c"
+      },
+      "olive": {
+        "50": "#fbfbf9",
+        "100": "#f4f4f0",
+        "200": "#e8e8e3",
+        "300": "#d8d8d0",
+        "400": "#abab9c",
+        "500": "#7c7c67",
+        "600": "#5b5b4b",
+        "700": "#474739",
+        "800": "#2b2b22",
+        "900": "#1d1d16",
+        "950": "#0c0c09"
+      },
+      "mist": {
+        "50": "#f9fbfb",
+        "100": "#f1f3f3",
+        "200": "#e3e7e8",
+        "300": "#d0d6d8",
+        "400": "#9ca8ab",
+        "500": "#67787c",
+        "600": "#4b585b",
+        "700": "#394447",
+        "800": "#22292b",
+        "900": "#161b1d",
+        "950": "#090b0c"
+      },
+      "taupe": {
+        "50": "#fbfaf9",
+        "100": "#f3f1f1",
+        "200": "#e8e4e3",
+        "300": "#d8d2d0",
+        "400": "#aba09c",
+        "500": "#7c6d67",
+        "600": "#5b4f4b",
+        "700": "#473c39",
+        "800": "#2b2422",
+        "900": "#1d1816",
+        "950": "#0c0a09"
+      }
+    }
   },
   "space": {
     "0": "0rem",
@@ -1178,6 +1518,57 @@ var coreTokens = {
         "fontWeight": 900,
         "letterSpacing": "0em"
       }
+    },
+    "heading": {
+      "h1": {
+        "fontFamily": "{typography.families.sans}",
+        "fontSize": "{typography.scale.5xl.fontSize}",
+        "lineHeight": "{typography.scale.5xl.lineHeight}",
+        "fontWeight": 800,
+        "letterSpacing": "{typography.scale.5xl.letterSpacing}"
+      },
+      "h2": {
+        "fontFamily": "{typography.families.sans}",
+        "fontSize": "{typography.scale.4xl.fontSize}",
+        "lineHeight": "{typography.scale.4xl.lineHeight}",
+        "fontWeight": 700,
+        "letterSpacing": "{typography.scale.4xl.letterSpacing}"
+      },
+      "h3": {
+        "fontFamily": "{typography.families.sans}",
+        "fontSize": "{typography.scale.3xl.fontSize}",
+        "lineHeight": "{typography.scale.3xl.lineHeight}",
+        "fontWeight": 700,
+        "letterSpacing": "{typography.scale.3xl.letterSpacing}"
+      },
+      "h4": {
+        "fontFamily": "{typography.families.sans}",
+        "fontSize": "{typography.scale.2xl.fontSize}",
+        "lineHeight": "{typography.scale.2xl.lineHeight}",
+        "fontWeight": 600,
+        "letterSpacing": "{typography.scale.2xl.letterSpacing}"
+      },
+      "h5": {
+        "fontFamily": "{typography.families.sans}",
+        "fontSize": "{typography.scale.xl.fontSize}",
+        "lineHeight": "{typography.scale.xl.lineHeight}",
+        "fontWeight": 600,
+        "letterSpacing": "{typography.scale.xl.letterSpacing}"
+      },
+      "h6": {
+        "fontFamily": "{typography.families.sans}",
+        "fontSize": "{typography.scale.lg.fontSize}",
+        "lineHeight": "{typography.scale.lg.lineHeight}",
+        "fontWeight": 600,
+        "letterSpacing": "{typography.scale.lg.letterSpacing}"
+      }
+    },
+    "body": {
+      "fontFamily": "{typography.families.sans}",
+      "fontSize": "{typography.scale.md.fontSize}",
+      "lineHeight": "{typography.scale.md.lineHeight}",
+      "fontWeight": 400,
+      "letterSpacing": "{typography.scale.md.letterSpacing}"
     }
   }
 };
@@ -1266,14 +1657,17 @@ var createCssVariableMap = (tokens2, options = {}) => {
     if (value === void 0) return;
     map[name] = resolveValue(tokens2, value);
   };
-  Object.entries(baseTokens.colors).forEach(([group, scale]) => {
-    if (typeof scale === "string" || typeof scale === "number") {
-      assign(toVariableName(prefix, "color", group), scale);
+  const assignColorGroup = (parts, value) => {
+    if (typeof value === "string" || typeof value === "number") {
+      assign(toVariableName(prefix, "color", ...parts), value);
       return;
     }
-    Object.entries(scale).forEach(([step, value]) => {
-      assign(toVariableName(prefix, "color", group, step), value);
+    Object.entries(value).forEach(([key, nested]) => {
+      assignColorGroup([...parts, key], nested);
     });
+  };
+  Object.entries(baseTokens.colors).forEach(([group, scale]) => {
+    assignColorGroup([group], scale);
   });
   if (baseTokens.space) {
     Object.entries(baseTokens.space).forEach(([key, value]) => {
@@ -1362,6 +1756,23 @@ var createCssVariableMap = (tokens2, options = {}) => {
     const scaleEntry = entry;
     assign(toVariableName(prefix, "font", key, "letter-spacing"), scaleEntry.letterSpacing);
   });
+  const assignRole = (rolePrefixParts, entry) => {
+    assign(toVariableName(prefix, ...rolePrefixParts, "family"), entry.fontFamily);
+    assign(toVariableName(prefix, ...rolePrefixParts, "size"), entry.fontSize);
+    assign(toVariableName(prefix, ...rolePrefixParts, "line-height"), entry.lineHeight);
+    assign(toVariableName(prefix, ...rolePrefixParts, "weight"), entry.fontWeight);
+    assign(toVariableName(prefix, ...rolePrefixParts, "letter-spacing"), entry.letterSpacing);
+  };
+  const heading = baseTokens.typography?.heading;
+  if (heading) {
+    Object.entries(heading).forEach(([level, entry]) => {
+      assignRole(["heading", level], entry);
+    });
+  }
+  const body = baseTokens.typography?.body;
+  if (body) {
+    assignRole(["body"], body);
+  }
   Object.entries(baseTokens.shadows).forEach(([key, value]) => {
     assign(toVariableName(prefix, "shadow", key), value);
   });
@@ -1506,66 +1917,10 @@ ${darkBlock}
 
 // src/index.ts
 var tokens = coreTokens;
-var sanitizeFontFamily = (value) => value.split(",").map((segment) => segment.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean);
-var createTailwindTheme = (source = tokens) => {
-  const colors = {};
-  Object.entries(source.colors).forEach(([group, value]) => {
-    if (typeof value === "object" && value !== null) {
-      colors[group] = { ...value };
-    } else {
-      colors[group] = value;
-    }
-  });
-  const fontFamily = Object.entries(source.typography.families).reduce((acc, [key, value]) => {
-    acc[key] = sanitizeFontFamily(value);
-    return acc;
-  }, {});
-  const fontSize = Object.entries(source.typography.scale).reduce((acc, [key, entry]) => {
-    acc[key] = [
-      entry.fontSize,
-      {
-        lineHeight: entry.lineHeight,
-        ...entry.fontWeight ? { fontWeight: entry.fontWeight } : {},
-        ..."letterSpacing" in entry ? { letterSpacing: entry.letterSpacing } : {}
-      }
-    ];
-    return acc;
-  }, {});
-  return {
-    colors,
-    spacing: { ...source.space ?? {} },
-    borderRadius: { ...source.radii ?? {} },
-    fontFamily,
-    fontSize,
-    boxShadow: { ...source.shadows },
-    screens: { ...source.breakpoints },
-    zIndex: { ...source.zIndex },
-    transitionDuration: { ...source.transitions.duration },
-    transitionTimingFunction: { ...source.transitions.easing },
-    opacity: { ...source.opacity },
-    maxWidth: {
-      container: source.layout?.container?.maxWidth,
-      prose: source.layout?.container?.maxWidthProse
-    },
-    width: {
-      sidebar: source.layout?.sidebar?.width
-    },
-    borderWidth: {
-      DEFAULT: source.border?.width.base,
-      ...source.border?.width ?? {}
-    }
-  };
-};
-var tailwindTheme = createTailwindTheme(tokens);
-var tailwindPreset = {
-  theme: tailwindTheme
-};
 var index_default = tokens;
 export {
   index_default as default,
   generateCssVariables,
-  tailwindPreset,
-  tailwindTheme,
   tokens
 };
 //# sourceMappingURL=index.js.map