tinted-ui-tokens-skills/examples/green/_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: #16A34A;
$color-brand-subtle: #DEF2E6;
$color-on-brand: #122017;
$color-bg: #F0F5F2;
$color-surface: #FBFDFC;
$color-surface-2: #E6EDE9;
$color-border: #D7E0DA;
$color-border-strong: #B4C3B9;
$color-text: #12281A;
$color-text-2: #42584A;
$color-text-muted: #7E9888;
$color-error: #C9342F;
$color-error-subtle: #DBD6CA;
$color-warning: #DF9B17;
$color-warning-subtle: #DEE5C7;
$color-success: #1C9D4B;
$color-success-subtle: #C1E5CE;

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

// ---- Dark theme ----
$color-dark-bg: #10201C;
$color-dark-surface: #16262A;
$color-dark-surface2: #1C2C32;
$color-dark-border: #1D333A;
$color-dark-border_strong: #2B434E;
$color-dark-text: #E0EAEE;
$color-dark-text2: #839BAF;
$color-dark-text_muted: #728D99;
$color-dark-brand_subtle: #163F30;
$color-dark-error_subtle: #3B2E32;
$color-dark-warning_subtle: #3F402D;
$color-dark-success_subtle: #1C4137;
$color-dark-shadow_sm: 0 0 0 1px rgba(22, 163, 74, 0.1);
$color-dark-shadow_md: 0 4px 20px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(22, 163, 74, 0.06);
$color-dark-shadow_lg: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(22, 163, 74, 0.08);
$shadow-dark-shadow_sm: 0 0 0 1px rgba(22, 163, 74, 0.1);
$shadow-dark-shadow_md: 0 4px 20px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(22, 163, 74, 0.06);
$shadow-dark-shadow_lg: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(22, 163, 74, 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;
}