FAIRWallet/global.css at main · FairCoinOfficial/FAIRWallet · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";
@import "nativewind/theme";
@import "@oxyhq/bloom/design-tokens/theme.css";

@source "./app/**/*.{js,jsx,ts,tsx}";
@source "./src/**/*.{js,jsx,ts,tsx}";
@source "./node_modules/@oxyhq/bloom/lib/**/*.{js,jsx}";

/*
 * FAIRWallet semantic token contract. The base `--x` variables are injected at
 * runtime by Bloom's `BloomThemeProvider` (the active `faircoin` preset,
 * resolved to full `rgb(...)`), so every token references `var(--x)` directly —
 * no `hsl(... / <alpha-value>)` (that was the Tailwind 3 / NativeWind 4 form).
 * `success`/`warning` are not part of Bloom's preset, so they're defined here.
 */
@theme {
  --font-sans: System, sans-serif;
  --font-display: Phudu;
  --spacing-18: 4.5rem;

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface: var(--surface);
  --color-surface-foreground: var(--surface-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar: var(--sidebar);
  --color-success: var(--primary);
  --color-warning: rgb(231, 176, 8);
}

@layer base {
  :root {
    --radius: 1rem;
  }
}

/*
 * Custom scrollbar for web / Electron. Native platforms ignore this. Tokens are
 * now full colors (rgb), so alpha is applied via color-mix, not `hsl(... / a)`.
 */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
  min-height: 48px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--muted-foreground) 65%, transparent);
}

::-webkit-scrollbar-thumb:active {
  background-color: color-mix(in srgb, var(--primary) 80%, transparent);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent)
    transparent;
}