@yarcl/react 0.1.0 → 0.2.0

package/dist/themes/brutalist.d.ts

@@ -0,0 +1,277 @@
+/** Loud and flat: red on black and white, square corners, thick borders, hard offset shadows, monospace type. */
+export declare const brutalist: {
+    readonly colors: {
+        readonly primary: {
+            readonly light: "#ff3d2e";
+            readonly dark: "#ff5a4d";
+        };
+        readonly neutral: {
+            readonly light: "#1a1a1a";
+            readonly dark: "#f5f5f5";
+        };
+        readonly success: {
+            readonly light: "#00b862";
+            readonly dark: "#3dfc9a";
+        };
+        readonly warning: {
+            readonly light: "#ff8a00";
+            readonly dark: "#ffb14a";
+        };
+        readonly danger: {
+            readonly light: "#c2005a";
+            readonly dark: "#ff5ca1";
+        };
+        readonly info: {
+            readonly light: "#2f6bff";
+            readonly dark: "#7aa2ff";
+        };
+    };
+    readonly neutrals: {
+        readonly bg: {
+            readonly light: "#fffdf2";
+            readonly dark: "#0f0f0f";
+        };
+        readonly surface: {
+            readonly light: "#ffffff";
+            readonly dark: "#1a1a1a";
+        };
+        readonly text: {
+            readonly light: "#000000";
+            readonly dark: "#ffffff";
+        };
+        readonly muted: {
+            readonly light: "#3d3d3d";
+            readonly dark: "#cfcfcf";
+        };
+        readonly border: {
+            readonly light: "#000000";
+            readonly dark: "#ffffff";
+        };
+    };
+    readonly sizes: {
+        readonly xs: {
+            readonly height: "1.75rem";
+            readonly paddingX: "0.625rem";
+            readonly fontSize: "0.75rem";
+            readonly iconSize: "0.75rem";
+        };
+        readonly sm: {
+            readonly height: "2rem";
+            readonly paddingX: "0.75rem";
+            readonly fontSize: "0.8125rem";
+            readonly iconSize: "0.875rem";
+        };
+        readonly md: {
+            readonly height: "2.5rem";
+            readonly paddingX: "1rem";
+            readonly fontSize: "0.875rem";
+            readonly iconSize: "1rem";
+        };
+        readonly lg: {
+            readonly height: "3rem";
+            readonly paddingX: "1.25rem";
+            readonly fontSize: "1rem";
+            readonly iconSize: "1.25rem";
+        };
+        readonly xl: {
+            readonly height: "3.5rem";
+            readonly paddingX: "1.5rem";
+            readonly fontSize: "1.125rem";
+            readonly iconSize: "1.5rem";
+        };
+    };
+    readonly radii: {
+        readonly square: "0";
+        readonly sm: "0";
+        readonly md: "0";
+        readonly lg: "0";
+        readonly xl: "0";
+        readonly rounded: "9999px";
+    };
+    readonly variants: {
+        readonly solid: {
+            readonly background: "fill";
+            readonly border: "neutral";
+            readonly text: "on";
+        };
+        readonly soft: {
+            readonly background: "tint";
+            readonly border: "neutral";
+            readonly text: "neutral";
+        };
+        readonly outline: {
+            readonly background: "none";
+            readonly border: "neutral";
+            readonly text: "neutral";
+        };
+        readonly ghost: {
+            readonly background: "none";
+            readonly border: "none";
+            readonly text: "neutral";
+        };
+    };
+    readonly shadows: {
+        readonly sm: "3px 3px 0 0 light-dark(#000000, #ffffff)";
+        readonly md: "5px 5px 0 0 light-dark(#000000, #ffffff)";
+        readonly lg: "8px 8px 0 0 light-dark(#000000, #ffffff)";
+    };
+    readonly borders: {
+        readonly width: "2px";
+    };
+    readonly typography: {
+        readonly families: {
+            readonly sans: "\"JetBrains Mono\", \"SF Mono\", ui-monospace, Menlo, Consolas, monospace";
+            readonly mono: "\"JetBrains Mono\", \"SF Mono\", ui-monospace, Menlo, Consolas, monospace";
+        };
+        readonly styles: {
+            readonly display: {
+                readonly family: "sans";
+                readonly size: "2.5rem";
+                readonly weight: 800;
+                readonly lineHeight: 1;
+                readonly letterSpacing: "-0.04em";
+            };
+            readonly heading: {
+                readonly family: "sans";
+                readonly size: "1.5rem";
+                readonly weight: 800;
+                readonly lineHeight: 1.15;
+                readonly letterSpacing: "-0.02em";
+            };
+            readonly subheading: {
+                readonly family: "sans";
+                readonly size: "1.125rem";
+                readonly weight: 700;
+                readonly lineHeight: 1.3;
+            };
+            readonly body: {
+                readonly family: "sans";
+                readonly size: "0.875rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.55;
+            };
+            readonly caption: {
+                readonly family: "sans";
+                readonly size: "0.75rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.45;
+            };
+            readonly code: {
+                readonly family: "mono";
+                readonly size: "0.8125rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.5;
+            };
+            readonly label: {
+                readonly family: "sans";
+                readonly size: "0.8125rem";
+                readonly weight: 700;
+                readonly lineHeight: 1.4;
+                readonly letterSpacing: "0.04em";
+            };
+        };
+        readonly headings: {
+            readonly h1: "display";
+            readonly h2: "heading";
+            readonly h3: "heading";
+            readonly h4: "subheading";
+            readonly h5: "subheading";
+            readonly h6: "label";
+        };
+    };
+    readonly focusRing: {
+        readonly width: "3px";
+        readonly offset: "3px";
+        readonly color: "neutral";
+        readonly style: "dashed";
+    };
+    readonly defaults: {
+        readonly radius: "md";
+        readonly padding: "lg";
+        readonly floatingShadow: "md";
+        readonly size: "md";
+        readonly color: "primary";
+        readonly variant: "solid";
+        readonly errorColor: "danger";
+        readonly textStyle: "body";
+        readonly labelStyle: "label";
+        readonly helperStyle: "caption";
+        readonly gap: "md";
+        readonly density: "comfortable";
+        readonly softVariant: "soft";
+        readonly modalSize: "md";
+    };
+    readonly spacing: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "1rem";
+        readonly lg: "1.5rem";
+        readonly xl: "2rem";
+    };
+    readonly density: {
+        readonly compact: {
+            readonly paddingX: "0.5rem";
+            readonly paddingY: "0.25rem";
+            readonly fontSize: "0.8125rem";
+        };
+        readonly comfortable: {
+            readonly paddingX: "0.75rem";
+            readonly paddingY: "0.625rem";
+            readonly fontSize: "0.875rem";
+        };
+    };
+    readonly modalSizes: {
+        readonly sm: "24rem";
+        readonly md: "32rem";
+        readonly lg: "48rem";
+        readonly xl: "64rem";
+        readonly full: "100vw";
+    };
+    readonly zIndex: {
+        readonly dropdown: 1000;
+        readonly tooltip: 1100;
+        readonly dialog: 1200;
+        readonly toast: 1300;
+    };
+    readonly motion: {
+        readonly fast: "120ms";
+        readonly base: "200ms";
+        readonly easing: "cubic-bezier(0.2, 0, 0, 1)";
+    };
+    readonly timing: {
+        readonly tooltipDelay: 400;
+        readonly hoverOpenDelay: 300;
+        readonly hoverCloseDelay: 150;
+        readonly toastDuration: 5000;
+    };
+    readonly components: {
+        readonly Avatar: {
+            readonly radius: "rounded";
+        };
+        readonly EmptyState: {
+            readonly color: "neutral";
+            readonly gap: "sm";
+            readonly padding: "lg";
+            readonly textStyle: "body";
+        };
+        readonly Alert: {
+            readonly gap: "sm";
+            readonly padding: "md";
+            readonly textStyle: "label";
+        };
+        readonly Drawer: {
+            readonly size: "sm";
+        };
+        readonly Tooltip: {
+            readonly radius: "md";
+            readonly padding: "sm";
+            readonly textStyle: "caption";
+        };
+        readonly Toast: {
+            readonly radius: "lg";
+            readonly gap: "sm";
+            readonly padding: "md";
+            readonly textStyle: "label";
+        };
+    };
+};

