domma-js 0.18.2 → 0.19.1

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 (17) hide show
  1. package/package.json +1 -1
  2. package/public/dist/bundles/domma-complete.css +1279 -170
  3. package/public/dist/bundles/domma-data-focused.css +1282 -392
  4. package/public/dist/bundles/domma-essentials.css +1282 -392
  5. package/public/dist/bundles/domma-full.css +1282 -392
  6. package/public/dist/bundles/domma-minimal.css +8 -8
  7. package/public/dist/domma-syntax.min.js +3 -3
  8. package/public/dist/domma.css +3 -3
  9. package/public/dist/domma.esm.js +4 -4
  10. package/public/dist/domma.min.js +4 -4
  11. package/public/dist/elements.css +3 -3
  12. package/public/dist/grid.css +3 -3
  13. package/public/dist/syntax.css +3 -3
  14. package/public/dist/themes/domma-themes.css +1276 -167
  15. package/templates/kickstart/CLAUDE.md +1 -1
  16. package/public/dist/bundles/domma-grayve.css +0 -15998
  17. package/public/dist/themes/grayve.css +0 -213
package/public/dist/bundles/domma-essentials.css CHANGED
@@ -1,240 +1,21 @@
1
1
  /*!
2
- * Domma Essentials CSS Bundle v0.18.1
2
+ * Domma Essentials CSS Bundle v0.19.0
3
3
  * Dynamic Object Manipulation & Modeling API
4
4
  * (c) 2026 Darryl Waterhouse & DCBW-IT
5
- * Built: 2026-02-25T21:51:20.157Z
5
+ * Built: 2026-03-04T12:58:08.994Z
6
6
  */
7
7
 
8
- /* ============================================
9
- GRAYVE THEME
10
- Bootswatch Slate theme adaptation
11
- ============================================ */
12
-
13
- .dm-theme-grayve {
14
- color-scheme: dark; /* Slate is typically a dark theme */
15
-
16
- /* Tailwind-based color palette - adapting for grayve */
17
- /* Slate (using bootswatch values) */
18
- --dm-slate-50: #F8F9FA; /* Off-white */
19
- --dm-slate-100: #E9ECEF;
20
- --dm-slate-200: #DEE2E6;
21
- --dm-slate-300: #CED4DA;
22
- --dm-slate-400: #ADB5BD;
23
- --dm-slate-500: #6C757D; /* Medium Gray */
24
- --dm-slate-600: #495057;
25
- --dm-slate-700: #343A40;
26
- --dm-slate-800: #212529;
27
- --dm-slate-900: #1a1e21; /* Dark Gray */
28
- --dm-slate-950: #141619; /* Very Dark Gray */
29
-
30
- /* Blues (for primary/info, etc.) */
31
- --dm-blue-50: #e0f7fa;
32
- --dm-blue-100: #b2ebf2;
33
- --dm-blue-200: #80deea;
34
- --dm-blue-300: #4dd0e1;
35
- --dm-blue-400: #26c6da;
36
- --dm-blue-500: #00bcd4; /* Bootswatch primary might be close to this or lighter */
37
- --dm-blue-600: #00acc1;
38
- --dm-blue-700: #0097a7;
39
- --dm-blue-800: #00838f;
40
- --dm-blue-900: #006064;
41
- --dm-blue-950: #004d40;
42
-
43
- /* Green (Success) */
44
- --dm-green-500: #28a745;
45
- --dm-green-400: #49cc61;
46
- --dm-green-300: #6fd180;
47
- --dm-green-600: #218838;
48
-
49
- /* Red (Danger) */
50
- --dm-red-500: #dc3545;
51
- --dm-red-400: #e35a67;
52
- --dm-red-300: #eb808a;
53
- --dm-red-600: #c82333;
54
-
55
- /* Amber (Warning) */
56
- --dm-amber-500: #ffc107;
57
- --dm-amber-400: #ffcd38;
58
- --dm-amber-300: #ffd865;
59
- --dm-amber-600: #e0a800;
60
-
61
- /* Sky (Info - often similar to primary but distinct) */
62
- --dm-sky-500: #17a2b8;
63
- --dm-sky-400: #26d2e9;
64
- --dm-sky-300: #51daec;
65
- --dm-sky-600: #138496;
66
-
67
- /* Semantic colors */
68
- --dm-background: var(--dm-slate-900);
69
- --dm-background-alt: var(--dm-slate-800);
70
- --dm-surface: var(--dm-slate-800);
71
- --dm-surface-raised: var(--dm-slate-700);
72
- --dm-surface-overlay: rgba(0, 0, 0, 0.7);
73
-
74
- /* Text */
75
- --dm-text: var(--dm-slate-200);
76
- --dm-text-secondary: var(--dm-slate-400);
77
- --dm-text-muted: var(--dm-slate-500);
78
- --dm-text-disabled: var(--dm-slate-600);
79
- --dm-text-inverse: var(--dm-slate-900);
80
-
81
- /* Borders */
82
- --dm-border: var(--dm-slate-700);
83
- --dm-border-light: var(--dm-slate-800);
84
- --dm-border-dark: var(--dm-slate-600);
85
- --dm-border-focus: var(--dm-blue-500); /* Use a vibrant blue for focus */
86
- --dm-focus-ring: rgba(0, 188, 212, 0.3); /* Based on dm-blue-500 */
87
- --dm-focus-ring-danger: rgba(220, 53, 69, 0.3); /* Based on dm-red-500 */
88
-
89
- /* Interactive States */
90
- --dm-hover-bg: rgba(255, 255, 255, 0.07);
91
- --dm-active-bg: rgba(255, 255, 255, 0.1);
92
- --dm-selected-bg: var(--dm-blue-600);
93
- --dm-disabled-opacity: 0.4;
94
-
95
- /* Brand Colors */
96
- --dm-primary: var(--dm-blue-500);
97
- --dm-primary-dark: var(--dm-blue-700);
98
- --dm-primary-light: var(--dm-blue-300);
99
- --dm-primary-hover: var(--dm-blue-400);
100
- --dm-primary-active: var(--dm-blue-600);
101
-
102
- --dm-secondary: var(--dm-slate-500);
103
- --dm-secondary-hover: var(--dm-slate-400);
104
- --dm-secondary-active: var(--dm-slate-300);
105
-
106
- /* Status Colors */
107
- --dm-success: var(--dm-green-500);
108
- --dm-success-hover: var(--dm-green-400);
109
- --dm-success-active: var(--dm-green-600);
110
- --dm-success-light: rgba(40, 167, 69, 0.2);
111
- --dm-success-dark: var(--dm-green-600);
112
-
113
- --dm-danger: var(--dm-red-500);
114
- --dm-danger-hover: var(--dm-red-400);
115
- --dm-danger-active: var(--dm-red-600);
116
- --dm-danger-light: rgba(220, 53, 69, 0.2);
117
- --dm-danger-dark: var(--dm-red-600);
118
-
119
- --dm-warning: var(--dm-amber-400);
120
- --dm-warning-hover: var(--dm-amber-300);
121
- --dm-warning-active: var(--dm-amber-500);
122
- --dm-warning-text: var(--dm-amber-900);
123
- --dm-warning-light: rgba(255, 193, 7, 0.2);
124
- --dm-warning-dark: var(--dm-amber-600);
125
-
126
- --dm-info: var(--dm-sky-500);
127
- --dm-info-hover: var(--dm-sky-400);
128
- --dm-info-active: var(--dm-sky-600);
129
- --dm-info-light: rgba(23, 162, 184, 0.2);
130
- --dm-info-dark: var(--dm-sky-600);
131
-
132
- /* Background Tints */
133
- --dm-primary-bg: rgba(0, 188, 212, 0.15);
134
- --dm-secondary-bg: rgba(108, 117, 125, 0.15);
135
- --dm-success-bg: rgba(40, 167, 69, 0.15);
136
- --dm-danger-bg: rgba(220, 53, 69, 0.15);
137
- --dm-warning-bg: rgba(255, 193, 7, 0.15);
138
- --dm-info-bg: rgba(23, 162, 184, 0.15);
139
-
140
- /* Semantic Surface Colors */
141
- --dm-surface-secondary: var(--dm-slate-900);
142
- --dm-card-bg: var(--dm-slate-800);
143
- --dm-card-border: var(--dm-slate-700);
144
-
145
- /* Legacy color names (kept for backwards compatibility) */
146
- --dm-light: var(--dm-slate-200);
147
- --dm-dark: var(--dm-slate-800);
148
- --dm-white: #ffffff;
149
- --dm-black: #000000;
150
-
151
- /* Grays (mapped to Slate) */
152
- --dm-gray-50: var(--dm-slate-50);
153
- --dm-gray-100: var(--dm-slate-100);
154
- --dm-gray-200: var(--dm-slate-200);
155
- --dm-gray-300: var(--dm-slate-300);
156
- --dm-gray-400: var(--dm-slate-400);
157
- --dm-gray-500: var(--dm-slate-500);
158
- --dm-gray-600: var(--dm-slate-600);
159
- --dm-gray-700: var(--dm-slate-700);
160
- --dm-gray-800: var(--dm-slate-800);
161
- --dm-gray-900: var(--dm-slate-900);
162
- --dm-gray-950: var(--dm-slate-950);
163
-
164
- /* Component-specific variables */
165
- --dm-input-bg: var(--dm-surface);
166
- --dm-input-border: var(--dm-border-dark);
167
- --dm-input-text: var(--dm-text);
168
- --dm-input-placeholder: var(--dm-text-muted);
169
- --dm-input-focus-border: var(--dm-primary);
170
- --dm-input-disabled-bg: var(--dm-slate-800);
171
-
172
- --dm-table-border: var(--dm-border);
173
- --dm-table-hover-bg: var(--dm-hover-bg);
174
- --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
175
-
176
- --dm-navbar-bg: var(--dm-surface);
177
- --dm-navbar-text: var(--dm-text);
178
- --dm-navbar-border: var(--dm-border);
179
-
180
- --dm-dropdown-bg: var(--dm-surface-raised);
181
- --dm-dropdown-border: var(--dm-border);
182
- --dm-dropdown-item-hover: var(--dm-hover-bg);
183
- --dm-dropdown-item-active: var(--dm-selected-bg);
184
-
185
- --dm-sidebar-bg: var(--dm-surface);
186
- --dm-sidebar-border: var(--dm-border);
187
- --dm-sidebar-item-hover: var(--dm-hover-bg);
188
- --dm-sidebar-item-active: var(--dm-selected-bg);
189
-
190
- --dm-autocomplete-bg: var(--dm-surface);
191
- --dm-autocomplete-border: var(--dm-border);
192
- --dm-autocomplete-shadow: var(--dm-shadow-md);
193
- --dm-autocomplete-item-hover: var(--dm-hover-bg);
194
- --dm-autocomplete-item-active: var(--dm-selected-bg);
195
- --dm-autocomplete-highlight: var(--dm-primary-light);
196
-
197
- --dm-pillbox-bg: var(--dm-surface);
198
- --dm-pillbox-border: var(--dm-border);
199
- --dm-pill-bg: var(--dm-gray-700); /* Darker pill background for dark theme */
200
- --dm-pill-color: var(--dm-text);
201
- --dm-pill-hover-bg: var(--dm-gray-600);
202
-
203
- --dm-tab-border: var(--dm-border);
204
- --dm-tab-hover-bg: var(--dm-hover-bg);
205
- --dm-tab-active-border: var(--dm-primary);
206
- --dm-tab-active-text: var(--dm-primary);
207
-
208
- --dm-accordion-border: var(--dm-border);
209
- --dm-accordion-header-hover: var(--dm-hover-bg);
210
- }
211
-
212
- /* Syntax highlighting tokens for grayve (assuming similar to dark theme) */
213
- .dm-theme-grayve .code-block .syntax-keyword {
214
- color: #c792ea; /* Purple */
215
- font-weight: 500;
216
- }
217
-
218
- .dm-theme-grayve .code-block .syntax-string,
219
- .dm-theme-grayve .code-block .syntax-template-string {
220
- color: #c3e88d; /* Green */
221
- }
222
-
223
- .dm-theme-grayve .code-block .syntax-function {
224
- color: #82aaff; /* Light Blue */
225
- }
226
-
227
8
  /* ============================================
228
9
  DOMMA BASE CSS
229
10
  Base styles, typography, utilities
230
11
  ============================================ */
