@paolojulian.dev/design-system 4.3.0 → 4.5.1

package/dist/constants.d.ts

@@ -1,15 +1,489 @@
 export declare const P_COLORS: {
-    black: string;
-    white: string;
-    primary: string;
-    secondary: string;
+    black: "#111111";
+    white: "#ffffff";
+    primary: "#b63f4c";
+    secondary: "#d89062";
     gray: {
-        darker: string;
-        DEFAULT: string;
-        lighter: string;
+        darker: "#57534e";
+        DEFAULT: "#a8a29e";
+        lighter: "#e7e5e4";
+    };
+};
+
+export declare const P_TOKEN_VALUES: {
+    readonly color: {
+        readonly neutral: {
+            readonly 0: "#ffffff";
+            readonly 50: "#fafaf9";
+            readonly 100: "#f5f5f4";
+            readonly 200: "#e7e5e4";
+            readonly 300: "#d6d3d1";
+            readonly 400: "#a8a29e";
+            readonly 500: "#78716c";
+            readonly 600: "#57534e";
+            readonly 700: "#44403c";
+            readonly 800: "#292524";
+            readonly 900: "#1c1917";
+            readonly 950: "#111111";
+        };
+        readonly brand: {
+            readonly 50: "#fdf2f3";
+            readonly 100: "#f9dcdf";
+            readonly 600: "#b63f4c";
+            readonly 700: "#96313c";
+        };
+        readonly accent: {
+            readonly 600: "#d89062";
+        };
+        readonly red: {
+            readonly 50: "#fef2f2";
+            readonly 100: "#fee2e2";
+            readonly 600: "#dc2626";
+            readonly 700: "#b91c1c";
+        };
+        readonly amber: {
+            readonly 50: "#fffbeb";
+            readonly 100: "#fef3c7";
+            readonly 600: "#d97706";
+        };
+        readonly green: {
+            readonly 50: "#f0fdf4";
+            readonly 100: "#dcfce7";
+            readonly 700: "#15803d";
+        };
+        readonly blue: {
+            readonly 50: "#eff6ff";
+            readonly 100: "#dbeafe";
+            readonly 700: "#1d4ed8";
+        };
+    };
+    readonly typography: {
+        readonly family: {
+            readonly sans: "'AvantGarde', sans-serif";
+            readonly serif: "'Lora', serif";
+        };
+        readonly weight: {
+            readonly regular: "400";
+            readonly medium: "500";
+            readonly bold: "700";
+        };
+        readonly size: {
+            readonly caption: "0.75rem";
+            readonly bodySm: "0.875rem";
+            readonly bodyMd: "1rem";
+            readonly headingSm: "1.25rem";
+            readonly headingMd: "1.5rem";
+            readonly headingMdDesktop: "2.25rem";
+            readonly headingLg: "2.5rem";
+            readonly headingXl: "4rem";
+            readonly displaySm: "7rem";
+            readonly displayMd: "4rem";
+        };
+        readonly lineHeight: {
+            readonly caption: "1rem";
+            readonly bodySm: "1.25rem";
+            readonly bodyMd: "1.5rem";
+            readonly headingSm: "1.75rem";
+            readonly headingMd: "2rem";
+            readonly headingMdDesktop: "2.5rem";
+            readonly headingLg: "2.75rem";
+            readonly headingXl: "3.5rem";
+            readonly displaySm: "5.5rem";
+            readonly displayMd: "4.5rem";
+        };
+        readonly letterSpacing: {
+            readonly default: "0";
+            readonly wide: "0.40em";
+            readonly heading: "-0.04em";
+        };
+    };
+    readonly space: {
+        readonly 0: "0";
+        readonly 1: "0.25rem";
+        readonly 2: "0.5rem";
+        readonly 3: "0.75rem";
+        readonly 4: "1rem";
+        readonly 5: "1.25rem";
+        readonly 6: "1.5rem";
+        readonly 8: "2rem";
+        readonly 10: "2.5rem";
+        readonly 12: "3rem";
+        readonly 16: "4rem";
+        readonly 20: "5rem";
+        readonly 24: "6rem";
+    };
+    readonly radius: {
+        readonly none: "0";
+        readonly xs: "0.125rem";
+        readonly sm: "0.25rem";
+        readonly md: "0.375rem";
+        readonly lg: "0.5rem";
+        readonly full: "9999px";
+    };
+    readonly size: {
+        readonly touchMin: "2.75rem";
+        readonly controlSm: "2.25rem";
+        readonly controlMd: "2.75rem";
+        readonly controlLg: "3.5rem";
+        readonly iconSm: "1rem";
+        readonly iconMd: "1.25rem";
+        readonly iconLg: "1.5rem";
+    };
+    readonly focus: {
+        readonly ringWidth: "2px";
+        readonly outlineWidth: "2px";
+        readonly ringOffset: "2px";
+    };
+    readonly opacity: {
+        readonly disabled: "0.5";
+    };
+    readonly shadow: {
+        readonly light: {
+            readonly sm: "0 1px 2px rgb(17 17 17 / 0.06)";
+            readonly md: "0 8px 24px rgb(17 17 17 / 0.10)";
+            readonly lg: "0 16px 40px rgb(17 17 17 / 0.14)";
+        };
+        readonly dark: {
+            readonly sm: "0 1px 2px rgb(0 0 0 / 0.32)";
+            readonly md: "0 8px 24px rgb(0 0 0 / 0.36)";
+            readonly lg: "0 16px 40px rgb(0 0 0 / 0.42)";
+        };
+    };
+    readonly motion: {
+        readonly durationFast: "120ms";
+        readonly durationNormal: "180ms";
+        readonly durationSlow: "240ms";
+        readonly easeStandard: "cubic-bezier(0.2, 0, 0, 1)";
+    };
+    readonly breakpoint: {
+        readonly xs: "30rem";
+        readonly sm: "40rem";
+        readonly md: "48rem";
+        readonly lg: "64rem";
+        readonly xl: "80rem";
+        readonly '2xl': "96rem";
+    };
+};
+
+export declare const P_TOKENS: {
+    readonly values: {
+        readonly color: {
+            readonly neutral: {
+                readonly 0: "#ffffff";
+                readonly 50: "#fafaf9";
+                readonly 100: "#f5f5f4";
+                readonly 200: "#e7e5e4";
+                readonly 300: "#d6d3d1";
+                readonly 400: "#a8a29e";
+                readonly 500: "#78716c";
+                readonly 600: "#57534e";
+                readonly 700: "#44403c";
+                readonly 800: "#292524";
+                readonly 900: "#1c1917";
+                readonly 950: "#111111";
+            };
+            readonly brand: {
+                readonly 50: "#fdf2f3";
+                readonly 100: "#f9dcdf";
+                readonly 600: "#b63f4c";
+                readonly 700: "#96313c";
+            };
+            readonly accent: {
+                readonly 600: "#d89062";
+            };
+            readonly red: {
+                readonly 50: "#fef2f2";
+                readonly 100: "#fee2e2";
+                readonly 600: "#dc2626";
+                readonly 700: "#b91c1c";
+            };
+            readonly amber: {
+                readonly 50: "#fffbeb";
+                readonly 100: "#fef3c7";
+                readonly 600: "#d97706";
+            };
+            readonly green: {
+                readonly 50: "#f0fdf4";
+                readonly 100: "#dcfce7";
+                readonly 700: "#15803d";
+            };
+            readonly blue: {
+                readonly 50: "#eff6ff";
+                readonly 100: "#dbeafe";
+                readonly 700: "#1d4ed8";
+            };
+        };
+        readonly typography: {
+            readonly family: {
+                readonly sans: "'AvantGarde', sans-serif";
+                readonly serif: "'Lora', serif";
+            };
+            readonly weight: {
+                readonly regular: "400";
+                readonly medium: "500";
+                readonly bold: "700";
+            };
+            readonly size: {
+                readonly caption: "0.75rem";
+                readonly bodySm: "0.875rem";
+                readonly bodyMd: "1rem";
+                readonly headingSm: "1.25rem";
+                readonly headingMd: "1.5rem";
+                readonly headingMdDesktop: "2.25rem";
+                readonly headingLg: "2.5rem";
+                readonly headingXl: "4rem";
+                readonly displaySm: "7rem";
+                readonly displayMd: "4rem";
+            };
+            readonly lineHeight: {
+                readonly caption: "1rem";
+                readonly bodySm: "1.25rem";
+                readonly bodyMd: "1.5rem";
+                readonly headingSm: "1.75rem";
+                readonly headingMd: "2rem";
+                readonly headingMdDesktop: "2.5rem";
+                readonly headingLg: "2.75rem";
+                readonly headingXl: "3.5rem";
+                readonly displaySm: "5.5rem";
+                readonly displayMd: "4.5rem";
+            };
+            readonly letterSpacing: {
+                readonly default: "0";
+                readonly wide: "0.40em";
+                readonly heading: "-0.04em";
+            };
+        };
+        readonly space: {
+            readonly 0: "0";
+            readonly 1: "0.25rem";
+            readonly 2: "0.5rem";
+            readonly 3: "0.75rem";
+            readonly 4: "1rem";
+            readonly 5: "1.25rem";
+            readonly 6: "1.5rem";
+            readonly 8: "2rem";
+            readonly 10: "2.5rem";
+            readonly 12: "3rem";
+            readonly 16: "4rem";
+            readonly 20: "5rem";
+            readonly 24: "6rem";
+        };
+        readonly radius: {
+            readonly none: "0";
+            readonly xs: "0.125rem";
+            readonly sm: "0.25rem";
+            readonly md: "0.375rem";
+            readonly lg: "0.5rem";
+            readonly full: "9999px";
+        };
+        readonly size: {
+            readonly touchMin: "2.75rem";
+            readonly controlSm: "2.25rem";
+            readonly controlMd: "2.75rem";
+            readonly controlLg: "3.5rem";
+            readonly iconSm: "1rem";
+            readonly iconMd: "1.25rem";
+            readonly iconLg: "1.5rem";
+        };
+        readonly focus: {
+            readonly ringWidth: "2px";
+            readonly outlineWidth: "2px";
+            readonly ringOffset: "2px";
+        };
+        readonly opacity: {
+            readonly disabled: "0.5";
+        };
+        readonly shadow: {
+            readonly light: {
+                readonly sm: "0 1px 2px rgb(17 17 17 / 0.06)";
+                readonly md: "0 8px 24px rgb(17 17 17 / 0.10)";
+                readonly lg: "0 16px 40px rgb(17 17 17 / 0.14)";
+            };
+            readonly dark: {
+                readonly sm: "0 1px 2px rgb(0 0 0 / 0.32)";
+                readonly md: "0 8px 24px rgb(0 0 0 / 0.36)";
+                readonly lg: "0 16px 40px rgb(0 0 0 / 0.42)";
+            };
+        };
+        readonly motion: {
+            readonly durationFast: "120ms";
+            readonly durationNormal: "180ms";
+            readonly durationSlow: "240ms";
+            readonly easeStandard: "cubic-bezier(0.2, 0, 0, 1)";
+        };
+        readonly breakpoint: {
+            readonly xs: "30rem";
+            readonly sm: "40rem";
+            readonly md: "48rem";
+            readonly lg: "64rem";
+            readonly xl: "80rem";
+            readonly '2xl': "96rem";
+        };
+    };
+    readonly color: {
+        readonly semantic: {
+            readonly background: string;
+            readonly surface: string;
+            readonly surfaceRaised: string;
+            readonly surfaceSubtle: string;
+            readonly surfaceInverse: string;
+            readonly border: string;
+            readonly borderSubtle: string;
+            readonly borderStrong: string;
+            readonly text: string;
+            readonly textMuted: string;
+            readonly textSubtle: string;
+            readonly textInverse: string;
+            readonly actionPrimary: string;
+            readonly actionPrimaryHover: string;
+            readonly actionPrimarySubtle: string;
+            readonly focus: string;
+            readonly danger: string;
+            readonly dangerHover: string;
+            readonly dangerSurface: string;
+            readonly dangerBorder: string;
+            readonly warning: string;
+            readonly warningSurface: string;
+            readonly warningBorder: string;
+            readonly success: string;
+            readonly successSurface: string;
+            readonly successBorder: string;
+            readonly info: string;
+            readonly infoSurface: string;
+            readonly infoBorder: string;
+        };
+    };
+    readonly typography: {
+        readonly family: {
+            readonly sans: string;
+            readonly serif: string;
+        };
+        readonly weight: {
+            readonly regular: string;
+            readonly medium: string;
+            readonly bold: string;
+        };
+        readonly size: {
+            readonly caption: string;
+            readonly bodySm: string;
+            readonly bodyMd: string;
+            readonly headingSm: string;
+            readonly headingMd: string;
+            readonly headingMdDesktop: string;
+            readonly headingLg: string;
+            readonly headingXl: string;
+            readonly displaySm: string;
+            readonly displayMd: string;
+        };
+        readonly lineHeight: {
+            readonly caption: string;
+            readonly bodySm: string;
+            readonly bodyMd: string;
+            readonly headingSm: string;
+            readonly headingMd: string;
+            readonly headingMdDesktop: string;
+            readonly headingLg: string;
+            readonly headingXl: string;
+            readonly displaySm: string;
+            readonly displayMd: string;
+        };
+        readonly letterSpacing: {
+            readonly default: string;
+            readonly wide: string;
+            readonly heading: string;
+        };
+    };
+    readonly space: {
+        readonly 0: string;
+        readonly 1: string;
+        readonly 2: string;
+        readonly 3: string;
+        readonly 4: string;
+        readonly 5: string;
+        readonly 6: string;
+        readonly 8: string;
+        readonly 10: string;
+        readonly 12: string;
+        readonly 16: string;
+        readonly 20: string;
+        readonly 24: string;
+    };
+    readonly radius: {
+        readonly none: string;
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly full: string;
+    };
+    readonly size: {
+        readonly touchMin: string;
+        readonly controlSm: string;
+        readonly controlMd: string;
+        readonly controlLg: string;
+        readonly iconSm: string;
+        readonly iconMd: string;
+        readonly iconLg: string;
+    };
+    readonly focus: {
+        readonly ringWidth: string;
+        readonly outlineWidth: string;
+        readonly ringOffset: string;
+        readonly ringColor: string;
+    };
+    readonly opacity: {
+        readonly disabled: string;
+    };
+    readonly shadow: {
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+    };
+    readonly motion: {
+        readonly durationFast: string;
+        readonly durationNormal: string;
+        readonly durationSlow: string;
+        readonly easeStandard: string;
+    };
+    readonly component: {
+        readonly control: {
+            readonly bg: string;
+            readonly bgHover: string;
+            readonly bgFocus: string;
+            readonly bgReadonly: string;
+            readonly text: string;
+            readonly textMuted: string;
+            readonly border: string;
+            readonly borderHover: string;
+            readonly borderFocus: string;
+            readonly borderError: string;
+            readonly ring: string;
+            readonly radius: string;
+            readonly fontSize: string;
+            readonly lineHeight: string;
+            readonly messageFontSize: string;
+            readonly messageLineHeight: string;
+            readonly borderWidth: string;
+            readonly paddingX: string;
+            readonly paddingY: string;
+            readonly messageMarginTop: string;
+            readonly transition: string;
+        };
+    };
+    readonly breakpoint: {
+        readonly xs: "30rem";
+        readonly sm: "40rem";
+        readonly md: "48rem";
+        readonly lg: "64rem";
+        readonly xl: "80rem";
+        readonly '2xl': "96rem";
     };
 };
 
 export declare type PColors = keyof typeof P_COLORS;
 
+export declare type PTokens = typeof P_TOKENS;
+
+export declare type PTokenValues = typeof P_TOKEN_VALUES;
+
 export { }