@duskmoon-dev/core 1.15.0 → 1.16.0

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 (126) hide show
  1. package/dist/cjs/tailwind-plugin.cjs +38 -79
  2. package/dist/components/accordion.css +7 -7
  3. package/dist/components/alert.css +2 -2
  4. package/dist/components/appbar.css +5 -5
  5. package/dist/components/autocomplete.css +7 -7
  6. package/dist/components/avatar.css +5 -5
  7. package/dist/components/badge.css +3 -3
  8. package/dist/components/bottom-navigation.css +7 -7
  9. package/dist/components/bottomsheet.css +12 -12
  10. package/dist/components/button.css +19 -19
  11. package/dist/components/card.css +9 -2
  12. package/dist/components/cascader.css +9 -9
  13. package/dist/components/checkbox.css +1 -1
  14. package/dist/components/chip.css +12 -10
  15. package/dist/components/circle-menu.css +324 -0
  16. package/dist/components/code-block.css +133 -0
  17. package/dist/components/collapse.css +9 -9
  18. package/dist/components/datepicker.css +22 -22
  19. package/dist/components/dialog.css +5 -5
  20. package/dist/components/drawer.css +13 -13
  21. package/dist/components/file-upload.css +12 -12
  22. package/dist/components/form-group.css +162 -1
  23. package/dist/components/form.css +159 -22
  24. package/dist/components/index.css +1026 -385
  25. package/dist/components/input.css +23 -14
  26. package/dist/components/list.css +3 -3
  27. package/dist/components/markdown-body.css +6 -6
  28. package/dist/components/modal.css +7 -7
  29. package/dist/components/multi-select.css +16 -16
  30. package/dist/components/navigation.css +20 -20
  31. package/dist/components/nested-menu.css +5 -5
  32. package/dist/components/otp-input.css +5 -5
  33. package/dist/components/pin-input.css +5 -5
  34. package/dist/components/popover.css +15 -15
  35. package/dist/components/progress.css +2 -2
  36. package/dist/components/radio.css +2 -2
  37. package/dist/components/rating.css +1 -1
  38. package/dist/components/segment-control.css +6 -6
  39. package/dist/components/select.css +7 -7
  40. package/dist/components/skeleton.css +11 -11
  41. package/dist/components/slider.css +16 -16
  42. package/dist/components/snackbar.css +5 -5
  43. package/dist/components/stepper.css +9 -9
  44. package/dist/components/switch.css +1 -1
  45. package/dist/components/table.css +3 -3
  46. package/dist/components/textarea.css +5 -5
  47. package/dist/components/theme-controller.css +4 -4
  48. package/dist/components/time-input.css +10 -10
  49. package/dist/components/timeline.css +6 -6
  50. package/dist/components/toast.css +3 -3
  51. package/dist/components/toggle.css +8 -8
  52. package/dist/components/tooltip.css +1 -1
  53. package/dist/components/tree-select.css +14 -14
  54. package/dist/esm/components/accordion.js +7 -7
  55. package/dist/esm/components/alert.js +2 -2
  56. package/dist/esm/components/appbar.js +5 -5
  57. package/dist/esm/components/autocomplete.js +7 -7
  58. package/dist/esm/components/avatar.js +5 -5
  59. package/dist/esm/components/badge.js +3 -3
  60. package/dist/esm/components/bottom-navigation.js +7 -7
  61. package/dist/esm/components/bottomsheet.js +12 -12
  62. package/dist/esm/components/button.js +19 -19
  63. package/dist/esm/components/card.js +9 -2
  64. package/dist/esm/components/cascader.js +9 -9
  65. package/dist/esm/components/checkbox.js +1 -1
  66. package/dist/esm/components/chip.js +12 -10
  67. package/dist/esm/components/circle-menu.js +331 -0
  68. package/dist/esm/components/code-block.js +140 -0
  69. package/dist/esm/components/collapse.js +9 -9
  70. package/dist/esm/components/datepicker.js +22 -22
  71. package/dist/esm/components/dialog.js +5 -5
  72. package/dist/esm/components/drawer.js +13 -13
  73. package/dist/esm/components/file-upload.js +12 -12
  74. package/dist/esm/components/form-group.js +162 -1
  75. package/dist/esm/components/form.js +159 -22
  76. package/dist/esm/components/input.js +23 -14
  77. package/dist/esm/components/list.js +3 -3
  78. package/dist/esm/components/markdown-body.js +6 -6
  79. package/dist/esm/components/modal.js +7 -7
  80. package/dist/esm/components/multi-select.js +16 -16
  81. package/dist/esm/components/navigation.js +20 -20
  82. package/dist/esm/components/nested-menu.js +5 -5
  83. package/dist/esm/components/otp-input.js +5 -5
  84. package/dist/esm/components/pin-input.js +5 -5
  85. package/dist/esm/components/popover.js +15 -15
  86. package/dist/esm/components/progress.js +2 -2
  87. package/dist/esm/components/radio.js +2 -2
  88. package/dist/esm/components/rating.js +1 -1
  89. package/dist/esm/components/segment-control.js +6 -6
  90. package/dist/esm/components/select.js +7 -7
  91. package/dist/esm/components/skeleton.js +11 -11
  92. package/dist/esm/components/slider.js +16 -16
  93. package/dist/esm/components/snackbar.js +5 -5
  94. package/dist/esm/components/stepper.js +9 -9
  95. package/dist/esm/components/switch.js +1 -1
  96. package/dist/esm/components/table.js +3 -3
  97. package/dist/esm/components/textarea.js +5 -5
  98. package/dist/esm/components/theme-controller.js +4 -4
  99. package/dist/esm/components/time-input.js +10 -10
  100. package/dist/esm/components/timeline.js +6 -6
  101. package/dist/esm/components/toast.js +3 -3
  102. package/dist/esm/components/toggle.js +8 -8
  103. package/dist/esm/components/tooltip.js +1 -1
  104. package/dist/esm/components/tree-select.js +14 -14
  105. package/dist/esm/tailwind-plugin.js +38 -79
  106. package/dist/index.css +1435 -1137
  107. package/dist/index.min.css +1 -1
  108. package/dist/themes/{forest.css → generated/forest.css} +26 -94
  109. package/dist/themes/generated/moonlight.css +77 -0
  110. package/dist/themes/{ocean.css → generated/ocean.css} +26 -103
  111. package/dist/themes/generated/spacing.css +36 -0
  112. package/dist/themes/{sunset.css → generated/sunset.css} +26 -95
  113. package/dist/themes/generated/sunshine.css +77 -0
  114. package/dist/types/tailwind-plugin.d.ts +1 -0
  115. package/dist/types/tailwind-plugin.d.ts.map +1 -1
  116. package/dist/types/themes/generated/ts/types.d.ts +76 -0
  117. package/dist/types/themes/generated/ts/types.d.ts.map +1 -0
  118. package/dist/types/types/index.d.ts +1 -1
  119. package/dist/types/types/index.d.ts.map +1 -1
  120. package/dist/types/types/plugin.d.ts +1 -1
  121. package/dist/types/types/plugin.d.ts.map +1 -1
  122. package/dist/types/types/theme.d.ts +5 -152
  123. package/dist/types/types/theme.d.ts.map +1 -1
  124. package/package.json +11 -6
  125. package/dist/themes/moonlight.css +0 -271
  126. package/dist/themes/sunshine.css +0 -252
