@ory/elements-react 1.0.0-next.24 → 1.0.0-next.27

package/dist/theme/default/index.css

@@ -1,3 +1,156 @@
+/* tailwind/generated/default-variables.css */
+:root {
+  --ui-100: #f1f5f9;
+  --ui-200: #e2e8f0;
+  --ui-300: #cbd5e1;
+  --ui-400: #94a3b8;
+  --ui-50: #f8fafc;
+  --ui-500: #64748b;
+  --ui-600: #475569;
+  --ui-700: #334155;
+  --ui-800: #1e293b;
+  --ui-900: #0f172a;
+  --ui-950: #020617;
+  --ui-black: #000000;
+  --ui-danger: #ef4444;
+  --ui-success: #22c55e;
+  --ui-transparent: #ffffff00;
+  --ui-warning: #eab308;
+  --ui-white: #ffffff;
+  --button-identifier-background-default: var( --interface-background-brand-secondary );
+  --button-identifier-background-hover: var( --interface-background-brand-secondary-hover );
+  --button-identifier-border-border-default: var( --interface-border-brand-brand );
+  --button-identifier-border-border-hover: var(--interface-border-brand-brand);
+  --button-identifier-foreground-default: var( --interface-foreground-brand-on-secondary );
+  --button-identifier-foreground-hover: var( --interface-foreground-brand-on-secondary );
+  --button-link-brand-brand: var(--interface-foreground-brand-primary);
+  --button-link-brand-brand-hover: var(--interface-foreground-default-primary);
+  --button-link-default-primary: var(--interface-foreground-default-primary);
+  --button-link-default-primary-hover: var( --interface-foreground-brand-primary );
+  --button-link-default-secondary: var( --interface-foreground-default-secondary );
+  --button-link-default-secondary-hover: var( --interface-foreground-default-tertiary );
+  --button-link-disabled-disabled: var( --interface-foreground-disabled-disabled );
+  --button-primary-background-default: var( --interface-background-brand-primary );
+  --button-primary-background-disabled: var( --interface-background-disabled-disabled );
+  --button-primary-background-hover: var( --interface-background-brand-primary-hover );
+  --button-primary-border-default: var(--interface-border-default-none);
+  --button-primary-border-disabled: var(--interface-border-disabled-disabled);
+  --button-primary-border-hover: var(--interface-border-default-none);
+  --button-primary-foreground-default: var( --interface-foreground-brand-on-primary );
+  --button-primary-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
+  --button-primary-foreground-hover: var( --interface-foreground-brand-on-primary );
+  --button-secondary-background-default: var( --interface-background-default-primary );
+  --button-secondary-background-disabled: var( --interface-background-disabled-disabled );
+  --button-secondary-background-hover: var( --interface-background-default-primary-hover );
+  --button-secondary-border-default: var(--interface-border-default-primary);
+  --button-secondary-border-disabled: var(--interface-border-disabled-disabled);
+  --button-secondary-border-hover: var(--interface-border-default-primary);
+  --button-secondary-foreground-default: var( --interface-foreground-default-primary );
+  --button-secondary-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
+  --button-secondary-foreground-hover: var( --interface-foreground-default-secondary );
+  --button-social-background-default: var( --interface-background-default-primary );
+  --button-social-background-disabled: var( --interface-background-disabled-disabled );
+  --button-social-background-generic-provider: var( --interface-background-default-inverted );
+  --button-social-background-hover: var( --interface-background-default-primary-hover );
+  --button-social-border-default: var(--interface-border-default-primary);
+  --button-social-border-disabled: var(--interface-border-disabled-disabled);
+  --button-social-border-generic-provider: var(--interface-border-default-none);
+  --button-social-border-hover: var(--interface-border-default-primary);
+  --button-social-foreground-default: var( --interface-foreground-default-primary );
+  --button-social-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
+  --button-social-foreground-generic-provider: var( --interface-foreground-default-inverted );
+  --button-social-foreground-hover: var( --interface-foreground-default-secondary );
+  --checkbox-background-checked: var(--interface-background-brand-primary);
+  --checkbox-background-default: var(--interface-background-default-secondary);
+  --checkbox-border-checkbox-border-checked: var( --interface-border-brand-brand );
+  --checkbox-border-checkbox-border-default: var( --interface-border-default-primary );
+  --checkbox-foreground-checked: var(--interface-foreground-brand-on-primary);
+  --checkbox-foreground-default: var(--interface-foreground-default-primary);
+  --form-background-default: var(--interface-background-default-primary);
+  --form-border-default: var(--interface-border-default-primary);
+  --input-background-default: var(--interface-background-default-primary);
+  --input-background-disabled: var(--interface-background-disabled-disabled);
+  --input-background-hover: var(--interface-background-default-primary-hover);
+  --input-border-default: var(--interface-border-default-primary);
+  --input-border-disabled: var(--interface-border-disabled-disabled);
+  --input-border-focus: var(--interface-border-brand-brand);
+  --input-border-hover: var(--interface-border-default-primary);
+  --input-foreground-disabled: var(--interface-foreground-disabled-on-disabled);
+  --input-foreground-primary: var(--interface-foreground-default-primary);
+  --input-foreground-secondary: var(--interface-foreground-default-secondary);
+  --input-foreground-tertiary: var(--interface-foreground-default-tertiary);
+  --interface-background-brand-primary: var(--brand-500);
+  --interface-background-brand-primary-hover: var(--brand-400);
+  --interface-background-brand-secondary: var(--brand-50);
+  --interface-background-brand-secondary-hover: var(--brand-100);
+  --interface-background-default-inverted: var(--ui-900);
+  --interface-background-default-inverted-hover: var(--ui-800);
+  --interface-background-default-none: var(--ui-transparent);
+  --interface-background-default-primary: var(--ui-white);
+  --interface-background-default-primary-hover: var(--ui-50);
+  --interface-background-default-secondary: var(--ui-50);
+  --interface-background-default-secondary-hover: var(--ui-200);
+  --interface-background-default-tertiary: var(--ui-200);
+  --interface-background-default-tertiary-hover: var(--ui-300);
+  --interface-background-disabled-disabled: var(--ui-200);
+  --interface-background-validation-danger: var(--ui-danger);
+  --interface-background-validation-success: var(--ui-success);
+  --interface-background-validation-warning: var(--ui-warning);
+  --interface-border-brand-brand: var(--brand-500);
+  --interface-border-default-inverted: var(--ui-700);
+  --interface-border-default-none: var(--ui-transparent);
+  --interface-border-default-primary: var(--ui-300);
+  --interface-border-disabled-disabled: var(--ui-300);
+  --interface-border-validation-danger: var(--ui-danger);
+  --interface-border-validation-success: var(--ui-success);
+  --interface-border-validation-warning: var(--ui-warning);
+  --interface-foreground-brand-on-primary: var(--brand-50);
+  --interface-foreground-brand-on-secondary: var(--brand-950);
+  --interface-foreground-brand-primary: var(--brand-500);
+  --interface-foreground-brand-secondary: var(--brand-50);
+  --interface-foreground-default-inverted: var(--ui-white);
+  --interface-foreground-default-primary: var(--ui-900);
+  --interface-foreground-default-secondary: var(--ui-700);
+  --interface-foreground-default-tertiary: var(--ui-500);
+  --interface-foreground-disabled-disabled: var(--ui-300);
+  --interface-foreground-disabled-on-disabled: var(--ui-400);
+  --interface-foreground-validation-danger: var(--ui-danger);
+  --interface-foreground-validation-success: var(--ui-success);
+  --interface-foreground-validation-warning: var(--ui-warning);
+  --ory-background-default: var(--interface-background-default-primary);
+  --ory-border-default: var(--interface-border-default-primary);
+  --ory-foreground-default: var(--interface-foreground-default-primary);
+  --radio-background-checked: var(--interface-background-brand-primary);
+  --radio-background-default: var(--interface-background-default-secondary);
+  --radio-border-checked: var(--interface-border-brand-brand);
+  --radio-border-default: var(--interface-border-default-primary);
+  --radio-foreground-checked: var(--interface-foreground-brand-on-primary);
+  --radio-foreground-default: var(--interface-foreground-default-primary);
+  --toggle-background-checked: var(--interface-background-brand-primary);
+  --toggle-background-default: var(--interface-background-default-secondary);
+  --toggle-border-checked: var(--interface-border-default-none);
+  --toggle-border-default: var(--interface-border-default-primary);
+  --toggle-foreground-checked: var(--interface-foreground-brand-on-primary);
+  --toggle-foreground-default: var(--interface-foreground-brand-primary);
+  --brand-100: var(--ui-100);
+  --brand-200: var(--ui-300);
+  --brand-300: var(--ui-500);
+  --brand-400: var(--ui-700);
+  --brand-50: var(--ui-50);
+  --brand-500: var(--ui-900);
+  --brand-600: var(--ui-white);
+  --brand-700: var(--ui-200);
+  --brand-800: var(--ui-400);
+  --brand-900: var(--ui-600);
+  --brand-950: var(--ui-800);
+  --border-radius-buttons: 0.25rem;
+  --border-radius-forms: 0.25rem;
+  --border-radius-general: 0.25rem;
+  --border-radius-branding: 0.5rem;
+  --border-radius-cards: 0.75rem;
+  --border-radius-identifier: 62.4375rem;
+}
+
 /* src/theme/default/global.css */
 *,
 ::before,
