juxscript 1.0.3 → 1.0.5

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 (73) hide show
  1. package/README.md +37 -92
  2. package/bin/cli.js +57 -56
  3. package/lib/components/alert.ts +240 -0
  4. package/lib/components/app.ts +216 -82
  5. package/lib/components/badge.ts +164 -0
  6. package/lib/components/barchart.ts +1248 -0
  7. package/lib/components/button.ts +188 -53
  8. package/lib/components/card.ts +75 -61
  9. package/lib/components/chart.ts +17 -15
  10. package/lib/components/checkbox.ts +199 -0
  11. package/lib/components/code.ts +66 -152
  12. package/lib/components/container.ts +104 -208
  13. package/lib/components/data.ts +1 -3
  14. package/lib/components/datepicker.ts +226 -0
  15. package/lib/components/dialog.ts +258 -0
  16. package/lib/components/docs-data.json +1969 -423
  17. package/lib/components/dropdown.ts +244 -0
  18. package/lib/components/element.ts +271 -0
  19. package/lib/components/fileupload.ts +319 -0
  20. package/lib/components/footer.ts +37 -18
  21. package/lib/components/header.ts +53 -33
  22. package/lib/components/heading.ts +119 -0
  23. package/lib/components/helpers.ts +34 -0
  24. package/lib/components/hero.ts +57 -31
  25. package/lib/components/include.ts +292 -0
  26. package/lib/components/input.ts +508 -77
  27. package/lib/components/layout.ts +144 -18
  28. package/lib/components/list.ts +83 -74
  29. package/lib/components/loading.ts +263 -0
  30. package/lib/components/main.ts +43 -17
  31. package/lib/components/menu.ts +108 -24
  32. package/lib/components/modal.ts +50 -21
  33. package/lib/components/nav.ts +60 -18
  34. package/lib/components/paragraph.ts +111 -0
  35. package/lib/components/progress.ts +276 -0
  36. package/lib/components/radio.ts +236 -0
  37. package/lib/components/req.ts +300 -0
  38. package/lib/components/script.ts +33 -74
  39. package/lib/components/select.ts +280 -0
  40. package/lib/components/sidebar.ts +87 -37
  41. package/lib/components/style.ts +47 -70
  42. package/lib/components/switch.ts +261 -0
  43. package/lib/components/table.ts +47 -24
  44. package/lib/components/tabs.ts +105 -63
  45. package/lib/components/theme-toggle.ts +361 -0
  46. package/lib/components/token-calculator.ts +380 -0
  47. package/lib/components/tooltip.ts +244 -0
  48. package/lib/components/view.ts +36 -20
  49. package/lib/components/write.ts +284 -0
  50. package/lib/globals.d.ts +21 -0
  51. package/lib/jux.ts +178 -68
  52. package/lib/presets/notion.css +521 -0
  53. package/lib/presets/notion.jux +27 -0
  54. package/lib/reactivity/state.ts +364 -0
  55. package/lib/themes/charts.js +126 -0
  56. package/machinery/compiler.js +126 -38
  57. package/machinery/generators/html.js +2 -3
  58. package/machinery/server.js +2 -2
  59. package/package.json +29 -3
  60. package/lib/components/import.ts +0 -430
  61. package/lib/components/node.ts +0 -200
  62. package/lib/components/reactivity.js +0 -104
  63. package/lib/components/theme.ts +0 -97
  64. package/lib/layouts/notion.css +0 -258
  65. package/lib/styles/base-theme.css +0 -186
  66. package/lib/styles/dark-theme.css +0 -144
  67. package/lib/styles/light-theme.css +0 -144
  68. package/lib/styles/tokens/dark.css +0 -86
  69. package/lib/styles/tokens/light.css +0 -86
  70. package/lib/templates/index.juxt +0 -33
  71. package/lib/themes/dark.css +0 -86
  72. package/lib/themes/light.css +0 -86
  73. /package/lib/{styles → presets}/global.css +0 -0
