npm - @nldd/design-system - Versions diffs - 0.8.94 → 0.8.96 - Mend

@nldd/design-system 0.8.94 → 0.8.96

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (380) hide show

package/dist/components/content/tag/tag.styles.js CHANGED Viewed

@@ -9,17 +9,17 @@ export const tagStyles = css `
 	/* # Host */
 	:host {
-		--_corner-radius: var(--components-tag-md-corner-radius);
-		--_background-color: var(--semantics-categories-neutral-tinted-background-color);
-		--_min-height: var(--primitives-space-24);
-		--_inline-padding: var(--primitives-space-6);
-		--_gap: var(--primitives-space-3);
-		--_content-color: var(--semantics-categories-neutral-tinted-content-color);
-		--_border-color: var(--semantics-categories-neutral-tinted-highlight-border-color);
-		--_border-width: var(--primitives-border-width-thin);
-		--_font: var(--primitives-font-body-sm-medium-flat);
-		--_icon-size: var(--primitives-space-16);
-		--_icon-offset-correction: var(--primitives-space-1);
+		--_tag-corner-radius: var(--primitives-corner-radius-xs);
+		--_tag-background-color: var(--semantics-categories-neutral-tinted-background-color);
+		--_tag-min-height: var(--primitives-space-24);
+		--_tag-inline-padding: var(--primitives-space-6);
+		--_tag-gap: var(--primitives-space-3);
+		--_tag-content-color: var(--semantics-categories-neutral-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-neutral-tinted-highlight-border-color);
+		--_tag-border-width: var(--primitives-border-width-thin);
+		--_tag-font: var(--primitives-font-body-sm-medium-flat);
+		--_tag-icon-size: var(--primitives-space-16);
+		--_tag-icon-offset-correction: var(--primitives-space-1);
 		${inheritedTextReset}
 		display: inline-flex;
@@ -27,148 +27,148 @@ export const tagStyles = css `
 	}
 	:host([size="sm"]) {
-		--_corner-radius: var(--components-tag-sm-corner-radius);
-		--_min-height: var(--primitives-space-20);
-		--_inline-padding: var(--primitives-space-4);
-		--_gap: var(--primitives-space-2);
-		--_font: var(--primitives-font-body-xs-medium-flat);
-		--_icon-size: var(--primitives-space-14);
+		--_tag-corner-radius: var(--primitives-corner-radius-xxs);
+		--_tag-min-height: var(--primitives-space-20);
+		--_tag-inline-padding: var(--primitives-space-4);
+		--_tag-gap: var(--primitives-space-2);
+		--_tag-font: var(--primitives-font-body-xs-medium-flat);
+		--_tag-icon-size: var(--primitives-space-14);
 	}
 	/* ## Color */
 	:host([color="accent"]) {
-		--_background-color: var(--semantics-categories-accent-tinted-background-color);
-		--_content-color: var(--semantics-categories-accent-tinted-content-color);
-		--_border-color: var(--semantics-categories-accent-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-accent-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-accent-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-accent-tinted-highlight-border-color);
 	}
 	:host([color="success"]) {
-		--_background-color: var(--semantics-categories-success-tinted-background-color);
-		--_content-color: var(--semantics-categories-success-tinted-content-color);
-		--_border-color: var(--semantics-categories-success-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-success-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-success-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-success-tinted-highlight-border-color);
 	}
 	:host([color="warning"]) {
-		--_background-color: var(--semantics-categories-warning-tinted-background-color);
-		--_content-color: var(--semantics-categories-warning-tinted-content-color);
-		--_border-color: var(--semantics-categories-warning-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-warning-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-warning-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-warning-tinted-highlight-border-color);
 	}
 	:host([color="critical"]) {
-		--_background-color: var(--semantics-categories-critical-tinted-background-color);
-		--_content-color: var(--semantics-categories-critical-tinted-content-color);
-		--_border-color: var(--semantics-categories-critical-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-critical-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-critical-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-critical-tinted-highlight-border-color);
 	}
 	/* ### Rijkskleuren */
 	:host([color="lintblauw"]) {
-		--_background-color: var(--semantics-categories-lintblauw-tinted-background-color);
-		--_content-color: var(--semantics-categories-lintblauw-tinted-content-color);
-		--_border-color: var(--semantics-categories-lintblauw-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-lintblauw-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-lintblauw-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-lintblauw-tinted-highlight-border-color);
 	}
 	:host([color="donkerblauw"]) {
-		--_background-color: var(--semantics-categories-donkerblauw-tinted-background-color);
-		--_content-color: var(--semantics-categories-donkerblauw-tinted-content-color);
-		--_border-color: var(--semantics-categories-donkerblauw-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-donkerblauw-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-donkerblauw-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-donkerblauw-tinted-highlight-border-color);
 	}
 	:host([color="hemelblauw"]) {
-		--_background-color: var(--semantics-categories-hemelblauw-tinted-background-color);
-		--_content-color: var(--semantics-categories-hemelblauw-tinted-content-color);
-		--_border-color: var(--semantics-categories-hemelblauw-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-hemelblauw-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-hemelblauw-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-hemelblauw-tinted-highlight-border-color);
 	}
 	:host([color="lichtblauw"]) {
-		--_background-color: var(--semantics-categories-lichtblauw-tinted-background-color);
-		--_content-color: var(--semantics-categories-lichtblauw-tinted-content-color);
-		--_border-color: var(--semantics-categories-lichtblauw-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-lichtblauw-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-lichtblauw-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-lichtblauw-tinted-highlight-border-color);
 	}
 	:host([color="paars"]) {
-		--_background-color: var(--semantics-categories-paars-tinted-background-color);
-		--_content-color: var(--semantics-categories-paars-tinted-content-color);
-		--_border-color: var(--semantics-categories-paars-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-paars-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-paars-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-paars-tinted-highlight-border-color);
 	}
 	:host([color="violet"]) {
-		--_background-color: var(--semantics-categories-violet-tinted-background-color);
-		--_content-color: var(--semantics-categories-violet-tinted-content-color);
-		--_border-color: var(--semantics-categories-violet-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-violet-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-violet-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-violet-tinted-highlight-border-color);
 	}
 	:host([color="robijnrood"]) {
-		--_background-color: var(--semantics-categories-robijnrood-tinted-background-color);
-		--_content-color: var(--semantics-categories-robijnrood-tinted-content-color);
-		--_border-color: var(--semantics-categories-robijnrood-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-robijnrood-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-robijnrood-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-robijnrood-tinted-highlight-border-color);
 	}
 	:host([color="roze"]) {
-		--_background-color: var(--semantics-categories-roze-tinted-background-color);
-		--_content-color: var(--semantics-categories-roze-tinted-content-color);
-		--_border-color: var(--semantics-categories-roze-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-roze-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-roze-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-roze-tinted-highlight-border-color);
 	}
 	:host([color="rood"]) {
-		--_background-color: var(--semantics-categories-rood-tinted-background-color);
-		--_content-color: var(--semantics-categories-rood-tinted-content-color);
-		--_border-color: var(--semantics-categories-rood-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-rood-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-rood-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-rood-tinted-highlight-border-color);
 	}
 	:host([color="oranje"]) {
-		--_background-color: var(--semantics-categories-oranje-tinted-background-color);
-		--_content-color: var(--semantics-categories-oranje-tinted-content-color);
-		--_border-color: var(--semantics-categories-oranje-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-oranje-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-oranje-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-oranje-tinted-highlight-border-color);
 	}
 	:host([color="donkergeel"]) {
-		--_background-color: var(--semantics-categories-donkergeel-tinted-background-color);
-		--_content-color: var(--semantics-categories-donkergeel-tinted-content-color);
-		--_border-color: var(--semantics-categories-donkergeel-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-donkergeel-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-donkergeel-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-donkergeel-tinted-highlight-border-color);
 	}
 	:host([color="geel"]) {
-		--_background-color: var(--semantics-categories-geel-tinted-background-color);
-		--_content-color: var(--semantics-categories-geel-tinted-content-color);
-		--_border-color: var(--semantics-categories-geel-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-geel-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-geel-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-geel-tinted-highlight-border-color);
 	}
 	:host([color="donkerbruin"]) {
-		--_background-color: var(--semantics-categories-donkerbruin-tinted-background-color);
-		--_content-color: var(--semantics-categories-donkerbruin-tinted-content-color);
-		--_border-color: var(--semantics-categories-donkerbruin-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-donkerbruin-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-donkerbruin-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-donkerbruin-tinted-highlight-border-color);
 	}
 	:host([color="bruin"]) {
-		--_background-color: var(--semantics-categories-bruin-tinted-background-color);
-		--_content-color: var(--semantics-categories-bruin-tinted-content-color);
-		--_border-color: var(--semantics-categories-bruin-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-bruin-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-bruin-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-bruin-tinted-highlight-border-color);
 	}
 	:host([color="donkergroen"]) {
-		--_background-color: var(--semantics-categories-donkergroen-tinted-background-color);
-		--_content-color: var(--semantics-categories-donkergroen-tinted-content-color);
-		--_border-color: var(--semantics-categories-donkergroen-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-donkergroen-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-donkergroen-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-donkergroen-tinted-highlight-border-color);
 	}
 	:host([color="groen"]) {
-		--_background-color: var(--semantics-categories-groen-tinted-background-color);
-		--_content-color: var(--semantics-categories-groen-tinted-content-color);
-		--_border-color: var(--semantics-categories-groen-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-groen-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-groen-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-groen-tinted-highlight-border-color);
 	}
 	:host([color="mosgroen"]) {
-		--_background-color: var(--semantics-categories-mosgroen-tinted-background-color);
-		--_content-color: var(--semantics-categories-mosgroen-tinted-content-color);
-		--_border-color: var(--semantics-categories-mosgroen-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-mosgroen-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-mosgroen-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-mosgroen-tinted-highlight-border-color);
 	}
 	:host([color="mintgroen"]) {
-		--_background-color: var(--semantics-categories-mintgroen-tinted-background-color);
-		--_content-color: var(--semantics-categories-mintgroen-tinted-content-color);
-		--_border-color: var(--semantics-categories-mintgroen-tinted-highlight-border-color);
+		--_tag-background-color: var(--semantics-categories-mintgroen-tinted-background-color);
+		--_tag-content-color: var(--semantics-categories-mintgroen-tinted-content-color);
+		--_tag-border-color: var(--semantics-categories-mintgroen-tinted-highlight-border-color);
 	}
 	:host([hidden]) {
@@ -181,17 +181,17 @@ export const tagStyles = css `
 	.tag {
 		box-sizing: border-box;
 		display: inline-flex;
-		border-radius: var(--_corner-radius);
+		border-radius: var(--_tag-corner-radius);
 		/* Inset box-shadow rather than a border so the outline never adds to
 		   the tag's size or shifts the text. */
-		box-shadow: inset 0 0 0 var(--_border-width) var(--_border-color);
-		background-color: var(--_background-color);
-		min-height: var(--_min-height);
-		padding: 0 var(--_inline-padding);
-		gap: var(--_gap);
+		box-shadow: inset 0 0 0 var(--_tag-border-width) var(--_tag-border-color);
+		background-color: var(--_tag-background-color);
+		min-height: var(--_tag-min-height);
+		padding: 0 var(--_tag-inline-padding);
+		gap: var(--_tag-gap);
 		align-items: center;
-		color: var(--_content-color);
-		font: var(--_font);
+		color: var(--_tag-content-color);
+		font: var(--_tag-font);
 		white-space: nowrap;
 	}
@@ -208,15 +208,15 @@ export const tagStyles = css `
 	.tag__icon {
 		display: inline-flex;
-		margin-inline: calc((var(--_min-height) - var(--_icon-size)) / 2 - var(--_inline-padding));
-		width: var(--_icon-size);
-		height: var(--_icon-size);
+		margin-inline: calc((var(--_tag-min-height) - var(--_tag-icon-size)) / 2 - var(--_tag-inline-padding));
+		width: var(--_tag-icon-size);
+		height: var(--_tag-icon-size);
 		flex-shrink: 0;
 		align-items: center;
 	}
 	.tag__icon:has(+ .tag__text) {
-		margin-left: calc((var(--_min-height) - var(--_icon-size)) / 2 - var(--_inline-padding) + var(--_icon-offset-correction));
+		margin-left: calc((var(--_tag-min-height) - var(--_tag-icon-size)) / 2 - var(--_tag-inline-padding) + var(--_tag-icon-offset-correction));
 		margin-right: 0;
 	}

package/dist/components/content/text/text.styles.js CHANGED Viewed

@@ -5,18 +5,18 @@ export const textStyles = css `
 	/* # Host */
 	:host {
-		--_font-size: var(--primitives-font-size-100);
-		--_font-weight: var(--primitives-font-weight-body-regular);
-		--_line-height: var(--primitives-line-height-snug);
-		--_max-width: var(--semantics-text-max-width);
-		--_color: var(--context-content-color, var(--semantics-content-color));
+		--_text-font-size: var(--primitives-font-size-100);
+		--_text-font-weight: var(--primitives-font-weight-body-regular);
+		--_text-line-height: var(--primitives-line-height-snug);
+		--_text-max-width: var(--semantics-text-max-width);
+		--_text-color: var(--context-content-color, var(--semantics-content-color));
 		--_text-align: left;
 		display: block;
-		max-width: var(--_max-width);
-		color: var(--_color);
+		max-width: var(--_text-max-width);
+		color: var(--_text-color);
 		text-align: var(--_text-align);
-		font: var(--_font-weight) var(--_font-size) / var(--_line-height) var(--primitives-font-family-body);
+		font: var(--_text-font-weight) var(--_text-font-size) / var(--_text-line-height) var(--primitives-font-family-body);
 		text-wrap: pretty;
 	}
@@ -28,30 +28,30 @@ export const textStyles = css `
 	/* # Size */
 	:host([size="xxs"]) {
-		--_font-size: var(--primitives-font-size-70);
+		--_text-font-size: var(--primitives-font-size-70);
 	}
 	:host([size="xs"]) {
-		--_font-size: var(--primitives-font-size-80);
+		--_text-font-size: var(--primitives-font-size-80);
 	}
 	:host([size="sm"]) {
-		--_font-size: var(--primitives-font-size-90);
+		--_text-font-size: var(--primitives-font-size-90);
 	}
 	:host([size="lg"]) {
-		--_font-size: var(--primitives-font-size-200);
+		--_text-font-size: var(--primitives-font-size-200);
 	}
 	/* # Weight */
 	:host([weight="medium"]) {
-		--_font-weight: var(--primitives-font-weight-body-medium);
+		--_text-font-weight: var(--primitives-font-weight-body-medium);
 	}
 	:host([weight="bold"]) {
-		--_font-weight: var(--primitives-font-weight-body-bold);
+		--_text-font-weight: var(--primitives-font-weight-body-bold);
 	}
 	/* Not the browser's "bolder", which is relative: from medium it lands on 700
@@ -67,42 +67,42 @@ export const textStyles = css `
 	/* # Line height */
 	:host([line-height="flat"]) {
-		--_line-height: var(--primitives-line-height-flat);
+		--_text-line-height: var(--primitives-line-height-flat);
 	}
 	:host([line-height="tight"]) {
-		--_line-height: var(--primitives-line-height-tight);
+		--_text-line-height: var(--primitives-line-height-tight);
 	}
 	:host([line-height="loose"]) {
-		--_line-height: var(--primitives-line-height-loose);
+		--_text-line-height: var(--primitives-line-height-loose);
 	}
 	/* # Color */
 	:host([color="secondary"]) {
-		--_color: var(--context-content-secondary-color, var(--semantics-content-secondary-color));
+		--_text-color: var(--context-content-secondary-color, var(--semantics-content-secondary-color));
 	}
 	:host([color="accent"]) {
-		--_color: var(--semantics-content-accent-color);
+		--_text-color: var(--semantics-content-accent-color);
 	}
 	:host([color="success"]) {
-		--_color: var(--semantics-content-success-color);
+		--_text-color: var(--semantics-content-success-color);
 	}
 	:host([color="warning"]) {
-		--_color: var(--semantics-content-warning-color);
+		--_text-color: var(--semantics-content-warning-color);
 	}
 	:host([color="critical"]) {
-		--_color: var(--semantics-content-critical-color);
+		--_text-color: var(--semantics-content-critical-color);
 	}
 	:host([color="inherit"]) {
-		--_color: inherit;
+		--_text-color: inherit;
 	}

package/dist/components/content/title/title.styles.js CHANGED Viewed

@@ -15,27 +15,27 @@ export const titleStyles = css `
 	:host {
 		@media (max-width: ${smMax}) {
-			--_font: var(--primitives-font-display-3-sm);
+			--_title-font: var(--primitives-font-display-3-sm);
 		}
 		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_font: var(--primitives-font-display-3-md);
+			--_title-font: var(--primitives-font-display-3-md);
 		}
 		@media (min-width: ${lgMin}) {
-			--_font: var(--primitives-font-display-3-lg);
+			--_title-font: var(--primitives-font-display-3-lg);
 		}
 		@container layout-container (max-width: ${smMax}) {
-			--_font: var(--primitives-font-display-3-sm);
+			--_title-font: var(--primitives-font-display-3-sm);
 		}
 		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_font: var(--primitives-font-display-3-md);
+			--_title-font: var(--primitives-font-display-3-md);
 		}
 		@container layout-container (min-width: ${lgMin}) {
-			--_font: var(--primitives-font-display-3-lg);
+			--_title-font: var(--primitives-font-display-3-lg);
 		}
 		${inheritedTextReset}
@@ -44,131 +44,131 @@ export const titleStyles = css `
 	:host([size="1"]) {
 		@media (max-width: ${smMax}) {
-			--_font: var(--primitives-font-display-1-sm);
+			--_title-font: var(--primitives-font-display-1-sm);
 		}
 		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_font: var(--primitives-font-display-1-md);
+			--_title-font: var(--primitives-font-display-1-md);
 		}
 		@media (min-width: ${lgMin}) {
-			--_font: var(--primitives-font-display-1-lg);
+			--_title-font: var(--primitives-font-display-1-lg);
 		}
 		@container layout-container (max-width: ${smMax}) {
-			--_font: var(--primitives-font-display-1-sm);
+			--_title-font: var(--primitives-font-display-1-sm);
 		}
 		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_font: var(--primitives-font-display-1-md);
+			--_title-font: var(--primitives-font-display-1-md);
 		}
 		@container layout-container (min-width: ${lgMin}) {
-			--_font: var(--primitives-font-display-1-lg);
+			--_title-font: var(--primitives-font-display-1-lg);
 		}
 	}
 	:host([size="2"]) {
 		@media (max-width: ${smMax}) {
-			--_font: var(--primitives-font-display-2-sm);
+			--_title-font: var(--primitives-font-display-2-sm);
 		}
 		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_font: var(--primitives-font-display-2-md);
+			--_title-font: var(--primitives-font-display-2-md);
 		}
 		@media (min-width: ${lgMin}) {
-			--_font: var(--primitives-font-display-2-lg);
+			--_title-font: var(--primitives-font-display-2-lg);
 		}
 		@container layout-container (max-width: ${smMax}) {
-			--_font: var(--primitives-font-display-2-sm);
+			--_title-font: var(--primitives-font-display-2-sm);
 		}
 		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_font: var(--primitives-font-display-2-md);
