domma-js 0.5.0-alpha → 0.7.2-alpha

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 (26) hide show
  1. package/README.md +33 -30
  2. package/bin/domma-cli.js +144 -0
  3. package/package.json +10 -4
  4. package/public/dist/bundles/domma-complete.css +271 -22
  5. package/public/dist/bundles/domma-data-focused.css +271 -22
  6. package/public/dist/bundles/domma-essentials.css +271 -22
  7. package/public/dist/bundles/domma-full.css +271 -22
  8. package/public/dist/bundles/domma-grayve.css +271 -22
  9. package/public/dist/bundles/domma-minimal.css +20 -8
  10. package/public/dist/domma-syntax.min.js +8 -0
  11. package/public/dist/domma.css +15 -3
  12. package/public/dist/domma.esm.js +4 -4
  13. package/public/dist/domma.min.js +4 -4
  14. package/public/dist/elements.css +35 -11
  15. package/public/dist/grid.css +3 -3
  16. package/public/dist/syntax.css +3 -3
  17. package/public/dist/themes/domma-themes.css +216 -3
  18. package/templates/kickstart/about/index.html +241 -0
  19. package/templates/kickstart/assets/logo/placeholder.svg +6 -0
  20. package/templates/kickstart/blog/index.html +227 -0
  21. package/templates/kickstart/contact/index.html +218 -0
  22. package/templates/kickstart/css/custom.css +121 -0
  23. package/templates/kickstart/docs/index.html +310 -0
  24. package/templates/kickstart/domma.config.json +74 -0
  25. package/templates/kickstart/index.html +158 -0
  26. package/templates/kickstart/js/app.js +161 -0
package/README.md CHANGED
@@ -18,15 +18,33 @@ modern UI components in one cohesive package.
18
18
 
19
19
  ## Installation
20
20
 
21
- ### Via npm (Recommended)
21
+ ### Quick Start with CLI (Recommended)
22
22
 
23
- To install Domma-js in your project:
23
+ Get a complete project structure with 5 sample pages in seconds:
24
24
 
25
25
  ```bash
26
- npm install domma-js@alpha
26
+ npm init -y
27
+ npm install domma-js
28
+ npx domma init
27
29
  ```
28
30
 
29
- Then, import it into your JavaScript:
31
+ This creates:
32
+
33
+ - ✅ Complete project structure with 5 sample pages
34
+ - ✅ JSON configuration (`domma.config.json`)
35
+ - ✅ Navbar and footer (configured via JSON)
36
+ - ✅ Theme system with 16+ themes
37
+ - ✅ All features ready to use
38
+
39
+ ### Via npm (Manual Setup)
40
+
41
+ Install Domma in your project:
42
+
43
+ ```bash
44
+ npm install domma-js
45
+ ```
46
+
47
+ Then import it:
30
48
 
31
49
  ```javascript
32
50
  import Domma, { $, _, M, D } from 'domma-js';
@@ -39,37 +57,22 @@ const Domma = require('domma-js');
39
57
  const { $, _, M, D } = Domma;
40
58
  ```
41
59
 
42
- ### Via jsDelivr CDN
43
-
44
- For quick integration, you can directly include Domma-js from jsDelivr in your HTML. Always specify the version to
45
- ensure stability.
46
-
47
- ```html
48
- <!-- CSS (include these in your <head>) -->
49
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/domma.css">
50
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/grid.css">
51
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/elements.css">
52
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/themes/domma-themes.css">
53
-
54
- <!-- JavaScript (include before your closing </body> tag) -->
55
- <script src="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/domma.min.js"></script>
56
- ```
57
-
58
- ### Local Files (UMD and ES Module)
60
+ ### Via CDN
59
61
 
60
- You can also download the distribution files and host them yourself.
61
-
62
- **Browser (UMD):**
62
+ For quick prototyping without npm:
63
63
 