package/dist/themes/brutalist.js

@@ -0,0 +1,199 @@
+import { defineConfig } from "../define.js";
+import yarcl_config_default from "../yarcl.config.js";
+//#region src/themes/brutalist.ts
+var ink = "light-dark(#000000, #ffffff)";
+/** Loud and flat: red on black and white, square corners, thick borders, hard offset shadows, monospace type. */
+var brutalist = defineConfig({
+	...yarcl_config_default,
+	colors: {
+		primary: {
+			light: "#ff3d2e",
+			dark: "#ff5a4d"
+		},
+		neutral: {
+			light: "#1a1a1a",
+			dark: "#f5f5f5"
+		},
+		success: {
+			light: "#00b862",
+			dark: "#3dfc9a"
+		},
+		warning: {
+			light: "#ff8a00",
+			dark: "#ffb14a"
+		},
+		danger: {
+			light: "#c2005a",
+			dark: "#ff5ca1"
+		},
+		info: {
+			light: "#2f6bff",
+			dark: "#7aa2ff"
+		}
+	},
+	neutrals: {
+		bg: {
+			light: "#fffdf2",
+			dark: "#0f0f0f"
+		},
+		surface: {
+			light: "#ffffff",
+			dark: "#1a1a1a"
+		},
+		text: {
+			light: "#000000",
+			dark: "#ffffff"
+		},
+		muted: {
+			light: "#3d3d3d",
+			dark: "#cfcfcf"
+		},
+		border: {
+			light: "#000000",
+			dark: "#ffffff"
+		}
+	},
+	sizes: {
+		xs: {
+			height: "1.75rem",
+			paddingX: "0.625rem",
+			fontSize: "0.75rem",
+			iconSize: "0.75rem"
+		},
+		sm: {
+			height: "2rem",
+			paddingX: "0.75rem",
+			fontSize: "0.8125rem",
+			iconSize: "0.875rem"
+		},
+		md: {
+			height: "2.5rem",
+			paddingX: "1rem",
+			fontSize: "0.875rem",
+			iconSize: "1rem"
+		},
+		lg: {
+			height: "3rem",
+			paddingX: "1.25rem",
+			fontSize: "1rem",
+			iconSize: "1.25rem"
+		},
+		xl: {
+			height: "3.5rem",
+			paddingX: "1.5rem",
+			fontSize: "1.125rem",
+			iconSize: "1.5rem"
+		}
+	},
+	radii: {
+		square: "0",
+		sm: "0",
+		md: "0",
+		lg: "0",
+		xl: "0",
+		rounded: "9999px"
+	},
+	variants: {
+		solid: {
+			background: "fill",
+			border: "neutral",
+			text: "on"
+		},
+		soft: {
+			background: "tint",
+			border: "neutral",
+			text: "neutral"
+		},
+		outline: {
+			background: "none",
+			border: "neutral",
+			text: "neutral"
+		},
+		ghost: {
+			background: "none",
+			border: "none",
+			text: "neutral"
+		}
+	},
+	shadows: {
+		sm: `3px 3px 0 0 ${ink}`,
+		md: `5px 5px 0 0 ${ink}`,
+		lg: `8px 8px 0 0 ${ink}`
+	},
+	borders: { width: "2px" },
+	typography: {
+		families: {
+			sans: "\"JetBrains Mono\", \"SF Mono\", ui-monospace, Menlo, Consolas, monospace",
+			mono: "\"JetBrains Mono\", \"SF Mono\", ui-monospace, Menlo, Consolas, monospace"
+		},
+		styles: {
+			display: {
+				family: "sans",
+				size: "2.5rem",
+				weight: 800,
+				lineHeight: 1,
+				letterSpacing: "-0.04em"
+			},
+			heading: {
+				family: "sans",
+				size: "1.5rem",
+				weight: 800,
+				lineHeight: 1.15,
+				letterSpacing: "-0.02em"
+			},
+			subheading: {
+				family: "sans",
+				size: "1.125rem",
+				weight: 700,
+				lineHeight: 1.3
+			},
+			body: {
+				family: "sans",
+				size: "0.875rem",
+				weight: 400,
+				lineHeight: 1.55
+			},
+			caption: {
+				family: "sans",
+				size: "0.75rem",
+				weight: 400,
+				lineHeight: 1.45
+			},
+			code: {
+				family: "mono",
+				size: "0.8125rem",
+				weight: 400,
+				lineHeight: 1.5
+			},
+			label: {
+				family: "sans",
+				size: "0.8125rem",
+				weight: 700,
+				lineHeight: 1.4,
+				letterSpacing: "0.04em"
+			}
+		},
+		headings: {
+			h1: "display",
+			h2: "heading",
+			h3: "heading",
+			h4: "subheading",
+			h5: "subheading",
+			h6: "label"
+		}
+	},
+	focusRing: {
+		width: "3px",
+		offset: "3px",
+		color: "neutral",
+		style: "dashed"
+	},
+	defaults: {
+		...yarcl_config_default.defaults,
+		radius: "md",
+		padding: "lg",
+		floatingShadow: "md"
+	}
+});
+//#endregion
+export { brutalist };