@phcdevworks/spectre-tokens 3.2.0 → 3.3.1

package/dist/index.css

@@ -26,14 +26,19 @@
   --sp-button-text-default: #141b24;
   --sp-button-text-on-primary: #ffffff;
   --sp-badge-neutral-bg: #eef1f6;
+  --sp-badge-neutral-bg-hover: #d9dfeb;
   --sp-badge-neutral-text: #374253;
   --sp-badge-info-bg: #e0f2fe;
+  --sp-badge-info-bg-hover: #bae6fd;
   --sp-badge-info-text: #075985;
   --sp-badge-success-bg: #dcfce7;
+  --sp-badge-success-bg-hover: #bbf7d0;
   --sp-badge-success-text: #15803d;
   --sp-badge-warning-bg: #fff1c2;
+  --sp-badge-warning-bg-hover: #ffe08a;
   --sp-badge-warning-text: #8f5200;
   --sp-badge-danger-bg: #fee2e2;
+  --sp-badge-danger-bg-hover: #fecaca;
   --sp-badge-danger-text: #b91c1c;
   --sp-icon-box-bg: #ffffff;
   --sp-icon-box-border: #d9dfeb;
@@ -97,6 +102,10 @@
   --sp-select-disabled-bg: #f7f8fb;
   --sp-select-disabled-border: #d9dfeb;
   --sp-select-focus-border: #0ea5e9;
+  --sp-select-border-invalid: #ef4444;
+  --sp-select-bg-invalid: #fef2f2;
+  --sp-select-border-success: #22c55e;
+  --sp-select-bg-success: #f0fdf4;
   --sp-textarea-bg: #ffffff;
   --sp-textarea-border: #b7c1d4;
   --sp-textarea-text: #141b24;
@@ -104,11 +113,34 @@
   --sp-textarea-disabled-bg: #f7f8fb;
   --sp-textarea-disabled-border: #d9dfeb;
   --sp-textarea-focus-border: #0ea5e9;
+  --sp-textarea-border-invalid: #ef4444;
+  --sp-textarea-bg-invalid: #fef2f2;
+  --sp-textarea-border-success: #22c55e;
+  --sp-textarea-bg-success: #f0fdf4;
   --sp-fieldset-border: #d9dfeb;
   --sp-fieldset-legend-text: #141b24;
   --sp-label-text: #141b24;
   --sp-label-disabled-text: #8a96ad;
   --sp-label-required-indicator-text: #dc2626;
+  --sp-testimonial-bg: #ffffff;
+  --sp-testimonial-bg-hover: #f7f8fb;
+  --sp-testimonial-border: #d9dfeb;
+  --sp-testimonial-text: #374253;
+  --sp-testimonial-author-name: #141b24;
+  --sp-testimonial-author-title: #4b576a;
+  --sp-testimonial-quote-mark: #4b576a;
+  --sp-pricing-card-bg: #ffffff;
+  --sp-pricing-card-bg-hover: #f7f8fb;
+  --sp-pricing-card-border: #d9dfeb;
+  --sp-pricing-card-featured-bg: #0369a1;
+  --sp-pricing-card-featured-text: #ffffff;
+  --sp-pricing-card-featured-badge-bg: #f5ad00;
+  --sp-pricing-card-featured-badge-text: #141b24;
+  --sp-pricing-card-price: #141b24;
+  --sp-pricing-card-price-description: #4b576a;
+  --sp-rating-star-filled: #f5ad00;
+  --sp-rating-star-empty: #d9dfeb;
+  --sp-rating-text: #657287;
   --sp-link-default: #1f57db;
   --sp-link-hover: #1946b4;
   --sp-link-active: #173b8f;
@@ -488,14 +520,19 @@
   --sp-button-text-default: #eef1f6;
   --sp-button-text-on-primary: #ffffff;
   --sp-badge-neutral-bg: #374253;
+  --sp-badge-neutral-bg-hover: #4b576a;
   --sp-badge-neutral-text: #f7f8fb;
   --sp-badge-info-bg: #0c4a6e;
+  --sp-badge-info-bg-hover: #075985;
   --sp-badge-info-text: #e0f2fe;
   --sp-badge-success-bg: #166534;
+  --sp-badge-success-bg-hover: #15803d;
   --sp-badge-success-text: #dcfce7;
   --sp-badge-warning-bg: #8f5200;
+  --sp-badge-warning-bg-hover: #8f5200;
   --sp-badge-warning-text: #fff1c2;
   --sp-badge-danger-bg: #991b1b;
