prime-ui-kit 0.0.1

package/src/styles/theme-light.css

@@ -0,0 +1,466 @@
+/* AUTO-GENERATED by scripts/build-tokens.ts */
+:root,
+:root[data-theme="light"],
+[data-theme="light"] {
+  --prime-sys-border-width-control: 1px;
+  --prime-sys-border-width-focusRing: 2px;
+  --prime-sys-color-action-errorBackground: var(--prime-ref-color-red-600);
+  --prime-sys-color-action-errorBackgroundHover: var(--prime-ref-color-red-700);
+  --prime-sys-color-action-errorForeground: var(--prime-ref-color-white);
+  --prime-sys-color-action-neutralBackground: var(--prime-ref-color-gray-50);
+  --prime-sys-color-action-neutralBackgroundHover: var(--prime-ref-color-gray-100);
+  --prime-sys-color-action-neutralForeground: var(--prime-ref-color-gray-600);
+  --prime-sys-color-action-primaryBackground: var(--prime-ref-color-gray-950);
+  --prime-sys-color-action-primaryBackgroundHover: var(--prime-ref-color-gray-800);
+  --prime-sys-color-action-primaryForeground: var(--prime-ref-color-white);
+  --prime-sys-color-action-primarySoftBackground: var(--prime-ref-color-gray-100);
+  --prime-sys-color-action-primarySoftForeground: var(--prime-ref-color-gray-950);
+  --prime-sys-color-badge-grayFilled-background: var(--prime-ref-color-gray-600);
+  --prime-sys-color-badge-pink-backgroundEmphasis: var(--prime-ref-color-pink-500);
+  --prime-sys-color-badge-pink-backgroundSoft: var(--prime-ref-color-pink-50);
+  --prime-sys-color-badge-pink-border: var(--prime-ref-color-pink-300);
+  --prime-sys-color-badge-pink-foregroundOnSoft: var(--prime-ref-color-pink-700);
+  --prime-sys-color-badge-teal-backgroundEmphasis: var(--prime-ref-color-teal-500);
+  --prime-sys-color-badge-teal-backgroundSoft: var(--prime-ref-color-teal-50);
+  --prime-sys-color-badge-teal-border: var(--prime-ref-color-teal-300);
+  --prime-sys-color-badge-teal-foregroundOnSoft: var(--prime-ref-color-teal-700);
+  --prime-sys-color-border-accent: var(--prime-ref-color-gray-400);
+  --prime-sys-color-border-danger: var(--prime-ref-color-red-400);
+  --prime-sys-color-border-disabled: var(--prime-ref-color-gray-100);
+  --prime-sys-color-border-emphasis: var(--prime-ref-color-gray-950);
+  --prime-sys-color-border-inverse: var(--prime-ref-color-white);
+  --prime-sys-color-border-muted: var(--prime-ref-color-gray-200);
+  --prime-sys-color-border-separator: var(--prime-ref-color-gray-300);
+  --prime-sys-color-border-strong: var(--prime-ref-color-gray-300);
+  --prime-sys-color-border-subtle: var(--prime-ref-color-gray-200);
+  --prime-sys-color-content-accent: var(--prime-ref-color-gray-800);
+  --prime-sys-color-content-danger: var(--prime-ref-color-red-800);
+  --prime-sys-color-content-disabled: var(--prime-ref-color-gray-400);
+  --prime-sys-color-content-inverse: var(--prime-ref-color-white);
+  --prime-sys-color-content-muted: var(--prime-ref-color-gray-500);
+  --prime-sys-color-content-primary: var(--prime-ref-color-gray-950);
+  --prime-sys-color-content-secondary: var(--prime-ref-color-gray-600);
+  --prime-sys-color-dataTable-dividerHorizontal: color-mix(in srgb, var(--prime-sys-color-border-subtle) 82%, transparent);
+  --prime-sys-color-dataTable-dividerVertical: color-mix(in srgb, var(--prime-sys-color-border-subtle) 72%, transparent);
+  --prime-sys-color-dataTable-headBackground: var(--prime-sys-color-surface-default);
+  --prime-sys-color-dataTable-rowBackground: var(--prime-sys-color-surface-elevated);
+  --prime-sys-color-field-bg: var(--prime-ref-color-gray-50);
+  --prime-sys-color-field-border: var(--prime-ref-color-gray-200);
+  --prime-sys-color-field-borderError: var(--prime-ref-color-red-500);
+  --prime-sys-color-field-borderFocus: var(--prime-ref-color-gray-800);
+  --prime-sys-color-field-borderHover: var(--prime-ref-color-gray-300);
+  --prime-sys-color-field-placeholder: var(--prime-ref-color-gray-400);
+  --prime-sys-color-field-text: var(--prime-ref-color-gray-950);
+  --prime-sys-color-focus-ring: var(--prime-ref-color-gray-950);
+  --prime-sys-color-status-away-background: var(--prime-ref-color-yellow-50);
+  --prime-sys-color-status-away-backgroundEmphasis: var(--prime-ref-color-yellow-600);
+  --prime-sys-color-status-away-border: var(--prime-ref-color-yellow-200);
+  --prime-sys-color-status-away-foreground: var(--prime-ref-color-yellow-900);
+  --prime-sys-color-status-error-background: var(--prime-ref-color-red-50);
+  --prime-sys-color-status-error-backgroundEmphasis: var(--prime-ref-color-red-600);
+  --prime-sys-color-status-error-border: var(--prime-ref-color-red-200);
+  --prime-sys-color-status-error-foreground: var(--prime-ref-color-red-900);
+  --prime-sys-color-status-feature-background: var(--prime-ref-color-purple-50);
+  --prime-sys-color-status-feature-backgroundEmphasis: var(--prime-ref-color-purple-600);
+  --prime-sys-color-status-feature-border: var(--prime-ref-color-purple-200);
+  --prime-sys-color-status-feature-foreground: var(--prime-ref-color-purple-900);
+  --prime-sys-color-status-information-background: var(--prime-ref-color-blue-50);
+  --prime-sys-color-status-information-backgroundEmphasis: var(--prime-ref-color-blue-600);
+  --prime-sys-color-status-information-border: var(--prime-ref-color-blue-200);
+  --prime-sys-color-status-information-foreground: var(--prime-ref-color-blue-900);
+  --prime-sys-color-status-success-background: var(--prime-ref-color-green-50);
+  --prime-sys-color-status-success-backgroundEmphasis: var(--prime-ref-color-green-600);
+  --prime-sys-color-status-success-border: var(--prime-ref-color-green-200);
+  --prime-sys-color-status-success-foreground: var(--prime-ref-color-green-900);
+  --prime-sys-color-status-verified-background: var(--prime-ref-color-sky-50);
+  --prime-sys-color-status-verified-backgroundEmphasis: var(--prime-ref-color-sky-600);
+  --prime-sys-color-status-verified-border: var(--prime-ref-color-sky-200);
+  --prime-sys-color-status-verified-foreground: var(--prime-ref-color-sky-900);
+  --prime-sys-color-status-warning-background: var(--prime-ref-color-orange-50);
+  --prime-sys-color-status-warning-backgroundEmphasis: var(--prime-ref-color-orange-600);
+  --prime-sys-color-status-warning-border: var(--prime-ref-color-orange-200);
+  --prime-sys-color-status-warning-foreground: var(--prime-ref-color-orange-900);
+  --prime-sys-color-surface-accentSoft: var(--prime-ref-color-gray-100);
+  --prime-sys-color-surface-dangerSoft: var(--prime-ref-color-red-50);
+  --prime-sys-color-surface-default: var(--prime-ref-color-gray-50);
+  --prime-sys-color-surface-elevated: var(--prime-ref-color-gray-0);
+  --prime-sys-color-surface-overlay: var(--prime-ref-color-overlay-scrimLight);
+  --prime-sys-color-surface-raised: var(--prime-ref-color-gray-0);
+  --prime-sys-color-tooltip-background: var(--prime-ref-color-gray-900);
+  --prime-sys-color-tooltip-border: var(--prime-ref-color-gray-700);
+  --prime-sys-color-tooltip-foreground: var(--prime-ref-color-white);
+  --prime-sys-elevation-shadow-buttonFocus: 0 0 0 2px rgba(15, 17, 21, 0.14);
+  --prime-sys-elevation-shadow-errorFocus: 0 0 0 2px rgba(220, 38, 38, 0.2);
+  --prime-sys-elevation-shadow-fancyButtonError: 0 1px 2px rgba(14, 18, 27, 0.24), 0 0 0 1px var(--prime-sys-color-action-errorBackground);
+  --prime-sys-elevation-shadow-fancyButtonNeutral: 0 1px 2px rgba(14, 18, 27, 0.24), 0 0 0 1px var(--prime-sys-color-content-primary);
+  --prime-sys-elevation-shadow-fancyButtonPrimary: 0 1px 2px rgba(14, 18, 27, 0.24), 0 0 0 1px var(--prime-sys-color-action-primaryBackground);
+  --prime-sys-elevation-shadow-modal: var(--prime-ref-shadow-3xl);
+  --prime-sys-elevation-shadow-primaryFocus: 0 0 0 2px rgba(15, 17, 21, 0.2);
+  --prime-sys-elevation-shadow-surface: var(--prime-ref-shadow-s);
+  --prime-sys-elevation-shadow-tooltip: 0 12px 28px rgba(15, 17, 21, 0.22), 0 4px 10px rgba(15, 17, 21, 0.16);
+  --prime-sys-elevation-zIndex-base: var(--prime-ref-zIndex-base);
+  --prime-sys-elevation-zIndex-drawer: var(--prime-ref-zIndex-drawer);
+  --prime-sys-elevation-zIndex-drawerNestedShell: var(--prime-ref-zIndex-drawerNestedShell);
+  --prime-sys-elevation-zIndex-dropdown: var(--prime-ref-zIndex-dropdown);
+  --prime-sys-elevation-zIndex-dropdownInDrawer: var(--prime-ref-zIndex-dropdownInDrawer);
+  --prime-sys-elevation-zIndex-dropdownInDrawerInModal: var(--prime-ref-zIndex-dropdownInDrawerInModal);
+  --prime-sys-elevation-zIndex-dropdownInModal: var(--prime-ref-zIndex-dropdownInModal);
+  --prime-sys-elevation-zIndex-modal: var(--prime-ref-zIndex-modal);
+  --prime-sys-elevation-zIndex-popover: var(--prime-ref-zIndex-popover);
+  --prime-sys-elevation-zIndex-popoverInDrawer: var(--prime-ref-zIndex-popoverInDrawer);
+  --prime-sys-elevation-zIndex-popoverInDrawerInModal: var(--prime-ref-zIndex-popoverInDrawerInModal);
+  --prime-sys-elevation-zIndex-popoverInModal: var(--prime-ref-zIndex-popoverInModal);
+  --prime-sys-elevation-zIndex-sticky: var(--prime-ref-zIndex-sticky);
+  --prime-sys-elevation-zIndex-toast: var(--prime-ref-zIndex-toast);
+  --prime-sys-elevation-zIndex-tooltip: var(--prime-ref-zIndex-tooltip);
+  --prime-sys-elevation-zIndex-tooltipInDrawer: var(--prime-ref-zIndex-tooltipInDrawer);
+  --prime-sys-elevation-zIndex-tooltipInDrawerInModal: var(--prime-ref-zIndex-tooltipInDrawerInModal);
+  --prime-sys-elevation-zIndex-tooltipInModal: var(--prime-ref-zIndex-tooltipInModal);
+  --prime-sys-motion-duration-fast: var(--prime-ref-motion-duration-fast);
+  --prime-sys-motion-duration-medium: var(--prime-ref-motion-duration-medium);
+  --prime-sys-motion-duration-slow: var(--prime-ref-motion-duration-slow);
+  --prime-sys-motion-easing-standard: var(--prime-ref-motion-easing-standard);
+  --prime-sys-motion-fast: var(--prime-ref-motion-duration-fast);
+  --prime-sys-motion-medium: var(--prime-ref-motion-duration-medium);
+  --prime-sys-motion-slow: var(--prime-ref-motion-duration-slow);
+  --prime-sys-motion-standard: var(--prime-ref-motion-easing-standard);
+  --prime-sys-shape-radius-4xl: var(--prime-ref-radius-4xl);
+  --prime-sys-shape-radius-l: var(--prime-ref-radius-l);
+  --prime-sys-shape-radius-m: var(--prime-ref-radius-m);
+  --prime-sys-shape-radius-round: var(--prime-ref-radius-round);
+  --prime-sys-shape-radius-s: var(--prime-ref-radius-s);
+  --prime-sys-shape-radius-xs: var(--prime-ref-radius-xs);
+  --prime-sys-size-avatar-2xl-radius: var(--prime-sys-shape-radius-round);
+  --prime-sys-size-avatar-2xl-size: var(--prime-ref-size-2xl);
+  --prime-sys-size-avatar-2xl-text: var(--prime-sys-typography-sizeScale-2xl);
+  --prime-sys-size-avatar-3xl-radius: var(--prime-sys-shape-radius-round);
+  --prime-sys-size-avatar-3xl-size: var(--prime-ref-size-3xl);
+  --prime-sys-size-avatar-3xl-text: var(--prime-sys-typography-sizeScale-3xl);
+  --prime-sys-size-avatar-4xl-radius: var(--prime-sys-shape-radius-round);
+  --prime-sys-size-avatar-4xl-size: var(--prime-ref-size-4xl);
+  --prime-sys-size-avatar-4xl-text: var(--prime-sys-typography-sizeScale-4xl);
+  --prime-sys-size-avatar-5xl-radius: var(--prime-sys-shape-radius-round);
+  --prime-sys-size-avatar-5xl-size: var(--prime-ref-size-5xl);
+  --prime-sys-size-avatar-5xl-text: var(--prime-sys-typography-sizeScale-5xl);
+  --prime-sys-size-avatar-6xl-radius: var(--prime-sys-shape-radius-round);
+  --prime-sys-size-avatar-6xl-size: var(--prime-ref-size-6xl);
+  --prime-sys-size-avatar-6xl-text: var(--prime-sys-typography-sizeScale-6xl);
+  --prime-sys-size-avatar-l-radius: var(--prime-sys-shape-radius-round);
+  --prime-sys-size-avatar-l-size: var(--prime-ref-size-l);
+  --prime-sys-size-avatar-l-text: var(--prime-sys-typography-control-s);
+  --prime-sys-size-avatar-m-radius: var(--prime-sys-shape-radius-round);
+  --prime-sys-size-avatar-m-size: var(--prime-ref-size-m);
+  --prime-sys-size-avatar-m-text: var(--prime-sys-typography-support-2xs);
+  --prime-sys-size-avatar-s-radius: var(--prime-sys-shape-radius-round);
+  --prime-sys-size-avatar-s-size: var(--prime-ref-size-s);
+  --prime-sys-size-avatar-s-text: var(--prime-sys-typography-support-2xs);
+  --prime-sys-size-avatar-xl-radius: var(--prime-sys-shape-radius-round);
+  --prime-sys-size-avatar-xl-size: var(--prime-ref-size-xl);
+  --prime-sys-size-avatar-xl-text: var(--prime-sys-typography-control-l);
+  --prime-sys-size-badge-l-dotSize: var(--prime-ref-spaces-layout-m);
+  --prime-sys-size-badge-l-gap: var(--prime-sys-size-control-m-gap);
+  --prime-sys-size-badge-l-iconSize: var(--prime-sys-size-control-m-icon);
+  --prime-sys-size-badge-l-paddingX: var(--prime-sys-size-control-m-buttonPaddingX);
+  --prime-sys-size-badge-l-paddingY: var(--prime-sys-size-control-m-inputPaddingY);
+  --prime-sys-size-badge-l-radius: var(--prime-sys-size-control-m-radius);
+  --prime-sys-size-badge-l-text: var(--prime-sys-size-control-m-text);
+  --prime-sys-size-badge-m-dotSize: var(--prime-ref-spaces-layout-s);
+  --prime-sys-size-badge-m-gap: var(--prime-sys-size-control-s-gap);
+  --prime-sys-size-badge-m-iconSize: var(--prime-sys-size-control-s-icon);
+  --prime-sys-size-badge-m-paddingX: var(--prime-sys-size-control-s-buttonPaddingX);
+  --prime-sys-size-badge-m-paddingY: var(--prime-sys-size-control-s-inputPaddingY);
+  --prime-sys-size-badge-m-radius: var(--prime-sys-size-control-s-radius);
+  --prime-sys-size-badge-m-text: var(--prime-sys-size-control-s-text);
+  --prime-sys-size-badge-s-dotSize: var(--prime-ref-spaces-layout-xs);
+  --prime-sys-size-badge-s-gap: var(--prime-sys-size-control-xs-gap);
+  --prime-sys-size-badge-s-iconSize: var(--prime-sys-size-control-xs-icon);
+  --prime-sys-size-badge-s-paddingX: var(--prime-sys-size-control-xs-buttonPaddingX);
+  --prime-sys-size-badge-s-paddingY: var(--prime-sys-size-control-xs-inputPaddingY);
+  --prime-sys-size-badge-s-radius: var(--prime-sys-size-control-xs-radius);
+  --prime-sys-size-badge-s-text: var(--prime-sys-size-control-xs-text);
+  --prime-sys-size-badge-xl-dotSize: var(--prime-ref-spaces-layout-l);
+  --prime-sys-size-badge-xl-gap: var(--prime-sys-size-control-l-gap);
+  --prime-sys-size-badge-xl-iconSize: var(--prime-sys-size-control-l-icon);
+  --prime-sys-size-badge-xl-paddingX: var(--prime-sys-size-control-l-buttonPaddingX);
+  --prime-sys-size-badge-xl-paddingY: var(--prime-sys-size-control-l-inputPaddingY);
+  --prime-sys-size-badge-xl-radius: var(--prime-sys-size-control-l-radius);
+  --prime-sys-size-badge-xl-text: var(--prime-sys-size-control-l-text);
+  --prime-sys-size-choice-l-control: var(--prime-ref-icon-l);
+  --prime-sys-size-choice-l-dot: var(--prime-ref-spaces-layout-s);
+  --prime-sys-size-choice-l-gap: var(--prime-sys-spacing-m);
+  --prime-sys-size-choice-l-text: var(--prime-sys-typography-control-m);
+  --prime-sys-size-choice-m-control: var(--prime-ref-icon-m);
+  --prime-sys-size-choice-m-dot: var(--prime-ref-spaces-layout-s);
+  --prime-sys-size-choice-m-gap: var(--prime-sys-spacing-s);
+  --prime-sys-size-choice-m-text: var(--prime-sys-typography-control-s);
+  --prime-sys-size-choice-s-control: var(--prime-ref-icon-s);
+  --prime-sys-size-choice-s-dot: var(--prime-ref-spaces-layout-xs);
+  --prime-sys-size-choice-s-gap: var(--prime-sys-spacing-s);
+  --prime-sys-size-choice-s-text: var(--prime-sys-typography-support-2xs);
+  --prime-sys-size-choice-xl-control: var(--prime-ref-icon-xl);
+  --prime-sys-size-choice-xl-dot: var(--prime-ref-spaces-layout-m);
+  --prime-sys-size-choice-xl-gap: var(--prime-sys-spacing-l);
+  --prime-sys-size-choice-xl-text: var(--prime-sys-typography-control-l);
+  --prime-sys-size-control-l-buttonPaddingX: var(--prime-ref-spaces-control-button-l);
+  --prime-sys-size-control-l-buttonPaddingY: var(--prime-ref-spaces-control-button-l);
+  --prime-sys-size-control-l-gap: var(--prime-ref-spaces-control-spacing-l);
+  --prime-sys-size-control-l-height: var(--prime-ref-size-l);
+  --prime-sys-size-control-l-icon: var(--prime-ref-icon-l);
+  --prime-sys-size-control-l-inputPaddingX: var(--prime-ref-spaces-control-spacing-l);
+  --prime-sys-size-control-l-inputPaddingY: var(--prime-sys-spacing-s);
+  --prime-sys-size-control-l-radius: var(--prime-ref-radius-l);
+  --prime-sys-size-control-l-supportText: var(--prime-sys-typography-support-xs);
+  --prime-sys-size-control-l-text: var(--prime-sys-typography-control-m);
+  --prime-sys-size-control-m-buttonPaddingX: var(--prime-ref-spaces-control-button-m);
+  --prime-sys-size-control-m-buttonPaddingY: var(--prime-ref-spaces-control-button-m);
+  --prime-sys-size-control-m-gap: var(--prime-ref-spaces-control-spacing-m);
+  --prime-sys-size-control-m-height: var(--prime-ref-size-m);
+  --prime-sys-size-control-m-icon: var(--prime-ref-icon-m);
+  --prime-sys-size-control-m-inputPaddingX: var(--prime-ref-spaces-control-spacing-m);
+  --prime-sys-size-control-m-inputPaddingY: var(--prime-sys-spacing-s);
+  --prime-sys-size-control-m-radius: var(--prime-ref-radius-m);
+  --prime-sys-size-control-m-supportText: var(--prime-sys-typography-support-2xs);
+  --prime-sys-size-control-m-text: var(--prime-sys-typography-control-s);
+  --prime-sys-size-control-s-buttonPaddingX: var(--prime-ref-spaces-control-button-s);
+  --prime-sys-size-control-s-buttonPaddingY: var(--prime-ref-spaces-control-button-s);
+  --prime-sys-size-control-s-gap: var(--prime-ref-spaces-control-spacing-s);
+  --prime-sys-size-control-s-height: var(--prime-ref-size-s);
+  --prime-sys-size-control-s-icon: var(--prime-ref-icon-s);
+  --prime-sys-size-control-s-inputPaddingX: var(--prime-ref-spaces-control-spacing-s);
+  --prime-sys-size-control-s-inputPaddingY: var(--prime-sys-spacing-xs);
+  --prime-sys-size-control-s-radius: var(--prime-ref-radius-s);
+  --prime-sys-size-control-s-supportText: var(--prime-sys-typography-support-2xs);
+  --prime-sys-size-control-s-text: var(--prime-sys-typography-support-2xs);
+  --prime-sys-size-control-xl-buttonPaddingX: var(--prime-ref-spaces-control-button-xl);
+  --prime-sys-size-control-xl-buttonPaddingY: var(--prime-ref-spaces-control-button-xl);
+  --prime-sys-size-control-xl-gap: var(--prime-ref-spaces-control-spacing-xl);
+  --prime-sys-size-control-xl-height: var(--prime-ref-size-xl);
+  --prime-sys-size-control-xl-icon: var(--prime-ref-icon-xl);
+  --prime-sys-size-control-xl-inputPaddingX: var(--prime-ref-spaces-control-spacing-xl);
+  --prime-sys-size-control-xl-inputPaddingY: var(--prime-sys-spacing-m);
+  --prime-sys-size-control-xl-radius: var(--prime-ref-radius-xl);
+  --prime-sys-size-control-xl-supportText: var(--prime-sys-typography-support-xs);
+  --prime-sys-size-control-xl-text: var(--prime-sys-typography-control-l);
+  --prime-sys-size-control-xs-buttonPaddingX: var(--prime-sys-spacing-s);
+  --prime-sys-size-control-xs-buttonPaddingY: var(--prime-sys-spacing-s);
+  --prime-sys-size-control-xs-gap: var(--prime-sys-spacing-xs);
+  --prime-sys-size-control-xs-height: var(--prime-ref-size-xs);
+  --prime-sys-size-control-xs-icon: var(--prime-ref-icon-xs);
+  --prime-sys-size-control-xs-inputPaddingX: var(--prime-sys-spacing-xs);
+  --prime-sys-size-control-xs-inputPaddingY: var(--prime-sys-spacing-xs);
+  --prime-sys-size-control-xs-radius: var(--prime-ref-radius-xs);
+  --prime-sys-size-control-xs-supportText: var(--prime-sys-typography-support-3xs);
+  --prime-sys-size-control-xs-text: var(--prime-sys-typography-support-3xs);
+  --prime-sys-size-drawer-l-footerGap: var(--prime-sys-spacing-x3);
+  --prime-sys-size-drawer-l-headerGap: var(--prime-sys-spacing-x3);
+  --prime-sys-size-drawer-l-paddingX: var(--prime-sys-spacing-x6);
+  --prime-sys-size-drawer-l-paddingY: var(--prime-sys-spacing-x6);
+  --prime-sys-size-drawer-l-titleGap: var(--prime-sys-size-control-l-gap);
+  --prime-sys-size-drawer-l-titleText: var(--prime-sys-size-control-l-text);
+  --prime-sys-size-drawer-m-footerGap: var(--prime-sys-spacing-x3);
+  --prime-sys-size-drawer-m-headerGap: var(--prime-sys-spacing-x3);
+  --prime-sys-size-drawer-m-paddingX: var(--prime-sys-spacing-x5);
+  --prime-sys-size-drawer-m-paddingY: var(--prime-sys-spacing-x5);
+  --prime-sys-size-drawer-m-titleGap: var(--prime-sys-size-control-m-gap);
+  --prime-sys-size-drawer-m-titleText: var(--prime-sys-size-control-m-text);
+  --prime-sys-size-drawer-s-footerGap: var(--prime-sys-spacing-x2);
+  --prime-sys-size-drawer-s-headerGap: var(--prime-sys-spacing-x2);
+  --prime-sys-size-drawer-s-paddingX: var(--prime-sys-spacing-x3);
+  --prime-sys-size-drawer-s-paddingY: var(--prime-sys-spacing-x3);
+  --prime-sys-size-drawer-s-titleGap: var(--prime-sys-size-control-s-gap);
+  --prime-sys-size-drawer-s-titleText: var(--prime-sys-size-control-s-text);
+  --prime-sys-size-drawer-xl-footerGap: var(--prime-sys-spacing-x4);
+  --prime-sys-size-drawer-xl-headerGap: var(--prime-sys-spacing-x4);
+  --prime-sys-size-drawer-xl-paddingX: var(--prime-sys-spacing-x8);
+  --prime-sys-size-drawer-xl-paddingY: var(--prime-sys-spacing-x8);
+  --prime-sys-size-drawer-xl-titleGap: var(--prime-sys-size-control-xl-gap);
+  --prime-sys-size-drawer-xl-titleText: var(--prime-sys-size-control-xl-text);
+  --prime-sys-size-kbd-height: var(--prime-sys-size-control-xs-height);
+  --prime-sys-size-kbd-paddingX: var(--prime-sys-size-control-xs-inputPaddingX);
+  --prime-sys-size-kbd-paddingY: var(--prime-sys-size-control-xs-inputPaddingY);
+  --prime-sys-size-kbd-radius: var(--prime-sys-size-control-xs-radius);
+  --prime-sys-size-kbd-text: var(--prime-sys-size-control-xs-text);
+  --prime-sys-size-modal-bodyGap: var(--prime-sys-spacing-l);
+  --prime-sys-size-modal-contentGap: var(--prime-sys-spacing-l);
+  --prime-sys-size-modal-footerGap: var(--prime-sys-spacing-m);
+  --prime-sys-size-modal-footerPaddingTop: var(--prime-sys-spacing-l);
+  --prime-sys-size-modal-headerGap: var(--prime-sys-spacing-m);
+  --prime-sys-size-modal-headerIconSize: var(--prime-ref-size-m);
+  --prime-sys-size-modal-headerPaddingBottom: var(--prime-sys-spacing-l);
+  --prime-sys-size-modal-headTextPaddingRight: var(--prime-sys-spacing-3xl);
+  --prime-sys-size-modal-maxWidth: 30rem;
+  --prime-sys-size-modal-overlayPaddingX: var(--prime-sys-spacing-l);
+  --prime-sys-size-modal-overlayPaddingY: var(--prime-sys-spacing-l);
+  --prime-sys-size-modal-paddingX: var(--prime-sys-spacing-xl);
+  --prime-sys-size-modal-paddingY: var(--prime-sys-spacing-xl);
+  --prime-sys-size-modal-radius: var(--prime-sys-shape-radius-4xl);
+  --prime-sys-size-modal-titleGap: var(--prime-sys-spacing-s);
+  --prime-sys-size-switch-l-thumb: var(--prime-ref-icon-m);
+  --prime-sys-size-switch-l-trackHeight: 1.25rem;
+  --prime-sys-size-switch-l-trackWidth: 2.25rem;
+  --prime-sys-size-switch-m-thumb: var(--prime-ref-icon-s);
+  --prime-sys-size-switch-m-trackHeight: 1.25rem;
+  --prime-sys-size-switch-m-trackWidth: 2rem;
+  --prime-sys-size-switch-s-thumb: var(--prime-ref-icon-xs);
+  --prime-sys-size-switch-s-trackHeight: 1rem;
+  --prime-sys-size-switch-s-trackWidth: 1.75rem;
+  --prime-sys-size-switch-xl-thumb: var(--prime-ref-icon-l);
+  --prime-sys-size-switch-xl-trackHeight: 1.5rem;
+  --prime-sys-size-switch-xl-trackWidth: 2.5rem;
+  --prime-sys-size-tag-l-gap: var(--prime-sys-size-control-m-gap);
+  --prime-sys-size-tag-l-iconSize: var(--prime-sys-size-control-m-icon);
+  --prime-sys-size-tag-l-paddingX: var(--prime-sys-size-control-m-buttonPaddingX);
+  --prime-sys-size-tag-l-paddingY: var(--prime-sys-size-control-m-inputPaddingY);
+  --prime-sys-size-tag-l-radius: var(--prime-sys-size-control-m-radius);
+  --prime-sys-size-tag-l-text: var(--prime-sys-size-control-m-text);
+  --prime-sys-size-tag-m-gap: var(--prime-sys-size-control-s-gap);
+  --prime-sys-size-tag-m-iconSize: var(--prime-sys-size-control-s-icon);
+  --prime-sys-size-tag-m-paddingX: var(--prime-sys-size-control-s-buttonPaddingX);
+  --prime-sys-size-tag-m-paddingY: var(--prime-sys-size-control-s-inputPaddingY);
+  --prime-sys-size-tag-m-radius: var(--prime-sys-size-control-s-radius);
+  --prime-sys-size-tag-m-text: var(--prime-sys-size-control-s-text);
+  --prime-sys-size-tag-s-gap: var(--prime-sys-size-control-xs-gap);
+  --prime-sys-size-tag-s-iconSize: var(--prime-sys-size-control-xs-icon);
+  --prime-sys-size-tag-s-paddingX: var(--prime-sys-size-control-xs-buttonPaddingX);
+  --prime-sys-size-tag-s-paddingY: var(--prime-sys-size-control-xs-inputPaddingY);
+  --prime-sys-size-tag-s-radius: var(--prime-sys-size-control-xs-radius);
+  --prime-sys-size-tag-s-text: var(--prime-sys-size-control-xs-text);
+  --prime-sys-size-tag-xl-gap: var(--prime-sys-size-control-l-gap);
+  --prime-sys-size-tag-xl-iconSize: var(--prime-sys-size-control-l-icon);
+  --prime-sys-size-tag-xl-paddingX: var(--prime-sys-size-control-l-buttonPaddingX);
+  --prime-sys-size-tag-xl-paddingY: var(--prime-sys-size-control-l-inputPaddingY);
+  --prime-sys-size-tag-xl-radius: var(--prime-sys-size-control-l-radius);
+  --prime-sys-size-tag-xl-text: var(--prime-sys-size-control-l-text);
+  --prime-sys-size-textarea-l-minHeight: 6rem;
+  --prime-sys-size-textarea-l-paddingX: var(--prime-sys-spacing-l);
+  --prime-sys-size-textarea-l-radius: var(--prime-ref-radius-l);
+  --prime-sys-size-textarea-m-minHeight: 5rem;
+  --prime-sys-size-textarea-m-paddingX: var(--prime-sys-spacing-m);
+  --prime-sys-size-textarea-m-radius: var(--prime-ref-radius-m);
+  --prime-sys-size-textarea-s-minHeight: 4rem;
+  --prime-sys-size-textarea-s-paddingX: var(--prime-sys-spacing-s);
+  --prime-sys-size-textarea-s-radius: var(--prime-ref-radius-s);
+  --prime-sys-size-textarea-xl-minHeight: 8rem;
+  --prime-sys-size-textarea-xl-paddingX: var(--prime-sys-spacing-xl);
+  --prime-sys-size-textarea-xl-radius: var(--prime-ref-radius-xl);
+  --prime-sys-size-tooltip-l-paddingX: var(--prime-sys-size-control-m-inputPaddingX);
+  --prime-sys-size-tooltip-l-paddingY: var(--prime-sys-size-control-m-inputPaddingY);
+  --prime-sys-size-tooltip-l-radius: var(--prime-sys-size-control-m-radius);
+  --prime-sys-size-tooltip-l-text: var(--prime-sys-size-control-m-supportText);
+  --prime-sys-size-tooltip-m-paddingX: var(--prime-sys-size-control-s-inputPaddingX);
+  --prime-sys-size-tooltip-m-paddingY: var(--prime-sys-size-control-s-inputPaddingY);
+  --prime-sys-size-tooltip-m-radius: var(--prime-sys-size-control-s-radius);
+  --prime-sys-size-tooltip-m-text: var(--prime-sys-size-control-s-supportText);
+  --prime-sys-size-tooltip-s-paddingX: var(--prime-sys-size-control-xs-inputPaddingX);
+  --prime-sys-size-tooltip-s-paddingY: var(--prime-sys-size-control-xs-inputPaddingY);
+  --prime-sys-size-tooltip-s-radius: var(--prime-sys-size-control-xs-radius);
+  --prime-sys-size-tooltip-s-text: var(--prime-sys-size-control-xs-supportText);
+  --prime-sys-size-tooltip-xl-paddingX: var(--prime-sys-size-control-l-inputPaddingX);
+  --prime-sys-size-tooltip-xl-paddingY: var(--prime-sys-size-control-l-inputPaddingY);
+  --prime-sys-size-tooltip-xl-radius: var(--prime-sys-size-control-l-radius);
+  --prime-sys-size-tooltip-xl-text: var(--prime-sys-size-control-l-supportText);
+  --prime-sys-spacing-2xl: var(--prime-ref-spaces-layout-2xl);
+  --prime-sys-spacing-3xl: var(--prime-ref-spaces-layout-3xl);
+  --prime-sys-spacing-4xl: var(--prime-ref-spaces-layout-4xl);
+  --prime-sys-spacing-5xl: var(--prime-ref-spaces-layout-5xl);
+  --prime-sys-spacing-6xl: var(--prime-ref-spaces-layout-6xl);
+  --prime-sys-spacing-l: var(--prime-ref-spaces-layout-l);
+  --prime-sys-spacing-m: var(--prime-ref-spaces-layout-m);
+  --prime-sys-spacing-s: var(--prime-ref-spaces-layout-s);
+  --prime-sys-spacing-x0: var(--prime-ref-spaces-layout-0);
+  --prime-sys-spacing-x1: var(--prime-ref-spaces-layout-xs);
+  --prime-sys-spacing-x10: var(--prime-ref-spaces-layout-4xl);
+  --prime-sys-spacing-x12: var(--prime-ref-spaces-layout-5xl);
+  --prime-sys-spacing-x14: var(--prime-ref-spaces-layout-6xl);
+  --prime-sys-spacing-x2: var(--prime-ref-spaces-layout-s);
+  --prime-sys-spacing-x3: var(--prime-ref-spaces-layout-m);
+  --prime-sys-spacing-x4: var(--prime-ref-spaces-layout-l);
+  --prime-sys-spacing-x5: var(--prime-ref-spaces-layout-xl);
+  --prime-sys-spacing-x6: var(--prime-ref-spaces-layout-2xl);
+  --prime-sys-spacing-x8: var(--prime-ref-spaces-layout-3xl);
+  --prime-sys-spacing-xl: var(--prime-ref-spaces-layout-xl);
+  --prime-sys-spacing-xs: var(--prime-ref-spaces-layout-xs);
+  --prime-sys-typography-body-letterSpacing: var(--prime-ref-font-letterSpacing-normal);
+  --prime-sys-typography-body-lineHeight: var(--prime-sys-typography-lineHeight-normal);
+  --prime-sys-typography-body-size: var(--prime-ref-font-size-s);
+  --prime-sys-typography-control-l: var(--prime-ref-font-size-m);
+  --prime-sys-typography-control-m: var(--prime-ref-font-size-s);
+  --prime-sys-typography-control-s: var(--prime-ref-font-size-xs);
+  --prime-sys-typography-family-base: var(--prime-ref-font-family-base);
+  --prime-sys-typography-lineHeight-normal: 1.5;
+  --prime-sys-typography-lineHeight-relaxed: 1.65;
+  --prime-sys-typography-lineHeight-tight: 1.25;
+  --prime-sys-typography-lineHeightScale-2xl: var(--prime-ref-font-lineHeight-2xl);
+  --prime-sys-typography-lineHeightScale-2xs: var(--prime-ref-font-lineHeight-2xs);
+  --prime-sys-typography-lineHeightScale-3xl: var(--prime-ref-font-lineHeight-3xl);
+  --prime-sys-typography-lineHeightScale-3xs: var(--prime-ref-font-lineHeight-3xs);
+  --prime-sys-typography-lineHeightScale-4xl: var(--prime-ref-font-lineHeight-4xl);
+  --prime-sys-typography-lineHeightScale-5xl: var(--prime-ref-font-lineHeight-5xl);
+  --prime-sys-typography-lineHeightScale-6xl: var(--prime-ref-font-lineHeight-6xl);
+  --prime-sys-typography-lineHeightScale-7xl: var(--prime-ref-font-lineHeight-7xl);
+  --prime-sys-typography-lineHeightScale-8xl: var(--prime-ref-font-lineHeight-8xl);
+  --prime-sys-typography-lineHeightScale-9xl: var(--prime-ref-font-lineHeight-9xl);
+  --prime-sys-typography-lineHeightScale-l: var(--prime-ref-font-lineHeight-l);
+  --prime-sys-typography-lineHeightScale-labelMicro: var(--prime-ref-font-lineHeight-labelMicro);
+  --prime-sys-typography-lineHeightScale-m: var(--prime-ref-font-lineHeight-m);
+  --prime-sys-typography-lineHeightScale-s: var(--prime-ref-font-lineHeight-s);
+  --prime-sys-typography-lineHeightScale-xl: var(--prime-ref-font-lineHeight-xl);
+  --prime-sys-typography-lineHeightScale-xs: var(--prime-ref-font-lineHeight-xs);
+  --prime-sys-typography-role-bodyCompact-fontSize: var(--prime-sys-typography-sizeScale-xs);
+  --prime-sys-typography-role-bodyCompact-lineHeight: var(--prime-sys-typography-lineHeightScale-2xs);
+  --prime-sys-typography-role-bodyDefault-fontSize: var(--prime-sys-typography-sizeScale-xs);
+  --prime-sys-typography-role-bodyDefault-lineHeight: var(--prime-sys-typography-lineHeightScale-xs);
+  --prime-sys-typography-role-bodyLarge-fontSize: var(--prime-sys-typography-sizeScale-s);
+  --prime-sys-typography-role-bodyLarge-lineHeight: var(--prime-sys-typography-lineHeightScale-s);
+  --prime-sys-typography-role-bodySmall-fontSize: var(--prime-sys-typography-sizeScale-2xs);
+  --prime-sys-typography-role-bodySmall-lineHeight: var(--prime-sys-typography-lineHeightScale-2xs);
+  --prime-sys-typography-role-caption-fontSize: var(--prime-sys-typography-sizeScale-2xs);
+  --prime-sys-typography-role-caption-lineHeight: var(--prime-sys-typography-lineHeightScale-2xs);
+  --prime-sys-typography-role-captionMicro-fontSize: var(--prime-sys-typography-sizeScale-labelMicro);
+  --prime-sys-typography-role-captionMicro-lineHeight: var(--prime-sys-typography-lineHeightScale-labelMicro);
+  --prime-sys-typography-role-display-fontSize: var(--prime-sys-typography-sizeScale-9xl);
+  --prime-sys-typography-role-display-lineHeight: var(--prime-sys-typography-lineHeightScale-9xl);
+  --prime-sys-typography-role-headingGroup-fontSize: var(--prime-sys-typography-sizeScale-xs);
+  --prime-sys-typography-role-headingGroup-lineHeight: var(--prime-sys-typography-lineHeightScale-xs);
+  --prime-sys-typography-role-headingPage-fontSize: var(--prime-sys-typography-sizeScale-4xl);
+  --prime-sys-typography-role-headingPage-lineHeight: var(--prime-sys-typography-lineHeightScale-4xl);
+  --prime-sys-typography-role-headingSection-fontSize: var(--prime-sys-typography-sizeScale-2xl);
+  --prime-sys-typography-role-headingSection-lineHeight: var(--prime-sys-typography-lineHeightScale-2xl);
+  --prime-sys-typography-role-headingSubsection-fontSize: var(--prime-sys-typography-sizeScale-xl);
+  --prime-sys-typography-role-headingSubsection-lineHeight: var(--prime-sys-typography-lineHeightScale-xl);
+  --prime-sys-typography-role-headline-fontSize: var(--prime-sys-typography-sizeScale-6xl);
+  --prime-sys-typography-role-headline-lineHeight: var(--prime-sys-typography-lineHeightScale-6xl);
+  --prime-sys-typography-sizeScale-2xl: var(--prime-ref-font-size-2xl);
+  --prime-sys-typography-sizeScale-2xs: var(--prime-ref-font-size-2xs);
+  --prime-sys-typography-sizeScale-3xl: var(--prime-ref-font-size-3xl);
+  --prime-sys-typography-sizeScale-3xs: var(--prime-ref-font-size-3xs);
+  --prime-sys-typography-sizeScale-4xl: var(--prime-ref-font-size-4xl);
+  --prime-sys-typography-sizeScale-5xl: var(--prime-ref-font-size-5xl);
+  --prime-sys-typography-sizeScale-6xl: var(--prime-ref-font-size-6xl);
+  --prime-sys-typography-sizeScale-7xl: var(--prime-ref-font-size-7xl);
+  --prime-sys-typography-sizeScale-8xl: var(--prime-ref-font-size-8xl);
+  --prime-sys-typography-sizeScale-9xl: var(--prime-ref-font-size-9xl);
+  --prime-sys-typography-sizeScale-l: var(--prime-ref-font-size-l);
+  --prime-sys-typography-sizeScale-labelMicro: var(--prime-ref-font-size-labelMicro);
+  --prime-sys-typography-sizeScale-m: var(--prime-ref-font-size-m);
+  --prime-sys-typography-sizeScale-s: var(--prime-ref-font-size-s);
+  --prime-sys-typography-sizeScale-xl: var(--prime-ref-font-size-xl);
+  --prime-sys-typography-sizeScale-xs: var(--prime-ref-font-size-xs);
+  --prime-sys-typography-style-italic: italic;
+  --prime-sys-typography-style-normal: normal;
+  --prime-sys-typography-support-2xs: var(--prime-ref-font-size-2xs);
+  --prime-sys-typography-support-3xs: var(--prime-ref-font-size-3xs);
+  --prime-sys-typography-support-s: var(--prime-ref-font-size-s);
+  --prime-sys-typography-support-xs: var(--prime-ref-font-size-xs);
+  --prime-sys-typography-title-size: var(--prime-ref-font-size-l);
+  --prime-sys-typography-title-weight: var(--prime-ref-font-weight-semibold);
+  --prime-sys-typography-tracking-normal: var(--prime-ref-font-letterSpacing-normal);
+  --prime-sys-typography-tracking-tight: var(--prime-ref-font-letterSpacing-tight);
+  --prime-sys-typography-tracking-tighter: var(--prime-ref-font-letterSpacing-tighter);
+  --prime-sys-typography-tracking-wide: var(--prime-ref-font-letterSpacing-wide);
+  --prime-sys-typography-tracking-wider: var(--prime-ref-font-letterSpacing-wider);
+  --prime-sys-typography-weight-bold: var(--prime-ref-font-weight-bold);
+  --prime-sys-typography-weight-medium: var(--prime-ref-font-weight-medium);
+  --prime-sys-typography-weight-regular: var(--prime-ref-font-weight-regular);
+  --prime-sys-typography-weight-semibold: var(--prime-ref-font-weight-semibold);
+}