@react-native-rethemed/chakra-ui-tokens 0.1.0 → 0.1.1

package/dist/scales.cjs

@@ -0,0 +1,213 @@
+const require_colors = require("./colors.cjs");
+//#region src/scales.ts
+/**
+* Radius scale, aligned with Chakra UI's radii tokens.
+* https://www.chakra-ui.com/docs/theming/radii
+*/
+const radii = {
+	none: 0,
+	"2xs": 1,
+	xs: 2,
+	sm: 4,
+	md: 6,
+	lg: 8,
+	xl: 12,
+	"2xl": 16,
+	"3xl": 24,
+	"4xl": 32,
+	full: 9999
+};
+/**
+* Spacing scale, aligned with Chakra UI's spacing tokens. 1 unit = 4px,
+* matching Chakra/Tailwind's proportional scale.
+* https://www.chakra-ui.com/docs/theming/spacing
+*/
+const spacing = {
+	px: 1,
+	0: 0,
+	.5: 2,
+	1: 4,
+	1.5: 6,
+	2: 8,
+	2.5: 10,
+	3: 12,
+	3.5: 14,
+	4: 16,
+	5: 20,
+	6: 24,
+	7: 28,
+	8: 32,
+	9: 36,
+	10: 40,
+	11: 44,
+	12: 48,
+	14: 56,
+	16: 64,
+	20: 80,
+	24: 96,
+	28: 112,
+	32: 128,
+	36: 144,
+	40: 160,
+	44: 176,
+	48: 192,
+	52: 208,
+	56: 224,
+	60: 240,
+	64: 256,
+	72: 288,
+	80: 320,
+	96: 384
+};
+/**
+* Font size scale, aligned with Chakra UI's fontSizes tokens.
+* https://www.chakra-ui.com/docs/theming/typography
+*/
+const fontSizes = {
+	"2xs": 10,
+	xs: 12,
+	sm: 14,
+	md: 16,
+	lg: 18,
+	xl: 20,
+	"2xl": 24,
+	"3xl": 30,
+	"4xl": 36,
+	"5xl": 48,
+	"6xl": 60,
+	"7xl": 72,
+	"8xl": 96,
+	"9xl": 128
+};
+/** Font weight scale — the standard 9-step CSS scale (thin..black). */
+const fontWeights = {
+	thin: "100",
+	extralight: "200",
+	light: "300",
+	normal: "400",
+	medium: "500",
+	semibold: "600",
+	bold: "700",
+	extrabold: "800",
+	black: "900"
+};
+/**
+* Line height scale, aligned with Chakra UI's lineHeights tokens: unitless
+* ratios, as Chakra defines them. `themed` resolves a token to
+* `fontSize × ratio` (see `defaults.fontSize` for styles without a fontSize).
+*/
+const lineHeights = {
+	shorter: 1.25,
+	short: 1.375,
+	moderate: 1.5,
+	tall: 1.625,
+	taller: 2
+};
+/**
+* Letter spacing scale. Chakra's tokens are em-based; these are the
+* approximate px equivalents at a 16px base font size.
+*/
+const letterSpacings = {
+	tighter: -.8,
+	tight: -.4,
+	wide: .4,
+	wider: .8,
+	widest: 1.6
+};
+/**
+* z-index scale, aligned with Chakra UI's zIndices tokens.
+* https://www.chakra-ui.com/docs/theming/z-index
+*/
+const zIndices = {
+	hide: -1,
+	base: 0,
+	docked: 10,
+	dropdown: 1e3,
+	sticky: 1100,
+	banner: 1200,
+	overlay: 1300,
+	modal: 1400,
+	popover: 1500,
+	skipNav: 1600,
+	toast: 1700,
+	tooltip: 1800,
+	max: 2147483647
+};
+/**
+* Chakra's `xs`/`sm`/`md`/`lg`/`xl`/`2xl` box-shadow scale, approximated as
+* single-layer RN shadow objects since RN doesn't support multi-layer
+* shadows the way CSS `box-shadow` does. Chakra's `inner` (inset) shadow
+* isn't included — not representable with RN's native shadow props.
+*/
+const shadowColor = require_colors.colors.black;
+const shadows = {
+	xs: {
+		shadowColor,
+		shadowOffset: {
+			width: 0,
+			height: 1
+		},
+		shadowOpacity: .05,
+		shadowRadius: 1,
+		elevation: 1
+	},
+	sm: {
+		shadowColor,
+		shadowOffset: {
+			width: 0,
+			height: 1
+		},
+		shadowOpacity: .1,
+		shadowRadius: 2,
+		elevation: 2
+	},
+	md: {
+		shadowColor,
+		shadowOffset: {
+			width: 0,
+			height: 2
+		},
+		shadowOpacity: .12,
+		shadowRadius: 6,
+		elevation: 4
+	},
+	lg: {
+		shadowColor,
+		shadowOffset: {
+			width: 0,
+			height: 4
+		},
+		shadowOpacity: .14,
+		shadowRadius: 10,
+		elevation: 8
+	},
+	xl: {
+		shadowColor,
+		shadowOffset: {
+			width: 0,
+			height: 8
+		},
+		shadowOpacity: .16,
+		shadowRadius: 16,
+		elevation: 12
+	},
+	"2xl": {
+		shadowColor,
+		shadowOffset: {
+			width: 0,
+			height: 12
+		},
+		shadowOpacity: .2,
+		shadowRadius: 24,
+		elevation: 16
+	}
+};
+//#endregion
+exports.fontSizes = fontSizes;
+exports.fontWeights = fontWeights;
+exports.letterSpacings = letterSpacings;
+exports.lineHeights = lineHeights;
+exports.radii = radii;
+exports.shadows = shadows;
+exports.spacing = spacing;
+exports.zIndices = zIndices;