@@ -1,38 +1,26 @@
1
- /**
2
- * Forest Theme - Light Mode
3
- * A natural, earthy light theme inspired by woodland environments
4
- * Uses OKLCH format: "oklch(L% C H)"
5
- */
1
+ /* GENERATED — DO NOT EDIT */
2
+ /* Source: tokens/forest.yaml */
3
+ /* Generator: duskmoon-codegen v2.0.0 */
6
4
 
7
5
  [data-theme="forest"] {
8
6
  color-scheme: light;
9
-
10
- /* ============================================
11
- * BRAND COLORS
12
- * ============================================ */
13
-
14
- /* Primary Color Family - Forest Green */
15
7
  --color-primary: oklch(50% 0.14 150);
16
8
  --color-primary-content: oklch(98% 0.01 150);
17
9
  --color-primary-container: oklch(92% 0.04 150);
18
10
  --color-on-primary-container: oklch(22% 0.06 150);
19
-
20
- /* Secondary Color Family - Warm Brown */
21
11
  --color-secondary: oklch(52% 0.10 55);
22
12
  --color-secondary-content: oklch(98% 0.01 55);
23
13
  --color-secondary-container: oklch(92% 0.03 55);
24
14
  --color-on-secondary-container: oklch(24% 0.05 55);
25
-
26
- /* Tertiary Color Family - Sage */
27
15
  --color-tertiary: oklch(58% 0.08 175);
28
16
  --color-tertiary-content: oklch(98% 0.01 175);
29
17
  --color-tertiary-container: oklch(93% 0.03 175);
30
18
  --color-on-tertiary-container: oklch(22% 0.04 175);
31
-
32
- /* ============================================
33
- * SURFACE COLORS
34
- * ============================================ */
35
-
19
+ --color-accent: oklch(60% 0.12 85);
20
+ --color-accent-content: oklch(20% 0.04 85);
21
+ --color-neutral: oklch(14% 0.01 100);
22
+ --color-neutral-content: oklch(92% 0.01 100);
23
+ --color-neutral-variant: oklch(48% 0.015 100);
36
24
  --color-surface: oklch(99% 0.005 100);
37
25
  --color-surface-dim: oklch(95% 0.01 100);
38
26
  --color-surface-bright: oklch(100% 0 0);
@@ -41,78 +29,43 @@
41
29
  --color-surface-container: oklch(96% 0.01 100);
42
30
  --color-surface-container-high: oklch(94% 0.012 100);
43
31
  --color-surface-container-highest: oklch(92% 0.015 100);
32
+ --color-surface-variant: oklch(93% 0.02 100);
44
33
  --color-on-surface: oklch(22% 0.02 100);
45
34
  --color-on-surface-variant: oklch(42% 0.02 100);
46
-
47
- /* ============================================
48
- * SEMANTIC COLORS
49
- * ============================================ */
50
-
51
- /* Info - Forest Blue */
35
+ --color-base-100: oklch(99% 0.005 100);
36
+ --color-base-200: oklch(92% 0.01 100);
37
+ --color-base-300: oklch(80% 0.01 100);
38
+ --color-base-400: oklch(60% 0.01 100);
39
+ --color-base-500: oklch(48% 0.01 100);
40
+ --color-base-600: oklch(38% 0.01 100);
41
+ --color-base-700: oklch(28% 0.01 100);
42
+ --color-base-800: oklch(20% 0.008 100);
43
+ --color-base-900: oklch(14% 0.005 100);
44
+ --color-base-content: oklch(14% 0.01 100);
45
+ --color-outline: oklch(60% 0.015 100);
46
+ --color-outline-variant: oklch(78% 0.01 100);
47
+ --color-inverse-surface: oklch(22% 0.02 100);
48
+ --color-inverse-on-surface: oklch(95% 0.01 100);
49
+ --color-inverse-primary: oklch(75% 0.10 150);
50
+ --color-shadow: oklch(0% 0 0);
51
+ --color-scrim: oklch(0% 0 0 / 40%);
52
52
  --color-info: oklch(48% 0.12 240);
53
53
  --color-info-content: oklch(98% 0.01 240);
54
54
  --color-info-container: oklch(94% 0.03 240);
55
55
  --color-on-info-container: oklch(28% 0.06 240);
56
-
57
- /* Success - Moss Green */
58
56
  --color-success: oklch(55% 0.16 145);
59
57
  --color-success-content: oklch(98% 0.01 145);
60
58
  --color-success-container: oklch(93% 0.04 145);
61
59
  --color-on-success-container: oklch(25% 0.07 145);
62
-
63
- /* Warning - Autumn Gold */
64
60
  --color-warning: oklch(62% 0.16 65);
65
61
  --color-warning-content: oklch(18% 0.04 65);
66
62
  --color-warning-container: oklch(93% 0.04 65);
67
63
  --color-on-warning-container: oklch(32% 0.08 65);
68
-
69
- /* Error - Berry Red */
70
64
  --color-error: oklch(52% 0.18 15);
71
65
  --color-error-content: oklch(98% 0.01 15);
72
66
  --color-error-container: oklch(93% 0.04 15);
73
67
  --color-on-error-container: oklch(28% 0.08 15);
74
68
 
75
- /* ============================================
76
- * NEUTRAL COLORS (Base Scale)
77
- * ============================================ */
78
-
79
- --color-base-100: oklch(99% 0.005 100);
80
- --color-base-200: oklch(92% 0.01 100);
81
- --color-base-300: oklch(80% 0.01 100);
82
- --color-base-400: oklch(60% 0.01 100);
83
- --color-base-500: oklch(48% 0.01 100);
84
- --color-base-600: oklch(38% 0.01 100);
85
- --color-base-700: oklch(28% 0.01 100);
86
- --color-base-800: oklch(20% 0.008 100);
87
- --color-base-900: oklch(14% 0.005 100);
88
- --color-base-content: oklch(14% 0.01 100);
89
-
90
- /* ============================================
91
- * OUTLINE COLORS
92
- * ============================================ */
93
-
94
- --color-outline: oklch(60% 0.015 100);
95
- --color-outline-variant: oklch(78% 0.01 100);
96
-
97
- /* ============================================
98
- * ACCENT COLORS
99
- * ============================================ */
100
-
101
- --color-accent: oklch(60% 0.12 85);
102
- --color-accent-content: oklch(20% 0.04 85);
103
-
104
- /* ============================================
105
- * NEUTRAL COLORS
106
- * ============================================ */
107
-
108
- --color-neutral: oklch(14% 0.01 100);
109
- --color-neutral-content: oklch(92% 0.01 100);
110
- --color-neutral-variant: oklch(48% 0.015 100);
111
-
112
- /* ============================================
113
- * SHAPE & DEPTH
114
- * ============================================ */
115
-
116
69
  --radius-selector: 0.125rem;
117
70
  --radius-field: 0.375rem;
118
71
  --radius-box: 1rem;
@@ -121,25 +74,4 @@
121
74
  --border: 1px;
122
75
  --depth: 0.5;
123
76
  --noise: 0.8;
124
-
125
- /* ============================================
126
- * SURFACE VARIANT
127
- * ============================================ */
128
-
129
- --color-surface-variant: oklch(93% 0.02 100);
130
-
131
- /* ============================================
132
- * INVERSE COLORS
133
- * ============================================ */
134
-
135
- --color-inverse-surface: oklch(22% 0.02 100);
136
- --color-inverse-on-surface: oklch(95% 0.01 100);
137
- --color-inverse-primary: oklch(75% 0.10 150);
138
-
139
- /* ============================================
140
- * SHADOW & SCRIM
141
- * ============================================ */
142
-
143
- --color-shadow: oklch(0% 0 0);
144
- --color-scrim: oklch(0% 0 0 / 40%);
145
77
  }
