@drdex0101/water-design-system 1.0.1 → 2.0.0

package/dist/tokens/semantic.d.ts

@@ -3,92 +3,144 @@
  *
  * Extracted from Figma Water Design System
  * Semantic colors map primitive colors to their functional use.
- *
- * Usage Rules:
- * 1. Semantic colors describe the color itself (e.g., Blue), not its function (e.g., Action)
- * 2. When creating standalone components or designing calculated targets, choose Gray-900 or Blue-500 as base (Primitive Color)
- * 3. Semantic colors must match human visual cognition and brand requirements
- * 4. Semantic colors do not exist in isolation, they must work within the system. For example,
- *    on bg-secondary background, prioritize text-secondary pairing to maintain hierarchy
  */
 export declare const background: {
     readonly light: {
         readonly default: "#ffffff";
         readonly secondary: "#f7f8f9";
-        readonly tertiary: "#f3f4f6";
-        readonly overlay: "#2a2d33";
-        readonly disabled: "#eeeff2";
+        readonly tertiary: "#eeeff2";
+        readonly overlay: "#2a2d3380";
+        readonly disabled: "#cfd1d5";
         readonly success: "#e7f7ed";
         readonly error: "#fdecec";
         readonly warning: "#fef7e6";
         readonly brand: "#2e9dff";
         readonly brandSubtle: "#eaf5ff";
-        readonly accent: "#e77300";
+        readonly accent: "#01bda7";
         readonly accent2: "#e77300";
+        readonly accent3: "#ef4444";
+        readonly inputfield: "#ffffff";
     };
     readonly dark: {
-        readonly default: "#2a2d33";
-        readonly secondary: "#363a43";
-        readonly tertiary: "#464b56";
-        readonly overlay: "#000000";
-        readonly disabled: "#464b56";
-        readonly success: "#05491e";
-        readonly error: "#641d1d";
-        readonly warning: "#654a00";
+        readonly default: "#071427";
+        readonly secondary: "#101d30";
+        readonly tertiary: "#1a3050";
+        readonly overlay: "#2a2d33cc";
+        readonly disabled: "#828894";
+        readonly success: "#e7f7ed";
+        readonly error: "#fdecec";
+        readonly warning: "#fef7e6";
         readonly brand: "#2e9dff";
-        readonly brandSubtle: "#13426b";
-        readonly accent: "#e77300";
+        readonly brandSubtle: "#eaf5ff";
+        readonly accent: "#01a3af";
         readonly accent2: "#e77300";
+        readonly accent3: "#ef4444";
+        readonly inputfield: "#071427";
     };
 };
 export declare const text: {
     readonly light: {
-        readonly primary: "#2a2d33";
-        readonly secondary: "#5a606e";
-        readonly tertiary: "#636a79";
-        readonly disabled: "#828894";
-        readonly placeholder: "#828894";
+        readonly primary: "#0f0f0f";
+        readonly secondary: "#464b56";
+        readonly tertiary: "#828894";
+        readonly disabled: "#b7bac1";
+        readonly placeholder: "#969ba5";
         readonly success: "#0a9d41";
-        readonly error: "#d93e3e";
-        readonly warning: "#aa7e00";
-        readonly link: "#2e9dff";
+        readonly error: "#ef4444";
+        readonly warning: "#f0b100";
+        readonly link: "#2a8fe8";
         readonly brand: "#2e9dff";
         readonly onBrand: "#ffffff";
-        readonly pokerCall: "#0bad47";
+        readonly accent: "#f8db8a";
+        readonly pokerCall: "#01bda7";
         readonly pokerRaise: "#e77300";
     };
     readonly dark: {
         readonly primary: "#ffffff";
-        readonly secondary: "#969ba5";
-        readonly tertiary: "#828894";
-        readonly disabled: "#636a79";
-        readonly placeholder: "#636a79";
-        readonly success: "#3cbd6c";
-        readonly error: "#f26969";
-        readonly warning: "#f3c133";
-        readonly link: "#58b1ff";
-        readonly brand: "#58b1ff";
+        readonly secondary: "#eaecef";
+        readonly tertiary: "#d0d2d6";
+        readonly disabled: "#5a606e";
+        readonly placeholder: "#cfd1d5";
+        readonly success: "#0bad47";
+        readonly error: "#ef4444";
+        readonly warning: "#f0b100";
+        readonly link: "#2a8fe8";
+        readonly brand: "#2e9dff";
         readonly onBrand: "#ffffff";
-        readonly pokerCall: "#3cbd6c";
+        readonly accent: "#f8db8a";
+        readonly pokerCall: "#34cab9";
         readonly pokerRaise: "#ec8f33";
     };
 };
 export declare const border: {
     readonly light: {
-        readonly primary: "#969ba5";
-        readonly subtle: "#b7bac1";
+        readonly primary: "#eaecef";
+        readonly subtle: "#f7f8f9";
         readonly focus: "#2e9dff";
         readonly success: "#0bad47";
         readonly error: "#ef4444";
         readonly warning: "#f0b100";
+        readonly brandSubtle: "#bee1ff";
     };
     readonly dark: {
         readonly primary: "#5a606e";
-        readonly subtle: "#464b56";
-        readonly focus: "#58b1ff";
-        readonly success: "#3cbd6c";
-        readonly error: "#f26969";
-        readonly warning: "#f3c133";
+        readonly subtle: "#363a43";
+        readonly focus: "#2e9dff";
+        readonly success: "#0bad47";
+        readonly error: "#ef4444";
+        readonly warning: "#f0b100";
+        readonly brandSubtle: "#2e9dff";
+    };
+};
+export declare const components: {
+    readonly button: {
+        readonly light: {
+            readonly primaryBg: "#2e9dff";
+            readonly primaryLabel: "#ffffff";
+            readonly secondaryBg: "#eeeff2";
+            readonly secondaryLabel: "#464b56";
+            readonly outlineBg: "#ffffff";
+            readonly outlineBorder: "#eaecef";
+            readonly outlineLabel: "#464b56";
+            readonly disabledBg: "#cfd1d5";
+            readonly disabledLabel: "#b7bac1";
+            readonly pokerCallBg: "#01bda7";
+            readonly pokerCallLabel: "#ffffff";
+            readonly pokerRaiseBg: "#e77300";
+            readonly pokerRaiseLabel: "#ffffff";
+            readonly warningBg: "#ef4444";
+            readonly warningLabel: "#ffffff";
+            readonly hoverOverlay: "#0000001a";
+            readonly pressedOverlay: "#00000033";
+        };
+        readonly dark: {
+            readonly primaryBg: "#2e9dff";
+            readonly primaryLabel: "#ffffff";
+            readonly secondaryBg: "#1a3050";
+            readonly secondaryLabel: "#eaecef";
+            readonly outlineBg: "#071427";
+            readonly outlineBorder: "#5a606e";
+            readonly outlineLabel: "#eaecef";
+            readonly disabledBg: "#828894";
+            readonly disabledLabel: "#5a606e";
+            readonly pokerCallBg: "#01a3af";
+            readonly pokerCallLabel: "#ffffff";
+            readonly pokerRaiseBg: "#e77300";
+            readonly pokerRaiseLabel: "#ffffff";
+            readonly warningBg: "#ef4444";
+            readonly warningLabel: "#ffffff";
+            readonly hoverOverlay: "#ffffff1a";
+            readonly pressedOverlay: "#00000033";
+        };
+    };
+    readonly pokerCard: {
+        readonly bg: "#ffffff";
+        readonly bgEmpty: "#6eb3dc80";
+        readonly border: "#eaecef";
+        readonly club: "#01bda7";
+        readonly diamond: "#2e9dff";
+        readonly heart: "#ef4444";
+        readonly spade: "#464b56";
     };
 };
 export declare const semanticColors: {
@@ -96,113 +148,148 @@ export declare const semanticColors: {
         readonly light: {
             readonly default: "#ffffff";
             readonly secondary: "#f7f8f9";
-            readonly tertiary: "#f3f4f6";
-            readonly overlay: "#2a2d33";
-            readonly disabled: "#eeeff2";
+            readonly tertiary: "#eeeff2";
+            readonly overlay: "#2a2d3380";
+            readonly disabled: "#cfd1d5";
             readonly success: "#e7f7ed";
             readonly error: "#fdecec";
             readonly warning: "#fef7e6";
             readonly brand: "#2e9dff";
             readonly brandSubtle: "#eaf5ff";
-            readonly accent: "#e77300";
+            readonly accent: "#01bda7";
             readonly accent2: "#e77300";
+            readonly accent3: "#ef4444";
+            readonly inputfield: "#ffffff";
         };
         readonly dark: {
-            readonly default: "#2a2d33";
-            readonly secondary: "#363a43";
-            readonly tertiary: "#464b56";
-            readonly overlay: "#000000";
-            readonly disabled: "#464b56";
-            readonly success: "#05491e";
-            readonly error: "#641d1d";
-            readonly warning: "#654a00";
+            readonly default: "#071427";
+            readonly secondary: "#101d30";
+            readonly tertiary: "#1a3050";
+            readonly overlay: "#2a2d33cc";
+            readonly disabled: "#828894";
+            readonly success: "#e7f7ed";
+            readonly error: "#fdecec";
+            readonly warning: "#fef7e6";
             readonly brand: "#2e9dff";
-            readonly brandSubtle: "#13426b";
-            readonly accent: "#e77300";
+            readonly brandSubtle: "#eaf5ff";
+            readonly accent: "#01a3af";
             readonly accent2: "#e77300";
+            readonly accent3: "#ef4444";
+            readonly inputfield: "#071427";
         };
     };
     readonly text: {
         readonly light: {
-            readonly primary: "#2a2d33";
-            readonly secondary: "#5a606e";
-            readonly tertiary: "#636a79";
-            readonly disabled: "#828894";
-            readonly placeholder: "#828894";
+            readonly primary: "#0f0f0f";
+            readonly secondary: "#464b56";
+            readonly tertiary: "#828894";
+            readonly disabled: "#b7bac1";
+            readonly placeholder: "#969ba5";
             readonly success: "#0a9d41";
-            readonly error: "#d93e3e";
-            readonly warning: "#aa7e00";
-            readonly link: "#2e9dff";
+            readonly error: "#ef4444";
+            readonly warning: "#f0b100";
+            readonly link: "#2a8fe8";
             readonly brand: "#2e9dff";
             readonly onBrand: "#ffffff";
-            readonly pokerCall: "#0bad47";
+            readonly accent: "#f8db8a";
+            readonly pokerCall: "#01bda7";
             readonly pokerRaise: "#e77300";
         };
         readonly dark: {
             readonly primary: "#ffffff";
-            readonly secondary: "#969ba5";
-            readonly tertiary: "#828894";
-            readonly disabled: "#636a79";
-            readonly placeholder: "#636a79";
-            readonly success: "#3cbd6c";
-            readonly error: "#f26969";
-            readonly warning: "#f3c133";
-            readonly link: "#58b1ff";
-            readonly brand: "#58b1ff";
+            readonly secondary: "#eaecef";
+            readonly tertiary: "#d0d2d6";
+            readonly disabled: "#5a606e";
+            readonly placeholder: "#cfd1d5";
+            readonly success: "#0bad47";
+            readonly error: "#ef4444";
+            readonly warning: "#f0b100";
+            readonly link: "#2a8fe8";
+            readonly brand: "#2e9dff";
             readonly onBrand: "#ffffff";
-            readonly pokerCall: "#3cbd6c";
+            readonly accent: "#f8db8a";
+            readonly pokerCall: "#34cab9";
             readonly pokerRaise: "#ec8f33";
         };
     };
     readonly border: {
         readonly light: {
-            readonly primary: "#969ba5";
-            readonly subtle: "#b7bac1";
+            readonly primary: "#eaecef";
+            readonly subtle: "#f7f8f9";
             readonly focus: "#2e9dff";
             readonly success: "#0bad47";
             readonly error: "#ef4444";
             readonly warning: "#f0b100";
+            readonly brandSubtle: "#bee1ff";
         };
         readonly dark: {
             readonly primary: "#5a606e";
-            readonly subtle: "#464b56";
-            readonly focus: "#58b1ff";
-            readonly success: "#3cbd6c";
-            readonly error: "#f26969";
-            readonly warning: "#f3c133";
+            readonly subtle: "#363a43";
+            readonly focus: "#2e9dff";
+            readonly success: "#0bad47";
+            readonly error: "#ef4444";
+            readonly warning: "#f0b100";
+            readonly brandSubtle: "#2e9dff";
+        };
+    };
+    readonly components: {
+        readonly button: {
+            readonly light: {
+                readonly primaryBg: "#2e9dff";
+                readonly primaryLabel: "#ffffff";
+                readonly secondaryBg: "#eeeff2";
+                readonly secondaryLabel: "#464b56";
+                readonly outlineBg: "#ffffff";
+                readonly outlineBorder: "#eaecef";
+                readonly outlineLabel: "#464b56";
+                readonly disabledBg: "#cfd1d5";
+                readonly disabledLabel: "#b7bac1";
+                readonly pokerCallBg: "#01bda7";
+                readonly pokerCallLabel: "#ffffff";
+                readonly pokerRaiseBg: "#e77300";
+                readonly pokerRaiseLabel: "#ffffff";
+                readonly warningBg: "#ef4444";
+                readonly warningLabel: "#ffffff";
+                readonly hoverOverlay: "#0000001a";
+                readonly pressedOverlay: "#00000033";
+            };
+            readonly dark: {
+                readonly primaryBg: "#2e9dff";
+                readonly primaryLabel: "#ffffff";
+                readonly secondaryBg: "#1a3050";
+                readonly secondaryLabel: "#eaecef";
+                readonly outlineBg: "#071427";
+                readonly outlineBorder: "#5a606e";
+                readonly outlineLabel: "#eaecef";
+                readonly disabledBg: "#828894";
+                readonly disabledLabel: "#5a606e";
+                readonly pokerCallBg: "#01a3af";
+                readonly pokerCallLabel: "#ffffff";
+                readonly pokerRaiseBg: "#e77300";
+                readonly pokerRaiseLabel: "#ffffff";
+                readonly warningBg: "#ef4444";
+                readonly warningLabel: "#ffffff";
+                readonly hoverOverlay: "#ffffff1a";
+                readonly pressedOverlay: "#00000033";
+            };
+        };
+        readonly pokerCard: {
+            readonly bg: "#ffffff";
+            readonly bgEmpty: "#6eb3dc80";
+            readonly border: "#eaecef";
+            readonly club: "#01bda7";
+            readonly diamond: "#2e9dff";
+            readonly heart: "#ef4444";
+            readonly spade: "#464b56";
         };
     };
 };
 export declare const bgDefault: "#ffffff";
 export declare const bgSecondary: "#f7f8f9";
