Guide: Migrate to new variable scheme

With 1.0.0-next.18, we migrated to a new variable naming scheme. This affects you, if you used the CSS based theming approach. Many of the changes only made variable names clearer. Some variables have been added, and the overall system has been improved to allow clearer inheritance of values from other variables.

To ease migration, you can use this snippet, that converts most of the colors from the old system to the new system. In the long term, please migrate your colors to the new system.

:root {
  /* light */
  /* color */
  /* foreground */
  --interface-foreground-brand-on-primary: var(--ui-white, #ffffff);
  --interface-foreground-brand-on-secondary: var(--brand-950, #172554);
  --interface-foreground-brand-primary: var(--brand-500, #3b82f6);
  --interface-foreground-brand-secondary: var(--brand-50, #eff6ff);
  --interface-foreground-default-inverted: var(--ui-white, #ffffff);
  --interface-foreground-default-primary: var(--dialog-fg-default);
  --interface-foreground-default-secondary: var(--dialog-fg-subtle);
  --interface-foreground-default-tertiary: var(--dialog-fg-mute);
  --interface-foreground-disabled-disabled: var(--ui-300, #cbd5e1);
  --interface-foreground-disabled-on-disabled: var(--ui-400, #94a3b8);
  --interface-foreground-validation-danger: var(--forms-fg-error);
  --interface-foreground-validation-success: var(--forms-fg-success);
  --interface-foreground-validation-warning: var(--forms-fg-warn);
  /* background */
  --interface-background-brand-primary: var(--brand-500, #3b82f6);
  --interface-background-brand-primary-hover: var(--ui-900, #0f172a);
  --interface-background-brand-secondary: var(--bg-default);
  --interface-background-brand-secondary-hover: var(--brand-100, #dbeafe);
  --interface-background-default-inverted: var(--ui-900, #0f172a);
  --interface-background-default-inverted-hover: var(--ui-800, #1e293b);
  --interface-background-default-none: var(--ui-transparent, #ffffff00);
  --interface-background-default-primary: var(--dialog-bg-default);
  --interface-background-default-primary-hover: var(--forms-bg-hover);
  --interface-background-default-secondary: var(--dialog-bg-subtle, #f8fafc);
  --interface-background-default-secondary-hover: var(--ui-200, #e2e8f0);
  --interface-background-default-tertiary: var(--ui-200, #e2e8f0);
  --interface-background-default-tertiary-hover: var(--ui-300, #cbd5e1);
  --interface-background-disabled-disabled: var(--ui-200, #e2e8f0);
  --interface-background-validation-danger: var(--ui-danger, #ef4444);
  --interface-background-validation-success: var(--ui-success, #22c55e);
  --interface-background-validation-warning: var(--ui-warning, #eab308);
  /* border */
  --interface-border-brand-brand: var(--brand-500, #3b82f6);
  --interface-border-default-inverted: var(--ui-700, #334155);
  --interface-border-default-none: var(--ui-transparent, #ffffff00);
  --interface-border-default-primary: var(--dialog-border-default);
  --interface-border-disabled-disabled: var(--forms-fg-disabled);
  --interface-border-validation-danger: var(--forms-border-error);
  --interface-border-validation-success: var(--forms-border-success);
  --interface-border-validation-warning: var(--forms-border-warn);
  /* buttons */
  /* identifier */
  --button-identifier-background-default: var(--button-identifier-bg-default);
  --button-identifier-background-hover: var(--button-identifier-bg-hover);
  --button-identifier-border-border-default: var(
    --button-identifier-border-default
  );
  --button-identifier-border-border-hover: var(
    --button-identifier-border-hover
  );
  --button-identifier-foreground-default: var(--button-identifier-fg-default);
  --button-identifier-foreground-hover: var(--button-identifier-fg-subtle);
  /* links */
  --button-link-disabled: var(--links-link-disabled);
  --button-link-brand-brand: var(--links-link-default);
  --button-link-brand-brand-hover: var(--links-link-hover);
  --button-link-default-primary: var(--links-link-inverted-default);
  --button-link-default-primary-hover: var(--links-link-inverted-hover);
  --button-link-default-secondary: var(--links-link-mute-default);
  --button-link-default-secondary-hover: var(--links-link-mute-hover);
  /* primary */
  --button-primary-background-default: var(--button-primary-bg-default);
  --button-primary-background-disabled: var(--button-primary-bg-disabled);
  --button-primary-background-hover: var(--button-primary-bg-hover);
  --button-primary-border-default: var(--button-primary-border-default);
  --button-primary-border-disabled: var(--button-primary-border-disabled);
  --button-primary-border-hover: var(--button-primary-border-hover);
  --button-primary-foreground-default: var(--button-primary-fg-default);
  --button-primary-foreground-disabled: var(--button-primary-fg-disabled);
  --button-primary-foreground-hover: var(--button-primary-fg-hover);
  /* secondary */
  --button-secondary-background-default: var(--button-secondary-bg-default);
  --button-secondary-background-disabled: var(--button-secondary-bg-disabled);
  --button-secondary-background-hover: var(--button-secondary-bg-hover);
  --button-secondary-border-default: var(--button-secondary-border-default);
  --button-secondary-border-disabled: var(--button-secondary-border-disabled);
  --button-secondary-border-hover: var(--button-secondary-border-hover);
  --button-secondary-foreground-default: var(--button-secondary-fg-default);
  --button-secondary-foreground-disabled: var(--button-secondary-fg-disabled);
  --button-secondary-foreground-hover: var(--button-secondary-fg-hover);
  /* social */
  --button-social-background-default: var(
    --button-social-bg-default,
    var(--button-secondary-bg-default)
  );
  --button-social-background-disabled: var(
    --button-social-bg-disabled,
    var(--button-secondary-bg-disabled)
  );
  --button-social-background-generic-provider: var(
    --button-social-bg-provider,
    var(--button-secondary-bg-provider)
  );
  --button-social-background-hover: var(
    --button-social-bg-hover,
    var(--button-secondary-bg-hover)
  );
  --button-social-border-default: var(
    --button-social-border-default,
    var(--button-secondary-border-default)
  );
  --button-social-border-disabled: var(
    --button-social-border-disabled,
    var(--button-secondary-border-disabled)
  );
  --button-social-border-generic-provider: var(
    --button-social-border-provider,
    var(--button-secondary-border-provider)
  );
  --button-social-border-hover: var(
    --button-social-border-hover,
    var(--button-secondary-border-hover)
  );
  --button-social-foreground-default: var(
    --button-social-fg-default,
    var(--button-secondary-fg-default)
  );
  --button-social-foreground-disabled: var(
    --button-social-fg-disabled,
    var(--button-secondary-fg-disabled)
  );
  --button-social-foreground-generic-provider: var(
    --button-social-fg-provider,
    var(--button-secondary-fg-provider)
  );
  --button-social-foreground-hover: var(
    --button-social-fg-hover,
    var(--button-secondary-fg-hover)
  );
  /* checkbox */
  --checkbox-background-checked: var(--forms-checkbox-checkbox-bg-checked);
  --checkbox-background-default: var(--forms-checkbox-checkbox-bg-default);
  --checkbox-border-checkbox-border-checked: var(
    --forms-checkbox-checkbox-border-checked
  );
  --checkbox-border-checkbox-border-default: var(
    --forms-checkbox-checkbox-border-default
  );
  --checkbox-foreground-checked: var(--forms-checkbox-checkbox-fg-checked);
  --checkbox-foreground-default: var(--forms-checkbox-checkbox-fg-default);
  /* form */
  --form-background-default: var(--dialog-bg-default);
  --form-border-default: var(--dialog-border-default);
  /* input */
  --input-background-default: var(--forms-bg-default);
  --input-background-disabled: var(--forms-bg-disabled);
  --input-background-hover: var(--forms-bg-hover);
  --input-border-default: var(--forms-border-default);
  --input-border-disabled: var(--forms-border-disabled);
  --input-border-focus: var(--forms-border-focus);
  --input-border-hover: var(--forms-border-hover);
  --input-foreground-disabled: var(--forms-fg-disabled);
  --input-foreground-primary: var(--forms-fg-default);
  --input-foreground-secondary: var(--forms-fg-subtle);
  --input-foreground-tertiary: var(--forms-fg-mute);
  /* radio */
  --radio-background-checked: var(--forms-radio-radio-bg-checked);
  --radio-background-default: var(--forms-radio-radio-bg-default);
  --radio-border-checked: var(--forms-radio-radio-border-checked);
  --radio-border-default: var(--forms-radio-radio-border-default);
  --radio-foreground-checked: var(--forms-radio-radio-fg-checked);
  --radio-foreground-default: var(--forms-radio-radio-fg-default);
  /* toggle */
  --toggle-background-checked: var(--forms-toggle-toggle-bg-checked);
  --toggle-background-default: var(--forms-toggle-toggle-bg-default);
  --toggle-border-checked: var(--forms-toggle-toggle-border-checked);
  --toggle-border-default: var(--forms-toggle-toggle-border-default);
  --toggle-foreground-checked: var(--forms-toggle-toggle-fg-checked);
  --toggle-foreground-default: var(--forms-toggle-toggle-fg-default);
  /* ory */
  --ory-background-default: var(--branding-bg-default);
  --ory-border-default: var(--branding-border-default);
  --ory-foreground-default: var(--branding-fg-default);
}