@@ -0,0 +1,77 @@
1
+ /* GENERATED — DO NOT EDIT */
2
+ /* Source: tokens/moonlight.yaml */
3
+ /* Generator: duskmoon-codegen v2.0.0 */
4
+
5
+ [data-theme="moonlight"] {
6
+ color-scheme: dark;
7
+ --color-primary: oklch(85.45% 0 0);
8
+ --color-primary-content: oklch(14.94% 0.031 39.947);
9
+ --color-primary-container: oklch(25% 0.01 0);
10
+ --color-on-primary-container: oklch(85% 0.01 0);
11
+ --color-secondary: oklch(83.33% 0.0981 73.78);
12
+ --color-secondary-content: oklch(14.507% 0.035 2.72);
13
+ --color-secondary-container: oklch(28% 0.03 73.78);
14
+ --color-on-secondary-container: oklch(88% 0.03 73.78);
15
+ --color-tertiary: oklch(72% 0.090 255);
16
+ --color-tertiary-content: oklch(14% 0.012 255);
17
+ --color-tertiary-container: oklch(28% 0.030 255);
18
+ --color-on-tertiary-container: oklch(88% 0.010 255);
19
+ --color-accent: oklch(75.65% 0.1303 335.51);
20
+ --color-accent-content: oklch(14.258% 0.033 299.844);
21
+ --color-neutral: oklch(23% 0 0);
22
+ --color-neutral-content: oklch(52.43% 0 0);
23
+ --color-neutral-variant: oklch(55% 0.01 260);
24
+ --color-surface: oklch(20% 0.02 260);
25
+ --color-surface-dim: oklch(17% 0.02 260);
26
+ --color-surface-bright: oklch(28% 0.02 260);
27
+ --color-surface-container-lowest: oklch(14% 0.02 260);
28
+ --color-surface-container-low: oklch(20% 0.02 260);
29
+ --color-surface-container: oklch(22% 0.02 260);
30
+ --color-surface-container-high: oklch(25% 0.02 260);
31
+ --color-surface-container-highest: oklch(28% 0.01 260);
32
+ --color-surface-variant: oklch(30% 0.02 260);
33
+ --color-on-surface: oklch(95% 0.01 260);
34
+ --color-on-surface-variant: oklch(75% 0.01 260);
35
+ --color-base-100: oklch(22% 0.019 237.69);
36
+ --color-base-200: oklch(20% 0.019 237.69);
37
+ --color-base-300: oklch(18% 0.019 237.69);
38
+ --color-base-400: oklch(26% 0.019 237.69);
39
+ --color-base-500: oklch(32% 0.019 237.69);
40
+ --color-base-600: oklch(40% 0.018 237.69);
41
+ --color-base-700: oklch(55% 0.017 237.69);
42
+ --color-base-800: oklch(70% 0.016 237.69);
43
+ --color-base-900: oklch(85% 0.015 237.69);
44
+ --color-base-content: oklch(77.383% 0.043 245.096);
45
+ --color-outline: oklch(44% 0.01 260);
46
+ --color-outline-variant: oklch(35% 0.01 260);
47
+ --color-inverse-surface: oklch(95% 0.01 260);
48
+ --color-inverse-on-surface: oklch(25% 0.02 260);
49
+ --color-inverse-primary: oklch(55% 0.16 255);
50
+ --color-shadow: oklch(0% 0 0);
51
+ --color-scrim: oklch(0% 0 0 / 60%);
52
+ --color-info: oklch(82.42% 0.09757279812867503 240.7677443360475);
53
+ --color-info-content: oklch(17.111% 0.017 206.015);
54
+ --color-info-container: oklch(32% 0.06 235);
55
+ --color-on-info-container: oklch(88% 0.06 235);
56
+ --color-success: oklch(82.19% 0.0621 133.3);
57
+ --color-success-content: oklch(17.112% 0.017 144.778);
58
+ --color-success-container: oklch(30% 0.05 150);
59
+ --color-on-success-container: oklch(85% 0.06 150);
60
+ --color-warning: oklch(76.36% 0.1752731353930708 61.96388739129725);
61
+ --color-warning-content: oklch(17.113% 0.016 74.427);
62
+ --color-warning-container: oklch(35% 0.06 80);
63
+ --color-on-warning-container: oklch(90% 0.06 80);
64
+ --color-error: oklch(46.38% 0.1898 29.17);
65
+ --color-error-content: oklch(86.38% 0.298 39.17);
66
+ --color-error-container: oklch(30% 0.08 25);
67
+ --color-on-error-container: oklch(88% 0.06 25);
68
+
69
+ --radius-selector: 0.125rem;
70
+ --radius-field: 0.375rem;
71
+ --radius-box: 1rem;
72
+ --size-selector: 0.125rem;
73
+ --size-field: 0.125rem;
74
+ --border: 1px;
75
+ --depth: 0.8;
76
+ --noise: 0.6;
77
+ }
@@ -1,38 +1,26 @@
1
- /**
2
- * Ocean Theme - Dark Mode
3
- * A deep, calming dark theme inspired by ocean depths
4
- * Uses OKLCH format: "oklch(L% C H)"
5
- */
1
+ /* GENERATED — DO NOT EDIT */
2
+ /* Source: tokens/ocean.yaml */
3
+ /* Generator: duskmoon-codegen v2.0.0 */
6
4
 
