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

/* ═══════════════════════════════════════════════════════════════
   STAT — Family F Data tokens compliant
   ═══════════════════════════════════════════════════════════════ */

[data-rs-stat] {
  display: block;
}

[data-rs-stat-wrapper] {
  display: flex;
  flex-direction: column;
  gap: var(--stat-gap);
}

[data-rs-stat-wrapper][data-rs-align="start"]  { align-items: flex-start; }
[data-rs-stat-wrapper][data-rs-align="center"] { align-items: center; }
[data-rs-stat-wrapper][data-rs-align="end"]    { align-items: flex-end; }

[data-rs-stat-header] {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

[data-rs-stat-body] {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

[data-rs-stat-label] {
  font-size: var(--stat-label-font-size);
  font-weight: var(--stat-label-font-weight);
  color: var(--stat-label-fg);
}

[data-rs-stat-value] {
  font-size: var(--stat-value-font-size);
  font-weight: var(--stat-value-font-weight);
  color: var(--stat-value-fg);
  line-height: var(--line-height-tight);
  font-variant-numeric: tabular-nums;
}

[data-rs-stat-wrapper][data-rs-size="sm"] [data-rs-stat-value] { font-size: var(--stat-size-sm-value); }
[data-rs-stat-wrapper][data-rs-size="md"] [data-rs-stat-value] { font-size: var(--stat-size-md-value); }
[data-rs-stat-wrapper][data-rs-size="lg"] [data-rs-stat-value] { font-size: var(--stat-size-lg-value); }

[data-rs-stat-delta] {
  font-size: var(--stat-delta-font-size);
  font-weight: var(--stat-delta-font-weight);
  font-variant-numeric: tabular-nums;
}

[data-rs-stat-wrapper][data-rs-trend="increase"] [data-rs-stat-delta] { color: var(--stat-trend-increase-color); }
[data-rs-stat-wrapper][data-rs-trend="decrease"] [data-rs-stat-delta] { color: var(--stat-trend-decrease-color); }
[data-rs-stat-wrapper][data-rs-trend="neutral"]  [data-rs-stat-delta] { color: var(--stat-trend-neutral-color); }

[data-rs-stat-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--stat-icon-size);
  height: var(--stat-icon-size);
  flex-shrink: 0;
}

[data-rs-stat-wrapper][data-rs-state~="loading"] [data-rs-stat-value],
[data-rs-stat-wrapper][data-rs-state~="loading"] [data-rs-stat-label] {
  background: var(--stat-skeleton-bg);
  color: transparent;
  border-radius: var(--radius-sm);
  animation: stat-pulse var(--motion-duration-deliberate) var(--motion-ease-standard) infinite;
}

[data-rs-stat-wrapper][data-rs-state~="loading"] [data-rs-stat-delta],
[data-rs-stat-wrapper][data-rs-state~="loading"] [data-rs-stat-icon] {
  opacity: var(--opacity-disabled);
}

@keyframes stat-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: var(--opacity-disabled); }
}