@mechane-ai/elements 0.10.0 → 0.12.0

package/dist/tokens.js

@@ -85,30 +85,30 @@ var e = {
 	identity24: "var(--x9u8ejr)",
 	__varGroupHash__: "x6mvf7n"
 }, a = {
-	identity1: "#e7938d",
-	identity2: "#e7a88d",
-	identity3: "#e78da7",
-	identity4: "#e78dc0",
-	identity5: "#e78ddf",
-	identity6: "#d28de7",
-	identity7: "#ba8de7",
-	identity8: "#a28de7",
-	identity9: "#8d8de7",
-	identity10: "#8da5e7",
-	identity11: "#8dbae7",
-	identity12: "#8dcfe7",
-	identity13: "#8de1e7",
-	identity14: "#8de7de",
-	identity15: "#8de7ce",
-	identity16: "#8de7bc",
-	identity17: "#8de7aa",
-	identity18: "#8de795",
-	identity19: "#9ee78d",
-	identity20: "#b9e78d",
-	identity21: "#d5e78d",
-	identity22: "#e7dc8d",
-	identity23: "#e7c68d",
-	identity24: "#e7b38d"
+	identity1: "#f07d75",
+	identity2: "#f09a75",
+	identity3: "#f07598",
+	identity4: "#f075bb",
+	identity5: "#f075e6",
+	identity6: "#d375f0",
+	identity7: "#b375f0",
+	identity8: "#9275f0",
+	identity9: "#7575f0",
+	identity10: "#7596f0",
+	identity11: "#75b3f0",
+	identity12: "#75cff0",
+	identity13: "#75e8f0",
+	identity14: "#75f0e3",
+	identity15: "#75f0cd",
+	identity16: "#75f0b5",
+	identity17: "#75f09c",
+	identity18: "#75f080",
+	identity19: "#8cf075",
+	identity20: "#b0f075",
+	identity21: "#d7f075",
+	identity22: "#f0e175",
+	identity23: "#f0c375",
+	identity24: "#f0a875"
 }, o = {
 	keyword: "var(--x1t6rq9)",
 	string: "var(--x1pa6z6o)",
@@ -155,8 +155,7 @@ var e = {
 	headingTracking: "var(--xgto76l)",
 	__varGroupHash__: "xledmcz"
 }, u = {
-	smHeight: "var(--x1hdxzrk)",
-	mdHeight: "var(--xymjgzc)",
+	height: "var(--x14tmdi9)",
 	coarseTarget: "var(--x6uufy4)",
 	iconSize: "var(--x1ud0cvw)",
 	paddingInline: "var(--xrzkwmd)",
@@ -166,32 +165,39 @@ var e = {
 	disabledOpacity: "var(--x9ngs59)",
 	__varGroupHash__: "x1sjug0q"
 }, d = {
+	inset: "var(--xnv5ly4)",
+	toolbarHeight: "var(--x1m0ogk9)",
+	sectionGap: "var(--xe6nmbs)",
+	__varGroupHash__: "x1vss23x"
+}, f = {
 	sm: "var(--x1asdyoo)",
 	md: "var(--xz1oyae)",
 	__varGroupHash__: "x1i152zt"
-}, f = {
+}, p = {
 	duration: "var(--xjjzqp4)",
 	easing: "var(--x5xz5r2)",
 	drawerDuration: "var(--xrmqybo)",
 	drawerEasing: "var(--xumjr7l)",
 	__varGroupHash__: "xtoz1ri"
-}, p = {
+}, m = {
 	popup: "var(--xfou7vv)",
+	selection: "var(--x1qr3jy8)",
 	__varGroupHash__: "x1e8hs47"
-}, m = { popup: "0 4px 16px #00000066" }, h = {
+}, h = { popup: "0 4px 16px #00000066" }, g = {
+	sticky: "1",
 	backdrop: "20",
 	dialog: "21",
 	popup: "30",
 	tooltip: "40",
 	skipLink: "50"
-}, g = {
+}, _ = {
 	rowHeight: 48,
 	headerHeight: 36
-}, _ = {
+}, v = {
 	coarsePointer: "@media (pointer: coarse)",
 	hoverPointer: "@media (hover: hover) and (pointer: fine)",
 	compactText: "@media (max-width:639px)",
 	compactTable: "@media (max-width:600px)",
 	reducedMotion: "@media (prefers-reduced-motion: reduce)"
 };
-export { i as avatarColors, n as chartColors, e as colors, _ as conditions, u as controls, a as darkAvatarColors, r as darkChartColors, t as darkColors, m as darkShadows, s as darkSyntaxColors, h as layers, f as motion, d as radii, p as shadows, c as spacing, o as syntaxColors, g as tableGeometry, l as typography };
+export { i as avatarColors, n as chartColors, e as colors, v as conditions, u as controls, a as darkAvatarColors, r as darkChartColors, t as darkColors, h as darkShadows, s as darkSyntaxColors, g as layers, p as motion, d as pageGeometry, f as radii, m as shadows, c as spacing, o as syntaxColors, _ as tableGeometry, l as typography };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mechane-ai/elements",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Elements by Mechane — React components for applications, AI interfaces, and analytical graphics",
   "license": "Apache-2.0",
   "repository": {

package/packages/foundations/src/tokens.stylex.ts

@@ -65,57 +65,57 @@ export const darkChartColors = stylex.defineConsts({
 });
 
 export const avatarColors = stylex.defineVars({
-  identity1: '#993029',
-  identity2: '#994a29',
-  identity3: '#992949',
-  identity4: '#992968',
-  identity5: '#992990',
-  identity6: '#7f2999',
-  identity7: '#612999',
-  identity8: '#432999',
-  identity9: '#292999',
-  identity10: '#294799',
-  identity11: '#296199',
-  identity12: '#277693',
-  identity13: '#22797f',
-  identity14: '#217b72',
-  identity15: '#217d63',
-  identity16: '#217d51',
-  identity17: '#227f3f',
-  identity18: '#227f2a',
-  identity19: '#327d21',
-  identity20: '#4c7b21',
-  identity21: '#64751f',
-  identity22: '#7b7021',
-  identity23: '#8d6725',
-  identity24: '#995829',
+  identity1: '#e3291c',
+  identity2: '#e1571c',
+  identity3: '#e31c54',
+  identity4: '#e31c8d',
+  identity5: '#e31cd2',
+  identity6: '#b51ce3',
+  identity7: '#801ce3',
+  identity8: '#4a1ce3',
+  identity9: '#1c1ce3',
+  identity10: '#1c51e3',
+  identity11: '#1c80e3',
+  identity12: '#178db8',
+  identity13: '#13919a',
+  identity14: '#129487',
+  identity15: '#139671',
+  identity16: '#139858',
+  identity17: '#13983d',
+  identity18: '#13981e',
+  identity19: '#2b9813',
+  identity20: '#519412',
+  identity21: '#748d11',
+  identity22: '#948412',
+  identity23: '#b17816',
+  identity24: '#d1661a',
 });
 
 export const darkAvatarColors = stylex.defineConsts({
-  identity1: '#e7938d',
-  identity2: '#e7a88d',
-  identity3: '#e78da7',
-  identity4: '#e78dc0',
-  identity5: '#e78ddf',
-  identity6: '#d28de7',
-  identity7: '#ba8de7',
-  identity8: '#a28de7',
-  identity9: '#8d8de7',
-  identity10: '#8da5e7',
-  identity11: '#8dbae7',
-  identity12: '#8dcfe7',
-  identity13: '#8de1e7',
-  identity14: '#8de7de',
-  identity15: '#8de7ce',
-  identity16: '#8de7bc',
-  identity17: '#8de7aa',
-  identity18: '#8de795',
-  identity19: '#9ee78d',
-  identity20: '#b9e78d',
-  identity21: '#d5e78d',
-  identity22: '#e7dc8d',
-  identity23: '#e7c68d',
-  identity24: '#e7b38d',
+  identity1: '#f07d75',
+  identity2: '#f09a75',
+  identity3: '#f07598',
+  identity4: '#f075bb',
+  identity5: '#f075e6',
+  identity6: '#d375f0',
+  identity7: '#b375f0',
+  identity8: '#9275f0',
+  identity9: '#7575f0',
+  identity10: '#7596f0',
+  identity11: '#75b3f0',
+  identity12: '#75cff0',
+  identity13: '#75e8f0',
+  identity14: '#75f0e3',
+  identity15: '#75f0cd',
+  identity16: '#75f0b5',
+  identity17: '#75f09c',
+  identity18: '#75f080',
+  identity19: '#8cf075',
+  identity20: '#b0f075',
+  identity21: '#d7f075',
+  identity22: '#f0e175',
+  identity23: '#f0c375',
+  identity24: '#f0a875',
 });
 
 export const syntaxColors = stylex.defineVars({
@@ -169,17 +169,18 @@ export const typography = stylex.defineVars({
 });
 
 export const controls = stylex.defineVars({
-  smHeight: '32px',
-  mdHeight: '36px',
+  height: '32px',
   coarseTarget: '44px',
   iconSize: '16px',
   paddingInline: '10px',
-  paddingBlock: '7px',
+  paddingBlock: '5px',
   gap: '6px',
   focusWidth: '2px',
   disabledOpacity: '0.45',
 });
 
+export const pageGeometry = stylex.defineVars({ inset: '16px', toolbarHeight: '48px', sectionGap: '32px' });
+
 export const radii = stylex.defineVars({ sm: '4px', md: '6px' });
 
 export const motion = stylex.defineVars({
@@ -189,11 +190,18 @@ export const motion = stylex.defineVars({
   drawerEasing: 'cubic-bezier(0.32, 0.72, 0, 1)',
 });
 
-export const shadows = stylex.defineVars({ popup: '0 4px 16px #00000014' });
+export const shadows = stylex.defineVars({ popup: '0 4px 16px #00000014', selection: 'inset 2px 0 currentColor' });
 
 export const darkShadows = stylex.defineConsts({ popup: '0 4px 16px #00000066' });
 
-export const layers = stylex.defineConsts({ backdrop: '20', dialog: '21', popup: '30', tooltip: '40', skipLink: '50' });
+export const layers = stylex.defineConsts({
+  sticky: '1',
+  backdrop: '20',
+  dialog: '21',
+  popup: '30',
+  tooltip: '40',
+  skipLink: '50',
+});
 
 export const tableGeometry = stylex.defineConsts({ rowHeight: 48, headerHeight: 36 });