-export declare const bgTertiary: "#f3f4f6";
-export declare const bgOverlay: "#2a2d33";
-export declare const bgDisabled: "#eeeff2";
-export declare const bgSuccess: "#e7f7ed";
-export declare const bgError: "#fdecec";
-export declare const bgWarning: "#fef7e6";
+export declare const bgTertiary: "#eeeff2";
 export declare const bgBrand: "#2e9dff";
-export declare const bgBrandSubtle: "#eaf5ff";
-export declare const bgAccent: "#e77300";
-export declare const textPrimary: "#2a2d33";
-export declare const textSecondary: "#5a606e";
-export declare const textTertiary: "#636a79";
-export declare const textDisabled: "#828894";
-export declare const textPlaceholder: "#828894";
-export declare const textSuccess: "#0a9d41";
-export declare const textError: "#d93e3e";
-export declare const textWarning: "#aa7e00";
-export declare const textLink: "#2e9dff";
-export declare const textBrand: "#2e9dff";
+export declare const textPrimary: "#0f0f0f";
+export declare const textSecondary: "#464b56";
 export declare const textOnBrand: "#ffffff";
-export declare const borderPrimary: "#969ba5";
-export declare const borderSubtle: "#b7bac1";
-export declare const borderFocus: "#2e9dff";
-export declare const borderSuccess: "#0bad47";
-export declare const borderError: "#ef4444";
-export declare const borderWarning: "#f0b100";
-export type BackgroundColor = keyof typeof background.light;
-export type TextColor = keyof typeof text.light;
-export type BorderColor = keyof typeof border.light;
 export type ThemeMode = 'light' | 'dark';
 export type SemanticColors = typeof semanticColors;