7
5
  [data-theme="ocean"] {
8
6
  color-scheme: dark;
9
-
10
- /* ============================================
11
- * BRAND COLORS
12
- * ============================================ */
13
-
14
- /* Primary Color Family - Deep Cyan */
15
7
  --color-primary: oklch(72% 0.12 210);
16
8
  --color-primary-content: oklch(15% 0.02 210);
17
9
  --color-primary-container: oklch(30% 0.08 210);
18
10
  --color-on-primary-container: oklch(90% 0.04 210);
19
-
20
- /* Secondary Color Family - Aquamarine */
21
11
  --color-secondary: oklch(75% 0.10 175);
22
12
  --color-secondary-content: oklch(15% 0.02 175);
23
13
  --color-secondary-container: oklch(28% 0.06 175);
24
14
  --color-on-secondary-container: oklch(90% 0.04 175);
25
-
26
- /* Tertiary Color Family - Lavender */
27
15
  --color-tertiary: oklch(72% 0.10 280);
28
16
  --color-tertiary-content: oklch(15% 0.02 280);
29
17
  --color-tertiary-container: oklch(28% 0.06 280);
30
18
  --color-on-tertiary-container: oklch(90% 0.04 280);
31
-
32
- /* ============================================
33
- * SURFACE COLORS
34
- * ============================================ */
35
-
19
+ --color-accent: oklch(70% 0.12 190);
20
+ --color-accent-content: oklch(15% 0.03 190);
21
+ --color-neutral: oklch(90% 0.01 210);
22
+ --color-neutral-content: oklch(16% 0.02 220);
23
+ --color-neutral-variant: oklch(50% 0.02 220);
36
24
  --color-surface: oklch(16% 0.02 220);
37
25
  --color-surface-dim: oklch(10% 0.015 220);
38
26
  --color-surface-bright: oklch(24% 0.025 220);
@@ -41,79 +29,43 @@
41
29
  --color-surface-container: oklch(16% 0.02 220);
42
30
  --color-surface-container-high: oklch(20% 0.022 220);
43
31
  --color-surface-container-highest: oklch(24% 0.025 220);
32
+ --color-surface-variant: oklch(22% 0.025 220);
44
33
  --color-on-surface: oklch(90% 0.01 210);
45
34
  --color-on-surface-variant: oklch(70% 0.015 210);
46
-
47
- /* ============================================
48
- * SEMANTIC COLORS
49
- * ============================================ */
50
-
51
- /* Info - Light Blue */
35
+ --color-base-100: oklch(16% 0.02 220);
36
+ --color-base-200: oklch(14% 0.015 220);
37
+ --color-base-300: oklch(10% 0.01 220);
38
+ --color-base-400: oklch(30% 0.02 220);
39
+ --color-base-500: oklch(40% 0.02 220);
40
+ --color-base-600: oklch(55% 0.015 220);
41
+ --color-base-700: oklch(70% 0.01 220);
42
+ --color-base-800: oklch(82% 0.01 220);
43
+ --color-base-900: oklch(92% 0.005 220);
44
+ --color-base-content: oklch(90% 0.01 210);
45
+ --color-outline: oklch(45% 0.02 220);
46
+ --color-outline-variant: oklch(32% 0.015 220);
47
+ --color-inverse-surface: oklch(90% 0.01 210);
48
+ --color-inverse-on-surface: oklch(16% 0.02 220);
49
+ --color-inverse-primary: oklch(45% 0.12 210);
50
+ --color-shadow: oklch(0% 0 0);
51
+ --color-scrim: oklch(0% 0 0 / 60%);
52
52
  --color-info: oklch(70% 0.12 230);
53
53
  --color-info-content: oklch(15% 0.03 230);
54
54
  --color-info-container: oklch(28% 0.06 230);
55
55
  --color-on-info-container: oklch(88% 0.04 230);
56
-
57
- /* Success - Sea Green */
58
56
  --color-success: oklch(72% 0.15 155);
59
57
  --color-success-content: oklch(15% 0.03 155);
60
58
  --color-success-container: oklch(28% 0.06 155);
61
59
  --color-on-success-container: oklch(88% 0.04 155);
62
-
63
- /* Warning - Sandy Gold */
64
60
  --color-warning: oklch(75% 0.14 75);
65
61
  --color-warning-content: oklch(18% 0.04 75);
66
62
  --color-warning-container: oklch(30% 0.06 75);
67
63
  --color-on-warning-container: oklch(88% 0.05 75);
68
-
69
- /* Error - Coral Red */
70
64
  --color-error: oklch(70% 0.16 20);
71
65
  --color-error-content: oklch(15% 0.03 20);
72
66
  --color-error-container: oklch(28% 0.06 20);
73
67
  --color-on-error-container: oklch(88% 0.05 20);
74
68
 
75
- /* ============================================
76
- * NEUTRAL COLORS (Base Scale)
77
- * ============================================ */
78
-
79
- --color-base-100: oklch(16% 0.02 220);
80
- --color-base-200: oklch(14% 0.015 220);
81
- --color-base-300: oklch(10% 0.01 220);
82
- --color-base-400: oklch(30% 0.02 220);
83
- --color-base-500: oklch(40% 0.02 220);
84
- --color-base-600: oklch(55% 0.015 220);
85
- --color-base-700: oklch(70% 0.01 220);
86
- --color-base-800: oklch(82% 0.01 220);
87
- --color-base-900: oklch(92% 0.005 220);
88
- --color-base-content: oklch(90% 0.01 210);
89
-
90
- /* ============================================
91
- * OUTLINE COLORS
92
- * ============================================ */
93
-
94
- --color-outline: oklch(45% 0.02 220);
95
- --color-outline-variant: oklch(32% 0.015 220);
96
-
97
- /* ============================================
98
- * ACCENT COLORS
99
- * ============================================ */
100
-
101
- --color-accent: oklch(70% 0.12 190);
102
- --color-accent-content: oklch(15% 0.03 190);
103
-
104
- /* ============================================
105
- * NEUTRAL COLORS
106
- * ============================================ */
107
-
108
- --color-neutral: oklch(90% 0.01 210);
109
- --color-neutral-content: oklch(16% 0.02 220);
110
- --color-neutral-variant: oklch(50% 0.02 220);
111
-
112
- /* ============================================
113
- * SHAPE & DEPTH
114
- * ============================================ */
115
-
116
- /* Ocean: smooth, flowing, generous curves */
117
69
  --radius-selector: 0.25rem;
118
70
  --radius-field: 0.75rem;
119
71
  --radius-box: 1.5rem;
@@ -122,33 +74,4 @@
122
74
  --border: 1px;
123
75
  --depth: 0.7;
124
76
  --noise: 0.3;
125
-
126
- /* ============================================
127
- * SURFACE VARIANT
128
- * ============================================ */
129
-
130
- --color-surface-variant: oklch(22% 0.025 220);
131
-
132
- /* ============================================
133
- * INVERSE COLORS
134
- * ============================================ */
135
-
136
- --color-inverse-surface: oklch(90% 0.01 210);
137
- --color-inverse-on-surface: oklch(16% 0.02 220);
138
- --color-inverse-primary: oklch(45% 0.12 210);
139
-
140
- /* ============================================
141
- * SHADOW & SCRIM
142
- * ============================================ */
143
-
144
- --color-shadow: oklch(0% 0 0);
145
- --color-scrim: oklch(0% 0 0 / 60%);
146
-
147
- /* Dark-mode shadows: stronger opacity for depth on dark surfaces */
148
- --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.15);
149
- --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.25);
150
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.25);
151
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
152
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
153
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
154
77
  }
