ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
994 lines (775 loc) • 21.5 kB
Markdown
# ranui Public Style Tokens And Parts (Generated)
This file is auto-generated by `bin/generate-style-docs.ts`.
It is a filtered, public-facing style API view (structural/internal tokens excluded).
Generated at: 2026-07-19T06:49:49.075Z
## Components
### `button`
- Tokens: 54
- Parts: 2
#### Tokens
<!-- layers: semantic: 13 · skin: 2 · component: 38 · internal: 1 -->
- `--ran-btn-after-background-image`
- `--ran-btn-after-opacity`
- `--ran-btn-after-transform`
- `--ran-btn-after-transition`
- `--ran-btn-background-image`
- `--ran-btn-box-shadow`
- `--ran-btn-contain-background`
- `--ran-btn-contain-background-image`
- `--ran-btn-contain-transition`
- `--ran-btn-contain-user-select`
- `--ran-btn-content-active-background-color`
- `--ran-btn-content-active-border-color`
- `--ran-btn-content-active-transform`
- `--ran-btn-content-align-items`
- `--ran-btn-content-background-color`
- `--ran-btn-content-background-image`
- `--ran-btn-content-border`
- `--ran-btn-content-border-color`
- `--ran-btn-content-border-image-slice`
- `--ran-btn-content-border-image-source`
- `--ran-btn-content-border-radius`
- `--ran-btn-content-color`
- `--ran-btn-content-font-family`
- `--ran-btn-content-font-size`
- `--ran-btn-content-font-weight`
- `--ran-btn-content-hover-background-color`
- `--ran-btn-content-hover-border-color`
- `--ran-btn-content-hover-color`
- `--ran-btn-content-padding`
- `--ran-btn-content-text-align`
- `--ran-btn-content-text-border`
- `--ran-btn-content-transition`
- `--ran-btn-content-warning-background-color`
- `--ran-btn-content-warning-border-color`
- `--ran-btn-content-warning-color`
- `--ran-btn-content-white-space`
- `--ran-btn-disabled-opacity`
- `--ran-btn-user-select`
- `--ran-color-bg-elevated`
- `--ran-color-border`
- `--ran-color-border-hover`
- `--ran-color-danger`
- `--ran-color-primary`
- `--ran-color-primary-active`
- `--ran-color-primary-hover`
- `--ran-color-primary-text`
- `--ran-color-text`
- `--ran-gray-alpha-400`
- `--ran-motion-duration-base`
- `--ran-motion-ease-spring`
- `--ran-motion-ease-standard`
- `--ran-radius-sm`
- `--ran-skin-font-family`
- `--ran-skin-raised-shadow`
#### Parts
- `button`
- `content`
### `card`
- Tokens: 20
- Parts: 7
#### Tokens
<!-- layers: semantic: 7 · skin: 1 · internal: 12 -->
- `--ran-card-background`
- `--ran-card-border-color`
- `--ran-card-description-color`
- `--ran-card-description-font-size`
- `--ran-card-gap`
- `--ran-card-hover-border-color`
- `--ran-card-hover-shadow`
- `--ran-card-radius`
- `--ran-card-shadow`
- `--ran-card-title-color`
- `--ran-card-title-font-size`
- `--ran-card-title-font-weight`
- `--ran-color-bg`
- `--ran-color-border`
- `--ran-color-border-hover`
- `--ran-color-text`
- `--ran-color-text-secondary`
- `--ran-radius-md`
- `--ran-shadow-elevated`
- `--ran-skin-border-style`
#### Parts
- `body`
- `card`
- `description`
- `extra`
- `footer`
- `header`
- `title`
### `checkbox`
- Tokens: 40
- Parts: 5
#### Tokens
<!-- layers: semantic: 7 · skin: 1 · component: 31 · internal: 1 -->
- `--ran-blue-400`
- `--ran-checkbox-border-radius`
- `--ran-checkbox-checked-after-opacity`
- `--ran-checkbox-checked-background-color`
- `--ran-checkbox-checked-background-image`
- `--ran-checkbox-checked-border`
- `--ran-checkbox-color`
- `--ran-checkbox-disabled-opacity`
- `--ran-checkbox-focus-border-color`
- `--ran-checkbox-focus-box-shadow`
- `--ran-checkbox-font-family`
- `--ran-checkbox-font-size`
- `--ran-checkbox-inner-after-border`
- `--ran-checkbox-inner-after-border-inline-start`
- `--ran-checkbox-inner-after-content`
- `--ran-checkbox-inner-after-opacity`
- `--ran-checkbox-inner-after-transform`
- `--ran-checkbox-inner-after-transition`
- `--ran-checkbox-inner-background-color`
- `--ran-checkbox-inner-border`
- `--ran-checkbox-inner-border-collapse`
- `--ran-checkbox-inner-border-image-slice`
- `--ran-checkbox-inner-border-image-source`
- `--ran-checkbox-inner-border-radius`
- `--ran-checkbox-inner-direction`
- `--ran-checkbox-input-opacity`
- `--ran-checkbox-label-color`
- `--ran-checkbox-label-font-family`
- `--ran-checkbox-label-font-size`
- `--ran-checkbox-label-gap`
- `--ran-checkbox-pop-animation`
- `--ran-checkbox-white-space`
- `--ran-color-bg-elevated`
- `--ran-color-bg-muted`
- `--ran-color-border`
- `--ran-color-primary`
- `--ran-color-text`
- `--ran-motion-duration-base`
- `--ran-motion-ease-bouncy`
- `--ran-skin-font-family`
#### Parts
- `checkbox`
- `inner`
- `input`
- `label`
- `wrapper`
### `colorpicker`
- Tokens: 15
- Parts: 2
#### Tokens
<!-- layers: semantic: 5 · component: 7 · internal: 3 -->
- `--ran-color-bg-elevated`
- `--ran-color-border`
- `--ran-color-border-hover`
- `--ran-colorpicker-background`
- `--ran-colorpicker-block-border-radius`
- `--ran-colorpicker-border`
- `--ran-colorpicker-border-hover`
- `--ran-colorpicker-border-radius`
- `--ran-colorpicker-disabled-opacity`
- `--ran-colorpicker-transition`
- `--ran-gray-500`
- `--ran-gray-alpha-100`
- `--ran-gray-alpha-200`
- `--ran-radius-md`
- `--ran-radius-sm`
#### Parts
- `block`
- `swatch`
### `dropdown`
- Tokens: 22
- Parts: 1
#### Tokens
<!-- layers: semantic: 5 · skin: 1 · component: 15 · internal: 1 -->
- `--ran-color-bg-elevated`
- `--ran-color-text`
- `--ran-dropdown-arrow-after-background`
- `--ran-dropdown-arrow-after-border-radius`
- `--ran-dropdown-arrow-after-box-shadow`
- `--ran-dropdown-arrow-after-content`
- `--ran-dropdown-arrow-after-transform`
- `--ran-dropdown-arrow-before-background`
- `--ran-dropdown-arrow-before-content`
- `--ran-dropdown-arrow-overlap`
- `--ran-dropdown-background`
- `--ran-dropdown-border-radius`
- `--ran-dropdown-box-shadow`
- `--ran-dropdown-color`
- `--ran-dropdown-font-family`
- `--ran-dropdown-font-size`
- `--ran-dropdown-font-variant`
- `--ran-radius-md`
- `--ran-shadow-elevated`
- `--ran-shadow-menu`
- `--ran-skin-font-family`
- `--ran-z-dropdown`
#### Parts
- `dropdown`
### `form`
- Tokens: 0
- Parts: 0
#### Tokens
- (none)
#### Parts
- (none)
### `glass`
- Tokens: 15
- Parts: 2
#### Tokens
<!-- layers: semantic: 3 · internal: 12 -->
- `--ran-glass-blur`
- `--ran-glass-border`
- `--ran-glass-brightness`
- `--ran-glass-radius`
- `--ran-glass-refraction`
- `--ran-glass-saturate`
- `--ran-glass-shadow`
- `--ran-glass-sheen-duration`
- `--ran-glass-specular`
- `--ran-glass-specular-opacity`
- `--ran-glass-tint`
- `--ran-glass-transition`
- `--ran-motion-duration-base`
- `--ran-motion-duration-fast`
- `--ran-motion-ease-spring`
#### Parts
- `glass`
- `specular`
### `icon`
- Tokens: 7
- Parts: 1
#### Tokens
<!-- layers: component: 7 -->
- `--ran-icon-align-items`
- `--ran-icon-color`
- `--ran-icon-font-size`
- `--ran-icon-justify-content`
- `--ran-icon-keyframes-to-transform`
- `--ran-icon-svg-fill`
- `--ran-icon-svg-stroke`
#### Parts
- `ran-icon`
### `image`
- Tokens: 0
- Parts: 0
#### Tokens
- (none)
#### Parts
- (none)
### `input`
- Tokens: 83
- Parts: 4
#### Tokens
<!-- layers: semantic: 10 · skin: 1 · component: 71 · internal: 1 -->
- `--ran-blue-400`
- `--ran-color-bg-elevated`
- `--ran-color-bg-muted`
- `--ran-color-border`
- `--ran-color-danger`
- `--ran-color-primary`
- `--ran-color-text`
- `--ran-color-text-disabled`
- `--ran-color-text-secondary`
- `--ran-color-warning`
- `--ran-input-active-border-color`
- `--ran-input-active-box-shadow`
- `--ran-input-background-color`
- `--ran-input-background-image`
- `--ran-input-border`
- `--ran-input-border-image-slice`
- `--ran-input-border-image-source`
- `--ran-input-border-radius`
- `--ran-input-color`
- `--ran-input-content--webkit-appearance`
- `--ran-input-content-background-color`
- `--ran-input-content-background-image`
- `--ran-input-content-border`
- `--ran-input-content-border-radius`
- `--ran-input-content-color`
- `--ran-input-content-disabled-background-color`
- `--ran-input-content-disabled-border-color`
- `--ran-input-content-disabled-box-shadow`
- `--ran-input-content-disabled-color`
- `--ran-input-content-disabled-opacity`
- `--ran-input-content-focus-label-transform`
- `--ran-input-content-font-feature-settings`
- `--ran-input-content-font-size`
- `--ran-input-content-font-variant`
- `--ran-input-content-font-weight`
- `--ran-input-content-hover-border`
- `--ran-input-content-letter-spacing`
- `--ran-input-content-placeholder-color`
- `--ran-input-content-placeholder-label-transform`
- `--ran-input-content-text-align`
- `--ran-input-content-text-indent`
- `--ran-input-content-text-rendering`
- `--ran-input-content-text-shadow`
- `--ran-input-content-text-transform`
- `--ran-input-content-transition`
- `--ran-input-content-word-spacing`
- `--ran-input-content-writing-mode`
- `--ran-input-disabled-background-color`
- `--ran-input-disabled-border-color`
- `--ran-input-disabled-box-shadow`
- `--ran-input-disabled-color`
- `--ran-input-disabled-opacity`
- `--ran-input-font-family`
- `--ran-input-font-size`
- `--ran-input-hover-border-color`
- `--ran-input-icon-align-items`
- `--ran-input-icon-justify-content`
- `--ran-input-label-background`
- `--ran-input-label-color`
- `--ran-input-label-disabled-background-color`
- `--ran-input-label-disabled-border-color`
- `--ran-input-label-disabled-box-shadow`
- `--ran-input-label-disabled-color`
- `--ran-input-label-font-size`
- `--ran-input-label-hover-color`
- `--ran-input-label-opacity`
- `--ran-input-label-placeholder-transform`
- `--ran-input-label-status-error-color`
- `--ran-input-label-status-warning-color`
- `--ran-input-label-transform`
- `--ran-input-label-transform-origin`
- `--ran-input-label-transition`
- `--ran-input-label-value-color`
- `--ran-input-label-value-transform`
- `--ran-input-message-color`
- `--ran-input-message-error-color`
- `--ran-input-message-font-size`
- `--ran-input-message-warning-color`
- `--ran-input-status-error-border-color`
- `--ran-input-status-warning-border-color`
- `--ran-input-transition`
- `--ran-radius-sm`
- `--ran-skin-font-family`
#### Parts
- `content`
- `input`
- `label`
- `message`
### `link`
- Tokens: 3
- Parts: 0
#### Tokens
<!-- layers: semantic: 3 -->
- `--ran-color-link`
- `--ran-color-primary`
- `--ran-radius-sm`
#### Parts
- (none)
### `loading`
- Tokens: 3
- Parts: 1
#### Tokens
<!-- layers: semantic: 3 -->
- `--ran-color-primary`
- `--ran-color-success`
- `--ran-color-text`
#### Parts
- `sun`
### `math`
- Tokens: 2
- Parts: 0
#### Tokens
<!-- layers: component: 2 -->
- `--ran-math-align-items`
- `--ran-math-justify-content`
#### Parts
- (none)
### `mermaid`
- Tokens: 17
- Parts: 6
#### Tokens
<!-- layers: semantic: 8 · internal: 9 -->
- `--ran-color-bg-elevated`
- `--ran-color-bg-muted`
- `--ran-color-primary`
- `--ran-color-text`
- `--ran-color-text-secondary`
- `--ran-mermaid-button-color`
- `--ran-mermaid-button-hover-background`
- `--ran-mermaid-button-hover-color`
- `--ran-mermaid-button-size`
- `--ran-mermaid-error-color`
- `--ran-mermaid-menu-item-color`
- `--ran-mermaid-toolbar-background`
- `--ran-mermaid-toolbar-gap`
- `--ran-mermaid-toolbar-shadow`
- `--ran-radius-md`
- `--ran-radius-sm`
- `--ran-shadow-menu`
#### Parts
- `button`
- `diagram`
- `error`
- `menu`
- `mermaid`
- `toolbar`
### `message`
- Tokens: 28
- Parts: 0
#### Tokens
<!-- layers: semantic: 4 · component: 23 · internal: 1 -->
- `--ran-color-bg-elevated`
- `--ran-color-text`
- `--ran-message-color`
- `--ran-message-font-feature-settings`
- `--ran-message-font-size`
- `--ran-message-font-variant`
- `--ran-message-in-animation-duration`
- `--ran-message-in-animation-name`
- `--ran-message-in-animation-timing-function`
- `--ran-message-ist-style`
- `--ran-message-leave-animation-duration`
- `--ran-message-leave-animation-name`
- `--ran-message-leave-animation-timing-function`
- `--ran-message-notice-content-background`
- `--ran-message-notice-content-border-image-slice`
- `--ran-message-notice-content-border-image-source`
- `--ran-message-notice-content-border-radius`
- `--ran-message-notice-content-box-shadow`
- `--ran-message-notice-content-info-align-items`
- `--ran-message-notice-content-info-span-color`
- `--ran-message-notice-content-info-span-font-feature-settings`
- `--ran-message-notice-content-info-span-font-size`
- `--ran-message-notice-content-info-span-font-variant`
- `--ran-message-notice-text-align`
- `--ran-message-notice-word-break`
- `--ran-radius-md`
- `--ran-shadow-menu`
- `--ran-z-message`
#### Parts
- (none)
### `modal`
- Tokens: 29
- Parts: 8
#### Tokens
<!-- layers: semantic: 10 · component: 18 · internal: 1 -->
- `--ran-color-bg-elevated`
- `--ran-color-border`
- `--ran-color-border-secondary`
- `--ran-color-primary`
- `--ran-color-text`
- `--ran-color-text-secondary`
- `--ran-modal-body-color`
- `--ran-modal-close-background`
- `--ran-modal-close-border`
- `--ran-modal-close-color`
- `--ran-modal-close-font-size`
- `--ran-modal-dialog-background`
- `--ran-modal-dialog-border-image-slice`
- `--ran-modal-dialog-border-image-source`
- `--ran-modal-dialog-border-radius`
- `--ran-modal-dialog-box-shadow`
- `--ran-modal-footer-align-items`
- `--ran-modal-footer-gap`
- `--ran-modal-footer-justify-content`
- `--ran-modal-header-align-items`
- `--ran-modal-header-justify-content`
- `--ran-modal-mask-background`
- `--ran-modal-title-color`
- `--ran-modal-title-font-size`
- `--ran-radius-md`
- `--ran-radius-sm`
- `--ran-shadow-elevated`
- `--ran-shadow-modal`
- `--ran-z-modal`
#### Parts
- `body`
- `close`
- `dialog`
- `footer`
- `header`
- `mask`
- `root`
- `title`
### `player`
- Tokens: 38
- Parts: 0
#### Tokens
<!-- layers: component: 38 -->
- `--ran-dropdown-background`
- `--ran-dropdown-box-shadow`
- `--ran-dropdown-option-active-background-color`
- `--ran-dropdown-option-active-hover-background-color`
- `--ran-dropdown-option-item-color`
- `--ran-dropdown-option-item-content-color`
- `--ran-dropdown-option-item-content-font-size`
- `--ran-dropdown-option-item-content-text-align`
- `--ran-dropdown-option-item-hover-background-color`
- `--ran-player-controller-background`
- `--ran-player-controller-opacity`
- `--ran-player-controller-progress-dot-background`
- `--ran-player-controller-progress-dot-border-radius`
- `--ran-player-controller-tip-background`
- `--ran-player-controller-tip-border-radius`
- `--ran-player-controller-tip-box-shadow`
- `--ran-player-controller-tip-color`
- `--ran-player-controller-tip-font-family`
- `--ran-player-controller-tip-font-size`
- `--ran-player-controller-tip-font-variant`
- `--ran-player-controller-tip-opacity`
- `--ran-player-controller-tip-text-align`
- `--ran-player-controller-tip-text-text-align`
- `--ran-player-controller-tip-text-white-space`
- `--ran-player-controller-tip-time-text-align`
- `--ran-player-controller-tip-time-white-space`
- `--ran-player-controller-tip-white-space`
- `--ran-player-controller-transition`
- `--ran-player-loading-animation`
- `--ran-player-loading-background-repeat`
- `--ran-player-loading-background-size`
- `--ran-player-loading-filter`
- `--ran-player-loading-mask-backdrop-filter`
- `--ran-player-loading-mask-background`
- `--ran-player-play-btn-background`
- `--ran-player-play-btn-background-size`
- `--ran-player-play-btn-transform`
- `--ran-progress-dot-background`
#### Parts
- (none)
### `popover`
- Tokens: 0
- Parts: 0
#### Tokens
- (none)
#### Parts
- (none)
### `popover/content`
- Tokens: 0
- Parts: 0
#### Tokens
- (none)
#### Parts
- (none)
### `progress`
- Tokens: 5
- Parts: 3
#### Tokens
<!-- layers: semantic: 2 · component: 2 · internal: 1 -->
- `--ran-color-primary`
- `--ran-gray-200`
- `--ran-progress-dot-background`
- `--ran-progress-dot-border-radius`
- `--ran-radius-full`
#### Parts
- `dot`
- `fill`
- `track`
### `radar`
- Tokens: 5
- Parts: 0
#### Tokens
<!-- layers: semantic: 1 · component: 4 -->
- `--ran-color-border`
- `--ran-radar-fill-color`
- `--ran-radar-line-color`
- `--ran-radar-polygon-color`
- `--ran-radar-stroke-color`
#### Parts
- (none)
### `route`
- Tokens: 0
- Parts: 0
#### Tokens
- (none)
#### Parts
- (none)
### `router`
- Tokens: 0
- Parts: 0
#### Tokens
- (none)
#### Parts
- (none)
### `scratch`
- Tokens: 0
- Parts: 0
#### Tokens
- (none)
#### Parts
- (none)
### `section`
- Tokens: 15
- Parts: 4
#### Tokens
<!-- layers: semantic: 6 · skin: 1 · internal: 8 -->
- `--ran-color-bg-elevated`
- `--ran-color-border`
- `--ran-color-text`
- `--ran-color-text-secondary`
- `--ran-radius-md`
- `--ran-section-background`
- `--ran-section-border-color`
- `--ran-section-heading-color`
- `--ran-section-heading-font-size`
- `--ran-section-heading-font-weight`
- `--ran-section-radius`
- `--ran-section-shadow`
- `--ran-section-subtitle-color`
- `--ran-shadow-elevated`
- `--ran-skin-border-style`
#### Parts
- `body`
- `header`
- `heading`
- `subtitle`
### `select`
- Tokens: 48
- Parts: 5
#### Tokens
<!-- layers: semantic: 6 · skin: 1 · component: 41 -->
- `--ran-color-bg-elevated`
- `--ran-color-border`
- `--ran-color-primary`
- `--ran-color-text`
- `--ran-color-text-disabled`
- `--ran-radius-sm`
- `--ran-select-selection-background-color`
- `--ran-select-selection-background-image`
- `--ran-select-selection-border`
- `--ran-select-selection-border-radius`
- `--ran-select-selection-color`
- `--ran-select-selection-focus-border`
- `--ran-select-selection-focus-item-color`
- `--ran-select-selection-font-family`
- `--ran-select-selection-font-size`
- `--ran-select-selection-hover-border`
- `--ran-select-selection-hover-item-color`
- `--ran-select-selection-icon-align-items`
- `--ran-select-selection-icon-color`
- `--ran-select-selection-icon-font-size`
- `--ran-select-selection-icon-font-style`
- `--ran-select-selection-icon-text-align`
- `--ran-select-selection-icon-text-rendering`
- `--ran-select-selection-icon-text-transform`
- `--ran-select-selection-icon-transform`
- `--ran-select-selection-item-align-items`
- `--ran-select-selection-item-appearance`
- `--ran-select-selection-item-background`
- `--ran-select-selection-item-border`
- `--ran-select-selection-item-font-family`
- `--ran-select-selection-item-user-select`
- `--ran-select-selection-item-white-space`
- `--ran-select-selection-search-appearance`
- `--ran-select-selection-search-background`
- `--ran-select-selection-search-border`
- `--ran-select-selection-search-cancel-appearance`
- `--ran-select-selection-search-font-family`
- `--ran-select-selection-search-input-active-border`
- `--ran-select-selection-search-input-active-border-color`
- `--ran-select-selection-search-input-active-box-shadow`
- `--ran-select-selection-search-input-border`
- `--ran-select-selection-search-opacity`
- `--ran-select-selection-search-visible-opacity`
- `--ran-select-selection-select-color`
- `--ran-select-selection-text-background`
- `--ran-select-selection-text-border`
- `--ran-select-selection-transition`
- `--ran-skin-font-family`
#### Parts
- `icon`
- `search`
- `select`
- `selection`
- `selection-item`
### `select/dropdown-item`
- Tokens: 19
- Parts: 2
#### Tokens
<!-- layers: semantic: 2 · component: 15 · internal: 2 -->
- `--ran-blue-100`
- `--ran-color-text`
- `--ran-dropdown-option-active-background-color`
- `--ran-dropdown-option-active-font-weight`
- `--ran-dropdown-option-active-hover-background-color`
- `--ran-dropdown-option-item-border-radius`
- `--ran-dropdown-option-item-color`
- `--ran-dropdown-option-item-content-color`
- `--ran-dropdown-option-item-content-font-family`
- `--ran-dropdown-option-item-content-font-size`
- `--ran-dropdown-option-item-content-font-variant`
- `--ran-dropdown-option-item-content-text-align`
- `--ran-dropdown-option-item-content-white-space`
- `--ran-dropdown-option-item-font-size`
- `--ran-dropdown-option-item-font-weight`
- `--ran-dropdown-option-item-hover-background-color`
- `--ran-dropdown-option-item-transition`
- `--ran-gray-alpha-100`
- `--ran-radius-sm`
#### Parts
- `content`
- `item`
### `select/option`
- Tokens: 0
- Parts: 0
#### Tokens
- (none)
#### Parts
- (none)
### `skeleton`
- Tokens: 7
- Parts: 0
#### Tokens
<!-- layers: semantic: 1 · component: 4 · internal: 2 -->
- `--ran-gray-alpha-200`
- `--ran-gray-alpha-500`
- `--ran-radius-sm`
- `--ran-skeleton-animation-duration`
- `--ran-skeleton-background`
- `--ran-skeleton-border-radius`
- `--ran-skeleton-shimmer`
#### Parts
- (none)
### `tab`
- Tokens: 9
- Parts: 6
#### Tokens
<!-- layers: semantic: 3 · component: 6 -->
- `--ran-color-border`
- `--ran-color-primary`
- `--ran-radius-sm`
- `--ran-tab-active-color`
- `--ran-tab-border-color`
- `--ran-tab-border-radius`
- `--ran-tab-content-transition`
- `--ran-tab-line-color`
- `--ran-tab-line-transition`
#### Parts
- `content`
- `content-wrap`
- `header`
- `indicator`
- `nav`
- `tabs`
### `tabpane`
- Tokens: 0
- Parts: 1
#### Tokens
- (none)
#### Parts
- `content`
### `theme-switch`
- Tokens: 18
- Parts: 2
#### Tokens
<!-- layers: semantic: 6 · skin: 1 · internal: 11 -->
- `--ran-color-bg-hover`
- `--ran-color-border`
- `--ran-color-primary`
- `--ran-color-text`
- `--ran-color-text-secondary`
- `--ran-radius-full`
- `--ran-skin-border-style`
- `--ran-theme-switch-`
- `--ran-theme-switch-active-background`
- `--ran-theme-switch-active-color`
- `--ran-theme-switch-background`
- `--ran-theme-switch-border-color`
- `--ran-theme-switch-button-size`
- `--ran-theme-switch-color`
- `--ran-theme-switch-gap`
- `--ran-theme-switch-hover-color`
- `--ran-theme-switch-icon-size`
- `--ran-theme-switch-radius`
#### Parts
- `button ${choice}`
- `switch`