@@ -469,9 +622,6 @@ video {
 .max-w-\[60\%\] {
   max-width: 60%;
 }
-.max-w-\[896px\] {
-  max-width: 896px;
-}
 .max-w-full {
   max-width: 100%;
 }
@@ -594,28 +744,31 @@ video {
 .text-nowrap {
   text-wrap: nowrap;
 }
-.rounded {
-  border-radius: 0.25rem;
+.rounded-\[999px\] {
+  border-radius: 999px;
+}
+.rounded-buttons {
+  border-radius: var(--border-radius-buttons);
 }
 .rounded-cards {
-  border-radius: 0.75rem;
+  border-radius: var(--border-radius-cards);
 }
 .rounded-forms {
-  border-radius: 0.25rem;
-}
-.rounded-full {
-  border-radius: 9999px;
+  border-radius: var(--border-radius-forms);
 }
 .rounded-general {
-  border-radius: 0.25rem;
+  border-radius: var(--border-radius-general);
+}
+.rounded-identifier {
+  border-radius: var(--border-radius-identifier);
 }
-.rounded-b-xl {
-  border-bottom-right-radius: 0.75rem;
-  border-bottom-left-radius: 0.75rem;
+.rounded-b-cards {
+  border-bottom-right-radius: var(--border-radius-cards);
+  border-bottom-left-radius: var(--border-radius-cards);
 }
-.rounded-t-xl {
-  border-top-left-radius: 0.75rem;
-  border-top-right-radius: 0.75rem;
+.rounded-t-cards {
+  border-top-left-radius: var(--border-radius-cards);
+  border-top-right-radius: var(--border-radius-cards);
 }
 .border {
   border-width: 1px;
@@ -633,74 +786,74 @@ video {
   border-style: solid;
 }
 .border-button-identifier-border-border-default {
-  border-color: var(--button-identifier-border-border-default, var(--interface-border-brand-brand, #3b82f6));
+  border-color: var(--button-identifier-border-border-default);
 }
 .border-button-secondary-border-default {
-  border-color: var(--button-secondary-border-default, var(--interface-border-default-primary, #cbd5e1));
+  border-color: var(--button-secondary-border-default);
 }
 .border-button-social-border-default {
-  border-color: var(--button-social-border-default, var(--interface-border-default-primary, #cbd5e1));
+  border-color: var(--button-social-border-default);
 }
 .border-checkbox-border-checkbox-border-default {
-  border-color: var(--checkbox-border-checkbox-border-default, var(--interface-border-default-primary, #cbd5e1));
+  border-color: var(--checkbox-border-checkbox-border-default);
 }
 .border-form-border-default {
-  border-color: var(--form-border-default, var(--interface-border-default-primary, #cbd5e1));
+  border-color: var(--form-border-default);
 }
 .border-input-border-default {
-  border-color: var(--input-border-default, var(--interface-border-default-primary, #cbd5e1));
+  border-color: var(--input-border-default);
 }
 .border-input-border-focus {
-  border-color: var(--input-border-focus, var(--interface-border-brand-brand, #3b82f6));
+  border-color: var(--input-border-focus);
 }
 .border-interface-border-default-primary {
-  border-color: var(--interface-border-default-primary, var(--ui-300, #cbd5e1));
+  border-color: var(--interface-border-default-primary);
 }
 .border-interface-border-validation-danger {
-  border-color: var(--interface-border-validation-danger, var(--ui-danger, #ef4444));
+  border-color: var(--interface-border-validation-danger);
 }
 .border-ory-border-default {
-  border-color: var(--ory-border-default, var(--interface-border-default-primary, #cbd5e1));
+  border-color: var(--ory-border-default);
 }
 .bg-\[white\] {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 .bg-button-identifier-background-default {
-  background-color: var(--button-identifier-background-default, var(--interface-background-brand-secondary, #eff6ff));
+  background-color: var(--button-identifier-background-default);
 }
 .bg-button-primary-background-default {
-  background-color: var(--button-primary-background-default, var(--interface-background-brand-primary, #3b82f6));
+  background-color: var(--button-primary-background-default);
 }
 .bg-button-secondary-background-default {
-  background-color: var(--button-secondary-background-default, var(--interface-background-default-primary, #ffffff));
+  background-color: var(--button-secondary-background-default);
 }
 .bg-button-social-background-default {
-  background-color: var(--button-social-background-default, var(--interface-background-default-primary, #ffffff));
+  background-color: var(--button-social-background-default);
 }
 .bg-checkbox-background-default {
-  background-color: var(--checkbox-background-default, var(--interface-background-default-secondary, #f8fafc));
+  background-color: var(--checkbox-background-default);
 }
 .bg-form-background-default {
-  background-color: var(--form-background-default, var(--interface-background-default-primary, #ffffff));
+  background-color: var(--form-background-default);
 }
 .bg-input-background-default {
-  background-color: var(--input-background-default, var(--interface-background-default-primary, #ffffff));
+  background-color: var(--input-background-default);
 }
 .bg-interface-background-brand-primary {
-  background-color: var(--interface-background-brand-primary, var(--brand-500, #3b82f6));
+  background-color: var(--interface-background-brand-primary);
 }
 .bg-interface-background-default-primary {
-  background-color: var(--interface-background-default-primary, var(--ui-white, #ffffff));
+  background-color: var(--interface-background-default-primary);
 }
 .bg-interface-background-default-secondary {
-  background-color: var(--interface-background-default-secondary, var(--ui-50, #f8fafc));
+  background-color: var(--interface-background-default-secondary);
 }
 .bg-ory-background-default {
-  background-color: var(--ory-background-default, var(--interface-background-default-primary, #ffffff));
+  background-color: var(--ory-background-default);
 }
 .fill-checkbox-foreground-checked {
-  fill: var(--checkbox-foreground-checked, var(--interface-foreground-default-inverted, #ffffff));
+  fill: var(--checkbox-foreground-checked);
 }
 .object-contain {
   -o-object-fit: contain;
@@ -842,43 +995,43 @@ video {
   line-height: 1.25;
 }
 .text-button-identifier-foreground-default {
-  color: var(--button-identifier-foreground-default, var(--interface-foreground-brand-on-secondary, #172554));
+  color: var(--button-identifier-foreground-default);
 }
 .text-button-link-brand-brand {
-  color: var(--button-link-brand-brand, var(--interface-foreground-brand-primary, #3b82f6));
+  color: var(--button-link-brand-brand);
 }
 .text-button-link-default-secondary {
-  color: var(--button-link-default-secondary, var(--interface-foreground-default-secondary, #334155));
+  color: var(--button-link-default-secondary);
 }
 .text-button-primary-foreground-default {
-  color: var(--button-primary-foreground-default, var(--interface-foreground-brand-on-primary, #ffffff));
+  color: var(--button-primary-foreground-default);
 }
 .text-button-secondary-foreground-default {
-  color: var(--button-secondary-foreground-default, var(--interface-foreground-default-primary, #0f172a));
+  color: var(--button-secondary-foreground-default);
 }
 .text-button-social-foreground-default {
-  color: var(--button-social-foreground-default, var(--interface-foreground-default-primary, #0f172a));
+  color: var(--button-social-foreground-default);
 }
 .text-input-foreground-primary {
-  color: var(--input-foreground-primary, var(--interface-foreground-default-primary, #0f172a));
+  color: var(--input-foreground-primary);
 }
 .text-interface-foreground-brand-primary {
-  color: var(--interface-foreground-brand-primary, var(--brand-500, #3b82f6));
+  color: var(--interface-foreground-brand-primary);
 }
 .text-interface-foreground-default-primary {
-  color: var(--interface-foreground-default-primary, var(--ui-900, #0f172a));
+  color: var(--interface-foreground-default-primary);
 }
 .text-interface-foreground-default-secondary {
-  color: var(--interface-foreground-default-secondary, var(--ui-700, #334155));
+  color: var(--interface-foreground-default-secondary);
 }
 .text-interface-foreground-default-tertiary {
-  color: var(--interface-foreground-default-tertiary, var(--ui-500, #64748b));
+  color: var(--interface-foreground-default-tertiary);
 }
 .text-interface-foreground-validation-danger {
-  color: var(--interface-foreground-validation-danger, var(--ui-danger, #ef4444));
+  color: var(--interface-foreground-validation-danger);
 }
 .text-interface-foreground-validation-success {
-  color: var(--interface-foreground-validation-success, var(--ui-success, #22c55e));
+  color: var(--interface-foreground-validation-success);
 }
 .underline {
   text-decoration-line: underline;
@@ -906,10 +1059,10 @@ video {
   --tw-ring-inset: inset;
 }
 .ring-button-primary-border-default {
-  --tw-ring-color: var(--button-primary-border-default, var(--interface-border-default-none, #ffffff00));
+  --tw-ring-color: var(--button-primary-border-default);
 }
 .ring-button-secondary-border-default {
-  --tw-ring-color: var(--button-secondary-border-default, var(--interface-border-default-primary, #cbd5e1));
+  --tw-ring-color: var(--button-secondary-border-default);
 }
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1011,70 +1164,70 @@ video {
   height: 20px;
 }
 .placeholder\:text-input-foreground-tertiary::-moz-placeholder {
-  color: var(--input-foreground-tertiary, var(--interface-foreground-default-tertiary, #64748b));
+  color: var(--input-foreground-tertiary);
 }
 .placeholder\:text-input-foreground-tertiary::placeholder {
-  color: var(--input-foreground-tertiary, var(--interface-foreground-default-tertiary, #64748b));
+  color: var(--input-foreground-tertiary);
 }
 .first\:border-0:first-child {
   border-width: 0px;
 }
 .checked\:border-checkbox-border-checkbox-border-checked:checked {
-  border-color: var(--checkbox-border-checkbox-border-checked, var(--interface-border-brand-brand, #3b82f6));
+  border-color: var(--checkbox-border-checkbox-border-checked);
 }
 .checked\:bg-checkbox-background-checked:checked {
-  background-color: var(--checkbox-background-checked, var(--interface-background-brand-primary, #3b82f6));
+  background-color: var(--checkbox-background-checked);
 }
 .hover\:border-button-identifier-border-border-hover:hover {
-  border-color: var(--button-identifier-border-border-hover, var(--interface-border-brand-brand, #3b82f6));
+  border-color: var(--button-identifier-border-border-hover);
 }
 .hover\:border-button-social-border-hover:hover {
-  border-color: var(--button-social-border-hover, var(--interface-border-default-primary, #cbd5e1));
+  border-color: var(--button-social-border-hover);
 }
 .hover\:border-input-border-hover:hover {
-  border-color: var(--input-border-hover, var(--interface-border-default-primary, #cbd5e1));
+  border-color: var(--input-border-hover);
 }
 .hover\:bg-button-identifier-background-hover:hover {
-  background-color: var(--button-identifier-background-hover, var(--interface-background-brand-secondary-hover, #dbeafe));
+  background-color: var(--button-identifier-background-hover);
 }
 .hover\:bg-button-primary-background-hover:hover {
-  background-color: var(--button-primary-background-hover, var(--interface-background-default-inverted, #0f172a));
+  background-color: var(--button-primary-background-hover);
 }
 .hover\:bg-button-secondary-background-hover:hover {
-  background-color: var(--button-secondary-background-hover, var(--interface-background-default-primary-hover, #f8fafc));
+  background-color: var(--button-secondary-background-hover);
 }
 .hover\:bg-button-social-background-hover:hover {
-  background-color: var(--button-social-background-hover, var(--interface-background-default-primary-hover, #f8fafc));
+  background-color: var(--button-social-background-hover);
 }
 .hover\:bg-input-background-hover:hover {
-  background-color: var(--input-background-hover, var(--interface-background-default-primary-hover, #f8fafc));
+  background-color: var(--input-background-hover);
 }
 .hover\:bg-interface-background-default-primary-hover:hover {
-  background-color: var(--interface-background-default-primary-hover, var(--ui-50, #f8fafc));
+  background-color: var(--interface-background-default-primary-hover);
 }
 .hover\:text-button-link-brand-brand-hover:hover {
-  color: var(--button-link-brand-brand-hover, var(--interface-foreground-default-primary, #0f172a));
+  color: var(--button-link-brand-brand-hover);
 }
 .hover\:text-button-link-default-secondary-hover:hover {
-  color: var(--button-link-default-secondary-hover, var(--interface-foreground-default-tertiary, #64748b));
+  color: var(--button-link-default-secondary-hover);
 }
 .hover\:text-button-primary-foreground-hover:hover {
-  color: var(--button-primary-foreground-hover, var(--interface-foreground-default-inverted, #ffffff));
+  color: var(--button-primary-foreground-hover);
 }
 .hover\:text-button-secondary-foreground-hover:hover {
-  color: var(--button-secondary-foreground-hover, var(--interface-foreground-default-secondary, #334155));
+  color: var(--button-secondary-foreground-hover);
 }
 .hover\:text-button-social-foreground-hover:hover {
-  color: var(--button-social-foreground-hover, var(--interface-foreground-default-secondary, #334155));
+  color: var(--button-social-foreground-hover);
 }
 .hover\:ring-button-primary-border-hover:hover {
-  --tw-ring-color: var(--button-primary-border-hover, var(--interface-border-default-none, #ffffff00));
+  --tw-ring-color: var(--button-primary-border-hover);
 }
 .hover\:ring-button-secondary-border-hover:hover {
-  --tw-ring-color: var(--button-secondary-border-hover, var(--interface-border-default-primary, #cbd5e1));
+  --tw-ring-color: var(--button-secondary-border-hover);
 }
 .focus\:border-input-border-focus:focus {
-  border-color: var(--input-border-focus, var(--interface-border-brand-brand, #3b82f6));
+  border-color: var(--input-border-focus);
 }
 .focus\:ring-0:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1085,7 +1238,7 @@ video {
     var(--tw-shadow, 0 0 #0000);
 }
 .focus-visible\:border-input-border-focus:focus-visible {
-  border-color: var(--input-border-focus, var(--interface-border-brand-brand, #3b82f6));
+  border-color: var(--input-border-focus);
 }
 .focus-visible\:outline-none:focus-visible {
   outline: 2px solid transparent;
@@ -1095,34 +1248,34 @@ video {
   cursor: not-allowed;
 }
 .disabled\:border-input-border-disabled:disabled {
-  border-color: var(--input-border-disabled, var(--interface-border-disabled-disabled, #cbd5e1));
+  border-color: var(--input-border-disabled);
 }
 .disabled\:bg-button-primary-background-disabled:disabled {
-  background-color: var(--button-primary-background-disabled, var(--interface-background-disabled-disabled, #e2e8f0));
+  background-color: var(--button-primary-background-disabled);
 }
 .disabled\:bg-button-secondary-background-disabled:disabled {
-  background-color: var(--button-secondary-background-disabled, var(--interface-background-disabled-disabled, #e2e8f0));
+  background-color: var(--button-secondary-background-disabled);
 }
 .disabled\:bg-input-background-disabled:disabled {
-  background-color: var(--input-background-disabled, var(--interface-background-disabled-disabled, #e2e8f0));
+  background-color: var(--input-background-disabled);
 }
 .disabled\:text-button-primary-foreground-disabled:disabled {
-  color: var(--button-primary-foreground-disabled, var(--interface-foreground-disabled-on-disabled, #94a3b8));
+  color: var(--button-primary-foreground-disabled);
 }
 .disabled\:text-button-secondary-foreground-disabled:disabled {
-  color: var(--button-secondary-foreground-disabled, var(--interface-foreground-disabled-on-disabled, #94a3b8));
+  color: var(--button-secondary-foreground-disabled);
 }
 .disabled\:text-input-foreground-disabled:disabled {
-  color: var(--input-foreground-disabled, var(--interface-foreground-disabled-on-disabled, #94a3b8));
+  color: var(--input-foreground-disabled);
 }
 .disabled\:ring-button-primary-border-disabled:disabled {
-  --tw-ring-color: var(--button-primary-border-disabled, var(--interface-border-disabled-disabled, #cbd5e1));
+  --tw-ring-color: var(--button-primary-border-disabled);
 }
 .disabled\:ring-button-secondary-border-disabled:disabled {
-  --tw-ring-color: var(--button-secondary-border-disabled, var(--interface-border-disabled-disabled, #cbd5e1));
+  --tw-ring-color: var(--button-secondary-border-disabled);
 }
 .group:hover .group-hover\:text-button-identifier-foreground-hover {
-  color: var(--button-identifier-foreground-hover, var(--interface-foreground-brand-on-secondary, #172554));
+  color: var(--button-identifier-foreground-hover);
 }
 .peer:checked ~ .peer-checked\:block {
   display: block;
@@ -1134,10 +1287,10 @@ video {
   pointer-events: none;
 }
 .data-\[disabled\]\:bg-button-secondary-background-disabled[data-disabled] {
-  background-color: var(--button-secondary-background-disabled, var(--interface-background-disabled-disabled, #e2e8f0));
+  background-color: var(--button-secondary-background-disabled);
 }
 .data-\[disabled\]\:text-button-secondary-foreground-disabled[data-disabled] {
-  color: var(--button-secondary-foreground-disabled, var(--interface-foreground-disabled-on-disabled, #94a3b8));
+  color: var(--button-secondary-foreground-disabled);
 }
 .data-\[state\=open\]\:animate-in[data-state=open] {
   animation-name: enter;
@@ -1185,31 +1338,31 @@ video {
   cursor: wait;
 }
 .loading\:border-button-social-border-disabled[data-loading=true] {
-  border-color: var(--button-social-border-disabled, var(--interface-border-disabled-disabled, #cbd5e1));
+  border-color: var(--button-social-border-disabled);
 }
 .loading\:bg-button-primary-background-default[data-loading=true] {
-  background-color: var(--button-primary-background-default, var(--interface-background-brand-primary, #3b82f6));
+  background-color: var(--button-primary-background-default);
 }
 .loading\:bg-button-secondary-background-default[data-loading=true] {
-  background-color: var(--button-secondary-background-default, var(--interface-background-default-primary, #ffffff));
+  background-color: var(--button-secondary-background-default);
 }
 .loading\:bg-button-social-background-disabled[data-loading=true] {
-  background-color: var(--button-social-background-disabled, var(--interface-background-disabled-disabled, #e2e8f0));
+  background-color: var(--button-social-background-disabled);
 }
 .loading\:text-button-primary-foreground-default[data-loading=true] {
-  color: var(--button-primary-foreground-default, var(--interface-foreground-brand-on-primary, #ffffff));
+  color: var(--button-primary-foreground-default);
 }
 .loading\:text-button-secondary-foreground-default[data-loading=true] {
-  color: var(--button-secondary-foreground-default, var(--interface-foreground-default-primary, #0f172a));
+  color: var(--button-secondary-foreground-default);
 }
 .loading\:text-button-social-foreground-disabled[data-loading=true] {
-  color: var(--button-social-foreground-disabled, var(--interface-foreground-disabled-on-disabled, #94a3b8));
+  color: var(--button-social-foreground-disabled);
 }
 .loading\:ring-button-primary-border-default[data-loading=true] {
-  --tw-ring-color: var(--button-primary-border-default, var(--interface-border-default-none, #ffffff00));
+  --tw-ring-color: var(--button-primary-border-default);
 }
 .loading\:ring-button-secondary-border-default[data-loading=true] {
-  --tw-ring-color: var(--button-secondary-border-default, var(--interface-border-default-primary, #cbd5e1));
+  --tw-ring-color: var(--button-secondary-border-default);
 }
 .loading\:before\:pointer-events-none[data-loading=true]::before {
   content: var(--tw-content);
@@ -1225,11 +1378,11 @@ video {
 }
 .loading\:before\:bg-button-primary-background-default[data-loading=true]::before {
   content: var(--tw-content);
-  background-color: var(--button-primary-background-default, var(--interface-background-brand-primary, #3b82f6));
+  background-color: var(--button-primary-background-default);
 }
 .loading\:before\:bg-button-secondary-background-default[data-loading=true]::before {
   content: var(--tw-content);
-  background-color: var(--button-secondary-background-default, var(--interface-background-default-primary, #ffffff));
+  background-color: var(--button-secondary-background-default);
 }
 .loading\:before\:opacity-80[data-loading=true]::before {
   content: var(--tw-content);
@@ -1253,9 +1406,9 @@ video {
     --tw-translate-y: 100%;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .max-sm\:rounded-b-md {
-    border-bottom-right-radius: 0.375rem;
-    border-bottom-left-radius: 0.375rem;
+  .max-sm\:rounded-b-branding {
+    border-bottom-right-radius: var(--border-radius-branding);
+    border-bottom-left-radius: var(--border-radius-branding);
   }
   .max-sm\:py-\[7px\] {
     padding-top: 7px;
@@ -1301,11 +1454,11 @@ video {
     align-items: center;
   }
   .sm\:rounded-cards {
-    border-radius: 0.75rem;
+    border-radius: var(--border-radius-cards);
   }
-  .sm\:rounded-r-lg {
-    border-top-right-radius: 0.5rem;
-    border-bottom-right-radius: 0.5rem;
+  .sm\:rounded-r-branding {
+    border-top-right-radius: var(--border-radius-branding);
+    border-bottom-right-radius: var(--border-radius-branding);
   }
   .sm\:border {
     border-width: 1px;