|
Color AccentAccent color for Therapy. Used as primary button background, hero area background, and as a link color. This color provides accessible contrast when used for text on light background.
|
--as-color-accent |
|
Color Accent StrongUsed for theming purposes. Created from Color Accent by lowering lightness by --as-color-lightness-factor value.
|
--as-color-accent-strong |
|
Color Accent WeakUsed for theming purposes. Created from Color Accent by increasing lightness by --as-color-lightness-factor value.
|
--as-color-accent-weak |
|
Color TextDefault text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.
|
--as-color-text |
|
Color Text StrongCreated from Color Text by lowering lightness by --as-color-lightness-factor value.
|
--as-color-text-strong |
|
Color Text WeakCreated from Color Text by increasing lightness by --as-color-lightness-factor value.
|
--as-color-text-weak |
|
Color Text NeutralCreated from Color Text by increasing lightness by --as-color-lightness-factor times 5 and reducing saturation component to 0.
|
--as-color-text-neutral |
|
Color BackgroundDefault color for app background.
|
--as-color-background |
|
Color Border PanelDefault background color for panel component.
|
--as-color-border-panel |
|
Color Background PanelDefault border color for panel component.
|
--as-color-background-panel |
|
Color Text ButtonDefault button text color.
|
--as-color-text-button |
|
Color Text Button InvertedDefault button inverted text color.
|
--as-color-text-button-inverted |
|
Color Background ButtonDefault background color for button. Initially matches Color Accent.
|
--as-color-background-button |
|
Color Background Button StrongCreated from Color Background Button by decreasing lightness by --as-color-lightness-factor value.
|
--as-color-background-button-strong |
|
Color Background Button WeakCreated from Color Background Button by increasing lightness by --as-color-lightness-factor value..
|
--as-color-background-button-weak |
|
Color Text NavDefault color for navigation links.
|
--as-color-text-nav |
|
Color Background NavDefault background color for navigation links.
|
--as-color-background-nav |
|
Color Background Nav StrongCreated from Color Background Nav by decreasing lightness by --as-color-lightness-factor value.
|
--as-color-background-nav-strong |
|
Color Background Nav WeakCreated from Color Background Nav by decreasing lightness by --as-color-lightness-factor value.
|
--as-color-background-nav-weak |
|
Color Text Nav ActiveDefault active color for navigation links.
|
--as-color-text-nav-active |
|
Color Status WarningDefault color for warning messages.
|
--as-color-status-warning |
|
Color Status Warning WeakCreated from Color Status Warning by increasing lightness by --as-color-lightness-factor value.
|
--as-color-status-warning-weak |
|
Color Status Warning StrongCreated from Color Status Warning by decreasing lightness by --as-color-lightness-factor value.
|
--as-color-status-warning-strong |
|
Color Status ErrorDefault color for error messages.
|
--as-color-status-error |
|
Color Status Error WeakCreated from Color Status Error by increasing lightness by --as-color-lightness-factor value.
|
--as-color-status-error-weak |
|
Color Status Error StrongCreated from Color Status Error by decreasing lightness by --as-color-lightness-factor value.
|
--as-color-status-error-strong |
|
Color Status SuccessDefault color for success messages.
|
--as-color-status-success |
|
Color Status Success WeakCreated from Color Status Success by increasing lightness by --as-color-lightness-factor value.
|
--as-color-status-success-weak |
|
Color Status Success StrongCreated from Color Status Success by decreasing lightness by --as-color-lightness-factor value.
|
--as-color-status-success-strong |
|
Color Status NeutralDefault color for neutral messages.
|
--as-color-status-neutral |
|
Color OverlayDefault color for overlays.
|
--as-color-overlay |
|
Color ShadowDefault base color for box shadows.
|
--as-color-shadow |