64
64
  ```html
65
- <script src="dist/domma.min.js"></script>
65
+ <!-- CSS -->
66
+ <link rel="stylesheet" href="https://unpkg.com/domma-js/public/dist/domma.css">
67
+ <link rel="stylesheet" href="https://unpkg.com/domma-js/public/dist/grid.css">
68
+ <link rel="stylesheet" href="https://unpkg.com/domma-js/public/dist/elements.css">
69
+ <link rel="stylesheet" href="https://unpkg.com/domma-js/public/dist/themes/domma-themes.css">
70
+
71
+ <!-- JavaScript -->
72
+ <script src="https://unpkg.com/domma-js/public/dist/domma.min.js"></script>
66
73
  ```
67
74
 
68
- **ES Module:**
69
-
70
- ```javascript
71
- import Domma, { $, _, M, D } from './dist/domma.esm.js';
72
- ```
75
+ **[Try the CDN Quickstart](./public/quickstart/index.html)** - Single-file example ready to download
73
76
 
74
77
  ## Short Aliases
75
78
 
package/bin/domma-cli.js ADDED
@@ -0,0 +1,144 @@
1
+ #!/usr/bin/env node
2
+
3
+ import {existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync} from 'fs';
4
+ import {dirname, join, relative} from 'path';
5
+ import {fileURLToPath} from 'url';
6
+ import * as readline from 'readline/promises';
7
+ import {stdin as input, stdout as output} from 'process';
8
+
9
+ const __filename = fileURLToPath(import.meta.url);
10
+ const __dirname = dirname(__filename);
11
+
12
+ const THEMES = [
13
+ 'charcoal-dark',
14
+ 'ocean-dark',
15
+ 'forest-dark',
16
+ 'sunset-light',
17
+ 'silver-light',
18
+ 'ocean-light',
19
+ 'forest-light',
20
+ 'sunset-dark',
21
+ 'royal-dark',
22
+ 'lemon-light'
23
+ ];
24
+
25
+ // Parse command-line arguments
26
+ const args = process.argv.slice(2);
27
+ const quickMode = args.includes('--quick');
28
+
29
+ // ASCII Art Banner
30
+ console.log(`
31
+ ╔═══════════════════════════════════════╗
32
+ ║ ║
33
+ ║ Welcome to Domma CLI! ║
34
+ ║ ║
35
+ ╚═══════════════════════════════════════╝
36
+
37
+ Let's set up your project.
38
+ `);
39
+
40
+ async function main() {
41
+ let projectName = 'my-app';
42
+ let theme = 'charcoal-dark';
43
+ let includeThemeSelector = false;
44
+
45
+ if (!quickMode) {
46
+ const rl = readline.createInterface({input, output});
47
+
48
+ // Prompt for project name
49
+ const nameAnswer = await rl.question(` Project name: (${projectName}) `);
50
+ if (nameAnswer.trim()) projectName = nameAnswer.trim();
51
+
52
+ // Prompt for theme
53
+ console.log(`\n Choose a theme:`);
54
+ THEMES.forEach((t, i) => {
55
+ const marker = i === 0 ? '❯' : ' ';
56
+ const tag = i === 0 ? '(default)' : '';
57
+ console.log(` ${marker} ${t} ${tag}`);
58
+ });
59
+
60
+ const themeAnswer = await rl.question(`\n Enter theme name or number (1-${THEMES.length}): `);
61
+ const themeInput = themeAnswer.trim();
62
+ if (themeInput) {
63
+ const themeIndex = parseInt(themeInput) - 1;
64
+ if (Number.isInteger(themeIndex) && themeIndex >= 0 && themeIndex < THEMES.length) {
65
+ theme = THEMES[themeIndex];
66
+ } else if (THEMES.includes(themeInput)) {
67
+ theme = themeInput;
68
+ }
69
+ }
70
+
71
+ // Prompt for theme selector
72
+ const selectorAnswer = await rl.question(`\n Include theme selector? (y/N): `);
73
+ includeThemeSelector = selectorAnswer.trim().toLowerCase() === 'y';
74
+
75
+ rl.close();
76
+ console.log('');
77
+ }
78
+
79
+ // Find templates directory
80
+ const templatesDir = join(__dirname, '..', 'templates', 'kickstart');
81
+
82
+ if (!existsSync(templatesDir)) {
83
+ console.error(`\n ✗ Error: Templates directory not found at ${templatesDir}`);
84
+ process.exit(1);
85
+ }
86
+
87
+ // Create project structure
88
+ console.log(` Creating project structure...\n`);
89
+
90
+ const currentYear = new Date().getFullYear();
91
+ const vars = {
92
+ '{{projectName}}': projectName,
93
+ '{{year}}': currentYear.toString(),
94
+ '{{theme}}': theme,
95
+ '{{includeThemeSelector}}': includeThemeSelector.toString()
96
+ };
97
+
98
+ // Copy all templates with variable substitution
99
+ copyTemplatesRecursive(templatesDir, process.cwd(), vars);
100
+
101
+ console.log(`\n ✓ Done! Your project "${projectName}" is ready.\n`);
102
+ console.log(` Next steps:`);
103
+ console.log(` 1. Open index.html in your browser`);
104
+ console.log(` 2. Edit domma.config.json to customise`);
105
+ console.log(` 3. Read the docs: https://github.com/dcbw-it/domma\n`);
106
+ }
107
+
108
+ /**
109
+ * Recursively copy templates with variable substitution
110
+ */
111
+ function copyTemplatesRecursive(srcDir, destDir, vars) {
112
+ const items = readdirSync(srcDir);
113
+
114
+ for (const item of items) {
115
+ const srcPath = join(srcDir, item);
116
+ const destPath = join(destDir, item);
117
+ const stat = statSync(srcPath);
118
+
119
+ if (stat.isDirectory()) {
120
+ // Create directory if it doesn't exist
121
+ if (!existsSync(destPath)) {
122
+ mkdirSync(destPath, {recursive: true});
123
+ }
124
+ copyTemplatesRecursive(srcPath, destPath, vars);
125
+ } else {
126
+ // Copy file with variable substitution
127
+ let content = readFileSync(srcPath, 'utf-8');
128
+
129
+ // Replace all variables
130
+ for (const [key, value] of Object.entries(vars)) {
131
+ content = content.replaceAll(key, value);
132
+ }
133
+
134
+ writeFileSync(destPath, content, 'utf-8');
135
+ const relPath = relative(process.cwd(), destPath);
136
+ console.log(` ✓ Created ${relPath}`);
137
+ }
138
+ }
139
+ }
140
+
141
+ main().catch((error) => {
142
+ console.error(`\n ✗ Error: ${error.message}`);
143
+ process.exit(1);
144
+ });
package/package.json CHANGED
@@ -1,11 +1,16 @@
1
1
  {
2
2
  "name": "domma-js",
3
- "version": "0.5.0-alpha",
3
+ "version": "0.7.2-alpha",
4
4
  "description": "Dynamic Object Manipulation & Modeling API - A complete front-end toolkit.",
5
5
  "main": "public/dist/domma.min.js",
6
6
  "module": "public/dist/domma.esm.js",
7
7
  "types": "assets/types/index.d.ts",
8
+ "bin": {
9
+ "domma": "./bin/domma-cli.js"
10
+ },
8
11
  "files": [
12
+ "bin/",
13
+ "templates/",
9
14
  "public/dist/domma.min.js",
10
15
  "public/dist/domma.esm.js",
11
16
  "public/dist/domma.css",
@@ -13,6 +18,7 @@
13
18
  "public/dist/elements.css",
14
19
  "public/dist/grid.css",
15
20
  "public/dist/syntax.css",
21
+ "public/dist/domma-syntax.min.js",
16
22
  "public/dist/themes/",
17
23
  "assets/types/",
18
24
  "LICENSE",
@@ -39,8 +45,7 @@
39
45
  "generate:bundles": "node scripts/generate-bundles.js",
40
46
  "test:vitest": "vitest",
41
47
  "test": "vitest",
42
- "cypress:run": "cypress run",
43
- "showcase": "live-server public --port=3001 --open=/showcase/index.html"
48
+ "cypress:run": "cypress run"
44
49
  },
45
50
  "keywords": [
46
51
  "dom",
@@ -60,6 +65,7 @@
60
65
  "dotenv": "^17.2.3",
61
66
  "jsdom": "^24.1.0",
62
67
  "live-server": "^1.2.0",
68
+ "puppeteer": "^24.34.0",
63
69
  "rollup": "^4.28.0",
64
70
  "rollup-plugin-obfuscator": "^1.1.0",
65
71
  "vitest": "^4.0.16"
@@ -67,4 +73,4 @@
67
73
  "dependencies": {
68
74
  "@fastify/cors": "^11.2.0"
69
75
  }
70
- }
76
+ }
package/public/dist/bundles/domma-complete.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*!
2
- * Domma Complete CSS Bundle v0.5.0-alpha
2
+ * Domma Complete CSS Bundle v0.7.2-alpha
3
3
  * Dynamic Object Manipulation & Modeling API