package/dist/scales.d.cts

@@ -0,0 +1,197 @@
+//#region src/scales.d.ts
+/**
+ * Radius scale, aligned with Chakra UI's radii tokens.
+ * https://www.chakra-ui.com/docs/theming/radii
+ */
+export declare const radii: {
+  readonly none: 0;
+  readonly '2xs': 1;
+  readonly xs: 2;
+  readonly sm: 4;
+  readonly md: 6;
+  readonly lg: 8;
+  readonly xl: 12;
+  readonly '2xl': 16;
+  readonly '3xl': 24;
+  readonly '4xl': 32;
+  readonly full: 9999;
+};
+/**
+ * Spacing scale, aligned with Chakra UI's spacing tokens. 1 unit = 4px,
+ * matching Chakra/Tailwind's proportional scale.
+ * https://www.chakra-ui.com/docs/theming/spacing
+ */
+export declare const spacing: {
+  readonly px: 1;
+  readonly 0: 0;
+  readonly 0.5: 2;
+  readonly 1: 4;
+  readonly 1.5: 6;
+  readonly 2: 8;
+  readonly 2.5: 10;
+  readonly 3: 12;
+  readonly 3.5: 14;
+  readonly 4: 16;
+  readonly 5: 20;
+  readonly 6: 24;
+  readonly 7: 28;
+  readonly 8: 32;
+  readonly 9: 36;
+  readonly 10: 40;
+  readonly 11: 44;
+  readonly 12: 48;
+  readonly 14: 56;
+  readonly 16: 64;
+  readonly 20: 80;
+  readonly 24: 96;
+  readonly 28: 112;
+  readonly 32: 128;
+  readonly 36: 144;
+  readonly 40: 160;
+  readonly 44: 176;
+  readonly 48: 192;
+  readonly 52: 208;
+  readonly 56: 224;
+  readonly 60: 240;
+  readonly 64: 256;
+  readonly 72: 288;
+  readonly 80: 320;
+  readonly 96: 384;
+};
+/**
+ * Font size scale, aligned with Chakra UI's fontSizes tokens.
+ * https://www.chakra-ui.com/docs/theming/typography
+ */
+export declare const fontSizes: {
+  readonly '2xs': 10;
+  readonly xs: 12;
+  readonly sm: 14;
+  readonly md: 16;
+  readonly lg: 18;
+  readonly xl: 20;
+  readonly '2xl': 24;
+  readonly '3xl': 30;
+  readonly '4xl': 36;
+  readonly '5xl': 48;
+  readonly '6xl': 60;
+  readonly '7xl': 72;
+  readonly '8xl': 96;
+  readonly '9xl': 128;
+};
+/** Font weight scale — the standard 9-step CSS scale (thin..black). */
+export declare const fontWeights: {
+  readonly thin: "100";
+  readonly extralight: "200";
+  readonly light: "300";
+  readonly normal: "400";
+  readonly medium: "500";
+  readonly semibold: "600";
+  readonly bold: "700";
+  readonly extrabold: "800";
+  readonly black: "900";
+};
+/**
+ * Line height scale, aligned with Chakra UI's lineHeights tokens: unitless
+ * ratios, as Chakra defines them. `themed` resolves a token to
+ * `fontSize × ratio` (see `defaults.fontSize` for styles without a fontSize).
+ */
+export declare const lineHeights: {
+  readonly shorter: 1.25;
+  readonly short: 1.375;
+  readonly moderate: 1.5;
+  readonly tall: 1.625;
+  readonly taller: 2;
+};
+/**
+ * Letter spacing scale. Chakra's tokens are em-based; these are the
+ * approximate px equivalents at a 16px base font size.
+ */
+export declare const letterSpacings: {
+  readonly tighter: -0.8;
+  readonly tight: -0.4;
+  readonly wide: 0.4;
+  readonly wider: 0.8;
+  readonly widest: 1.6;
+};
+/**
+ * z-index scale, aligned with Chakra UI's zIndices tokens.
+ * https://www.chakra-ui.com/docs/theming/z-index
+ */
+export declare const zIndices: {
+  readonly hide: -1;
+  readonly base: 0;
+  readonly docked: 10;
+  readonly dropdown: 1000;
+  readonly sticky: 1100;
+  readonly banner: 1200;
+  readonly overlay: 1300;
+  readonly modal: 1400;
+  readonly popover: 1500;
+  readonly skipNav: 1600;
+  readonly toast: 1700;
+  readonly tooltip: 1800;
+  readonly max: 2147483647;
+};
+export declare const shadows: {
+  readonly xs: {
+    readonly shadowColor: "#000000";
+    readonly shadowOffset: {
+      readonly width: 0;
+      readonly height: 1;
+    };
+    readonly shadowOpacity: 0.05;
+    readonly shadowRadius: 1;
+    readonly elevation: 1;
+  };
+  readonly sm: {
+    readonly shadowColor: "#000000";
+    readonly shadowOffset: {
+      readonly width: 0;
+      readonly height: 1;
+    };
+    readonly shadowOpacity: 0.1;
+    readonly shadowRadius: 2;
+    readonly elevation: 2;
+  };
+  readonly md: {
+    readonly shadowColor: "#000000";
+    readonly shadowOffset: {
+      readonly width: 0;
+      readonly height: 2;
+    };
+    readonly shadowOpacity: 0.12;
+    readonly shadowRadius: 6;
+    readonly elevation: 4;
+  };
+  readonly lg: {
+    readonly shadowColor: "#000000";
+    readonly shadowOffset: {
+      readonly width: 0;
+      readonly height: 4;
+    };
+    readonly shadowOpacity: 0.14;
+    readonly shadowRadius: 10;
+    readonly elevation: 8;
+  };
+  readonly xl: {
+    readonly shadowColor: "#000000";
+    readonly shadowOffset: {
+      readonly width: 0;
+      readonly height: 8;
+    };
+    readonly shadowOpacity: 0.16;
+    readonly shadowRadius: 16;
+    readonly elevation: 12;
+  };
+  readonly '2xl': {
+    readonly shadowColor: "#000000";
+    readonly shadowOffset: {
+      readonly width: 0;
+      readonly height: 12;
+    };
+    readonly shadowOpacity: 0.2;
+    readonly shadowRadius: 24;
+    readonly elevation: 16;
+  };
+};
+//#endregion

