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

/* ═══════════════════════════════════════════════════════════════
   TOGGLE - Family C Forms tokens compliant
   ═══════════════════════════════════════════════════════════════ */

[data-rs-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

[data-rs-toggle] input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

[data-rs-toggle-content] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--toggle-padding);
  color: var(--toggle-fg);
  border: var(--toggle-border-width) solid transparent;
  border-radius: var(--toggle-radius);
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard),
    transform 80ms var(--motion-ease-standard),
    opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

/* off */
[data-rs-toggle][data-rs-state~="off"] [data-rs-toggle-content] {
  background: var(--toggle-off-bg);
}

/* hover — surface, não accent */
[data-rs-toggle][data-rs-state~="hover"]:not([data-rs-state~="on"]) [data-rs-toggle-content] {
  background: var(--toggle-hover-bg);
}

/* active (pointerdown) — feedback físico */
[data-rs-toggle][data-rs-state~="active"] [data-rs-toggle-content] {
  transform: scale(0.96);
  background: var(--toggle-active-bg);
}

/* on/pressed — estado persistente confirmado */
[data-rs-toggle][data-rs-state~="on"] [data-rs-toggle-content] {
  background: var(--toggle-on-bg);
  color: var(--toggle-on-fg);
}

/* hover sobre on — leve feedback sem perder identidade */
[data-rs-toggle][data-rs-state~="hover"][data-rs-state~="on"] [data-rs-toggle-content] {
  opacity: var(--opacity-hover);
}

/* focus */
[data-rs-toggle][data-rs-state~="focus"] [data-rs-toggle-content] {
  outline: none;
  box-shadow: 0 0 0 var(--toggle-focus-ring-width) var(--toggle-on-bg);
}

/* disabled */
[data-rs-toggle][data-rs-disabled],
[data-rs-toggle][data-rs-state~="disabled"] {
  opacity: var(--toggle-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}