npm - @phcdevworks/spectre-tokens - Versions diffs - 0.2.1 → 2.0.0 - Mend

@phcdevworks/spectre-tokens 0.2.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/README.md +13 -17
package/dist/index.cjs +1251 -602
package/dist/index.cjs.map +1 -1
package/dist/index.css +105 -73
package/dist/index.d.cts +1340 -87
package/dist/index.d.ts +1340 -87
package/dist/index.js +1251 -602
package/dist/index.js.map +1 -1
package/package.json +15 -4
package/tokens/components.json +155 -0
package/tokens/modes.json +182 -0
package/tokens/palette.json +102 -0
package/tokens/primitives.json +145 -0
package/tokens/semantic-roles.json +64 -0
package/tokens/typography.json +94 -0
package/tokens/core.json +0 -714

package/tokens/core.json DELETED Viewed

@@ -1,714 +0,0 @@
-{
-  "colors": {
-    "brand": {
-      "50": "#f5f0ff",
-      "100": "#ebe2ff",
-      "200": "#d7c6ff",
-      "300": "#bfa1ff",
-      "400": "#a37aff",
-      "500": "#8652ff",
-      "600": "#6c32e6",
-      "700": "#5626b4",
-      "800": "#3d1b7f",
-      "900": "#241147"
-    },
-    "neutral": {
-      "50": "#f8fafc",
-      "100": "#f1f5f9",
-      "200": "#e2e8f0",
-      "300": "#cbd5f5",
-      "400": "#94a3b8",
-      "500": "#64748b",
-      "600": "#475569",
-      "700": "#334155",
-      "800": "#1e293b",
-      "900": "#0f172a"
-    },
-    "accent": {
-      "50": "#e5fff8",
-      "100": "#b8ffed",
-      "200": "#89ffe1",
-      "300": "#59ffd6",
-      "400": "#29ffca",
-      "500": "#03e6b3",
-      "600": "#00b389",
-      "700": "#008060",
-      "800": "#004d38",
-      "900": "#002a20"
-    },
-    "success": {
-      "50": "#f0fdf4",
-      "100": "#dcfce7",
-      "200": "#bbf7d0",
-      "300": "#86efac",
-      "400": "#4ade80",
-      "500": "#22c55e",
-      "600": "#16a34a",
-      "700": "#15803d",
-      "800": "#166534",
-      "900": "#14532d"
-    },
-    "warning": {
-      "50": "#fffbeb",
-      "100": "#fef3c7",
-      "200": "#fde68a",
-      "300": "#fcd34d",
-      "400": "#fbbf24",
-      "500": "#f59e0b",
-      "600": "#d97706",
-      "700": "#b45309",
-      "800": "#92400e",
-      "900": "#78350f"
-    },
-    "error": {
-      "50": "#fef2f2",
-      "100": "#fee2e2",
-      "200": "#fecaca",
-      "300": "#fca5a5",
-      "400": "#f87171",
-      "500": "#ef4444",
-      "600": "#dc2626",
-      "700": "#b91c1c",
-      "800": "#991b1b",
-      "900": "#7f1d1d"
-    },
-    "info": {
-      "50": "#eff6ff",
-      "100": "#dbeafe",
-      "200": "#bfdbfe",
-      "300": "#93c5fd",
-      "400": "#60a5fa",
-      "500": "#3b82f6",
-      "600": "#2563eb",
-      "700": "#1d4ed8",
-      "800": "#1e40af",
-      "900": "#1e3a8a"
-    },
-    "focus": {
-      "primary": "#8652ff",
-      "error": "#ef4444",
-      "info": "#3b82f6"
-    }
-  },
-  "surface": {
-    "page": {
-      "value": "#f8fafc",
-      "description": "primary app background"
-    },
-    "card": {
-      "value": "#ffffff",
-      "description": "containers and tiles"
-    },
-    "input": {
-      "value": "#ffffff",
-      "description": "form inputs, textareas"
-    },
-    "overlay": {
-      "value": "rgba(15,23,42,0.6)",
-      "description": "modals, dropdowns, flyouts"
-    }
-  },
-  "text": {
-    "onPage": {
-      "default": "#0f172a",
-      "muted": "#475569",
-      "subtle": "#94a3b8",
-      "meta": "#94a3b8"
-    },
-    "onSurface": {
-      "default": "#0f172a",
-      "muted": "#6b7280",
-      "subtle": "#94a3b8",
-      "meta": "#94a3b8"
-    }
-  },
-  "component": {
-    "card": {
-      "text": "#0f172a",
-      "textMuted": "#6b7280"
-    },
-    "input": {
-      "text": "#0f172a",
-      "placeholder": "#94a3b8"
-    },
-    "button": {
-      "textDefault": "#0f172a",
-      "textOnPrimary": "#ffffff"
-    },
-    "badge": {
-      "neutralBg": "#f1f5f9",
-      "neutralText": "#334155",
-      "infoBg": "#dbeafe",
-      "infoText": "#1d4ed8",
-      "successBg": "#dcfce7",
-      "successText": "#15803d",
-      "warningBg": "#fef3c7",
-      "warningText": "#b45309",
-      "dangerBg": "#fee2e2",
-      "dangerText": "#b91c1c"
-    },
-    "iconBox": {
-      "bg": "#ffffff",
-      "border": "#e2e8f0",
-      "iconDefault": "#6c32e6",
-      "iconSuccess": "#16a34a",
-      "iconWarning": "#d97706",
-      "iconDanger": "#dc2626"
-    }
-  },
-  "modes": {
-    "default": {
-      "surface": {
-        "page": {
-          "value": "#f8fafc"
-        },
-        "card": {
-          "value": "#ffffff"
-        },
-        "input": {
-          "value": "#ffffff"
-        },
-        "overlay": {
-          "value": "rgba(15,23,42,0.6)"
-        }
-      },
-      "text": {
-        "onPage": {
-          "default": {
-            "value": "#0f172a"
-          },
-          "muted": {
-            "value": "#475569"
-          },
-          "subtle": {
-            "value": "#94a3b8"
-          },
-          "meta": {
-            "value": "#94a3b8"
-          }
-        },
-        "onSurface": {
-          "default": {
-            "value": "#0f172a"
-          },
-          "muted": {
-            "value": "#6b7280"
-          },
-          "subtle": {
-            "value": "#94a3b8"
-          },
-          "meta": {
-            "value": "#94a3b8"
-          }
-        }
-      },
-      "component": {
-        "card": {
-          "text": {
-            "value": "#0f172a"
-          },
-          "textMuted": {
-            "value": "#6b7280"
-          }
-        },
-        "input": {
-          "text": {
-            "value": "#0f172a"
-          },
-          "placeholder": {
-            "value": "#94a3b8"
-          }
-        },
-        "button": {
-          "textDefault": {
-            "value": "#0f172a"
-          },
-          "textOnPrimary": {
-            "value": "#ffffff"
-          }
-        },
-        "badge": {
-          "neutralBg": {
-            "value": "#f1f5f9"
-          },
-          "neutralText": {
-            "value": "#334155"
-          },
-          "infoBg": {
-            "value": "#dbeafe"
-          },
-          "infoText": {
-            "value": "#1d4ed8"
-          },
-          "successBg": {
-            "value": "#dcfce7"
-          },
-          "successText": {
-            "value": "#15803d"
-          },
-          "warningBg": {
-            "value": "#fef3c7"
-          },
-          "warningText": {
-            "value": "#b45309"
-          },
-          "dangerBg": {
-            "value": "#fee2e2"
-          },
-          "dangerText": {
-            "value": "#b91c1c"
-          }
-        },
-        "iconBox": {
-          "bg": {
-            "value": "#ffffff"
-          },
-          "border": {
-            "value": "#e2e8f0"
-          },
-          "iconDefault": {
-            "value": "#6c32e6"
-          },
-          "iconSuccess": {
-            "value": "#16a34a"
-          },
-          "iconWarning": {
-            "value": "#d97706"
-          },
-          "iconDanger": {
-            "value": "#dc2626"
-          }
-        }
-      }
-    },
-    "dark": {
-      "surface": {
-        "page": {
-          "value": "#0f172a"
-        },
-        "card": {
-          "value": "#1e293b"
-        },
-        "input": {
-          "value": "#334155"
-        },
-        "overlay": {
-          "value": "#1e293b"
-        }
-      },
-      "text": {
-        "onPage": {
-          "default": {
-            "value": "#f8fafc"
-          },
-          "muted": {
-            "value": "#cbd5f5"
-          },
-          "subtle": {
-            "value": "#94a3b8"
-          },
-          "meta": {
-            "value": "#94a3b8"
-          }
-        },
-        "onSurface": {
-          "default": {
-            "value": "#f1f5f9"
-          },
-          "muted": {
-            "value": "#cbd5f5"
-          },
-          "subtle": {
-            "value": "#94a3b8"
-          },
-          "meta": {
-            "value": "#94a3b8"
-          }
-        }
-      },
-      "component": {
-        "card": {
-          "text": {
-            "value": "#f1f5f9"
-          },
-          "textMuted": {
-            "value": "#cbd5f5"
-          }
-        },
-        "input": {
-          "text": {
-            "value": "#f1f5f9"
-          },
-          "placeholder": {
-            "value": "#94a3b8"
-          }
-        },
-        "button": {
-          "textDefault": {
-            "value": "#f1f5f9"
-          },
-          "textOnPrimary": {
-            "value": "#ffffff"
-          }
-        },
-        "badge": {
-          "neutralBg": {
-            "value": "#334155"
-          },
-          "neutralText": {
-            "value": "#f1f5f9"
-          },
-          "infoBg": {
-            "value": "#1e40af"
-          },
-          "infoText": {
-            "value": "#dbeafe"
-          },
-          "successBg": {
-            "value": "#166534"
-          },
-          "successText": {
-            "value": "#dcfce7"
-          },
-          "warningBg": {
-            "value": "#92400e"
-          },
-          "warningText": {
-            "value": "#fef3c7"
-          },
-          "dangerBg": {
-            "value": "#991b1b"
-          },
-          "dangerText": {
-            "value": "#fee2e2"
-          }
-        },
-        "iconBox": {
-          "bg": {
-            "value": "#1e293b"
-          },
-          "border": {
-            "value": "#334155"
-          },
-          "iconDefault": {
-            "value": "#a37aff"
-          },
-          "iconSuccess": {
-            "value": "#4ade80"
-          },
-          "iconWarning": {
-            "value": "#fbbf24"
-          },
-          "iconDanger": {
-            "value": "#f87171"
-          }
-        }
-      }
-    }
-  },
-  "opacity": {
-    "disabled": "0.38",
-    "hover": "0.92",
-    "active": "0.84",
-    "focus": "1",
-    "overlay": "0.5",
-    "tooltip": "0.95"
-  },
-  "accessibility": {
-    "focusRing": {
-      "width": "2px",
-      "offset": "2px",
-      "style": "solid"
-    },
-    "minTouchTarget": "44px",
-    "minTextSize": "16px"
-  },
-  "buttons": {
-    "primary": {
-      "bg": "#8652ff",
-      "bgHover": "#6c32e6",
-      "bgActive": "#5626b4",
-      "bgDisabled": "#cbd5f5",
-      "text": "#ffffff",
-      "textDisabled": "#94a3b8"
-    },
-    "secondary": {
-      "bg": "#ffffff",
-      "bgHover": "#f1f5f9",
-      "bgActive": "#e2e8f0",
-      "bgDisabled": "#f8fafc",
-      "text": "#8652ff",
-      "textDisabled": "#94a3b8",
-      "border": "#8652ff",
-      "borderDisabled": "#cbd5f5"
-    },
-    "ghost": {
-      "bg": "transparent",
-      "bgHover": "#f5f0ff",
-      "bgActive": "#ebe2ff",
-      "bgDisabled": "transparent",
-      "text": "#8652ff",
-      "textDisabled": "#94a3b8"
-    },
-    "danger": {
-      "bg": "#ef4444",
-      "bgHover": "#dc2626",
-      "bgActive": "#b91c1c",
-      "bgDisabled": "#fecaca",
-      "text": "#ffffff",
-      "textDisabled": "#94a3b8"
-    },
-    "success": {
-      "bg": "#22c55e",
-      "bgHover": "#16a34a",
-      "bgActive": "#15803d",
-      "bgDisabled": "#bbf7d0",
-      "text": "#ffffff",
-      "textDisabled": "#94a3b8"
-    }
-  },
-  "forms": {
-    "default": {
-      "bg": "#ffffff",
-      "border": "#cbd5f5",
-      "text": "#0f172a",
-      "placeholder": "#94a3b8"
-    },
-    "hover": {
-      "border": "#8652ff"
-    },
-    "focus": {
-      "border": "#8652ff",
-      "ring": "#8652ff"
-    },
-    "valid": {
-      "border": "#22c55e",
-      "bg": "#f0fdf4",
-      "text": "#15803d"
-    },
-    "invalid": {
-      "border": "#ef4444",
-      "bg": "#fef2f2",
-      "text": "#b91c1c"
-    },
-    "disabled": {
-      "bg": "#f8fafc",
-      "border": "#e2e8f0",
-      "text": "#94a3b8"
-    }
-  },
-  "layout": {
-    "section": {
-      "padding": {
-        "sm": "1.5rem",
-        "md": "2rem",
-        "lg": "3rem"
-      },
-      "gap": {
-        "sm": "1rem",
-        "md": "1.5rem",
-        "lg": "2rem"
-      }
-    },
-    "stack": {
-      "gap": {
-        "sm": "0.5rem",
-        "md": "0.75rem",
-        "lg": "1rem"
-      }
-    },
-    "container": {
-      "paddingInline": {
-        "sm": "1rem",
-        "md": "1.5rem",
-        "lg": "2rem"
-      }
-    }
-  },
-  "space": {
-    "0": "0rem",
-    "4": "0.25rem",
-    "8": "0.5rem",
-    "12": "0.75rem",
-    "16": "1rem",
-    "20": "1.25rem",
-    "24": "1.5rem",
-    "32": "2rem",
-    "40": "2.5rem",
-    "48": "3rem",
-    "56": "3.5rem",
-    "64": "4rem",
-    "80": "5rem",
-    "96": "6rem"
-  },
-  "radii": {
-    "none": "0",
-    "sm": "2px",
-    "md": "4px",
-    "lg": "8px",
-    "pill": "999px"
-  },
-  "borders": {
-    "card": "#334155",
-    "input": "#cbd5f5"
-  },
-  "font": {
-    "xs": {
-      "size": "0.75rem",
-      "lineHeight": "1.25rem",
-      "weight": 400
-    },
-    "sm": {
-      "size": "0.875rem",
-      "lineHeight": "1.5rem",
-      "weight": 400
-    },
-    "md": {
-      "size": "1rem",
-      "lineHeight": "1.75rem",
-      "weight": 500
-    },
-    "lg": {
-      "size": "1.25rem",
-      "lineHeight": "2rem",
-      "weight": 500
-    },
-    "xl": {
-      "size": "1.5rem",
-      "lineHeight": "2.125rem",
-      "weight": 600
-    },
-    "2xl": {
-      "size": "1.875rem",
-      "lineHeight": "2.5rem",
-      "weight": 600
-    }
-  },
-  "typography": {
-    "families": {
-      "sans": "'Inter', 'Helvetica Neue', Arial, sans-serif",
-      "serif": "'Spectre Serif', 'Georgia', serif",
-      "mono": "'JetBrains Mono', 'SFMono-Regular', Consolas, monospace"
-    },
-    "scale": {
-      "xs": {
-        "fontSize": "0.75rem",
-        "lineHeight": "1.25rem",
-        "fontWeight": 400,
-        "letterSpacing": "0.02em"
-      },
-      "sm": {
-        "fontSize": "0.875rem",
-        "lineHeight": "1.5rem",
-        "fontWeight": 400
-      },
-      "md": {
-        "fontSize": "1rem",
-        "lineHeight": "1.75rem",
-        "fontWeight": 500
-      },
-      "lg": {
-        "fontSize": "1.25rem",
-        "lineHeight": "2rem",
-        "fontWeight": 600
-      },
-      "xl": {
-        "fontSize": "1.5rem",
-        "lineHeight": "2.125rem",
-        "fontWeight": 600
-      },
-      "2xl": {
-        "fontSize": "1.875rem",
-        "lineHeight": "2.5rem",
-        "fontWeight": 700
-      },
-      "3xl": {
-        "fontSize": "2.25rem",
-        "lineHeight": "2.75rem",
-        "fontWeight": 700
-      }
-    }
-  },
-  "shadows": {
-    "none": "none",
-    "sm": "0 1px 2px 0 rgba(15, 23, 42, 0.08)",
-    "md": "0 3px 8px -1px rgba(15, 23, 42, 0.1)",
-    "lg": "0 8px 20px -4px rgba(15, 23, 42, 0.18)"
-  },
-  "breakpoints": {
-    "sm": "640px",
-    "md": "768px",
-    "lg": "1024px",
-    "xl": "1280px",
-    "2xl": "1536px"
-  },
-  "zIndex": {
-    "base": "0",
-    "dropdown": "1000",
-    "sticky": "1100",
-    "fixed": "1200",
-    "overlay": "1300",
-    "modal": "1400",
-    "popover": "1500",
-    "tooltip": "1600"
-  },
-  "transitions": {
-    "duration": {
-      "instant": "75ms",
-      "fast": "150ms",
-      "base": "200ms",
-      "moderate": "300ms",
-      "slow": "500ms",
-      "slower": "700ms"
-    },
-    "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.34, 1.56, 0.64, 1)"
-    }
-  },
-  "animations": {
-    "fadeIn": {
-      "duration": "200ms",
-      "easing": "cubic-bezier(0, 0, 0.2, 1)",
-      "keyframes": "fade-in"
-    },
-    "fadeOut": {
-      "duration": "150ms",
-      "easing": "cubic-bezier(0.4, 0, 1, 1)",
-      "keyframes": "fade-out"
-    },
-    "slideUp": {
-      "duration": "300ms",
-      "easing": "cubic-bezier(0, 0, 0.2, 1)",
-      "keyframes": "slide-up"
-    },
-    "slideDown": {
-      "duration": "300ms",
-      "easing": "cubic-bezier(0, 0, 0.2, 1)",
-      "keyframes": "slide-down"
-    },
-    "scaleIn": {
-      "duration": "200ms",
-      "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
-      "keyframes": "scale-in"
-    },
-    "bounce": {
-      "duration": "500ms",
-      "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
-      "keyframes": "bounce"
-    },
-    "shake": {
-      "duration": "400ms",
-      "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
-      "keyframes": "shake"
-    },
-    "pulse": {
-      "duration": "1500ms",
-      "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
-      "keyframes": "pulse"
-    }
-  }
-}