package/dist/scales.d.mts

@@ -0,0 +1,197 @@
+//#region src/scales.d.ts
+/**
+ * Radius scale, aligned with Chakra UI's radii tokens.
+ * https://www.chakra-ui.com/docs/theming/radii
+ */
+export declare const radii: {
+  readonly none: 0;
+  readonly '2xs': 1;
+  readonly xs: 2;
+  readonly sm: 4;
+  readonly md: 6;
+  readonly lg: 8;
+  readonly xl: 12;
+  readonly '2xl': 16;
+  readonly '3xl': 24;
+  readonly '4xl': 32;
+  readonly full: 9999;
+};
+/**
+ * Spacing scale, aligned with Chakra UI's spacing tokens. 1 unit = 4px,
+ * matching Chakra/Tailwind's proportional scale.
+ * https://www.chakra-ui.com/docs/theming/spacing
+ */
+export declare const spacing: {
+  readonly px: 1;
+  readonly 0: 0;
+  readonly 0.5: 2;
+  readonly 1: 4;
+  readonly 1.5: 6;
+  readonly 2: 8;
+  readonly 2.5: 10;
+  readonly 3: 12;
+  readonly 3.5: 14;
+  readonly 4: 16;
+  readonly 5: 20;
+  readonly 6: 24;
+  readonly 7: 28;
+  readonly 8: 32;
+  readonly 9: 36;
+  readonly 10: 40;
+  readonly 11: 44;
+  readonly 12: 48;
+  readonly 14: 56;
+  readonly 16: 64;
+  readonly 20: 80;
+  readonly 24: 96;
+  readonly 28: 112;
+  readonly 32: 128;
+  readonly 36: 144;
+  readonly 40: 160;
+  readonly 44: 176;
+  readonly 48: 192;
+  readonly 52: 208;
+  readonly 56: 224;
+  readonly 60: 240;
+  readonly 64: 256;
+  readonly 72: 288;
+  readonly 80: 320;
+  readonly 96: 384;
+};
+/**
+ * Font size scale, aligned with Chakra UI's fontSizes tokens.
+ * https://www.chakra-ui.com/docs/theming/typography
+ */
+export declare const fontSizes: {
+  readonly '2xs': 10;
+  readonly xs: 12;
+  readonly sm: 14;
+  readonly md: 16;
+  readonly lg: 18;
+  readonly xl: 20;
+  readonly '2xl': 24;
+  readonly '3xl': 30;
+  readonly '4xl': 36;
+  readonly '5xl': 48;
+  readonly '6xl': 60;
+  readonly '7xl': 72;
+  readonly '8xl': 96;
+  readonly '9xl': 128;
+};
+/** Font weight scale — the standard 9-step CSS scale (thin..black). */
+export declare const fontWeights: {
+  readonly thin: "100";
+  readonly extralight: "200";
+  readonly light: "300";
+  readonly normal: "400";
+  readonly medium: "500";
+  readonly semibold: "600";
+  readonly bold: "700";
+  readonly extrabold: "800";
+  readonly black: "900";
+};
+/**
+ * Line height scale, aligned with Chakra UI's lineHeights tokens: unitless
+ * ratios, as Chakra defines them. `themed` resolves a token to
+ * `fontSize × ratio` (see `defaults.fontSize` for styles without a fontSize).
+ */
+export declare const lineHeights: {
+  readonly shorter: 1.25;
+  readonly short: 1.375;
+  readonly moderate: 1.5;
+  readonly tall: 1.625;
+  readonly taller: 2;
+};
+/**
+ * Letter spacing scale. Chakra's tokens are em-based; these are the
+ * approximate px equivalents at a 16px base font size.
+ */
+export declare const letterSpacings: {
+  readonly tighter: -0.8;
+  readonly tight: -0.4;
+  readonly wide: 0.4;
+  readonly wider: 0.8;
+  readonly widest: 1.6;
+};
+/**
+ * z-index scale, aligned with Chakra UI's zIndices tokens.
+ * https://www.chakra-ui.com/docs/theming/z-index
+ */
+export declare const zIndices: {
+  readonly hide: -1;
+  readonly base: 0;
+  readonly docked: 10;
+  readonly dropdown: 1000;
+  readonly sticky: 1100;
+  readonly banner: 1200;
+  readonly overlay: 1300;
+  readonly modal: 1400;
+  readonly popover: 1500;
+  readonly skipNav: 1600;
+  readonly toast: 1700;
+  readonly tooltip: 1800;
+  readonly max: 2147483647;
+};
+export declare const shadows: {
+  readonly xs: {
+    readonly shadowColor: "#000000";
+    readonly shadowOffset: {
+      readonly width: 0;
+      readonly height: 1;
+    };
+    readonly shadowOpacity: 0.05;
+    readonly shadowRadius: 1;
+    readonly elevation: 1;
+  };
+  readonly sm: {
+    readonly shadowColor: "#000000";
+    readonly shadowOffset: {
+      readonly width: 0;
+      readonly height: 1;
+    };
+    readonly shadowOpacity: 0.1;
+    readonly shadowRadius: 2;
+    readonly elevation: 2;
+  };
+  readonly md: {
+    readonly shadowColor: "#000000";
+    readonly shadowOffset: {
+      readonly width: 0;
+      readonly height: 2;
+    };
+    readonly shadowOpacity: 0.12;
+    readonly shadowRadius: 6;
+    readonly elevation: 4;
+  };
+  readonly lg: {
+    readonly shadowColor: "#000000";
+    readonly shadowOffset: {
+      readonly width: 0;
+      readonly height: 4;
+    };
+    readonly shadowOpacity: 0.14;
+    readonly shadowRadius: 10;
+    readonly elevation: 8;
+  };
+  readonly xl: {
+    readonly shadowColor: "#000000";
+    readonly shadowOffset: {
+      readonly width: 0;
+      readonly height: 8;
+    };
+    readonly shadowOpacity: 0.16;
+    readonly shadowRadius: 16;
+    readonly elevation: 12;
+  };
+  readonly '2xl': {
+    readonly shadowColor: "#000000";
+    readonly shadowOffset: {
+      readonly width: 0;
+      readonly height: 12;
+    };
+    readonly shadowOpacity: 0.2;
+    readonly shadowRadius: 24;
+    readonly elevation: 16;
+  };
+};
+//#endregion