@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/styles/animations.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @keyframes moduix-pulse {
2
2
  50% {
3
- opacity: .3;
3
+ opacity: 0.3;
4
4
  }
5
5
  }
6
6
 
@@ -14,7 +14,6 @@
14
14
  from {
15
15
  opacity: 1;
16
16
  }
17
-
18
17
  to {
19
18
  opacity: 0;
20
19
  }
@@ -22,15 +21,15 @@
22
21
 
23
22
  @keyframes moduix-slide-up {
24
23
  from {
25
- opacity: 0;
26
24
  transform: translateY(4px);
25
+ opacity: 0;
27
26
  }
28
27
  }
29
28
 
30
29
  @keyframes moduix-slide-down {
31
30
  from {
32
- opacity: 0;
33
31
  transform: translateY(-4px);
32
+ opacity: 0;
34
33
  }
35
34
  }
36
35
 
@@ -47,7 +46,7 @@
47
46
  --moduix-animation-slide-up: moduix-slide-up var(--moduix-duration-normal) var(--moduix-ease-out);
48
47
  --moduix-animation-slide-down: moduix-slide-down var(--moduix-duration-normal)
49
48
  var(--moduix-ease-out);
50
- --moduix-animation-spin: moduix-spin .75s linear infinite;
49
+ --moduix-animation-spin: moduix-spin 0.75s linear infinite;
51
50
  }
52
51
 
53
52
  @media (prefers-reduced-motion: reduce) {
@@ -59,5 +58,4 @@
59
58
  --moduix-animation-slide-down: none;
60
59
  --moduix-animation-spin: none;
61
60
  }
62
- }
63
-
61
+ }
package/dist/styles/borders.css CHANGED
@@ -2,9 +2,9 @@
2
2
  --moduix-border-width-sm: 1px;
3
3
  --moduix-border-width-md: 2px;
4
4
  --moduix-border-width-lg: 4px;
5
+
5
6
  --moduix-focus-ring-width: var(--moduix-border-width-md);
6
7
  --moduix-focus-ring-inset-width: var(--moduix-border-width-sm);
7
8
  --moduix-focus-ring-offset: var(--moduix-spacing-0-5);
8
9
  --moduix-focus-ring-inset-offset: calc(var(--moduix-border-width-sm) * -1);
