@a-type/ui 6.0.12 → 6.0.14

package/src/components/typography/typography.module.css

@@ -1,19 +1,19 @@
 .typography {
 	@apply --mx-fg(inherit);
-	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);
 
 	&[data-emphasis='primary'] {
-		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-emphasis='ambient'] {
-		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);
 	}
 
 	&[data-italic] {
@@ -26,10 +26,10 @@
 		text-decoration: line-through;
 	}
 	&[data-bold] {
-		font-weight: var(--m-typography-weight-bold);
+		font-weight: var(--m-text-weight-bold);
 	}
 	&[data-thin] {
-		font-weight: var(--m-typography-weight-thin);
+		font-weight: var(--m-text-weight-thin);
 	}
 	&[data-truncate] {
 		overflow: hidden;

package/src/components/viewport/Viewport.module.css

@@ -26,19 +26,19 @@
 	position: absolute;
 
 	&[data-position='top-left'] {
-		top: var(--m-spacing-sm);
-		left: var(--m-spacing-sm);
+		top: var(--m-space-sm);
+		left: var(--m-space-sm);
 	}
 	&[data-position='top-right'] {
-		top: var(--m-spacing-sm);
-		right: var(--m-spacing-sm);
+		top: var(--m-space-sm);
+		right: var(--m-space-sm);
 	}
 	&[data-position='bottom-left'] {
-		bottom: var(--m-spacing-sm);
-		left: var(--m-spacing-sm);
+		bottom: var(--m-space-sm);
+		left: var(--m-space-sm);
 	}
 	&[data-position='bottom-right'] {
-		bottom: var(--m-spacing-sm);
-		right: var(--m-spacing-sm);
+		bottom: var(--m-space-sm);
+		right: var(--m-space-sm);
 	}
 }

package/src/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/src/keyboard.stories.tsx

@@ -41,7 +41,7 @@ export const Default: Story = {
 								flexDirection: 'column',
 								alignItems: 'center',
 								justifyContent: 'center',
-								padding: 'var(--m-spacing-lg)',
+								padding: 'var(--m-space-lg)',
 							}}
 						>
 							Focus the inputs below to see how the virtual keyboard behavior

package/src/shadows.stories.tsx