4
4
  * (c) 2026 Darryl Waterhouse & DCBW-IT
5
- * Built: 2026-01-06T00:30:49.507Z
5
+ * Built: 2026-01-08T15:02:28.957Z
6
6
  */
7
7
 
8
8
  /* ============================================
@@ -11,11 +11,11 @@
11
11
  ============================================ */
12
12
 
13
13
  /*!
14
- * Domma Core CSS v0.5.0-alpha
14
+ * Domma Core CSS v0.7.2-alpha
15
15
  * Dynamic Object Manipulation & Modeling API
16
16
  * (c) 2026 Darryl Waterhouse & DCBW-IT
17
- * Built: 2026-01-06T00:30:49.167Z
18
- * Commit: 72b7845
17
+ * Built: 2026-01-08T15:02:28.643Z
18
+ * Commit: 59f511d
19
19
  */
20
20
 
21
21
  /**
@@ -3997,6 +3997,18 @@ code, pre {
3997
3997
  filter: saturate(1.2) hue-rotate(-15deg);
3998
3998
  }
3999
3999
 
4000
+ /* ================================================
4001
+ CLOAKING - Prevent flash of unstyled content
4002
+ ================================================ */
4003
+ body.dm-cloaked {
4004
+ opacity: 0;
4005
+ }
4006
+
4007
+ body.dm-cloaked.dm-ready {
4008
+ opacity: 1;
4009
+ transition: opacity 0.3s ease;
4010
+ }
4011
+
4000
4012
 