9
- }
10
-
10
+ }
package/dist/styles/colors.css CHANGED
@@ -1,171 +1,88 @@
1
1
  :root {
2
- --moduix-background: #f9f9fb;
3
- --moduix-foreground: #101015;
4
- --moduix-card: #fdfdff;
5
- --moduix-card-foreground: #101015;
6
- --moduix-popover: #fdfdff;
7
- --moduix-popover-foreground: #101015;
8
- --moduix-primary: #1d1d25;
9
- --moduix-primary-foreground: #f9f9fb;
10
- --moduix-secondary: #f1f1f6;
11
- --moduix-secondary-foreground: #1d1d25;
12
- --moduix-muted: #eff0f4;
13
- --moduix-muted-foreground: #5e5e67;
14
- --moduix-accent: #edeef5;
15
- --moduix-accent-foreground: #1d1d25;
16
- --moduix-destructive: #dc0031;
2
+ --moduix-background: oklch(0.982 0.003 285);
3
+ --moduix-foreground: oklch(0.175 0.01 285);
4
+ --moduix-card: oklch(0.995 0.002 285);
5
+ --moduix-card-foreground: oklch(0.175 0.01 285);
6
+ --moduix-popover: oklch(0.995 0.002 285);
7
+ --moduix-popover-foreground: oklch(0.175 0.01 285);
8
+ --moduix-primary: oklch(0.235 0.016 285);
9
+ --moduix-primary-foreground: oklch(0.982 0.003 285);
10
+ --moduix-secondary: oklch(0.96 0.006 285);
11
+ --moduix-secondary-foreground: oklch(0.235 0.016 285);
12
+ --moduix-muted: oklch(0.955 0.006 285);
13
+ --moduix-muted-foreground: oklch(0.485 0.015 285);
14
+ --moduix-accent: oklch(0.95 0.01 285);
15
+ --moduix-accent-foreground: oklch(0.235 0.016 285);
16
+ --moduix-destructive: oklch(0.565 0.235 22);
17
17
  --moduix-destructive-foreground: var(--moduix-primary-foreground);
18
- --moduix-success: #00a544;
19
- --moduix-warning: #edb200;
20
- --moduix-border: #dfdfe5;
21
- --moduix-input: #dfdfe5;
22
- --moduix-ring: #83849b;
23
- --moduix-overlay: #10101633;
24
- --moduix-overlay-foreground: #10101612;
25
- --moduix-chart-1: #9973ef;
26
- --moduix-chart-2: #00b99a;
27
- --moduix-chart-3: #ef852e;
28
- --moduix-chart-4: #d13d91;
29
- --moduix-chart-5: #7da84c;
30
- --moduix-sidebar: #f6f6fa;
31
- --moduix-sidebar-foreground: #101015;
32
- --moduix-sidebar-primary: #1d1d25;
33
- --moduix-sidebar-primary-foreground: #f9f9fb;
34
- --moduix-sidebar-accent: #edeef5;
35
- --moduix-sidebar-accent-foreground: #1d1d25;
36
- --moduix-sidebar-border: #dfdfe5;
37
- --moduix-sidebar-ring: #83849b;
38
- }
18
+ --moduix-success: oklch(0.627 0.194 149.214);
19
+ --moduix-warning: oklch(0.795 0.184 86.047);
20
+ --moduix-border: oklch(0.905 0.008 285);
21
+ --moduix-input: oklch(0.905 0.008 285);
22
+ --moduix-ring: oklch(0.62 0.035 285);
23
+ --moduix-overlay: oklch(0.175 0.014 285 / 0.2);
24
+ --moduix-overlay-foreground: oklch(0.175 0.014 285 / 0.07);
25
+ --moduix-chart-1: oklch(0.65 0.18 295);
26
+ --moduix-chart-2: oklch(0.7 0.14 175);
27
+ --moduix-chart-3: oklch(0.72 0.16 55);
28
+ --moduix-chart-4: oklch(0.6 0.2 350);
29
+ --moduix-chart-5: oklch(0.68 0.13 130);
30
+ --moduix-sidebar: oklch(0.975 0.005 285);
31
+ --moduix-sidebar-foreground: oklch(0.175 0.01 285);
32
+ --moduix-sidebar-primary: oklch(0.235 0.016 285);
33
+ --moduix-sidebar-primary-foreground: oklch(0.982 0.003 285);
34
+ --moduix-sidebar-accent: oklch(0.95 0.01 285);
35
+ --moduix-sidebar-accent-foreground: oklch(0.235 0.016 285);
36
+ --moduix-sidebar-border: oklch(0.905 0.008 285);
37
+ --moduix-sidebar-ring: oklch(0.62 0.035 285);
39
38
 
