CSS Reference
This document provides a reference for the CSS variables used in Ory Elements. You can use these variables to customize the look and feel of your application.
CSS Variables Reference
| CSS Variable | Description |
|---|---|
--ui-100 | Default: #f1f5f9 |
--ui-200 | Default: #e2e8f0 |
--ui-300 | Default: #cbd5e1 |
--ui-400 | Default: #94a3b8 |
--ui-50 | Default: #f8fafc |
--ui-500 | Default: #64748b |
--ui-600 | Default: #475569 |
--ui-700 | Default: #334155 |
--ui-800 | Default: #1e293b |
--ui-900 | Default: #0f172a |
--ui-950 | Default: #020617 |
--ui-black | Default: #000000 |
--ui-danger | Default: #dc2626 |
--ui-success | Default: #22c55e |
--ui-transparent | Default: #ffffff00 |
--ui-warning | Default: #eab308 |
--ui-white | Default: #ffffff |
--brand-100 | Default: ui-100 |
--brand-200 | Default: ui-300 |
--brand-300 | Default: ui-500 |
--brand-400 | Default: ui-700 |
--brand-50 | Default: ui-50 |
--brand-500 | Default: ui-900 |
--brand-600 | Default: ui-white |
--brand-700 | Default: ui-200 |
--brand-800 | Default: ui-400 |
--brand-900 | Default: ui-600 |
--brand-950 | Default: ui-800 |
--button-identifier-background-default | The background color for the identifier button in its default state. Default: interface-background-brand-secondary |
--button-identifier-background-hover | The background color for the identifier button when hovered. Default: interface-background-brand-secondary-hover |
--button-identifier-border-border-default | The border color for the identifier button in its default state. Default: interface-border-brand-brand |
--button-identifier-border-border-hover | The border color for the identifier button when hovered. Default: interface-border-brand-brand |
--button-identifier-foreground-default | The text color for the identifier button in its default state. Default: interface-foreground-brand-on-secondary |
--button-identifier-foreground-hover | The text color for the identifier button when hovered. Default: interface-foreground-brand-on-secondary |
--button-link-brand-brand | The text color for links that are styled in the brand color Default: interface-foreground-brand-primary |
--button-link-brand-brand-hover | The text color for links that are styled in the brand color when hovered. Default: interface-foreground-default-primary |
--button-link-default-primary | The text color for default primary links. Default: interface-foreground-default-primary |
--button-link-default-primary-hover | The text color for default primary links when hovered. Default: interface-foreground-brand-primary |
--button-link-default-secondary | The text color for default secondary links. Default: interface-foreground-default-secondary |
--button-link-default-secondary-hover | The text color for default secondary links when hovered. Default: interface-foreground-default-tertiary |
--button-link-disabled-disabled | The text color for links that are disabled. Default: interface-foreground-disabled-disabled |
--button-primary-background-default | The background color for primary buttons in their default state. Default: interface-background-brand-primary |
--button-primary-background-disabled | The background color for primary buttons when disabled. Default: interface-background-disabled-disabled |
--button-primary-background-hover | The background color for primary buttons when hovered. Default: interface-background-brand-primary-hover |
--button-primary-border-default | The border color for primary buttons in their default state. Default: interface-border-default-none |
--button-primary-border-disabled | The border color for primary buttons when disabled. Default: interface-border-disabled-disabled |
--button-primary-border-hover | The border color for primary buttons when hovered. Default: interface-border-default-none |
--button-primary-foreground-default | The text color for primary buttons in their default state. Default: interface-foreground-brand-on-primary |
--button-primary-foreground-disabled | The text color for primary buttons when disabled. Default: interface-foreground-disabled-on-disabled |
--button-primary-foreground-hover | The text color for primary buttons when hovered. Default: interface-foreground-brand-on-primary |
--button-secondary-background-default | The background color for secondary buttons in their default state. Default: interface-background-default-primary |
--button-secondary-background-disabled | The background color for secondary buttons when disabled. Default: interface-background-disabled-disabled |
--button-secondary-background-hover | The background color for secondary buttons when hovered. Default: interface-background-default-primary-hover |
--button-secondary-border-default | The border color for secondary buttons in their default state. Default: interface-border-default-primary |
--button-secondary-border-disabled | The border color for secondary buttons when disabled. Default: interface-border-disabled-disabled |
--button-secondary-border-hover | The border color for secondary buttons when hovered. Default: interface-border-default-primary |
--button-secondary-foreground-default | The text color for secondary buttons in their default state. Default: interface-foreground-default-primary |
--button-secondary-foreground-disabled | The text color for secondary buttons when disabled. Default: interface-foreground-disabled-on-disabled |
--button-secondary-foreground-hover | The text color for secondary buttons when hovered. Default: interface-foreground-default-secondary |
--button-social-background-default | The background color for social buttons in their default state. Default: interface-background-default-primary |
--button-social-background-disabled | The background color for social buttons when disabled. Default: interface-background-disabled-disabled |
--button-social-background-generic-provider | The background color for social buttons for generic providers. Default: interface-background-default-inverted |
--button-social-background-hover | The background color for social buttons when hovered. Default: interface-background-default-primary-hover |
--button-social-border-default | The border color for social buttons in their default state. Default: interface-border-default-primary |
--button-social-border-disabled | The border color for social buttons when disabled. Default: interface-border-disabled-disabled |
--button-social-border-generic-provider | The border color for social buttons for generic providers. Default: interface-border-default-none |
--button-social-border-hover | The border color for social buttons when hovered. Default: interface-border-default-primary |
--button-social-foreground-default | The text color for social buttons in their default state. Default: interface-foreground-default-primary |
--button-social-foreground-disabled | The text color for social buttons when disabled. Default: interface-foreground-disabled-on-disabled |
--button-social-foreground-generic-provider | The text color for social buttons for generic providers. Default: interface-foreground-default-inverted |
--button-social-foreground-hover | The text color for social buttons when hovered. Default: interface-foreground-default-secondary |
--checkbox-background-checked | The background color for checkboxes when checked. Default: interface-background-brand-primary |
--checkbox-background-default | The background color for checkboxes when unchecked. Default: interface-background-default-secondary |
--checkbox-border-checkbox-border-checked | The border color for checkboxes when checked. Default: interface-border-brand-brand |
--checkbox-border-checkbox-border-default | The border color for checkboxes when unchecked. Default: interface-border-default-primary |
--checkbox-foreground-checked | The color of the checkmark in checkboxes when checked. Default: interface-foreground-brand-on-primary |
--checkbox-foreground-default | The text color for checkboxes when unchecked. Default: interface-foreground-default-primary |
--form-background-default | The default background color for forms. Default: interface-background-default-primary |
--form-border-default | The default border color for forms. Default: interface-border-default-primary |
--input-background-default | The default background color for input fields. Default: interface-background-default-primary |
--input-background-disabled | The background color for input fields when disabled. Default: interface-background-disabled-disabled |
--input-background-hover | The background color for input fields when hovered. Default: interface-background-default-primary-hover |
--input-border-default | The default border color for input fields. Default: interface-border-default-primary |
--input-border-disabled | The border color for input fields when disabled. Default: interface-border-disabled-disabled |
--input-border-focus | The border color for input fields when focused. Default: interface-border-brand-brand |
--input-border-hover | The border color for input fields when hovered. Default: interface-border-default-primary |
--input-foreground-disabled | The text color for input fields when disabled. Default: interface-foreground-disabled-on-disabled |
--input-foreground-primary | The primary text color for input fields. Default: interface-foreground-default-primary |
--input-foreground-secondary | The secondary text color for input fields. Default: interface-foreground-default-secondary |
--input-foreground-tertiary | The tertiary text color for input fields. Default: interface-foreground-default-tertiary |
--interface-background-brand-primary | The background color for interface elements styled with the brand primary color. Default: brand-500 |
--interface-background-brand-primary-hover | The background color for interface elements styled with the brand primary color when hovered. Default: brand-400 |
--interface-background-brand-secondary | The background color for interface elements styled with the brand secondary color. Default: brand-50 |
--interface-background-brand-secondary-hover | The background color for interface elements styled with the brand secondary color when hovered. Default: brand-100 |
--interface-background-default-inverted | The background color for interface elements in their default inverted state. Default: ui-900 |
--interface-background-default-inverted-hover | The background color for interface elements in their default inverted state when hovered. Default: ui-800 |
--interface-background-default-none | Unused Default: ui-transparent |
--interface-background-default-primary | The background color for primary interface elements in their default state. Default: ui-white |
--interface-background-default-primary-hover | The background color for primary interface elements when hovered. Default: ui-50 |
--interface-background-default-secondary | The background color for secondary interface elements in their default state. Default: ui-50 |
--interface-background-default-secondary-hover | The background color for secondary interface elements when hovered. Default: ui-200 |
--interface-background-default-tertiary | The background color for tertiary interface elements in their default state. Default: ui-200 |
--interface-background-default-tertiary-hover | The background color for tertiary interface elements when hovered. Default: ui-300 |
--interface-background-disabled-disabled | The background color for interface elements when disabled. Default: ui-200 |
--interface-background-validation-danger | The background color for interface elements indicating danger or error. Default: ui-danger |
--interface-background-validation-success | The background color for interface elements indicating success. Default: ui-success |
--interface-background-validation-warning | The background color for interface elements indicating a warning. Default: ui-warning |
--interface-border-brand-brand | The border color for interface elements styled with the brand color. Default: brand-500 |
--interface-border-default-inverted | The border color for interface elements in their default inverted state. Default: ui-700 |
--interface-border-default-none | Unused Default: ui-transparent |
--interface-border-default-primary | The border color for primary interface elements in their default state. Default: ui-300 |
--interface-border-disabled-disabled | The border color for interface elements when disabled. Default: ui-300 |
--interface-border-validation-danger | The border color for interface elements indicating danger or error. Default: ui-danger |
--interface-border-validation-success | The border color for interface elements indicating success. Default: ui-success |
--interface-border-validation-warning | The border color for interface elements indicating a warning. Default: ui-warning |
--interface-foreground-brand-on-primary | The text color for interface elements styled with the brand primary color. Default: brand-50 |
--interface-foreground-brand-on-secondary | The text color for interface elements styled with the brand secondary color. Default: brand-950 |
--interface-foreground-brand-primary | The text color for brand colored interface elements in their primary state. Default: brand-500 |
--interface-foreground-brand-secondary | The text color for brand colored interface elements in their secondary state. Default: brand-50 |
--interface-foreground-default-inverted | The text color for interface elements in their default inverted state. Default: ui-white |
--interface-foreground-default-primary | The text color for primary interface elements in their default state. Default: ui-900 |
--interface-foreground-default-secondary | The text color for secondary interface elements in their default state. Default: ui-700 |
--interface-foreground-default-tertiary | The text color for tertiary interface elements in their default state. Default: ui-500 |
--interface-foreground-disabled-disabled | The text color for interface elements when disabled. Default: ui-300 |
--interface-foreground-disabled-on-disabled | The text color for interface elements when disabled, specifically for elements that are on a disabled background. Default: ui-400 |
--interface-foreground-validation-danger | The text color for interface elements indicating danger or error. Default: ui-danger |
--interface-foreground-validation-success | The text color for interface elements indicating success. Default: ui-success |
--interface-foreground-validation-warning | The text color for interface elements indicating a warning. Default: ui-warning |
--ory-background-default | The background color for the Ory badge. Default: interface-background-default-primary |
--ory-border-default | The border color for the Ory badge. Default: interface-border-default-primary |
--ory-foreground-default | The text color for the Ory badge. Default: interface-foreground-default-primary |
--radio-background-checked | Unused Default: interface-background-brand-primary |
--radio-background-default | Unused Default: interface-background-default-secondary |
--radio-border-checked | Unused Default: interface-border-brand-brand |
--radio-border-default | Unused Default: interface-border-default-primary |
--radio-foreground-checked | Unused Default: interface-foreground-brand-on-primary |
--radio-foreground-default | Unused Default: interface-foreground-default-primary |
--toggle-background-checked | The background color for toggles when checked. Default: interface-background-brand-primary |
--toggle-background-default | The background color for toggles when unchecked. Default: interface-background-default-secondary |
--toggle-border-checked | The border color for toggles when checked. Default: interface-border-default-none |
--toggle-border-default | The border color for toggles when unchecked. Default: interface-border-default-primary |
--toggle-foreground-checked | The text color for toggles when checked. Default: interface-foreground-brand-on-primary |
--toggle-foreground-default | The text color for toggles when unchecked. Default: interface-foreground-brand-primary |