tinted-ui-tokens-skills/examples/teal/_tokens.scss at main · truman-t3/tinted-ui-tokens-skills · GitHub

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
// Tinted UI Tokens - generated by tinted-ui-tokens-skills

// ---- Light theme ----
$color-brand: #0D9488;
$color-brand-subtle: #DDF0EE;
$color-on-brand: #111E1D;
$color-bg: #F0F4F4;
$color-surface: #FBFDFD;
$color-surface-2: #E6ECEC;
$color-border: #D6DFDE;
$color-border-strong: #B3C1C0;
$color-text: #102624;
$color-text-2: #405654;
$color-text-muted: #7C9693;
$color-error: #C93332;
$color-error-subtle: #DAD4D2;
$color-warning: #DF9B1B;
$color-warning-subtle: #DDE3CF;
$color-success: #1B9C4F;
$color-success-subtle: #C0E3D6;

// ---- Shadows (light) ----
$shadow-shadow_sm: 0 1px 3px rgba(13, 148, 136, 0.08), 0 0 0 1px rgba(13, 148, 136, 0.04);
$shadow-shadow_md: 0 4px 16px rgba(13, 148, 136, 0.1), 0 1px 4px rgba(13, 148, 136, 0.06);
$shadow-shadow_lg: 0 12px 40px rgba(13, 148, 136, 0.12), 0 2px 8px rgba(13, 148, 136, 0.06);

// ---- Dark theme ----
$color-dark-bg: #0F1E22;
$color-dark-surface: #15252F;
$color-dark-surface2: #1B2B37;
$color-dark-border: #1C3240;
$color-dark-border_strong: #2A4154;
$color-dark-text: #DFE9F1;
$color-dark-text2: #829AB2;
$color-dark-text_muted: #718C9E;
$color-dark-brand_subtle: #143B41;
$color-dark-error_subtle: #3A2D36;
$color-dark-warning_subtle: #3E3F32;
$color-dark-success_subtle: #1B3F3B;
$color-dark-shadow_sm: 0 0 0 1px rgba(13, 148, 136, 0.1);
$color-dark-shadow_md: 0 4px 20px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(13, 148, 136, 0.06);
$color-dark-shadow_lg: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(13, 148, 136, 0.08);
$shadow-dark-shadow_sm: 0 0 0 1px rgba(13, 148, 136, 0.1);
$shadow-dark-shadow_md: 0 4px 20px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(13, 148, 136, 0.06);
$shadow-dark-shadow_lg: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(13, 148, 136, 0.08);

// Map light vars onto [data-theme="dark"] (drop-in):
@mixin tinted-dark {
  --color-bg: $color-dark-bg;
  --color-surface: $color-dark-surface;
  --color-surface2: $color-dark-surface2;
  --color-border: $color-dark-border;
  --color-border_strong: $color-dark-border_strong;
  --color-text: $color-dark-text;
  --color-text2: $color-dark-text2;
  --color-text_muted: $color-dark-text_muted;
  --color-brand_subtle: $color-dark-brand_subtle;
  --color-error_subtle: $color-dark-error_subtle;
  --color-warning_subtle: $color-dark-warning_subtle;
  --color-success_subtle: $color-dark-success_subtle;
  --color-shadow_sm: $color-dark-shadow_sm;
  --color-shadow_md: $color-dark-shadow_md;
  --color-shadow_lg: $color-dark-shadow_lg;
}