@magnidev/theme 1.0.2 → 2.0.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.
- package/CHANGELOG.md +25 -0
- package/README.md +12 -12
- package/package.json +14 -5
- package/src/tailwindcss/styles.css +157 -146
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
## [2.0.0] - 2026-04-02
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- Initial public release of `@magnidev/theme`
|
|
13
|
+
- Base Tailwind CSS styles with custom CSS variables
|
|
14
|
+
- Shadcn component support (v4.1.2+)
|
|
15
|
+
- GitHub Actions workflow for automated npm publishing on release
|
|
16
|
+
- VSCode extensions configuration for Biome and Tailwind CSS
|
|
17
|
+
- Biome and Ultracite configuration for code quality
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Updated radius variables for improved design consistency
|
|
22
|
+
- Enhanced CSS variables structure for better theming support
|
|
23
|
+
- Added `tw-animate-css` as peer dependency for animations
|
|
24
|
+
|
|
25
|
+
[2.0.0]: https://github.com/magnidev/magnidev-theme/releases/tag/v2.0.0
|
package/README.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
# @magnidev/theme
|
|
2
|
-
|
|
3
|
-
## Description
|
|
4
|
-
|
|
5
|
-
This package provides a theme for Tailwind CSS, designed to be used with the Magni Development apps.
|
|
6
|
-
|
|
7
|
-
## License & Usage
|
|
8
|
-
|
|
9
|
-
This package is just for internal use, education, and is not intended for public distribution. It is part of Magni Development.
|
|
10
|
-
It is not permitted to copy, modify, or distribute this package without explicit permission from the Magni Development team.
|
|
11
|
-
|
|
12
|
-
© 2025 Magni Development. All rights reserved.
|
|
1
|
+
# @magnidev/theme
|
|
2
|
+
|
|
3
|
+
## Description
|
|
4
|
+
|
|
5
|
+
This package provides a theme for Tailwind CSS, designed to be used with the Magni Development apps.
|
|
6
|
+
|
|
7
|
+
## License & Usage
|
|
8
|
+
|
|
9
|
+
This package is just for internal use, education, and is not intended for public distribution. It is part of Magni Development.
|
|
10
|
+
It is not permitted to copy, modify, or distribute this package without explicit permission from the Magni Development team.
|
|
11
|
+
|
|
12
|
+
© 2025 Magni Development. All rights reserved.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@magnidev/theme",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "A set of reusable styles and components to enhance the design consistency across the Magni Development applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"typescript",
|
|
@@ -35,10 +35,19 @@
|
|
|
35
35
|
"README.md",
|
|
36
36
|
"CHANGELOG.md"
|
|
37
37
|
],
|
|
38
|
+
"scripts": {
|
|
39
|
+
"check": "ultracite check",
|
|
40
|
+
"fix": "ultracite fix"
|
|
41
|
+
},
|
|
38
42
|
"dependencies": {},
|
|
39
43
|
"peerDependencies": {
|
|
40
|
-
"
|
|
44
|
+
"shadcn": ">=4.1.2",
|
|
45
|
+
"tailwindcss": ">=4.2.2",
|
|
46
|
+
"tw-animate-css": ">=1.4.0"
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@biomejs/biome": "2.4.10",
|
|
50
|
+
"ultracite": "7.4.2"
|
|
41
51
|
},
|
|
42
|
-
"
|
|
43
|
-
|
|
44
|
-
}
|
|
52
|
+
"packageManager": "bun@1.3.11"
|
|
53
|
+
}
|
|
@@ -1,146 +1,157 @@
|
|
|
1
|
-
@
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
--
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
--
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
--
|
|
41
|
-
--
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
:
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
@apply
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
@apply bg-
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
@apply
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
1
|
+
@import "tw-animate-css";
|
|
2
|
+
@import "shadcn/tailwind.css";
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
--background: oklch(1 0 0);
|
|
6
|
+
--foreground: oklch(0.141 0.005 285.823);
|
|
7
|
+
--card: oklch(1 0 0);
|
|
8
|
+
--card-foreground: oklch(0.141 0.005 285.823);
|
|
9
|
+
--popover: oklch(1 0 0);
|
|
10
|
+
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
11
|
+
--primary: oklch(0.21 0.006 285.885);
|
|
12
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
13
|
+
--secondary: oklch(0.967 0.001 286.375);
|
|
14
|
+
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
15
|
+
--muted: oklch(0.967 0.001 286.375);
|
|
16
|
+
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
17
|
+
--accent: oklch(0.967 0.001 286.375);
|
|
18
|
+
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
19
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
20
|
+
--border: oklch(0.92 0.004 286.32);
|
|
21
|
+
--input: oklch(0.92 0.004 286.32);
|
|
22
|
+
--ring: oklch(0.705 0.015 286.067);
|
|
23
|
+
--chart-1: oklch(0.865 0.127 207.078);
|
|
24
|
+
--chart-2: oklch(0.715 0.143 215.221);
|
|
25
|
+
--chart-3: oklch(0.609 0.126 221.723);
|
|
26
|
+
--chart-4: oklch(0.52 0.105 223.128);
|
|
27
|
+
--chart-5: oklch(0.45 0.085 224.283);
|
|
28
|
+
--radius: 0.875rem;
|
|
29
|
+
--sidebar: oklch(0.985 0 0);
|
|
30
|
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
|
31
|
+
--sidebar-primary: oklch(0.21 0.006 285.885);
|
|
32
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
33
|
+
--sidebar-accent: oklch(0.967 0.001 286.375);
|
|
34
|
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
35
|
+
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
36
|
+
--sidebar-ring: oklch(0.705 0.015 286.067);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.dark {
|
|
40
|
+
--background: oklch(0.141 0.005 285.823);
|
|
41
|
+
--foreground: oklch(0.985 0 0);
|
|
42
|
+
--card: oklch(0.21 0.006 285.885);
|
|
43
|
+
--card-foreground: oklch(0.985 0 0);
|
|
44
|
+
--popover: oklch(0.21 0.006 285.885);
|
|
45
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
46
|
+
--primary: oklch(0.92 0.004 286.32);
|
|
47
|
+
--primary-foreground: oklch(0.21 0.006 285.885);
|
|
48
|
+
--secondary: oklch(0.274 0.006 286.033);
|
|
49
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
50
|
+
--muted: oklch(0.274 0.006 286.033);
|
|
51
|
+
--muted-foreground: oklch(0.705 0.015 286.067);
|
|
52
|
+
--accent: oklch(0.274 0.006 286.033);
|
|
53
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
54
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
55
|
+
--border: oklch(1 0 0 / 10%);
|
|
56
|
+
--input: oklch(1 0 0 / 15%);
|
|
57
|
+
--ring: oklch(0.552 0.016 285.938);
|
|
58
|
+
--chart-1: oklch(0.865 0.127 207.078);
|
|
59
|
+
--chart-2: oklch(0.715 0.143 215.221);
|
|
60
|
+
--chart-3: oklch(0.609 0.126 221.723);
|
|
61
|
+
--chart-4: oklch(0.52 0.105 223.128);
|
|
62
|
+
--chart-5: oklch(0.45 0.085 224.283);
|
|
63
|
+
--sidebar: oklch(0.21 0.006 285.885);
|
|
64
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
65
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
66
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
67
|
+
--sidebar-accent: oklch(0.274 0.006 286.033);
|
|
68
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
69
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
70
|
+
--sidebar-ring: oklch(0.552 0.016 285.938);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@theme inline {
|
|
74
|
+
--color-background: var(--background);
|
|
75
|
+
--color-foreground: var(--foreground);
|
|
76
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
77
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
78
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
79
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
80
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
81
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
82
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
83
|
+
--color-sidebar: var(--sidebar);
|
|
84
|
+
--color-chart-5: var(--chart-5);
|
|
85
|
+
--color-chart-4: var(--chart-4);
|
|
86
|
+
--color-chart-3: var(--chart-3);
|
|
87
|
+
--color-chart-2: var(--chart-2);
|
|
88
|
+
--color-chart-1: var(--chart-1);
|
|
89
|
+
--color-ring: var(--ring);
|
|
90
|
+
--color-input: var(--input);
|
|
91
|
+
--color-border: var(--border);
|
|
92
|
+
--color-destructive: var(--destructive);
|
|
93
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
94
|
+
--color-accent: var(--accent);
|
|
95
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
96
|
+
--color-muted: var(--muted);
|
|
97
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
98
|
+
--color-secondary: var(--secondary);
|
|
99
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
100
|
+
--color-primary: var(--primary);
|
|
101
|
+
--color-success: var(--success);
|
|
102
|
+
--color-success-foreground: var(--success-foreground);
|
|
103
|
+
--color-warning: var(--warning);
|
|
104
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
105
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
106
|
+
--color-popover: var(--popover);
|
|
107
|
+
--color-card-foreground: var(--card-foreground);
|
|
108
|
+
--color-card: var(--card);
|
|
109
|
+
|
|
110
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
111
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
112
|
+
--radius-lg: var(--radius);
|
|
113
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
114
|
+
--radius-2xl: calc(var(--radius) + 8px);
|
|
115
|
+
--radius-3xl: calc(var(--radius) + 12px);
|
|
116
|
+
--radius-4xl: calc(var(--radius) + 16px);
|
|
117
|
+
--radius-5xl: calc(var(--radius) + 20px);
|
|
118
|
+
|
|
119
|
+
/* Animations */
|
|
120
|
+
--animate-fade-up: fade-up 0.5s ease-out;
|
|
121
|
+
@keyframes fade-up {
|
|
122
|
+
from {
|
|
123
|
+
opacity: 0;
|
|
124
|
+
transform: translateY(40px);
|
|
125
|
+
}
|
|
126
|
+
to {
|
|
127
|
+
opacity: 1;
|
|
128
|
+
transform: translateY(0);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@layer base {
|
|
134
|
+
* {
|
|
135
|
+
@apply border-border outline-ring/50 selection:bg-primary selection:text-primary-foreground;
|
|
136
|
+
}
|
|
137
|
+
body {
|
|
138
|
+
@apply bg-background text-foreground h-full w-full antialiased;
|
|
139
|
+
}
|
|
140
|
+
html {
|
|
141
|
+
@apply font-sans scroll-smooth;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* Scrollbar styles */
|
|
145
|
+
*::-webkit-scrollbar {
|
|
146
|
+
@apply w-[5px] h-[5px];
|
|
147
|
+
}
|
|
148
|
+
*::-webkit-scrollbar-track {
|
|
149
|
+
@apply bg-transparent rounded-full;
|
|
150
|
+
}
|
|
151
|
+
*::-webkit-scrollbar-thumb {
|
|
152
|
+
@apply bg-muted rounded-full;
|
|
153
|
+
}
|
|
154
|
+
*::-webkit-scrollbar-thumb:hover {
|
|
155
|
+
@apply bg-primary;
|
|
156
|
+
}
|
|
157
|
+
}
|