geeklego/design-system/v2/themes/dark.css at geeklego-v2-beta · GeekyAnts/geeklego · 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
/* =============================================================================
   geeklego v2 — DARK THEME
   A theme is just a set of Tier-2 (semantic) overrides re-pointed at different
   primitives. Nothing here touches primitives or components.

   Supports BOTH selectors:
     [data-theme="dark"]  — the existing Token Editor / Storybook theme switch
     .dark                — the ShadCN standard convention
   --------------------------------------------------------------------------- */
[data-theme="dark"],
.dark {
  --background:            var(--color-neutral-950);
  --foreground:            var(--color-neutral-50);
  --primary:               var(--color-neutral-0);
  --primary-foreground:    var(--color-neutral-900);
  --secondary:             var(--color-neutral-800);
  --secondary-foreground:  var(--color-neutral-50);
  --muted:                 var(--color-neutral-800);
  --muted-foreground:      var(--color-neutral-400);
  --accent:                var(--color-neutral-800);
  --accent-foreground:     var(--color-neutral-50);
  --destructive:           var(--color-error-600);
  --destructive-foreground: var(--color-neutral-50);
  --success:               var(--color-success-600);
  --success-foreground:    var(--color-neutral-50);
  --warning:               var(--color-warning-600);
  --warning-foreground:    var(--color-neutral-50);
  --info:                  var(--color-info-600);
  --info-foreground:       var(--color-neutral-50);
  --border:                var(--color-neutral-700);
  --input:                 var(--color-neutral-700);
  --ring:                  var(--color-brand-600);
  --card:                  var(--color-neutral-900);
  --card-foreground:       var(--color-neutral-50);
  --popover:               var(--color-neutral-900);
  --popover-foreground:    var(--color-neutral-50);
  --sidebar-bg:            var(--color-neutral-900);
  --sidebar-foreground:    var(--color-neutral-50);
  --sidebar-border:        var(--color-neutral-700);
  --sidebar-accent:        var(--color-neutral-800);
  --sidebar-accent-foreground: var(--color-neutral-50);
  --sidebar-ring:          var(--color-brand-300);
  --chart-1:               var(--color-brand-400);
  --chart-2:               var(--color-accent-400);
  --chart-3:               var(--color-success-400);
  --chart-4:               var(--color-warning-400);
  --chart-5:               var(--color-info-400);
  --brand-emphasis:        var(--color-brand-500);
  --brand-foreground:      var(--color-neutral-0);
  --brand-border:          var(--color-brand-500);
  --brand-subtle:          var(--color-brand-900);
  --brand-ring:            var(--color-brand-300);
  --border-strong:         var(--color-neutral-600);
  --border-muted:          var(--color-neutral-800);

  /* --ext-* overrides for dark (opaque passthrough). */
  --ext-button-gamified-shadow: 0 2px 0 0 var(--color-accent-800);
}