@uniai-fe/uds-primitives 0.10.4 → 0.12.0

package/dist/styles.css

@@ -195,6 +195,71 @@
   --button-default-tertiary-outline-hover-foreground: var(--color-neutral-20);
   --button-default-tertiary-overlay-outlined-bg: var(--color-cool-gray-95);
   --button-default-tertiary-overlay-solid-bg: var(--color-surface-strong);
+  /* FE-274: Badge 팔레트를 초기값으로 사용하며 서비스에서 priority별로 교정할 수 있다. */
+  --button-default-green-solid-bg: var(--color-green-95);
+  --button-default-green-solid-hover-bg: var(--color-green-90);
+  --button-default-green-solid-active-bg: var(--color-green-80);
+  --button-default-green-solid-foreground: var(--color-green-45);
+  --button-default-green-outline-border: var(--color-green-45);
+  --button-default-green-outline-foreground: var(--color-green-45);
+  --button-default-green-outline-hover-bg: var(--color-green-95);
+  --button-default-green-outline-active-bg: var(--color-green-90);
+  --button-default-yellow-solid-bg: var(--color-yellow-95);
+  --button-default-yellow-solid-hover-bg: var(--color-yellow-90);
+  --button-default-yellow-solid-active-bg: var(--color-yellow-80);
+  --button-default-yellow-solid-foreground: var(--color-yellow-45);
+  --button-default-yellow-outline-border: var(--color-yellow-60);
+  --button-default-yellow-outline-foreground: var(--color-yellow-45);
+  --button-default-yellow-outline-hover-bg: var(--color-yellow-95);
+  --button-default-yellow-outline-active-bg: var(--color-yellow-90);
+  --button-default-orange-solid-bg: var(--color-orange-95);
+  --button-default-orange-solid-hover-bg: var(--color-orange-90);
+  --button-default-orange-solid-active-bg: var(--color-orange-80);
+  --button-default-orange-solid-foreground: var(--color-orange-55);
+  --button-default-orange-outline-border: var(--color-orange-70);
+  --button-default-orange-outline-foreground: var(--color-orange-55);
+  --button-default-orange-outline-hover-bg: var(--color-orange-95);
+  --button-default-orange-outline-active-bg: var(--color-orange-90);
+  --button-default-teal-solid-bg: var(--color-teal-95);
+  --button-default-teal-solid-hover-bg: var(--color-teal-90);
+  --button-default-teal-solid-active-bg: var(--color-teal-80);
+  --button-default-teal-solid-foreground: var(--color-teal-45);
+  --button-default-teal-outline-border: var(--color-teal-45);
+  --button-default-teal-outline-foreground: var(--color-teal-45);
+  --button-default-teal-outline-hover-bg: var(--color-teal-95);
+  --button-default-teal-outline-active-bg: var(--color-teal-90);
+  --button-default-pink-solid-bg: var(--color-pink-95);
+  --button-default-pink-solid-hover-bg: var(--color-pink-90);
+  --button-default-pink-solid-active-bg: var(--color-pink-80);
+  --button-default-pink-solid-foreground: var(--color-pink-55);
+  --button-default-pink-outline-border: var(--color-pink-70);
+  --button-default-pink-outline-foreground: var(--color-pink-55);
+  --button-default-pink-outline-hover-bg: var(--color-pink-95);
+  --button-default-pink-outline-active-bg: var(--color-pink-90);
+  --button-default-red-solid-bg: var(--color-red-95);
+  --button-default-red-solid-hover-bg: var(--color-red-90);
+  --button-default-red-solid-active-bg: var(--color-red-80);
+  --button-default-red-solid-foreground: var(--color-red-55);
+  --button-default-red-outline-border: var(--color-red-70);
+  --button-default-red-outline-foreground: var(--color-red-55);
+  --button-default-red-outline-hover-bg: var(--color-red-95);
+  --button-default-red-outline-active-bg: var(--color-red-90);
+  --button-default-dark-gray-solid-bg: var(--color-cool-gray-20);
+  --button-default-dark-gray-solid-hover-bg: var(--color-cool-gray-10);
+  --button-default-dark-gray-solid-active-bg: var(--color-cool-gray-10);
+  --button-default-dark-gray-solid-foreground: var(--color-common-100);
+  --button-default-dark-gray-outline-border: var(--color-cool-gray-20);
+  --button-default-dark-gray-outline-foreground: var(--color-cool-gray-20);
+  --button-default-dark-gray-outline-hover-bg: var(--color-cool-gray-95);
+  --button-default-dark-gray-outline-active-bg: var(--color-cool-gray-90);
+  --button-default-light-gray-solid-bg: var(--color-cool-gray-95);
+  --button-default-light-gray-solid-hover-bg: var(--color-cool-gray-90);
+  --button-default-light-gray-solid-active-bg: var(--color-cool-gray-80);
+  --button-default-light-gray-solid-foreground: var(--color-cool-gray-20);
+  --button-default-light-gray-outline-border: var(--color-cool-gray-80);
+  --button-default-light-gray-outline-foreground: var(--color-cool-gray-20);
+  --button-default-light-gray-outline-hover-bg: var(--color-cool-gray-99);
+  --button-default-light-gray-outline-active-bg: var(--color-cool-gray-95);
   /* text button colors */
   --button-text-secondary-foreground: var(--color-primary-default);
   --button-text-secondary-hover-bg: var(
@@ -523,8 +588,6 @@
   --input-status-success-color: var(--color-primary-default);
   /* TimePicker tokens */
   --input-time-width: 100%;
-  --input-time-flex: 0 1 auto;
-  --input-time-layout-gap: var(--input-layout-gap);
   --input-time-height-small: var(--input-default-height-small);
   --input-time-height-medium: var(--input-default-height-medium);
   --input-time-height-large: var(--input-default-height-large);
@@ -533,29 +596,19 @@
   --input-time-padding-block: var(--input-default-padding-block);
   --input-time-secondary-padding-block: var(--input-secondary-padding-block);
   --input-time-table-padding-inline: var(--spacing-padding-4);
-  --input-time-radius: var(--input-default-radius-base);
+  --input-time-radius: var(--theme-radius-medium-3);
   --input-time-tertiary-radius: var(--input-tertiary-radius-base);
   --input-time-table-radius: var(--input-table-radius-base);
-  --input-time-field-gap: var(--spacing-gap-2);
-  --input-time-field-width: 2.4ch;
-  --input-time-period-field-width: 3.8ch;
+  --input-time-field-gap: 0;
+  --input-time-field-width: 2.7ch;
+  --input-time-field-middle-width: 2.2ch;
+  --input-time-period-field-width: 4.2ch;
   --input-time-field-height: 100%;
-  --input-time-field-y-offset: 2px;
-  --input-time-section-gap: var(--spacing-gap-1);
-  --input-time-section-button-size: 28px;
-  --input-time-section-button-radius: var(--theme-radius-medium-1);
-  --input-time-left-section-width: 44px;
-  --input-time-section-width: 56px;
-  --input-time-section-width-with-clear: 92px;
-  --input-time-section-edge-gap: var(--input-time-padding-inline);
-  --input-time-left-section-padding-offset: 44px;
-  --input-time-right-section-padding-offset: 64px;
-  --input-time-right-section-padding-offset-with-clear: 100px;
-  --input-time-table-section-padding-offset: 48px;
-  --input-time-table-clear-padding-offset: 56px;
-  --input-time-table-field-width: 2.4ch;
-  --input-time-table-period-field-width: 3.8ch;
   --input-time-icon-size: 24px;
+  --input-time-stepper-width: 28px;
+  --input-time-stepper-button-height: 28px;
+  --input-time-stepper-radius: var(--theme-radius-medium-3);
+  --input-time-stepper-icon-size: 16px;
   --input-time-text-color: var(--input-text-color);
   --input-time-text-disabled-color: var(--input-text-disabled-color);
   --input-time-placeholder-color: var(--input-placeholder-color);
@@ -595,32 +648,6 @@
   --input-time-secondary-surface-color: var(--input-secondary-surface-color);
   --input-time-surface-disabled-color: var(--input-surface-disabled-color);
   --input-time-table-surface-color: var(--input-table-surface-color);
-  --input-time-dropdown-padding: var(--spacing-padding-2);
-  --input-time-dropdown-radius: var(--theme-radius-large-1);
-  --input-time-dropdown-border-width: 1px;
-  --input-time-dropdown-border-color: var(--color-border-standard-cool-gray);
-  --input-time-dropdown-surface-color: var(--color-common-100);
-  --input-time-dropdown-shadow: 0px 4px 22px rgba(19, 22, 32, 0.12);
-  --input-time-dropdown-content-height: 200px;
-  --input-time-dropdown-group-gap: var(--spacing-gap-3);
-  --input-time-option-gap: var(--spacing-gap-1);
-  --input-time-scrollarea-width: 64px;
-  --input-time-scrollarea-gutter: 8px;
-  --input-time-option-min-width: 56px;
-  --input-time-option-height: 32px;
-  --input-time-option-radius: var(--theme-radius-medium-1);
-  --input-time-option-color: var(--color-label-standard);
-  --input-time-option-hover-color: var(--color-label-strong);
-  --input-time-option-active-color: var(--color-common-100);
-  --input-time-option-hover-surface-color: var(--color-neutral-95);
-  --input-time-option-active-surface-color: var(--color-primary-default);
-  --input-time-option-font-size: var(--font-body-xsmall-size);
-  --input-time-option-line-height: var(--font-body-xsmall-line-height);
-  --input-time-option-font-weight: var(--font-body-xsmall-weight);
-  --input-time-presets-label-color: var(--color-label-alternative);
-  --input-time-presets-label-size: var(--font-label-small-size);
-  --input-time-presets-label-line-height: var(--font-label-small-line-height);
-  --input-time-presets-label-weight: var(--font-label-small-weight);
   --theme-navigation-height: 86px;
   --theme-navigation-padding-inline: 32px;
   --theme-navigation-padding-block-start: 8px;
@@ -930,6 +957,68 @@
   --table-td-text-size: 15px;
   --table-td-text-weight: var(--font-body-xsmall-weight);
   --table-td-text-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-template-max-height: 800px;
+  --time-picker-template-viewport-gap: var(--spacing-gap-8);
+  --time-picker-template-padding: var(--spacing-padding-6);
+  --time-picker-template-gap: var(--spacing-gap-6);
+  --time-picker-template-section-gap: var(--spacing-gap-5);
+  --time-picker-template-text-color: var(--color-label-standard);
+  --time-picker-template-heading-size: var(--font-heading-small-size);
+  --time-picker-template-heading-line-height: var(
+    --font-heading-small-line-height
+  );
+  --time-picker-template-heading-weight: var(--font-heading-small-weight);
+  --time-picker-summary-height: 82px;
+  --time-picker-summary-padding-block: var(--spacing-padding-5);
+  --time-picker-summary-gap: var(--spacing-gap-3);
+  --time-picker-summary-radius: var(--theme-radius-large-2);
+  --time-picker-summary-surface-color: var(--color-surface-standard);
+  --time-picker-summary-border-color: var(--color-cool-gray-20);
+  --time-picker-summary-label-size: var(--font-body-xsmall-size);
+  --time-picker-summary-label-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-summary-label-weight: var(--font-body-xsmall-weight);
+  --time-picker-summary-label-letter-spacing: var(
+    --font-body-xsmall-letter-spacing
+  );
+  --time-picker-summary-value-size: var(--font-heading-small-size);
+  --time-picker-summary-value-line-height: var(--font-body-large-line-height);
+  --time-picker-summary-value-weight: var(--font-heading-small-weight);
+  --time-picker-summary-value-letter-spacing: 0.2px;
+  --time-picker-option-gap: var(--spacing-gap-5);
+  --time-picker-option-height: var(--theme-size-medium-1);
+  --time-picker-option-border-width: 1px;
+  --time-picker-option-border-color: var(--color-border-standard-cool-gray);
+  --time-picker-option-radius: var(--theme-radius-medium-3);
+  --time-picker-option-surface-color: var(--color-common-100);
+  --time-picker-option-color: var(--color-label-standard);
+  --time-picker-option-selected-color: var(--color-primary-default);
+  --time-picker-option-selected-surface-color: var(--color-neutral-99);
+  --time-picker-option-font-size: var(--font-body-xsmall-size);
+  --time-picker-option-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-period-height: var(--theme-size-medium-1);
+  --time-picker-period-padding: var(--spacing-padding-1);
+  --time-picker-period-radius: var(--theme-radius-large-1);
+  --time-picker-period-item-radius: var(--theme-radius-medium-4);
+  --time-picker-period-surface-color: var(--color-cool-gray-85);
+  --time-picker-period-item-surface-color: var(--color-common-100);
+  --time-picker-period-item-color: var(--color-label-standard);
+  --time-picker-period-item-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.06), 0 0 4px rgba(0, 0, 0, 0.12);
+  --time-picker-period-item-font-size: var(--font-body-xsmall-size);
+  --time-picker-period-item-font-weight: var(--font-body-medium-weight);
+  --time-picker-period-item-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-minute-stepper-height: var(--theme-size-medium-1);
+  --time-picker-minute-stepper-gap: var(--spacing-gap-13);
+  --time-picker-minute-stepper-radius: var(--theme-radius-large-1);
+  --time-picker-minute-stepper-surface-color: var(--color-cool-gray-85);
+  --time-picker-minute-control-size: var(--theme-size-small-2);
+  --time-picker-minute-value-size: var(--font-body-xsmall-size);
+  --time-picker-minute-value-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-minute-value-weight: var(--font-body-medium-weight);
+  --time-picker-template-footer-gap: var(--spacing-gap-6);
+  --time-picker-clear-color: var(--color-error);
+  --time-picker-clear-size: var(--font-body-xsmall-size);
+  --time-picker-clear-line-height: var(--font-body-xsmall-line-height);
   --toast-stack-margin: var(--spacing-padding-7);
   --toast-stack-gap: var(--spacing-gap-3);
   --toast-stack-z-index: 10000;
