@moduix/react 2.4.0 → 2.5.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 (28) hide show
  1. package/dist/components/angle-slider/AngleSlider_module.css +2 -2
  2. package/dist/components/sidebar/Sidebar.d.ts +0 -1
  3. package/dist/components/sidebar/Sidebar.js +9 -5
  4. package/dist/components/sidebar/Sidebar_module.css +20 -0
  5. package/dist/components/toc/Toc.d.ts +23 -0
  6. package/dist/components/toc/Toc.js +144 -0
  7. package/dist/components/toc/Toc.module.js +13 -0
  8. package/dist/components/toc/Toc_module.css +184 -0
  9. package/dist/components/toc/index.d.ts +1 -0
  10. package/dist/components/toc/index.js +1 -0
  11. package/dist/presets/contrast.css +63 -129
  12. package/dist/presets/dense.css +63 -129
  13. package/dist/presets/soft.css +62 -128
  14. package/dist/styles/animations.css +5 -7
  15. package/dist/styles/borders.css +2 -2
  16. package/dist/styles/colors.css +79 -163
  17. package/dist/styles/opacity.css +4 -5
  18. package/dist/styles/radius.css +6 -6
  19. package/dist/styles/reset.css +215 -104
  20. package/dist/styles/shadows.css +1 -2
  21. package/dist/styles/sizing.css +5 -2
  22. package/dist/styles/spacing.css +9 -7
  23. package/dist/styles/style.css +12 -12
  24. package/dist/styles/transforms.css +3 -4
  25. package/dist/styles/transitions.css +19 -15
  26. package/dist/styles/typography.css +16 -6
  27. package/dist/styles/z-index.css +2 -2
  28. package/package.json +5 -1
package/dist/presets/contrast.css CHANGED
@@ -1,131 +1,65 @@
1
- [data-moduix-theme="contrast"] {
2
- --moduix-background: #fdfdfe;
3
- --moduix-foreground: #050b11;
4
- --moduix-card: #fff;
5
- --moduix-card-foreground: #050b11;
6
- --moduix-popover: #fff;
7
- --moduix-popover-foreground: #050b11;
8
- --moduix-primary: #0054b6;
9
- --moduix-primary-foreground: #fff;
10
- --moduix-secondary: #e5ecf3;
11
- --moduix-secondary-foreground: #09121c;
12
- --moduix-muted: #e3e8ee;
13
- --moduix-muted-foreground: #3b4653;
14
- --moduix-accent: #c9e2f7;
15
- --moduix-accent-foreground: #010e1e;
16
- --moduix-border: #99a6b4;
17
- --moduix-input: #77889b;
18
- --moduix-ring: #0061bf;
19
- --moduix-overlay: #01030661;
20
- --moduix-overlay-foreground: #0103061f;
21
- --moduix-sidebar: #f1f4f7;
22
- --moduix-sidebar-foreground: #050b11;
23
- --moduix-sidebar-primary: #0054b6;
24
- --moduix-sidebar-primary-foreground: #fff;
25
- --moduix-sidebar-accent: #c9e2f7;
26
- --moduix-sidebar-accent-foreground: #010e1e;
27
- --moduix-sidebar-border: #99a6b4;
28
- --moduix-sidebar-ring: #0061bf;
29
- --moduix-radius: .375rem;
30
- --moduix-shadow-sm: 0 1px 2px #0f172a1a;
31
- --moduix-shadow-md: 0 4px 10px #0f172a24;
32
- --moduix-shadow-lg: 0 16px 30px #0f172a2e;
33
- }
1
+ [data-moduix-theme='contrast'] {
2
+ --moduix-background: oklch(0.995 0.001 250);
3
+ --moduix-foreground: oklch(0.145 0.018 250);
4
+ --moduix-card: oklch(1 0 0);
5
+ --moduix-card-foreground: oklch(0.145 0.018 250);
6
+ --moduix-popover: oklch(1 0 0);
7
+ --moduix-popover-foreground: oklch(0.145 0.018 250);
8
+ --moduix-primary: oklch(0.46 0.2 255);
9
+ --moduix-primary-foreground: oklch(1 0 0);
10
+ --moduix-secondary: oklch(0.94 0.012 250);
11
+ --moduix-secondary-foreground: oklch(0.18 0.025 250);
12
+ --moduix-muted: oklch(0.93 0.01 250);
13
+ --moduix-muted-foreground: oklch(0.39 0.026 250);
14
+ --moduix-accent: oklch(0.9 0.04 245);
15
+ --moduix-accent-foreground: oklch(0.16 0.04 250);
16
+ --moduix-border: oklch(0.72 0.025 250);
17
+ --moduix-input: oklch(0.62 0.035 250);
18
+ --moduix-ring: oklch(0.5 0.19 255);
19
+ --moduix-overlay: oklch(0.09 0.018 250 / 0.38);
20
+ --moduix-overlay-foreground: oklch(0.09 0.018 250 / 0.12);
21
+ --moduix-sidebar: oklch(0.965 0.005 250);
22
+ --moduix-sidebar-foreground: oklch(0.145 0.018 250);
23
+ --moduix-sidebar-primary: oklch(0.46 0.2 255);
24
+ --moduix-sidebar-primary-foreground: oklch(1 0 0);
25
+ --moduix-sidebar-accent: oklch(0.9 0.04 245);
26
+ --moduix-sidebar-accent-foreground: oklch(0.16 0.04 250);
27
+ --moduix-sidebar-border: oklch(0.72 0.025 250);
28
+ --moduix-sidebar-ring: oklch(0.5 0.19 255);
29
+ --moduix-radius: 0.375rem;
30
+ --moduix-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.1);
31
+ --moduix-shadow-md: 0 4px 10px rgb(15 23 42 / 0.14);
32
+ --moduix-shadow-lg: 0 16px 30px rgb(15 23 42 / 0.18);
34
33
 
