@phcdevworks/spectre-tokens 2.7.0 → 2.8.0

package/dist/index.css

@@ -116,17 +116,24 @@
   --sp-color-white: #ffffff;
   --sp-color-black: #000000;
   --sp-space-0: 0rem;
+  --sp-space-1: 0.0625rem;
+  --sp-space-2: 0.125rem;
   --sp-space-4: 0.25rem;
+  --sp-space-6: 0.375rem;
   --sp-space-8: 0.5rem;
+  --sp-space-10: 0.625rem;
   --sp-space-12: 0.75rem;
+  --sp-space-14: 0.875rem;
   --sp-space-16: 1rem;
   --sp-space-20: 1.25rem;
   --sp-space-24: 1.5rem;
+  --sp-space-28: 1.75rem;
   --sp-space-32: 2rem;
   --sp-space-40: 2.5rem;
   --sp-space-48: 3rem;
   --sp-space-56: 3.5rem;
   --sp-space-64: 4rem;
+  --sp-space-72: 4.5rem;
   --sp-space-80: 5rem;
   --sp-space-96: 6rem;
   --sp-layout-section-padding-sm: 1.5rem;
@@ -142,16 +149,21 @@
   --sp-layout-container-padding-inline-md: 1.5rem;
   --sp-layout-container-padding-inline-lg: 2rem;
   --sp-layout-container-max-width: 72rem;
+  --sp-border-width-none: 0;
   --sp-border-width-base: 1px;
   --sp-border-width-thick: 2px;
   --sp-border-style-none: none;
   --sp-border-style-solid: solid;
+  --sp-border-style-dashed: dashed;
+  --sp-border-style-dotted: dotted;
   --sp-radius-none: 0;
   --sp-radius-sm: 2px;
   --sp-radius-md: 4px;
   --sp-radius-lg: 8px;
   --sp-radius-xl: 12px;
   --sp-radius-2xl: 16px;
+  --sp-radius-3xl: 24px;
+  --sp-radius-4xl: 32px;
   --sp-radius-pill: 999px;
   --sp-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   --sp-font-family-serif: 'Times New Roman', Times, serif;
@@ -276,6 +288,7 @@
   --sp-button-danger-text: #ffffff;
   --sp-button-danger-textdisabled: #8a96ad;
   --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
+  --sp-button-danger-focusvisible: rgba(239, 68, 68, 0.4);
   --sp-button-success-bg: #15803d;
   --sp-button-success-bghover: #166534;
   --sp-button-success-bgactive: #14532d;
@@ -283,6 +296,7 @@
   --sp-button-success-text: #ffffff;
   --sp-button-success-textdisabled: #8a96ad;
   --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
+  --sp-button-success-focusvisible: rgba(34, 197, 94, 0.4);
   --sp-button-cta-bg: #1f57db;
   --sp-button-cta-bghover: #1946b4;
   --sp-button-cta-bgactive: #173b8f;

package/dist/index.d.cts