4001
4013
  /* ============================================
4002
4014
  GRID SYSTEM
@@ -4004,11 +4016,11 @@ code, pre {
4004
4016
  ============================================ */
4005
4017
 
4006
4018
  /*!
4007
- * Domma Grid CSS v0.5.0-alpha
4019
+ * Domma Grid CSS v0.7.2-alpha
4008
4020
  * Dynamic Object Manipulation & Modeling API
4009
4021
  * (c) 2026 Darryl Waterhouse & DCBW-IT
4010
- * Built: 2026-01-06T00:30:49.174Z
4011
- * Commit: 72b7845
4022
+ * Built: 2026-01-08T15:02:28.652Z
4023
+ * Commit: 59f511d
4012
4024
  */
4013
4025
 
4014
4026
  /**
@@ -4549,11 +4561,11 @@ code, pre {
4549
4561
  ============================================ */
4550
4562
 
4551
4563
  /*!
4552
- * Domma Elements CSS v0.5.0-alpha
4564
+ * Domma Elements CSS v0.7.2-alpha
4553
4565
  * Dynamic Object Manipulation & Modeling API
4554
4566
  * (c) 2026 Darryl Waterhouse & DCBW-IT
4555
- * Built: 2026-01-06T00:30:49.181Z
4556
- * Commit: 72b7845
4567
+ * Built: 2026-01-08T15:02:28.663Z
4568
+ * Commit: 59f511d
4557
4569
  */
4558
4570
 
