@a-type/ui 6.0.12 → 6.0.14

package/dist/css/util.css

@@ -61,19 +61,19 @@
 	gap: 0;
 }
 .gap-xs {
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 }
 .gap-sm {
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 }
 .gap-md {
-	gap: var(--m-spacing-md);
+	gap: var(--m-space-md);
 }
 .gap-lg {
-	gap: var(--m-spacing-lg);
+	gap: var(--m-space-lg);
 }
 .gap-xl {
-	gap: var(--m-spacing-xl);
+	gap: var(--m-space-xl);
 }
 
 .items-start {
@@ -112,17 +112,17 @@
 	padding: 0;
 }
 .p-xs {
-	padding: var(--m-spacing-xs);
+	padding: var(--m-space-xs);
 }
 .p-sm {
-	padding: var(--m-spacing-sm);
+	padding: var(--m-space-sm);
 }
 .p-md {
-	padding: var(--m-spacing-md);
+	padding: var(--m-space-md);
 }
 .p-lg {
-	padding: var(--m-spacing-lg);
+	padding: var(--m-space-lg);
 }
 .p-xl {
-	padding: var(--m-spacing-xl);
+	padding: var(--m-space-xl);
 }

package/dist/keyboard.stories.js

@@ -22,7 +22,7 @@ export const Default = {
                                     flexDirection: 'column',
                                     alignItems: 'center',
                                     justifyContent: 'center',
-                                    padding: 'var(--m-spacing-lg)',
+                                    padding: 'var(--m-space-lg)',
                                 }, children: "Focus the inputs below to see how the virtual keyboard behavior works." }), _jsx(Input, { style: { width: '100%' } }), _jsx(TextArea, { style: { width: '100%' } })] }), _jsx(PageNowPlaying, { keepAboveKeyboard: true, children: _jsx(Input, { placeholder: "now playing" }) })] }) }));
     },
 };

package/dist/keyboard.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.stories.js","sourceRoot":"","sources":["../src/keyboard.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACN,KAAK,EACL,WAAW,EACX,cAAc,EACd,QAAQ,EACR,QAAQ,GACR,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC;AAEnF,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC7B,MAAM,EAAE,YAAY;KACpB;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,0BAA0B,CAAC,SAAS,CAAC,CAAC;QACtC,OAAO,CACN,KAAC,QAAQ,IAAC,EAAE,EAAC,MAAM,YAClB,MAAC,WAAW,eACX,eACC,KAAK,EAAE;4BACN,MAAM,EAAE,OAAO;4BACf,OAAO,EAAE,MAAM;4BACf,aAAa,EAAE,QAAQ;yBACvB,aAED,cACC,SAAS,EAAC,WAAW,EACrB,KAAK,EAAE;oCACN,OAAO,EAAE,MAAM;oCACf,aAAa,EAAE,QAAQ;oCACvB,UAAU,EAAE,QAAQ;oCACpB,cAAc,EAAE,QAAQ;oCACxB,OAAO,EAAE,qBAAqB;iCAC9B,uFAII,EACN,KAAC,KAAK,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,EACnC,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,IACjC,EACN,KAAC,cAAc,IAAC,iBAAiB,kBAChC,KAAC,KAAK,IAAC,WAAW,EAAC,aAAa,GAAG,GACnB,IACJ,GACJ,CACX,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"keyboard.stories.js","sourceRoot":"","sources":["../src/keyboard.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACN,KAAK,EACL,WAAW,EACX,cAAc,EACd,QAAQ,EACR,QAAQ,GACR,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC;AAEnF,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC7B,MAAM,EAAE,YAAY;KACpB;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,0BAA0B,CAAC,SAAS,CAAC,CAAC;QACtC,OAAO,CACN,KAAC,QAAQ,IAAC,EAAE,EAAC,MAAM,YAClB,MAAC,WAAW,eACX,eACC,KAAK,EAAE;4BACN,MAAM,EAAE,OAAO;4BACf,OAAO,EAAE,MAAM;4BACf,aAAa,EAAE,QAAQ;yBACvB,aAED,cACC,SAAS,EAAC,WAAW,EACrB,KAAK,EAAE;oCACN,OAAO,EAAE,MAAM;oCACf,aAAa,EAAE,QAAQ;oCACvB,UAAU,EAAE,QAAQ;oCACpB,cAAc,EAAE,QAAQ;oCACxB,OAAO,EAAE,mBAAmB;iCAC5B,uFAII,EACN,KAAC,KAAK,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,EACnC,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,IACjC,EACN,KAAC,cAAc,IAAC,iBAAiB,kBAChC,KAAC,KAAK,IAAC,WAAW,EAAC,aAAa,GAAG,GACnB,IACJ,GACJ,CACX,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/shadows.stories.js

@@ -15,7 +15,7 @@ export const Default = {
         return (_jsxs("div", { style: {
                 display: 'grid',
                 gridTemplateColumns: 'repeat(4, 1fr)',
-                gap: 'var(--m-spacing-xl)',
+                gap: 'var(--m-space-xl)',
             }, children: [_jsx(Box, { surface: true, border: true, p: true, elevated: "sm", children: "Small Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "md", children: "Medium Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "lg", children: "Large Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "xl", children: "Extra Large Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-sm", children: "Small Inset Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-md", children: "Medium Inset Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-lg", children: "Large Inset Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-xl", children: "Extra Large Inset Shadow" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "sm-up", children: "Small Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "md-up", children: "Medium Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "lg-up", children: "Large Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "xl-up", children: "Extra Large Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-sm-up", children: "Small Inset Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-md-up", children: "Medium Inset Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-lg-up", children: "Large Inset Shadow Up" }), _jsx(Box, { surface: true, border: true, p: true, elevated: "-xl-up", children: "Extra Large Inset Shadow Up" })] }));
     },
 };

