@yarcl/react 0.1.0 → 0.2.0

package/dist/themes/compact.d.ts

@@ -0,0 +1,274 @@
+/** Dense and businesslike: teal on cool gray, small 28px controls, tight spacing, 13px text, compact tables, nearly flat. */
+export declare const compact: {
+    readonly colors: {
+        readonly primary: {
+            readonly light: "#0f766e";
+            readonly dark: "#2dd4bf";
+        };
+        readonly neutral: {
+            readonly light: "#52606d";
+            readonly dark: "#9aa5b1";
+        };
+        readonly success: {
+            readonly light: "#15803d";
+            readonly dark: "#4ade80";
+        };
+        readonly warning: {
+            readonly light: "#a16207";
+            readonly dark: "#facc15";
+        };
+        readonly danger: {
+            readonly light: "#b91c1c";
+            readonly dark: "#f87171";
+        };
+        readonly info: {
+            readonly light: "#1d4ed8";
+            readonly dark: "#60a5fa";
+        };
+    };
+    readonly neutrals: {
+        readonly bg: {
+            readonly light: "#eef1f4";
+            readonly dark: "#0b0f14";
+        };
+        readonly surface: {
+            readonly light: "#ffffff";
+            readonly dark: "#141a21";
+        };
+        readonly text: {
+            readonly light: "#1f2933";
+            readonly dark: "#e4e7eb";
+        };
+        readonly muted: {
+            readonly light: "#52606d";
+            readonly dark: "#9aa5b1";
+        };
+        readonly border: {
+            readonly light: "#cbd2d9";
+            readonly dark: "#2a333d";
+        };
+    };
+    readonly sizes: {
+        readonly xs: {
+            readonly height: "1.25rem";
+            readonly paddingX: "0.375rem";
+            readonly fontSize: "0.6875rem";
+            readonly iconSize: "0.75rem";
+        };
+        readonly sm: {
+            readonly height: "1.5rem";
+            readonly paddingX: "0.5rem";
+            readonly fontSize: "0.75rem";
+            readonly iconSize: "0.75rem";
+        };
+        readonly md: {
+            readonly height: "1.75rem";
+            readonly paddingX: "0.625rem";
+            readonly fontSize: "0.8125rem";
+            readonly iconSize: "0.875rem";
+        };
+        readonly lg: {
+            readonly height: "2.25rem";
+            readonly paddingX: "0.875rem";
+            readonly fontSize: "0.875rem";
+            readonly iconSize: "1rem";
+        };
+        readonly xl: {
+            readonly height: "2.75rem";
+            readonly paddingX: "1rem";
+            readonly fontSize: "1rem";
+            readonly iconSize: "1.125rem";
+        };
+    };
+    readonly radii: {
+        readonly square: "0";
+        readonly sm: "2px";
+        readonly md: "3px";
+        readonly lg: "4px";
+        readonly xl: "6px";
+        readonly rounded: "9999px";
+    };
+    readonly variants: {
+        readonly outline: {
+            readonly background: "none";
+            readonly border: "neutral";
+            readonly text: "neutral";
+        };
+        readonly solid: {
+            readonly background: "fill";
+            readonly border: "color";
+            readonly text: "on";
+        };
+        readonly soft: {
+            readonly background: "tint";
+            readonly border: "none";
+            readonly text: "color";
+        };
+        readonly ghost: {
+            readonly background: "none";
+            readonly border: "none";
+            readonly text: "color";
+        };
+    };
+    readonly spacing: {
+        readonly xs: "0.125rem";
+        readonly sm: "0.25rem";
+        readonly md: "0.5rem";
+        readonly lg: "0.75rem";
+        readonly xl: "1rem";
+    };
+    readonly shadows: {
+        readonly sm: "0 1px 0 light-dark(rgb(15 23 42 / 0.05), rgb(0 0 0 / 0.4))";
+        readonly md: "0 2px 8px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.55))";
+        readonly lg: "0 8px 24px light-dark(rgb(15 23 42 / 0.18), rgb(0 0 0 / 0.6))";
+    };
+    readonly density: {
+        readonly compact: {
+            readonly paddingX: "0.5rem";
+            readonly paddingY: "0.25rem";
+            readonly fontSize: "0.75rem";
+        };
+        readonly comfortable: {
+            readonly paddingX: "0.625rem";
+            readonly paddingY: "0.375rem";
+            readonly fontSize: "0.8125rem";
+        };
+    };
+    readonly typography: {
+        readonly families: {
+            readonly sans: "\"IBM Plex Sans\", \"Segoe UI\", system-ui, -apple-system, sans-serif";
+            readonly mono: "\"IBM Plex Mono\", ui-monospace, Menlo, Consolas, monospace";
+        };
+        readonly styles: {
+            readonly display: {
+                readonly family: "sans";
+                readonly size: "1.5rem";
+                readonly weight: 600;
+                readonly lineHeight: 1.25;
+            };
+            readonly heading: {
+                readonly family: "sans";
+                readonly size: "1.125rem";
+                readonly weight: 600;
+                readonly lineHeight: 1.3;
+            };
+            readonly subheading: {
+                readonly family: "sans";
+                readonly size: "0.9375rem";
+                readonly weight: 600;
+                readonly lineHeight: 1.35;
+            };
+            readonly body: {
+                readonly family: "sans";
+                readonly size: "0.8125rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.45;
+            };
+            readonly caption: {
+                readonly family: "sans";
+                readonly size: "0.75rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.4;
+            };
+            readonly code: {
+                readonly family: "mono";
+                readonly size: "0.75rem";
+                readonly weight: 400;
+                readonly lineHeight: 1.45;
+            };
+            readonly label: {
+                readonly family: "sans";
+                readonly size: "0.75rem";
+                readonly weight: 600;
+                readonly lineHeight: 1.35;
+                readonly letterSpacing: "0.02em";
+            };
+        };
+        readonly headings: {
+            readonly h1: "display";
+            readonly h2: "heading";
+            readonly h3: "heading";
+            readonly h4: "subheading";
+            readonly h5: "subheading";
+            readonly h6: "label";
+        };
+    };
+    readonly focusRing: {
+        readonly width: "2px";
+        readonly offset: "1px";
+        readonly color: "info";
+    };
+    readonly defaults: {
+        readonly radius: "sm";
+        readonly padding: "lg";
+        readonly gap: "md";
+        readonly density: "compact";
+        readonly size: "md";
+        readonly color: "primary";
+        readonly variant: "solid";
+        readonly errorColor: "danger";
+        readonly textStyle: "body";
+        readonly labelStyle: "label";
+        readonly helperStyle: "caption";
+        readonly floatingShadow: "md";
+        readonly softVariant: "soft";
+        readonly modalSize: "md";
+    };
+    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/compact.js

@@ -0,0 +1,200 @@
+import { defineConfig } from "../define.js";
+import yarcl_config_default from "../yarcl.config.js";
+//#region src/themes/compact.ts
+/** Dense and businesslike: teal on cool gray, small 28px controls, tight spacing, 13px text, compact tables, nearly flat. */
+var compact = defineConfig({
+	...yarcl_config_default,
+	colors: {
+		primary: {
+			light: "#0f766e",
+			dark: "#2dd4bf"
+		},
+		neutral: {
+			light: "#52606d",
+			dark: "#9aa5b1"
+		},
+		success: {
+			light: "#15803d",
+			dark: "#4ade80"
+		},
+		warning: {
+			light: "#a16207",
+			dark: "#facc15"
+		},
+		danger: {
+			light: "#b91c1c",
+			dark: "#f87171"
+		},
+		info: {
+			light: "#1d4ed8",
+			dark: "#60a5fa"
+		}
+	},
+	neutrals: {
+		bg: {
+			light: "#eef1f4",
+			dark: "#0b0f14"
+		},
+		surface: {
+			light: "#ffffff",
+			dark: "#141a21"
+		},
+		text: {
+			light: "#1f2933",
+			dark: "#e4e7eb"
+		},
+		muted: {
+			light: "#52606d",
+			dark: "#9aa5b1"
+		},
+		border: {
+			light: "#cbd2d9",
+			dark: "#2a333d"
+		}
+	},
+	sizes: {
+		xs: {
+			height: "1.25rem",
+			paddingX: "0.375rem",
+			fontSize: "0.6875rem",
+			iconSize: "0.75rem"
+		},
+		sm: {
+			height: "1.5rem",
+			paddingX: "0.5rem",
+			fontSize: "0.75rem",
+			iconSize: "0.75rem"
+		},
+		md: {
+			height: "1.75rem",
+			paddingX: "0.625rem",
+			fontSize: "0.8125rem",
+			iconSize: "0.875rem"
+		},
+		lg: {
+			height: "2.25rem",
+			paddingX: "0.875rem",
+			fontSize: "0.875rem",
+			iconSize: "1rem"
+		},
+		xl: {
+			height: "2.75rem",
+			paddingX: "1rem",
+			fontSize: "1rem",
+			iconSize: "1.125rem"
+		}
+	},
+	radii: {
+		square: "0",
+		sm: "2px",
+		md: "3px",
+		lg: "4px",
+		xl: "6px",
+		rounded: "9999px"
+	},
+	variants: {
+		...yarcl_config_default.variants,
+		outline: {
+			background: "none",
+			border: "neutral",
+			text: "neutral"
+		}
+	},
+	spacing: {
+		xs: "0.125rem",
+		sm: "0.25rem",
+		md: "0.5rem",
+		lg: "0.75rem",
+		xl: "1rem"
+	},
+	shadows: {
+		sm: "0 1px 0 light-dark(rgb(15 23 42 / 0.05), rgb(0 0 0 / 0.4))",
+		md: "0 2px 8px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.55))",
+		lg: "0 8px 24px light-dark(rgb(15 23 42 / 0.18), rgb(0 0 0 / 0.6))"
+	},
+	density: {
+		compact: {
+			paddingX: "0.5rem",
+			paddingY: "0.25rem",
+			fontSize: "0.75rem"
+		},
+		comfortable: {
+			paddingX: "0.625rem",
+			paddingY: "0.375rem",
+			fontSize: "0.8125rem"
+		}
+	},
+	typography: {
+		families: {
+			sans: "\"IBM Plex Sans\", \"Segoe UI\", system-ui, -apple-system, sans-serif",
+			mono: "\"IBM Plex Mono\", ui-monospace, Menlo, Consolas, monospace"
+		},
+		styles: {
+			display: {
+				family: "sans",
+				size: "1.5rem",
+				weight: 600,
+				lineHeight: 1.25
+			},
+			heading: {
+				family: "sans",
+				size: "1.125rem",
+				weight: 600,
+				lineHeight: 1.3
+			},
+			subheading: {
+				family: "sans",
+				size: "0.9375rem",
+				weight: 600,
+				lineHeight: 1.35
+			},
+			body: {
+				family: "sans",
+				size: "0.8125rem",
+				weight: 400,
+				lineHeight: 1.45
+			},
+			caption: {
+				family: "sans",
+				size: "0.75rem",
+				weight: 400,
+				lineHeight: 1.4
+			},
+			code: {
+				family: "mono",
+				size: "0.75rem",
+				weight: 400,
+				lineHeight: 1.45
+			},
+			label: {
+				family: "sans",
+				size: "0.75rem",
+				weight: 600,
+				lineHeight: 1.35,
+				letterSpacing: "0.02em"
+			}
+		},
+		headings: {
+			h1: "display",
+			h2: "heading",
+			h3: "heading",
+			h4: "subheading",
+			h5: "subheading",
+			h6: "label"
+		}
+	},
+	focusRing: {
+		width: "2px",
+		offset: "1px",
+		color: "info"
+	},
+	defaults: {
+		...yarcl_config_default.defaults,
+		radius: "sm",
+		padding: "lg",
+		gap: "md",
+		density: "compact"
+	}
+});
+//#endregion
+export { compact };

package/dist/themes/contract.d.ts

@@ -0,0 +1,23 @@
+import type { ColorToken, DensityToken, SizeToken, TextStyleToken, VariantToken } from '../define';
+import type defaults from '../yarcl.config';
+type Defaults = typeof defaults;
+/**
+ * The keys every bundled theme defines: the same keys as the library defaults.
+ * Apps written against these keys work with any theme that satisfies the contract.
+ * Values are free; extra keys are allowed.
+ */
+export interface ThemeContract {
+    colors: Record<keyof Defaults['colors'], ColorToken>;
+    sizes: Record<keyof Defaults['sizes'], SizeToken>;
+    radii: Record<keyof Defaults['radii'], string>;
+    variants: Record<keyof Defaults['variants'], VariantToken>;
+    spacing: Record<keyof Defaults['spacing'], string>;
+    shadows: Record<keyof Defaults['shadows'], string>;
+    density: Record<keyof Defaults['density'], DensityToken>;
+    modalSizes: Record<keyof Defaults['modalSizes'], string>;
+    typography: {
+        families: Record<keyof Defaults['typography']['families'], string>;
+        styles: Record<keyof Defaults['typography']['styles'], TextStyleToken>;
+    };
+}
+export {};