231
12
 
232
13
  /*!
233
- * Domma Core CSS v0.18.1
14
+ * Domma Core CSS v0.19.0
234
15
  * Dynamic Object Manipulation & Modeling API
235
16
  * (c) 2026 Darryl Waterhouse & DCBW-IT
236
- * Built: 2026-02-25T21:51:19.726Z
237
- * Commit: 2eb305a
17
+ * Built: 2026-03-04T12:58:08.665Z
18
+ * Commit: 1068c4c
238
19
  */
239
20
 
240
21
  /**
@@ -4991,11 +4772,11 @@ body.dm-cloaked.dm-ready {
4991
4772
  ============================================ */
4992
4773
 
4993
4774
  /*!
4994
- * Domma Grid CSS v0.18.1
4775
+ * Domma Grid CSS v0.19.0
4995
4776
  * Dynamic Object Manipulation & Modeling API
4996
4777
  * (c) 2026 Darryl Waterhouse & DCBW-IT
4997
- * Built: 2026-02-25T21:51:19.735Z
4998
- * Commit: 2eb305a
4778
+ * Built: 2026-03-04T12:58:08.679Z
4779
+ * Commit: 1068c4c
4999
4780
  */
5000
4781
 
5001
4782
  /**
@@ -5616,11 +5397,11 @@ body.dm-cloaked.dm-ready {
5616
5397
  ============================================ */
5617
5398
 
5618
5399
  /*!
5619
- * Domma Elements CSS v0.18.1
5400
+ * Domma Elements CSS v0.19.0
5620
5401
  * Dynamic Object Manipulation & Modeling API
5621
5402
  * (c) 2026 Darryl Waterhouse & DCBW-IT
5622
- * Built: 2026-02-25T21:51:19.743Z
5623
- * Commit: 2eb305a
5403
+ * Built: 2026-03-04T12:58:08.689Z
5404
+ * Commit: 1068c4c
5624
5405
  */
5625
5406
 
5626
5407
  /**
@@ -12314,11 +12095,11 @@ code {
12314
12095
  ============================================ */
12315
12096
 
12316
12097
  /*!
12317
- * Domma Themes v0.18.1
12098
+ * Domma Themes v0.19.0
12318
12099
  * Dynamic Object Manipulation & Modeling API
12319
12100
  * (c) 2026 Darryl Waterhouse & DCBW-IT
12320
- * Built: 2026-02-25T21:51:19.692Z
12321
- * Commit: 2eb305a
12101
+ * Built: 2026-03-04T12:58:08.642Z
12102
+ * Commit: 1068c4c
12322
12103
  */
12323
12104
 
12324
12105
  /**
@@ -15781,218 +15562,1327 @@ code {
15781
15562
  --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
15782
15563
 
15783
15564
  }
15784
- .dm-theme-grayve {
15785
- color-scheme: dark; /* Slate is typically a dark theme */
15786
-
15787
- /* Tailwind-based color palette - adapting for grayve */
15788
- /* Slate (using bootswatch values) */
15789
- --dm-slate-50: #F8F9FA; /* Off-white */
15790
- --dm-slate-100: #E9ECEF;
15791
- --dm-slate-200: #DEE2E6;
15792
- --dm-slate-300: #CED4DA;
15793
- --dm-slate-400: #ADB5BD;
15794
- --dm-slate-500: #6C757D; /* Medium Gray */
15795
- --dm-slate-600: #495057;
15796
- --dm-slate-700: #343A40;
15797
- --dm-slate-800: #212529;
15798
- --dm-slate-900: #1a1e21; /* Dark Gray */
15799
- --dm-slate-950: #141619; /* Very Dark Gray */
15800
-
15801
- /* Blues (for primary/info, etc.) */
15802
- --dm-blue-50: #e0f7fa;
15803
- --dm-blue-100: #b2ebf2;
15804
- --dm-blue-200: #80deea;
15805
- --dm-blue-300: #4dd0e1;
15806
- --dm-blue-400: #26c6da;
15807
- --dm-blue-500: #00bcd4; /* Bootswatch primary might be close to this or lighter */
15808
- --dm-blue-600: #00acc1;
15809
- --dm-blue-700: #0097a7;
15810
- --dm-blue-800: #00838f;
15811
- --dm-blue-900: #006064;
15812
- --dm-blue-950: #004d40;
15813
-
15814
- /* Green (Success) */
15815
- --dm-green-500: #28a745;
15816
- --dm-green-400: #49cc61;
15817
- --dm-green-300: #6fd180;
15818
- --dm-green-600: #218838;
15819
-
15820
- /* Red (Danger) */
15821
- --dm-red-500: #dc3545;
15822
- --dm-red-400: #e35a67;
15823
- --dm-red-300: #eb808a;
15824
- --dm-red-600: #c82333;
15825
-
15826
- /* Amber (Warning) */
15827
- --dm-amber-500: #ffc107;
15828
- --dm-amber-400: #ffcd38;
15829
- --dm-amber-300: #ffd865;
15830
- --dm-amber-600: #e0a800;
15831
-
15832
- /* Sky (Info - often similar to primary but distinct) */
15833
- --dm-sky-500: #17a2b8;
15834
- --dm-sky-400: #26d2e9;
15835
- --dm-sky-300: #51daec;
15836
- --dm-sky-600: #138496;
15837
-
15838
- /* Semantic colors */
15839
- --dm-background: var(--dm-slate-900);
15840
- --dm-background-alt: var(--dm-slate-800);
15841
- --dm-surface: var(--dm-slate-800);
15842
- --dm-surface-raised: var(--dm-slate-700);
15843
- --dm-surface-overlay: rgba(0, 0, 0, 0.7);
15565
+ /**
15566
+ * Domma Unicorn Light Theme
15567
+ * Predominantly pink and purple tones
15568
+ * Light mode variant - light backgrounds with vibrant unicorn palette
15569
+ */
15844
15570
 
