@mindtris/ui 0.1.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/README.md +76 -0
- package/assets/logos/favicon.svg +14 -0
- package/assets/logos/mindtris-logo.svg +17 -0
- package/assets/logos/simplifi.svg +22 -0
- package/dist/index.d.mts +3886 -0
- package/dist/index.mjs +13969 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +87 -0
- package/tokens/base/animations.css +116 -0
- package/tokens/base/colors.css +79 -0
- package/tokens/base/radii.css +12 -0
- package/tokens/base/shadows.css +10 -0
- package/tokens/base/typography.css +11 -0
- package/tokens/index.css +12 -0
- package/tokens/themes/amber.css +111 -0
- package/tokens/themes/dark.css +78 -0
- package/tokens/themes/default.css +113 -0
- package/tokens/themes/mindtris-ui.css +77 -0
- package/tokens/themes/simplifi.css +85 -0
package/package.json
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@mindtris/ui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"description": "Mindtris UI - Components, themes, and tokens",
|
|
6
|
+
"main": "./dist/index.mjs",
|
|
7
|
+
"module": "./dist/index.mjs",
|
|
8
|
+
"types": "./dist/index.d.mts",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist",
|
|
11
|
+
"tokens",
|
|
12
|
+
"assets"
|
|
13
|
+
],
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"url": "https://github.com/mindtris/mindtris-ui.git",
|
|
17
|
+
"directory": "pkg/design"
|
|
18
|
+
},
|
|
19
|
+
"publishConfig": {
|
|
20
|
+
"registry": "https://registry.npmjs.org/",
|
|
21
|
+
"access": "public"
|
|
22
|
+
},
|
|
23
|
+
"scripts": {
|
|
24
|
+
"build": "tsup",
|
|
25
|
+
"prepublishOnly": "pnpm run build"
|
|
26
|
+
},
|
|
27
|
+
"exports": {
|
|
28
|
+
".": {
|
|
29
|
+
"import": "./dist/index.mjs",
|
|
30
|
+
"types": "./dist/index.d.mts"
|
|
31
|
+
},
|
|
32
|
+
"./tokens": "./tokens/index.css",
|
|
33
|
+
"./tokens/*": "./tokens/*.css"
|
|
34
|
+
},
|
|
35
|
+
"peerDependencies": {
|
|
36
|
+
"@headlessui/react": "*",
|
|
37
|
+
"@radix-ui/react-alert-dialog": "*",
|
|
38
|
+
"@radix-ui/react-avatar": "*",
|
|
39
|
+
"@radix-ui/react-checkbox": "*",
|
|
40
|
+
"@radix-ui/react-collapsible": "*",
|
|
41
|
+
"@radix-ui/react-context-menu": "*",
|
|
42
|
+
"@radix-ui/react-dialog": "*",
|
|
43
|
+
"@radix-ui/react-dropdown-menu": "*",
|
|
44
|
+
"@radix-ui/react-hover-card": "*",
|
|
45
|
+
"@radix-ui/react-menubar": "*",
|
|
46
|
+
"@radix-ui/react-navigation-menu": "*",
|
|
47
|
+
"@radix-ui/react-popover": "*",
|
|
48
|
+
"@radix-ui/react-progress": "*",
|
|
49
|
+
"@radix-ui/react-radio-group": "*",
|
|
50
|
+
"@radix-ui/react-scroll-area": "*",
|
|
51
|
+
"@radix-ui/react-slider": "*",
|
|
52
|
+
"@radix-ui/react-slot": "*",
|
|
53
|
+
"@radix-ui/react-switch": "*",
|
|
54
|
+
"@radix-ui/react-tooltip": "*",
|
|
55
|
+
"@tiptap/extension-image": "*",
|
|
56
|
+
"@tiptap/extension-link": "*",
|
|
57
|
+
"@tiptap/extension-placeholder": "*",
|
|
58
|
+
"@tiptap/pm": "*",
|
|
59
|
+
"@tiptap/react": "*",
|
|
60
|
+
"@tiptap/starter-kit": "*",
|
|
61
|
+
"clsx": "*",
|
|
62
|
+
"cmdk": "*",
|
|
63
|
+
"embla-carousel-react": "*",
|
|
64
|
+
"input-otp": "*",
|
|
65
|
+
"lucide-react": "*",
|
|
66
|
+
"next": "*",
|
|
67
|
+
"next-themes": "*",
|
|
68
|
+
"react": "*",
|
|
69
|
+
"react-day-picker": "*",
|
|
70
|
+
"react-dom": "*",
|
|
71
|
+
"react-hook-form": "*",
|
|
72
|
+
"react-resizable-panels": "*",
|
|
73
|
+
"recharts": "*",
|
|
74
|
+
"tailwind-merge": "*",
|
|
75
|
+
"vaul": "*"
|
|
76
|
+
},
|
|
77
|
+
"devDependencies": {
|
|
78
|
+
"tsup": "^8.4.0",
|
|
79
|
+
"@radix-ui/react-alert-dialog": "^1.1.15",
|
|
80
|
+
"@radix-ui/react-context-menu": "^2.2.16",
|
|
81
|
+
"@radix-ui/react-menubar": "^1.1.16",
|
|
82
|
+
"clsx": "^2.1.1",
|
|
83
|
+
"embla-carousel-react": "^8.6.0",
|
|
84
|
+
"tailwind-merge": "^3.0.1",
|
|
85
|
+
"typescript": "^5.7.3"
|
|
86
|
+
}
|
|
87
|
+
}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Design system — animation tokens (human-centric)
|
|
3
|
+
*
|
|
4
|
+
* Human-centric animation principles:
|
|
5
|
+
* - Fast enough to feel responsive (< 200ms for micro-interactions)
|
|
6
|
+
* - Slow enough to be perceived (> 100ms minimum)
|
|
7
|
+
* - Easing functions that feel natural (ease-out for entrances, ease-in for exits)
|
|
8
|
+
* - Consistent timing across similar interactions
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
/* Duration tokens - human-centric timing */
|
|
13
|
+
--duration-instant: 0ms; /* Immediate, no animation */
|
|
14
|
+
--duration-fast: 100ms; /* Micro-interactions (hover, focus) */
|
|
15
|
+
--duration-base: 150ms; /* Standard interactions (button clicks) */
|
|
16
|
+
--duration-normal: 200ms; /* Common transitions (dropdowns, modals) */
|
|
17
|
+
--duration-slow: 300ms; /* Larger movements (page transitions) */
|
|
18
|
+
--duration-slower: 500ms; /* Complex animations */
|
|
19
|
+
|
|
20
|
+
/* Easing functions - natural motion curves */
|
|
21
|
+
--ease-linear: linear;
|
|
22
|
+
--ease-in: cubic-bezier(0.4, 0, 1, 1); /* Accelerate */
|
|
23
|
+
--ease-out: cubic-bezier(0, 0, 0.2, 1); /* Decelerate (most common) */
|
|
24
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Accelerate then decelerate */
|
|
25
|
+
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Playful bounce */
|
|
26
|
+
|
|
27
|
+
/* Transition presets - commonly used combinations */
|
|
28
|
+
--transition-fast: 100ms cubic-bezier(0, 0, 0.2, 1);
|
|
29
|
+
--transition-base: 150ms cubic-bezier(0, 0, 0.2, 1);
|
|
30
|
+
--transition-normal: 200ms cubic-bezier(0, 0, 0.2, 1);
|
|
31
|
+
--transition-slow: 300ms cubic-bezier(0, 0, 0.2, 1);
|
|
32
|
+
|
|
33
|
+
/* Specific property transitions */
|
|
34
|
+
--transition-colors: color 150ms cubic-bezier(0, 0, 0.2, 1), background-color 150ms cubic-bezier(0, 0, 0.2, 1), border-color 150ms cubic-bezier(0, 0, 0.2, 1);
|
|
35
|
+
--transition-opacity: opacity 200ms cubic-bezier(0, 0, 0.2, 1);
|
|
36
|
+
--transition-transform: transform 200ms cubic-bezier(0, 0, 0.2, 1);
|
|
37
|
+
--transition-all: all 200ms cubic-bezier(0, 0, 0.2, 1);
|
|
38
|
+
|
|
39
|
+
/* Animation keyframes */
|
|
40
|
+
--animate-spin: spin 1s linear infinite;
|
|
41
|
+
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
42
|
+
--animate-bounce: bounce 1s infinite;
|
|
43
|
+
--animate-fade-in: fadeIn 200ms cubic-bezier(0, 0, 0.2, 1);
|
|
44
|
+
--animate-fade-out: fadeOut 150ms cubic-bezier(0.4, 0, 1, 1);
|
|
45
|
+
--animate-slide-up: slideUp 200ms cubic-bezier(0, 0, 0.2, 1);
|
|
46
|
+
--animate-slide-down: slideDown 200ms cubic-bezier(0, 0, 0.2, 1);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@keyframes spin {
|
|
50
|
+
from {
|
|
51
|
+
transform: rotate(0deg);
|
|
52
|
+
}
|
|
53
|
+
to {
|
|
54
|
+
transform: rotate(360deg);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@keyframes pulse {
|
|
59
|
+
0%, 100% {
|
|
60
|
+
opacity: 1;
|
|
61
|
+
}
|
|
62
|
+
50% {
|
|
63
|
+
opacity: 0.5;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@keyframes bounce {
|
|
68
|
+
0%, 100% {
|
|
69
|
+
transform: translateY(-25%);
|
|
70
|
+
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
71
|
+
}
|
|
72
|
+
50% {
|
|
73
|
+
transform: translateY(0);
|
|
74
|
+
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@keyframes fadeIn {
|
|
79
|
+
from {
|
|
80
|
+
opacity: 0;
|
|
81
|
+
}
|
|
82
|
+
to {
|
|
83
|
+
opacity: 1;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@keyframes fadeOut {
|
|
88
|
+
from {
|
|
89
|
+
opacity: 1;
|
|
90
|
+
}
|
|
91
|
+
to {
|
|
92
|
+
opacity: 0;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@keyframes slideUp {
|
|
97
|
+
from {
|
|
98
|
+
opacity: 0;
|
|
99
|
+
transform: translateY(8px);
|
|
100
|
+
}
|
|
101
|
+
to {
|
|
102
|
+
opacity: 1;
|
|
103
|
+
transform: translateY(0);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@keyframes slideDown {
|
|
108
|
+
from {
|
|
109
|
+
opacity: 0;
|
|
110
|
+
transform: translateY(-8px);
|
|
111
|
+
}
|
|
112
|
+
to {
|
|
113
|
+
opacity: 1;
|
|
114
|
+
transform: translateY(0);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Design system — base semantic color tokens
|
|
3
|
+
* Theme files override these via :root and .dark.
|
|
4
|
+
* Names align with shadcn/reference for theme customizer compatibility.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
:root {
|
|
8
|
+
--background: #ffffff;
|
|
9
|
+
--foreground: #0a0a0a;
|
|
10
|
+
--card: #ffffff;
|
|
11
|
+
--card-foreground: #0a0a0a;
|
|
12
|
+
/* Control surface (inputs, textareas, etc.) */
|
|
13
|
+
--field: #ffffff;
|
|
14
|
+
--popover: #ffffff;
|
|
15
|
+
--popover-foreground: #0a0a0a;
|
|
16
|
+
--primary: #171717;
|
|
17
|
+
--primary-foreground: #fafafa;
|
|
18
|
+
--secondary: #f5f5f5;
|
|
19
|
+
--secondary-foreground: #171717;
|
|
20
|
+
--muted: #f5f5f5;
|
|
21
|
+
--muted-foreground: #737373;
|
|
22
|
+
--accent: #f5f5f5;
|
|
23
|
+
--accent-foreground: #171717;
|
|
24
|
+
--destructive: #e7000b;
|
|
25
|
+
--destructive-foreground: #ffffff;
|
|
26
|
+
--border: #e5e5e5;
|
|
27
|
+
--input: #e5e5e5;
|
|
28
|
+
--ring: #a1a1a1;
|
|
29
|
+
--chart-1: #91c5ff;
|
|
30
|
+
--chart-2: #3a81f6;
|
|
31
|
+
--chart-3: #2563ef;
|
|
32
|
+
--chart-4: #1a4eda;
|
|
33
|
+
--chart-5: #1f3fad;
|
|
34
|
+
--sidebar: #fafafa;
|
|
35
|
+
--sidebar-foreground: #0a0a0a;
|
|
36
|
+
--sidebar-primary: #171717;
|
|
37
|
+
--sidebar-primary-foreground: #fafafa;
|
|
38
|
+
--sidebar-accent: #f5f5f5;
|
|
39
|
+
--sidebar-accent-foreground: #171717;
|
|
40
|
+
--sidebar-border: #e5e5e5;
|
|
41
|
+
--sidebar-ring: #a1a1a1;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.dark {
|
|
45
|
+
--background: #0a0a0a;
|
|
46
|
+
--foreground: #fafafa;
|
|
47
|
+
--card: #171717;
|
|
48
|
+
--card-foreground: #fafafa;
|
|
49
|
+
/* Control surface (inputs, textareas, etc.) */
|
|
50
|
+
--field: #171717;
|
|
51
|
+
--popover: #262626;
|
|
52
|
+
--popover-foreground: #fafafa;
|
|
53
|
+
--primary: #e5e5e5;
|
|
54
|
+
--primary-foreground: #171717;
|
|
55
|
+
--secondary: #262626;
|
|
56
|
+
--secondary-foreground: #fafafa;
|
|
57
|
+
--muted: #262626;
|
|
58
|
+
--muted-foreground: #a1a1a1;
|
|
59
|
+
--accent: #404040;
|
|
60
|
+
--accent-foreground: #fafafa;
|
|
61
|
+
--destructive: #ff6467;
|
|
62
|
+
--destructive-foreground: #fafafa;
|
|
63
|
+
--border: #282828;
|
|
64
|
+
--input: #343434;
|
|
65
|
+
--ring: #737373;
|
|
66
|
+
--chart-1: #91c5ff;
|
|
67
|
+
--chart-2: #3a81f6;
|
|
68
|
+
--chart-3: #2563ef;
|
|
69
|
+
--chart-4: #1a4eda;
|
|
70
|
+
--chart-5: #1f3fad;
|
|
71
|
+
--sidebar: #171717;
|
|
72
|
+
--sidebar-foreground: #fafafa;
|
|
73
|
+
--sidebar-primary: #1447e6;
|
|
74
|
+
--sidebar-primary-foreground: #fafafa;
|
|
75
|
+
--sidebar-accent: #262626;
|
|
76
|
+
--sidebar-accent-foreground: #fafafa;
|
|
77
|
+
--sidebar-border: #282828;
|
|
78
|
+
--sidebar-ring: #525252;
|
|
79
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Design system — border radius tokens
|
|
3
|
+
* Single --radius used by shadcn/customizer; optional scale for components.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
--radius: 0.5rem;
|
|
8
|
+
--radius-sm: 0.25rem;
|
|
9
|
+
--radius-md: 0.5rem;
|
|
10
|
+
--radius-lg: 0.75rem;
|
|
11
|
+
--radius-xl: 1rem;
|
|
12
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Design system — shadow tokens
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
7
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
8
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
9
|
+
--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
10
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Design system — typography tokens
|
|
3
|
+
* App loads fonts (e.g. next/font); base sets --font-sans, --font-mono.
|
|
4
|
+
* Theme presets can override these for theme-switchable fonts.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
:root {
|
|
8
|
+
--font-sans: var(--font-inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
9
|
+
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
|
10
|
+
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
|
|
11
|
+
}
|
package/tokens/index.css
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Design system tokens — single entrypoint
|
|
3
|
+
* Imports base tokens + default theme.
|
|
4
|
+
* Consuming apps: @import this file in root CSS.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
@import './base/colors.css';
|
|
8
|
+
@import './base/typography.css';
|
|
9
|
+
@import './base/radii.css';
|
|
10
|
+
@import './base/shadows.css';
|
|
11
|
+
@import './base/animations.css';
|
|
12
|
+
@import './themes/default.css';
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Mindtris Amber — warm amber/yellow palette
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--background: #ffffff;
|
|
7
|
+
--foreground: #262626;
|
|
8
|
+
--card: #ffffff;
|
|
9
|
+
--card-foreground: #262626;
|
|
10
|
+
--popover: #ffffff;
|
|
11
|
+
--popover-foreground: #262626;
|
|
12
|
+
--primary: #f59e0b;
|
|
13
|
+
--primary-foreground: #000000;
|
|
14
|
+
--secondary: #f3f4f6;
|
|
15
|
+
--secondary-foreground: #4b5563;
|
|
16
|
+
--muted: #f9fafb;
|
|
17
|
+
--muted-foreground: #6b7280;
|
|
18
|
+
--accent: #fffbeb;
|
|
19
|
+
--accent-foreground: #92400e;
|
|
20
|
+
--destructive: #ef4444;
|
|
21
|
+
--destructive-foreground: #ffffff;
|
|
22
|
+
--border: #e5e7eb;
|
|
23
|
+
--input: #e5e7eb;
|
|
24
|
+
--ring: #f59e0b;
|
|
25
|
+
--chart-1: #f59e0b;
|
|
26
|
+
--chart-2: #d97706;
|
|
27
|
+
--chart-3: #b45309;
|
|
28
|
+
--chart-4: #92400e;
|
|
29
|
+
--chart-5: #78350f;
|
|
30
|
+
--sidebar: #f9fafb;
|
|
31
|
+
--sidebar-foreground: #262626;
|
|
32
|
+
--sidebar-primary: #f59e0b;
|
|
33
|
+
--sidebar-primary-foreground: #ffffff;
|
|
34
|
+
--sidebar-accent: #fffbeb;
|
|
35
|
+
--sidebar-accent-foreground: #92400e;
|
|
36
|
+
--sidebar-border: #e5e7eb;
|
|
37
|
+
--sidebar-ring: #f59e0b;
|
|
38
|
+
--font-sans: Inter, sans-serif;
|
|
39
|
+
--font-serif: Source Serif 4, serif;
|
|
40
|
+
--font-mono: JetBrains Mono, monospace;
|
|
41
|
+
--radius: 0.375rem;
|
|
42
|
+
--shadow-x: 0px;
|
|
43
|
+
--shadow-y: 4px;
|
|
44
|
+
--shadow-blur: 8px;
|
|
45
|
+
--shadow-spread: -1px;
|
|
46
|
+
--shadow-opacity: 0.1;
|
|
47
|
+
--shadow-color: hsl(0 0% 0%);
|
|
48
|
+
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
|
|
49
|
+
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
|
|
50
|
+
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
|
|
51
|
+
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
|
|
52
|
+
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
|
|
53
|
+
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
|
|
54
|
+
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
|
|
55
|
+
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
|
|
56
|
+
--tracking-normal: 0em;
|
|
57
|
+
--spacing: 0.25rem;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.dark {
|
|
61
|
+
--background: #171717;
|
|
62
|
+
--foreground: #e5e5e5;
|
|
63
|
+
--card: #262626;
|
|
64
|
+
--card-foreground: #e5e5e5;
|
|
65
|
+
--popover: #262626;
|
|
66
|
+
--popover-foreground: #e5e5e5;
|
|
67
|
+
--primary: #f59e0b;
|
|
68
|
+
--primary-foreground: #000000;
|
|
69
|
+
--secondary: #262626;
|
|
70
|
+
--secondary-foreground: #e5e5e5;
|
|
71
|
+
--muted: #1f1f1f;
|
|
72
|
+
--muted-foreground: #a3a3a3;
|
|
73
|
+
--accent: #92400e;
|
|
74
|
+
--accent-foreground: #fde68a;
|
|
75
|
+
--destructive: #ef4444;
|
|
76
|
+
--destructive-foreground: #ffffff;
|
|
77
|
+
--border: #404040;
|
|
78
|
+
--input: #404040;
|
|
79
|
+
--ring: #f59e0b;
|
|
80
|
+
--chart-1: #fbbf24;
|
|
81
|
+
--chart-2: #d97706;
|
|
82
|
+
--chart-3: #92400e;
|
|
83
|
+
--chart-4: #b45309;
|
|
84
|
+
--chart-5: #92400e;
|
|
85
|
+
--sidebar: #0f0f0f;
|
|
86
|
+
--sidebar-foreground: #e5e5e5;
|
|
87
|
+
--sidebar-primary: #f59e0b;
|
|
88
|
+
--sidebar-primary-foreground: #ffffff;
|
|
89
|
+
--sidebar-accent: #92400e;
|
|
90
|
+
--sidebar-accent-foreground: #fde68a;
|
|
91
|
+
--sidebar-border: #404040;
|
|
92
|
+
--sidebar-ring: #f59e0b;
|
|
93
|
+
--font-sans: Inter, sans-serif;
|
|
94
|
+
--font-serif: Source Serif 4, serif;
|
|
95
|
+
--font-mono: JetBrains Mono, monospace;
|
|
96
|
+
--radius: 0.375rem;
|
|
97
|
+
--shadow-x: 0px;
|
|
98
|
+
--shadow-y: 4px;
|
|
99
|
+
--shadow-blur: 8px;
|
|
100
|
+
--shadow-spread: -1px;
|
|
101
|
+
--shadow-opacity: 0.1;
|
|
102
|
+
--shadow-color: hsl(0 0% 0%);
|
|
103
|
+
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
|
|
104
|
+
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
|
|
105
|
+
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
|
|
106
|
+
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
|
|
107
|
+
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
|
|
108
|
+
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
|
|
109
|
+
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
|
|
110
|
+
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
|
|
111
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Mindtris Dark — alternate dark-focused preset
|
|
3
|
+
* Can be combined or used as a separate theme option.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
/* Light mode: neutral, minimal */
|
|
8
|
+
--background: 0 0% 98%;
|
|
9
|
+
--foreground: 0 0% 9%;
|
|
10
|
+
--card: 0 0% 100%;
|
|
11
|
+
--card-foreground: 0 0% 9%;
|
|
12
|
+
--popover: 0 0% 100%;
|
|
13
|
+
--popover-foreground: 0 0% 9%;
|
|
14
|
+
--primary: 0 0% 15%;
|
|
15
|
+
--primary-foreground: 0 0% 98%;
|
|
16
|
+
--secondary: 0 0% 96%;
|
|
17
|
+
--secondary-foreground: 0 0% 9%;
|
|
18
|
+
--muted: 0 0% 96%;
|
|
19
|
+
--muted-foreground: 0 0% 45%;
|
|
20
|
+
--accent: 0 0% 96%;
|
|
21
|
+
--accent-foreground: 0 0% 9%;
|
|
22
|
+
--destructive: 0 84% 60%;
|
|
23
|
+
--destructive-foreground: 0 0% 100%;
|
|
24
|
+
--border: 0 0% 90%;
|
|
25
|
+
--input: 0 0% 90%;
|
|
26
|
+
--ring: 0 0% 15%;
|
|
27
|
+
--chart-1: 0 0% 15%;
|
|
28
|
+
--chart-2: 0 0% 45%;
|
|
29
|
+
--chart-3: 0 0% 64%;
|
|
30
|
+
--chart-4: 0 0% 9%;
|
|
31
|
+
--chart-5: 0 0% 32%;
|
|
32
|
+
--radius: 0.5rem;
|
|
33
|
+
--font-sans: var(--font-inter, "Inter", ui-sans-serif, system-ui, sans-serif);
|
|
34
|
+
--font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
35
|
+
--sidebar: 0 0% 100%;
|
|
36
|
+
--sidebar-foreground: 0 0% 9%;
|
|
37
|
+
--sidebar-primary: 0 0% 15%;
|
|
38
|
+
--sidebar-primary-foreground: 0 0% 98%;
|
|
39
|
+
--sidebar-accent: 0 0% 96%;
|
|
40
|
+
--sidebar-accent-foreground: 0 0% 9%;
|
|
41
|
+
--sidebar-border: 0 0% 90%;
|
|
42
|
+
--sidebar-ring: 0 0% 15%;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.dark {
|
|
46
|
+
--background: 0 0% 4%;
|
|
47
|
+
--foreground: 0 0% 93%;
|
|
48
|
+
--card: 0 0% 9%;
|
|
49
|
+
--card-foreground: 0 0% 93%;
|
|
50
|
+
--popover: 0 0% 9%;
|
|
51
|
+
--popover-foreground: 0 0% 93%;
|
|
52
|
+
--primary: 0 0% 45%;
|
|
53
|
+
--primary-foreground: 0 0% 4%;
|
|
54
|
+
--secondary: 0 0% 15%;
|
|
55
|
+
--secondary-foreground: 0 0% 93%;
|
|
56
|
+
--muted: 0 0% 15%;
|
|
57
|
+
--muted-foreground: 0 0% 64%;
|
|
58
|
+
--accent: 0 0% 15%;
|
|
59
|
+
--accent-foreground: 0 0% 93%;
|
|
60
|
+
--destructive: 0 72% 51%;
|
|
61
|
+
--destructive-foreground: 0 0% 100%;
|
|
62
|
+
--border: 0 0% 15%;
|
|
63
|
+
--input: 0 0% 15%;
|
|
64
|
+
--ring: 0 0% 45%;
|
|
65
|
+
--chart-1: 0 0% 45%;
|
|
66
|
+
--chart-2: 0 0% 64%;
|
|
67
|
+
--chart-3: 0 0% 32%;
|
|
68
|
+
--chart-4: 0 0% 93%;
|
|
69
|
+
--chart-5: 0 0% 83%;
|
|
70
|
+
--sidebar: 0 0% 9%;
|
|
71
|
+
--sidebar-foreground: 0 0% 93%;
|
|
72
|
+
--sidebar-primary: 0 0% 45%;
|
|
73
|
+
--sidebar-primary-foreground: 0 0% 4%;
|
|
74
|
+
--sidebar-accent: 0 0% 15%;
|
|
75
|
+
--sidebar-accent-foreground: 0 0% 93%;
|
|
76
|
+
--sidebar-border: 0 0% 15%;
|
|
77
|
+
--sidebar-ring: 0 0% 45%;
|
|
78
|
+
}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Default theme (from tweakcn export)
|
|
3
|
+
* Stored as hex/rgb/oklch where applicable. Tailwind semantic mapping uses these vars directly.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
--background: #ffffff;
|
|
8
|
+
--foreground: #0a0a0a;
|
|
9
|
+
--card: #ffffff;
|
|
10
|
+
--card-foreground: #0a0a0a;
|
|
11
|
+
--popover: #ffffff;
|
|
12
|
+
--popover-foreground: #0a0a0a;
|
|
13
|
+
--primary: #171717;
|
|
14
|
+
--primary-foreground: #fafafa;
|
|
15
|
+
--secondary: #f5f5f5;
|
|
16
|
+
--secondary-foreground: #171717;
|
|
17
|
+
--muted: #f5f5f5;
|
|
18
|
+
--muted-foreground: #737373;
|
|
19
|
+
--accent: #f5f5f5;
|
|
20
|
+
--accent-foreground: #171717;
|
|
21
|
+
--destructive: #e7000b;
|
|
22
|
+
--destructive-foreground: #ffffff;
|
|
23
|
+
--border: #e5e5e5;
|
|
24
|
+
--input: #e5e5e5;
|
|
25
|
+
--ring: #a1a1a1;
|
|
26
|
+
--chart-1: #91c5ff;
|
|
27
|
+
--chart-2: #3a81f6;
|
|
28
|
+
--chart-3: #2563ef;
|
|
29
|
+
--chart-4: #1a4eda;
|
|
30
|
+
--chart-5: #1f3fad;
|
|
31
|
+
--sidebar: #fafafa;
|
|
32
|
+
--sidebar-foreground: #0a0a0a;
|
|
33
|
+
--sidebar-primary: #171717;
|
|
34
|
+
--sidebar-primary-foreground: #fafafa;
|
|
35
|
+
--sidebar-accent: #f5f5f5;
|
|
36
|
+
--sidebar-accent-foreground: #171717;
|
|
37
|
+
--sidebar-border: #e5e5e5;
|
|
38
|
+
--sidebar-ring: #a1a1a1;
|
|
39
|
+
--font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
|
|
40
|
+
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
|
41
|
+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
42
|
+
--radius: 0.625rem;
|
|
43
|
+
--shadow-x: 0;
|
|
44
|
+
--shadow-y: 1px;
|
|
45
|
+
--shadow-blur: 3px;
|
|
46
|
+
--shadow-spread: 0px;
|
|
47
|
+
--shadow-opacity: 0.1;
|
|
48
|
+
--shadow-color: oklch(0 0 0);
|
|
49
|
+
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
50
|
+
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
51
|
+
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
52
|
+
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
53
|
+
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
|
54
|
+
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
|
55
|
+
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
|
56
|
+
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
|
57
|
+
--tracking-normal: 0em;
|
|
58
|
+
--spacing: 0.25rem;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.dark {
|
|
62
|
+
--background: #0a0a0a;
|
|
63
|
+
--foreground: #fafafa;
|
|
64
|
+
--card: #171717;
|
|
65
|
+
--card-foreground: #fafafa;
|
|
66
|
+
--popover: #262626;
|
|
67
|
+
--popover-foreground: #fafafa;
|
|
68
|
+
--primary: #e5e5e5;
|
|
69
|
+
--primary-foreground: #171717;
|
|
70
|
+
--secondary: #262626;
|
|
71
|
+
--secondary-foreground: #fafafa;
|
|
72
|
+
--muted: #262626;
|
|
73
|
+
--muted-foreground: #a1a1a1;
|
|
74
|
+
--accent: #404040;
|
|
75
|
+
--accent-foreground: #fafafa;
|
|
76
|
+
--destructive: #ff6467;
|
|
77
|
+
--destructive-foreground: #fafafa;
|
|
78
|
+
--border: #282828;
|
|
79
|
+
--input: #343434;
|
|
80
|
+
--ring: #737373;
|
|
81
|
+
--chart-1: #91c5ff;
|
|
82
|
+
--chart-2: #3a81f6;
|
|
83
|
+
--chart-3: #2563ef;
|
|
84
|
+
--chart-4: #1a4eda;
|
|
85
|
+
--chart-5: #1f3fad;
|
|
86
|
+
--sidebar: #171717;
|
|
87
|
+
--sidebar-foreground: #fafafa;
|
|
88
|
+
--sidebar-primary: #1447e6;
|
|
89
|
+
--sidebar-primary-foreground: #fafafa;
|
|
90
|
+
--sidebar-accent: #262626;
|
|
91
|
+
--sidebar-accent-foreground: #fafafa;
|
|
92
|
+
--sidebar-border: #282828;
|
|
93
|
+
--sidebar-ring: #525252;
|
|
94
|
+
--font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
|
|
95
|
+
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
|
96
|
+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
97
|
+
--radius: 0.625rem;
|
|
98
|
+
--shadow-x: 0;
|
|
99
|
+
--shadow-y: 1px;
|
|
100
|
+
--shadow-blur: 3px;
|
|
101
|
+
--shadow-spread: 0px;
|
|
102
|
+
--shadow-opacity: 0.1;
|
|
103
|
+
--shadow-color: oklch(0 0 0);
|
|
104
|
+
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
105
|
+
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
|
106
|
+
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
107
|
+
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
|
108
|
+
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
|
109
|
+
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
|
110
|
+
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
|
111
|
+
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
|
112
|
+
}
|
|
113
|
+
|