+  --sp-badge-danger-bg-hover: #b91c1c;
   --sp-badge-danger-text: #fee2e2;
   --sp-icon-box-bg: #222b38;
   --sp-icon-box-border: #374253;
@@ -559,6 +596,10 @@
   --sp-select-disabled-bg: #141b24;
   --sp-select-disabled-border: #374253;
   --sp-select-focus-border: #38bdf8;
+  --sp-select-border-invalid: #ef4444;
+  --sp-select-bg-invalid: #fef2f2;
+  --sp-select-border-success: #22c55e;
+  --sp-select-bg-success: #f0fdf4;
   --sp-textarea-bg: #222b38;
   --sp-textarea-border: #4b576a;
   --sp-textarea-text: #f7f8fb;
@@ -566,11 +607,34 @@
   --sp-textarea-disabled-bg: #141b24;
   --sp-textarea-disabled-border: #374253;
   --sp-textarea-focus-border: #38bdf8;
+  --sp-textarea-border-invalid: #ef4444;
+  --sp-textarea-bg-invalid: #fef2f2;
+  --sp-textarea-border-success: #22c55e;
+  --sp-textarea-bg-success: #f0fdf4;
   --sp-fieldset-border: #374253;
   --sp-fieldset-legend-text: #f7f8fb;
   --sp-label-text: #f7f8fb;
   --sp-label-disabled-text: #4b576a;
   --sp-label-required-indicator-text: #f87171;
+  --sp-testimonial-bg: #222b38;
+  --sp-testimonial-bg-hover: #374253;
+  --sp-testimonial-border: #374253;
+  --sp-testimonial-text: #d9dfeb;
+  --sp-testimonial-author-name: #eef1f6;
+  --sp-testimonial-author-title: #b7c1d4;
+  --sp-testimonial-quote-mark: #b7c1d4;
+  --sp-pricing-card-bg: #222b38;
+  --sp-pricing-card-bg-hover: #374253;
+  --sp-pricing-card-border: #374253;
+  --sp-pricing-card-featured-bg: #0369a1;
+  --sp-pricing-card-featured-text: #ffffff;
+  --sp-pricing-card-featured-badge-bg: #f5ad00;
+  --sp-pricing-card-featured-badge-text: #141b24;
+  --sp-pricing-card-price: #eef1f6;
+  --sp-pricing-card-price-description: #b7c1d4;
+  --sp-rating-star-filled: #ffc21a;
+  --sp-rating-star-empty: #374253;
+  --sp-rating-text: #8a96ad;
   --sp-link-default: #1f57db;
   --sp-link-hover: #1946b4;
   --sp-link-active: #173b8f;

package/dist/index.d.cts