+			--_title-font: var(--primitives-font-display-2-md);
 		}
 		@container layout-container (min-width: ${lgMin}) {
-			--_font: var(--primitives-font-display-2-lg);
+			--_title-font: var(--primitives-font-display-2-lg);
 		}
 	}
 	:host([size="4"]) {
 		@media (max-width: ${smMax}) {
-			--_font: var(--primitives-font-display-4-sm);
+			--_title-font: var(--primitives-font-display-4-sm);
 		}
 		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_font: var(--primitives-font-display-4-md);
+			--_title-font: var(--primitives-font-display-4-md);
 		}
 		@media (min-width: ${lgMin}) {
-			--_font: var(--primitives-font-display-4-lg);
+			--_title-font: var(--primitives-font-display-4-lg);
 		}
 		@container layout-container (max-width: ${smMax}) {
-			--_font: var(--primitives-font-display-4-sm);
+			--_title-font: var(--primitives-font-display-4-sm);
 		}
 		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_font: var(--primitives-font-display-4-md);
+			--_title-font: var(--primitives-font-display-4-md);
 		}
 		@container layout-container (min-width: ${lgMin}) {
-			--_font: var(--primitives-font-display-4-lg);
+			--_title-font: var(--primitives-font-display-4-lg);
 		}
 	}
 	:host([size="5"]) {
 		@media (max-width: ${smMax}) {
-			--_font: var(--primitives-font-display-5-sm);
+			--_title-font: var(--primitives-font-display-5-sm);
 		}
 		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_font: var(--primitives-font-display-5-md);
+			--_title-font: var(--primitives-font-display-5-md);
 		}
 		@media (min-width: ${lgMin}) {
-			--_font: var(--primitives-font-display-5-lg);
+			--_title-font: var(--primitives-font-display-5-lg);
 		}
 		@container layout-container (max-width: ${smMax}) {
-			--_font: var(--primitives-font-display-5-sm);
+			--_title-font: var(--primitives-font-display-5-sm);
 		}
 		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_font: var(--primitives-font-display-5-md);
