@a-type/ui 6.0.13 → 6.0.15

package/dist/components/toasts/toasts.module.css

@@ -4,8 +4,8 @@
 }
 
 .toast {
-	--gap: var(--m-spacing-sm);
-	--peek: var(--m-spacing-sm);
+	--gap: var(--m-space-sm);
+	--peek: var(--m-space-sm);
 	--scale: calc(max(0, 1 - var(--toast-index) * 0.1));
 	--height: var(--toast-frontmost-height, var(--toast-height));
 	--shrink: calc(1 - var(--scale));
@@ -17,7 +17,7 @@
 	/* basic positioning */
 	position: fixed;
 	left: auto;
-	top: var(--m-spacing-xs);
+	top: var(--m-space-xs);
 	z-index: calc(100000 - var(--toast-index));
 	margin-right: 0;
 	width: 100%;
@@ -27,7 +27,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 
 	/* styling happens in content element */
 
@@ -100,7 +100,7 @@
 	pointer-events: auto;
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 
 	&[data-behind]:not([data-expanded]) {
 		pointer-events: none;
@@ -115,10 +115,10 @@
 	@apply --mx-shadow(var(--m-shadow-md));
 	@apply --mx-surface-secondary;
 
-	padding-inline-start: var(--m-spacing-md);
-	padding-inline-end: var(--m-spacing-sm);
-	padding-block: var(--m-spacing-sm);
-	gap: var(--m-spacing-sm);
+	padding-inline-start: var(--m-space-md);
+	padding-inline-end: var(--m-space-sm);
+	padding-block: var(--m-space-sm);
+	gap: var(--m-space-sm);
 
 	[data-behind]:not([data-expanded]) & {
 		max-height: var(--height);
@@ -130,7 +130,7 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 	@apply --mx-fg(inherit);
 
 	transition: opacity var(--m-duration) var(--m-easing);
@@ -148,20 +148,20 @@
 .toastMainBodyContent {
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 	@apply --mx-fg(inherit);
 }
 
 .toastTitle {
 	@apply --mx-fg(inherit);
-	@apply --mx-text-secondary;
-	font-weight: var(--m-typography-weight-bold);
+	@apply --mx-prose-secondary;
+	font-weight: var(--m-text-weight-bold);
 	margin: 0;
 }
 
 .toastDescriptionRow {
 	display: flex;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 }
 
 .icon {
@@ -172,7 +172,7 @@
 .toastDescription {
 	margin: 0;
 	@apply --mx-fg(inherit);
-	@apply --mx-text-ambient;
+	@apply --mx-prose-ambient;
 }
 
 .toastClose {
@@ -187,11 +187,11 @@
 	margin-inline-start: auto;
 	display: flex;
 	align-items: center;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 
-	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);
 
 	transition: opacity var(--m-duration) var(--m-easing);
 

package/dist/components/toggleGroup/toggleGroup.module.css

@@ -1,7 +1,7 @@
 .root {
 	width: fit-content;
 	display: inline-flex;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 	border-radius: var(--m-radius-lg);
 
 	@apply --mx-bg(--fn-color-faded(var(--m-color-main-light), 20%));

package/dist/components/tooltip/Tooltip.module.css

@@ -6,7 +6,7 @@
 	padding: var(--m-surface-padding);
 	border-radius: var(--m-surface-radius);
 
-	font-size: var(--m-text-ambient-size);
+	font-size: var(--m-prose-ambient-size);
 
 	transition:
 		opacity 0.2s ease,

package/dist/components/typography/typography.d.ts

@@ -7,8 +7,9 @@ export interface TypographyProps extends useRender.ComponentProps<'span'> {
     bold?: boolean;
     thin?: boolean;
     truncate?: boolean;
+    dim?: boolean;
 }
-export declare function Text({ emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate, ...rest }: TypographyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function Text({ emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate, dim, ...rest }: TypographyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare const Heading: import("react").FunctionComponent<TypographyProps>;
 export declare const HeroText: import("react").FunctionComponent<TypographyProps>;
 export declare const P: (props: TypographyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/typography/typography.js

@@ -16,7 +16,7 @@ import { withClassName } from '../../hooks/withClassName.js';
 import { withProps } from '../../hooks/withProps.js';
 import cls from './typography.module.css';
 export function Text(_a) {
-    var { emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate } = _a, rest = __rest(_a, ["emphasis", "italic", "underline", "strikethrough", "render", "className", "bold", "thin", "truncate"]);
+    var { emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate, dim } = _a, rest = __rest(_a, ["emphasis", "italic", "underline", "strikethrough", "render", "className", "bold", "thin", "truncate", "dim"]);
     return useRender({
         render,
         defaultTagName: 'span',
@@ -29,6 +29,7 @@ export function Text(_a) {
             bold: bold ? true : undefined,
             thin: thin ? true : undefined,
             truncate: truncate ? true : undefined,
+            dim: dim ? true : undefined,
         },
     });
 }

package/dist/components/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAY1C,MAAM,UAAU,IAAI,CAAC,EAWH;QAXG,EACpB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,QAAQ,OAES,EADd,IAAI,cAVa,uGAWpB,CADO;IAEP,OAAO,SAAS,CAAC;QAChB,MAAM;QACN,cAAc,EAAE,MAAM;QACtB,KAAK,kCACD,IAAI,KACP,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,GAC5D;QACD,KAAK,EAAE;YACN,QAAQ;YACR,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACjC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACvC,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAC/C,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAC7B,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAC7B,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;SACrC;KACD,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;AAC5D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,aAAK,EAAE,CAAC,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,EAAE;IACvC,MAAM,EAAE,aAAK;IACb,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,IAAI;CACf,CAAC,CAAC"}
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAa1C,MAAM,UAAU,IAAI,CAAC,EAYH;QAZG,EACpB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,GAAG,OAEc,EADd,IAAI,cAXa,8GAYpB,CADO;IAEP,OAAO,SAAS,CAAC;QAChB,MAAM;QACN,cAAc,EAAE,MAAM;QACtB,KAAK,kCACD,IAAI,KACP,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,GAC5D;QACD,KAAK,EAAE;YACN,QAAQ;YACR,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACjC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACvC,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAC/C,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAC7B,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAC7B,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACrC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;SAC3B;KACD,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;AAC5D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,aAAK,EAAE,CAAC,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,EAAE;IACvC,MAAM,EAAE,aAAK;IACb,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,IAAI;CACf,CAAC,CAAC"}

package/dist/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;
@@ -37,6 +37,9 @@
 		white-space: nowrap;
 		max-width: 100%;
 	}
+	&[data-dim] {
+		@apply --mx-fg(var(--m-color-neutral-heavy));
+	}
 }
 
 @layer components {

package/dist/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);
 	}
 }