@12min/ds 1.0.0 → 3.0.0

package/dist/tokens/index.d.ts

@@ -1,12 +1,12 @@
 declare const colors: {
     readonly marianBlue: {
         readonly 50: "#FAFBFF";
-        readonly 100: "#F1F4FE";
+        readonly 100: "#F6F8FF";
         readonly 200: "#E1E7FF";
         readonly 300: "#C3CCF7";
         readonly 400: "#94A5F2";
         readonly 500: "#697DD6";
-        readonly 600: "#475CBB";
+        readonly 600: "#4357AD";
         readonly 700: "#31428B";
         readonly 800: "#25326A";
         readonly 900: "#131937";
@@ -18,12 +18,15 @@ declare const colors: {
         readonly 300: "#474747";
         readonly 400: "#3D3D3D";
         readonly 500: "#333333";
-        readonly 600: "#1E1E1E";
+        readonly 600: "#292929";
         readonly 700: "#161616";
         readonly 800: "#141414";
         readonly 900: "#0A0A0A";
     };
     readonly gray: {
+        readonly 15: "#F4F5F8";
+        readonly 25: "#EDEEF1";
+        readonly 35: "#DDE0E6";
         readonly 50: "#B1B5BE";
         readonly 100: "#A6ABB5";
         readonly 200: "#9BA0AB";
@@ -35,7 +38,20 @@ declare const colors: {
         readonly 800: "#5D636F";
         readonly 900: "#545964";
     };
-    readonly mustard: {
+    readonly amber: {
+        readonly 50: "#FFFBEB";
+        readonly 100: "#FEF3C7";
+        readonly 200: "#FDE68A";
+        readonly 300: "#FCD34D";
+        readonly 400: "#FBBF24";
+        readonly 500: "#F59E0B";
+        readonly 600: "#D97706";
+        readonly 700: "#B45309";
+        readonly 800: "#92400E";
+        readonly 900: "#78350F";
+        readonly text: "#BA5C0A";
+    };
+    readonly yellow: {
         readonly 50: "#FFF2D6";
         readonly 100: "#FFECC2";
         readonly 200: "#FFE5AD";
@@ -48,120 +64,327 @@ declare const colors: {
         readonly 900: "#FFB81F";
     };
     readonly ketchup: {
-        readonly 50: "#FFD6D6";
-        readonly 100: "#FFC2C2";
-        readonly 200: "#FFADAD";
-        readonly 300: "#FF9999";
-        readonly 400: "#FF8585";
-        readonly 500: "#FF7070";
-        readonly 600: "#FF5C5C";
-        readonly 700: "#FF4040";
-        readonly 800: "#FF3333";
-        readonly 900: "#FF1F1F";
-    };
-    readonly mint: {
-        readonly 50: "#A7F1B7";
-        readonly 100: "#96EEA9";
-        readonly 200: "#84EB9A";
-        readonly 300: "#73E88C";
-        readonly 400: "#61E57E";
-        readonly 500: "#50E26F";
-        readonly 600: "#3EE061";
-        readonly 700: "#24DC4C";
-        readonly 800: "#22D348";
-        readonly 900: "#1FC142";
+        readonly 50: "#FEF2F2";
+        readonly 100: "#FEE2E2";
+        readonly 200: "#FECACA";
+        readonly 300: "#FCA5A5";
+        readonly 400: "#F87171";
+        readonly 500: "#EF4444";
+        readonly 600: "#DC2626";
+        readonly 700: "#B91C1C";
+        readonly 800: "#991B1B";
+        readonly 900: "#7F1D1D";
+        readonly text: "#D91F3C";
+    };
+    readonly green: {
+        readonly 50: "#F2FDF4";
+        readonly 100: "#E5FBE9";
+        readonly 200: "#C7F4D0";
+        readonly 300: "#99E5AC";
+        readonly 400: "#5FCD80";
+        readonly 500: "#36B260";
+        readonly 600: "#258F4B";
+        readonly 700: "#1B6F3B";
+        readonly 800: "#145430";
+        readonly 900: "#0E3622";
+        readonly text: "#0E8745";
+    };
+    readonly blue: {
+        readonly 50: "#EFF6FF";
+        readonly 100: "#DBEAFE";
+        readonly 200: "#BFDBFE";
+        readonly 300: "#93C5FD";
+        readonly 400: "#60A5FA";
+        readonly 500: "#3B82F6";
+        readonly 600: "#2563EB";
+        readonly 700: "#1D4ED8";
+        readonly 800: "#1E40AF";
+        readonly 900: "#1E3A8A";
+        readonly text: "#1E40AF";
+    };
+    readonly brandGreen: "#6DFFB4";
+    readonly overlayBlack: {
+        readonly 5: "#0000000D";
+        readonly 8: "#00000014";
+        readonly 12: "#0000001F";
+        readonly 16: "#00000029";
+    };
+    readonly overlayWhite: {
+        readonly 5: "#FFFFFF0D";
+        readonly 8: "#FFFFFF14";
+        readonly 12: "#FFFFFF1F";
+        readonly 16: "#FFFFFF29";
     };
     readonly white: "#FFFFFF";
-    readonly successBg: "#E5FBE9";
+    readonly black: "#000000";
 };
 type Colors = typeof colors;
 
 declare const typography: {
-    readonly display: {
+    readonly display1: {
+        readonly fontFamily: "Poppins";
         readonly fontSize: 32;
         readonly fontWeight: "700";
-        readonly lineHeight: 1.2;
+        readonly lineHeight: 40;
+        readonly letterSpacing: -1;
+        readonly textTransform: "none";
+    };
+    readonly display2: {
         readonly fontFamily: "Poppins";
+        readonly fontSize: 32;
+        readonly fontWeight: "700";
+        readonly lineHeight: 40;
+        readonly letterSpacing: -1;
+        readonly textTransform: "none";
     };
     readonly h1: {
+        readonly fontFamily: "Poppins";
         readonly fontSize: 24;
         readonly fontWeight: "700";
-        readonly lineHeight: 1.3;
-        readonly fontFamily: "Poppins";
+        readonly lineHeight: 32;
+        readonly letterSpacing: -1;
+        readonly textTransform: "none";
     };
     readonly h2: {
-        readonly fontSize: 20;
-        readonly fontWeight: "600";
-        readonly lineHeight: 1.3;
         readonly fontFamily: "Poppins";
+        readonly fontSize: 20;
+        readonly fontWeight: "700";
+        readonly lineHeight: 28;
+        readonly letterSpacing: 0;
+        readonly textTransform: "none";
     };
     readonly h3: {
-        readonly fontSize: 18;
-        readonly fontWeight: "600";
-        readonly lineHeight: 1.4;
         readonly fontFamily: "Poppins";
+        readonly fontSize: 16;
+        readonly fontWeight: "600";
+        readonly lineHeight: 24;
+        readonly letterSpacing: 0;
+        readonly textTransform: "none";
     };
     readonly bodyLarge: {
-        readonly fontSize: 16;
-        readonly fontWeight: "400";
-        readonly lineHeight: 1.5;
         readonly fontFamily: "Inter";
+        readonly fontSize: 16;
+        readonly fontWeight: "500";
+        readonly lineHeight: 24;
+        readonly letterSpacing: 0;
+        readonly textTransform: "none";
     };
     readonly bodyDefault: {
-        readonly fontSize: 14;
-        readonly fontWeight: "400";
-        readonly lineHeight: 1.5;
         readonly fontFamily: "Inter";
+        readonly fontSize: 14;
+        readonly fontWeight: "500";
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0;
+        readonly textTransform: "none";
     };
     readonly bodySmall: {
+        readonly fontFamily: "Inter";
         readonly fontSize: 12;
         readonly fontWeight: "400";
-        readonly lineHeight: 1.5;
-        readonly fontFamily: "Inter";
+        readonly lineHeight: 16;
+        readonly letterSpacing: 0.2;
+        readonly textTransform: "none";
     };
     readonly labelLarge: {
-        readonly fontSize: 16;
-        readonly fontWeight: "500";
-        readonly lineHeight: 1.5;
         readonly fontFamily: "Inter";
+        readonly fontSize: 16;
+        readonly fontWeight: "600";
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0;
+        readonly textTransform: "none";
     };
     readonly labelDefault: {
-        readonly fontSize: 14;
-        readonly fontWeight: "500";
-        readonly lineHeight: 1.5;
         readonly fontFamily: "Inter";
+        readonly fontSize: 14;
+        readonly fontWeight: "600";
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0;
+        readonly textTransform: "none";
     };
     readonly labelSmall: {
+        readonly fontFamily: "Inter";
         readonly fontSize: 12;
-        readonly fontWeight: "500";
-        readonly lineHeight: 1.5;
+        readonly fontWeight: "600";
+        readonly lineHeight: 16;
+        readonly letterSpacing: 0.2;
+        readonly textTransform: "none";
+    };
+    readonly labelTiny: {
         readonly fontFamily: "Inter";
+        readonly fontSize: 10;
+        readonly fontWeight: "600";
+        readonly lineHeight: 14;
+        readonly letterSpacing: 0;
+        readonly textTransform: "none";
     };
     readonly caption: {
+        readonly fontFamily: "Inter";
         readonly fontSize: 12;
         readonly fontWeight: "500";
-        readonly lineHeight: 1.5;
+        readonly lineHeight: 16;
+        readonly letterSpacing: 0.5;
+        readonly textTransform: "none";
+    };
+    readonly captionUppercase: {
         readonly fontFamily: "Inter";
+        readonly fontSize: 12;
+        readonly fontWeight: "500";
+        readonly lineHeight: 16;
+        readonly letterSpacing: 0.5;
+        readonly textTransform: "uppercase";
     };
     readonly overline: {
+        readonly fontFamily: "Inter";
         readonly fontSize: 10;
         readonly fontWeight: "600";
-        readonly lineHeight: 1;
-        readonly fontFamily: "Inter";
+        readonly lineHeight: 16;
+        readonly letterSpacing: 8;
+        readonly textTransform: "uppercase";
     };
     readonly buttonLarge: {
+        readonly fontFamily: "Inter";
         readonly fontSize: 16;
         readonly fontWeight: "600";
-        readonly lineHeight: 1.5;
-        readonly fontFamily: "Inter";
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0;
+        readonly textTransform: "none";
     };
     readonly buttonDefault: {
+        readonly fontFamily: "Inter";
         readonly fontSize: 14;
         readonly fontWeight: "600";
-        readonly lineHeight: 1.5;
+        readonly lineHeight: 20;
+        readonly letterSpacing: 0;
+        readonly textTransform: "none";
+    };
+    readonly buttonSmall: {
         readonly fontFamily: "Inter";
+        readonly fontSize: 12;
+        readonly fontWeight: "600";
+        readonly lineHeight: 16;
+        readonly letterSpacing: 0;
+        readonly textTransform: "none";
     };
 };
 type Typography = typeof typography;
 
-export { type Colors, type Typography, colors, typography };
+declare const spacing: {
+    readonly unit: 4;
+    readonly gap: {
+        readonly '0.5': 2;
+        readonly '1': 4;
+        readonly '2': 8;
+        readonly '3': 12;
+        readonly '4': 16;
+        readonly '5': 20;
+        readonly '6': 24;
+        readonly '8': 32;
+        readonly '10': 40;
+        readonly '12': 48;
+        readonly '14': 56;
+        readonly '16': 64;
+        readonly '18': 72;
+        readonly '20': 80;
+        readonly '22': 88;
+        readonly '24': 96;
+    };
+    readonly screen: {
+        readonly x: 16;
+        readonly y: 24;
+    };
+};
+type Spacing = typeof spacing;
+
+declare const grid: {
+    readonly baseline: 8;
+    readonly breakpoints: {
+        readonly mobile: 0;
+        readonly tablet: 768;
+        readonly desktop: 1024;
+    };
+    readonly columns: {
+        readonly mobile: 4;
+        readonly tablet: 8;
+        readonly desktop: 12;
+    };
+    readonly gutter: {
+        readonly mobile: 8;
+        readonly tablet: 16;
+        readonly desktop: 24;
+    };
+    readonly margin: {
+        readonly mobile: 20;
+        readonly tablet: 24;
+        readonly desktop: 32;
+    };
+};
+type Grid = typeof grid;
+
+declare const radius: {
+    readonly none: 0;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 20;
+    readonly '2xl': 24;
+    readonly full: 9999;
+    readonly button: 16;
+    readonly card: 20;
+    readonly input: 12;
+    readonly chip: 9999;
+    readonly badge: 8;
+};
+type Radius = typeof radius;
+
+declare const borderWidth: {
+    readonly default: 1;
+    readonly strong: 1.5;
+    readonly heavy: 2;
+};
+type BorderWidth = typeof borderWidth;
+
+declare const shadow: {
+    readonly sm: {
+        readonly offsetX: 0;
+        readonly offsetY: 1;
+        readonly blur: 3;
+        readonly spread: 0;
+        readonly color: "#000000";
+        readonly opacity: {
+            readonly light: 0.08;
+            readonly dark: 0.4;
+        };
+    };
+    readonly md: {
+        readonly offsetX: 0;
+        readonly offsetY: 4;
+        readonly blur: 12;
+        readonly spread: 0;
+        readonly color: "#000000";
+        readonly opacity: {
+            readonly light: 0.1;
+            readonly dark: 0.5;
+        };
+    };
+    readonly lg: {
+        readonly offsetX: 0;
+        readonly offsetY: 8;
+        readonly blur: 24;
+        readonly spread: -4;
+        readonly color: "#000000";
+        readonly opacity: {
+            readonly light: 0.12;
+            readonly dark: 0.6;
+        };
+    };
+};
+type Shadow = typeof shadow;
+
+declare const opacity: {
+    readonly disabled: 0.4;
+    readonly hover: 0.08;
+    readonly pressed: 0.12;
+};
+type Opacity = typeof opacity;
+
+export { type BorderWidth, type Colors, type Grid, type Opacity, type Radius, type Shadow, type Spacing, type Typography, borderWidth, colors, grid, opacity, radius, shadow, spacing, typography };