35
- @supports (color: lab(0% 0 0)) {
36
- [data-moduix-theme="contrast"] {
37
- --moduix-background: lab(99.4193% -.111878 -.358546);
38
- --moduix-foreground: lab(2.73044% -.638902 -3.71368);
39
- --moduix-card: lab(100% 0 0);
40
- --moduix-card-foreground: lab(2.73044% -.638902 -3.71368);
41
- --moduix-popover: lab(100% 0 0);
42
- --moduix-popover-foreground: lab(2.73044% -.638902 -3.71368);
43
- --moduix-primary: lab(35.26% 14.138 -68.2948);
44
- --moduix-primary-foreground: lab(100% 0 0);
45
- --moduix-secondary: lab(93.0295% -1.30191 -4.27971);
46
- --moduix-secondary-foreground: lab(5.21333% -1.27424 -7.86241);
47
- --moduix-muted: lab(91.8716% -1.09071 -3.5696);
48
- --moduix-muted-foreground: lab(29.1955% -2.40213 -9.08356);
49
- --moduix-accent: lab(88.3951% -5.08818 -13.5993);
50
- --moduix-accent-foreground: lab(3.58405% -.692964 -11.3385);
51
- --moduix-border: lab(67.4898% -2.55167 -8.83513);
52
- --moduix-input: lab(55.8658% -3.3434 -12.2703);
53
- --moduix-ring: lab(40.2556% 9.34972 -64.9591);
54
- --moduix-overlay: lab(.645069% -.158422 -1.56854 / .38);
55
- --moduix-overlay-foreground: lab(.645069% -.158422 -1.56854 / .12);
56
- --moduix-sidebar: lab(95.9362% -.55337 -1.78927);
57
- --moduix-sidebar-foreground: lab(2.73044% -.638902 -3.71368);
58
- --moduix-sidebar-primary: lab(35.26% 14.138 -68.2948);
59
- --moduix-sidebar-primary-foreground: lab(100% 0 0);
60
- --moduix-sidebar-accent: lab(88.3951% -5.08818 -13.5993);
61
- --moduix-sidebar-accent-foreground: lab(3.58405% -.692964 -11.3385);
62
- --moduix-sidebar-border: lab(67.4898% -2.55167 -8.83513);
63
- --moduix-sidebar-ring: lab(40.2556% 9.34972 -64.9591);
34
+ &[data-moduix-color-scheme='dark'],
35
+ [data-moduix-color-scheme='dark'] {
36
+ color-scheme: dark;
37
+ --moduix-background: oklch(0.11 0.018 250);
38
+ --moduix-foreground: oklch(0.985 0.004 250);
39
+ --moduix-card: oklch(0.155 0.022 250);
40
+ --moduix-card-foreground: oklch(0.985 0.004 250);
41
+ --moduix-popover: oklch(0.155 0.022 250);
42
+ --moduix-popover-foreground: oklch(0.985 0.004 250);
43
+ --moduix-primary: oklch(0.76 0.13 255);
44
+ --moduix-primary-foreground: oklch(0.12 0.02 250);
45
+ --moduix-secondary: oklch(0.24 0.026 250);
46
+ --moduix-secondary-foreground: oklch(0.985 0.004 250);
47
+ --moduix-muted: oklch(0.225 0.024 250);
48
+ --moduix-muted-foreground: oklch(0.76 0.018 250);
49
+ --moduix-accent: oklch(0.3 0.06 250);
50
+ --moduix-accent-foreground: oklch(0.985 0.004 250);
51
+ --moduix-border: oklch(0.8 0.025 250 / 0.34);
52
+ --moduix-input: oklch(0.82 0.025 250 / 0.42);
53
+ --moduix-ring: oklch(0.74 0.13 255);
54
+ --moduix-overlay: oklch(0.04 0.014 250 / 0.84);
55
+ --moduix-overlay-foreground: oklch(0.985 0.004 250 / 0.12);
56
+ --moduix-sidebar: oklch(0.13 0.02 250);
57
+ --moduix-sidebar-foreground: oklch(0.985 0.004 250);
58
+ --moduix-sidebar-primary: oklch(0.76 0.13 255);
59
+ --moduix-sidebar-primary-foreground: oklch(0.12 0.02 250);
60
+ --moduix-sidebar-accent: oklch(0.3 0.06 250);
61
+ --moduix-sidebar-accent-foreground: oklch(0.985 0.004 250);
62
+ --moduix-sidebar-border: oklch(0.8 0.025 250 / 0.34);
63
+ --moduix-sidebar-ring: oklch(0.74 0.13 255);
64
64
  }
65
- }
66
-
67
- [data-moduix-theme="contrast"][data-moduix-color-scheme="dark"], [data-moduix-theme="contrast"] [data-moduix-color-scheme="dark"] {
68
- --lightningcss-light: ;
69
- --lightningcss-dark: initial;
70
- color-scheme: dark;
71
- --moduix-background: #02050a;
72
- --moduix-foreground: #f8fafd;
73
- --moduix-card: #060d15;
74
- --moduix-card-foreground: #f8fafd;
75
- --moduix-popover: #060d15;
76
- --moduix-popover-foreground: #f8fafd;
77
- --moduix-primary: #79b4ff;
78
- --moduix-primary-foreground: #02060d;
79
- --moduix-secondary: #16202b;
80
- --moduix-secondary-foreground: #f8fafd;
81
- --moduix-muted: #131d27;
82
- --moduix-muted-foreground: #a9b2bc;
83
- --moduix-accent: #142f4b;
84
- --moduix-accent-foreground: #f8fafd;
85
- --moduix-border: #b2bfce57;
86
- --moduix-input: #b8c6d46b;
87
- --moduix-ring: #70adfb;
88
- --moduix-overlay: #000001d6;
89
- --moduix-overlay-foreground: #f8fafd1f;
90
- --moduix-sidebar: #03080f;
91
- --moduix-sidebar-foreground: #f8fafd;
92
- --moduix-sidebar-primary: #79b4ff;
93
- --moduix-sidebar-primary-foreground: #02060d;
94
- --moduix-sidebar-accent: #142f4b;
95
- --moduix-sidebar-accent-foreground: #f8fafd;
96
- --moduix-sidebar-border: #b2bfce57;
97
- --moduix-sidebar-ring: #70adfb;
98
- }
99
-
100
- @supports (color: lab(0% 0 0)) {
101
- [data-moduix-theme="contrast"][data-moduix-color-scheme="dark"], [data-moduix-theme="contrast"] [data-moduix-color-scheme="dark"] {
102
- --moduix-background: lab(1.18544% -.300132 -2.243);
103
- --moduix-foreground: lab(98.257% -.443965 -1.43218);
104
- --moduix-card: lab(3.32744% -.818849 -5.30129);
105
- --moduix-card-foreground: lab(98.257% -.443965 -1.43218);
106
- --moduix-popover: lab(3.32744% -.818849 -5.30129);
107
- --moduix-popover-foreground: lab(98.257% -.443965 -1.43218);
108
- --moduix-primary: lab(71.5339% -3.73271 -45.4193);
109
- --moduix-primary-foreground: lab(1.53827% -.389941 -2.97685);
110
- --moduix-secondary: lab(11.7779% -2.05918 -8.97185);
111
- --moduix-secondary-foreground: lab(98.257% -.443965 -1.43218);
112
- --moduix-muted: lab(10.0434% -1.91372 -8.2854);
113
- --moduix-muted-foreground: lab(72.1413% -1.89573 -6.38967);
114
- --moduix-accent: lab(18.5617% -2.88492 -20.3069);
115
- --moduix-accent-foreground: lab(98.257% -.443965 -1.43218);
116
- --moduix-border: lab(76.7711% -2.57739 -8.84726 / .34);
117
- --moduix-input: lab(79.0914% -2.583 -8.84994 / .42);
118
- --moduix-ring: lab(69.2026% -3.5221 -45.3802);
119
- --moduix-overlay: lab(.0542831% .00392646 -.286341 / .84);
120
- --moduix-overlay-foreground: lab(98.257% -.443965 -1.43218 / .12);
121
- --moduix-sidebar: lab(1.95972% -.491969 -3.43974);
122
- --moduix-sidebar-foreground: lab(98.257% -.443965 -1.43218);
123
- --moduix-sidebar-primary: lab(71.5339% -3.73271 -45.4193);
124
- --moduix-sidebar-primary-foreground: lab(1.53827% -.389941 -2.97685);
125
- --moduix-sidebar-accent: lab(18.5617% -2.88492 -20.3069);
126
- --moduix-sidebar-accent-foreground: lab(98.257% -.443965 -1.43218);
127
- --moduix-sidebar-border: lab(76.7711% -2.57739 -8.84726 / .34);
128
- --moduix-sidebar-ring: lab(69.2026% -3.5221 -45.3802);
129
- }
130
- }
131
-
65
+ }
package/dist/presets/dense.css CHANGED
@@ -1,32 +1,32 @@
1
- [data-moduix-theme="dense"] {
2
- --moduix-background: #f8fafd;
3
- --moduix-foreground: #0f1319;
4
- --moduix-card: #fefeff;
5
- --moduix-card-foreground: #0f1319;
6
- --moduix-popover: #fefeff;
7
- --moduix-popover-foreground: #0f1319;
8
- --moduix-primary: #005bb4;
9
- --moduix-primary-foreground: #fbfcfd;
10
- --moduix-secondary: #edf2f7;
11
- --moduix-secondary-foreground: #192029;
12
- --moduix-muted: #eceff5;
13
- --moduix-muted-foreground: #535c66;
14
- --moduix-accent: #dee7f4;
15
- --moduix-accent-foreground: #131b26;
16
- --moduix-border: #d1d8e1;
17
- --moduix-input: #c3cbd6;
18
- --moduix-ring: #3475c4;
19
- --moduix-overlay: #080e163d;
20
- --moduix-overlay-foreground: #080e1614;
21
- --moduix-sidebar: #f3f6fb;
22
- --moduix-sidebar-foreground: #0f1319;
23
- --moduix-sidebar-primary: #005bb4;
24
- --moduix-sidebar-primary-foreground: #fbfcfd;
25
- --moduix-sidebar-accent: #dee7f4;
26
- --moduix-sidebar-accent-foreground: #131b26;
27
- --moduix-sidebar-border: #d1d8e1;
28
- --moduix-sidebar-ring: #3475c4;
29
- --moduix-radius: .45rem;
1
+ [data-moduix-theme='dense'] {
2
+ --moduix-background: oklch(0.985 0.004 255);
3
+ --moduix-foreground: oklch(0.185 0.014 255);
4
+ --moduix-card: oklch(0.998 0.002 255);
5
+ --moduix-card-foreground: oklch(0.185 0.014 255);
6
+ --moduix-popover: oklch(0.998 0.002 255);
7
+ --moduix-popover-foreground: oklch(0.185 0.014 255);
8
+ --moduix-primary: oklch(0.48 0.16 255);
9
+ --moduix-primary-foreground: oklch(0.99 0.002 255);
10
+ --moduix-secondary: oklch(0.958 0.009 255);
11
+ --moduix-secondary-foreground: oklch(0.24 0.02 255);
12
+ --moduix-muted: oklch(0.952 0.008 255);
13
+ --moduix-muted-foreground: oklch(0.47 0.02 255);
14
+ --moduix-accent: oklch(0.925 0.02 255);
15
+ --moduix-accent-foreground: oklch(0.22 0.025 255);
16
+ --moduix-border: oklch(0.88 0.015 255);
17
+ --moduix-input: oklch(0.84 0.018 255);
18
+ --moduix-ring: oklch(0.56 0.14 255);
19
+ --moduix-overlay: oklch(0.16 0.02 255 / 0.24);
20
+ --moduix-overlay-foreground: oklch(0.16 0.02 255 / 0.08);
21
+ --moduix-sidebar: oklch(0.972 0.007 255);
22
+ --moduix-sidebar-foreground: oklch(0.185 0.014 255);
23
+ --moduix-sidebar-primary: oklch(0.48 0.16 255);
24
+ --moduix-sidebar-primary-foreground: oklch(0.99 0.002 255);
25
+ --moduix-sidebar-accent: oklch(0.925 0.02 255);
26
+ --moduix-sidebar-accent-foreground: oklch(0.22 0.025 255);
27
+ --moduix-sidebar-border: oklch(0.88 0.015 255);
28
+ --moduix-sidebar-ring: oklch(0.56 0.14 255);
29
+ --moduix-radius: 0.45rem;
30
30
  --moduix-spacing-1: 3px;
31
31
  --moduix-spacing-2: 6px;
32
32
  --moduix-spacing-3: 10px;
@@ -40,105 +40,39 @@
40
40
  --moduix-size-md: 34px;
41
41
  --moduix-size-lg: 38px;
42
42
  --moduix-size-xl: 44px;
43
- --moduix-shadow-sm: 0 1px 2px #0f172a14;
44
- --moduix-shadow-md: 0 3px 8px #0f172a1a;
45
- --moduix-shadow-lg: 0 12px 24px #0f172a1f;
46
- }
43
+ --moduix-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);
44
+ --moduix-shadow-md: 0 3px 8px rgb(15 23 42 / 0.1);
45
+ --moduix-shadow-lg: 0 12px 24px rgb(15 23 42 / 0.12);
47
46
 