@@ -1592,49 +1681,723 @@
     :disabled
   ):not([aria-disabled="true"]),
 .button:where(
-    .button-fill-outlined.button-priority-primary
+    .button-fill-outlined.button-priority-primary
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(
+    --button-default-primary-outline-hover-bg,
+    var(--color-primary-default)
+  );
+  border-color: var(
+    --button-default-primary-outline-border,
+    var(--color-primary-default)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-primary):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-primary
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-primary-solid-bg);
+  border-color: var(
+    --button-default-primary-outline-border,
+    var(--color-primary-default)
+  );
+}
+.button:where(.button-fill-solid.button-priority-secondary) {
+  background-color: var(
+    --button-default-secondary-solid-bg,
+    var(--color-blue-95, #e5eeff)
+  );
+  border-color: var(
+    --button-default-secondary-solid-bg,
+    var(--color-blue-95, #e5eeff)
+  );
+  color: var(
+    --button-default-secondary-solid-foreground,
+    var(--color-primary-default)
+  );
+}
+.button:where(.button-fill-solid.button-priority-secondary):disabled,
+.button:where(
+    .button-fill-solid.button-priority-secondary
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-secondary):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-secondary
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
+  border-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
+}
+.button:where(.button-fill-solid.button-priority-secondary):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-secondary
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
+  border-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
+}
+.button:where(.button-fill-outlined.button-priority-secondary) {
+  background-color: transparent;
+  color: var(
+    --button-default-secondary-outline-foreground,
+    var(--color-primary-default)
+  );
+  border-color: var(
+    --button-default-secondary-outline-border,
+    var(--color-cool-gray-90)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-secondary):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-secondary
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-secondary):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-secondary
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(
+    --button-default-secondary-outline-hover-bg,
+    var(--color-blue-90)
+  );
+  border-color: var(
+    --button-default-secondary-outline-border,
+    var(--color-cool-gray-90)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-secondary):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-secondary
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-secondary-solid-bg);
+  border-color: var(
+    --button-default-secondary-outline-border,
+    var(--color-cool-gray-90)
+  );
+}
+.button:where(.button-fill-solid.button-priority-tertiary) {
+  background-color: var(
+    --button-default-tertiary-solid-bg,
+    var(--color-surface-neutral)
+  );
+  border-color: var(
+    --button-default-tertiary-solid-bg,
+    var(--color-surface-neutral)
+  );
+  color: var(
+    --button-default-tertiary-solid-foreground,
+    var(--color-label-neutral)
+  );
+}
+.button:where(.button-fill-solid.button-priority-tertiary):disabled,
+.button:where(
+    .button-fill-solid.button-priority-tertiary
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-tertiary):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-tertiary
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(
+    --button-default-tertiary-solid-hover-bg,
+    var(--color-surface-static-cool-gray)
+  );
+  border-color: var(
+    --button-default-tertiary-solid-hover-bg,
+    var(--color-surface-static-cool-gray)
+  );
+}
+.button:where(.button-fill-solid.button-priority-tertiary):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-tertiary
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(
+    --button-default-tertiary-solid-active-bg,
+    var(--color-surface-strong)
+  );
+  border-color: var(
+    --button-default-tertiary-solid-active-bg,
+    var(--color-surface-strong)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-tertiary) {
+  background-color: transparent;
+  color: var(
+    --button-default-tertiary-outline-foreground,
+    var(--color-cool-gray-10)
+  );
+  border-color: var(
+    --button-default-tertiary-outline-border,
+    var(--color-cool-gray-90)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-tertiary):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-tertiary
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-tertiary):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-tertiary
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(
+    --button-default-tertiary-outline-hover-bg,
+    var(--color-cool-gray-95)
+  );
+  border-color: var(
+    --button-default-tertiary-outline-border,
+    var(--color-cool-gray-90)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-tertiary):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-tertiary
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-tertiary-solid-bg);
+  border-color: var(
+    --button-default-tertiary-outline-border,
+    var(--color-cool-gray-90)
+  );
+}
+.button:where(.button-fill-solid.button-priority-green) {
+  background-color: var(--button-default-green-solid-bg);
+  border-color: var(--button-default-green-solid-bg);
+  color: var(--button-default-green-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-green):disabled,
+.button:where(.button-fill-solid.button-priority-green)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-green):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-green
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-green-solid-hover-bg);
+  border-color: var(--button-default-green-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-green):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-green
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-green-solid-active-bg);
+  border-color: var(--button-default-green-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-green) {
+  background-color: transparent;
+  color: var(--button-default-green-outline-foreground);
+  border-color: var(--button-default-green-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-green):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-green
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-green):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-green
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-green-outline-hover-bg);
+  border-color: var(--button-default-green-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-green):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-green
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-green-outline-active-bg);
+  border-color: var(--button-default-green-outline-border);
+}
+.button:where(.button-fill-solid.button-priority-yellow) {
+  background-color: var(--button-default-yellow-solid-bg);
+  border-color: var(--button-default-yellow-solid-bg);
+  color: var(--button-default-yellow-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-yellow):disabled,
+.button:where(.button-fill-solid.button-priority-yellow)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-yellow):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-yellow
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-yellow-solid-hover-bg);
+  border-color: var(--button-default-yellow-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-yellow):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-yellow
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-yellow-solid-active-bg);
+  border-color: var(--button-default-yellow-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-yellow) {
+  background-color: transparent;
+  color: var(--button-default-yellow-outline-foreground);
+  border-color: var(--button-default-yellow-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-yellow):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-yellow
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-yellow):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-yellow
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-yellow-outline-hover-bg);
+  border-color: var(--button-default-yellow-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-yellow):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-yellow
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-yellow-outline-active-bg);
+  border-color: var(--button-default-yellow-outline-border);
+}
+.button:where(.button-fill-solid.button-priority-orange) {
+  background-color: var(--button-default-orange-solid-bg);
+  border-color: var(--button-default-orange-solid-bg);
+  color: var(--button-default-orange-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-orange):disabled,
+.button:where(.button-fill-solid.button-priority-orange)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-orange):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-orange
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-orange-solid-hover-bg);
+  border-color: var(--button-default-orange-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-orange):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-orange
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-orange-solid-active-bg);
+  border-color: var(--button-default-orange-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-orange) {
+  background-color: transparent;
+  color: var(--button-default-orange-outline-foreground);
+  border-color: var(--button-default-orange-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-orange):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-orange
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-orange):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-orange
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-orange-outline-hover-bg);
+  border-color: var(--button-default-orange-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-orange):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-orange
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-orange-outline-active-bg);
+  border-color: var(--button-default-orange-outline-border);
+}
+.button:where(.button-fill-solid.button-priority-teal) {
+  background-color: var(--button-default-teal-solid-bg);
+  border-color: var(--button-default-teal-solid-bg);
+  color: var(--button-default-teal-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-teal):disabled,
+.button:where(.button-fill-solid.button-priority-teal)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-teal):hover:not(:disabled):not(
+    [aria-disabled="true"]
+  ),
+.button:where(
+    .button-fill-solid.button-priority-teal
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-teal-solid-hover-bg);
+  border-color: var(--button-default-teal-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-teal):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-teal
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-teal-solid-active-bg);
+  border-color: var(--button-default-teal-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-teal) {
+  background-color: transparent;
+  color: var(--button-default-teal-outline-foreground);
+  border-color: var(--button-default-teal-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-teal):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-teal
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-teal):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-teal
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-teal-outline-hover-bg);
+  border-color: var(--button-default-teal-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-teal):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-teal
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-teal-outline-active-bg);
+  border-color: var(--button-default-teal-outline-border);
+}
+.button:where(.button-fill-solid.button-priority-pink) {
+  background-color: var(--button-default-pink-solid-bg);
+  border-color: var(--button-default-pink-solid-bg);
+  color: var(--button-default-pink-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-pink):disabled,
+.button:where(.button-fill-solid.button-priority-pink)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-pink):hover:not(:disabled):not(
+    [aria-disabled="true"]
+  ),
+.button:where(
+    .button-fill-solid.button-priority-pink
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-pink-solid-hover-bg);
+  border-color: var(--button-default-pink-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-pink):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-solid.button-priority-pink
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-pink-solid-active-bg);
+  border-color: var(--button-default-pink-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-pink) {
+  background-color: transparent;
+  color: var(--button-default-pink-outline-foreground);
+  border-color: var(--button-default-pink-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-pink):disabled,
+.button:where(
+    .button-fill-outlined.button-priority-pink
+  )[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-pink):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-pink
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-pink-outline-hover-bg);
+  border-color: var(--button-default-pink-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-pink):active:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-pink
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-pink-outline-active-bg);
+  border-color: var(--button-default-pink-outline-border);
+}
+.button:where(.button-fill-solid.button-priority-red) {
+  background-color: var(--button-default-red-solid-bg);
+  border-color: var(--button-default-red-solid-bg);
+  color: var(--button-default-red-solid-foreground);
+}
+.button:where(.button-fill-solid.button-priority-red):disabled,
+.button:where(.button-fill-solid.button-priority-red)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-solid.button-priority-red):hover:not(:disabled):not(
+    [aria-disabled="true"]
+  ),
+.button:where(
+    .button-fill-solid.button-priority-red
+  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-red-solid-hover-bg);
+  border-color: var(--button-default-red-solid-hover-bg);
+}
+.button:where(.button-fill-solid.button-priority-red):active:not(:disabled):not(
+    [aria-disabled="true"]
+  ),
+.button:where(
+    .button-fill-solid.button-priority-red
+  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--button-default-red-solid-active-bg);
+  border-color: var(--button-default-red-solid-active-bg);
+}
+.button:where(.button-fill-outlined.button-priority-red) {
+  background-color: transparent;
+  color: var(--button-default-red-outline-foreground);
+  border-color: var(--button-default-red-outline-border);
+}
+.button:where(.button-fill-outlined.button-priority-red):disabled,
+.button:where(.button-fill-outlined.button-priority-red)[aria-disabled="true"] {
+  background-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  border-color: var(
+    --button-default-neutral-disabled-bg,
+    var(--color-surface-standard)
+  );
+  color: var(
+    --button-default-neutral-disabled-foreground,
+    var(--color-label-disabled)
+  );
+}
+.button:where(.button-fill-outlined.button-priority-red):hover:not(
+    :disabled
+  ):not([aria-disabled="true"]),
+.button:where(
+    .button-fill-outlined.button-priority-red
   )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(
-    --button-default-primary-outline-hover-bg,
-    var(--color-primary-default)
-  );
-  border-color: var(
-    --button-default-primary-outline-border,
-    var(--color-primary-default)
-  );
+  background-color: var(--button-default-red-outline-hover-bg);
+  border-color: var(--button-default-red-outline-border);
 }