@@ -0,0 +1,36 @@
1
+ /* GENERATED — DO NOT EDIT */
2
+ /* Source: tokens/_spacing.yaml */
3
+ /* Generator: duskmoon-codegen v2.0.0 */
4
+
5
+ :root {
6
+ --spacing-0: 0px;
7
+ --spacing-1: 4px;
8
+ --spacing-2: 8px;
9
+ --spacing-3: 12px;
10
+ --spacing-4: 16px;
11
+ --spacing-5: 20px;
12
+ --spacing-6: 24px;
13
+ --spacing-7: 28px;
14
+ --spacing-8: 32px;
15
+ --spacing-10: 40px;
16
+ --spacing-12: 48px;
17
+ --spacing-16: 64px;
18
+ --spacing-20: 80px;
19
+ --spacing-24: 96px;
20
+
21
+ --radius-none: 0px;
22
+ --radius-xs: 4px;
23
+ --radius-sm: 8px;
24
+ --radius-md: 12px;
25
+ --radius-lg: 16px;
26
+ --radius-xl: 20px;
27
+ --radius-2xl: 28px;
28
+ --radius-full: 9999px;
29
+
30
+ --elevation-level0: 0px;
31
+ --elevation-level1: 1px;
32
+ --elevation-level2: 3px;
33
+ --elevation-level3: 6px;
34
+ --elevation-level4: 8px;
35
+ --elevation-level5: 12px;
36
+ }
@@ -1,38 +1,26 @@
1
- /**
2
- * Sunset Theme - Light Mode
3
- * A warm, vibrant theme inspired by golden hour and dusk skies
4
- * Uses OKLCH format: "oklch(L% C H)"
5
- */
1
+ /* GENERATED — DO NOT EDIT */
2
+ /* Source: tokens/sunset.yaml */
3
+ /* Generator: duskmoon-codegen v2.0.0 */
6
4
 