@@ -143,6 +143,10 @@ interface SpectreGeneratedTokens {
             disabledBg: string;
             disabledBorder: string;
             focusBorder: string;
+            borderInvalid: string;
+            bgInvalid: string;
+            borderSuccess: string;
+            bgSuccess: string;
         };
         textarea: {
             bg: string;
@@ -152,6 +156,10 @@ interface SpectreGeneratedTokens {
             disabledBg: string;
             disabledBorder: string;
             focusBorder: string;
+            borderInvalid: string;
+            bgInvalid: string;
+            borderSuccess: string;
+            bgSuccess: string;
         };
         fieldset: {
             border: string;
@@ -1331,6 +1339,10 @@ interface ComponentSelectTokens<Value = string> {
     disabledBg: Value;
     disabledBorder: Value;
     focusBorder: Value;
+    borderInvalid: Value;
+    bgInvalid: Value;
+    borderSuccess: Value;
+    bgSuccess: Value;
 }
 interface ComponentTextareaTokens<Value = string> {
     bg: Value;
@@ -1340,6 +1352,10 @@ interface ComponentTextareaTokens<Value = string> {
     disabledBg: Value;
     disabledBorder: Value;
     focusBorder: Value;
+    borderInvalid: Value;
+    bgInvalid: Value;
+    borderSuccess: Value;
+    bgSuccess: Value;
 }
 interface ComponentFieldsetTokens<Value = string> {
     border: Value;

package/dist/index.d.ts

@@ -143,6 +143,10 @@ interface SpectreGeneratedTokens {
             disabledBg: string;
             disabledBorder: string;
             focusBorder: string;
+            borderInvalid: string;
+            bgInvalid: string;
+            borderSuccess: string;
+            bgSuccess: string;
         };
         textarea: {
             bg: string;
@@ -152,6 +156,10 @@ interface SpectreGeneratedTokens {
             disabledBg: string;
             disabledBorder: string;
             focusBorder: string;
+            borderInvalid: string;
+            bgInvalid: string;
+            borderSuccess: string;
+            bgSuccess: string;
         };
         fieldset: {
             border: string;
@@ -1331,6 +1339,10 @@ interface ComponentSelectTokens<Value = string> {
     disabledBg: Value;
     disabledBorder: Value;
     focusBorder: Value;
+    borderInvalid: Value;
+    bgInvalid: Value;
+    borderSuccess: Value;
+    bgSuccess: Value;
 }
 interface ComponentTextareaTokens<Value = string> {
     bg: Value;
@@ -1340,6 +1352,10 @@ interface ComponentTextareaTokens<Value = string> {
     disabledBg: Value;
     disabledBorder: Value;
     focusBorder: Value;
+    borderInvalid: Value;
+    bgInvalid: Value;
+    borderSuccess: Value;
+    bgSuccess: Value;
 }
 interface ComponentFieldsetTokens<Value = string> {
     border: Value;

package/dist/index.js

@@ -143,7 +143,11 @@ var coreTokens = {
       "placeholderText": "{colors.neutral.500}",
       "disabledBg": "{colors.neutral.50}",
       "disabledBorder": "{colors.neutral.200}",
-      "focusBorder": "{colors.info.500}"
+      "focusBorder": "{colors.info.500}",
+      "borderInvalid": "{colors.error.500}",
+      "bgInvalid": "{colors.error.50}",
+      "borderSuccess": "{colors.success.500}",
+      "bgSuccess": "{colors.success.50}"
     },
     "textarea": {
       "bg": "{colors.white}",
@@ -152,7 +156,11 @@ var coreTokens = {
       "placeholder": "{colors.neutral.500}",
       "disabledBg": "{colors.neutral.50}",
       "disabledBorder": "{colors.neutral.200}",
-      "focusBorder": "{colors.info.500}"
+      "focusBorder": "{colors.info.500}",
+      "borderInvalid": "{colors.error.500}",
+      "bgInvalid": "{colors.error.50}",
+      "borderSuccess": "{colors.success.500}",
+      "bgSuccess": "{colors.success.50}"
     },
     "fieldset": {
       "border": "{colors.neutral.200}",
@@ -1183,11 +1191,11 @@ var toVariableName = (prefix, ...parts) => {
   return `--${prefix}-${filtered.join("-")}`;
 };
 var BADGE_VARIANTS = [
-  { variant: "neutral", bgKey: "neutralBg", textKey: "neutralText" },
-  { variant: "info", bgKey: "infoBg", textKey: "infoText" },
-  { variant: "success", bgKey: "successBg", textKey: "successText" },
-  { variant: "warning", bgKey: "warningBg", textKey: "warningText" },
-  { variant: "danger", bgKey: "dangerBg", textKey: "dangerText" }
+  { variant: "neutral", bgKey: "neutralBg", bgHoverKey: "neutralBgHover", textKey: "neutralText" },
+  { variant: "info", bgKey: "infoBg", bgHoverKey: "infoBgHover", textKey: "infoText" },
+  { variant: "success", bgKey: "successBg", bgHoverKey: "successBgHover", textKey: "successText" },
+  { variant: "warning", bgKey: "warningBg", bgHoverKey: "warningBgHover", textKey: "warningText" },
+  { variant: "danger", bgKey: "dangerBg", bgHoverKey: "dangerBgHover", textKey: "dangerText" }
 ];
 var ICON_BOX_FIELDS = [
   { name: "bg", tokenKey: "bg" },
@@ -1211,6 +1219,31 @@ var MODAL_FIELDS = [
   { name: "border", tokenKey: "border" },
   { name: "overlay", tokenKey: "overlay" }
 ];
+var TESTIMONIAL_FIELDS = [
+  { name: "bg", tokenKey: "bg" },
+  { name: "bg-hover", tokenKey: "bgHover" },
+  { name: "border", tokenKey: "border" },
+  { name: "text", tokenKey: "text" },
+  { name: "author-name", tokenKey: "authorName" },
+  { name: "author-title", tokenKey: "authorTitle" },
+  { name: "quote-mark", tokenKey: "quoteMark" }
+];
+var PRICING_CARD_FIELDS = [
+  { name: "bg", tokenKey: "bg" },
+  { name: "bg-hover", tokenKey: "bgHover" },
+  { name: "border", tokenKey: "border" },
+  { name: "featured-bg", tokenKey: "featuredBg" },
+  { name: "featured-text", tokenKey: "featuredText" },
+  { name: "featured-badge-bg", tokenKey: "featuredBadgeBg" },
+  { name: "featured-badge-text", tokenKey: "featuredBadgeText" },
+  { name: "price", tokenKey: "price" },
+  { name: "price-description", tokenKey: "priceDescription" }
+];
+var RATING_FIELDS = [
+  { name: "star-filled", tokenKey: "starFilled" },
+  { name: "star-empty", tokenKey: "starEmpty" },
+  { name: "text", tokenKey: "text" }
+];
 var TOAST_VARIANTS = ["success", "warning", "danger", "info"].map((variant) => ({
   variant,
   fields: [
@@ -1249,7 +1282,11 @@ var SELECT_FIELDS = [
   { name: "placeholder-text", tokenKey: "placeholderText" },
   { name: "disabled-bg", tokenKey: "disabledBg" },
   { name: "disabled-border", tokenKey: "disabledBorder" },
-  { name: "focus-border", tokenKey: "focusBorder" }
+  { name: "focus-border", tokenKey: "focusBorder" },
+  { name: "border-invalid", tokenKey: "borderInvalid" },
+  { name: "bg-invalid", tokenKey: "bgInvalid" },
+  { name: "border-success", tokenKey: "borderSuccess" },
+  { name: "bg-success", tokenKey: "bgSuccess" }
 ];
 var TEXTAREA_FIELDS = [
   { name: "bg", tokenKey: "bg" },
@@ -1258,7 +1295,11 @@ var TEXTAREA_FIELDS = [
   { name: "placeholder", tokenKey: "placeholder" },
   { name: "disabled-bg", tokenKey: "disabledBg" },
   { name: "disabled-border", tokenKey: "disabledBorder" },
-  { name: "focus-border", tokenKey: "focusBorder" }
+  { name: "focus-border", tokenKey: "focusBorder" },
+  { name: "border-invalid", tokenKey: "borderInvalid" },
+  { name: "bg-invalid", tokenKey: "bgInvalid" },
+  { name: "border-success", tokenKey: "borderSuccess" },
+  { name: "bg-success", tokenKey: "bgSuccess" }
 ];
 var FIELDSET_FIELDS = [
   { name: "border", tokenKey: "border" },
@@ -1512,8 +1553,9 @@ var generateCssVariables = (tokens2, options = {}) => {
     { varParts: ["component", "input", "placeholder"], modePath: ["component", "input", "placeholder"], aliasSrc: componentAliases, aliasPath: ["input", "placeholder"] },
     { varParts: ["button", "text", "default"], modePath: ["component", "button", "textDefault"], aliasSrc: componentAliases, aliasPath: ["button", "textDefault"] },
     { varParts: ["button", "text", "on", "primary"], modePath: ["component", "button", "textOnPrimary"], aliasSrc: componentAliases, aliasPath: ["button", "textOnPrimary"] },
-    ...BADGE_VARIANTS.flatMap(({ variant, bgKey, textKey }) => [
+    ...BADGE_VARIANTS.flatMap(({ variant, bgKey, bgHoverKey, textKey }) => [
       { varParts: ["badge", variant, "bg"], modePath: ["component", "badge", bgKey], aliasSrc: componentAliases, aliasPath: ["badge", bgKey] },
+      { varParts: ["badge", variant, "bg-hover"], modePath: ["component", "badge", bgHoverKey], aliasSrc: componentAliases, aliasPath: ["badge", bgHoverKey] },
       { varParts: ["badge", variant, "text"], modePath: ["component", "badge", textKey], aliasSrc: componentAliases, aliasPath: ["badge", textKey] }
     ]),
     ...ICON_BOX_FIELDS.map(({ name, tokenKey }) => ({
@@ -1587,6 +1629,24 @@ var generateCssVariables = (tokens2, options = {}) => {
       modePath: ["component", "label", tokenKey],
       aliasSrc: componentAliases,
       aliasPath: ["label", tokenKey]
+    })),
+    ...TESTIMONIAL_FIELDS.map(({ name, tokenKey }) => ({
+      varParts: ["testimonial", name],
+      modePath: ["component", "testimonial", tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["testimonial", tokenKey]
+    })),
+    ...PRICING_CARD_FIELDS.map(({ name, tokenKey }) => ({
+      varParts: ["pricing-card", name],
+      modePath: ["component", "pricingCard", tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["pricingCard", tokenKey]
+    })),
+    ...RATING_FIELDS.map(({ name, tokenKey }) => ({
+      varParts: ["rating", name],
+      modePath: ["component", "rating", tokenKey],
+      aliasSrc: componentAliases,
+      aliasPath: ["rating", tokenKey]
     }))
   ];
   const baseLines = [];