@stigmer/theme 0.0.97 → 0.0.98

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +3 -2
  2. package/presets/index.d.ts +6 -0
  3. package/presets/index.d.ts.map +1 -1
  4. package/presets/index.js +7 -0
  5. package/presets/index.js.map +1 -1
  6. package/presets/monochrome.css +113 -0
  7. package/src/presets/index.ts +7 -0
  8. package/src/presets/monochrome.css +113 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stigmer/theme",
3
- "version": "0.0.97",
3
+ "version": "0.0.98",
4
4
  "description": "Design tokens, CSS custom properties, and utility functions for Stigmer UI components",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
@@ -37,7 +37,8 @@
37
37
  "./presets/corporate.css": "./presets/corporate.css",
38
38
  "./presets/startup.css": "./presets/startup.css",
39
39
  "./presets/friendly.css": "./presets/friendly.css",
40
- "./presets/fintech.css": "./presets/fintech.css"
40
+ "./presets/fintech.css": "./presets/fintech.css",
41
+ "./presets/monochrome.css": "./presets/monochrome.css"
41
42
  },
42
43
  "peerDependencies": {
43
44
  "clsx": "^2.0.0",
package/presets/index.d.ts CHANGED
@@ -37,6 +37,12 @@ export declare const THEME_PRESETS: readonly [{
37
37
  readonly className: "stgm-theme-fintech";
38
38
  readonly description: "Premium financial — sharp corners, indigo, crisp, dark sidebar";
39
39
  readonly swatch: "oklch(0.50 0.22 280)";
40
+ }, {
41
+ readonly id: "monochrome";
42
+ readonly name: "Monochrome";
43
+ readonly className: "stgm-theme-monochrome";
44
+ readonly description: "Black-and-white editorial — zero chroma, typographic, sharp";
45
+ readonly swatch: "oklch(0.18 0 0)";
40
46
  }];
41
47
  /** Union of built-in preset identifiers. */
42
48
  export type ThemePresetId = (typeof THEME_PRESETS)[number]["id"];
package/presets/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,mEAAmE;IACnE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCiB,CAAC;AAE5C,4CAA4C;AAC5C,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,aAAa,GAAG,MAAM,CAY5D"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,mEAAmE;IACnE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CiB,CAAC;AAE5C,4CAA4C;AAC5C,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjE;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,aAAa,GAAG,MAAM,CAY5D"}
package/presets/index.js CHANGED
@@ -34,6 +34,13 @@ export const THEME_PRESETS = [
34
34
  description: "Premium financial — sharp corners, indigo, crisp, dark sidebar",
35
35
  swatch: "oklch(0.50 0.22 280)",
36
36
  },
37
+ {
38
+ id: "monochrome",
39
+ name: "Monochrome",
40
+ className: "stgm-theme-monochrome",
41
+ description: "Black-and-white editorial — zero chroma, typographic, sharp",
42
+ swatch: "oklch(0.18 0 0)",
43
+ },
37
44
  ];