7
5
  [data-theme="sunset"] {
8
6
  color-scheme: light;
9
-
10
- /* ============================================
11
- * BRAND COLORS
12
- * ============================================ */
13
-
14
- /* Primary Color Family - Burnt Orange */
15
7
  --color-primary: oklch(58% 0.18 35);
16
8
  --color-primary-content: oklch(98% 0.01 35);
17
9
  --color-primary-container: oklch(92% 0.04 35);
18
10
  --color-on-primary-container: oklch(25% 0.07 35);
19
-
20
- /* Secondary Color Family - Rose */
21
11
  --color-secondary: oklch(58% 0.15 350);
22
12
  --color-secondary-content: oklch(98% 0.01 350);
23
13
  --color-secondary-container: oklch(92% 0.04 350);
24
14
  --color-on-secondary-container: oklch(25% 0.06 350);
25
-
26
- /* Tertiary Color Family - Golden */
27
15
  --color-tertiary: oklch(65% 0.14 75);
28
16
  --color-tertiary-content: oklch(18% 0.04 75);
29
17
  --color-tertiary-container: oklch(93% 0.04 75);
30
18
  --color-on-tertiary-container: oklch(28% 0.06 75);
31
-
32
- /* ============================================
33
- * SURFACE COLORS
34
- * ============================================ */
35
-
19
+ --color-accent: oklch(62% 0.14 310);
20
+ --color-accent-content: oklch(98% 0.01 310);
21
+ --color-neutral: oklch(14% 0.01 30);
22
+ --color-neutral-content: oklch(92% 0.01 50);
23
+ --color-neutral-variant: oklch(48% 0.015 40);
36
24
  --color-surface: oklch(99% 0.008 50);
37
25
  --color-surface-dim: oklch(95% 0.012 50);
38
26
  --color-surface-bright: oklch(100% 0 0);
@@ -41,79 +29,43 @@
41
29
  --color-surface-container: oklch(96% 0.012 50);
42
30
  --color-surface-container-high: oklch(94% 0.015 50);
43
31
  --color-surface-container-highest: oklch(92% 0.018 50);
32
+ --color-surface-variant: oklch(93% 0.02 50);
44
33
  --color-on-surface: oklch(22% 0.02 30);
45
34
  --color-on-surface-variant: oklch(42% 0.02 30);
46
-
47
- /* ============================================
48
- * SEMANTIC COLORS
49
- * ============================================ */
50
-
51
- /* Info - Dusty Blue */
35
+ --color-base-100: oklch(99% 0.008 50);
36
+ --color-base-200: oklch(92% 0.012 50);
37
+ --color-base-300: oklch(80% 0.01 50);
38
+ --color-base-400: oklch(60% 0.01 50);
39
+ --color-base-500: oklch(48% 0.01 50);
40
+ --color-base-600: oklch(38% 0.008 50);
41
+ --color-base-700: oklch(28% 0.008 50);
42
+ --color-base-800: oklch(20% 0.005 50);
43
+ --color-base-900: oklch(14% 0.003 50);
44
+ --color-base-content: oklch(14% 0.01 30);
45
+ --color-outline: oklch(60% 0.015 40);
46
+ --color-outline-variant: oklch(80% 0.01 40);
47
+ --color-inverse-surface: oklch(22% 0.02 30);
48
+ --color-inverse-on-surface: oklch(95% 0.01 50);
49
+ --color-inverse-primary: oklch(75% 0.14 35);
50
+ --color-shadow: oklch(0% 0 0);
51
+ --color-scrim: oklch(0% 0 0 / 45%);
52
52
  --color-info: oklch(50% 0.10 245);
53
53
  --color-info-content: oklch(98% 0.01 245);
54
54
  --color-info-container: oklch(94% 0.03 245);
55
55
  --color-on-info-container: oklch(28% 0.05 245);
56
-
57
- /* Success - Olive Green */
58
56
  --color-success: oklch(58% 0.14 140);
59
57
  --color-success-content: oklch(98% 0.01 140);
60
58
  --color-success-container: oklch(93% 0.04 140);
61
59
  --color-on-success-container: oklch(26% 0.06 140);
62
-
63
- /* Warning - Deep Amber */
64
60
  --color-warning: oklch(65% 0.18 60);
65
61
  --color-warning-content: oklch(18% 0.05 60);
66
62
  --color-warning-container: oklch(93% 0.05 60);
67
63
  --color-on-warning-container: oklch(32% 0.08 60);
68
-
69
- /* Error - Crimson */
70
64
  --color-error: oklch(52% 0.20 20);
71
65
  --color-error-content: oklch(98% 0.01 20);
72
66
  --color-error-container: oklch(93% 0.04 20);
73
67
  --color-on-error-container: oklch(28% 0.08 20);
74
68
 
75
- /* ============================================
76
- * NEUTRAL COLORS (Base Scale)
77
- * ============================================ */
78
-
79
- --color-base-100: oklch(99% 0.008 50);
80
- --color-base-200: oklch(92% 0.012 50);
81
- --color-base-300: oklch(80% 0.01 50);
82
- --color-base-400: oklch(60% 0.01 50);
83
- --color-base-500: oklch(48% 0.01 50);
84
- --color-base-600: oklch(38% 0.008 50);
85
- --color-base-700: oklch(28% 0.008 50);
86
- --color-base-800: oklch(20% 0.005 50);
87
- --color-base-900: oklch(14% 0.003 50);
88
- --color-base-content: oklch(14% 0.01 30);
89
-
90
- /* ============================================
91
- * OUTLINE COLORS
92
- * ============================================ */
93
-
94
- --color-outline: oklch(60% 0.015 40);
95
- --color-outline-variant: oklch(80% 0.01 40);
96
-
97
- /* ============================================
98
- * ACCENT COLORS
99
- * ============================================ */
100
-
101
- --color-accent: oklch(62% 0.14 310);
102
- --color-accent-content: oklch(98% 0.01 310);
103
-
104
- /* ============================================
105
- * NEUTRAL COLORS
106
- * ============================================ */
107
-
108
- --color-neutral: oklch(14% 0.01 30);
109
- --color-neutral-content: oklch(92% 0.01 50);
110
- --color-neutral-variant: oklch(48% 0.015 40);
111
-
112
- /* ============================================
113
- * SHAPE & DEPTH
114
- * ============================================ */
115
-
116
- /* Sunset: warm, soft, organic feel */
117
69
  --radius-selector: 0.1875rem;
118
70
  --radius-field: 0.5rem;
119
71
  --radius-box: 1.25rem;
@@ -122,25 +74,4 @@
122
74
  --border: 0.75px;
123
75
  --depth: 0.9;
124
76
  --noise: 0.7;
125
-
126
- /* ============================================
127
- * SURFACE VARIANT
128
- * ============================================ */
129
-
130
- --color-surface-variant: oklch(93% 0.02 50);
131
-
132
- /* ============================================
133
- * INVERSE COLORS
134
- * ============================================ */
135
-
136
- --color-inverse-surface: oklch(22% 0.02 30);
137
- --color-inverse-on-surface: oklch(95% 0.01 50);
138
- --color-inverse-primary: oklch(75% 0.14 35);
139
-
140
- /* ============================================
141
- * SHADOW & SCRIM
142
- * ============================================ */
143
-
144
- --color-shadow: oklch(0% 0 0);
145
- --color-scrim: oklch(0% 0 0 / 45%);
146
77
  }