4559
4571
  /**
@@ -4855,7 +4867,7 @@ code, pre {
4855
4867
  border-radius: var(--dm-radius-lg);
4856
4868
  box-shadow: var(--dm-shadow-xl);
4857
4869
  z-index: 50;
4858
- max-width: 500px;
4870
+ max-width: 700px;
4859
4871
  width: 90%;
4860
4872
  max-height: 90vh;
4861
4873
  overflow: auto;
@@ -4927,6 +4939,23 @@ code, pre {
4927
4939
  max-width: 1140px;
4928
4940
  }
4929
4941
 
4942
+ /* Modal Factory Dialog Sizes */
4943
+ .dm-dialog-small {
4944
+ max-width: 400px !important;
4945
+ }
4946
+
4947
+ .dm-dialog-medium {
4948
+ max-width: 700px !important;
4949
+ }
4950
+
4951
+ .dm-dialog-large {
4952
+ max-width: 900px !important;
4953
+ }
4954
+
4955
+ .dm-dialog-xl {
4956
+ max-width: 1200px !important;
4957
+ }
4958
+
4930
4959
 
4931
4960
  /* ============================================
4932
4961
  TABS
@@ -5374,16 +5403,18 @@ textarea:not([class])::placeholder {
5374
5403
  .form-check {
5375
5404
  display: flex;
5376
5405
  align-items: flex-start;
5377
- gap: var(--dm-space-2);
5406
+ gap: var(--dm-space-3);
5378
5407
  cursor: pointer;
5379
5408
  position: relative;
5409
+ padding: var(--dm-space-1) 0;
5410
+ min-height: 1.5rem;
5380
5411
  }
5381
5412
 
5382
5413
  .form-check-input {
5383
5414
  appearance: none;
5384
5415
  -webkit-appearance: none;
5385
- width: 1.125rem;
5386
- height: 1.125rem;
5416
+ width: 1.25rem;
5417
+ height: 1.25rem;
5387
5418
  border: 2px solid var(--dm-border, var(--dm-gray-400));
5388
5419
  border-radius: var(--dm-radius-sm);
5389
5420
  background-color: var(--dm-surface, var(--dm-white));
@@ -5391,6 +5422,8 @@ textarea:not([class])::placeholder {
5391
5422
  position: relative;
5392
5423
  flex-shrink: 0;
5393
5424
  margin-top: 0.125rem;
5425
+ margin-right: var(--dm-space-1);
5426
+ padding: 0;
5394
5427
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
5395
5428
  }
5396
5429
 
@@ -5412,10 +5445,10 @@ textarea:not([class])::placeholder {
5412
5445
  .form-check-input:checked::after {
5413
5446
  content: '';
5414
5447
  position: absolute;
5415
- left: 5px;
5416
- top: 2px;
5417
- width: 5px;
5418
- height: 9px;
5448
+ left: 5.5px;
5449
+ top: 2.5px;
5450
+ width: 6px;
5451
+ height: 10px;
5419
5452
  border: solid var(--dm-white);
5420
5453
  border-width: 0 2px 2px 0;
5421
5454
  transform: rotate(45deg);
@@ -5434,6 +5467,9 @@ textarea:not([class])::placeholder {
5434
5467
  .form-check-label {
5435
5468
  cursor: pointer;
5436
5469
  color: var(--dm-text, var(--dm-gray-900));
5470
+ line-height: 1.5;
5471
+ padding-top: 0.125rem;
5472
+ user-select: none;
5437
5473
  }
5438
5474
 
5439
5475
  /* Custom Radio */