38
45
  /**
39
46
  * Resolve a preset ID to its CSS class name.
package/presets/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,iCAAiC;QAC9C,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,EAAE,EAAE,WAAW;QACf,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,sBAAsB;QACjC,WAAW,EAAE,gEAAgE;QAC7E,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,oBAAoB;QAC/B,WAAW,EAAE,8DAA8D;QAC3E,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,EAAE,EAAE,UAAU;QACd,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,qBAAqB;QAChC,WAAW,EAAE,0DAA0D;QACvE,MAAM,EAAE,qBAAqB;KAC9B;IACD;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,oBAAoB;QAC/B,WAAW,EAAE,gEAAgE;QAC7E,MAAM,EAAE,sBAAsB;KAC/B;CACwC,CAAC;AAK5C;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAiB;IAClD,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IACtD,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;YAC1C,OAAO,CAAC,IAAI,CACV,oCAAoC,MAAM,CAAC,EAAE,CAAC,KAAK;gBACjD,cAAc,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAC5D,CAAC;QACJ,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,MAAM,CAAC,SAAS,CAAC;AAC1B,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,iCAAiC;QAC9C,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,EAAE,EAAE,WAAW;QACf,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,sBAAsB;QACjC,WAAW,EAAE,gEAAgE;QAC7E,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,oBAAoB;QAC/B,WAAW,EAAE,8DAA8D;QAC3E,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,EAAE,EAAE,UAAU;QACd,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,qBAAqB;QAChC,WAAW,EAAE,0DAA0D;QACvE,MAAM,EAAE,qBAAqB;KAC9B;IACD;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,oBAAoB;QAC/B,WAAW,EAAE,gEAAgE;QAC7E,MAAM,EAAE,sBAAsB;KAC/B;IACD;QACE,EAAE,EAAE,YAAY;QAChB,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,uBAAuB;QAClC,WAAW,EAAE,6DAA6D;QAC1E,MAAM,EAAE,iBAAiB;KAC1B;CACwC,CAAC;AAK5C;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAiB;IAClD,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IACtD,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;YAC1C,OAAO,CAAC,IAAI,CACV,oCAAoC,MAAM,CAAC,EAAE,CAAC,KAAK;gBACjD,cAAc,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAC5D,CAAC;QACJ,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,MAAM,CAAC,SAAS,CAAC;AAC1B,CAAC"}
package/presets/monochrome.css ADDED
@@ -0,0 +1,113 @@
1
+ /* Monochrome — Editorial black-and-white design language (Linear, Vercel, Notion)
2
+ Zero chroma, tight radius, typographic primary, minimal shadows, sharp and fast.
3
+ Derived from the Stigmer marketing site palette (#0a0a0a / #fafafa anchors).
4
+ Semantic status colors (destructive, success, warning, info) are intentionally
5
+ NOT overridden — they fall through from tokens.css to preserve meaning. */
6
+
7
+ .stgm-theme-monochrome {
8
+ --stgm-radius: 0.375rem;
9
+ --stgm-background: oklch(0.99 0 0);
10
+ --stgm-foreground: oklch(0.15 0 0);
11
+ --stgm-card: oklch(1 0 0);
12
+ --stgm-card-foreground: oklch(0.15 0 0);
13
+ --stgm-popover: oklch(1 0 0);
14
+ --stgm-popover-foreground: oklch(0.15 0 0);
15
+ --stgm-primary: oklch(0.15 0 0);
16
+ --stgm-primary-foreground: oklch(0.99 0 0);
17
+ --stgm-secondary: oklch(0.96 0 0);
18
+ --stgm-secondary-foreground: oklch(0.25 0 0);
19
+ --stgm-muted: oklch(0.96 0 0);
20
+ --stgm-muted-foreground: oklch(0.45 0 0);
21
+ --stgm-accent: oklch(0.96 0 0);
22
+ --stgm-accent-foreground: oklch(0.25 0 0);
23
+ --stgm-border: oklch(0.92 0 0);
24
+ --stgm-input: oklch(0.92 0 0);
25
+ --stgm-ring: oklch(0.15 0 0);
26
+ --stgm-chart-1: oklch(0.25 0 0);
27
+ --stgm-chart-2: oklch(0.40 0 0);
28
+ --stgm-chart-3: oklch(0.55 0 0);
29
+ --stgm-chart-4: oklch(0.70 0 0);
30
+ --stgm-chart-5: oklch(0.82 0 0);
31
+ --stgm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 1px -1px rgb(0 0 0 / 0.03);
32
+ --stgm-shadow-md: 0 3px 5px -1px rgb(0 0 0 / 0.05), 0 1px 3px -2px rgb(0 0 0 / 0.04);
33
+ --stgm-shadow-lg: 0 8px 12px -3px rgb(0 0 0 / 0.06), 0 3px 5px -4px rgb(0 0 0 / 0.04);
34
+ --stgm-transition-duration: 100ms;
35
+ --stgm-transition-timing: cubic-bezier(0, 0, 0.2, 1);
36
+ --stgm-primary-hover: oklch(0.25 0 0);
37
+ --stgm-primary-subtle: oklch(0.96 0 0);
38
+ --stgm-destructive-subtle: oklch(0.96 0.02 25);
39
+ --stgm-muted-subtle: oklch(0.97 0 0);
40
+ --stgm-muted-foreground-subtle: oklch(0.55 0 0);
41
+ --stgm-accent-hover: oklch(0.97 0 0);
42
+ --stgm-destructive-hover: oklch(0.52 0.22 27.325);
43
+ --stgm-foreground-hover: oklch(0.20 0 0);
44
+ --stgm-border-muted: oklch(0.95 0 0);
45
+ --stgm-muted-faint: oklch(0.98 0 0);
46
+ --stgm-primary-muted: oklch(0.40 0 0);
47
+ --stgm-destructive-muted: oklch(0.65 0.12 27.325);
48
+ --stgm-muted-foreground-faint: oklch(0.68 0 0);
49
+ --stgm-backdrop: oklch(0.99 0 0 / 80%);
50
+ --stgm-sidebar: oklch(0.97 0 0);
51
+ --stgm-sidebar-foreground: oklch(0.15 0 0);
52
+ --stgm-sidebar-primary: oklch(0.15 0 0);
53
+ --stgm-sidebar-primary-foreground: oklch(0.99 0 0);
54
+ --stgm-sidebar-muted: oklch(0.94 0 0);
55
+ --stgm-sidebar-muted-foreground: oklch(0.45 0 0);
56
+ --stgm-sidebar-accent: oklch(0.94 0 0);
57
+ --stgm-sidebar-accent-foreground: oklch(0.25 0 0);
58
+ --stgm-sidebar-border: oklch(0.92 0 0);
59
+ --stgm-sidebar-ring: oklch(0.15 0 0);
60
+ }
61
+
62
+ [data-stgm-color-mode="dark"] .stgm-theme-monochrome,
63
+ .stgm-theme-monochrome[data-stgm-color-mode="dark"] {
64
+ --stgm-background: oklch(0.145 0 0);
65
+ --stgm-foreground: oklch(0.96 0 0);
66
+ --stgm-card: oklch(0.21 0 0);
67
+ --stgm-card-foreground: oklch(0.96 0 0);
68
+ --stgm-popover: oklch(0.24 0 0);
69
+ --stgm-popover-foreground: oklch(0.96 0 0);
70
+ --stgm-primary: oklch(0.96 0 0);
71
+ --stgm-primary-foreground: oklch(0.145 0 0);
72
+ --stgm-secondary: oklch(0.21 0 0);
73
+ --stgm-secondary-foreground: oklch(0.96 0 0);
74
+ --stgm-muted: oklch(0.21 0 0);
75
+ --stgm-muted-foreground: oklch(0.64 0 0);
76
+ --stgm-accent: oklch(0.25 0 0);
77
+ --stgm-accent-foreground: oklch(0.96 0 0);
78
+ --stgm-border: oklch(0.27 0 0);
79
+ --stgm-input: oklch(0.27 0 0);
80
+ --stgm-ring: oklch(0.96 0 0);
81
+ --stgm-chart-1: oklch(0.85 0 0);
82
+ --stgm-chart-2: oklch(0.70 0 0);
83
+ --stgm-chart-3: oklch(0.55 0 0);
84
+ --stgm-chart-4: oklch(0.40 0 0);
85
+ --stgm-chart-5: oklch(0.28 0 0);
86
+ --stgm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.20), 0 1px 1px -1px rgb(0 0 0 / 0.18);
87
+ --stgm-shadow-md: 0 3px 5px -1px rgb(0 0 0 / 0.24), 0 1px 3px -2px rgb(0 0 0 / 0.20);
88
+ --stgm-shadow-lg: 0 8px 12px -3px rgb(0 0 0 / 0.28), 0 3px 5px -4px rgb(0 0 0 / 0.22);
89
+ --stgm-primary-hover: oklch(0.88 0 0);
90
+ --stgm-primary-subtle: oklch(0.21 0 0);
91
+ --stgm-destructive-subtle: oklch(0.21 0.03 25);
92
+ --stgm-muted-subtle: oklch(0.18 0 0);
93
+ --stgm-muted-foreground-subtle: oklch(0.55 0 0);
94
+ --stgm-accent-hover: oklch(0.22 0 0);
95
+ --stgm-destructive-hover: oklch(0.64 0.17 22);
96
+ --stgm-foreground-hover: oklch(0.88 0 0);
97
+ --stgm-border-muted: oklch(0.22 0 0);
98
+ --stgm-muted-faint: oklch(0.17 0 0);
99
+ --stgm-primary-muted: oklch(0.80 0 0);
100
+ --stgm-destructive-muted: oklch(0.60 0.10 22);
101
+ --stgm-muted-foreground-faint: oklch(0.45 0 0);
102
+ --stgm-backdrop: oklch(0.145 0 0 / 80%);
103
+ --stgm-sidebar: oklch(0.11 0 0);
104
+ --stgm-sidebar-foreground: oklch(0.96 0 0);
105
+ --stgm-sidebar-primary: oklch(0.96 0 0);
106
+ --stgm-sidebar-primary-foreground: oklch(0.145 0 0);
107
+ --stgm-sidebar-muted: oklch(0.18 0 0);
108
+ --stgm-sidebar-muted-foreground: oklch(0.55 0 0);
109
+ --stgm-sidebar-accent: oklch(0.20 0 0);
110
+ --stgm-sidebar-accent-foreground: oklch(0.96 0 0);
111
+ --stgm-sidebar-border: oklch(0.24 0 0);
112
+ --stgm-sidebar-ring: oklch(0.96 0 0);
113
+ }
package/src/presets/index.ts CHANGED
@@ -44,6 +44,13 @@ export const THEME_PRESETS = [
44
44
  description: "Premium financial — sharp corners, indigo, crisp, dark sidebar",
45
45
  swatch: "oklch(0.50 0.22 280)",
46
46
  },