@@ -22,7 +22,7 @@ export const Default: Story = {
 				style={{
 					display: 'grid',
 					gridTemplateColumns: 'repeat(4, 1fr)',
-					gap: 'var(--m-spacing-xl)',
+					gap: 'var(--m-space-xl)',
 				}}
 			>
 				<Box surface border p elevated="sm">

package/src/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/dist/components/button/classes.d.ts

@@ -1,7 +0,0 @@
-import { type ButtonProps } from './Button.jsx';
-export declare function getButtonClassName({ emphasis, size, toggleable, disableIconMode, }: {
-    emphasis?: ButtonProps['emphasis'];
-    size?: ButtonProps['size'];
-    toggleable?: boolean;
-    disableIconMode?: boolean;
-}): string;

package/dist/components/button/classes.js

@@ -1,24 +0,0 @@
-import clsx from 'clsx';
-export function getButtonClassName({ emphasis = 'default', size = 'default', toggleable, disableIconMode, }) {
-    if (emphasis === 'unstyled') {
-        return clsx('layer-components:(m-0 appearance-none p-0 bg-transparent border-none)', 'layer-components:(cursor-pointer)', 'layer-components:focus:outline-none');
-    }
-    return clsx('layer-components:(select-none fw-[bold] leading-[1] font-inherit)', 'layer-components:(b-fg b border-solid)', 'layer-components:(cursor-pointer)', 'layer-components:(flex flex-row items-center gap-sm)', 'layer-components:(relative overflow-visible whitespace-nowrap)', 'layer-components:(transition-all duration-200)', 'layer-components:(shadow-sm ring-bg)', 'layer-components:color-contrast', 'layer-components:text-secondary', 'layer-components:(px-action py-action rd-[9999px])', {
-        '@mode-dense': size === 'small',
-        '@mode-density-reset': size === 'default',
-        'layer-variants:(border-0 p-0 shadow-none)': size === 'wrapper',
-    }, emphasis === 'ghost' && 'layer-variants:(shadow-none border-transparent)', {
-        'layer-components:bg-main': emphasis === 'primary',
-        'layer-components:(color-main-ink bg-main-light bg-desaturate-2)': emphasis === 'light',
-        'layer-components:bg-neutral-paper layer-variants:focus-visible:bg-neutral-paper': emphasis === 'default',
-        'layer-components:(color-main-ink bg-transparent aria-[pressed]:bg-main-wash)': emphasis === 'ghost',
-    }, {
-        'layer-components:(min-h-[30px])': size === 'small',
-        'layer-components:[&[data-has-icon=true][data-has-label=false]]:(p-2.35 rd-lg text-ambient)': size === 'default' && !disableIconMode,
-        'layer-components:[&[data-has-icon=true][data-has-label=false]]:min-h-touch-small layer-components:[&[data-has-icon=true][data-has-label=false]]:-m-y-2xs layer-components:[&[data-has-icon=true][data-has-label=false]]:(p-sm rd-lg text-ambient)': size === 'small' && !disableIconMode,
-    }, !disableIconMode &&
-        'layer-components:[&[data-has-icon=true][data-has-label=false]:not([aria-pressed])]:(aspect-1 items-center justify-center)', 'layer-components:hover:(bg-main bg-lighten-2 ring-bg ring-[4px])', 'layer-components:active:(bg-darken-1 ring-bg ring-[8px])', 'focus-visible:(ring-neutral-ink ring-[4px] ring-offset)', 'layer-components:disabled:(cursor-default opacity-50 shadow-none ring-none)', 'layer-components:[&[data-disabled=true]]:(cursor-default opacity-50 shadow-none)', {
-        'layer-variants:[&[aria-pressed=false]]:[&:not(:hover)]:bg-transparent': toggleable,
-    }, 'self-center', `size-${size !== null && size !== void 0 ? size : 'default'}`);
-}
-//# sourceMappingURL=classes.js.map

package/dist/components/button/classes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"classes.js","sourceRoot":"","sources":["../../../src/components/button/classes.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,MAAM,UAAU,kBAAkB,CAAC,EAClC,QAAQ,GAAG,SAAS,EACpB,IAAI,GAAG,SAAS,EAChB,UAAU,EACV,eAAe,GAMf;IACA,IAAI,QAAQ,KAAK,UAAU,EAAE,CAAC;QAC7B,OAAO,IAAI,CACV,uEAAuE,EACvE,mCAAmC,EACnC,qCAAqC,CACrC,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CACV,mEAAmE,EACnE,wCAAwC,EACxC,mCAAmC,EACnC,sDAAsD,EACtD,gEAAgE,EAChE,gDAAgD,EAChD,sCAAsC,EACtC,iCAAiC,EACjC,iCAAiC,EACjC,oDAAoD,EAEpD;QACC,aAAa,EAAE,IAAI,KAAK,OAAO;QAC/B,qBAAqB,EAAE,IAAI,KAAK,SAAS;QACzC,2CAA2C,EAAE,IAAI,KAAK,SAAS;KAC/D,EAED,QAAQ,KAAK,OAAO,IAAI,iDAAiD,EAEzE;QACC,0BAA0B,EAAE,QAAQ,KAAK,SAAS;QAClD,iEAAiE,EAChE,QAAQ,KAAK,OAAO;QACrB,iFAAiF,EAChF,QAAQ,KAAK,SAAS;QACvB,8EAA8E,EAC7E,QAAQ,KAAK,OAAO;KACrB,EAED;QACC,iCAAiC,EAAE,IAAI,KAAK,OAAO;QACnD,4FAA4F,EAC3F,IAAI,KAAK,SAAS,IAAI,CAAC,eAAe;QACvC,mPAAmP,EAClP,IAAI,KAAK,OAAO,IAAI,CAAC,eAAe;KACrC,EACD,CAAC,eAAe;QACf,2HAA2H,EAE5H,kEAAkE,EAClE,0DAA0D,EAC1D,yDAAyD,EAEzD,6EAA6E,EAC7E,kFAAkF,EAElF;QACC,uEAAuE,EACtE,UAAU;KACX,EAED,aAAa,EAEb,QAAQ,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,EAAE,CAC3B,CAAC;AACH,CAAC"}

package/src/components/button/classes.tsx

@@ -1,79 +0,0 @@
-import clsx from 'clsx';
-import { type ButtonProps } from './Button.jsx';
-
-export function getButtonClassName({
-	emphasis = 'default',
-	size = 'default',
-	toggleable,
-	disableIconMode,
-}: {
-	emphasis?: ButtonProps['emphasis'];
-	size?: ButtonProps['size'];
-	toggleable?: boolean;
-	disableIconMode?: boolean;
-}) {
-	if (emphasis === 'unstyled') {
-		return clsx(
-			'layer-components:(m-0 appearance-none p-0 bg-transparent border-none)',
-			'layer-components:(cursor-pointer)',
-			'layer-components:focus:outline-none',
-		);
-	}
-
-	return clsx(
-		'layer-components:(select-none fw-[bold] leading-[1] font-inherit)',
-		'layer-components:(b-fg b border-solid)',
-		'layer-components:(cursor-pointer)',
-		'layer-components:(flex flex-row items-center gap-sm)',
-		'layer-components:(relative overflow-visible whitespace-nowrap)',
-		'layer-components:(transition-all duration-200)',
-		'layer-components:(shadow-sm ring-bg)',
-		'layer-components:color-contrast',
-		'layer-components:text-secondary',
-		'layer-components:(px-action py-action rd-[9999px])',
-
-		{
-			'@mode-dense': size === 'small',
-			'@mode-density-reset': size === 'default',
-			'layer-variants:(border-0 p-0 shadow-none)': size === 'wrapper',
-		},
-
-		emphasis === 'ghost' && 'layer-variants:(shadow-none border-transparent)',
-
-		{
-			'layer-components:bg-main': emphasis === 'primary',
-			'layer-components:(color-main-ink bg-main-light bg-desaturate-2)':
-				emphasis === 'light',
-			'layer-components:bg-neutral-paper layer-variants:focus-visible:bg-neutral-paper':
-				emphasis === 'default',
-			'layer-components:(color-main-ink bg-transparent aria-[pressed]:bg-main-wash)':
-				emphasis === 'ghost',
-		},
-
-		{
-			'layer-components:(min-h-[30px])': size === 'small',
-			'layer-components:[&[data-has-icon=true][data-has-label=false]]:(p-2.35 rd-lg text-ambient)':
-				size === 'default' && !disableIconMode,
-			'layer-components:[&[data-has-icon=true][data-has-label=false]]:min-h-touch-small layer-components:[&[data-has-icon=true][data-has-label=false]]:-m-y-2xs layer-components:[&[data-has-icon=true][data-has-label=false]]:(p-sm rd-lg text-ambient)':
-				size === 'small' && !disableIconMode,
-		},
-		!disableIconMode &&
-			'layer-components:[&[data-has-icon=true][data-has-label=false]:not([aria-pressed])]:(aspect-1 items-center justify-center)',
-
-		'layer-components:hover:(bg-main bg-lighten-2 ring-bg ring-[4px])',
-		'layer-components:active:(bg-darken-1 ring-bg ring-[8px])',
-		'focus-visible:(ring-neutral-ink ring-[4px] ring-offset)',
-
-		'layer-components:disabled:(cursor-default opacity-50 shadow-none ring-none)',
-		'layer-components:[&[data-disabled=true]]:(cursor-default opacity-50 shadow-none)',
-
-		{
-			'layer-variants:[&[aria-pressed=false]]:[&:not(:hover)]:bg-transparent':
-				toggleable,
-		},
-
-		'self-center',
-
-		`size-${size ?? 'default'}`,
-	);
-}