@yarcl/react 0.1.0 → 0.2.0

package/dist/themes/editorial.d.ts

@@ -0,0 +1,277 @@
+/** Calm and considered: terracotta on cream, light grotesque type, square corners, flat surfaces, generous spacing. */
+export declare const editorial: {
+    readonly colors: {
+        readonly primary: {
+            readonly light: "#9a3412";
+            readonly dark: "#fb923c";
+        };
+        readonly neutral: {
+            readonly light: "#57534e";
+            readonly dark: "#a8a29e";
+        };
+        readonly success: {
+            readonly light: "#3f6212";
+            readonly dark: "#a3e635";
+        };
+        readonly warning: {
+            readonly light: "#a16207";
+            readonly dark: "#fcd34d";
+        };
+        readonly danger: {
+            readonly light: "#9f1239";
+            readonly dark: "#fda4af";
+        };
+        readonly info: {
+            readonly light: "#1e3a8a";
+            readonly dark: "#93c5fd";
+        };
+    };
+    readonly neutrals: {
+        readonly bg: {
+            readonly light: "#f6f1e7";
+            readonly dark: "#1c1917";
+        };
+        readonly surface: {
+            readonly light: "#fffdf8";
+            readonly dark: "#262220";
+        };
+        readonly text: {
+            readonly light: "#1c1917";
+            readonly dark: "#f5efe3";
+        };
+        readonly muted: {
+            readonly light: "#57534e";
+            readonly dark: "#aaa39b";
+        };
+        readonly border: {
+            readonly light: "#d6cdbd";
+            readonly dark: "#48413b";
+        };
+    };
+    readonly sizes: {
+        readonly xs: {
+            readonly height: "1.75rem";
+            readonly paddingX: "0.75rem";
+            readonly fontSize: "0.8125rem";
+            readonly iconSize: "0.75rem";
+        };
+        readonly sm: {
+            readonly height: "2rem";
+            readonly paddingX: "0.875rem";
+            readonly fontSize: "0.875rem";
+            readonly iconSize: "0.875rem";
+        };
+        readonly md: {
+            readonly height: "2.625rem";
+            readonly paddingX: "1.375rem";
+            readonly fontSize: "1rem";
+            readonly iconSize: "1rem";
+        };
+        readonly lg: {
+            readonly height: "3.25rem";
+            readonly paddingX: "1.75rem";
+            readonly fontSize: "1.0625rem";
+            readonly iconSize: "1.25rem";
+        };
+        readonly xl: {
+            readonly height: "3.875rem";
+            readonly paddingX: "2.125rem";
+            readonly fontSize: "1.1875rem";
+            readonly iconSize: "1.375rem";
+        };
+    };
+    readonly radii: {
+        readonly square: "0";
+        readonly sm: "1px";
+        readonly md: "2px";
+        readonly lg: "3px";
+        readonly xl: "4px";
+        readonly rounded: "9999px";
+    };
+    readonly spacing: {
+        readonly xs: "0.375rem";
+        readonly sm: "0.75rem";
+        readonly md: "1.25rem";
+        readonly lg: "2rem";
+        readonly xl: "3rem";
+    };
+    readonly shadows: {
+        readonly sm: "none";
+        readonly md: "0 18px 40px -18px light-dark(rgb(68 44 20 / 0.35), rgb(0 0 0 / 0.75))";
+        readonly lg: "0 30px 60px -20px light-dark(rgb(68 44 20 / 0.4), rgb(0 0 0 / 0.8))";
+    };
+    readonly typography: {
+        readonly families: {
+            readonly sans: "\"Helvetica Neue\", Helvetica, \"Inter\", \"Segoe UI\", Arial, sans-serif";
+            readonly mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
+        };
+        readonly styles: {
+            readonly display: {
+                readonly family: "sans";
+                readonly size: "2.75rem";
+                readonly weight: 300;
+                readonly lineHeight: 1.05;
+                readonly letterSpacing: "-0.03em";
+            };
+            readonly heading: {
+                readonly family: "sans";
+                readonly size: "1.75rem";
+                readonly weight: 300;
+                readonly lineHeight: 1.2;
+                readonly letterSpacing: "-0.015em";
+            };
+            readonly subheading: {
+                readonly family: "sans";
+                readonly size: "1.25rem";
+                readonly weight: 600;
+                readonly lineHeight: 1.3;
+            };
+            readonly body: {
+                readonly family: "sans";
+                readonly size: "1rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.6;
+            };
+            readonly caption: {
+                readonly family: "sans";
+                readonly size: "0.875rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.5;
+            };
+            readonly code: {
+                readonly family: "mono";
+                readonly size: "0.875rem";
+                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.08em";
+            };
+        };
+        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: "primary";
+        readonly style: "double";
+    };
+    readonly defaults: {
+        readonly radius: "square";
+        readonly padding: "lg";
+        readonly gap: "md";
+        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 density: "comfortable";
+        readonly softVariant: "soft";
+        readonly modalSize: "md";
+    };
+    readonly variants: {
+        readonly solid: {
+            readonly background: "fill";
+            readonly border: "color";
+            readonly text: "on";
+        };
+        readonly soft: {
+            readonly background: "tint";
+            readonly border: "none";
+            readonly text: "color";
+        };
+        readonly outline: {
+            readonly background: "none";
+            readonly border: "color";
+            readonly text: "color";
+        };
+        readonly ghost: {
+            readonly background: "none";
+            readonly border: "none";
+            readonly text: "color";
+        };
+    };
+    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 borders: {
+        readonly width: "1px";
+    };
+    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/editorial.js

@@ -0,0 +1,183 @@
+import { defineConfig } from "../define.js";
+import yarcl_config_default from "../yarcl.config.js";
+//#region src/themes/editorial.ts
+/** Calm and considered: terracotta on cream, light grotesque type, square corners, flat surfaces, generous spacing. */
+var editorial = defineConfig({
+	...yarcl_config_default,
+	colors: {
+		primary: {
+			light: "#9a3412",
+			dark: "#fb923c"
+		},
+		neutral: {
+			light: "#57534e",
+			dark: "#a8a29e"
+		},
+		success: {
+			light: "#3f6212",
+			dark: "#a3e635"
+		},
+		warning: {
+			light: "#a16207",
+			dark: "#fcd34d"
+		},
+		danger: {
+			light: "#9f1239",
+			dark: "#fda4af"
+		},
+		info: {
+			light: "#1e3a8a",
+			dark: "#93c5fd"
+		}
+	},
+	neutrals: {
+		bg: {
+			light: "#f6f1e7",
+			dark: "#1c1917"
+		},
+		surface: {
+			light: "#fffdf8",
+			dark: "#262220"
+		},
+		text: {
+			light: "#1c1917",
+			dark: "#f5efe3"
+		},
+		muted: {
+			light: "#57534e",
+			dark: "#aaa39b"
+		},
+		border: {
+			light: "#d6cdbd",
+			dark: "#48413b"
+		}
+	},
+	sizes: {
+		xs: {
+			height: "1.75rem",
+			paddingX: "0.75rem",
+			fontSize: "0.8125rem",
+			iconSize: "0.75rem"
+		},
+		sm: {
+			height: "2rem",
+			paddingX: "0.875rem",
+			fontSize: "0.875rem",
+			iconSize: "0.875rem"
+		},
+		md: {
+			height: "2.625rem",
+			paddingX: "1.375rem",
+			fontSize: "1rem",
+			iconSize: "1rem"
+		},
+		lg: {
+			height: "3.25rem",
+			paddingX: "1.75rem",
+			fontSize: "1.0625rem",
+			iconSize: "1.25rem"
+		},
+		xl: {
+			height: "3.875rem",
+			paddingX: "2.125rem",
+			fontSize: "1.1875rem",
+			iconSize: "1.375rem"
+		}
+	},
+	radii: {
+		square: "0",
+		sm: "1px",
+		md: "2px",
+		lg: "3px",
+		xl: "4px",
+		rounded: "9999px"
+	},
+	spacing: {
+		xs: "0.375rem",
+		sm: "0.75rem",
+		md: "1.25rem",
+		lg: "2rem",
+		xl: "3rem"
+	},
+	shadows: {
+		sm: "none",
+		md: "0 18px 40px -18px light-dark(rgb(68 44 20 / 0.35), rgb(0 0 0 / 0.75))",
+		lg: "0 30px 60px -20px light-dark(rgb(68 44 20 / 0.4), rgb(0 0 0 / 0.8))"
+	},
+	typography: {
+		families: {
+			sans: "\"Helvetica Neue\", Helvetica, \"Inter\", \"Segoe UI\", Arial, sans-serif",
+			mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace"
+		},
+		styles: {
+			display: {
+				family: "sans",
+				size: "2.75rem",
+				weight: 300,
+				lineHeight: 1.05,
+				letterSpacing: "-0.03em"
+			},
+			heading: {
+				family: "sans",
+				size: "1.75rem",
+				weight: 300,
+				lineHeight: 1.2,
+				letterSpacing: "-0.015em"
+			},
+			subheading: {
+				family: "sans",
+				size: "1.25rem",
+				weight: 600,
+				lineHeight: 1.3
+			},
+			body: {
+				family: "sans",
+				size: "1rem",
+				weight: 400,
+				lineHeight: 1.6
+			},
+			caption: {
+				family: "sans",
+				size: "0.875rem",
+				weight: 400,
+				lineHeight: 1.5
+			},
+			code: {
+				family: "mono",
+				size: "0.875rem",
+				weight: 400,
+				lineHeight: 1.5
+			},
+			label: {
+				family: "sans",
+				size: "0.8125rem",
+				weight: 700,
+				lineHeight: 1.4,
+				letterSpacing: "0.08em"
+			}
+		},
+		headings: {
+			h1: "display",
+			h2: "heading",
+			h3: "heading",
+			h4: "subheading",
+			h5: "subheading",
+			h6: "label"
+		}
+	},
+	focusRing: {
+		width: "3px",
+		offset: "3px",
+		color: "primary",
+		style: "double"
+	},
+	defaults: {
+		...yarcl_config_default.defaults,
+		radius: "square",
+		padding: "lg",
+		gap: "md",
+		floatingShadow: "md"
+	}
+});
+//#endregion
+export { editorial };