@@ -1,144 +0,0 @@
1
- /* Dark Theme Styles ./dark-theme.css */
2
- :root {
3
- --theme-brand: #0a9ca5;
4
- --theme-brand-hover: #088892;
5
- --theme-success: #0a9ca5;
6
- --theme-danger: #ef4444;
7
- --theme-text: #e0e0e0;
8
- --theme-text-muted: #aaa;
9
- --theme-text-inverse: #ffffff;
10
- --theme-surface: #2a2a2a;
11
- --theme-surface-elevated: #333;
12
- --theme-border: #444;
13
- --theme-hover-deeper: #3a3a3a;
14
- --theme-wash-slate: #2a2a2a;
15
- }
16
-
17
- body {
18
- color: var(--theme-text);
19
- background: #1a1a1a;
20
- }
21
-
22
- .jux-hero {
23
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
24
- }
25
-
26
- .jux-grid-item {
27
- background: #2a2a2a;
28
- }
29
-
30
- .jux-grid-title {
31
- color: #667eea;
32
- }
33
-
34
- .jux-grid-description {
35
- color: #aaa;
36
- }
37
-
38
- .jux-button-primary {
39
- background: #667eea;
40
- }
41
-
42
- .jux-button-primary:hover {
43
- background: #5568d3;
44
- }
45
-
46
- .jux-table {
47
- background: #2a2a2a;
48
- }
49
-
50
- .jux-table th {
51
- background-color: #333;
52
- border-bottom-color: #444;
53
- }
54
-
55
- .jux-table td {
56
- border-bottom-color: #333;
57
- }
58
-
59
- .jux-table tr:hover {
60
- background-color: #2a2a2a;
61
- }
62
-
63
- .table-search {
64
- background: #2a2a2a;
65
- color: #e0e0e0;
66
- border-color: #444;
67
- }
68
-
69
- .table-toolbar {
70
- background: #2a2a2a;
71
- }
72
-
73
- .table-toolbar button {
74
- background: #2a2a2a;
75
- color: #e0e0e0;
76
- border-color: #444;
77
- }
78
-
79
- .table-toolbar button:hover {
80
- background: #333;
81
- }
82
-
83
- .table-toolbar button.active {
84
- background: #667eea;
85
- border-color: #667eea;
86
- }
87
-
88
- .table-filter-dropdown-menu {
89
- background: #2a2a2a;
90
- border-color: #444;
91
- }
92
-
93
- .table-filter-dropdown-menu select,
94
- .table-filter-dropdown-menu input {
95
- background: #2a2a2a;
96
- color: #e0e0e0;
97
- border-color: #444;
98
- }
99
-
100
- .table-active-filters span {
101
- background: #667eea;
102
- }
103
-
104
- .table-row-menu {
105
- background: #2a2a2a;
106
- border-color: #444;
107
- }
108
-
109
- .table-row-menu button {
110
- color: #e0e0e0;
111
- }
112
-
113
- .table-row-menu button:hover {
114
- background: #333;
115
- }
116
-
117
- .table-cards .card {
118
- background: #2a2a2a;
119
- border-color: #444;
120
- }
121
-
122
- .table-card-actions {
123
- border-top-color: #444;
124
- }
125
-
126
- .table-pagination button {
127
- background: #2a2a2a;
128
- color: #e0e0e0;
129
- border-color: #444;
130
- }
131
-
132
- .table-pagination button:hover:not(:disabled) {
133
- background: #333;
134
- }
135
-
136
- .table-pages button.active {
137
- background: #667eea;
138
- border-color: #667eea;
139
- }
140
-
141
- .table-pages-ellipsis {
142
- color: #e0e0e0;
143
- }
144
- /* END Dark Theme Styles ./dark-theme.css */
@@ -1,144 +0,0 @@
1
- /* Light Theme Styles ./light-theme.css */
2
- :root {
3
- --theme-brand: #085156;
4
- --theme-brand-hover: #06393c;
5
- --theme-success: #085156;
6
- --theme-danger: #ef4444;
7
- --theme-text: #333;
8
- --theme-text-muted: #666;
9
- --theme-text-inverse: #ffffff;
10
- --theme-surface: #f4f4f4;
11
- --theme-surface-elevated: #ffffff;
12
- --theme-border: #ddd;
13
- --theme-hover-deeper: #f9f9f9;
14
- --theme-wash-slate: #f9f9f9;
15
- }
16
-
17
- body {
18
- color: var(--theme-text);
19
- background: #f5f5f5;
20
- }
21
-
22
- .jux-hero {
23
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
24
- }
25
-
26
- .jux-grid-item {
27
- background: #ffffff;
28
- }
29
-
30
- .jux-grid-title {
31
- color: #667eea;
32
- }
33
-
34
- .jux-grid-description {
35
- color: #666;
36
- }
37
-
38
- .jux-button-primary {
39
- background: #667eea;
40
- }
41
-
42
- .jux-button-primary:hover {
43
- background: #5568d3;
44
- }
45
-
46
- .jux-table {
47
- background: #ffffff;
48
- }
49
-
50
- .jux-table th {
51
- background-color: #f4f4f4;
52
- border-bottom-color: #ddd;
53
- }
54
-
55
- .jux-table td {
56
- border-bottom-color: #eee;
57
- }
58
-
59
- .jux-table tr:hover {
60
- background-color: #f9f9f9;
61
- }
62
-
63
- .table-search {
64
- background: #ffffff;
65
- color: #333;
66
- border-color: #ddd;
67
- }
68
-
69
- .table-toolbar {
70
- background: #f9f9f9;
71
- }
72
-
73
- .table-toolbar button {
74
- background: #ffffff;
75
- color: #333;
76
- border-color: #ddd;
77
- }
78
-
79
- .table-toolbar button:hover {
80
- background: #f4f4f4;
81
- }
82
-
83
- .table-toolbar button.active {
84
- background: #667eea;
85
- border-color: #667eea;
86
- }
87
-
88
- .table-filter-dropdown-menu {
89
- background: #ffffff;
90
- border-color: #ddd;
91
- }
92
-
93
- .table-filter-dropdown-menu select,
94
- .table-filter-dropdown-menu input {
95
- background: #ffffff;
96
- color: #333;
97
- border-color: #ddd;
98
- }
99
-
100
- .table-active-filters span {
101
- background: #667eea;
102
- }
103
-
104
- .table-row-menu {
105
- background: #ffffff;
106
- border-color: #ddd;
107
- }
108
-
109
- .table-row-menu button {
110
- color: #333;
111
- }
112
-
113
- .table-row-menu button:hover {
114
- background: #f4f4f4;
115
- }
116
-
117
- .table-cards .card {
118
- background: #ffffff;
119
- border-color: #ddd;
120
- }
121
-
122
- .table-card-actions {
123
- border-top-color: #eee;
124
- }
125
-
126
- .table-pagination button {
127
- background: #ffffff;
128
- color: #333;
129
- border-color: #ddd;
130
- }
131
-
132
- .table-pagination button:hover:not(:disabled) {
133
- background: #f4f4f4;
134
- }
135
-
136
- .table-pages button.active {
137
- background: #667eea;
138
- border-color: #667eea;
139
- }
140
-
141
- .table-pages-ellipsis {
142
- color: #333;
143
- }
144
- /* END Light Theme Styles ./light-theme.css */
@@ -1,86 +0,0 @@
1
- /**
2
- * Dark Theme Tokens
3
- * Swappable design decisions
4
- */
5
- :root {
6
- /* Colors */
7
- --color-brand: #0a9ca5;
8
- --color-brand-hover: #088892;
9
- --color-success: #10b981;
10
- --color-warning: #f59e0b;
11
- --color-danger: #ef4444;
12
- --color-info: #3b82f6;
13
-
14
- --color-text-primary: #e8e8e8;
15
- --color-text-secondary: #a0a0a0;
16
- --color-text-tertiary: #707070;
17
- --color-text-inverse: #ffffff;
18
-
19
- --color-surface-base: #1a1a1a;
20
- --color-surface-elevated: #242424;
21
- --color-surface-hover: #2a2a2a;
22
- --color-background: #0a0a0a;
23
-
24
- --color-border: #333333;
25
- --color-border-hover: #404040;
26
- --color-border-focus: #7c3aed;
27
-
28
- /* Typography */
29
- --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
30
- --font-family-mono: 'Courier New', monospace;
31
-
32
- --font-size-xs: 0.75rem;
33
- --font-size-sm: 0.875rem;
34
- --font-size-base: 1rem;
35
- --font-size-lg: 1.125rem;
36
- --font-size-xl: 1.25rem;
37
- --font-size-2xl: 1.5rem;
38
- --font-size-3xl: 2rem;
39
-
40
- --font-weight-normal: 400;
41
- --font-weight-medium: 500;
42
- --font-weight-semibold: 600;
43
- --font-weight-bold: 700;
44
-
45
- --line-height-tight: 1.25;
46
- --line-height-normal: 1.5;
47
- --line-height-relaxed: 1.75;
48
-
49
- /* Spacing */
50
- --space-xs: 0.25rem;
51
- --space-sm: 0.5rem;
52
- --space-md: 1rem;
53
- --space-lg: 1.5rem;
54
- --space-xl: 2rem;
55
- --space-2xl: 3rem;
56
- --space-3xl: 4rem;
57
-
58
- /* Borders */
59
- --border-radius-sm: 4px;
60
- --border-radius-md: 6px;
61
- --border-radius-lg: 8px;
62
- --border-radius-xl: 12px;
63
- --border-radius-full: 9999px;
64
-
65
- --border-width: 1px;
66
- --border-width-thick: 2px;
67
-
68
- /* Shadows */
69
- --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
70
- --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
71
- --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
72
- --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
73
-
74
- /* Transitions */
75
- --transition-fast: 150ms ease;
76
- --transition-base: 200ms ease;
77
- --transition-slow: 300ms ease;
78
-
79
- /* Legacy aliases for backward compatibility */
80
- --theme-brand: var(--color-brand);
81
- --theme-text: var(--color-text-primary);
82
- --theme-text-muted: var(--color-text-secondary);
83
- --theme-surface: var(--color-surface-base);
84
- --theme-surface-elevated: var(--color-surface-elevated);
85
- --theme-border: var(--color-border);
86
- }
@@ -1,86 +0,0 @@
1
- /**
2
- * Light Theme Tokens
3
- * Swappable design decisions
4
- */
5
- :root {
6
- /* Colors */
7
- --color-brand: #0a9ca5;
8
- --color-brand-hover: #088892;
9
- --color-success: #10b981;
10
- --color-warning: #f59e0b;
11
- --color-danger: #ef4444;
12
- --color-info: #3b82f6;
13
-
14
- --color-text-primary: #111827;
15
- --color-text-secondary: #4b5563;
16
- --color-text-tertiary: #6b7280;
17
- --color-text-inverse: #ffffff;
18
-
19
- --color-surface-base: #f3f4f6;
20
- --color-surface-elevated: #ffffff;
21
- --color-surface-hover: #e5e7eb;
22
- --color-background: #ffffff;
23
-
24
- --color-border: #d1d5db;
25
- --color-border-hover: #9ca3af;
26
- --color-border-focus: #7c3aed;
27
-
28
- /* Typography */
29
- --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
30
- --font-family-mono: 'Courier New', monospace;
31
-
32
- --font-size-xs: 0.75rem;
33
- --font-size-sm: 0.875rem;
34
- --font-size-base: 1rem;
35
- --font-size-lg: 1.125rem;
36
- --font-size-xl: 1.25rem;
37
- --font-size-2xl: 1.5rem;
38
- --font-size-3xl: 2rem;
39
-
40
- --font-weight-normal: 400;
41
- --font-weight-medium: 500;
42
- --font-weight-semibold: 600;
43
- --font-weight-bold: 700;
44
-
45
- --line-height-tight: 1.25;
46
- --line-height-normal: 1.5;
47
- --line-height-relaxed: 1.75;
48
-
49
- /* Spacing */
50
- --space-xs: 0.25rem;
51
- --space-sm: 0.5rem;
52
- --space-md: 1rem;
53
- --space-lg: 1.5rem;
54
- --space-xl: 2rem;
55
- --space-2xl: 3rem;
56
- --space-3xl: 4rem;
57
-
58
- /* Borders */
59
- --border-radius-sm: 4px;
60
- --border-radius-md: 6px;
61
- --border-radius-lg: 8px;
62
- --border-radius-xl: 12px;
63
- --border-radius-full: 9999px;
64
-
65
- --border-width: 1px;
66
- --border-width-thick: 2px;
67
-
68
- /* Shadows */
69
- --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
70
- --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
71
- --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
72
- --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
73
-
74
- /* Transitions */
75
- --transition-fast: 150ms ease;
76
- --transition-base: 200ms ease;
77
- --transition-slow: 300ms ease;
78
-
79
- /* Legacy aliases for backward compatibility */
80
- --theme-brand: var(--color-brand);
81
- --theme-text: var(--color-text-primary);
82
- --theme-text-muted: var(--color-text-secondary);
83
- --theme-surface: var(--color-surface-base);
84
- --theme-surface-elevated: var(--color-surface-elevated);
85
- --theme-border: var(--color-border);
86
- }
@@ -1,33 +0,0 @@
1
- // Welcome to JUX!
2
- import { code } from '/lib/components/code.js';
3
- import { jux } from '/lib/jux.js';
4
-
5
- jux.style('/lib/layouts/notion.css');
6
- jux.theme('light');
7
-
8
- const appheader = jux.header('appheader', {}).render("#app");
9
- const appsubheader = jux.header('appsubheader', {}).render("#app");
10
- const appsidebar = jux.sidebar('appsidebar', {}).render("#app");
11
- const appmain = jux.main('appmain', {}).render("#app");
12
- const appaside = jux.sidebar('appaside', {}).render("#app");
13
- const appfooter = jux.footer('appfooter', {}).render("#app");
14
- const appmodal = jux.modal('appmodal', {}).render("#app");
15
-
16
-
17
- await jux.hero('hero1', {
18
- title: 'Welcome to JUX',
19
- subtitle: 'A JavaScript UX authorship platform'
20
- }).render();
21
-
22
- const code1 = code('code1').code(`Serve from your backend:
23
- Express: app.use(express.static('jux-dist'))
24
- Flask: app = Flask(__name__, static_folder='jux-dist')
25
- FastAPI: app.mount("/", StaticFiles(directory="jux-dist"), name="static")
26
- Laravel: Route::view('/', 'jux-dist/index.html')`)
27
- .language('bash');
28
-
29
- code1.render();
30
-
31
- // note
32
- // render()
33
- // renderTo()
@@ -1,86 +0,0 @@
1
- /**
2
- * Dark Theme Tokens
3
- * Swappable design decisions
4
- */
5
- :root {
6
- /* Colors */
7
- --color-brand: #0a9ca5;
8
- --color-brand-hover: #088892;
9
- --color-success: #10b981;
10
- --color-warning: #f59e0b;
11
- --color-danger: #ef4444;
12
- --color-info: #3b82f6;
13
-
14
- --color-text-primary: #e8e8e8;
15
- --color-text-secondary: #a0a0a0;
16
- --color-text-tertiary: #707070;
17
- --color-text-inverse: #ffffff;
18
-
19
- --color-surface-base: #1a1a1a;
20
- --color-surface-elevated: #242424;
21
- --color-surface-hover: #2a2a2a;
22
- --color-background: #0a0a0a;
23
-
24
- --color-border: #333333;
25
- --color-border-hover: #404040;
26
- --color-border-focus: #7c3aed;
27
-
28
- /* Typography */
29
- --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
30
- --font-family-mono: 'Courier New', monospace;
31
-
32
- --font-size-xs: 0.75rem;
33
- --font-size-sm: 0.875rem;
34
- --font-size-base: 1rem;
35
- --font-size-lg: 1.125rem;
36
- --font-size-xl: 1.25rem;
37
- --font-size-2xl: 1.5rem;
38
- --font-size-3xl: 2rem;
39
-
40
- --font-weight-normal: 400;
41
- --font-weight-medium: 500;
42
- --font-weight-semibold: 600;
43
- --font-weight-bold: 700;
44
-
45
- --line-height-tight: 1.25;
46
- --line-height-normal: 1.5;
47
- --line-height-relaxed: 1.75;
48
-
49
- /* Spacing */
50
- --space-xs: 0.25rem;
51
- --space-sm: 0.5rem;
52
- --space-md: 1rem;
53
- --space-lg: 1.5rem;
54
- --space-xl: 2rem;
55
- --space-2xl: 3rem;
56
- --space-3xl: 4rem;
57
-
58
- /* Borders */
59
- --border-radius-sm: 4px;
60
- --border-radius-md: 6px;
61
- --border-radius-lg: 8px;
62
- --border-radius-xl: 12px;
63
- --border-radius-full: 9999px;
64
-
65
- --border-width: 1px;
66
- --border-width-thick: 2px;
67
-
68
- /* Shadows */
69
- --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
70
- --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
71
- --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
72
- --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
73
-
74
- /* Transitions */
75
- --transition-fast: 150ms ease;
76
- --transition-base: 200ms ease;
77
- --transition-slow: 300ms ease;
78
-
79
- /* Legacy aliases for backward compatibility */
80
- --theme-brand: var(--color-brand);
81
- --theme-text: var(--color-text-primary);
82
- --theme-text-muted: var(--color-text-secondary);
83
- --theme-surface: var(--color-surface-base);
84
- --theme-surface-elevated: var(--color-surface-elevated);
85
- --theme-border: var(--color-border);
86
- }
@@ -1,86 +0,0 @@
1
- /**
2
- * Light Theme Tokens
3
- * Swappable design decisions
4
- */
5
- :root {
6
- /* Colors */
7
- --color-brand: #0a9ca5;
8
- --color-brand-hover: #088892;
9
- --color-success: #10b981;
10
- --color-warning: #f59e0b;
11
- --color-danger: #ef4444;
12
- --color-info: #3b82f6;
13
-
14
- --color-text-primary: #111827;
15
- --color-text-secondary: #4b5563;
16
- --color-text-tertiary: #6b7280;
17
- --color-text-inverse: #ffffff;
18
-
19
- --color-surface-base: #f3f4f6;
20
- --color-surface-elevated: #ffffff;
21
- --color-surface-hover: #e5e7eb;
22
- --color-background: #ffffff;
23
-
24
- --color-border: #d1d5db;
25
- --color-border-hover: #9ca3af;
26
- --color-border-focus: #7c3aed;
27
-
28
- /* Typography */
29
- --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
30
- --font-family-mono: 'Courier New', monospace;
31
-
32
- --font-size-xs: 0.75rem;
33
- --font-size-sm: 0.875rem;
34
- --font-size-base: 1rem;
35
- --font-size-lg: 1.125rem;
36
- --font-size-xl: 1.25rem;
37
- --font-size-2xl: 1.5rem;
38
- --font-size-3xl: 2rem;
39
-
40
- --font-weight-normal: 400;
41
- --font-weight-medium: 500;
42
- --font-weight-semibold: 600;
43
- --font-weight-bold: 700;
44
-
45
- --line-height-tight: 1.25;
46
- --line-height-normal: 1.5;
47
- --line-height-relaxed: 1.75;
48
-
49
- /* Spacing */
50
- --space-xs: 0.25rem;
51
- --space-sm: 0.5rem;
52
- --space-md: 1rem;
53
- --space-lg: 1.5rem;
54
- --space-xl: 2rem;
55
- --space-2xl: 3rem;
56
- --space-3xl: 4rem;
57
-
58
- /* Borders */
59
- --border-radius-sm: 4px;
60
- --border-radius-md: 6px;
61
- --border-radius-lg: 8px;
62
- --border-radius-xl: 12px;
63
- --border-radius-full: 9999px;
64
-
65
- --border-width: 1px;
66
- --border-width-thick: 2px;
67
-
68
- /* Shadows */
69
- --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
70
- --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
71
- --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
72
- --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
73
-
74
- /* Transitions */
75
- --transition-fast: 150ms ease;
76
- --transition-base: 200ms ease;
77
- --transition-slow: 300ms ease;
78
-
79
- /* Legacy aliases for backward compatibility */
80
- --theme-brand: var(--color-brand);
81
- --theme-text: var(--color-text-primary);
82
- --theme-text-muted: var(--color-text-secondary);
83
- --theme-surface: var(--color-surface-base);
84
- --theme-surface-elevated: var(--color-surface-elevated);
85
- --theme-border: var(--color-border);
86
- }
File without changes