@@ -9900,11 +9936,11 @@ code {
9900
9936
  ============================================ */
9901
9937
 
9902
9938
  /*!
9903
- * Domma Themes v0.5.0-alpha
9939
+ * Domma Themes v0.7.2-alpha
9904
9940
  * Dynamic Object Manipulation & Modeling API
9905
9941
  * (c) 2026 Darryl Waterhouse & DCBW-IT
9906
- * Built: 2026-01-06T00:30:49.133Z
9907
- * Commit: 72b7845
9942
+ * Built: 2026-01-08T15:02:28.608Z
9943
+ * Commit: 59f511d
9908
9944
  */
9909
9945
 
9910
9946
  /**
@@ -13367,5 +13403,218 @@ code {
13367
13403
  --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
13368
13404
 
13369
13405
  }
13406
+ .dm-theme-grayve {
13407
+ color-scheme: dark; /* Slate is typically a dark theme */
13408
+
13409
+ /* Tailwind-based color palette - adapting for grayve */
13410
+ /* Slate (using bootswatch values) */
13411
+ --dm-slate-50: #F8F9FA; /* Off-white */
13412
+ --dm-slate-100: #E9ECEF;
13413
+ --dm-slate-200: #DEE2E6;
13414
+ --dm-slate-300: #CED4DA;
13415
+ --dm-slate-400: #ADB5BD;
13416
+ --dm-slate-500: #6C757D; /* Medium Gray */
13417
+ --dm-slate-600: #495057;
13418
+ --dm-slate-700: #343A40;
13419
+ --dm-slate-800: #212529;
13420
+ --dm-slate-900: #1a1e21; /* Dark Gray */
13421
+ --dm-slate-950: #141619; /* Very Dark Gray */
13422
+
13423
+ /* Blues (for primary/info, etc.) */
13424
+ --dm-blue-50: #e0f7fa;
13425
+ --dm-blue-100: #b2ebf2;
13426
+ --dm-blue-200: #80deea;
13427
+ --dm-blue-300: #4dd0e1;
13428
+ --dm-blue-400: #26c6da;
13429
+ --dm-blue-500: #00bcd4; /* Bootswatch primary might be close to this or lighter */
13430
+ --dm-blue-600: #00acc1;
13431
+ --dm-blue-700: #0097a7;
13432
+ --dm-blue-800: #00838f;
13433
+ --dm-blue-900: #006064;
13434
+ --dm-blue-950: #004d40;
13435
+
13436
+ /* Green (Success) */
13437
+ --dm-green-500: #28a745;
13438
+ --dm-green-400: #49cc61;
13439
+ --dm-green-300: #6fd180;
13440
+ --dm-green-600: #218838;
13441
+
13442
+ /* Red (Danger) */
13443
+ --dm-red-500: #dc3545;
13444
+ --dm-red-400: #e35a67;
13445
+ --dm-red-300: #eb808a;
13446
+ --dm-red-600: #c82333;
13447
+
13448
+ /* Amber (Warning) */
13449
+ --dm-amber-500: #ffc107;
13450
+ --dm-amber-400: #ffcd38;
13451
+ --dm-amber-300: #ffd865;
13452
+ --dm-amber-600: #e0a800;
13453
+
13454
+ /* Sky (Info - often similar to primary but distinct) */
13455
+ --dm-sky-500: #17a2b8;
13456
+ --dm-sky-400: #26d2e9;
13457
+ --dm-sky-300: #51daec;
13458
+ --dm-sky-600: #138496;
13459
+
13460
+ /* Semantic colors */
13461
+ --dm-background: var(--dm-slate-900);
13462
+ --dm-background-alt: var(--dm-slate-800);
13463
+ --dm-surface: var(--dm-slate-800);
13464
+ --dm-surface-raised: var(--dm-slate-700);
13465
+ --dm-surface-overlay: rgba(0, 0, 0, 0.7);
13466
+
13467
+ /* Text */
13468
+ --dm-text: var(--dm-slate-200);
13469
+ --dm-text-secondary: var(--dm-slate-400);
13470
+ --dm-text-muted: var(--dm-slate-500);
13471
+ --dm-text-disabled: var(--dm-slate-600);
13472
+ --dm-text-inverse: var(--dm-slate-900);
13473
+
13474
+ /* Borders */
13475
+ --dm-border: var(--dm-slate-700);
13476
+ --dm-border-light: var(--dm-slate-800);
13477
+ --dm-border-dark: var(--dm-slate-600);
13478
+ --dm-border-focus: var(--dm-blue-500); /* Use a vibrant blue for focus */
13479
+ --dm-focus-ring: rgba(0, 188, 212, 0.3); /* Based on dm-blue-500 */
13480
+ --dm-focus-ring-danger: rgba(220, 53, 69, 0.3); /* Based on dm-red-500 */
13481
+
13482
+ /* Interactive States */
13483
+ --dm-hover-bg: rgba(255, 255, 255, 0.07);
13484
+ --dm-active-bg: rgba(255, 255, 255, 0.1);
13485
+ --dm-selected-bg: var(--dm-blue-600);
13486
+ --dm-disabled-opacity: 0.4;
13487
+
13488
+ /* Brand Colors */
13489
+ --dm-primary: var(--dm-blue-500);
13490
+ --dm-primary-dark: var(--dm-blue-700);
13491
+ --dm-primary-light: var(--dm-blue-300);
13492
+ --dm-primary-hover: var(--dm-blue-400);
13493
+ --dm-primary-active: var(--dm-blue-600);
13494
+
13495
+ --dm-secondary: var(--dm-slate-500);
13496
+ --dm-secondary-hover: var(--dm-slate-400);
13497
+ --dm-secondary-active: var(--dm-slate-300);
13498
+
13499
+ /* Status Colors */
13500
+ --dm-success: var(--dm-green-500);
13501
+ --dm-success-hover: var(--dm-green-400);
13502
+ --dm-success-active: var(--dm-green-600);
13503
+ --dm-success-light: rgba(40, 167, 69, 0.2);
13504
+ --dm-success-dark: var(--dm-green-600);
13505
+
13506
+ --dm-danger: var(--dm-red-500);
13507
+ --dm-danger-hover: var(--dm-red-400);
13508
+ --dm-danger-active: var(--dm-red-600);
13509
+ --dm-danger-light: rgba(220, 53, 69, 0.2);
13510
+ --dm-danger-dark: var(--dm-red-600);
13511
+
13512
+ --dm-warning: var(--dm-amber-400);
13513
+ --dm-warning-hover: var(--dm-amber-300);
13514
+ --dm-warning-active: var(--dm-amber-500);
13515
+ --dm-warning-text: var(--dm-amber-900);
13516
+ --dm-warning-light: rgba(255, 193, 7, 0.2);
13517
+ --dm-warning-dark: var(--dm-amber-600);
13518
+
13519
+ --dm-info: var(--dm-sky-500);
13520
+ --dm-info-hover: var(--dm-sky-400);
13521
+ --dm-info-active: var(--dm-sky-600);
13522
+ --dm-info-light: rgba(23, 162, 184, 0.2);
13523
+ --dm-info-dark: var(--dm-sky-600);
13524
+
13525
+ /* Background Tints */
13526
+ --dm-primary-bg: rgba(0, 188, 212, 0.15);
13527
+ --dm-secondary-bg: rgba(108, 117, 125, 0.15);
13528
+ --dm-success-bg: rgba(40, 167, 69, 0.15);
13529
+ --dm-danger-bg: rgba(220, 53, 69, 0.15);
13530
+ --dm-warning-bg: rgba(255, 193, 7, 0.15);
13531
+ --dm-info-bg: rgba(23, 162, 184, 0.15);
13532
+
13533
+ /* Semantic Surface Colors */
13534
+ --dm-surface-secondary: var(--dm-slate-900);
13535
+ --dm-card-bg: var(--dm-slate-800);
13536
+ --dm-card-border: var(--dm-slate-700);
13537
+
13538
+ /* Legacy color names (kept for backwards compatibility) */
13539
+ --dm-light: var(--dm-slate-200);
13540
+ --dm-dark: var(--dm-slate-800);
13541
+ --dm-white: #ffffff;
13542
+ --dm-black: #000000;
13543
+
13544
+ /* Grays (mapped to Slate) */
13545
+ --dm-gray-50: var(--dm-slate-50);
13546
+ --dm-gray-100: var(--dm-slate-100);
13547
+ --dm-gray-200: var(--dm-slate-200);
13548
+ --dm-gray-300: var(--dm-slate-300);
13549
+ --dm-gray-400: var(--dm-slate-400);
13550
+ --dm-gray-500: var(--dm-slate-500);
13551
+ --dm-gray-600: var(--dm-slate-600);
13552
+ --dm-gray-700: var(--dm-slate-700);
13553
+ --dm-gray-800: var(--dm-slate-800);
13554
+ --dm-gray-900: var(--dm-slate-900);
13555
+ --dm-gray-950: var(--dm-slate-950);
13556
+
13557
+ /* Component-specific variables */
13558
+ --dm-input-bg: var(--dm-surface);
13559
+ --dm-input-border: var(--dm-border-dark);
13560
+ --dm-input-text: var(--dm-text);
13561
+ --dm-input-placeholder: var(--dm-text-muted);
13562
+ --dm-input-focus-border: var(--dm-primary);
13563
+ --dm-input-disabled-bg: var(--dm-slate-800);
13564
+
13565
+ --dm-table-border: var(--dm-border);
13566
+ --dm-table-hover-bg: var(--dm-hover-bg);
13567
+ --dm-table-stripe-bg: rgba(255, 255, 255, 0.03);
13568
+
13569
+ --dm-navbar-bg: var(--dm-surface);
13570
+ --dm-navbar-text: var(--dm-text);
13571
+ --dm-navbar-border: var(--dm-border);
13572
+
13573
+ --dm-dropdown-bg: var(--dm-surface-raised);
13574
+ --dm-dropdown-border: var(--dm-border);
13575
+ --dm-dropdown-item-hover: var(--dm-hover-bg);
13576
+ --dm-dropdown-item-active: var(--dm-selected-bg);
13577
+
13578
+ --dm-sidebar-bg: var(--dm-surface);
13579
+ --dm-sidebar-border: var(--dm-border);
13580
+ --dm-sidebar-item-hover: var(--dm-hover-bg);
13581
+ --dm-sidebar-item-active: var(--dm-selected-bg);
13582
+
13583
+ --dm-autocomplete-bg: var(--dm-surface);
13584
+ --dm-autocomplete-border: var(--dm-border);
13585
+ --dm-autocomplete-shadow: var(--dm-shadow-md);
13586
+ --dm-autocomplete-item-hover: var(--dm-hover-bg);
13587
+ --dm-autocomplete-item-active: var(--dm-selected-bg);
13588
+ --dm-autocomplete-highlight: var(--dm-primary-light);
13589
+
13590
+ --dm-pillbox-bg: var(--dm-surface);
13591
+ --dm-pillbox-border: var(--dm-border);
13592
+ --dm-pill-bg: var(--dm-gray-700); /* Darker pill background for dark theme */
13593
+ --dm-pill-color: var(--dm-text);
13594
+ --dm-pill-hover-bg: var(--dm-gray-600);
13595
+
13596
+ --dm-tab-border: var(--dm-border);
13597
+ --dm-tab-hover-bg: var(--dm-hover-bg);
13598
+ --dm-tab-active-border: var(--dm-primary);
13599
+ --dm-tab-active-text: var(--dm-primary);
13600
+
13601
+ --dm-accordion-border: var(--dm-border);
13602
+ --dm-accordion-header-hover: var(--dm-hover-bg);
13603
+ }
13604
+
13605
+ /* Syntax highlighting tokens for grayve (assuming similar to dark theme) */
13606
+ .dm-theme-grayve .code-block .syntax-keyword {
13607
+ color: #c792ea; /* Purple */
13608
+ font-weight: 500;
13609
+ }
13610
+
13611
+ .dm-theme-grayve .code-block .syntax-string,
13612
+ .dm-theme-grayve .code-block .syntax-template-string {
13613
+ color: #c3e88d; /* Green */
13614
+ }
13615
+
13616
+ .dm-theme-grayve .code-block .syntax-function {
13617
+ color: #82aaff; /* Light Blue */
13618
+ }
13370
13619
 
13371
13620