15845
- /* Text */
15846
- --dm-text: var(--dm-slate-200);
15847
- --dm-text-secondary: var(--dm-slate-400);
15848
- --dm-text-muted: var(--dm-slate-500);
15849
- --dm-text-disabled: var(--dm-slate-600);
15850
- --dm-text-inverse: var(--dm-slate-900);
15571
+ .dm-theme-unicorn-light {
15572
+ color-scheme: light;
15851
15573
 
15852
- /* Borders */
15853
- --dm-border: var(--dm-slate-700);
15854
- --dm-border-light: var(--dm-slate-800);
15855
- --dm-border-dark: var(--dm-slate-600);
15856
- --dm-border-focus: var(--dm-blue-500); /* Use a vibrant blue for focus */
15857
- --dm-focus-ring: rgba(0, 188, 212, 0.3); /* Based on dm-blue-500 */
15858
- --dm-focus-ring-danger: rgba(220, 53, 69, 0.3); /* Based on dm-red-500 */
15574
+ /* ================================================
15575
+ FOUNDATIONAL COLORS - Light Mode Base
15576
+ ================================================ */
15859
15577
 
15860
- /* Interactive States */
15861
- --dm-hover-bg: rgba(255, 255, 255, 0.07);
15862
- --dm-active-bg: rgba(255, 255, 255, 0.1);
15863
- --dm-selected-bg: var(--dm-blue-600);
15864
- --dm-disabled-opacity: 0.4;
15578
+ /* Backgrounds - Light/white backgrounds */
15579
+ --dm-background: #ffffff;
15580
+ --dm-background-alt: #faf5fc;
15581
+ --dm-surface: #ffffff;
15582
+ --dm-surface-raised: #f3e5f5;
15583
+ --dm-surface-overlay: #faf5fc;
15584
+
15585
+ /* Text - Dark colours for readability on light */
15586
+ --dm-text: #2d1b3d;
15587
+ --dm-text-secondary: #5d3a6e;
15588
+ --dm-text-muted: #8e6b9e;
15589
+ --dm-text-disabled: #c4a8d0;
15590
+ --dm-text-inverse: #ffffff;
15865
15591
 
15866
- /* Brand Colors */
15867
- --dm-primary: var(--dm-blue-500);
15868
- --dm-primary-dark: var(--dm-blue-700);
15869
- --dm-primary-light: var(--dm-blue-300);
15870
- --dm-primary-hover: var(--dm-blue-400);
15871
- --dm-primary-active: var(--dm-blue-600);
15592
+ /* Borders - Subtle purple tint on light backgrounds */
15593
+ --dm-border: #e1bee7;
15594
+ --dm-border-light: #f3e5f5;
15595
+ --dm-border-dark: #ce93d8;
15872
15596
 
15873
- --dm-secondary: var(--dm-slate-500);
15874
- --dm-secondary-hover: var(--dm-slate-400);
15875
- --dm-secondary-active: var(--dm-slate-300);
15597
+ /* ================================================
15598
+ UNICORN PRIMARY COLOURS - Amethyst Purple
15599
+ ================================================ */
15600
+ --dm-primary: #9b59b6;
15601
+ --dm-primary-hover: #8e44ad;
15602
+ --dm-primary-active: #7d3c98;
15603
+ --dm-primary-light: #f3e5f5;
15604
+ --dm-primary-dark: #7d3c98;
15876
15605
 
15877
- /* Status Colors */
15878
- --dm-success: var(--dm-green-500);
15879
- --dm-success-hover: var(--dm-green-400);
15880
- --dm-success-active: var(--dm-green-600);
15881
- --dm-success-light: rgba(40, 167, 69, 0.2);
15882
- --dm-success-dark: var(--dm-green-600);
15606
+ /* Focus ring with soft purple colour */
15607
+ --dm-focus-ring: 0 0 0 3px rgba(155, 89, 182, 0.35);
15608
+ --dm-border-focus: #9b59b6;
15883
15609
 
15884
- --dm-danger: var(--dm-red-500);
15885
- --dm-danger-hover: var(--dm-red-400);
15886
- --dm-danger-active: var(--dm-red-600);
15887
- --dm-danger-light: rgba(220, 53, 69, 0.2);
15888
- --dm-danger-dark: var(--dm-red-600);
15610
+ /* ================================================
15611
+ SECONDARY COLOURS - Hot Pink
15612
+ ================================================ */
15613
+ --dm-secondary: #e91e90;
15614
+ --dm-secondary-hover: #d81b7f;
15615
+ --dm-secondary-active: #c2176e;
15616
+ --dm-secondary-light: #fce4ec;
15617
+ --dm-secondary-dark: #c2176e;
15889
15618
 
15890
- --dm-warning: var(--dm-amber-400);
15891
- --dm-warning-hover: var(--dm-amber-300);
15892
- --dm-warning-active: var(--dm-amber-500);
15893
- --dm-warning-text: var(--dm-amber-900);
15894
- --dm-warning-light: rgba(255, 193, 7, 0.2);
15895
- --dm-warning-dark: var(--dm-amber-600);
15619
+ /* ================================================
15620
+ STATUS COLOURS
15621
+ ================================================ */
15622
+ --dm-success: #66bb6a;
15623
+ --dm-success-hover: #57a85b;
15624
+ --dm-success-active: #43a047;
15625
+ --dm-success-light: rgba(102, 187, 106, 0.15);
15626
+ --dm-success-dark: #388e3c;
15896
15627
 
15897
- --dm-info: var(--dm-sky-500);
15898
- --dm-info-hover: var(--dm-sky-400);
15899
- --dm-info-active: var(--dm-sky-600);
15900
- --dm-info-light: rgba(23, 162, 184, 0.2);
15901
- --dm-info-dark: var(--dm-sky-600);
15628
+ --dm-info: #42a5f5;
15629
+ --dm-info-hover: #2196f3;
15630
+ --dm-info-active: #1e88e5;
15631
+ --dm-info-light: rgba(66, 165, 245, 0.15);
15632
+ --dm-info-dark: #1976d2;
15902
15633
 
15903
- /* Background Tints */
15904
- --dm-primary-bg: rgba(0, 188, 212, 0.15);
15905
- --dm-secondary-bg: rgba(108, 117, 125, 0.15);
15906
- --dm-success-bg: rgba(40, 167, 69, 0.15);
15907
- --dm-danger-bg: rgba(220, 53, 69, 0.15);
15908
- --dm-warning-bg: rgba(255, 193, 7, 0.15);
15909
- --dm-info-bg: rgba(23, 162, 184, 0.15);
15634
+ --dm-warning: #ffa726;
15635
+ --dm-warning-hover: #fb8c00;
15636
+ --dm-warning-active: #f57c00;
15637
+ --dm-warning-light: rgba(255, 167, 38, 0.15);
15638
+ --dm-warning-dark: #e65100;
15639
+ --dm-warning-text: #e65100;
15910
15640
 
15911
- /* Semantic Surface Colors */
15912
- --dm-surface-secondary: var(--dm-slate-900);
15913
- --dm-card-bg: var(--dm-slate-800);
15914
- --dm-card-border: var(--dm-slate-700);
15641
+ --dm-danger: #ef5350;
15642
+ --dm-danger-hover: #e53935;
15643
+ --dm-danger-active: #c62828;
15644
+ --dm-danger-light: rgba(239, 83, 80, 0.15);
15645
+ --dm-danger-dark: #c62828;
15915
15646
 
15916
- /* Legacy color names (kept for backwards compatibility) */
15917
- --dm-light: var(--dm-slate-200);
15918
- --dm-dark: var(--dm-slate-800);
15919
- --dm-white: #ffffff;
15920
- --dm-black: #000000;
15647
+ /* ================================================
15648
+ ACCENT COLOURS
15649
+ ================================================ */
15650
+ --dm-accent-1: #f48fb1; /* Soft pink */
15651
+ --dm-accent-2: #ce93d8; /* Light purple */
15652
+ --dm-accent-3: #ab47bc; /* Medium purple */
15653
+ --dm-accent-4: #9b59b6; /* Amethyst */
15921
15654
 
15922
- /* Grays (mapped to Slate) */
15923
- --dm-gray-50: var(--dm-slate-50);
15924
- --dm-gray-100: var(--dm-slate-100);
15925
- --dm-gray-200: var(--dm-slate-200);
15926
- --dm-gray-300: var(--dm-slate-300);
15927
- --dm-gray-400: var(--dm-slate-400);
15928
- --dm-gray-500: var(--dm-slate-500);
15929
- --dm-gray-600: var(--dm-slate-600);
15930
- --dm-gray-700: var(--dm-slate-700);
15931
- --dm-gray-800: var(--dm-slate-800);
15932
- --dm-gray-900: var(--dm-slate-900);
15933
- --dm-gray-950: var(--dm-slate-950);
15655
+ /* ================================================
15656
+ INTERACTIVE STATES
15657
+ ================================================ */
15658
+ --dm-hover-bg: rgba(155, 89, 182, 0.06);
15659
+ --dm-active-bg: rgba(155, 89, 182, 0.12);
15660
+ --dm-selected-bg: rgba(155, 89, 182, 0.12);
15661
+ --dm-disabled-opacity: 0.65;
15662
+
15663
+ /* ================================================
15664
+ COMPONENT-SPECIFIC COLORS
15665
+ ================================================ */
15666
+
15667
+ /* Cards */
15668
+ --dm-card-bg: var(--dm-surface);
15669
+ --dm-card-border: var(--dm-border);
15670
+ --dm-card-shadow: var(--dm-shadow-sm);
15934
15671
 
15935
- /* Component-specific variables */
15672
+ /* Inputs */
15936
15673
  --dm-input-bg: var(--dm-surface);
15937
15674
  --dm-input-border: var(--dm-border-dark);
15938
15675
  --dm-input-text: var(--dm-text);
15939
15676
  --dm-input-placeholder: var(--dm-text-muted);
15940
15677
  --dm-input-focus-border: var(--dm-primary);
15941
- --dm-input-disabled-bg: var(--dm-slate-800);
15678
+ --dm-input-focus-shadow: var(--dm-focus-ring);
15679
+ --dm-input-disabled-bg: #f3e5f5;
15680
+
15681
+ /* Buttons */
15682
+ --dm-btn-text: var(--dm-text);
15683
+ --dm-btn-bg: var(--dm-surface);
15684
+ --dm-btn-border: var(--dm-border-dark);
15942
15685
 
15686
+ /* Tables */
15687
+ --dm-table-bg: transparent;
15943
15688
  --dm-table-border: var(--dm-border);
15944
- --dm-table-hover-bg: var(--dm-hover-bg);
15945
- --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
15689
+ --dm-table-header-bg: var(--dm-background-alt);
15690
+ --dm-table-header-text: var(--dm-text);
15691
+ --dm-table-stripe-bg: rgba(155, 89, 182, 0.03);
15692
+ --dm-table-hover-bg: rgba(155, 89, 182, 0.06);
15693
+ --dm-table-selected-bg: var(--dm-selected-bg);
15946
15694
 
15947
- --dm-navbar-bg: var(--dm-surface);
15948
- --dm-navbar-text: var(--dm-text);
15949
- --dm-navbar-border: var(--dm-border);
15695
+ /* Modals */
15696
+ --dm-modal-bg: var(--dm-surface);
15697
+ --dm-modal-border: var(--dm-border);
15698
+ --dm-modal-backdrop: rgba(45, 27, 61, 0.5);
15699
+ --dm-modal-shadow: var(--dm-shadow-xl);
15950
15700
 
15951
- --dm-dropdown-bg: var(--dm-surface-raised);
15701
+ /* Dropdowns */
15702
+ --dm-dropdown-bg: var(--dm-surface);
15952
15703
  --dm-dropdown-border: var(--dm-border);
15704
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
15953
15705
  --dm-dropdown-item-hover: var(--dm-hover-bg);
15954
15706
  --dm-dropdown-item-active: var(--dm-selected-bg);
15955
15707
 
15708
+ /* Tooltips */
15709
+ --dm-tooltip-bg: #2d1b3d;
15710
+ --dm-tooltip-text: #ffffff;
15711
+
15712
+ /* Toasts */
15713
+ --dm-toast-bg: var(--dm-surface);
15714
+ --dm-toast-border: var(--dm-border);
15715
+ --dm-toast-shadow: var(--dm-shadow-lg);
15716
+
15717
+ /* Navbar */
15718
+ --dm-navbar-bg: var(--dm-surface);
15719
+ --dm-navbar-text: var(--dm-text);
15720
+ --dm-navbar-border: var(--dm-border);
15721
+
15722
+ /* Sidebar */
15956
15723
  --dm-sidebar-bg: var(--dm-surface);
15724
+ --dm-sidebar-text: var(--dm-text);
15957
15725
  --dm-sidebar-border: var(--dm-border);
15958
15726
  --dm-sidebar-item-hover: var(--dm-hover-bg);
15959
15727
  --dm-sidebar-item-active: var(--dm-selected-bg);
15960
15728
 
15961
- --dm-autocomplete-bg: var(--dm-surface);
15962
- --dm-autocomplete-border: var(--dm-border);
15963
- --dm-autocomplete-shadow: var(--dm-shadow-md);
15729
+ /* Tabs */
15730
+ --dm-tab-border: var(--dm-border);
15731
+ --dm-tab-hover-bg: var(--dm-hover-bg);
15732
+ --dm-tab-active-border: #9b59b6;
15733
+ --dm-tab-active-text: #7d3c98;
15734
+
15735
+ /* Accordion */
15736
+ --dm-accordion-bg: var(--dm-surface);
15737
+ --dm-accordion-border: var(--dm-border);
15738
+ --dm-accordion-header-bg: var(--dm-background-alt);
15739
+ --dm-accordion-header-hover: var(--dm-hover-bg);
15740
+
15741
+ /* Badges */
15742
+ --dm-badge-bg: var(--dm-primary);
15743
+ --dm-badge-text: #ffffff;
15744
+
15745
+ /* Progress */
15746
+ --dm-progress-bg: #f3e5f5;
15747
+ --dm-progress-bar: #9b59b6;
15748
+
15749
+ /* Scrollbar */
15750
+ --dm-scrollbar-track: #f3e5f5;
15751
+ --dm-scrollbar-thumb: #ce93d8;
15752
+ --dm-scrollbar-thumb-hover: #ab47bc;
15753
+
15754
+ /* Code */
15755
+ --dm-code-bg: #faf5fc;
15756
+ --dm-code-text: #e91e90;
15757
+ --dm-code-border: var(--dm-border);
15758
+
15759
+ /* ================================================
15760
+ SHADOWS - Standard for light mode
15761
+ ================================================ */
15762
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
15763
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
15764
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
15765
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
15766
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
15767
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
15768
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
15769
+
15770
+ /* ================================================
15771
+ ELEVATION / DEPTH
15772
+ ================================================ */
15773
+ --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
15774
+ --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
15775
+ --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
15776
+ --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
15777
+ }
15778
+
15779
+ /**
15780
+ * Domma Unicorn Dark Theme
15781
+ * Predominantly pink and purple tones
15782
+ * Dark mode variant - deep purple-black backgrounds with luminous accents
15783
+ */
15784
+
15785
+ .dm-theme-unicorn-dark {
15786
+ color-scheme: dark;
15787
+
15788
+ /* ================================================
15789
+ FOUNDATIONAL COLORS - Dark Mode Base
15790
+ ================================================ */
15791
+
15792
+ /* Backgrounds - Deep purple-black backgrounds */
15793
+ --dm-background: #1a0e24;
15794
+ --dm-background-alt: #241432;
15795
+ --dm-surface: #241432;
15796
+ --dm-surface-raised: #341a45;
15797
+ --dm-surface-overlay: #341a45;
15798
+
15799
+ /* Text - Light colours for readability on dark */
15800
+ --dm-text: #f3e5f5;
15801
+ --dm-text-secondary: #ce93d8;
15802
+ --dm-text-muted: #ab47bc;
15803
+ --dm-text-disabled: #6a3d7a;
15804
+ --dm-text-inverse: #1a0e24;
15805
+
15806
+ /* Borders - Muted purple on dark backgrounds */
15807
+ --dm-border: #4a2660;
15808
+ --dm-border-light: #341a45;
15809
+ --dm-border-dark: #6a3d7a;
15810
+
15811
+ /* ================================================
15812
+ UNICORN PRIMARY COLOURS - Lighter purple for contrast
15813
+ ================================================ */
15814
+ --dm-primary: #ce93d8;
15815
+ --dm-primary-hover: #ba68c8;
15816
+ --dm-primary-active: #ab47bc;
15817
+ --dm-primary-light: #f3e5f5;
15818
+ --dm-primary-dark: #ab47bc;
15819
+
15820
+ /* Focus ring with soft purple colour */
15821
+ --dm-focus-ring: 0 0 0 3px rgba(206, 147, 216, 0.35);
15822
+ --dm-border-focus: #ce93d8;
15823
+
15824
+ /* ================================================
15825
+ SECONDARY COLOURS - Lighter pink for contrast
15826
+ ================================================ */
15827
+ --dm-secondary: #f48fb1;
15828
+ --dm-secondary-hover: #f06292;
15829
+ --dm-secondary-active: #ec407a;
15830
+ --dm-secondary-light: #fce4ec;
15831
+ --dm-secondary-dark: #ec407a;
15832
+
15833
+ /* ================================================
15834
+ STATUS COLOURS
15835
+ ================================================ */
15836
+ --dm-success: #66bb6a;
15837
+ --dm-success-hover: #81c784;
15838
+ --dm-success-active: #a5d6a7;
15839
+ --dm-success-light: rgba(102, 187, 106, 0.2);
15840
+ --dm-success-dark: #43a047;
15841
+
15842
+ --dm-info: #42a5f5;
15843
+ --dm-info-hover: #64b5f6;
15844
+ --dm-info-active: #90caf9;
15845
+ --dm-info-light: rgba(66, 165, 245, 0.2);
15846
+ --dm-info-dark: #1976d2;
15847
+
15848
+ --dm-warning: #ffa726;
15849
+ --dm-warning-hover: #ffb74d;
15850
+ --dm-warning-active: #ffcc80;
15851
+ --dm-warning-light: rgba(255, 167, 38, 0.2);
15852
+ --dm-warning-dark: #f57c00;
15853
+ --dm-warning-text: #ffb74d;
15854
+
15855
+ --dm-danger: #ef5350;
15856
+ --dm-danger-hover: #e57373;
15857
+ --dm-danger-active: #ef9a9a;
15858
+ --dm-danger-light: rgba(239, 83, 80, 0.2);
15859
+ --dm-danger-dark: #c62828;
15860
+
15861
+ /* ================================================
15862
+ ACCENT COLOURS
15863
+ ================================================ */
15864
+ --dm-accent-1: #ce93d8; /* Light purple */
15865
+ --dm-accent-2: #f48fb1; /* Soft pink */
15866
+ --dm-accent-3: #ba68c8; /* Medium purple */
15867
+ --dm-accent-4: #9b59b6; /* Amethyst */
15868
+
15869
+ /* ================================================
15870
+ INTERACTIVE STATES
15871
+ ================================================ */
15872
+ --dm-hover-bg: rgba(206, 147, 216, 0.1);
15873
+ --dm-active-bg: rgba(206, 147, 216, 0.15);
15874
+ --dm-selected-bg: rgba(206, 147, 216, 0.15);
15875
+ --dm-disabled-opacity: 0.4;
15876
+
15877
+ /* ================================================
15878
+ COMPONENT-SPECIFIC COLORS
15879
+ ================================================ */
15880
+
15881
+ /* Cards */
15882
+ --dm-card-bg: var(--dm-surface);
15883
+ --dm-card-border: var(--dm-border);
15884
+ --dm-card-shadow: var(--dm-shadow-md);
15885
+
15886
+ /* Inputs */
15887
+ --dm-input-bg: var(--dm-surface);
15888
+ --dm-input-border: var(--dm-border-dark);
15889
+ --dm-input-text: var(--dm-text);
15890
+ --dm-input-placeholder: var(--dm-text-muted);
15891
+ --dm-input-focus-border: var(--dm-primary);
15892
+ --dm-input-disabled-bg: #241432;
15893
+
15894
+ /* Buttons */
15895
+ --dm-btn-text: var(--dm-text);
15896
+ --dm-btn-bg: var(--dm-surface);
15897
+ --dm-btn-border: var(--dm-border-dark);
15898
+
15899
+ /* Tables */
15900
+ --dm-table-bg: transparent;
15901
+ --dm-table-border: var(--dm-border);
15902
+ --dm-table-header-bg: var(--dm-background-alt);
15903
+ --dm-table-header-text: var(--dm-text);
15904
+ --dm-table-stripe-bg: rgba(206, 147, 216, 0.04);
15905
+ --dm-table-hover-bg: var(--dm-hover-bg);
15906
+ --dm-table-selected-bg: var(--dm-selected-bg);
15907
+
15908
+ /* Modals */
15909
+ --dm-modal-bg: var(--dm-surface);
15910
+ --dm-modal-border: var(--dm-border);
15911
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
15912
+ --dm-modal-shadow: var(--dm-shadow-xl);
15913
+
15914
+ /* Dropdowns */
15915
+ --dm-dropdown-bg: var(--dm-surface-raised);
15916
+ --dm-dropdown-border: var(--dm-border);
15917
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
15918
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
15919
+ --dm-dropdown-item-active: var(--dm-selected-bg);
15920
+
15921
+ /* Tooltips */
15922
+ --dm-tooltip-bg: #1a0e24;
15923
+ --dm-tooltip-text: #f3e5f5;
15924
+
15925
+ /* Toasts */
15926
+ --dm-toast-bg: var(--dm-surface);
15927
+ --dm-toast-border: var(--dm-border);
15928
+ --dm-toast-shadow: var(--dm-shadow-lg);
15929
+
15930
+ /* Navbar */
15931
+ --dm-navbar-bg: var(--dm-surface);
15932
+ --dm-navbar-text: var(--dm-text);
15933
+ --dm-navbar-border: var(--dm-border);
15934
+
15935
+ /* Sidebar */
15936
+ --dm-sidebar-bg: var(--dm-surface);
15937
+ --dm-sidebar-text: var(--dm-text);
15938
+ --dm-sidebar-border: var(--dm-border);
15939
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
15940
+ --dm-sidebar-item-active: var(--dm-selected-bg);
15941
+
15942
+ /* Tabs */
15943
+ --dm-tab-border: var(--dm-border);
15944
+ --dm-tab-hover-bg: var(--dm-hover-bg);
15945
+ --dm-tab-active-border: #ce93d8;
15946
+ --dm-tab-active-text: #ce93d8;
15947
+
15948
+ /* Accordion */
15949
+ --dm-accordion-bg: var(--dm-surface);
15950
+ --dm-accordion-border: var(--dm-border);
15951
+ --dm-accordion-header-bg: var(--dm-background-alt);
15952
+ --dm-accordion-header-hover: var(--dm-hover-bg);
15953
+
15954
+ /* Badges */
15955
+ --dm-badge-bg: var(--dm-primary);
15956
+ --dm-badge-text: #1a0e24;
15957
+
15958
+ /* Progress */
15959
+ --dm-progress-bg: #341a45;
15960
+ --dm-progress-bar: #ce93d8;
15961
+
15962
+ /* Scrollbar */
15963
+ --dm-scrollbar-track: #241432;
15964
+ --dm-scrollbar-thumb: #4a2660;
15965
+ --dm-scrollbar-thumb-hover: #6a3d7a;
15966
+
15967
+ /* Code */
15968
+ --dm-code-bg: #1e1228;
15969
+ --dm-code-text: #f48fb1;
15970
+ --dm-code-border: var(--dm-border);
15971
+
15972
+ /* ================================================
15973
+ SHADOWS - Subtle for dark mode
15974
+ ================================================ */
15975
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
15976
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
15977
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
15978
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
15979
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
15980
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
15981
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
15982
+
15983
+ /* ================================================
15984
+ ELEVATION / DEPTH
15985
+ ================================================ */
15986
+ --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
15987
+ --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
15988
+ --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
15989
+ --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
15990
+ }
15991
+
15992
+ /**
15993
+ * Domma Dreamy Light Theme
15994
+ * Predominantly beige and biscuit tones
15995
+ * Light mode variant - warm cream backgrounds with earthy accents
15996
+ */
15997
+
15998
+ .dm-theme-dreamy-light {
15999
+ color-scheme: light;
16000
+
16001
+ /* ================================================
16002
+ FOUNDATIONAL COLORS - Light Mode Base
16003
+ ================================================ */
16004
+
16005
+ /* Backgrounds - Warm white and biscuit surfaces */
16006
+ --dm-background: #fffdf9;
16007
+ --dm-background-alt: #f5f0eb;
16008
+ --dm-surface: #fffdf9;
16009
+ --dm-surface-raised: #f0ebe4;
16010
+ --dm-surface-overlay: #f5f0eb;
16011
+
16012
+ /* Text - Dark chocolate for readability on light */
16013
+ --dm-text: #3e2723;
16014
+ --dm-text-secondary: #5d4037;
16015
+ --dm-text-muted: #8d6e63;
16016
+ --dm-text-disabled: #bcaaa4;
16017
+ --dm-text-inverse: #ffffff;
16018
+
16019
+ /* Borders - Light biscuit on warm backgrounds */
16020
+ --dm-border: #d7ccc8;
16021
+ --dm-border-light: #efebe9;
16022
+ --dm-border-dark: #bcaaa4;
16023
+
16024
+ /* ================================================
16025
+ DREAMY PRIMARY COLOURS - Warm Brown
16026
+ ================================================ */
16027
+ --dm-primary: #8d6e63;
16028
+ --dm-primary-hover: #6d4c41;
16029
+ --dm-primary-active: #5d4037;
16030
+ --dm-primary-light: #efebe9;
16031
+ --dm-primary-dark: #6d4c41;
16032
+
16033
+ /* Focus ring with warm brown colour */
16034
+ --dm-focus-ring: 0 0 0 3px rgba(141, 110, 99, 0.35);
16035
+ --dm-border-focus: #8d6e63;
16036
+
16037
+ /* ================================================
16038
+ SECONDARY COLOURS - Dusty Rose-Brown
16039
+ ================================================ */
16040
+ --dm-secondary: #a1887f;
16041
+ --dm-secondary-hover: #8d6e63;
16042
+ --dm-secondary-active: #795548;
16043
+ --dm-secondary-light: #faf5f0;
16044
+ --dm-secondary-dark: #795548;
16045
+
16046
+ /* ================================================
16047
+ STATUS COLOURS
16048
+ ================================================ */
16049
+ --dm-success: #81c784;
16050
+ --dm-success-hover: #66bb6a;
16051
+ --dm-success-active: #4caf50;
16052
+ --dm-success-light: rgba(129, 199, 132, 0.15);
16053
+ --dm-success-dark: #388e3c;
16054
+
16055
+ --dm-info: #64b5f6;
16056
+ --dm-info-hover: #42a5f5;
16057
+ --dm-info-active: #2196f3;
16058
+ --dm-info-light: rgba(100, 181, 246, 0.15);
16059
+ --dm-info-dark: #1976d2;
16060
+
16061
+ --dm-warning: #ffb74d;
16062
+ --dm-warning-hover: #ffa726;
16063
+ --dm-warning-active: #ff9800;
16064
+ --dm-warning-light: rgba(255, 183, 77, 0.15);
16065
+ --dm-warning-dark: #e65100;
16066
+ --dm-warning-text: #bf360c;
16067
+
16068
+ --dm-danger: #e57373;
16069
+ --dm-danger-hover: #ef5350;
16070
+ --dm-danger-active: #e53935;
16071
+ --dm-danger-light: rgba(229, 115, 115, 0.15);
16072
+ --dm-danger-dark: #c62828;
16073
+
16074
+ /* ================================================
16075
+ ACCENT COLOURS
16076
+ ================================================ */
16077
+ --dm-accent-1: #d7ccc8; /* Light biscuit */
16078
+ --dm-accent-2: #bcaaa4; /* Muted taupe */
16079
+ --dm-accent-3: #a1887f; /* Dusty rose-brown */
16080
+ --dm-accent-4: #8d6e63; /* Warm brown */
16081
+
16082
+ /* ================================================
16083
+ INTERACTIVE STATES
16084
+ ================================================ */
16085
+ --dm-hover-bg: rgba(141, 110, 99, 0.06);
16086
+ --dm-active-bg: rgba(141, 110, 99, 0.12);
16087
+ --dm-selected-bg: rgba(141, 110, 99, 0.12);
16088
+ --dm-disabled-opacity: 0.65;
16089
+
16090
+ /* ================================================
16091
+ COMPONENT-SPECIFIC COLORS
16092
+ ================================================ */
16093
+
16094
+ /* Cards */
16095
+ --dm-card-bg: var(--dm-surface);
16096
+ --dm-card-border: var(--dm-border);
16097
+ --dm-card-shadow: var(--dm-shadow-sm);
16098
+
16099
+ /* Inputs */
16100
+ --dm-input-bg: var(--dm-surface);
16101
+ --dm-input-border: var(--dm-border-dark);
16102
+ --dm-input-text: var(--dm-text);
16103
+ --dm-input-placeholder: var(--dm-text-muted);
16104
+ --dm-input-focus-border: var(--dm-primary);
16105
+ --dm-input-focus-shadow: var(--dm-focus-ring);
16106
+ --dm-input-disabled-bg: #efebe9;
16107
+
16108
+ /* Buttons */
16109
+ --dm-btn-text: var(--dm-text);
16110
+ --dm-btn-bg: var(--dm-surface);
16111
+ --dm-btn-border: var(--dm-border-dark);
16112
+
16113
+ /* Tables */
16114
+ --dm-table-bg: transparent;
16115
+ --dm-table-border: var(--dm-border);
16116
+ --dm-table-header-bg: var(--dm-background-alt);
16117
+ --dm-table-header-text: var(--dm-text);
16118
+ --dm-table-stripe-bg: rgba(141, 110, 99, 0.03);
16119
+ --dm-table-hover-bg: rgba(141, 110, 99, 0.06);
16120
+ --dm-table-selected-bg: var(--dm-selected-bg);
16121
+
16122
+ /* Modals */
16123
+ --dm-modal-bg: var(--dm-surface);
16124
+ --dm-modal-border: var(--dm-border);
16125
+ --dm-modal-backdrop: rgba(62, 39, 35, 0.5);
16126
+ --dm-modal-shadow: var(--dm-shadow-xl);
16127
+
16128
+ /* Dropdowns */
16129
+ --dm-dropdown-bg: var(--dm-surface);
16130
+ --dm-dropdown-border: var(--dm-border);
16131
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
16132
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
16133
+ --dm-dropdown-item-active: var(--dm-selected-bg);
16134
+
16135
+ /* Tooltips */
16136
+ --dm-tooltip-bg: #3e2723;
16137
+ --dm-tooltip-text: #ffffff;
16138
+
16139
+ /* Toasts */
16140
+ --dm-toast-bg: var(--dm-surface);
16141
+ --dm-toast-border: var(--dm-border);
16142
+ --dm-toast-shadow: var(--dm-shadow-lg);
16143
+
16144
+ /* Navbar */
16145
+ --dm-navbar-bg: var(--dm-surface);
16146
+ --dm-navbar-text: var(--dm-text);
16147
+ --dm-navbar-border: var(--dm-border);
16148
+
16149
+ /* Sidebar */
16150
+ --dm-sidebar-bg: var(--dm-surface);
16151
+ --dm-sidebar-text: var(--dm-text);
16152
+ --dm-sidebar-border: var(--dm-border);
16153
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
16154
+ --dm-sidebar-item-active: var(--dm-selected-bg);
16155
+
16156
+ /* Tabs */
16157
+ --dm-tab-border: var(--dm-border);
16158
+ --dm-tab-hover-bg: var(--dm-hover-bg);
16159
+ --dm-tab-active-border: #8d6e63;
16160
+ --dm-tab-active-text: #6d4c41;
16161
+
16162
+ /* Accordion */
16163
+ --dm-accordion-bg: var(--dm-surface);
16164
+ --dm-accordion-border: var(--dm-border);
16165
+ --dm-accordion-header-bg: var(--dm-background-alt);
16166
+ --dm-accordion-header-hover: var(--dm-hover-bg);
16167
+
16168
+ /* Badges */
16169
+ --dm-badge-bg: var(--dm-primary);
16170
+ --dm-badge-text: #ffffff;
16171
+
16172
+ /* Progress */
16173
+ --dm-progress-bg: #efebe9;
16174
+ --dm-progress-bar: #8d6e63;
16175
+
16176
+ /* Scrollbar */
16177
+ --dm-scrollbar-track: #efebe9;
16178
+ --dm-scrollbar-thumb: #d7ccc8;
16179
+ --dm-scrollbar-thumb-hover: #bcaaa4;
16180
+
16181
+ /* Code */
16182
+ --dm-code-bg: #f5f0eb;
16183
+ --dm-code-text: #a1887f;
16184
+ --dm-code-border: var(--dm-border);
16185
+
16186
+ /* ================================================
16187
+ SHADOWS - Standard for light mode
16188
+ ================================================ */
16189
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
16190
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
16191
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
16192
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
16193
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
16194
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
16195
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
16196
+
16197
+ /* ================================================
16198
+ ELEVATION / DEPTH
16199
+ ================================================ */
16200
+ --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
16201
+ --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
16202
+ --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
16203
+ --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
16204
+ }
16205
+
16206
+ /**
16207
+ * Domma Dreamy Dark Theme
16208
+ * Predominantly beige and biscuit tones
16209
+ * Dark mode variant - dark espresso backgrounds with warm taupe accents
16210
+ */
16211
+
16212
+ .dm-theme-dreamy-dark {
16213
+ color-scheme: dark;
16214
+
16215
+ /* ================================================
16216
+ FOUNDATIONAL COLORS - Dark Mode Base
16217
+ ================================================ */
16218
+
16219
+ /* Backgrounds - Dark espresso and coffee grounds */
16220
+ --dm-background: #1c1410;
16221
+ --dm-background-alt: #2a1f1a;
16222
+ --dm-surface: #2a1f1a;
16223
+ --dm-surface-raised: #3a2c26;
16224
+ --dm-surface-overlay: #3a2c26;
16225
+
16226
+ /* Text - Warm off-white for readability on dark */
16227
+ --dm-text: #efebe9;
16228
+ --dm-text-secondary: #d7ccc8;
16229
+ --dm-text-muted: #bcaaa4;
16230
+ --dm-text-disabled: #6d4c41;
16231
+ --dm-text-inverse: #1c1410;
16232
+
16233
+ /* Borders - Dark brown on dark backgrounds */
16234
+ --dm-border: #4e342e;
16235
+ --dm-border-light: #3a2c26;
16236
+ --dm-border-dark: #6d4c41;
16237
+
16238
+ /* ================================================
16239
+ DREAMY PRIMARY COLOURS - Lighter taupe for contrast
16240
+ ================================================ */
16241
+ --dm-primary: #bcaaa4;
16242
+ --dm-primary-hover: #d7ccc8;
16243
+ --dm-primary-active: #efebe9;
16244
+ --dm-primary-light: #efebe9;
16245
+ --dm-primary-dark: #a1887f;
16246
+
16247
+ /* Focus ring with warm taupe colour */
16248
+ --dm-focus-ring: 0 0 0 3px rgba(188, 170, 164, 0.35);
16249
+ --dm-border-focus: #bcaaa4;
16250
+
16251
+ /* ================================================
16252
+ SECONDARY COLOURS - Lighter biscuit for contrast
16253
+ ================================================ */
16254
+ --dm-secondary: #d7ccc8;
16255
+ --dm-secondary-hover: #efebe9;
16256
+ --dm-secondary-active: #ffffff;
16257
+ --dm-secondary-light: #faf5f0;
16258
+ --dm-secondary-dark: #bcaaa4;
16259
+
16260
+ /* ================================================
16261
+ STATUS COLOURS
16262
+ ================================================ */
16263
+ --dm-success: #81c784;
16264
+ --dm-success-hover: #a5d6a7;
16265
+ --dm-success-active: #c8e6c9;
16266
+ --dm-success-light: rgba(129, 199, 132, 0.2);
16267
+ --dm-success-dark: #4caf50;
16268
+
16269
+ --dm-info: #64b5f6;
16270
+ --dm-info-hover: #90caf9;
16271
+ --dm-info-active: #bbdefb;
16272
+ --dm-info-light: rgba(100, 181, 246, 0.2);
16273
+ --dm-info-dark: #2196f3;
16274
+
16275
+ --dm-warning: #ffb74d;
16276
+ --dm-warning-hover: #ffcc80;
16277
+ --dm-warning-active: #ffe0b2;
16278
+ --dm-warning-light: rgba(255, 183, 77, 0.2);
16279
+ --dm-warning-dark: #ff9800;
16280
+ --dm-warning-text: #ffcc80;
16281
+
16282
+ --dm-danger: #e57373;
16283
+ --dm-danger-hover: #ef9a9a;
16284
+ --dm-danger-active: #ffcdd2;
16285
+ --dm-danger-light: rgba(229, 115, 115, 0.2);
16286
+ --dm-danger-dark: #f44336;
16287
+
16288
+ /* ================================================
16289
+ ACCENT COLOURS
16290
+ ================================================ */
16291
+ --dm-accent-1: #efebe9; /* Warm off-white */
16292
+ --dm-accent-2: #d7ccc8; /* Light biscuit */
16293
+ --dm-accent-3: #bcaaa4; /* Muted taupe */
16294
+ --dm-accent-4: #a1887f; /* Dusty rose-brown */
16295
+
16296
+ /* ================================================
16297
+ INTERACTIVE STATES
16298
+ ================================================ */
16299
+ --dm-hover-bg: rgba(188, 170, 164, 0.1);
16300
+ --dm-active-bg: rgba(188, 170, 164, 0.15);
16301
+ --dm-selected-bg: rgba(188, 170, 164, 0.15);
16302
+ --dm-disabled-opacity: 0.4;
16303
+
16304
+ /* ================================================
16305
+ COMPONENT-SPECIFIC COLORS
16306
+ ================================================ */
16307
+
16308
+ /* Cards */
16309
+ --dm-card-bg: var(--dm-surface);
16310
+ --dm-card-border: var(--dm-border);
16311
+ --dm-card-shadow: var(--dm-shadow-md);
16312
+
16313
+ /* Inputs */
16314
+ --dm-input-bg: var(--dm-surface);
16315
+ --dm-input-border: var(--dm-border-dark);
16316
+ --dm-input-text: var(--dm-text);
16317
+ --dm-input-placeholder: var(--dm-text-muted);
16318
+ --dm-input-focus-border: var(--dm-primary);
16319
+ --dm-input-disabled-bg: #2a1f1a;
16320
+
16321
+ /* Buttons */
16322
+ --dm-btn-text: var(--dm-text);
16323
+ --dm-btn-bg: var(--dm-surface);
16324
+ --dm-btn-border: var(--dm-border-dark);
16325
+
16326
+ /* Tables */
16327
+ --dm-table-bg: transparent;
16328
+ --dm-table-border: var(--dm-border);
16329
+ --dm-table-header-bg: var(--dm-background-alt);
16330
+ --dm-table-header-text: var(--dm-text);
16331
+ --dm-table-stripe-bg: rgba(188, 170, 164, 0.04);
16332
+ --dm-table-hover-bg: var(--dm-hover-bg);
16333
+ --dm-table-selected-bg: var(--dm-selected-bg);
16334
+
16335
+ /* Modals */
16336
+ --dm-modal-bg: var(--dm-surface);
16337
+ --dm-modal-border: var(--dm-border);
16338
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
16339
+ --dm-modal-shadow: var(--dm-shadow-xl);
16340
+
16341
+ /* Dropdowns */
16342
+ --dm-dropdown-bg: var(--dm-surface-raised);
16343
+ --dm-dropdown-border: var(--dm-border);
16344
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
16345
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
16346
+ --dm-dropdown-item-active: var(--dm-selected-bg);
16347
+
16348
+ /* Tooltips */
16349
+ --dm-tooltip-bg: #1c1410;
16350
+ --dm-tooltip-text: #efebe9;
16351
+
16352
+ /* Toasts */
16353
+ --dm-toast-bg: var(--dm-surface);
16354
+ --dm-toast-border: var(--dm-border);
16355
+ --dm-toast-shadow: var(--dm-shadow-lg);
16356
+
16357
+ /* Navbar */
16358
+ --dm-navbar-bg: var(--dm-surface);
16359
+ --dm-navbar-text: var(--dm-text);
16360
+ --dm-navbar-border: var(--dm-border);
16361
+
16362
+ /* Sidebar */
16363
+ --dm-sidebar-bg: var(--dm-surface);
16364
+ --dm-sidebar-text: var(--dm-text);
16365
+ --dm-sidebar-border: var(--dm-border);
16366
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
16367
+ --dm-sidebar-item-active: var(--dm-selected-bg);
16368
+
16369
+ /* Tabs */
16370
+ --dm-tab-border: var(--dm-border);
16371
+ --dm-tab-hover-bg: var(--dm-hover-bg);
16372
+ --dm-tab-active-border: #bcaaa4;
16373
+ --dm-tab-active-text: #bcaaa4;
16374
+
16375
+ /* Accordion */
16376
+ --dm-accordion-bg: var(--dm-surface);
16377
+ --dm-accordion-border: var(--dm-border);
16378
+ --dm-accordion-header-bg: var(--dm-background-alt);
16379
+ --dm-accordion-header-hover: var(--dm-hover-bg);
16380
+
16381
+ /* Badges */
16382
+ --dm-badge-bg: var(--dm-primary);
16383
+ --dm-badge-text: #1c1410;
16384
+
16385
+ /* Progress */
16386
+ --dm-progress-bg: #3a2c26;
16387
+ --dm-progress-bar: #bcaaa4;
16388
+
16389
+ /* Scrollbar */
16390
+ --dm-scrollbar-track: #2a1f1a;
16391
+ --dm-scrollbar-thumb: #4e342e;
16392
+ --dm-scrollbar-thumb-hover: #6d4c41;
16393
+
16394
+ /* Code */
16395
+ --dm-code-bg: #1a1210;
16396
+ --dm-code-text: #d7ccc8;
16397
+ --dm-code-border: var(--dm-border);
16398
+
16399
+ /* ================================================
16400
+ SHADOWS - Subtle for dark mode
16401
+ ================================================ */
16402
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
16403
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
16404
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
16405
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
16406
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
16407
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
16408
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
16409
+
16410
+ /* ================================================
16411
+ ELEVATION / DEPTH
16412
+ ================================================ */
16413
+ --dm-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
16414
+ --dm-elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
16415
+ --dm-elevation-3: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
16416
+ --dm-elevation-4: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
16417
+ }
16418
+
16419
+ /**
16420
+ * Domma Grayve Light Theme
16421
+ * Slate/cyan monochrome palette — complementary light variant
16422
+ * Light mode variant
16423
+ */
16424
+
16425
+ .dm-theme-grayve-light {
16426
+ color-scheme: light;
16427
+
16428
+ /* ================================================
16429
+ FOUNDATIONAL COLORS - Light Mode Base
16430
+ ================================================ */
16431
+
16432
+ /* Backgrounds - Light/white backgrounds */
16433
+ --dm-background: #ffffff;
16434
+ --dm-background-alt: #f8f9fa;
16435
+ --dm-surface: #ffffff;
16436
+ --dm-surface-raised: #f1f3f5;
16437
+ --dm-surface-overlay: #f8f9fa;
16438
+
16439
+ /* Text - Dark colours for readability on light */
16440
+ --dm-text: #212529;
16441
+ --dm-text-secondary: #495057;
16442
+ --dm-text-muted: #6c757d;
16443
+ --dm-text-disabled: #adb5bd;
16444
+ --dm-text-inverse: #ffffff;
16445
+
16446
+ /* Borders - Subtle on light backgrounds */
16447
+ --dm-border: #dee2e6;
16448
+ --dm-border-light: #e9ecef;
16449
+ --dm-border-dark: #ced4da;
16450
+
16451
+ /* ================================================
16452
+ GRAYVE ACCENT COLORS - Darker cyan for light-mode contrast
16453
+ ================================================ */
16454
+
16455
+ /* PRIMARY COLOURS - Dark Cyan for contrast */
16456
+ --dm-primary: #00838f;
16457
+ --dm-primary-hover: #006064;
16458
+ --dm-primary-active: #00acc1;
16459
+ --dm-primary-light: #e0f7fa;
16460
+ --dm-primary-dark: #006064;
16461
+
16462
+ /* Focus ring with cyan colour */
16463
+ --dm-focus-ring: 0 0 0 3px rgba(0, 131, 143, 0.3);
16464
+ --dm-border-focus: #00838f;
16465
+
16466
+ /* ================================================
16467
+ SECONDARY COLOURS - Blue Grey
16468
+ ================================================ */
16469
+ --dm-secondary: #546e7a;
16470
+ --dm-secondary-hover: #607d8b;
16471
+ --dm-secondary-active: #78909c;
16472
+ --dm-secondary-light: rgba(84, 110, 122, 0.15);
16473
+ --dm-secondary-dark: #455a64;
16474
+
16475
+ /* ================================================
16476
+ STATUS COLOURS
16477
+ ================================================ */
16478
+ --dm-success: #2e7d32;
16479
+ --dm-success-hover: #388e3c;
16480
+ --dm-success-active: #1b5e20;
16481
+ --dm-success-light: rgba(46, 125, 50, 0.1);
16482
+ --dm-success-dark: #1b5e20;
16483
+
16484
+ --dm-info: #0277bd;
16485
+ --dm-info-hover: #0288d1;
16486
+ --dm-info-active: #01579b;
16487
+ --dm-info-light: rgba(2, 119, 189, 0.1);
16488
+ --dm-info-dark: #01579b;
16489
+
16490
+ --dm-warning: #f57c00;
16491
+ --dm-warning-hover: #fb8c00;
16492
+ --dm-warning-active: #e65100;
16493
+ --dm-warning-text: #e65100;
16494
+ --dm-warning-light: rgba(245, 124, 0, 0.1);
16495
+ --dm-warning-dark: #e65100;
16496
+
16497
+ --dm-danger: #c62828;
16498
+ --dm-danger-hover: #d32f2f;
16499
+ --dm-danger-active: #b71c1c;
16500
+ --dm-danger-light: rgba(198, 40, 40, 0.1);
16501
+ --dm-danger-dark: #b71c1c;
16502
+
16503
+ /* ================================================
16504
+ ACCENT COLOURS
16505
+ ================================================ */
16506
+ --dm-accent-1: #b2ebf2; /* Cyan 100 */
16507
+ --dm-accent-2: #80deea; /* Cyan 200 */
16508
+ --dm-accent-3: #00838f; /* Cyan 800 */
16509
+ --dm-accent-4: #006064; /* Cyan 900 */
16510
+
16511
+ /* ================================================
16512
+ INTERACTIVE STATES
16513
+ ================================================ */
16514
+ --dm-hover-bg: rgba(0, 131, 143, 0.06);
16515
+ --dm-active-bg: rgba(0, 131, 143, 0.1);
16516
+ --dm-selected-bg: #e0f7fa;
16517
+ --dm-disabled-opacity: 0.4;
16518
+
16519
+ /* ================================================
16520
+ COMPONENT-SPECIFIC COLORS
16521
+ ================================================ */
16522
+
16523
+ /* Cards */
16524
+ --dm-card-bg: var(--dm-surface);
16525
+ --dm-card-border: var(--dm-border);
16526
+ --dm-card-shadow: var(--dm-shadow-md);
16527
+
16528
+ /* Inputs */
16529
+ --dm-input-bg: var(--dm-surface);
16530
+ --dm-input-border: var(--dm-border-dark);
16531
+ --dm-input-text: var(--dm-text);
16532
+ --dm-input-placeholder: var(--dm-text-muted);
16533
+ --dm-input-focus-border: var(--dm-primary);
16534
+ --dm-input-disabled-bg: #f8f9fa;
16535
+
16536
+ /* Buttons */
16537
+ --dm-btn-text: var(--dm-text);
16538
+ --dm-btn-bg: var(--dm-surface);
16539
+ --dm-btn-border: var(--dm-border-dark);
16540
+
16541
+ /* Tables */
16542
+ --dm-table-bg: transparent;
16543
+ --dm-table-border: var(--dm-border);
16544
+ --dm-table-header-bg: var(--dm-background-alt);
16545
+ --dm-table-header-text: var(--dm-text);
16546
+ --dm-table-stripe-bg: rgba(0, 0, 0, 0.02);
16547
+ --dm-table-hover-bg: var(--dm-hover-bg);
16548
+ --dm-table-selected-bg: var(--dm-selected-bg);
16549
+
16550
+ /* Modals */
16551
+ --dm-modal-bg: var(--dm-surface);
16552
+ --dm-modal-border: var(--dm-border);
16553
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.5);
16554
+ --dm-modal-shadow: var(--dm-shadow-xl);
16555
+
16556
+ /* Dropdowns */
16557
+ --dm-dropdown-bg: var(--dm-surface);
16558
+ --dm-dropdown-border: var(--dm-border);
16559
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
16560
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
16561
+ --dm-dropdown-item-active: var(--dm-selected-bg);
16562
+
16563
+ /* Tooltips */
16564
+ --dm-tooltip-bg: #212529;
16565
+ --dm-tooltip-text: #ffffff;
16566
+
16567
+ /* Toasts */
16568
+ --dm-toast-bg: var(--dm-surface);
16569
+ --dm-toast-border: var(--dm-border);
16570
+ --dm-toast-shadow: var(--dm-shadow-lg);
16571
+
16572
+ /* Navbar */
16573
+ --dm-navbar-bg: var(--dm-surface);
16574
+ --dm-navbar-text: var(--dm-text);
16575
+ --dm-navbar-border: var(--dm-border);
16576
+
16577
+ /* Sidebar */
16578
+ --dm-sidebar-bg: var(--dm-surface);
16579
+ --dm-sidebar-text: var(--dm-text);
16580
+ --dm-sidebar-border: var(--dm-border);
16581
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
16582
+ --dm-sidebar-item-active: var(--dm-selected-bg);
16583
+
16584
+ /* Tabs */
16585
+ --dm-tab-border: var(--dm-border);
16586
+ --dm-tab-hover-bg: var(--dm-hover-bg);
16587
+
16588
+ /* Accordion */
16589
+ --dm-accordion-bg: var(--dm-surface);
16590
+ --dm-accordion-border: var(--dm-border);
16591
+ --dm-accordion-header-bg: var(--dm-background-alt);
16592
+ --dm-accordion-header-hover: var(--dm-hover-bg);
16593
+
16594
+ /* Badges */
16595
+ --dm-badge-bg: var(--dm-secondary);
16596
+ --dm-badge-text: #ffffff;
16597
+
16598
+ /* Pills */
16599
+ --dm-pill-bg: #e0f7fa;
16600
+ --dm-pill-color: #006064;
16601
+ --dm-pill-hover-bg: #b2ebf2;
16602
+
16603
+ /* Autocomplete / Pillbox */
16604
+ --dm-autocomplete-bg: var(--dm-surface);
16605
+ --dm-autocomplete-border: var(--dm-border);
16606
+ --dm-autocomplete-shadow: var(--dm-shadow-md);
15964
16607
  --dm-autocomplete-item-hover: var(--dm-hover-bg);