package/dist/tokens/spacing.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Water Design System - Spacing & Radius Tokens
+ *
+ * Extracted from Figma Water Design System
+ * Units are in rem (1rem = 16px)
+ */
+export declare const spacing: {
+    readonly p0: "0rem";
+    readonly p1: "0.25rem";
+    readonly p2: "0.5rem";
+    readonly p3: "0.75rem";
+    readonly p4: "1rem";
+    readonly p5: "1.25rem";
+    readonly p6: "1.5rem";
+    readonly p7: "1.75rem";
+    readonly p8: "2rem";
+    readonly p9: "2.25rem";
+    readonly p10: "2.5rem";
+    readonly p11: "2.75rem";
+    readonly p12: "3rem";
+};
+export declare const radius: {
+    readonly xs: "0.25rem";
+    readonly sm: "0.5rem";
+    readonly md: "0.75rem";
+    readonly lg: "1rem";
+    readonly xl: "1.75rem";
+    readonly rounded: "624.9375rem";
+};
+export declare const spacingTokens: {
+    readonly spacing: {
+        readonly p0: "0rem";
+        readonly p1: "0.25rem";
+        readonly p2: "0.5rem";
+        readonly p3: "0.75rem";
+        readonly p4: "1rem";
+        readonly p5: "1.25rem";
+        readonly p6: "1.5rem";
+        readonly p7: "1.75rem";
+        readonly p8: "2rem";
+        readonly p9: "2.25rem";
+        readonly p10: "2.5rem";
+        readonly p11: "2.75rem";
+        readonly p12: "3rem";
+    };
+    readonly radius: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "0.75rem";
+        readonly lg: "1rem";
+        readonly xl: "1.75rem";
+        readonly rounded: "624.9375rem";
+    };
+};