+			--_title-font: var(--primitives-font-display-5-md);
 		}
 		@container layout-container (min-width: ${lgMin}) {
-			--_font: var(--primitives-font-display-5-lg);
+			--_title-font: var(--primitives-font-display-5-lg);
 		}
 	}
 	:host([size="6"]) {
 		@media (max-width: ${smMax}) {
-			--_font: var(--primitives-font-display-6-sm);
+			--_title-font: var(--primitives-font-display-6-sm);
 		}
 		@media (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_font: var(--primitives-font-display-6-md);
+			--_title-font: var(--primitives-font-display-6-md);
 		}
 		@media (min-width: ${lgMin}) {
-			--_font: var(--primitives-font-display-6-lg);
+			--_title-font: var(--primitives-font-display-6-lg);
 		}
 		@container layout-container (max-width: ${smMax}) {
-			--_font: var(--primitives-font-display-6-sm);
+			--_title-font: var(--primitives-font-display-6-sm);
 		}
 		@container layout-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_font: var(--primitives-font-display-6-md);
+			--_title-font: var(--primitives-font-display-6-md);
 		}
 		@container layout-container (min-width: ${lgMin}) {
-			--_font: var(--primitives-font-display-6-lg);
+			--_title-font: var(--primitives-font-display-6-lg);
 		}
 	}