47
+ {
48
+ id: "monochrome",
49
+ name: "Monochrome",
50
+ className: "stgm-theme-monochrome",
51
+ description: "Black-and-white editorial — zero chroma, typographic, sharp",
52
+ swatch: "oklch(0.18 0 0)",
53
+ },
47
54
  ] as const satisfies readonly ThemePreset[];
48
55
 
49
56
  /** Union of built-in preset identifiers. */
package/src/presets/monochrome.css ADDED
@@ -0,0 +1,113 @@
1
+ /* Monochrome — Editorial black-and-white design language (Linear, Vercel, Notion)
2
+ Zero chroma, tight radius, typographic primary, minimal shadows, sharp and fast.
3
+ Derived from the Stigmer marketing site palette (#0a0a0a / #fafafa anchors).
4
+ Semantic status colors (destructive, success, warning, info) are intentionally
5
+ NOT overridden — they fall through from tokens.css to preserve meaning. */
6
+
7
+ .stgm-theme-monochrome {
8
+ --stgm-radius: 0.375rem;
9
+ --stgm-background: oklch(0.99 0 0);
10
+ --stgm-foreground: oklch(0.15 0 0);
11
+ --stgm-card: oklch(1 0 0);
12
+ --stgm-card-foreground: oklch(0.15 0 0);
13
+ --stgm-popover: oklch(1 0 0);
14
+ --stgm-popover-foreground: oklch(0.15 0 0);
15
+ --stgm-primary: oklch(0.15 0 0);
16
+ --stgm-primary-foreground: oklch(0.99 0 0);
17
+ --stgm-secondary: oklch(0.96 0 0);
18
+ --stgm-secondary-foreground: oklch(0.25 0 0);
19
+ --stgm-muted: oklch(0.96 0 0);
20
+ --stgm-muted-foreground: oklch(0.45 0 0);
21
+ --stgm-accent: oklch(0.96 0 0);
22
+ --stgm-accent-foreground: oklch(0.25 0 0);
23
+ --stgm-border: oklch(0.92 0 0);
24
+ --stgm-input: oklch(0.92 0 0);
25
+ --stgm-ring: oklch(0.15 0 0);
26
+ --stgm-chart-1: oklch(0.25 0 0);
27
+ --stgm-chart-2: oklch(0.40 0 0);
28
+ --stgm-chart-3: oklch(0.55 0 0);
29
+ --stgm-chart-4: oklch(0.70 0 0);
30
+ --stgm-chart-5: oklch(0.82 0 0);
31
+ --stgm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 1px -1px rgb(0 0 0 / 0.03);
32
+ --stgm-shadow-md: 0 3px 5px -1px rgb(0 0 0 / 0.05), 0 1px 3px -2px rgb(0 0 0 / 0.04);
33
+ --stgm-shadow-lg: 0 8px 12px -3px rgb(0 0 0 / 0.06), 0 3px 5px -4px rgb(0 0 0 / 0.04);
34
+ --stgm-transition-duration: 100ms;
35
+ --stgm-transition-timing: cubic-bezier(0, 0, 0.2, 1);
36
+ --stgm-primary-hover: oklch(0.25 0 0);
37
+ --stgm-primary-subtle: oklch(0.96 0 0);
38
+ --stgm-destructive-subtle: oklch(0.96 0.02 25);
39
+ --stgm-muted-subtle: oklch(0.97 0 0);
40
+ --stgm-muted-foreground-subtle: oklch(0.55 0 0);
41
+ --stgm-accent-hover: oklch(0.97 0 0);
42
+ --stgm-destructive-hover: oklch(0.52 0.22 27.325);
43
+ --stgm-foreground-hover: oklch(0.20 0 0);
44
+ --stgm-border-muted: oklch(0.95 0 0);
45
+ --stgm-muted-faint: oklch(0.98 0 0);
46
+ --stgm-primary-muted: oklch(0.40 0 0);
47
+ --stgm-destructive-muted: oklch(0.65 0.12 27.325);
48
+ --stgm-muted-foreground-faint: oklch(0.68 0 0);
49
+ --stgm-backdrop: oklch(0.99 0 0 / 80%);
50
+ --stgm-sidebar: oklch(0.97 0 0);
51
+ --stgm-sidebar-foreground: oklch(0.15 0 0);
52
+ --stgm-sidebar-primary: oklch(0.15 0 0);
53
+ --stgm-sidebar-primary-foreground: oklch(0.99 0 0);
54
+ --stgm-sidebar-muted: oklch(0.94 0 0);
55
+ --stgm-sidebar-muted-foreground: oklch(0.45 0 0);
56
+ --stgm-sidebar-accent: oklch(0.94 0 0);
57
+ --stgm-sidebar-accent-foreground: oklch(0.25 0 0);
58
+ --stgm-sidebar-border: oklch(0.92 0 0);
59
+ --stgm-sidebar-ring: oklch(0.15 0 0);
60
+ }
61
+
62
+ [data-stgm-color-mode="dark"] .stgm-theme-monochrome,
63
+ .stgm-theme-monochrome[data-stgm-color-mode="dark"] {
64
+ --stgm-background: oklch(0.145 0 0);
65
+ --stgm-foreground: oklch(0.96 0 0);
66
+ --stgm-card: oklch(0.21 0 0);
67
+ --stgm-card-foreground: oklch(0.96 0 0);
68
+ --stgm-popover: oklch(0.24 0 0);
69
+ --stgm-popover-foreground: oklch(0.96 0 0);
70
+ --stgm-primary: oklch(0.96 0 0);
71
+ --stgm-primary-foreground: oklch(0.145 0 0);
72
+ --stgm-secondary: oklch(0.21 0 0);
73
+ --stgm-secondary-foreground: oklch(0.96 0 0);
74
+ --stgm-muted: oklch(0.21 0 0);
75
+ --stgm-muted-foreground: oklch(0.64 0 0);
76
+ --stgm-accent: oklch(0.25 0 0);
77
+ --stgm-accent-foreground: oklch(0.96 0 0);
78
+ --stgm-border: oklch(0.27 0 0);
79
+ --stgm-input: oklch(0.27 0 0);
80
+ --stgm-ring: oklch(0.96 0 0);
81
+ --stgm-chart-1: oklch(0.85 0 0);
82
+ --stgm-chart-2: oklch(0.70 0 0);
83
+ --stgm-chart-3: oklch(0.55 0 0);
84
+ --stgm-chart-4: oklch(0.40 0 0);
85
+ --stgm-chart-5: oklch(0.28 0 0);
86
+ --stgm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.20), 0 1px 1px -1px rgb(0 0 0 / 0.18);
87
+ --stgm-shadow-md: 0 3px 5px -1px rgb(0 0 0 / 0.24), 0 1px 3px -2px rgb(0 0 0 / 0.20);
88
+ --stgm-shadow-lg: 0 8px 12px -3px rgb(0 0 0 / 0.28), 0 3px 5px -4px rgb(0 0 0 / 0.22);
89
+ --stgm-primary-hover: oklch(0.88 0 0);
90
+ --stgm-primary-subtle: oklch(0.21 0 0);
91
+ --stgm-destructive-subtle: oklch(0.21 0.03 25);
92
+ --stgm-muted-subtle: oklch(0.18 0 0);
93
+ --stgm-muted-foreground-subtle: oklch(0.55 0 0);
94
+ --stgm-accent-hover: oklch(0.22 0 0);
95
+ --stgm-destructive-hover: oklch(0.64 0.17 22);
96
+ --stgm-foreground-hover: oklch(0.88 0 0);
97
+ --stgm-border-muted: oklch(0.22 0 0);
98
+ --stgm-muted-faint: oklch(0.17 0 0);
99
+ --stgm-primary-muted: oklch(0.80 0 0);
100
+ --stgm-destructive-muted: oklch(0.60 0.10 22);
101
+ --stgm-muted-foreground-faint: oklch(0.45 0 0);
102
+ --stgm-backdrop: oklch(0.145 0 0 / 80%);
103
+ --stgm-sidebar: oklch(0.11 0 0);
104
+ --stgm-sidebar-foreground: oklch(0.96 0 0);
105
+ --stgm-sidebar-primary: oklch(0.96 0 0);
106
+ --stgm-sidebar-primary-foreground: oklch(0.145 0 0);
107
+ --stgm-sidebar-muted: oklch(0.18 0 0);
108
+ --stgm-sidebar-muted-foreground: oklch(0.55 0 0);
109
+ --stgm-sidebar-accent: oklch(0.20 0 0);
110
+ --stgm-sidebar-accent-foreground: oklch(0.96 0 0);
111
+ --stgm-sidebar-border: oklch(0.24 0 0);
112
+ --stgm-sidebar-ring: oklch(0.96 0 0);
113
+ }