48
- @supports (color: lab(0% 0 0)) {
49
- [data-moduix-theme="dense"] {
50
- --moduix-background: lab(98.2523% -.330776 -1.47091);
51
- --moduix-foreground: lab(5.68459% -.670359 -4.54568);
52
- --moduix-card: lab(99.7642% -.166655 -.736165);
53
- --moduix-card-foreground: lab(5.68459% -.670359 -4.54568);
54
- --moduix-popover: lab(99.7642% -.166655 -.736165);
55
- --moduix-popover-foreground: lab(5.68459% -.670359 -4.54568);
56
- --moduix-primary: lab(38.3807% 4.98325 -54.8273);
57
- --moduix-primary-foreground: lab(98.8362% -.166595 -.736153);
58
- --moduix-secondary: lab(95.1099% -.730038 -3.30147);
59
- --moduix-secondary-foreground: lab(11.7752% -1.1646 -7.13735);
60
- --moduix-muted: lab(94.416% -.65127 -2.93597);
61
- --moduix-muted-foreground: lab(38.4689% -1.42185 -7.23656);
62
- --moduix-accent: lab(91.2558% -1.54927 -7.29737);
63
- --moduix-accent-foreground: lab(9.42574% -1.20769 -8.84638);
64
- --moduix-border: lab(86.0479% -1.18256 -5.48376);
65
- --moduix-input: lab(81.4002% -1.39537 -6.56818);
66
- --moduix-ring: lab(48.0704% -.0410378 -48.3309);
67
- --moduix-overlay: lab(3.65259% -.521936 -5.17953 / .24);
68
- --moduix-overlay-foreground: lab(3.65259% -.521936 -5.17953 / .08);
69
- --moduix-sidebar: lab(96.7381% -.572383 -2.57038);
70
- --moduix-sidebar-foreground: lab(5.68459% -.670359 -4.54568);
71
- --moduix-sidebar-primary: lab(38.3807% 4.98325 -54.8273);
72
- --moduix-sidebar-primary-foreground: lab(98.8362% -.166595 -.736153);
73
- --moduix-sidebar-accent: lab(91.2558% -1.54927 -7.29737);
74
- --moduix-sidebar-accent-foreground: lab(9.42574% -1.20769 -8.84638);
75
- --moduix-sidebar-border: lab(86.0479% -1.18256 -5.48376);
76
- --moduix-sidebar-ring: lab(48.0704% -.0410378 -48.3309);
47
+ &[data-moduix-color-scheme='dark'],
48
+ [data-moduix-color-scheme='dark'] {
49
+ color-scheme: dark;
50
+ --moduix-background: oklch(0.16 0.014 255);
51
+ --moduix-foreground: oklch(0.97 0.003 255);
52
+ --moduix-card: oklch(0.205 0.016 255);
53
+ --moduix-card-foreground: oklch(0.97 0.003 255);
54
+ --moduix-popover: oklch(0.205 0.016 255);
55
+ --moduix-popover-foreground: oklch(0.97 0.003 255);
56
+ --moduix-primary: oklch(0.76 0.13 255);
57
+ --moduix-primary-foreground: oklch(0.17 0.018 255);
58
+ --moduix-secondary: oklch(0.255 0.018 255);
59
+ --moduix-secondary-foreground: oklch(0.97 0.003 255);
60
+ --moduix-muted: oklch(0.25 0.016 255);
61
+ --moduix-muted-foreground: oklch(0.71 0.018 255);
62
+ --moduix-accent: oklch(0.31 0.03 255);
63
+ --moduix-accent-foreground: oklch(0.97 0.003 255);
64
+ --moduix-border: oklch(0.72 0.02 255 / 0.25);
65
+ --moduix-input: oklch(0.76 0.02 255 / 0.32);
66
+ --moduix-ring: oklch(0.7 0.12 255);
67
+ --moduix-overlay: oklch(0.1 0.02 255 / 0.78);
68
+ --moduix-overlay-foreground: oklch(0.97 0.003 255 / 0.09);
69
+ --moduix-sidebar: oklch(0.19 0.016 255);
70
+ --moduix-sidebar-foreground: oklch(0.97 0.003 255);
71
+ --moduix-sidebar-primary: oklch(0.76 0.13 255);
72
+ --moduix-sidebar-primary-foreground: oklch(0.17 0.018 255);
73
+ --moduix-sidebar-accent: oklch(0.31 0.03 255);
74
+ --moduix-sidebar-accent-foreground: oklch(0.97 0.003 255);
75
+ --moduix-sidebar-border: oklch(0.72 0.02 255 / 0.25);
76
+ --moduix-sidebar-ring: oklch(0.7 0.12 255);
77
77
  }
78
- }
79
-
80
- [data-moduix-theme="dense"][data-moduix-color-scheme="dark"], [data-moduix-theme="dense"] [data-moduix-color-scheme="dark"] {
81
- --lightningcss-light: ;
82
- --lightningcss-dark: initial;
83
- color-scheme: dark;
84
- --moduix-background: #090e13;
85
- --moduix-foreground: #f4f5f7;
86
- --moduix-card: #12181e;
87
- --moduix-card-foreground: #f4f5f7;
88
- --moduix-popover: #12181e;
89
- --moduix-popover-foreground: #f4f5f7;
90
- --moduix-primary: #79b4ff;
91
- --moduix-primary-foreground: #0a1017;
92
- --moduix-secondary: #1d232c;
93
- --moduix-secondary-foreground: #f4f5f7;
94
- --moduix-muted: #1d2229;
95
- --moduix-muted-foreground: #9aa2ad;
96
- --moduix-accent: #26313f;
97
- --moduix-accent-foreground: #f4f5f7;
98
- --moduix-border: #9ca5b140;
99
- --moduix-input: #a9b2be52;
100
- --moduix-ring: #69a1e8;
101
- --moduix-overlay: #010309c7;
102
- --moduix-overlay-foreground: #f4f5f717;
103
- --moduix-sidebar: #0f141b;
104
- --moduix-sidebar-foreground: #f4f5f7;
105
- --moduix-sidebar-primary: #79b4ff;
106
- --moduix-sidebar-primary-foreground: #0a1017;
107
- --moduix-sidebar-accent: #26313f;
108
- --moduix-sidebar-accent-foreground: #f4f5f7;
109
- --moduix-sidebar-border: #9ca5b140;
110
- --moduix-sidebar-ring: #69a1e8;
111
- }
112
-
113
- @supports (color: lab(0% 0 0)) {
114
- [data-moduix-theme="dense"][data-moduix-color-scheme="dark"], [data-moduix-theme="dense"] [data-moduix-color-scheme="dark"] {
115
- --moduix-background: lab(3.67223% -.469178 -3.45765);
116
- --moduix-foreground: lab(96.5143% -.248939 -1.10372);
117
- --moduix-card: lab(7.73262% -.928633 -5.71392);
118
- --moduix-card-foreground: lab(96.5143% -.248939 -1.10372);
119
- --moduix-popover: lab(7.73262% -.928633 -5.71392);
120
- --moduix-popover-foreground: lab(96.5143% -.248939 -1.10372);
121
- --moduix-primary: lab(71.5339% -3.73271 -45.4193);
122
- --moduix-primary-foreground: lab(4.39388% -.60755 -5.13726);
123
- --moduix-secondary: lab(13.5256% -1.12166 -6.44931);
124
- --moduix-secondary-foreground: lab(96.5143% -.248939 -1.10372);
125
- --moduix-muted: lab(12.9534% -1.03039 -5.7452);
126
- --moduix-muted-foreground: lab(66.3191% -1.37413 -6.55738);
127
- --moduix-accent: lab(19.8558% -1.61602 -10.664);
128
- --moduix-accent-foreground: lab(96.5143% -.248939 -1.10372);
129
- --moduix-border: lab(67.4738% -1.51214 -7.27868 / .25);
130
- --moduix-input: lab(72.1142% -1.52099 -7.28307 / .32);
131
- --moduix-ring: lab(64.6212% -3.42974 -41.9226);
132
- --moduix-overlay: lab(.878456% -.0841022 -2.21904 / .78);
133
- --moduix-overlay-foreground: lab(96.5143% -.248939 -1.10372 / .09);
134
- --moduix-sidebar: lab(6.15187% -.770628 -5.42564);
135
- --moduix-sidebar-foreground: lab(96.5143% -.248939 -1.10372);
136
- --moduix-sidebar-primary: lab(71.5339% -3.73271 -45.4193);
137
- --moduix-sidebar-primary-foreground: lab(4.39388% -.60755 -5.13726);
138
- --moduix-sidebar-accent: lab(19.8558% -1.61602 -10.664);
139
- --moduix-sidebar-accent-foreground: lab(96.5143% -.248939 -1.10372);
140
- --moduix-sidebar-border: lab(67.4738% -1.51214 -7.27868 / .25);
141
- --moduix-sidebar-ring: lab(64.6212% -3.42974 -41.9226);
142
- }
143
- }
144
-
78
+ }
package/dist/presets/soft.css CHANGED
@@ -1,31 +1,31 @@
1
- [data-moduix-theme="soft"] {
2
- --moduix-background: #fef8ff;
3
- --moduix-foreground: #201824;
4
- --moduix-card: #fffeff;
5
- --moduix-card-foreground: #201824;
6
- --moduix-popover: #fffeff;
7
- --moduix-popover-foreground: #201824;
8
- --moduix-primary: #884bc0;
9
- --moduix-primary-foreground: #fdfbfd;
10
- --moduix-secondary: #f7edf9;
11
- --moduix-secondary-foreground: #34283d;
12
- --moduix-muted: #f3ebf5;
13
- --moduix-muted-foreground: #6b5d71;
14
- --moduix-accent: #efddf7;
15
- --moduix-accent-foreground: #31253f;
16
- --moduix-border: #dfd2e2;
17
- --moduix-input: #d4c5d7;
18
- --moduix-ring: #9868ca;
19
- --moduix-overlay: #20162738;
20
- --moduix-overlay-foreground: #20162714;
21
- --moduix-sidebar: #fbf4fd;
22
- --moduix-sidebar-foreground: #201824;
23
- --moduix-sidebar-primary: #884bc0;
24
- --moduix-sidebar-primary-foreground: #fdfbfd;
25
- --moduix-sidebar-accent: #efddf7;
26
- --moduix-sidebar-accent-foreground: #31253f;
27
- --moduix-sidebar-border: #dfd2e2;
28
- --moduix-sidebar-ring: #9868ca;
1
+ [data-moduix-theme='soft'] {
2
+ --moduix-background: oklch(0.985 0.012 320);
3
+ --moduix-foreground: oklch(0.225 0.024 315);
4
+ --moduix-card: oklch(0.998 0.004 320);
5
+ --moduix-card-foreground: oklch(0.225 0.024 315);
6
+ --moduix-popover: oklch(0.998 0.004 320);
7
+ --moduix-popover-foreground: oklch(0.225 0.024 315);
8
+ --moduix-primary: oklch(0.54 0.18 305);
9
+ --moduix-primary-foreground: oklch(0.99 0.004 320);
10
+ --moduix-secondary: oklch(0.958 0.018 320);
11
+ --moduix-secondary-foreground: oklch(0.3 0.04 310);
12
+ --moduix-muted: oklch(0.95 0.016 320);
13
+ --moduix-muted-foreground: oklch(0.5 0.035 315);
14
+ --moduix-accent: oklch(0.92 0.04 315);
15
+ --moduix-accent-foreground: oklch(0.29 0.05 305);
16
+ --moduix-border: oklch(0.88 0.025 320);
17
+ --moduix-input: oklch(0.84 0.03 320);
18
+ --moduix-ring: oklch(0.61 0.15 305);
19
+ --moduix-overlay: oklch(0.22 0.035 310 / 0.22);
20
+ --moduix-overlay-foreground: oklch(0.22 0.035 310 / 0.08);
21
+ --moduix-sidebar: oklch(0.975 0.014 320);
22
+ --moduix-sidebar-foreground: oklch(0.225 0.024 315);
23
+ --moduix-sidebar-primary: oklch(0.54 0.18 305);
24
+ --moduix-sidebar-primary-foreground: oklch(0.99 0.004 320);
25
+ --moduix-sidebar-accent: oklch(0.92 0.04 315);
26
+ --moduix-sidebar-accent-foreground: oklch(0.29 0.05 305);
27
+ --moduix-sidebar-border: oklch(0.88 0.025 320);
28
+ --moduix-sidebar-ring: oklch(0.61 0.15 305);
29
29
  --moduix-radius: 1rem;
30
30
  --moduix-spacing-2: 9px;
31
31
  --moduix-spacing-3: 14px;
@@ -39,105 +39,39 @@
39
39
  --moduix-size-md: 40px;
40
40
  --moduix-size-lg: 44px;
41
41
  --moduix-size-xl: 52px;
42
- --moduix-shadow-sm: 0 2px 6px #61236b14;
43
- --moduix-shadow-md: 0 8px 18px #61236b1f;
44
- --moduix-shadow-lg: 0 18px 38px #61236b29;
45
- }
42
+ --moduix-shadow-sm: 0 2px 6px rgb(97 35 107 / 0.08);
43
+ --moduix-shadow-md: 0 8px 18px rgb(97 35 107 / 0.12);
44
+ --moduix-shadow-lg: 0 18px 38px rgb(97 35 107 / 0.16);
46
45
 
47
- @supports (color: lab(0% 0 0)) {
48
- [data-moduix-theme="soft"] {
49
- --moduix-background: lab(98.1026% 3.14552 -2.8966);
50
- --moduix-foreground: lab(9.77332% 5.96304 -6.24471);
51
- --moduix-card: lab(99.7158% 1.04758 -.967503);
52
- --moduix-card-foreground: lab(9.77332% 5.96304 -6.24471);
53
- --moduix-popover: lab(99.7158% 1.04758 -.967503);
54
- --moduix-popover-foreground: lab(9.77332% 5.96304 -6.24471);
55
- --moduix-primary: lab(43.7253% 43.1212 -52.6342);
56
- --moduix-primary-foreground: lab(98.7878% 1.04755 -.967491);
57
- --moduix-secondary: lab(94.891% 4.72173 -4.33797);
58
- --moduix-secondary-foreground: lab(18.2563% 9.30683 -11.2088);
59
- --moduix-muted: lab(93.9896% 4.1962 -3.85778);
60
- --moduix-muted-foreground: lab(41.5358% 8.61768 -9.17475);
61
- --moduix-accent: lab(90.1994% 9.78509 -10.5495);
62
- --moduix-accent-foreground: lab(16.9528% 10.9317 -14.866);
63
- --moduix-border: lab(85.7491% 6.56518 -6.01138);
64
- --moduix-input: lab(81.0413% 7.88492 -7.2017);
65
- --moduix-ring: lab(52.5385% 34.208 -44.1752);
66
- --moduix-overlay: lab(9.03362% 8.22794 -9.76513 / .22);
67
- --moduix-overlay-foreground: lab(9.03362% 8.22794 -9.76513 / .08);
68
- --moduix-sidebar: lab(96.9162% 3.67063 -3.37759);
69
- --moduix-sidebar-foreground: lab(9.77332% 5.96304 -6.24471);
70
- --moduix-sidebar-primary: lab(43.7253% 43.1212 -52.6342);
71
- --moduix-sidebar-primary-foreground: lab(98.7878% 1.04755 -.967491);
72
- --moduix-sidebar-accent: lab(90.1994% 9.78509 -10.5495);
73
- --moduix-sidebar-accent-foreground: lab(16.9528% 10.9317 -14.866);
74
- --moduix-sidebar-border: lab(85.7491% 6.56518 -6.01138);
75
- --moduix-sidebar-ring: lab(52.5385% 34.208 -44.1752);
46
+ &[data-moduix-color-scheme='dark'],
47
+ [data-moduix-color-scheme='dark'] {
48
+ color-scheme: dark;
49
+ --moduix-background: oklch(0.17 0.018 315);
50
+ --moduix-foreground: oklch(0.972 0.006 320);
51
+ --moduix-card: oklch(0.22 0.022 315);
52
+ --moduix-card-foreground: oklch(0.972 0.006 320);
53
+ --moduix-popover: oklch(0.22 0.022 315);
54
+ --moduix-popover-foreground: oklch(0.972 0.006 320);
55
+ --moduix-primary: oklch(0.78 0.13 305);
56
+ --moduix-primary-foreground: oklch(0.23 0.026 315);
57
+ --moduix-secondary: oklch(0.285 0.03 315);
58
+ --moduix-secondary-foreground: oklch(0.972 0.006 320);
59
+ --moduix-muted: oklch(0.275 0.026 315);
60
+ --moduix-muted-foreground: oklch(0.74 0.03 320);
61
+ --moduix-accent: oklch(0.34 0.06 310);
62
+ --moduix-accent-foreground: oklch(0.972 0.006 320);
63
+ --moduix-border: oklch(0.76 0.035 320 / 0.24);
64
+ --moduix-input: oklch(0.76 0.035 320 / 0.3);
65
+ --moduix-ring: oklch(0.74 0.11 305);
66
+ --moduix-overlay: oklch(0.1 0.02 315 / 0.8);
67
+ --moduix-overlay-foreground: oklch(0.972 0.006 320 / 0.1);
68
+ --moduix-sidebar: oklch(0.2 0.022 315);
69
+ --moduix-sidebar-foreground: oklch(0.972 0.006 320);
70
+ --moduix-sidebar-primary: oklch(0.78 0.13 305);
71
+ --moduix-sidebar-primary-foreground: oklch(0.23 0.026 315);
72
+ --moduix-sidebar-accent: oklch(0.34 0.06 310);
73
+ --moduix-sidebar-accent-foreground: oklch(0.972 0.006 320);
74
+ --moduix-sidebar-border: oklch(0.76 0.035 320 / 0.24);
75
+ --moduix-sidebar-ring: oklch(0.74 0.11 305);
76
76
  }
77
- }
78
-
79
- [data-moduix-theme="soft"][data-moduix-color-scheme="dark"], [data-moduix-theme="soft"] [data-moduix-color-scheme="dark"] {
80
- --lightningcss-light: ;
81
- --lightningcss-dark: initial;
82
- color-scheme: dark;
83
- --moduix-background: #120d15;
84
- --moduix-foreground: #f8f4f8;
85
- --moduix-card: #1e1822;
86
- --moduix-card-foreground: #f8f4f8;
87
- --moduix-popover: #1e1822;
88
- --moduix-popover-foreground: #f8f4f8;
89
- --moduix-primary: #cba1fa;
90
- --moduix-primary-foreground: #221925;
91
- --moduix-secondary: #302634;
92
- --moduix-secondary-foreground: #f8f4f8;
93
- --moduix-muted: #2d2431;
94
- --moduix-muted-foreground: #b4a5b7;
95
- --moduix-accent: #412f4f;
96
- --moduix-accent-foreground: #f8f4f8;
97
- --moduix-border: #bbaabf3d;
98
- --moduix-input: #bbaabf4d;
99
- --moduix-ring: #bb99e3;
100
- --moduix-overlay: #050207cc;
101
- --moduix-overlay-foreground: #f8f4f81a;
102
- --moduix-sidebar: #1a131d;
103
- --moduix-sidebar-foreground: #f8f4f8;
104
- --moduix-sidebar-primary: #cba1fa;
105
- --moduix-sidebar-primary-foreground: #221925;
106
- --moduix-sidebar-accent: #412f4f;
107
- --moduix-sidebar-accent-foreground: #f8f4f8;
108
- --moduix-sidebar-border: #bbaabf3d;
109
- --moduix-sidebar-ring: #bb99e3;
110
- }
111
-
112
- @supports (color: lab(0% 0 0)) {
113
- [data-moduix-theme="soft"][data-moduix-color-scheme="dark"], [data-moduix-theme="soft"] [data-moduix-color-scheme="dark"] {
114
- --moduix-background: lab(4.27462% 3.10393 -3.53473);
115
- --moduix-foreground: lab(96.6736% 1.57163 -1.45046);
116
- --moduix-card: lab(9.22196% 5.45708 -5.73159);
117
- --moduix-card-foreground: lab(96.6736% 1.57163 -1.45046);
118
- --moduix-popover: lab(9.22196% 5.45708 -5.73159);
119
- --moduix-popover-foreground: lab(96.6736% 1.57163 -1.45046);
120
- --moduix-primary: lab(72.7036% 28.3277 -38.6867);
121
- --moduix-primary-foreground: lab(10.3245% 6.47023 -6.7571);
122
- --moduix-secondary: lab(16.6521% 7.45122 -7.80795);
123
- --moduix-secondary-foreground: lab(96.6736% 1.57163 -1.45046);
124
- --moduix-muted: lab(15.5491% 6.44058 -6.78092);
125
- --moduix-muted-foreground: lab(69.4402% 7.88933 -7.19396);
126
- --moduix-accent: lab(22.5936% 14.2035 -16.6957);
127
- --moduix-accent-foreground: lab(96.6736% 1.57163 -1.45046);
128
- --moduix-border: lab(71.6921% 9.21014 -8.38288 / .24);
129
- --moduix-input: lab(71.6921% 9.21014 -8.38288 / .3);
130
- --moduix-ring: lab(68.3641% 23.7194 -32.8336);
131
- --moduix-overlay: lab(.836973% 1.25162 -1.46449 / .8);
132
- --moduix-overlay-foreground: lab(96.6736% 1.57163 -1.45046 / .1);
133
- --moduix-sidebar: lab(6.9495% 5.25659 -5.63513);
134
- --moduix-sidebar-foreground: lab(96.6736% 1.57163 -1.45046);
135
- --moduix-sidebar-primary: lab(72.7036% 28.3277 -38.6867);
136
- --moduix-sidebar-primary-foreground: lab(10.3245% 6.47023 -6.7571);
137
- --moduix-sidebar-accent: lab(22.5936% 14.2035 -16.6957);
138
- --moduix-sidebar-accent-foreground: lab(96.6736% 1.57163 -1.45046);
139
- --moduix-sidebar-border: lab(71.6921% 9.21014 -8.38288 / .24);
140
- --moduix-sidebar-ring: lab(68.3641% 23.7194 -32.8336);
141
- }
142
- }
143
-
77
+ }