@@ -221,7 +221,7 @@ export const titleStyles = css `
 		margin: 0;
 		max-width: 40ch;
 		color: var(--semantics-content-color);
-		font: var(--_font);
+		font: var(--_title-font);
 		overflow-wrap: anywhere;
 		text-wrap: balance;
 	}
@@ -232,7 +232,7 @@ export const titleStyles = css `
 		margin: 0 !important;
 		max-width: 40ch !important;
 		color: var(--semantics-content-color) !important;
-		font: var(--_font) !important;
+		font: var(--_title-font) !important;
 		overflow-wrap: anywhere !important;
 		text-wrap: balance !important;
 	}

package/dist/components/content/token/token.styles.js CHANGED Viewed

@@ -9,8 +9,8 @@ export const tokenStyles = css `
 	/* # Host */
 	:host {
-		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
-		--_focus-z-index: 1;
+		--_token-highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		--_token-focus-z-index: 1;
 		${inheritedTextReset}
 		display: inline-block;
@@ -33,7 +33,7 @@ export const tokenStyles = css `
 	/* z-index raises the ring above adjacent tokens so it isn't clipped. */
 	:host(:focus-visible) {
 		position: relative;
-		z-index: var(--_focus-z-index);
+		z-index: var(--_token-focus-z-index);
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
@@ -68,7 +68,7 @@ export const tokenStyles = css `
 		position: absolute;
 		inset: 0;
 		border-radius: inherit;
-		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_token-highlight-border-color);
 		pointer-events: none;
 	}