@@ -104,6 +104,7 @@ interface SpectreGeneratedTokens {
             text: string;
             textDisabled: string;
             focusRing: string;
+            focusVisible: string;
         };
         success: {
             bg: string;
@@ -113,6 +114,7 @@ interface SpectreGeneratedTokens {
             text: string;
             textDisabled: string;
             focusRing: string;
+            focusVisible: string;
         };
         cta: {
             bg: string;
@@ -450,17 +452,24 @@ interface SpectreGeneratedTokens {
     };
     space: {
         '0': string;
+        '1': string;
+        '2': string;
         '4': string;
+        '6': string;
         '8': string;
+        '10': string;
         '12': string;
+        '14': string;
         '16': string;
         '20': string;
         '24': string;
+        '28': string;
         '32': string;
         '40': string;
         '48': string;
         '56': string;
         '64': string;
+        '72': string;
         '80': string;
         '96': string;
     };
@@ -471,6 +480,8 @@ interface SpectreGeneratedTokens {
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
         pill: string;
     };
     shadows: {
@@ -600,12 +611,15 @@ interface SpectreGeneratedTokens {
     };
     border: {
         width: {
+            none: string;
             base: string;
             thick: string;
         };
         style: {
             none: string;
             solid: string;
+            dashed: string;
+            dotted: string;
         };
     };
     surface: {

package/dist/index.d.ts

@@ -104,6 +104,7 @@ interface SpectreGeneratedTokens {
             text: string;
             textDisabled: string;
             focusRing: string;
+            focusVisible: string;
         };
         success: {
             bg: string;
@@ -113,6 +114,7 @@ interface SpectreGeneratedTokens {
             text: string;
             textDisabled: string;
             focusRing: string;
+            focusVisible: string;
         };
         cta: {
             bg: string;
@@ -450,17 +452,24 @@ interface SpectreGeneratedTokens {
     };
     space: {
         '0': string;
+        '1': string;
+        '2': string;
         '4': string;
+        '6': string;
         '8': string;
+        '10': string;
         '12': string;
+        '14': string;
         '16': string;
         '20': string;
         '24': string;
+        '28': string;
         '32': string;
         '40': string;
         '48': string;
         '56': string;
         '64': string;
+        '72': string;
         '80': string;
         '96': string;
     };
@@ -471,6 +480,8 @@ interface SpectreGeneratedTokens {
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
         pill: string;
     };
     shadows: {
@@ -600,12 +611,15 @@ interface SpectreGeneratedTokens {
     };
     border: {
         width: {
+            none: string;
             base: string;
             thick: string;
         };
         style: {
             none: string;
             solid: string;
+            dashed: string;
+            dotted: string;
         };
     };
     surface: {

package/dist/index.js

@@ -104,7 +104,8 @@ var coreTokens = {
       "bgDisabled": "{colors.error.200}",
       "text": "{colors.white}",
       "textDisabled": "{colors.neutral.400}",
-      "focusRing": "{colors.error.500} / 0.4"
+      "focusRing": "{colors.error.500} / 0.4",
+      "focusVisible": "{colors.error.500} / 0.4"
     },
     "success": {
       "bg": "{colors.success.700}",
@@ -113,7 +114,8 @@ var coreTokens = {
       "bgDisabled": "{colors.success.200}",
       "text": "{colors.white}",
       "textDisabled": "{colors.neutral.400}",
-      "focusRing": "{colors.success.500} / 0.4"
+      "focusRing": "{colors.success.500} / 0.4",
+      "focusVisible": "{colors.success.500} / 0.4"
     },
     "cta": {
       "bg": "{colors.brand.600}",
@@ -442,26 +444,33 @@ var coreTokens = {
       "600": "#6f3fd7"
     },
     "focus": {
-      "primary": "#336df4",
-      "error": "#ef4444",
-      "info": "#0369a1"
+      "primary": "{colors.brand.500}",
+      "error": "{colors.error.500}",
+      "info": "{colors.info.600}"
     },
     "white": "#ffffff",
     "black": "#000000"
   },
   "space": {
     "0": "0rem",
+    "1": "0.0625rem",
+    "2": "0.125rem",
     "4": "0.25rem",
+    "6": "0.375rem",
     "8": "0.5rem",
+    "10": "0.625rem",
     "12": "0.75rem",
+    "14": "0.875rem",
     "16": "1rem",
     "20": "1.25rem",
     "24": "1.5rem",
+    "28": "1.75rem",
     "32": "2rem",
     "40": "2.5rem",
     "48": "3rem",
     "56": "3.5rem",
     "64": "4rem",
+    "72": "4.5rem",
     "80": "5rem",
     "96": "6rem"
   },
@@ -472,6 +481,8 @@ var coreTokens = {
     "lg": "8px",
     "xl": "12px",
     "2xl": "16px",
+    "3xl": "24px",
+    "4xl": "32px",
     "pill": "999px"
   },
   "shadows": {
@@ -601,12 +612,15 @@ var coreTokens = {
   },
   "border": {
     "width": {
+      "none": "0",
       "base": "1px",
       "thick": "2px"
     },
     "style": {
       "none": "none",
-      "solid": "solid"
+      "solid": "solid",
+      "dashed": "dashed",
+      "dotted": "dotted"
     }
   },
   "surface": {