15965
16608
  --dm-autocomplete-item-active: var(--dm-selected-bg);
15966
16609
  --dm-autocomplete-highlight: var(--dm-primary-light);
15967
-
15968
16610
  --dm-pillbox-bg: var(--dm-surface);
15969
16611
  --dm-pillbox-border: var(--dm-border);
15970
- --dm-pill-bg: var(--dm-gray-700); /* Darker pill background for dark theme */
15971
- --dm-pill-color: var(--dm-text);
15972
- --dm-pill-hover-bg: var(--dm-gray-600);
15973
16612
 
16613
+ /* Progress */
16614
+ --dm-progress-bg: #e9ecef;
16615
+
16616
+ /* Scrollbar */
16617
+ --dm-scrollbar-track: #f8f9fa;
16618
+ --dm-scrollbar-thumb: #ced4da;
16619
+ --dm-scrollbar-thumb-hover: #adb5bd;
16620
+
16621
+ /* Code */
16622
+ --dm-code-bg: #f8f9fa;
16623
+ --dm-code-text: #00838f;
16624
+ --dm-code-border: var(--dm-border);
16625
+
16626
+ /* ================================================
16627
+ SHADOWS - Standard for light mode
16628
+ ================================================ */
16629
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
16630
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
16631
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
16632
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
16633
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
16634
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
16635
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
16636
+ }
16637
+
16638
+ /* Syntax highlighting tokens for grayve-light */
16639
+ .dm-theme-grayve-light .code-block .syntax-keyword {
16640
+ color: #7c4dff; /* Deep Purple */
16641
+ font-weight: 500;
16642
+ }
16643
+
16644
+ .dm-theme-grayve-light .code-block .syntax-string,
16645
+ .dm-theme-grayve-light .code-block .syntax-template-string {
16646
+ color: #2e7d32; /* Green */
16647
+ }
16648
+
16649
+ .dm-theme-grayve-light .code-block .syntax-function {
16650
+ color: #00838f; /* Cyan */
16651
+ }
16652
+
16653
+ /**
16654
+ * Domma Grayve Dark Theme
16655
+ * Slate/cyan monochrome palette — adapted from Bootswatch Slate
16656
+ * Dark mode variant
16657
+ */
16658
+
16659
+ .dm-theme-grayve-dark {
16660
+ color-scheme: dark;
16661
+
16662
+ /* ================================================
16663
+ FOUNDATIONAL COLORS - Dark Mode Base
16664
+ ================================================ */
16665
+
16666
+ /* Backgrounds - Slate dark backgrounds */
16667
+ --dm-background: #1a1e21; /* slate-900 */
16668
+ --dm-background-alt: #212529; /* slate-800 */
16669
+ --dm-surface: #212529; /* slate-800 */
16670
+ --dm-surface-raised: #343A40; /* slate-700 */
16671
+ --dm-surface-overlay: #343A40;/* slate-700 */
16672
+
16673
+ /* Text - Light colours for readability on dark */
16674
+ --dm-text: #DEE2E6; /* slate-200 */
16675
+ --dm-text-secondary: #ADB5BD; /* slate-400 */
16676
+ --dm-text-muted: #6C757D; /* slate-500 */
16677
+ --dm-text-disabled: #495057; /* slate-600 */
16678
+ --dm-text-inverse: #1a1e21; /* slate-900 */
16679
+
16680
+ /* Borders - Subtle on dark backgrounds */
16681
+ --dm-border: #343A40; /* slate-700 */
16682
+ --dm-border-light: #212529; /* slate-800 */
16683
+ --dm-border-dark: #495057; /* slate-600 */
16684
+
16685
+ /* ================================================
16686
+ GRAYVE ACCENT COLORS - Cyan/teal tones
16687
+ ================================================ */
16688
+
16689
+ /* PRIMARY COLOURS - Cyan Teal */
16690
+ --dm-primary: #00bcd4;
16691
+ --dm-primary-hover: #00acc1;
16692
+ --dm-primary-active: #26c6da;
16693
+ --dm-primary-light: #e0f7fa;
16694
+ --dm-primary-dark: #0097a7;
16695
+
16696
+ /* Focus ring with cyan colour */
16697
+ --dm-focus-ring: 0 0 0 3px rgba(0, 188, 212, 0.3);
16698
+ --dm-border-focus: #00bcd4;
16699
+
16700
+ /* ================================================
16701
+ SECONDARY COLOURS - Blue Grey
16702
+ ================================================ */
16703
+ --dm-secondary: #6C757D;
16704
+ --dm-secondary-hover: #ADB5BD;
16705
+ --dm-secondary-active: #CED4DA;
16706
+ --dm-secondary-light: #E9ECEF;
16707
+ --dm-secondary-dark: #495057;
16708
+
16709
+ /* ================================================
16710
+ STATUS COLOURS
16711
+ ================================================ */
16712
+ --dm-success: #28a745;
16713
+ --dm-success-hover: #49cc61;
16714
+ --dm-success-active: #218838;
16715
+ --dm-success-light: rgba(40, 167, 69, 0.2);
16716
+ --dm-success-dark: #1e7e34;
16717
+
16718
+ --dm-info: #17a2b8;
16719
+ --dm-info-hover: #26d2e9;
16720
+ --dm-info-active: #138496;
16721
+ --dm-info-light: rgba(23, 162, 184, 0.2);
16722
+ --dm-info-dark: #117a8b;
16723
+
16724
+ --dm-warning: #ffc107;
16725
+ --dm-warning-hover: #ffcd38;
16726
+ --dm-warning-active: #e0a800;
16727
+ --dm-warning-text: #856404;
16728
+ --dm-warning-light: rgba(255, 193, 7, 0.2);
16729
+ --dm-warning-dark: #d39e00;
16730
+
16731
+ --dm-danger: #dc3545;
16732
+ --dm-danger-hover: #e35a67;
16733
+ --dm-danger-active: #c82333;
16734
+ --dm-danger-light: rgba(220, 53, 69, 0.2);
16735
+ --dm-danger-dark: #bd2130;
16736
+
16737
+ /* ================================================
16738
+ ACCENT COLOURS
16739
+ ================================================ */
16740
+ --dm-accent-1: #80deea; /* Cyan 200 */
16741
+ --dm-accent-2: #4dd0e1; /* Cyan 300 */
16742
+ --dm-accent-3: #00bcd4; /* Cyan 500 */
16743
+ --dm-accent-4: #0097a7; /* Cyan 700 */
16744
+
16745
+ /* ================================================
16746
+ INTERACTIVE STATES
16747
+ ================================================ */
16748
+ --dm-hover-bg: rgba(255, 255, 255, 0.07);
16749
+ --dm-active-bg: rgba(255, 255, 255, 0.1);
16750
+ --dm-selected-bg: #00838f;
16751
+ --dm-disabled-opacity: 0.4;
16752
+
16753
+ /* ================================================
16754
+ COMPONENT-SPECIFIC COLORS
16755
+ ================================================ */
16756
+
16757
+ /* Cards */
16758
+ --dm-card-bg: var(--dm-surface);
16759
+ --dm-card-border: var(--dm-border);
16760
+ --dm-card-shadow: var(--dm-shadow-md);
16761
+
16762
+ /* Inputs */
16763
+ --dm-input-bg: var(--dm-surface);
16764
+ --dm-input-border: var(--dm-border-dark);
16765
+ --dm-input-text: var(--dm-text);
16766
+ --dm-input-placeholder: var(--dm-text-muted);
16767
+ --dm-input-focus-border: var(--dm-primary);
16768
+ --dm-input-disabled-bg: #212529;
16769
+
16770
+ /* Buttons */
16771
+ --dm-btn-text: var(--dm-text);
16772
+ --dm-btn-bg: var(--dm-surface);
16773
+ --dm-btn-border: var(--dm-border-dark);
16774
+
16775
+ /* Tables */
16776
+ --dm-table-bg: transparent;
16777
+ --dm-table-border: var(--dm-border);
16778
+ --dm-table-header-bg: var(--dm-background-alt);
16779
+ --dm-table-header-text: var(--dm-text);
16780
+ --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
16781
+ --dm-table-hover-bg: var(--dm-hover-bg);
16782
+ --dm-table-selected-bg: var(--dm-selected-bg);
16783
+
16784
+ /* Modals */
16785
+ --dm-modal-bg: var(--dm-surface);
16786
+ --dm-modal-border: var(--dm-border);
16787
+ --dm-modal-backdrop: rgba(0, 0, 0, 0.7);
16788
+ --dm-modal-shadow: var(--dm-shadow-xl);
16789
+
16790
+ /* Dropdowns */
16791
+ --dm-dropdown-bg: var(--dm-surface-raised);
16792
+ --dm-dropdown-border: var(--dm-border);
16793
+ --dm-dropdown-shadow: var(--dm-shadow-lg);
16794
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
16795
+ --dm-dropdown-item-active: var(--dm-selected-bg);
16796
+
16797
+ /* Tooltips */
16798
+ --dm-tooltip-bg: #1a1e21;
16799
+ --dm-tooltip-text: #ffffff;
16800
+
16801
+ /* Toasts */
16802
+ --dm-toast-bg: var(--dm-surface);
16803
+ --dm-toast-border: var(--dm-border);
16804
+ --dm-toast-shadow: var(--dm-shadow-lg);
16805
+
16806
+ /* Navbar */
16807
+ --dm-navbar-bg: var(--dm-surface);
16808
+ --dm-navbar-text: var(--dm-text);
16809
+ --dm-navbar-border: var(--dm-border);
16810
+
16811
+ /* Sidebar */
16812
+ --dm-sidebar-bg: var(--dm-surface);
16813
+ --dm-sidebar-text: var(--dm-text);
16814
+ --dm-sidebar-border: var(--dm-border);
16815
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
16816
+ --dm-sidebar-item-active: var(--dm-selected-bg);
16817
+
16818
+ /* Tabs */
15974
16819
  --dm-tab-border: var(--dm-border);
15975
16820
  --dm-tab-hover-bg: var(--dm-hover-bg);
15976
- --dm-tab-active-border: var(--dm-primary);
15977
- --dm-tab-active-text: var(--dm-primary);
15978
16821
 
16822
+ /* Accordion */
16823
+ --dm-accordion-bg: var(--dm-surface);
15979
16824
  --dm-accordion-border: var(--dm-border);
16825
+ --dm-accordion-header-bg: var(--dm-background-alt);
15980
16826
  --dm-accordion-header-hover: var(--dm-hover-bg);
16827
+
16828
+ /* Badges */
16829
+ --dm-badge-bg: var(--dm-secondary);
16830
+ --dm-badge-text: #1a1e21;
16831
+
16832
+ /* Pills */
16833
+ --dm-pill-bg: #343A40;
16834
+ --dm-pill-color: var(--dm-text);
16835
+ --dm-pill-hover-bg: #495057;
16836
+
16837
+ /* Autocomplete / Pillbox */
16838
+ --dm-autocomplete-bg: var(--dm-surface);
16839
+ --dm-autocomplete-border: var(--dm-border);
16840
+ --dm-autocomplete-shadow: var(--dm-shadow-md);
16841
+ --dm-autocomplete-item-hover: var(--dm-hover-bg);
16842
+ --dm-autocomplete-item-active: var(--dm-selected-bg);
16843
+ --dm-autocomplete-highlight: var(--dm-primary-light);
16844
+ --dm-pillbox-bg: var(--dm-surface);
16845
+ --dm-pillbox-border: var(--dm-border);
16846
+
16847
+ /* Progress */
16848
+ --dm-progress-bg: #343A40;
16849
+
16850
+ /* Scrollbar */
16851
+ --dm-scrollbar-track: #212529;
16852
+ --dm-scrollbar-thumb: #495057;
16853
+ --dm-scrollbar-thumb-hover: #6C757D;
16854
+
16855
+ /* Code */
16856
+ --dm-code-bg: #1a1e21;
16857
+ --dm-code-text: #80deea;
16858
+ --dm-code-border: var(--dm-border);
16859
+
16860
+ /* ================================================
16861
+ SHADOWS - Subtle for dark mode
16862
+ ================================================ */
16863
+ --dm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
16864
+ --dm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
16865
+ --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
16866
+ --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
16867
+ --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
16868
+ --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
16869
+ --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
15981
16870
  }
15982
16871
 
15983
- /* Syntax highlighting tokens for grayve (assuming similar to dark theme) */
15984
- .dm-theme-grayve .code-block .syntax-keyword {
16872
+ /* Syntax highlighting tokens for grayve-dark */
16873
+ .dm-theme-grayve-dark .code-block .syntax-keyword {
15985
16874
  color: #c792ea; /* Purple */
15986
16875
  font-weight: 500;
15987
16876
  }
15988
16877
 
15989
- .dm-theme-grayve .code-block .syntax-string,
15990
- .dm-theme-grayve .code-block .syntax-template-string {
16878
+ .dm-theme-grayve-dark .code-block .syntax-string,
16879
+ .dm-theme-grayve-dark .code-block .syntax-template-string {
15991
16880
  color: #c3e88d; /* Green */
15992
16881
  }
15993
16882
 
15994
- .dm-theme-grayve .code-block .syntax-function {
16883
+ .dm-theme-grayve-dark .code-block .syntax-function {
15995
16884
  color: #82aaff; /* Light Blue */
15996
16885
  }
15997
16886
 
15998
16887
 
16888
+