40
- @supports (color: lab(0% 0 0)) {
41
- :root {
42
- --moduix-background: lab(97.8868% .276119 -1.09879);
43
- --moduix-foreground: lab(4.77477% .753664 -2.8157);
44
- --moduix-card: lab(99.4032% .183612 -.732851);
45
- --moduix-card-foreground: lab(4.77477% .753664 -2.8157);
46
- --moduix-popover: lab(99.4032% .183612 -.732851);
47
- --moduix-popover-foreground: lab(4.77477% .753664 -2.8157);
48
- --moduix-primary: lab(11.108% 1.72348 -5.72367);
49
- --moduix-primary-foreground: lab(97.8868% .276119 -1.09879);
50
- --moduix-secondary: lab(95.3092% .556827 -2.19457);
51
- --moduix-secondary-foreground: lab(11.108% 1.72348 -5.72367);
52
- --moduix-muted: lab(94.7292% .556916 -2.19454);
53
- --moduix-muted-foreground: lab(40.1269% 1.4805 -5.43306);
54
- --moduix-accent: lab(94.1146% .938207 -3.65106);
55
- --moduix-accent-foreground: lab(11.108% 1.72348 -5.72367);
56
- --moduix-destructive: lab(47.0493% 75.2533 42.9314);
57
- --moduix-success: lab(59.0978% -58.6621 41.2579);
58
- --moduix-warning: lab(76.3898% 14.5258 98.4589);
59
- --moduix-border: lab(88.9119% .747383 -2.9229);
60
- --moduix-input: lab(88.9119% .747383 -2.9229);
61
- --moduix-ring: lab(55.5944% 3.67066 -12.566);
62
- --moduix-overlay: lab(4.7445% 1.11303 -4.05285 / .2);
63
- --moduix-overlay-foreground: lab(4.7445% 1.11303 -4.05285 / .07);
64
- --moduix-chart-1: lab(56.7542% 35.894 -58.3247);
65
- --moduix-chart-2: lab(67.0098% -49.4925 4.26728);
66
- --moduix-chart-3: lab(66.6902% 37.2311 61.7785);
67
- --moduix-chart-4: lab(50.895% 63.3361 -12.3314);
68
- --moduix-chart-5: lab(64.2236% -26.5235 41.6585);
69
- --moduix-sidebar: lab(97.0578% .462711 -1.82967);
70
- --moduix-sidebar-foreground: lab(4.77477% .753664 -2.8157);
71
- --moduix-sidebar-primary: lab(11.108% 1.72348 -5.72367);
72
- --moduix-sidebar-primary-foreground: lab(97.8868% .276119 -1.09879);
73
- --moduix-sidebar-accent: lab(94.1146% .938207 -3.65106);
74
- --moduix-sidebar-accent-foreground: lab(11.108% 1.72348 -5.72367);
75
- --moduix-sidebar-border: lab(88.9119% .747383 -2.9229);
76
- --moduix-sidebar-ring: lab(55.5944% 3.67066 -12.566);
39
+ &[data-moduix-color-scheme='light'],
40
+ [data-moduix-color-scheme='light'] {
41
+ color-scheme: light;
77
42
  }
78
- }
79
43
 
80
- :root[data-moduix-color-scheme="light"], :root [data-moduix-color-scheme="light"] {
81
- --lightningcss-light: initial;
82
- --lightningcss-dark: ;
83
- color-scheme: light;
84
- }
85
-
86
- :root[data-moduix-color-scheme="dark"], :root [data-moduix-color-scheme="dark"] {
87
- --lightningcss-light: ;
88
- --lightningcss-dark: initial;
89
- color-scheme: dark;
90
- --moduix-background: #0c0c10;
91
- --moduix-foreground: #f4f4f6;
92
- --moduix-card: #15151b;
93
- --moduix-card-foreground: #f4f4f6;
94
- --moduix-popover: #15151b;
95
- --moduix-popover-foreground: #f4f4f6;
96
- --moduix-primary: #e3e3e8;
97
- --moduix-primary-foreground: #15151b;
98
- --moduix-secondary: #222229;
99
- --moduix-secondary-foreground: #f4f4f6;
100
- --moduix-muted: #222229;
101
- --moduix-muted-foreground: #9f9faa;
102
- --moduix-accent: #2a2a33;
103
- --moduix-accent-foreground: #f4f4f6;
104
- --moduix-destructive: #f8616f;
105
- --moduix-destructive-foreground: var(--moduix-primary-foreground);
106
- --moduix-success: #00a544;
107
- --moduix-warning: #edb200;
108
- --moduix-border: #ffffff21;
109
- --moduix-input: #ffffff2b;
110
- --moduix-ring: #797992;
111
- --moduix-overlay: #040307bd;
112
- --moduix-overlay-foreground: #f4f4f617;
113
- --moduix-chart-1: #ad8dff;
114
- --moduix-chart-2: #37ccac;
115
- --moduix-chart-3: #ff9b51;
116
- --moduix-chart-4: #e65aa5;
117
- --moduix-chart-5: #92ba66;
118
- --moduix-sidebar: #15151b;
119
- --moduix-sidebar-foreground: #f4f4f6;
120
- --moduix-sidebar-primary: #ad8dff;
121
- --moduix-sidebar-primary-foreground: #0c0c10;
122
- --moduix-sidebar-accent: #2a2a33;
123
- --moduix-sidebar-accent-foreground: #f4f4f6;
124
- --moduix-sidebar-border: #ffffff21;
125
- --moduix-sidebar-ring: #797992;
126
- }
127
-
128
- @supports (color: lab(0% 0 0)) {
129
- :root[data-moduix-color-scheme="dark"], :root [data-moduix-color-scheme="dark"] {
130
- --moduix-background: lab(3.32254% .466786 -1.75522);
131
- --moduix-foreground: lab(96.2627% .276208 -1.09876);
132
- --moduix-card: lab(7.13143% 1.07729 -3.89344);
133
- --moduix-card-foreground: lab(96.2627% .276208 -1.09876);
134
- --moduix-popover: lab(7.13143% 1.07729 -3.89344);
135
- --moduix-popover-foreground: lab(96.2627% .276208 -1.09876);
136
- --moduix-primary: lab(90.4286% .651926 -2.55885);
137
- --moduix-primary-foreground: lab(7.13143% 1.07729 -3.89344);
138
- --moduix-secondary: lab(13.4703% 1.23115 -4.32171);
139
- --moduix-secondary-foreground: lab(96.2627% .276208 -1.09876);
140
- --moduix-muted: lab(13.4703% 1.23115 -4.32171);
141
- --moduix-muted-foreground: lab(65.6402% 1.54763 -5.81334);
142
- --moduix-accent: lab(17.5017% 1.55589 -5.39374);
143
- --moduix-accent-foreground: lab(96.2627% .276208 -1.09876);
144
- --moduix-destructive: lab(62.0549% 59.5703 24.4648);
145
- --moduix-success: lab(59.0978% -58.6621 41.2579);
146
- --moduix-warning: lab(76.3898% 14.5258 98.4589);
147
- --moduix-border: lab(99.9663% .369132 -1.46444 / .13);
148
- --moduix-input: lab(99.9663% .369132 -1.46444 / .17);
149
- --moduix-ring: lab(51.501% 4.0642 -13.6067);
150
- --moduix-overlay: lab(1.0141% .370815 -1.30305 / .74);
151
- --moduix-overlay-foreground: lab(96.2627% .276208 -1.09876 / .09);
152
- --moduix-chart-1: lab(65.1519% 32.5305 -55.3073);
153
- --moduix-chart-2: lab(73.8414% -45.6023 3.95186);
154
- --moduix-chart-3: lab(73.7456% 34.2033 54.931);
155
- --moduix-chart-4: lab(59.1573% 60.5605 -11.745);
156
- --moduix-chart-5: lab(71.1105% -24.7757 37.5748);
157
- --moduix-sidebar: lab(7.13143% 1.07729 -3.89344);
158
- --moduix-sidebar-foreground: lab(96.2627% .276208 -1.09876);
159
- --moduix-sidebar-primary: lab(65.1519% 32.5305 -55.3073);
160
- --moduix-sidebar-primary-foreground: lab(3.32254% .466786 -1.75522);
161
- --moduix-sidebar-accent: lab(17.5017% 1.55589 -5.39374);
162
- --moduix-sidebar-accent-foreground: lab(96.2627% .276208 -1.09876);
163
- --moduix-sidebar-border: lab(99.9663% .369132 -1.46444 / .13);
164
- --moduix-sidebar-ring: lab(51.501% 4.0642 -13.6067);
44
+ &[data-moduix-color-scheme='dark'],
45
+ [data-moduix-color-scheme='dark'] {
46
+ color-scheme: dark;
47
+ --moduix-background: oklch(0.155 0.008 285);
48
+ --moduix-foreground: oklch(0.968 0.003 285);
49
+ --moduix-card: oklch(0.2 0.011 285);
50
+ --moduix-card-foreground: oklch(0.968 0.003 285);
51
+ --moduix-popover: oklch(0.2 0.011 285);
52
+ --moduix-popover-foreground: oklch(0.968 0.003 285);
53
+ --moduix-primary: oklch(0.918 0.007 285);
54
+ --moduix-primary-foreground: oklch(0.2 0.011 285);
55
+ --moduix-secondary: oklch(0.255 0.012 285);
56
+ --moduix-secondary-foreground: oklch(0.968 0.003 285);
57
+ --moduix-muted: oklch(0.255 0.012 285);
58
+ --moduix-muted-foreground: oklch(0.705 0.016 285);
59
+ --moduix-accent: oklch(0.29 0.015 285);
60
+ --moduix-accent-foreground: oklch(0.968 0.003 285);
61
+ --moduix-destructive: oklch(0.69 0.185 18);
62
+ --moduix-destructive-foreground: var(--moduix-primary-foreground);
63
+ --moduix-success: oklch(0.627 0.194 149.214);
64
+ --moduix-warning: oklch(0.795 0.184 86.047);
65
+ --moduix-border: oklch(1 0.004 285 / 13%);
66
+ --moduix-input: oklch(1 0.004 285 / 17%);
67
+ --moduix-ring: oklch(0.585 0.038 285);
68
+ --moduix-overlay: oklch(0.105 0.012 285 / 0.74);
69
+ --moduix-overlay-foreground: oklch(0.968 0.003 285 / 0.09);
70
+ --moduix-chart-1: oklch(0.72 0.17 295);
71
+ --moduix-chart-2: oklch(0.76 0.13 175);
72
+ --moduix-chart-3: oklch(0.78 0.15 55);
73
+ --moduix-chart-4: oklch(0.67 0.19 350);
74
+ --moduix-chart-5: oklch(0.74 0.12 130);
75
+ --moduix-sidebar: oklch(0.2 0.011 285);
76
+ --moduix-sidebar-foreground: oklch(0.968 0.003 285);
77
+ --moduix-sidebar-primary: oklch(0.72 0.17 295);
78
+ --moduix-sidebar-primary-foreground: oklch(0.155 0.008 285);
79
+ --moduix-sidebar-accent: oklch(0.29 0.015 285);
80
+ --moduix-sidebar-accent-foreground: oklch(0.968 0.003 285);
81
+ --moduix-sidebar-border: oklch(1 0.004 285 / 13%);
82
+ --moduix-sidebar-ring: oklch(0.585 0.038 285);
165
83
  }
166
- }
167
84
 
168
- :root {
85
+ /* Semantic */
169
86
  --moduix-color-background: var(--moduix-background);
170
87
  --moduix-color-foreground: var(--moduix-foreground);
171
88
  --moduix-color-card: var(--moduix-card);
@@ -202,5 +119,4 @@
202
119
  --moduix-color-sidebar-accent-foreground: var(--moduix-sidebar-accent-foreground);
203
120
  --moduix-color-sidebar-border: var(--moduix-sidebar-border);
204
121
  --moduix-color-sidebar-ring: var(--moduix-sidebar-ring);
205
- }
206
-
122
+ }
package/dist/styles/opacity.css CHANGED
@@ -1,6 +1,5 @@
1
1
  :root {
2
- --moduix-opacity-disabled: .5;
3
- --moduix-opacity-loading: .85;
4
- --moduix-opacity-hover: .9;
5
- }
6
-
2
+ --moduix-opacity-disabled: 0.5;
3
+ --moduix-opacity-loading: 0.85;
4
+ --moduix-opacity-hover: 0.9;
5
+ }
package/dist/styles/radius.css CHANGED
@@ -1,11 +1,11 @@
1
1
  :root {
2
- --moduix-radius: .625rem;
2
+ --moduix-radius: 0.625rem;
3
3
  --moduix-radius-none: 0;
4
- --moduix-radius-xs: calc(var(--moduix-radius) * .4);
5
- --moduix-radius-sm: calc(var(--moduix-radius) * .6);
6
- --moduix-radius-md: calc(var(--moduix-radius) * .8);
4
+
5
+ --moduix-radius-xs: calc(var(--moduix-radius) * 0.4);
6
+ --moduix-radius-sm: calc(var(--moduix-radius) * 0.6);
7
+ --moduix-radius-md: calc(var(--moduix-radius) * 0.8);
7
8
  --moduix-radius-lg: var(--moduix-radius);
8
9
  --moduix-radius-xl: calc(var(--moduix-radius) * 1.2);
9
10
  --moduix-radius-full: 9999px;
10
- }
11
-
11
+ }