-.button:where(.button-fill-outlined.button-priority-primary):active:not(
+.button:where(.button-fill-outlined.button-priority-red):active:not(
     :disabled
   ):not([aria-disabled="true"]),
 .button:where(
-    .button-fill-outlined.button-priority-primary
+    .button-fill-outlined.button-priority-red
   )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(
-    --button-default-primary-solid-bg,
-    var(--color-primary-default)
-  );
-  border-color: var(
-    --button-default-primary-outline-border,
-    var(--color-primary-default)
-  );
+  background-color: var(--button-default-red-outline-active-bg);
+  border-color: var(--button-default-red-outline-border);
 }
-.button:where(.button-fill-solid.button-priority-secondary) {
-  background-color: var(
-    --button-default-secondary-solid-bg,
-    var(--color-blue-95, #e5eeff)
-  );
-  border-color: var(
-    --button-default-secondary-solid-bg,
-    var(--color-blue-95, #e5eeff)
-  );
-  color: var(
-    --button-default-secondary-solid-foreground,
-    var(--color-primary-default)
-  );
+.button:where(.button-fill-solid.button-priority-darkGray) {
+  background-color: var(--button-default-dark-gray-solid-bg);
+  border-color: var(--button-default-dark-gray-solid-bg);
+  color: var(--button-default-dark-gray-solid-foreground);
 }
-.button:where(.button-fill-solid.button-priority-secondary):disabled,
+.button:where(.button-fill-solid.button-priority-darkGray):disabled,
 .button:where(
-    .button-fill-solid.button-priority-secondary
+    .button-fill-solid.button-priority-darkGray
   )[aria-disabled="true"] {
   background-color: var(
     --button-default-neutral-disabled-bg,
@@ -1649,38 +2412,32 @@
     var(--color-label-disabled)
   );
 }
-.button:where(.button-fill-solid.button-priority-secondary):hover:not(
+.button:where(.button-fill-solid.button-priority-darkGray):hover:not(
     :disabled
   ):not([aria-disabled="true"]),
 .button:where(
-    .button-fill-solid.button-priority-secondary
+    .button-fill-solid.button-priority-darkGray
   )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
-  border-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
+  background-color: var(--button-default-dark-gray-solid-hover-bg);
+  border-color: var(--button-default-dark-gray-solid-hover-bg);
 }
-.button:where(.button-fill-solid.button-priority-secondary):active:not(
+.button:where(.button-fill-solid.button-priority-darkGray):active:not(
     :disabled
   ):not([aria-disabled="true"]),
 .button:where(
-    .button-fill-solid.button-priority-secondary
+    .button-fill-solid.button-priority-darkGray
   )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
-  border-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
+  background-color: var(--button-default-dark-gray-solid-active-bg);
+  border-color: var(--button-default-dark-gray-solid-active-bg);
 }
-.button:where(.button-fill-outlined.button-priority-secondary) {
+.button:where(.button-fill-outlined.button-priority-darkGray) {
   background-color: transparent;
-  color: var(
-    --button-default-secondary-outline-foreground,
-    var(--color-primary-default)
-  );
-  border-color: var(
-    --button-default-secondary-outline-border,
-    var(--color-cool-gray-90)
-  );
+  color: var(--button-default-dark-gray-outline-foreground);
+  border-color: var(--button-default-dark-gray-outline-border);
 }
-.button:where(.button-fill-outlined.button-priority-secondary):disabled,
+.button:where(.button-fill-outlined.button-priority-darkGray):disabled,
 .button:where(
-    .button-fill-outlined.button-priority-secondary
+    .button-fill-outlined.button-priority-darkGray
   )[aria-disabled="true"] {
   background-color: var(
     --button-default-neutral-disabled-bg,
@@ -1695,53 +2452,32 @@
     var(--color-label-disabled)
   );
 }
-.button:where(.button-fill-outlined.button-priority-secondary):hover:not(
+.button:where(.button-fill-outlined.button-priority-darkGray):hover:not(
     :disabled
   ):not([aria-disabled="true"]),
 .button:where(
-    .button-fill-outlined.button-priority-secondary
+    .button-fill-outlined.button-priority-darkGray
   )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(
-    --button-default-secondary-outline-hover-bg,
-    var(--color-blue-90)
-  );
-  border-color: var(
-    --button-default-secondary-outline-border,
-    var(--color-cool-gray-90)
-  );
+  background-color: var(--button-default-dark-gray-outline-hover-bg);
+  border-color: var(--button-default-dark-gray-outline-border);
 }
-.button:where(.button-fill-outlined.button-priority-secondary):active:not(
+.button:where(.button-fill-outlined.button-priority-darkGray):active:not(
     :disabled
   ):not([aria-disabled="true"]),
 .button:where(
-    .button-fill-outlined.button-priority-secondary
+    .button-fill-outlined.button-priority-darkGray
   )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(
-    --button-default-secondary-solid-bg,
-    var(--color-blue-95, #e5eeff)
-  );
-  border-color: var(
-    --button-default-secondary-outline-border,
-    var(--color-cool-gray-90)
-  );
+  background-color: var(--button-default-dark-gray-outline-active-bg);
+  border-color: var(--button-default-dark-gray-outline-border);
 }
-.button:where(.button-fill-solid.button-priority-tertiary) {
-  background-color: var(
-    --button-default-tertiary-solid-bg,
-    var(--color-surface-neutral)
-  );
-  border-color: var(
-    --button-default-tertiary-solid-bg,
-    var(--color-surface-neutral)
-  );
-  color: var(
-    --button-default-tertiary-solid-foreground,
-    var(--color-label-neutral)
-  );
+.button:where(.button-fill-solid.button-priority-lightGray) {
+  background-color: var(--button-default-light-gray-solid-bg);
+  border-color: var(--button-default-light-gray-solid-bg);
+  color: var(--button-default-light-gray-solid-foreground);
 }
-.button:where(.button-fill-solid.button-priority-tertiary):disabled,
+.button:where(.button-fill-solid.button-priority-lightGray):disabled,
 .button:where(
-    .button-fill-solid.button-priority-tertiary
+    .button-fill-solid.button-priority-lightGray
   )[aria-disabled="true"] {
   background-color: var(
     --button-default-neutral-disabled-bg,
@@ -1756,50 +2492,32 @@
     var(--color-label-disabled)
   );
 }
-.button:where(.button-fill-solid.button-priority-tertiary):hover:not(
+.button:where(.button-fill-solid.button-priority-lightGray):hover:not(
     :disabled
   ):not([aria-disabled="true"]),
 .button:where(
-    .button-fill-solid.button-priority-tertiary
+    .button-fill-solid.button-priority-lightGray
   )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(
-    --button-default-tertiary-solid-hover-bg,
-    var(--color-surface-static-cool-gray)
-  );
-  border-color: var(
-    --button-default-tertiary-solid-hover-bg,
-    var(--color-surface-static-cool-gray)
-  );
+  background-color: var(--button-default-light-gray-solid-hover-bg);
+  border-color: var(--button-default-light-gray-solid-hover-bg);
 }
-.button:where(.button-fill-solid.button-priority-tertiary):active:not(
+.button:where(.button-fill-solid.button-priority-lightGray):active:not(
     :disabled
   ):not([aria-disabled="true"]),
 .button:where(
-    .button-fill-solid.button-priority-tertiary
+    .button-fill-solid.button-priority-lightGray
   )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(
-    --button-default-tertiary-solid-active-bg,
-    var(--color-surface-strong)
-  );
-  border-color: var(
-    --button-default-tertiary-solid-active-bg,
-    var(--color-surface-strong)
-  );
+  background-color: var(--button-default-light-gray-solid-active-bg);
+  border-color: var(--button-default-light-gray-solid-active-bg);
 }
-.button:where(.button-fill-outlined.button-priority-tertiary) {
+.button:where(.button-fill-outlined.button-priority-lightGray) {
   background-color: transparent;
-  color: var(
-    --button-default-tertiary-outline-foreground,
-    var(--color-cool-gray-10)
-  );
-  border-color: var(
-    --button-default-tertiary-outline-border,
-    var(--color-cool-gray-90)
-  );
+  color: var(--button-default-light-gray-outline-foreground);
+  border-color: var(--button-default-light-gray-outline-border);
 }
-.button:where(.button-fill-outlined.button-priority-tertiary):disabled,
+.button:where(.button-fill-outlined.button-priority-lightGray):disabled,
 .button:where(
-    .button-fill-outlined.button-priority-tertiary
+    .button-fill-outlined.button-priority-lightGray
   )[aria-disabled="true"] {
   background-color: var(
     --button-default-neutral-disabled-bg,
@@ -1814,35 +2532,23 @@
     var(--color-label-disabled)
   );
 }
-.button:where(.button-fill-outlined.button-priority-tertiary):hover:not(
+.button:where(.button-fill-outlined.button-priority-lightGray):hover:not(
     :disabled
   ):not([aria-disabled="true"]),
 .button:where(
-    .button-fill-outlined.button-priority-tertiary
+    .button-fill-outlined.button-priority-lightGray
   )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(
-    --button-default-tertiary-outline-hover-bg,
-    var(--color-cool-gray-95)
-  );
-  border-color: var(
-    --button-default-tertiary-outline-border,
-    var(--color-cool-gray-90)
-  );
+  background-color: var(--button-default-light-gray-outline-hover-bg);
+  border-color: var(--button-default-light-gray-outline-border);
 }
-.button:where(.button-fill-outlined.button-priority-tertiary):active:not(
+.button:where(.button-fill-outlined.button-priority-lightGray):active:not(
     :disabled
   ):not([aria-disabled="true"]),
 .button:where(
-    .button-fill-outlined.button-priority-tertiary
+    .button-fill-outlined.button-priority-lightGray
   )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(
-    --button-default-tertiary-solid-bg,
-    var(--color-surface-neutral)
-  );
-  border-color: var(
-    --button-default-tertiary-outline-border,
-    var(--color-cool-gray-90)
-  );
+  background-color: var(--button-default-light-gray-outline-active-bg);
+  border-color: var(--button-default-light-gray-outline-border);
 }
 .button:where(.button-size-small) {
   padding-inline: var(
@@ -4401,236 +5107,86 @@ figure.chip {
 .input-date-range-footer-template {
   gap: var(--spacing-gap-6);
 }
-
-.input-date-range-today-row {
-  justify-content: flex-end;
-}
-
-.input-date-range-footer-row {
-  justify-content: space-between;
-}
-
-.input-date-range-clear-button {
-  min-height: 20px;
-  padding-inline: var(--spacing-padding-5);
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--color-feedback-error);
-}
-.input-date-range-clear-button:hover:not(:disabled):not([aria-disabled="true"]),
-.input-date-range-clear-button:active:not(:disabled):not(
-    [aria-disabled="true"]
-  ) {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--color-feedback-error);
-  box-shadow: none;
-}
-.input-date-range-clear-button .button-label {
-  font-size: var(--font-body-xxsmall-size);
-  line-height: 1.4;
-  font-weight: var(--font-body-medium-weight);
-  letter-spacing: 0;
-}
-
-.input-date-range-apply-button {
-  width: fit-content;
-  flex: 0 0 auto;
-  --button-width: fit-content;
-  --button-flex: 0 0 auto;
-}
-
-.input-time {
-  display: flex;
-  flex-direction: column;
-  gap: var(--input-time-layout-gap);
-  width: var(--input-time-width);
-  flex: var(--input-time-flex);
-  min-width: 0;
-}
-.input-time:where([data-width="auto"]) {
-  --input-time-width: auto;
-  --input-time-flex: 0 1 auto;
-}
-.input-time:where([data-width="fill"]) {
-  --input-time-width: auto;
-  --input-time-flex: 1 1 0%;
-}
-.input-time:where([data-width="full"]),
-.input-time:where([data-block="true"]) {
-  --input-time-width: 100%;
-  --input-time-flex: 0 0 100%;
-}
-.input-time:where([data-width="fit"]) {
-  --input-time-width: fit-content;
-  --input-time-flex: 0 0 auto;
-}
-.input-time:where([data-width="custom"]) {
-  --input-time-flex: 0 0 auto;
-}
-.input-time:where([data-priority="table"]) {
-  display: block;
-  --input-time-width: 100%;
-  height: 100%;
-}
-
-.input-time-picker,
-.input-time-wrapper {
-  width: 100%;
-}
-
-.input-time-wrapper {
-  position: relative;
-}
-
-.input-time-input {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: var(--input-time-height-medium);
-  border: var(--input-time-border-width) solid var(--input-time-border-color);
-  border-radius: var(--input-time-radius);
-  background-color: var(--input-time-surface-color);
-  color: var(--input-time-text-color);
-  padding: var(--input-time-padding-block) var(--input-time-padding-inline);
-  box-shadow: none;
-  transition:
-    border-color 0.15s ease,
-    background-color 0.15s ease;
-}
-
-.input-time:where([data-icon-position="left"]) .input-time-input {
-  padding-inline-start: var(--input-time-left-section-padding-offset);
-}
-.input-time:where([data-icon-position="left"]):where([data-has-clear="true"])
-  .input-time-input {
-  padding-inline-end: var(--input-time-right-section-padding-offset);
-}
-
-.input-time:where([data-icon-position="right"]) .input-time-input {
-  padding-inline-end: var(--input-time-right-section-padding-offset);
-}
-.input-time:where([data-icon-position="right"]):where([data-clearable="true"])
-  .input-time-input {
-  padding-inline-end: var(--input-time-right-section-padding-offset-with-clear);
-}
-
-.input-time:where([data-size="small"]) .input-time-input {
-  min-height: var(--input-time-height-small);
-  --input-time-font-size: var(--input-time-text-small-size);
-  --input-time-line-height: var(--input-time-text-small-line-height);
-  --input-time-font-weight: var(--input-time-text-small-weight);
-  --input-time-letter-spacing: var(--input-time-text-small-letter-spacing);
-}
-
-.input-time:where([data-size="large"]) .input-time-input {
-  min-height: var(--input-time-height-large);
-  --input-time-font-size: var(--input-time-text-large-size);
-  --input-time-line-height: var(--input-time-text-large-line-height);
-  --input-time-font-weight: var(--input-time-text-large-weight);
-  --input-time-letter-spacing: var(--input-time-text-large-letter-spacing);
-}
-
-.input-time:where([data-priority="secondary"]) .input-time-input {
-  border: none;
-  border-bottom: var(--input-time-border-width) solid
-    var(--input-time-border-color);
-  border-radius: 0;
-  background-color: var(--input-time-secondary-surface-color);
-  padding-inline: 0;
-  padding-block: var(--input-time-secondary-padding-block);
-}
-
-.input-time:where([data-priority="tertiary"]) .input-time-input {
-  min-height: var(--input-time-tertiary-height);
-  border-radius: var(--input-time-tertiary-radius);
-}
-
-.input-time:where([data-priority="table"]) {
-  height: 100%;
-}
-.input-time:where([data-priority="table"]) .input-time-picker,
-.input-time:where([data-priority="table"]) .input-time-wrapper,
-.input-time:where([data-priority="table"]) .input-time-input {
-  height: 100%;
-}
-.input-time:where([data-priority="table"]) .input-time-input {
-  min-height: var(--input-time-height-small);
-  border-color: var(--input-time-table-border-color);
-  border-radius: var(--input-time-table-radius);
-  background-color: var(--input-time-table-surface-color);
-  padding-inline: var(--input-time-table-padding-inline);
-  --input-time-font-size: var(--input-time-table-text-size);
-  --input-time-line-height: var(--input-time-table-text-line-height);
-  --input-time-font-weight: var(--input-time-table-text-weight);
-}
-.input-time:where([data-priority="table"]):where([data-icon-position="left"])
-  .input-time-input {
-  padding-inline-start: var(--input-time-table-section-padding-offset);
-}
-.input-time:where([data-priority="table"]):where([data-icon-position="right"])
-  .input-time-input {
-  padding-inline-end: var(--input-time-right-section-padding-offset);
+
+.input-date-range-today-row {
+  justify-content: flex-end;
 }
-.input-time:where([data-priority="table"]):where([data-has-clear="true"])
-  .input-time-input {
-  padding-inline-end: var(--input-time-table-clear-padding-offset);
+
+.input-date-range-footer-row {
+  justify-content: space-between;
 }
-.input-time:where([data-priority="table"]) .input-time-fields-group {
-  --input-time-field-y-offset: 0px;
+
+.input-date-range-clear-button {
+  min-height: 20px;
+  padding-inline: var(--spacing-padding-5);
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--color-feedback-error);
 }
-.input-time:where([data-priority="table"]) .input-time-field {
-  --input-time-field-width: var(--input-time-table-field-width);
+.input-date-range-clear-button:hover:not(:disabled):not([aria-disabled="true"]),
+.input-date-range-clear-button:active:not(:disabled):not(
+    [aria-disabled="true"]
+  ) {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--color-feedback-error);
+  box-shadow: none;
 }
-.input-time:where([data-priority="table"]) .input-time-field:where(select) {
-  --input-time-period-field-width: var(--input-time-table-period-field-width);
+.input-date-range-clear-button .button-label {
+  font-size: var(--font-body-xxsmall-size);
+  line-height: 1.4;
+  font-weight: var(--font-body-medium-weight);
+  letter-spacing: 0;
 }
 
-.input-time:where([data-state="active"]) .input-time-input {
-  border-color: var(--input-time-border-active-color);
-  border-width: var(--input-time-border-width-emphasis);
+.input-date-range-apply-button {
+  width: fit-content;
+  flex: 0 0 auto;
+  --button-width: fit-content;
+  --button-flex: 0 0 auto;
 }
 
-.input-time:where([data-state="success"]) .input-time-input {
-  border-color: var(--input-time-border-success-color);
-  border-width: var(--input-time-border-width-emphasis);
+.input-time {
+  display: flex;
+  width: var(--input-time-width);
+  min-width: 0;
+  color: var(--input-time-text-color);
 }
-
-.input-time:where([data-state="error"]) .input-time-input {
-  border-color: var(--input-time-border-error-color);
-  border-width: var(--input-time-border-width-emphasis);
+.input-time:where([data-width="auto"]) {
+  width: auto;
 }
-
-.input-time:where([data-state="disabled"]) .input-time-input,
-.input-time:where([data-readonly="true"]) .input-time-input {
-  border-color: var(--input-time-border-disabled-color);
-  background-color: var(--input-time-surface-disabled-color);
+.input-time:where([data-width="fill"]) {
+  flex: 1 1 0%;
+  width: auto;
 }
-
-.input-time:where([data-priority="secondary"][data-state="active"])
-  .input-time-input,
-.input-time:where([data-priority="secondary"][data-state="success"])
-  .input-time-input,
-.input-time:where([data-priority="secondary"][data-state="error"])
-  .input-time-input {
-  border-bottom-width: var(--input-time-border-width-emphasis);
+.input-time:where([data-width="full"]) {
+  width: 100%;
+}
+.input-time:where([data-block="true"]) {
+  width: 100%;
+}
+.input-time:where([data-width="fit"]) {
+  width: fit-content;
 }
 
-.input-time-fields-root {
+.input-time-trigger-input {
   display: flex;
   align-items: center;
-  height: 100%;
-  width: 100%;
-  color: var(--input-time-text-color);
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: var(--input-time-height-medium);
+  padding: var(--input-time-padding-block) var(--input-time-padding-inline);
+  border: var(--input-time-border-width) solid var(--input-time-border-color);
+  border-radius: var(--input-time-radius);
+  background-color: var(--input-time-surface-color);
 }
 
 .input-time-fields-group {
   display: flex;
   align-items: center;
-  gap: var(--input-time-field-gap);
-  height: 100%;
+  flex: 1 1 auto;
   min-width: 0;
-  color: var(--input-time-text-color);
-  transform: translateY(var(--input-time-field-y-offset));
+  gap: var(--input-time-field-gap);
 }
 .input-time-fields-group > span {
   color: var(--input-time-separator-color);
@@ -4645,6 +5201,7 @@ figure.chip {
   height: var(--input-time-field-height);
   padding: 0;
   border: 0;
+  outline: none;
   background-color: transparent;
   color: var(--input-time-text-color);
   caret-color: var(--input-time-text-color);
@@ -4653,163 +5210,168 @@ figure.chip {
   font-weight: var(--input-time-font-weight);
   letter-spacing: var(--input-time-letter-spacing);
   text-align: center;
-  outline: none;
-  box-shadow: none;
+}
+.input-time-field:first-child {
+  text-align: right;
+}
+.input-time-field:last-of-type {
+  text-align: left;
+}
+.input-time-field:not(:first-child):not(:last-of-type) {
+  width: var(--input-time-field-middle-width);
+  min-width: var(--input-time-field-middle-width);
 }
 .input-time-field::placeholder {
   color: var(--input-time-placeholder-color);
 }
-.input-time-field:disabled {
-  color: var(--input-time-text-disabled-color);
-  cursor: default;
-}
 
-.input-time-field:where(select) {
+.input-time-period-field {
   width: var(--input-time-period-field-width);
-  min-width: var(--input-time-period-field-width);
+  height: var(--input-time-field-height);
+  padding: 0;
+  border: 0;
+  outline: none;
   appearance: none;
-  text-align-last: center;
+  background-color: transparent;
+  color: var(--input-time-text-color);
+  font-size: var(--input-time-font-size);
+  text-align: center;
 }
 
-.input-time-section {
-  box-sizing: border-box;
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  bottom: 0;
+.input-time-icon-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--input-time-section-width);
-}
-.input-time-section:where([data-position="left"]) {
-  left: 0;
-  width: var(--input-time-left-section-width);
-}
-.input-time-section:where([data-position="right"]) {
-  right: 0;
-  justify-content: flex-end;
-  padding-inline-end: var(--input-time-section-edge-gap);
+  flex: 0 0 var(--input-time-icon-size);
+  width: var(--input-time-icon-size);
+  height: var(--input-time-icon-size);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--input-time-icon-color);
+  cursor: pointer;
 }
-
-.input-time:where([data-icon-position="right"][data-clearable="true"])
-  .input-time-section:where([data-position="right"]) {
-  width: var(--input-time-section-width-with-clear);
+.input-time-icon-button svg {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
-.input-time-section-group {
+.input-time-stepper {
   display: flex;
-  align-items: center;
-  gap: var(--input-time-section-gap);
+  flex: 0 0 var(--input-time-stepper-width);
+  flex-direction: column;
+  align-self: stretch;
 }
 
-.input-time-section-button {
+.input-time-stepper-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--input-time-section-button-size);
-  height: var(--input-time-section-button-size);
+  flex: 0 0 var(--input-time-stepper-button-height);
+  min-height: 0;
   margin: 0;
   padding: 0;
-  border: 0;
-  border-radius: var(--input-time-section-button-radius);
-  background-color: transparent;
-  color: var(--input-time-icon-color);
+  border: var(--input-time-border-width) solid var(--input-time-border-color);
+  border-left: 0;
+  background-color: var(--input-time-surface-color);
+  color: var(--input-time-text-color);
   cursor: pointer;
 }
-.input-time-section-button:where([aria-disabled="true"]) {
-  color: var(--input-time-icon-disabled-color);
-  cursor: default;
+.input-time-stepper-button:first-child {
+  border-radius: 0 var(--input-time-stepper-radius) 0 0;
 }
-
-.input-time-icon-graphic,
-.input-time-section-button svg {
-  display: flex;
-  width: var(--input-time-icon-size);
-  height: var(--input-time-icon-size);
+.input-time-stepper-button:last-child {
+  border-top: 0;
+  border-radius: 0 0 var(--input-time-stepper-radius) 0;
+}
+.input-time-stepper-button svg {
+  display: block;
+  width: var(--input-time-stepper-icon-size);
+  height: var(--input-time-stepper-icon-size);
 }
 
-.input-time-dropdown {
-  position: absolute;
-  z-index: 20;
-  box-sizing: border-box;
-  max-height: calc(
-    var(--input-time-dropdown-content-height) +
-      var(--input-time-dropdown-padding) + var(--input-time-dropdown-padding)
-  );
-  padding: var(--input-time-dropdown-padding);
-  border: var(--input-time-dropdown-border-width) solid
-    var(--input-time-dropdown-border-color);
-  border-radius: var(--input-time-dropdown-radius);
-  background-color: var(--input-time-dropdown-surface-color);
-  box-shadow: var(--input-time-dropdown-shadow);
-  overflow: hidden;
+.input-time:where([data-active-unit]) .input-time-trigger-input {
+  border-radius: var(--input-time-radius) 0 0 var(--input-time-radius);
 }
 
-.input-time-scrollarea {
-  position: relative;
-  min-width: var(--input-time-scrollarea-width);
-  height: var(--input-time-dropdown-content-height);
-  max-height: var(--input-time-dropdown-content-height);
-  overflow: hidden;
+.input-time:where([data-size="small"]) .input-time-trigger-input {
+  min-height: var(--input-time-height-small);
+}
+.input-time:where([data-size="small"]) .input-time-field {
+  font-size: var(--input-time-text-small-size);
+  line-height: var(--input-time-text-small-line-height);
+  font-weight: var(--input-time-text-small-weight);
 }
 
-.input-time-scrollarea .mantine-ScrollArea-viewport {
-  box-sizing: border-box;
-  height: 100%;
-  max-height: var(--input-time-dropdown-content-height);
-  padding-inline-end: var(--input-time-scrollarea-gutter);
-  scrollbar-gutter: stable;
-  overflow: auto;
+.input-time:where([data-size="large"]) .input-time-trigger-input {
+  min-height: var(--input-time-height-large);
+}
+.input-time:where([data-size="large"]) .input-time-field {
+  font-size: var(--input-time-text-large-size);
+  line-height: var(--input-time-text-large-line-height);
+  font-weight: var(--input-time-text-large-weight);
 }
 
-.input-time-controls-list-group {
-  display: flex;
-  gap: var(--input-time-dropdown-group-gap);
-  max-height: var(--input-time-dropdown-content-height);
-  overflow: hidden;
+.input-time:where([data-priority="secondary"]) .input-time-trigger-input {
+  border: 0;
+  border-bottom: var(--input-time-border-width) solid
+    var(--input-time-border-color);
+  border-radius: 0;
+  background-color: var(--input-time-secondary-surface-color);
+  padding-inline: 0;
 }
 
-.input-time-controls-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--input-time-option-gap);
-  width: var(--input-time-option-min-width);
+.input-time:where([data-priority="tertiary"]) .input-time-trigger-input {
+  min-height: var(--input-time-tertiary-height);
+  border-radius: var(--input-time-tertiary-radius);
 }
 
-.input-time-option,
-.input-time-preset-option {
-  width: var(--input-time-option-min-width);
-  min-width: var(--input-time-option-min-width);
-  height: var(--input-time-option-height);
-  border-radius: var(--input-time-option-radius);
-  color: var(--input-time-option-color);
-  font-size: var(--input-time-option-font-size);
-  line-height: var(--input-time-option-line-height);
-  font-weight: var(--input-time-option-font-weight);
+.input-time:where([data-priority="table"]) {
+  width: 100%;
+  height: 100%;
+}
+.input-time:where([data-priority="table"]) .input-time-trigger-input {
+  min-height: var(--input-time-height-small);
+  height: 100%;
+  padding-inline: var(--input-time-table-padding-inline);
+  border-color: var(--input-time-table-border-color);
+  border-radius: var(--input-time-table-radius);
+  background-color: var(--input-time-table-surface-color);
 }
-.input-time-option:where([data-active]),
-.input-time-preset-option:where([data-active]) {
-  background-color: var(--input-time-option-active-surface-color);
-  color: var(--input-time-option-active-color);
+.input-time:where([data-priority="table"]) .input-time-field {
+  font-size: var(--input-time-table-text-size);
+  line-height: var(--input-time-table-text-line-height);
+  font-weight: var(--input-time-table-text-weight);
+}
+
+.input-time:where([data-state="success"]) .input-time-trigger-input {
+  border-color: var(--input-time-border-success-color);
+  border-width: var(--input-time-border-width-emphasis);
 }
-.input-time-option:hover:where(:not([data-active])),
-.input-time-preset-option:hover:where(:not([data-active])) {
-  background-color: var(--input-time-option-hover-surface-color);
-  color: var(--input-time-option-hover-color);
+
+.input-time:where([data-state="error"]) .input-time-trigger-input {
+  border-color: var(--input-time-border-error-color);
+  border-width: var(--input-time-border-width-emphasis);
 }
 
-.input-time-presets-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--input-time-option-gap);
+.input-time:where([data-state="disabled"]) .input-time-trigger-input {
+  border-color: var(--input-time-border-disabled-color);
+  background-color: var(--input-time-surface-disabled-color);
+}
+.input-time:where([data-state="disabled"]) .input-time-field {
+  color: var(--input-time-text-disabled-color);
+  cursor: default;
+}
+.input-time:where([data-state="disabled"]) .input-time-icon-button {
+  color: var(--input-time-icon-disabled-color);
+  cursor: default;
 }
 
-.input-time-presets-group-label {
-  color: var(--input-time-presets-label-color);
-  font-size: var(--input-time-presets-label-size);
-  line-height: var(--input-time-presets-label-line-height);
-  font-weight: var(--input-time-presets-label-weight);
+.input-time:where([data-readonly="true"]) .input-time-trigger-input {
+  border-color: var(--input-time-border-disabled-color);
+  background-color: var(--input-time-surface-disabled-color);
 }
 
 .input-address-container {
@@ -6916,6 +7478,169 @@ figure.chip {
   line-height: var(--table-td-text-line-height);
 }
 
+.time-picker-template {
+  display: flex;
+  flex-direction: column;
+  max-height: min(
+    var(--time-picker-template-max-height),
+    100vh - var(--time-picker-template-viewport-gap)
+  );
+  overflow-y: auto;
+  gap: var(--time-picker-template-gap);
+  padding: var(--time-picker-template-padding);
+  color: var(--time-picker-template-text-color);
+}
+
+.time-picker-summary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--time-picker-summary-gap);
+  height: var(--time-picker-summary-height);
+  padding-block: var(--time-picker-summary-padding-block);
+  border: var(--time-picker-option-border-width) solid
+    var(--time-picker-summary-border-color);
+  border-radius: var(--time-picker-summary-radius);
+  background-color: var(--time-picker-summary-surface-color);
+  color: var(--time-picker-summary-border-color);
+  text-align: center;
+}
+.time-picker-summary span {
+  font-size: var(--time-picker-summary-label-size);
+  line-height: var(--time-picker-summary-label-line-height);
+  font-weight: var(--time-picker-summary-label-weight);
+  letter-spacing: var(--time-picker-summary-label-letter-spacing);
+}
+.time-picker-summary strong {
+  font-size: var(--time-picker-summary-value-size);
+  line-height: var(--time-picker-summary-value-line-height);
+  font-weight: var(--time-picker-summary-value-weight);
+  letter-spacing: var(--time-picker-summary-value-letter-spacing);
+}
+
+.time-picker-template-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--time-picker-template-section-gap);
+}
+.time-picker-template-section h3 {
+  margin: 0;
+  font-size: var(--time-picker-template-heading-size);
+  line-height: var(--time-picker-template-heading-line-height);
+  font-weight: var(--time-picker-template-heading-weight);
+}
+
+.time-picker-period-control.segmented-control {
+  --segmented-height: var(--time-picker-period-height);
+  --segmented-padding: var(--time-picker-period-padding);
+  --segmented-radius: var(--time-picker-period-radius);
+  --segmented-bg: var(--time-picker-period-surface-color);
+  --segmented-indicator-bg: var(--time-picker-period-item-surface-color);
+  --segmented-indicator-shadow: var(--time-picker-period-item-shadow);
+  --segmented-label-color: var(--time-picker-period-item-color);
+  --segmented-label-active-color: var(--time-picker-period-item-color);
+  --segmented-gap: 0px;
+  --segmented-item-font-size: var(--time-picker-period-item-font-size);
+  --segmented-item-font-weight: var(--time-picker-period-item-font-weight);
+  --segmented-item-line-height: var(--time-picker-period-item-line-height);
+  width: 100%;
+  height: var(--time-picker-period-height);
+  border-radius: var(--time-picker-period-radius);
+}
+.time-picker-period-control.segmented-control .segmented-control-indicator,
+.time-picker-period-control.segmented-control .segmented-control-button {
+  border-radius: var(--time-picker-period-item-radius);
+}
+.time-picker-period-control.segmented-control .segmented-control-list {
+  width: 100%;
+  height: 100%;
+}
+.time-picker-period-control.segmented-control .segmented-control-item {
+  display: flex;
+  flex: 1;
+}
+.time-picker-period-control.segmented-control .segmented-control-button {
+  height: 100%;
+}
+.time-picker-period-control.segmented-control .segmented-control-label {
+  letter-spacing: 0;
+}
+
+.time-picker-option-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--time-picker-option-gap);
+}
+
+.time-picker-option {
+  min-width: 0;
+  height: var(--time-picker-option-height);
+  padding: 0;
+  border: var(--time-picker-option-border-width) solid
+    var(--time-picker-option-border-color);
+  border-radius: var(--time-picker-option-radius);
+  background-color: var(--time-picker-option-surface-color);
+  color: var(--time-picker-option-color);
+  font-size: var(--time-picker-option-font-size);
+  line-height: var(--time-picker-option-line-height);
+  cursor: pointer;
+}
+.time-picker-option:where([aria-pressed="true"]) {
+  border-color: var(--time-picker-option-selected-color);
+  background-color: var(--time-picker-option-selected-surface-color);
+  color: var(--time-picker-option-selected-color);
+}
+
+.time-picker-minute-stepper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--time-picker-minute-stepper-gap);
+  height: var(--time-picker-minute-stepper-height);
+  border-radius: var(--time-picker-minute-stepper-radius);
+  background-color: var(--time-picker-minute-stepper-surface-color);
+  text-align: center;
+}
+.time-picker-minute-stepper strong {
+  font-size: var(--time-picker-minute-value-size);
+  line-height: var(--time-picker-minute-value-line-height);
+  font-weight: var(--time-picker-minute-value-weight);
+}
+.time-picker-minute-stepper button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--time-picker-minute-control-size);
+  height: var(--time-picker-minute-control-size);
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+}
+.time-picker-minute-stepper button svg {
+  width: 100%;
+  height: 100%;
+}
+
+.time-picker-template-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--time-picker-template-footer-gap);
+}
+
+.time-picker-clear-action {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--time-picker-clear-color);
+  font-size: var(--time-picker-clear-size);
+  line-height: var(--time-picker-clear-line-height);
+  cursor: pointer;
+}
+
 .toast-stack {
   --toast-stack-translate-x: 0;
   --toast-stack-translate-y: 0;