Tillbaka till dokumentationen
Färgväljare
En färgväljare som kan användas i ett formulär eller på andra ställen.
Information
Plan: Pro
Tillagd: 2026-10-24
Exempel
Egenskaper
| Egenskap | Typ | Standard |
|---|---|---|
| Värde | textsträng | "black" |
| Input - Background color | textsträng | "var(--ophixor-semantic-surface-base)" |
| Input - Border color | textsträng | "var(--ophixor-semantic-border-default)" |
| Input - Color | textsträng | "var(--ophixor-semantic-text-primary)" |
| Input - Box shadow | textsträng | "var(--ophixor-semantic-shadow-input)" |
| Input - Box shadow - Focus | textsträng | "var(--ophixor-semantic-focus-ring)" |
| Color box - Background color | textsträng | "var(--ophixor-semantic-surface-base)" |
| Color box - Background color - Image | textsträng | "var(--ophixor-semantic-border-default)" |
| Background color | textsträng | "var(--ophixor-semantic-surface-base)" |
| Background color - Backdrop | textsträng | "var(--ophixor-semantic-backdrop)" |
| Background color - Header | textsträng | "var(--ophixor-semantic-surface-base-tertiary)" |
| Background - Header | textsträng | "none" |
| Background color - Body | textsträng | "var(--ophixor-semantic-surface-base)" |
| Background color - Footer | textsträng | "var(--ophixor-semantic-surface-base)" |
| Border color | textsträng | "var(--ophixor-semantic-border-default)" |
| Box shadow | textsträng | "var(--ophixor-semantic-shadow-floating)" |
| Color | textsträng | "var(--ophixor-semantic-text-primary)" |
| Color - Header | textsträng | "var(--ophixor-semantic-text-primary)" |
| Color - Header - Hover | textsträng | "var(--ophixor-semantic-status-danger)" |
| Scrollbar - Color - 1 | textsträng | "var(--ophixor-semantic-scrollbar-color-1)" |
| Scrollbar - Color - 2 | textsträng | "var(--ophixor-semantic-scrollbar-color-2)" |
| Scrollbar - Thumb - Background color | textsträng | "var(--ophixor-semantic-scrollbar-thumb-background-color)" |
| Scrollbar - Thumb - Background color - Active | textsträng | "var(--ophixor-semantic-scrollbar-thumb-background-color-active)" |
| Scrollbar - Thumb - Background color - Hover | textsträng | "var(--ophixor-semantic-scrollbar-thumb-background-color-hover)" |
| Scrollbar - Track - Background color | textsträng | "var(--ophixor-semantic-scrollbar-track-background-color)" |
| Background color | textsträng | "var(--ophixor-semantic-surface-base)" |
| Background color - Hover | textsträng | "var(--ophixor-semantic-surface-base)" |
| Background color - Primary | textsträng | "var(--ophixor-semantic-interactive-primary)" |
| Background color - Primary - Hover | textsträng | "var(--ophixor-semantic-interactive-primary)" |
| Border color | textsträng | "var(--ophixor-semantic-border-default)" |
| Border color - Hover | textsträng | "var(--ophixor-semantic-border-default)" |
| Border color - Primary | textsträng | "transparent" |
| Border color - Primary - Hover | textsträng | "transparent" |
| Color | textsträng | "var(--ophixor-semantic-text-primary)" |
| Color - Hover | textsträng | "var(--ophixor-semantic-text-primary)" |
| Color - Primary | textsträng | "var(--ophixor-semantic-text-inverse)" |
| Color - Primary - Hover | textsträng | "var(--ophixor-semantic-text-inverse)" |
| Background color | textsträng | "var(--ophixor-semantic-interactive-primary)" |
| Background color - Active | textsträng | "var(--ophixor-semantic-interactive-primary-hover)" |
| Background color - Hover | textsträng | "var(--ophixor-semantic-interactive-primary-hover)" |
| Background color - None | textsträng | "var(--ophixor-semantic-border-default)" |
| Color - Label | textsträng | "var(--ophixor-semantic-text-primary)" |
| Color - Value | textsträng | "var(--ophixor-semantic-text-primary)" |
| Background color | textsträng | "var(--ophixor-semantic-surface-base)" |
| Border color | textsträng | "var(--ophixor-semantic-border-default)" |
| Box shadow | textsträng | "var(--ophixor-semantic-shadow-input)" |
| Box shadow - Focus | textsträng | "var(--ophixor-semantic-focus-ring)" |
| Color | textsträng | "var(--ophixor-semantic-text-primary)" |
| Option - Background color | textsträng | "transparent" |
| Option - Background color - Hover | textsträng | "var(--ophixor-semantic-interactive-primary-hover)" |
| Option - Background color - Selected | textsträng | "var(--ophixor-semantic-interactive-primary)" |
| Option - Background color - Selected - Hover | textsträng | "var(--ophixor-semantic-interactive-primary-hover)" |
| Option - Color | textsträng | "var(--ophixor-semantic-text-primary)" |
| Option - Color - Hover | textsträng | "var(--ophixor-semantic-text-inverse)" |
| Option - Color - Selected | textsträng | "var(--ophixor-semantic-text-inverse)" |
| Option - Color - Selected - Hover | textsträng | "var(--ophixor-semantic-text-inverse)" |
| Scrollbar - Color - 1 | textsträng | "var(--ophixor-semantic-scrollbar-color-1)" |
| Scrollbar - Color - 2 | textsträng | "var(--ophixor-semantic-scrollbar-color-2)" |
| Scrollbar - Thumb - Background color | textsträng | "var(--ophixor-semantic-scrollbar-thumb-background-color)" |
| Scrollbar - Thumb - Background color - Active | textsträng | "var(--ophixor-semantic-scrollbar-thumb-background-color-active)" |
| Scrollbar - Thumb - Background color - Hover | textsträng | "var(--ophixor-semantic-scrollbar-thumb-background-color-hover)" |
| Scrollbar - Track - Background color | textsträng | "var(--ophixor-semantic-scrollbar-track-background-color)" |
| Background color | textsträng | "var(--ophixor-semantic-surface-base-tertiary)" |
| Border color | textsträng | "var(--ophixor-semantic-border-default)" |
| Color box - Background color - Image | textsträng | "var(--ophixor-semantic-border-default)" |
| Color box - Border color | textsträng | "var(--ophixor-semantic-border-default)" |
| Value row - Background color | textsträng | "transparent" |
| Value row - Background color - Hover | textsträng | "var(--ophixor-semantic-interactive-primary-hover)" |
| Value row - Background color - Active | textsträng | "var(--ophixor-semantic-interactive-primary)" |
| Value row - Background color - Active - Hover | textsträng | "var(--ophixor-semantic-interactive-primary-hover)" |
| Value row - Code - Background color | textsträng | "var(--ophixor-semantic-surface-base)" |
| Value row - Code - Background color - Hover | textsträng | "var(--ophixor-semantic-surface-base)" |
| Value row - Code - Background color - Active | textsträng | "var(--ophixor-semantic-surface-base)" |
| Value row - Code - Background color - Active - Hover | textsträng | "var(--ophixor-semantic-surface-base)" |
| Value row - Code - Border color | textsträng | "var(--ophixor-semantic-border-default)" |
| Value row - Code - Border color - Hover | textsträng | "var(--ophixor-semantic-border-default)" |
| Value row - Code - Border color - Active | textsträng | "var(--ophixor-semantic-border-default)" |
| Value row - Code - Border color - Active - Hover | textsträng | "var(--ophixor-semantic-border-default)" |
| Value row - Code - Color | textsträng | "var(--ophixor-semantic-text-primary)" |
| Value row - Code - Color - Hover | textsträng | "var(--ophixor-semantic-text-primary)" |
| Value row - Code - Color - Active | textsträng | "var(--ophixor-semantic-text-primary)" |
| Value row - Code - Color - Active - Hover | textsträng | "var(--ophixor-semantic-text-primary)" |
| Value row - Text - Color | textsträng | "var(--ophixor-semantic-text-secondary)" |
| Value row - Text - Color - Hover | textsträng | "var(--ophixor-semantic-text-inverse)" |
| Value row - Text - Color - Active | textsträng | "var(--ophixor-semantic-text-inverse)" |
| Value row - Text - Color - Active - Hover | textsträng | "var(--ophixor-semantic-text-inverse)" |
| Border color | textsträng | "var(--ophixor-semantic-border-default)" |
| Color - Title | textsträng | "var(--ophixor-semantic-text-primary)" |
| Color - Code | textsträng | "var(--ophixor-semantic-text-primary)" |
| Preview wrapper - Background color - Image | textsträng | "var(--ophixor-semantic-border-default)" |
| Preview wrapper - Border color | textsträng | "var(--ophixor-semantic-border-default)" |
| Är synlig | boolesk | true |
| Selektorer | lista | [] |