orbital-base-components 0.1.1

Headless base primitives for Orbital — structure, semantics, and accessibility
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

//! Theme color tokens mapped to Orbital CSS custom properties.

use super::define_css_token_enum;

define_css_token_enum! {
    /// Semantic and palette colors from the active Orbital theme.
    pub enum ThemeColor {
    Scheme => "--orb-color-scheme",
    NeutralBackgroundStatic => "--orb-color-surface-static",
    NeutralBackgroundInverted => "--orb-color-surface-inverted",
    NeutralBackgroundDisabled => "--orb-color-surface-disabled",
    NeutralBackground1 => "--orb-color-surface-canvas",
    NeutralBackground1Hover => "--orb-color-surface-canvas-hover",
    NeutralBackground1Pressed => "--orb-color-surface-canvas-pressed",
    NeutralBackground2 => "--orb-color-surface-shell",
    NeutralBackground3 => "--orb-color-surface-subtle",
    NeutralBackground3Hover => "--orb-color-surface-subtle-hover",
    NeutralBackground3Pressed => "--orb-color-surface-subtle-pressed",
    NeutralBackground4 => "--orb-color-surface-overlay",
    NeutralBackground4Hover => "--orb-color-surface-overlay-hover",
    NeutralBackground4Pressed => "--orb-color-surface-overlay-pressed",
    NeutralBackground5 => "--orb-color-surface-raised",
    NeutralBackground6 => "--orb-color-surface-sunken",
    NeutralForegroundStaticInverted => "--orb-color-text-on-static",
    NeutralForegroundDisabled => "--orb-color-text-disabled",
    NeutralForeground1 => "--orb-color-text-primary",
    NeutralForeground1Hover => "--orb-color-text-primary-hover",
    NeutralForeground1Pressed => "--orb-color-text-primary-pressed",
    NeutralForeground2 => "--orb-color-text-secondary",
    NeutralForeground2Hover => "--orb-color-text-secondary-hover",
    NeutralForeground2Pressed => "--orb-color-text-secondary-pressed",
    NeutralForeground2BrandHover => "--orb-color-text-secondary-brand-hover",
    NeutralForeground2BrandPressed => "--orb-color-text-secondary-brand-pressed",
    NeutralForeground2BrandSelected => "--orb-color-text-secondary-brand-selected",
    NeutralForeground3 => "--orb-color-text-tertiary",
    NeutralForeground4 => "--orb-color-text-quaternary",
    NeutralForegroundOnBrand => "--orb-color-text-on-brand",
    NeutralForegroundInverted => "--orb-color-text-inverted",
    NeutralStrokeDisabled => "--orb-color-border-disabled",
    NeutralStroke1 => "--orb-color-border-default",
    NeutralStroke1Hover => "--orb-color-border-default-hover",
    NeutralStroke1Pressed => "--orb-color-border-default-pressed",
    NeutralStroke2 => "--orb-color-border-subtle",
    NeutralStrokeAccessible => "--orb-color-border-accessible",
    NeutralStrokeAccessibleHover => "--orb-color-border-accessible-hover",
    NeutralStrokeAccessiblePressed => "--orb-color-border-accessible-pressed",
    NeutralShadowAmbient => "--orb-color-shadow-ambient",
    NeutralShadowKey => "--orb-color-shadow-key",
    NeutralStencil1 => "--orb-color-stencil-primary",
    NeutralStencil2 => "--orb-color-stencil-secondary",
    CompoundBrandForeground1 => "--orb-color-brand-compound-fg",
    CompoundBrandForeground1Hover => "--orb-color-brand-compound-fg-hover",
    CompoundBrandForeground1Pressed => "--orb-color-brand-compound-fg-pressed",
    CompoundBrandBackground => "--orb-color-brand-compound-bg",
    CompoundBrandBackgroundHover => "--orb-color-brand-compound-bg-hover",
    CompoundBrandBackgroundPressed => "--orb-color-brand-compound-bg-pressed",
    CompoundBrandStroke => "--orb-color-brand-compound-stroke",
    CompoundBrandStrokePressed => "--orb-color-brand-compound-stroke-pressed",
    BrandBackground => "--orb-color-brand-bg",
    BrandBackgroundHover => "--orb-color-brand-bg-hover",
    BrandBackgroundPressed => "--orb-color-brand-bg-pressed",
    BrandBackground2 => "--orb-color-brand-bg-subtle",
    BrandForeground1 => "--orb-color-brand-fg",
    BrandForeground2 => "--orb-color-brand-fg-secondary",
    BrandStroke1 => "--orb-color-brand-stroke",
    BrandStroke2 => "--orb-color-brand-stroke-subtle",
    BrandStroke2Contrast => "--orb-color-brand-stroke-contrast",
    BrandForegroundLink => "--orb-color-brand-link",
    BrandForegroundLinkHover => "--orb-color-brand-link-hover",
    BrandForegroundLinkPressed => "--orb-color-brand-link-pressed",
    StrokeFocus2 => "--orb-color-border-focus",
    PaletteRedBackground1 => "--orb-color-palette-red-bg-subtle",
    PaletteRedBackground3 => "--orb-color-palette-red-bg",
    PaletteRedForeground1 => "--orb-color-palette-red-fg",
    PaletteRedForeground3 => "--orb-color-palette-red-fg-strong",
    PaletteRedBorder1 => "--orb-color-palette-red-border",
    PaletteRedBorder2 => "--orb-color-palette-red-border-strong",
    PaletteGreenBackground1 => "--orb-color-palette-green-bg-subtle",
    PaletteGreenBackground3 => "--orb-color-palette-green-bg",
    PaletteGreenForeground1 => "--orb-color-palette-green-fg",
    PaletteGreenForeground3 => "--orb-color-palette-green-fg-strong",
    PaletteGreenBorder1 => "--orb-color-palette-green-border",
    PaletteGreenBorder2 => "--orb-color-palette-green-border-strong",
    PaletteYellowBackground1 => "--orb-color-palette-yellow-bg-subtle",
    PaletteYellowBackground3 => "--orb-color-palette-yellow-bg",
    PaletteYellowForeground1 => "--orb-color-palette-yellow-fg",
    PaletteYellowForeground2 => "--orb-color-palette-yellow-fg-muted",
    PaletteYellowBorder1 => "--orb-color-palette-yellow-border",
    PaletteDarkOrangeBackground1 => "--orb-color-palette-orange-bg-subtle",
    PaletteDarkOrangeBackground3 => "--orb-color-palette-orange-bg",
    PaletteDarkOrangeForeground1 => "--orb-color-palette-orange-fg",
    PaletteDarkOrangeForeground3 => "--orb-color-palette-orange-fg-strong",
    PaletteDarkOrangeBorder1 => "--orb-color-palette-orange-border",
    StatusSuccessBackground1 => "--orb-color-status-success-bg",
    StatusSuccessForeground1 => "--orb-color-status-success-fg",
    StatusSuccessBorder1 => "--orb-color-status-success-border",
    StatusWarningBackground1 => "--orb-color-status-warning-bg",
    StatusWarningForeground3 => "--orb-color-status-warning-fg",
    StatusWarningBorder1 => "--orb-color-status-warning-border",
    StatusDangerBackground1 => "--orb-color-status-danger-bg",
    StatusDangerForeground1 => "--orb-color-status-danger-fg",
    StatusDangerBorder1 => "--orb-color-status-danger-border",
    SubtleBackground => "--orb-color-subtle-bg",
    SubtleBackgroundHover => "--orb-color-subtle-bg-hover",
    SubtleBackgroundPressed => "--orb-color-subtle-bg-pressed",
    CodeBackground => "--orb-color-code-bg",
    CodeForeground => "--orb-color-code-fg",
    TransparentBackground => "--orb-color-transparent-bg",
    TransparentBackgroundHover => "--orb-color-transparent-bg-hover",
    TransparentBackgroundPressed => "--orb-color-transparent-bg-pressed",
    TransparentStroke => "--orb-color-border-transparent",
    }
}