canonrs-server 0.1.0

CanonRS server-side rendering support
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

/* ============================================
   ICON BUTTON — Enterprise Action Button
   State via data-rs-state — zero pseudo-class state selectors
   ============================================ */

[data-rs-icon-button] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--icon-button-border, none);
  border-radius: var(--icon-button-radius);
  cursor: pointer;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
    opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

/* ── SIZES ──────────────────────────────────────────────────── */
[data-rs-icon-button][data-rs-size="xs"] {
  width: var(--icon-button-size-xs);
  height: var(--icon-button-size-xs);
  padding: var(--icon-button-padding-xs);
  font-size: var(--font-size-xs);
}

[data-rs-icon-button][data-rs-size="sm"] {
  width: var(--icon-button-size-sm);
  height: var(--icon-button-size-sm);
  padding: var(--icon-button-padding-sm);
  font-size: var(--font-size-sm);
}

[data-rs-icon-button][data-rs-size="md"] {
  width: var(--icon-button-size-md);
  height: var(--icon-button-size-md);
  padding: var(--icon-button-padding-md);
  font-size: var(--font-size-md);
}

[data-rs-icon-button][data-rs-size="lg"] {
  width: var(--icon-button-size-lg);
  height: var(--icon-button-size-lg);
  padding: var(--icon-button-padding-lg);
  font-size: var(--font-size-lg);
}

[data-rs-icon-button][data-rs-size="xl"] {
  width: var(--icon-button-size-xl);
  height: var(--icon-button-size-xl);
  padding: var(--icon-button-padding-xl);
  font-size: var(--font-size-xl);
}

/* ── VARIANTS ───────────────────────────────────────────────── */
[data-rs-icon-button][data-rs-variant="default"] {
  background: var(--icon-button-bg);
  color: var(--icon-button-fg);
  border: var(--border-thin) solid var(--icon-button-outline-border);
}

[data-rs-icon-button][data-rs-variant="default"][data-rs-state~="hover"]:not([data-rs-state~="disabled"]) {
  background: var(--icon-button-bg-hover);
}

[data-rs-icon-button][data-rs-variant="default"][data-rs-state~="active"]:not([data-rs-state~="disabled"]) {
  background: var(--icon-button-bg-active);
}

[data-rs-icon-button][data-rs-variant="ghost"] {
  background: var(--icon-button-bg);
  color: var(--icon-button-fg);
  opacity: var(--icon-button-ghost-opacity);
}

[data-rs-icon-button][data-rs-variant="ghost"][data-rs-state~="hover"]:not([data-rs-state~="disabled"]) {
  background: var(--icon-button-ghost-bg-hover);
}

[data-rs-icon-button][data-rs-variant="outline"] {
  background: var(--icon-button-bg);
  color: var(--icon-button-fg);
  border: var(--border-thin) solid var(--icon-button-outline-border);
}

[data-rs-icon-button][data-rs-variant="outline"][data-rs-state~="hover"]:not([data-rs-state~="disabled"]) {
  background: var(--icon-button-bg-hover);
}

[data-rs-icon-button][data-rs-variant="solid"] {
  background: var(--icon-button-solid-bg);
  color: var(--icon-button-solid-fg);
}

[data-rs-icon-button][data-rs-variant="solid"][data-rs-state~="hover"]:not([data-rs-state~="disabled"]) {
  opacity: var(--opacity-hover);
}

[data-rs-icon-button][data-rs-variant="subtle"] {
  background: var(--icon-button-subtle-bg);
  color: var(--icon-button-subtle-fg);
  border: var(--border-thin) solid var(--icon-button-bg);
}

[data-rs-icon-button][data-rs-variant="subtle"][data-rs-state~="hover"]:not([data-rs-state~="disabled"]) {
  background: var(--icon-button-bg-hover);
}

[data-rs-icon-button][data-rs-variant="destructive"] {
  background: var(--icon-button-destructive-bg);
  color: var(--icon-button-destructive-fg);
}

[data-rs-icon-button][data-rs-variant="destructive"][data-rs-state~="hover"]:not([data-rs-state~="disabled"]) {
  opacity: var(--opacity-hover);
}

/* ── PRESSED (toggle) ───────────────────────────────────────── */
[data-rs-icon-button][data-rs-state~="on"] {
  background: var(--icon-button-pressed-bg);
  color: var(--icon-button-pressed-fg);
}

/* ── STATES ─────────────────────────────────────────────────── */
[data-rs-icon-button][data-rs-state~="active"]:not([data-rs-state~="disabled"]) {
  opacity: var(--opacity-active);
  transform: var(--button-active-transform);
}

[data-rs-icon-button][data-rs-state~="focus"] {
  outline: none;
  box-shadow: var(--focus-ring-shadow);
}

[data-rs-icon-button][data-rs-state~="disabled"] {
  cursor: not-allowed;
  color: var(--icon-button-fg-disabled);
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

[data-rs-icon-button][data-rs-state~="loading"] {
  cursor: wait;
  opacity: var(--icon-button-loading-opacity);
  pointer-events: none;
}

[data-rs-icon-button][data-rs-state~="loading"] [data-rs-icon-button-inner] {
  animation: rs-spin var(--motion-duration-slow) var(--motion-ease-linear) infinite;
  display: inline-block;
}

@keyframes rs-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}