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

/* ═══════════════════════════════════════════════════════════════
   ALERT — Family E Feedback tokens compliant
   ═══════════════════════════════════════════════════════════════ */

[data-rs-alert] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--alert-gap);
  padding-inline: var(--alert-padding-x);
  padding-block: var(--alert-padding-y);
  border-radius: var(--alert-radius);
  border: var(--alert-border-width) solid var(--alert-border-color);
  background: var(--alert-bg);
  color: var(--alert-fg);
}

[data-rs-alert][data-rs-variant="success"]     { background: var(--alert-bg-success); }
[data-rs-alert][data-rs-variant="warning"]     { background: var(--alert-bg-warning); }
[data-rs-alert][data-rs-variant="destructive"] { background: var(--alert-bg-error); }

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

[data-rs-alert-description] {
  font-size: var(--alert-description-font-size);
  line-height: var(--alert-description-line-height);
  color: var(--alert-description-fg);
}

[data-rs-alert-close] {
  position: absolute;
  top: var(--alert-padding-y);
  right: var(--alert-padding-x);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--alert-close-size);
  height: var(--alert-close-size);
  color: var(--alert-close-fg);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

[data-rs-alert-close][data-rs-state~="hover"] {
  color: var(--alert-close-fg-hover);
}

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

/* State semântico — aria + visual */
[data-rs-alert][data-rs-state~="error"]   { background: var(--alert-bg-error);   border-color: var(--alert-border-color-error); }
[data-rs-alert][data-rs-state~="warning"] { background: var(--alert-bg-warning); border-color: var(--alert-border-color-warning); }
[data-rs-alert][data-rs-state~="success"] { background: var(--alert-bg-success); border-color: var(--alert-border-color-success); }

[data-rs-alert][data-rs-state~="closed"] { display: none; }