package/dist/shadows.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadows.stories.js","sourceRoot":"","sources":["../src/shadows.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE;QACL,OAAO,EAAE,GAAG;KACZ;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACmC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,eACC,KAAK,EAAE;gBACN,OAAO,EAAE,MAAM;gBACf,mBAAmB,EAAE,gBAAgB;gBACrC,GAAG,EAAE,qBAAqB;aAC1B,aAED,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,6BAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,8BAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,6BAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,mCAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,mCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,oCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,mCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,yCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,gCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,iCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,gCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,sCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,sCAEjC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,uCAEjC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,sCAEjC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,4CAEjC,IACD,CACN,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"shadows.stories.js","sourceRoot":"","sources":["../src/shadows.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE;QACL,OAAO,EAAE,GAAG;KACZ;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACmC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,eACC,KAAK,EAAE;gBACN,OAAO,EAAE,MAAM;gBACf,mBAAmB,EAAE,gBAAgB;gBACrC,GAAG,EAAE,mBAAmB;aACxB,aAED,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,6BAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,8BAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,6BAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,IAAI,mCAE7B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,mCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,oCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,mCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,KAAK,yCAE9B,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,gCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,iCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,gCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,OAAO,sCAEhC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,sCAEjC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,uCAEjC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,sCAEjC,EACN,KAAC,GAAG,IAAC,OAAO,QAAC,MAAM,QAAC,CAAC,QAAC,QAAQ,EAAC,QAAQ,4CAEjC,IACD,CACN,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/theme.stories.module.css

@@ -1,7 +1,7 @@
 .grid {
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
-	gap: var(--m-spacing-lg);
+	gap: var(--m-space-lg);
 	width: 100%;
 	min-width: 0;
 	flex: 1 0 auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.0.12",
+  "version": "6.0.14",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@a-type/utils": "^1.1.9",
-    "@arbor-css/core": "^0.0.127",
-    "@arbor-css/postcss": "^0.0.127",
+    "@arbor-css/core": "^0.0.131",
+    "@arbor-css/postcss": "^0.0.131",
     "@base-ui/react": "^1.4.1",
     "@use-gesture/react": "^10.3.1",
     "browser-image-resizer": "^2.4.1",

package/src/arbor/arbor.ts

@@ -75,19 +75,108 @@ export function presetAtype<
 			roundToPixel: true,
 			...config?.typography,
 		},
-		spacing: {
+		space: {
 			baseSize: '8px',
 			roundToPixel: true,
-			...config?.spacing,
+			...config?.space,
 		},
 		shape: {
-			roundness: 1,
+			roundness: 1.5,
 			...config?.shape,
 		},
 		shadow: {
 			defaultColor: 'rgba(0, 0, 0, 0.05)',
 			...config?.shadow,
 		},
+		keyframes: {
+			fadeInUp: (css, $) => css`
+				from {
+					opacity: 0;
+					transform: translateY(${$.mode.space.sm});
+				}
+				to {
+					opacity: 1;
+					transform: translateY(0);
+				}
+			`,
+			fadeInLeft: (css, $) => css`
+				from {
+					opacity: 0;
+					transform: translateX(-${$.mode.space.sm});
+				}
+				to {
+					opacity: 1;
+					transform: translateX(0);
+				}
+			`,
+			fadeInRight: (css, $) => css`
+				from {
+					opacity: 0;
+					transform: translateX(${$.mode.space.sm});
+				}
+				to {
+					opacity: 1;
+					transform: translateX(0);
+				}
+			`,
+			fadeOutUp: (css, $) => css`
+				from {
+					opacity: 1;
+					transform: translateY(0);
+				}
+				to {
+					opacity: 0;
+					transform: translateY(-${$.mode.space.sm});
+				}
+			`,
+			fadeOutLeft: (css, $) => css`
+				from {
+					opacity: 1;
+					transform: translateX(0);
+				}
+				to {
+					opacity: 0;
+					transform: translateX(-${$.mode.space.sm});
+				}
+			`,
+			fadeOutRight: (css, $) => css`
+				from {
+					opacity: 1;
+					transform: translateX(0);
+				}
+				to {
+					opacity: 0;
+					transform: translateX(${$.mode.space.sm});
+				}
+			`,
+			fadeOutDown: (css, $) => css`
+				from {
+					opacity: 1;
+					transform: translateY(0);
+				}
+				to {
+					opacity: 0;
+					transform: translateY(${$.mode.space.sm});
+				}
+			`,
+			fadeOut: (css) => css`
+				from {
+					opacity: 1;
+				}
+				to {
+					opacity: 0;
+				}
+			`,
+			fadeIn: (css) => css`
+				from {
+					opacity: 0;
+				}
+				to {
+					opacity: 1;
+				}
+			`,
+			...config?.keyframes,
+		},
 	});
 
 	const preset = definePreset({
@@ -119,9 +208,9 @@ export function presetAtype<
 				},
 			},
 			control: {
-				roundness: config?.roundControls ? 1.5 : undefined,
+				roundness: config?.roundControls ? 2 : undefined,
 				padding: {
-					block: $.mode.spacing.sm,
+					block: $.mode.space.sm,
 				},
 			},
 			surface: {
@@ -310,7 +399,7 @@ export function presetAtype<
 	// density and size
 	preset.bundleMode('dense', {
 		global: {
-			spacing: {
+			space: {
 				density: 1.25,
 			},
 			typography: {
@@ -320,7 +409,7 @@ export function presetAtype<
 	});
 	preset.bundleMode('denser', {
 		global: {
-			spacing: {
+			space: {
 				density: 1.5,
 			},
 			typography: {
@@ -331,7 +420,7 @@ export function presetAtype<
 	});
 	preset.bundleMode('normal', {
 		global: {
-			spacing: {
+			space: {
 				density: 1,
 			},
 			typography: {
@@ -342,7 +431,7 @@ export function presetAtype<
 	});
 	preset.bundleMode('loose', {
 		global: {
-			spacing: {
+			space: {
 				density: 0.75,
 			},
 			typography: {
@@ -364,11 +453,20 @@ export function presetAtype<
 				size: 2,
 				fontSizeScaleBase: 2,
 			},
-			spacing: {
+			space: {
 				density: 0.5,
 			},
 		},
 	});
+	preset.bundleMode('bold', {
+		global: {
+			typography: {
+				minWeight: 300,
+				maxWeight: 800,
+				baseWeight: 500,
+			},
+		},
+	});
 
 	return preset;
 }

package/src/colors.module.css

@@ -31,10 +31,10 @@
 	@apply --mx-fg(var(--m-color-neutral));
 	@apply --mx-bg(var(--m-color-neutral-ink));
 	@apply --mx-bg-faded(50%);
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
-	font-weight: var(--m-text-ambient-weight);
-	padding: var(--m-spacing-xs);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
+	padding: var(--m-space-xs);
 	border-radius: var(--m-radius-sm);
 }
 

package/src/components/actions/ActionButton.module.css

@@ -2,5 +2,5 @@
 	font-weight: normal;
 }
 .collapse {
-	padding: var(--m-spacing-sm);
+	padding: var(--m-space-sm);
 }

package/src/components/box/Box.module.css

@@ -28,20 +28,20 @@
 			gap: 0;
 		}
 		&[data-gap='xs'] {
-			gap: var(--m-spacing-xs);
+			gap: var(--m-space-xs);
 		}
 		&[data-gap='sm'] {
-			gap: var(--m-spacing-sm);
+			gap: var(--m-space-sm);
 		}
 		&[data-gap='md'],
 		&[data-gap='true'] {
-			gap: var(--m-spacing-md);
+			gap: var(--m-space-md);
 		}
 		&[data-gap='lg'] {
-			gap: var(--m-spacing-lg);
+			gap: var(--m-space-lg);
 		}
 		&[data-gap='xl'] {
-			gap: var(--m-spacing-xl);
+			gap: var(--m-space-xl);
 		}
 
 		&[data-items='start'] {
@@ -79,20 +79,20 @@
 			padding: 0;
 		}
 		&[data-p='xs'] {
-			padding: var(--m-spacing-xs);
+			padding: var(--m-space-xs);
 		}
 		&[data-p='sm'] {
-			padding: var(--m-spacing-sm);
+			padding: var(--m-space-sm);
 		}
 		&[data-p='md'] {
-			padding: var(--m-spacing-md);
+			padding: var(--m-space-md);
 		}
 		&[data-p='lg'],
 		&[data-p='true'] {
-			padding: var(--m-spacing-lg);
+			padding: var(--m-space-lg);
 		}
 		&[data-p='xl'] {
-			padding: var(--m-spacing-xl);
+			padding: var(--m-space-xl);
 		}
 
 		&[data-rounded='none'] {

package/src/components/box/Box.stories.tsx

@@ -109,7 +109,7 @@ export const Surfaces: Story = {
 				style={{
 					display: 'grid',
 					gridTemplateColumns: 'repeat(2, 1fr)',
-					gap: 'var(--m-spacing-lg)',
+					gap: 'var(--m-space-lg)',
 				}}
 				{...args}
 			>

package/src/components/button/Button.module.css

@@ -7,7 +7,7 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 	align-self: center;
 
 	position: relative;
@@ -16,11 +16,6 @@
 
 	@apply --mx-action-secondary;
 
-	font-size: var(--m-text-secondary-size);
-	line-height: 1;
-	font-family: inherit;
-	font-weight: 500;
-
 	@apply --mx-shadow(var(--m-shadow-sm));
 	@apply --mx-ring;
 
@@ -38,13 +33,11 @@
 		--mx-ring-value: 0 0 0 0 transparent;
 		--mx-shadow-value: 0 0 0 0 transparent;
 
-		font-weight: 600;
-
 		&:hover,
 		&:focus {
 			--mx-bg-applied: inherit;
 			--mx-bg-ref: --fn-color-heavier(
-				color-mix(var(--mx-bg-applied), var(--m-color-main-light) 10%),
+				color-mix(var(--mx-bg-applied), var(--m-color-main-light) 20%),
 				1
 			);
 		}
@@ -60,10 +53,10 @@
 			[data-disable-icon-mode='true']
 		):not([data-size='wrapper']),
 	&[data-force-icon-mode='true']:not([data-size='wrapper']) {
-		padding: var(--m-spacing-md);
+		padding: var(--m-space-md);
 
 		&[data-size='small'] {
-			padding: var(--m-spacing-sm);
+			padding: var(--m-space-sm);
 		}
 
 		&:not([aria-pressed='true']) {
@@ -121,6 +114,6 @@
 		width: --fn-literal(15px);
 	}
 	&[data-open='false'] {
-		margin-left: calc(-1 * var(--m-spacing-sm));
+		margin-left: calc(-1 * var(--m-space-sm));
 	}
 }

package/src/components/button/Button.tsx

@@ -91,6 +91,7 @@ export function ButtonRoot({
 		'data-emphasis': emphasis,
 		className: clsx(
 			emphasis === 'unstyled' ? cls.unstyled : cls.root,
+			emphasis === 'ghost' && '@mode-bold',
 			size === 'small' ? '@mode-dense' : '',
 			color ? `@mode-${color}` : '',
 			className,

package/src/components/button/index.ts

@@ -1,3 +1,2 @@
 export * from './Button.js';
 export * from './ConfirmedButton.js';
-export * from './classes.js';

package/src/components/camera/Camera.module.css

@@ -20,10 +20,10 @@
 
 .shutterButton {
 	position: absolute;
-	bottom: var(--m-spacing-md);
+	bottom: var(--m-space-md);
 	left: 50%;
-	width: calc(48px / var(--m-global-spacing-density));
-	height: calc(48px / var(--m-global-spacing-density));
+	width: calc(48px / var(--m-global-space-density));
+	height: calc(48px / var(--m-global-space-density));
 	cursor: pointer;
 	transform: translateX(-50%);
 	opacity: 80%;
@@ -54,12 +54,12 @@
 
 .swapButton {
 	position: absolute;
-	bottom: var(--m-spacing-xs);
-	left: var(--m-spacing-xs);
+	bottom: var(--m-space-xs);
+	left: var(--m-space-xs);
 }
 
 .fullscreenButton {
 	position: absolute;
-	top: var(--m-spacing-xs);
-	right: var(--m-spacing-xs);
+	top: var(--m-space-xs);
+	right: var(--m-space-xs);
 }

package/src/components/card/Card.module.css

@@ -11,9 +11,9 @@
 	border-width: var(--m-lineWidth-sm);
 	border-radius: var(--m-surface-radius);
 
-	font-size: var(--m-text-secondary-size);
-	line-height: var(--m-text-secondary-lineHeight);
-	font-weight: var(--m-text-secondary-weight);
+	font-size: var(--m-prose-secondary-size);
+	line-height: var(--m-prose-secondary-lineHeight);
+	font-weight: var(--m-prose-secondary-weight);
 
 	padding: 0;
 
@@ -31,16 +31,16 @@
 	flex-direction: column;
 	flex-grow: 1;
 	align-items: start;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 
 	text-align: start;
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
-	font-weight: var(--m-text-ambient-weight);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
 
-	padding: var(--m-spacing-md);
-	padding-bottom: var(--m-spacing-xs);
-	gap: var(--m-spacing-sm);
+	padding: var(--m-space-md);
+	padding-bottom: var(--m-space-xs);
+	gap: var(--m-space-sm);
 	&[data-compact='true'] {
 		padding-bottom: 0;
 	}
@@ -81,14 +81,14 @@
 
 .title {
 	z-index: 1;
-	padding: var(--m-spacing-xs) var(--m-spacing-md);
+	padding: var(--m-space-xs) var(--m-space-md);
 
-	font-size: var(--m-text-primary-size);
-	line-height: var(--m-text-primary-lineHeight);
-	font-weight: var(--m-text-primary-weight);
+	font-size: var(--m-prose-primary-size);
+	line-height: var(--m-prose-primary-lineHeight);
+	font-weight: var(--m-prose-primary-weight);
 
 	[data-compact] & {
-		font-size: var(--m-text-ambient-size);
+		font-size: var(--m-prose-ambient-size);
 	}
 
 	text-overflow: ellipsis;
@@ -101,15 +101,15 @@
 .content {
 	z-index: 1;
 
-	padding: var(--m-spacing-sm) var(--m-spacing-md);
+	padding: var(--m-space-sm) var(--m-space-md);
 
-	font-size: var(--m-text-ambient-size);
+	font-size: var(--m-prose-ambient-size);
 	line-height: 1;
-	font-weight: var(--m-text-ambient-weight);
+	font-weight: var(--m-prose-ambient-weight);
 
 	[data-compact] & {
-		padding: 0 var(--m-spacing-xs);
-		margin: 0 var(--m-spacing-sm);
+		padding: 0 var(--m-space-xs);
+		margin: 0 var(--m-space-sm);
 	}
 
 	&[data-unstyled] {
@@ -139,13 +139,13 @@
 	display: flex;
 	flex-direction: row;
 	flex-shrink: 0;
-	padding: var(--m-spacing-md);
+	padding: var(--m-space-md);
 }
 
 .actions {
 	display: flex;
 	flex-direction: row;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 	align-items: center;
 
 	margin: auto auto auto --fn-literal(0px);
@@ -166,7 +166,7 @@
 	flex-direction: row;
 	align-items: center;
 
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 
 	@apply --mx-bg(--fn-color-faded(var(--m-surface-ambient-bg), 50%));
 	@apply --mx-borderColor(var(--m-surface-ambient-borderColor));

package/src/components/card/Card.stories.tsx

@@ -36,7 +36,7 @@ export const Default: Story = {
 				display: 'flex',
 				flexDirection: 'row',
 				alignItems: 'stretch',
-				gap: 'var(--m-spacing-md)',
+				gap: 'var(--m-space-md)',
 			}}
 		>
 			<CardRoot {...args} style={{ minHeight: '20vh' }}>
@@ -274,7 +274,7 @@ export const CardsInBox: Story = {
 					width: '100%',
 					display: 'flex',
 					flexDirection: 'row',
-					gap: 'var(--m-spacing-lg)',
+					gap: 'var(--m-space-lg)',
 				}}
 			>
 				<div style={{ flex: 1 }}>

package/src/components/chip/Chip.module.css

@@ -1,7 +1,7 @@
 .root {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 	white-space: nowrap;
 
 	@apply --mx-bg(var(--m-color-main-wash));
@@ -11,10 +11,10 @@
 	border-width: var(--m-lineWidth-sm);
 	border-radius: var(--m-action-radius);
 
-	font-size: var(--m-text-ambient-size);
+	font-size: var(--m-prose-ambient-size);
 	line-height: normal;
-	font-weight: var(--m-text-ambient-weight);
-	font-family: var(--m-text-ambient-font);
+	font-weight: var(--m-prose-ambient-weight);
+	font-family: var(--m-prose-ambient-font);
 
 	&:not(:is(button)) {
 		padding: var(--m-action-padding);