@invana/styling 0.0.4
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 +165 -0
- package/package.json +103 -0
- package/src/base.css +41 -0
- package/src/index.css +151 -0
- package/src/theme.css +80 -0
- package/src/themes/default.css +96 -0
- package/src/themes/index.ts +6 -0
- package/src/themes/presets-base.css +97 -0
- package/src/themes/presets.css +1946 -0
- package/src/themes/tailwind.css +105 -0
- package/src/themes/vite.css +107 -0
- package/src/themes.config.ts +212 -0
package/README.md
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
# @invana/styling
|
|
2
|
+
|
|
3
|
+
Invana's reusable TailwindCSS 4 design system. This package provides a consistent set of design tokens, theme configuration, and base styles that can be used across all Invana projects.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
This expects tailwindcss 4
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @invana/styling
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @invana/styling
|
|
13
|
+
# or
|
|
14
|
+
yarn add @invana/styling
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
### In CSS Files
|
|
20
|
+
|
|
21
|
+
Import the complete stylesheet with theme and base styles:
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
/* 1. Import Tailwind first */
|
|
25
|
+
@import "tailwindcss";
|
|
26
|
+
|
|
27
|
+
/* 2. Define YOUR app's source paths */
|
|
28
|
+
@source "./components/**/*.{js,ts,jsx,tsx}";
|
|
29
|
+
@source "./pages/**/*.{js,ts,jsx,tsx}";
|
|
30
|
+
|
|
31
|
+
/* 3. Import the shared theme */
|
|
32
|
+
@import "@invana/styling/index.css";
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Or import specific parts:
|
|
37
|
+
|
|
38
|
+
```css
|
|
39
|
+
/* 1. Import Tailwind first */
|
|
40
|
+
@import "tailwindcss";
|
|
41
|
+
|
|
42
|
+
/* 2. Define YOUR app's source paths */
|
|
43
|
+
@source "./components/**/*.{js,ts,jsx,tsx}";
|
|
44
|
+
@source "./pages/**/*.{js,ts,jsx,tsx}";
|
|
45
|
+
|
|
46
|
+
/* 3. Import the shared theme */
|
|
47
|
+
@import "@invana/styling/index.css";
|
|
48
|
+
/* Import just the theme */
|
|
49
|
+
@import "@invana/styling/theme";
|
|
50
|
+
|
|
51
|
+
/* Import just the base styles */
|
|
52
|
+
@import "@invana/styling/base";
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### In React/Vite Projects
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
// In your main entry file (e.g., main.tsx or App.tsx)
|
|
59
|
+
import "@invana/styling";
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### In the Monorepo
|
|
63
|
+
|
|
64
|
+
This package is already set up for use within this monorepo. Simply import it in your CSS files:
|
|
65
|
+
|
|
66
|
+
```css
|
|
67
|
+
/* In your globals.css or main CSS file */
|
|
68
|
+
@import "@invana/styling";
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Features
|
|
72
|
+
|
|
73
|
+
- 🎨 **Design Tokens**: Consistent color palette with semantic naming
|
|
74
|
+
- 🌓 **Dark Mode**: Automatic dark mode support via `prefers-color-scheme`
|
|
75
|
+
- 📦 **Modular**: Import only what you need
|
|
76
|
+
- 🎯 **TailwindCSS v4**: Built with the latest TailwindCSS features using `@theme` directive
|
|
77
|
+
- 🔧 **Customizable**: Easy to extend and override
|
|
78
|
+
- 📱 **Responsive**: Container configuration with responsive breakpoints
|
|
79
|
+
|
|
80
|
+
## Design Tokens
|
|
81
|
+
|
|
82
|
+
### Colors
|
|
83
|
+
|
|
84
|
+
All colors follow the CSS variable pattern and can be used with TailwindCSS utilities:
|
|
85
|
+
|
|
86
|
+
- `background`, `foreground` - Main background and text colors
|
|
87
|
+
- `primary`, `primary-foreground` - Primary brand colors
|
|
88
|
+
- `secondary`, `secondary-foreground` - Secondary UI elements
|
|
89
|
+
- `destructive`, `destructive-foreground` - Error and dangerous actions
|
|
90
|
+
- `muted`, `muted-foreground` - Muted/subdued content
|
|
91
|
+
- `accent`, `accent-foreground` - Accent highlights
|
|
92
|
+
- `popover`, `popover-foreground` - Popover/dropdown backgrounds
|
|
93
|
+
- `card`, `card-foreground` - Card component colors
|
|
94
|
+
- `border`, `input`, `ring` - Border and input styling
|
|
95
|
+
|
|
96
|
+
### Border Radius
|
|
97
|
+
|
|
98
|
+
- `--radius`: Base radius (0.5rem)
|
|
99
|
+
- `--radius-lg`: Large radius
|
|
100
|
+
- `--radius-md`: Medium radius
|
|
101
|
+
- `--radius-sm`: Small radius
|
|
102
|
+
|
|
103
|
+
### Animations
|
|
104
|
+
|
|
105
|
+
- `accordion-down`: Accordion expand animation
|
|
106
|
+
- `accordion-up`: Accordion collapse animation
|
|
107
|
+
|
|
108
|
+
### Container
|
|
109
|
+
|
|
110
|
+
- Centered by default
|
|
111
|
+
- 2rem padding
|
|
112
|
+
- Max width of 1400px on 2xl screens
|
|
113
|
+
|
|
114
|
+
## Customization
|
|
115
|
+
|
|
116
|
+
You can override any variable by defining it after importing:
|
|
117
|
+
|
|
118
|
+
```css
|
|
119
|
+
@import "@invana/styling";
|
|
120
|
+
|
|
121
|
+
@theme {
|
|
122
|
+
--color-primary: hsl(270 100% 50%); /* Override primary color */
|
|
123
|
+
--radius: 1rem; /* Increase border radius */
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## Publishing to NPM
|
|
128
|
+
|
|
129
|
+
```bash
|
|
130
|
+
# Make sure you're logged in to npm
|
|
131
|
+
npm login
|
|
132
|
+
|
|
133
|
+
# Publish the package
|
|
134
|
+
cd packages/styling
|
|
135
|
+
npm publish
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### Updating Versions
|
|
139
|
+
|
|
140
|
+
```bash
|
|
141
|
+
# Update version in package.json
|
|
142
|
+
cd packages/styling
|
|
143
|
+
|
|
144
|
+
# For patch update (0.1.0 -> 0.1.1)
|
|
145
|
+
npm version patch
|
|
146
|
+
|
|
147
|
+
# For minor update (0.1.0 -> 0.2.0)
|
|
148
|
+
npm version minor
|
|
149
|
+
|
|
150
|
+
# For major update (0.1.0 -> 1.0.0)
|
|
151
|
+
npm version major
|
|
152
|
+
|
|
153
|
+
# Then publish
|
|
154
|
+
npm publish
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
## Development
|
|
158
|
+
|
|
159
|
+
This package ships source CSS files directly. Your build tool (Vite, Next.js, etc.) will process the TailwindCSS directives automatically if you have TailwindCSS v4 installed.
|
|
160
|
+
|
|
161
|
+
## License
|
|
162
|
+
|
|
163
|
+
MIT © Ravi Raja Merugu
|
|
164
|
+
|
|
165
|
+
.
|
package/package.json
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@invana/styling",
|
|
3
|
+
"version": "0.0.4",
|
|
4
|
+
"description": "Invana TailwindCSS 4 Design System - Reusable styling configuration",
|
|
5
|
+
"homepage": "https://github.com/invana/design-kit#readme",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "./src/index.css",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"style": "./src/index.css",
|
|
11
|
+
"default": "./src/index.css"
|
|
12
|
+
},
|
|
13
|
+
"./index.css": {
|
|
14
|
+
"style": "./src/index.css",
|
|
15
|
+
"default": "./src/index.css"
|
|
16
|
+
},
|
|
17
|
+
"./base": {
|
|
18
|
+
"style": "./src/base.css",
|
|
19
|
+
"default": "./src/base.css"
|
|
20
|
+
},
|
|
21
|
+
"./base.css": {
|
|
22
|
+
"style": "./src/base.css",
|
|
23
|
+
"default": "./src/base.css"
|
|
24
|
+
},
|
|
25
|
+
"./theme": {
|
|
26
|
+
"style": "./src/theme.css",
|
|
27
|
+
"default": "./src/theme.css"
|
|
28
|
+
},
|
|
29
|
+
"./theme.css": {
|
|
30
|
+
"style": "./src/theme.css",
|
|
31
|
+
"default": "./src/theme.css"
|
|
32
|
+
},
|
|
33
|
+
"./themes": "./src/themes/index.ts",
|
|
34
|
+
"./themes.config": "./src/themes.config.ts",
|
|
35
|
+
"./themes/default": {
|
|
36
|
+
"style": "./src/themes/default.css",
|
|
37
|
+
"default": "./src/themes/default.css"
|
|
38
|
+
},
|
|
39
|
+
"./themes/default.css": {
|
|
40
|
+
"style": "./src/themes/default.css",
|
|
41
|
+
"default": "./src/themes/default.css"
|
|
42
|
+
},
|
|
43
|
+
"./themes/tailwind": {
|
|
44
|
+
"style": "./src/themes/tailwind.css",
|
|
45
|
+
"default": "./src/themes/tailwind.css"
|
|
46
|
+
},
|
|
47
|
+
"./themes/tailwind.css": {
|
|
48
|
+
"style": "./src/themes/tailwind.css",
|
|
49
|
+
"default": "./src/themes/tailwind.css"
|
|
50
|
+
},
|
|
51
|
+
"./themes/vite": {
|
|
52
|
+
"style": "./src/themes/vite.css",
|
|
53
|
+
"default": "./src/themes/vite.css"
|
|
54
|
+
},
|
|
55
|
+
"./themes/vite.css": {
|
|
56
|
+
"style": "./src/themes/vite.css",
|
|
57
|
+
"default": "./src/themes/vite.css"
|
|
58
|
+
},
|
|
59
|
+
"./themes/presets": {
|
|
60
|
+
"style": "./src/themes/presets.css",
|
|
61
|
+
"default": "./src/themes/presets.css"
|
|
62
|
+
},
|
|
63
|
+
"./themes/presets.css": {
|
|
64
|
+
"style": "./src/themes/presets.css",
|
|
65
|
+
"default": "./src/themes/presets.css"
|
|
66
|
+
},
|
|
67
|
+
"./themes/presets-base": {
|
|
68
|
+
"style": "./src/themes/presets-base.css",
|
|
69
|
+
"default": "./src/themes/presets-base.css"
|
|
70
|
+
},
|
|
71
|
+
"./themes/presets-base.css": {
|
|
72
|
+
"style": "./src/themes/presets-base.css",
|
|
73
|
+
"default": "./src/themes/presets-base.css"
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
"files": [
|
|
77
|
+
"src",
|
|
78
|
+
"README.md"
|
|
79
|
+
],
|
|
80
|
+
"keywords": [
|
|
81
|
+
"design-system",
|
|
82
|
+
"tailwindcss",
|
|
83
|
+
"tailwindcss-v4",
|
|
84
|
+
"css",
|
|
85
|
+
"invana"
|
|
86
|
+
],
|
|
87
|
+
"bugs": {
|
|
88
|
+
"url": "https://github.com/invana/design-kit/issues"
|
|
89
|
+
},
|
|
90
|
+
"repository": {
|
|
91
|
+
"type": "git",
|
|
92
|
+
"url": "git+https://github.com/invana/design-kit.git",
|
|
93
|
+
"directory": "packages/styling"
|
|
94
|
+
},
|
|
95
|
+
"license": "MIT",
|
|
96
|
+
"author": "Ravi Raja Merugu",
|
|
97
|
+
"peerDependencies": {
|
|
98
|
+
"tailwindcss": "^4.1.18"
|
|
99
|
+
},
|
|
100
|
+
"publishConfig": {
|
|
101
|
+
"access": "public"
|
|
102
|
+
}
|
|
103
|
+
}
|
package/src/base.css
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/* Base styles */
|
|
2
|
+
* {
|
|
3
|
+
border-color: var(--color-border);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
body {
|
|
7
|
+
background-color: var(--color-background);
|
|
8
|
+
color: var(--color-foreground);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* Themed scrollbars — Firefox */
|
|
12
|
+
* {
|
|
13
|
+
scrollbar-width: thin;
|
|
14
|
+
scrollbar-color: var(--color-border) transparent;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/* Themed scrollbars — WebKit / Chromium */
|
|
18
|
+
*::-webkit-scrollbar {
|
|
19
|
+
width: 10px;
|
|
20
|
+
height: 10px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
*::-webkit-scrollbar-track {
|
|
24
|
+
background: transparent;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
*::-webkit-scrollbar-thumb {
|
|
28
|
+
background-color: var(--color-border);
|
|
29
|
+
border: 2px solid transparent;
|
|
30
|
+
border-radius: 9999px;
|
|
31
|
+
background-clip: padding-box;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
*::-webkit-scrollbar-thumb:hover {
|
|
35
|
+
background-color: var(--color-muted-foreground);
|
|
36
|
+
background-clip: padding-box;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
*::-webkit-scrollbar-corner {
|
|
40
|
+
background: transparent;
|
|
41
|
+
}
|
package/src/index.css
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @invana/styling - Shared Design System Theme
|
|
3
|
+
*
|
|
4
|
+
* This file contains ONLY theme configuration.
|
|
5
|
+
* Each consuming app must:
|
|
6
|
+
* 1. @import "tailwindcss" first
|
|
7
|
+
* 2. @import this file
|
|
8
|
+
* 3. Define their own @source paths
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
@theme {
|
|
12
|
+
/* Container */
|
|
13
|
+
--container-center: true;
|
|
14
|
+
--container-padding: 2rem;
|
|
15
|
+
--container-screens-2xl: 1400px;
|
|
16
|
+
|
|
17
|
+
/* Font sizes */
|
|
18
|
+
--font-size-default: 1rem;
|
|
19
|
+
--font-size-xss: 0.6875rem;
|
|
20
|
+
--font-size-xs: 0.8125rem;
|
|
21
|
+
--font-size-base: 1rem;
|
|
22
|
+
--font-size-sm: 1.25rem;
|
|
23
|
+
--font-size-lg: 1.5rem;
|
|
24
|
+
--font-size-xl: 2rem;
|
|
25
|
+
--font-size-2xl: 2.5rem;
|
|
26
|
+
--font-size-3xl: 3.75rem;
|
|
27
|
+
--font-size-4xl: 4.375rem;
|
|
28
|
+
--font-size-5xl: 5.25rem;
|
|
29
|
+
|
|
30
|
+
/* Font weights */
|
|
31
|
+
--font-weight-regular: 400;
|
|
32
|
+
--font-weight-medium: 500;
|
|
33
|
+
--font-weight-semibold: 600;
|
|
34
|
+
--font-weight-bold: bold;
|
|
35
|
+
|
|
36
|
+
/* Colors */
|
|
37
|
+
--color-border: hsl(210 6% 85%);
|
|
38
|
+
--color-input: hsl(210 6% 92%);
|
|
39
|
+
--color-ring: hsl(142 70% 43%);
|
|
40
|
+
--color-background: hsl(0 0% 97%);
|
|
41
|
+
--color-foreground: hsl(210 10% 20%);
|
|
42
|
+
|
|
43
|
+
--color-primary: hsl(142 70% 43%);
|
|
44
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
45
|
+
|
|
46
|
+
--color-secondary: hsl(142 30% 95%);
|
|
47
|
+
--color-secondary-foreground: hsl(142 25% 40%);
|
|
48
|
+
|
|
49
|
+
--color-destructive: hsl(0 70% 60%);
|
|
50
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
51
|
+
|
|
52
|
+
--color-muted: hsl(210 6% 90%);
|
|
53
|
+
--color-muted-foreground: hsl(210 8% 45%);
|
|
54
|
+
|
|
55
|
+
--color-accent: hsl(142 70% 43%);
|
|
56
|
+
--color-accent-foreground: hsl(0 0% 100%);
|
|
57
|
+
|
|
58
|
+
--color-popover: hsl(0 0% 98%);
|
|
59
|
+
--color-popover-foreground: hsl(210 10% 20%);
|
|
60
|
+
|
|
61
|
+
--color-card: hsl(0 0% 100%);
|
|
62
|
+
--color-card-foreground: hsl(210 10% 20%);
|
|
63
|
+
|
|
64
|
+
/* Border Radius */
|
|
65
|
+
--radius: 0.5rem;
|
|
66
|
+
--radius-2px: 2px;
|
|
67
|
+
--radius-lg: var(--radius);
|
|
68
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
69
|
+
--radius-sm: calc(var(--radius) - 6px);
|
|
70
|
+
|
|
71
|
+
/* Animations */
|
|
72
|
+
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
73
|
+
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/*
|
|
77
|
+
* NOTE: Theme-specific color variables are defined in theme files:
|
|
78
|
+
* - themes/default.css
|
|
79
|
+
* - themes/tailwind.css
|
|
80
|
+
* - themes/vite.css
|
|
81
|
+
*
|
|
82
|
+
* These files use [data-theme="..."] selectors to apply theme-specific colors.
|
|
83
|
+
* Default fallbacks are handled by the first theme (default-light).
|
|
84
|
+
*/
|
|
85
|
+
|
|
86
|
+
@keyframes accordion-down {
|
|
87
|
+
from { height: 0; }
|
|
88
|
+
to { height: var(--radix-accordion-content-height); }
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@keyframes accordion-up {
|
|
92
|
+
from { height: var(--radix-accordion-content-height); }
|
|
93
|
+
to { height: 0; }
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* Base styles */
|
|
97
|
+
html, body {
|
|
98
|
+
font-size: 13px;
|
|
99
|
+
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
100
|
+
-webkit-font-smoothing: antialiased;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
* {
|
|
104
|
+
border-color: var(--color-border);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
body {
|
|
108
|
+
background-color: var(--color-background);
|
|
109
|
+
color: var(--color-foreground);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
button, a {
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Themed scrollbars — Firefox */
|
|
117
|
+
* {
|
|
118
|
+
scrollbar-width: thin;
|
|
119
|
+
scrollbar-color: var(--color-border) transparent;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* Themed scrollbars — WebKit / Chromium (incl. <textarea>) */
|
|
123
|
+
*::-webkit-scrollbar,
|
|
124
|
+
textarea::-webkit-scrollbar {
|
|
125
|
+
width: 10px;
|
|
126
|
+
height: 10px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
*::-webkit-scrollbar-track,
|
|
130
|
+
textarea::-webkit-scrollbar-track {
|
|
131
|
+
background: transparent;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
*::-webkit-scrollbar-thumb,
|
|
135
|
+
textarea::-webkit-scrollbar-thumb {
|
|
136
|
+
background-color: var(--color-border);
|
|
137
|
+
border: 2px solid transparent;
|
|
138
|
+
border-radius: 9999px;
|
|
139
|
+
background-clip: padding-box;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
*::-webkit-scrollbar-thumb:hover,
|
|
143
|
+
textarea::-webkit-scrollbar-thumb:hover {
|
|
144
|
+
background-color: var(--color-muted-foreground);
|
|
145
|
+
background-clip: padding-box;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
*::-webkit-scrollbar-corner,
|
|
149
|
+
textarea::-webkit-scrollbar-corner {
|
|
150
|
+
background: transparent;
|
|
151
|
+
}
|
package/src/theme.css
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/* Theme Configuration using CSS */
|
|
2
|
+
@theme {
|
|
3
|
+
/* Container */
|
|
4
|
+
--container-center: true;
|
|
5
|
+
--container-padding: 2rem;
|
|
6
|
+
--container-screens-2xl: 1400px;
|
|
7
|
+
|
|
8
|
+
/* Colors - Design tokens */
|
|
9
|
+
--color-border: hsl(214.3 31.8% 91.4%);
|
|
10
|
+
--color-input: hsl(214.3 31.8% 91.4%);
|
|
11
|
+
--color-ring: hsl(222.2 84% 4.9%);
|
|
12
|
+
--color-background: hsl(0 0% 100%);
|
|
13
|
+
--color-foreground: hsl(222.2 84% 4.9%);
|
|
14
|
+
|
|
15
|
+
--color-primary: hsl(222.2 47.4% 11.2%);
|
|
16
|
+
--color-primary-foreground: hsl(210 40% 98%);
|
|
17
|
+
|
|
18
|
+
--color-secondary: hsl(210 40% 96.1%);
|
|
19
|
+
--color-secondary-foreground: hsl(222.2 47.4% 11.2%);
|
|
20
|
+
|
|
21
|
+
--color-destructive: hsl(0 84.2% 60.2%);
|
|
22
|
+
--color-destructive-foreground: hsl(210 40% 98%);
|
|
23
|
+
|
|
24
|
+
--color-muted: hsl(210 40% 96.1%);
|
|
25
|
+
--color-muted-foreground: hsl(215.4 16.3% 46.9%);
|
|
26
|
+
|
|
27
|
+
--color-accent: hsl(210 40% 96.1%);
|
|
28
|
+
--color-accent-foreground: hsl(222.2 47.4% 11.2%);
|
|
29
|
+
|
|
30
|
+
--color-popover: hsl(0 0% 100%);
|
|
31
|
+
--color-popover-foreground: hsl(222.2 84% 4.9%);
|
|
32
|
+
|
|
33
|
+
--color-card: hsl(0 0% 100%);
|
|
34
|
+
--color-card-foreground: hsl(222.2 84% 4.9%);
|
|
35
|
+
|
|
36
|
+
/* Border Radius */
|
|
37
|
+
--radius: 0.5rem;
|
|
38
|
+
--radius-lg: var(--radius);
|
|
39
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
40
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
41
|
+
|
|
42
|
+
/* Animations */
|
|
43
|
+
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
44
|
+
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@keyframes accordion-down {
|
|
48
|
+
from { height: 0; }
|
|
49
|
+
to { height: var(--radix-accordion-content-height); }
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@keyframes accordion-up {
|
|
53
|
+
from { height: var(--radix-accordion-content-height); }
|
|
54
|
+
to { height: 0; }
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Dark mode */
|
|
58
|
+
@media (prefers-color-scheme: dark) {
|
|
59
|
+
@theme {
|
|
60
|
+
--color-background: hsl(222.2 84% 4.9%);
|
|
61
|
+
--color-foreground: hsl(210 40% 98%);
|
|
62
|
+
--color-card: hsl(222.2 84% 4.9%);
|
|
63
|
+
--color-card-foreground: hsl(210 40% 98%);
|
|
64
|
+
--color-popover: hsl(222.2 84% 4.9%);
|
|
65
|
+
--color-popover-foreground: hsl(210 40% 98%);
|
|
66
|
+
--color-primary: hsl(210 40% 98%);
|
|
67
|
+
--color-primary-foreground: hsl(222.2 47.4% 11.2%);
|
|
68
|
+
--color-secondary: hsl(217.2 32.6% 17.5%);
|
|
69
|
+
--color-secondary-foreground: hsl(210 40% 98%);
|
|
70
|
+
--color-muted: hsl(217.2 32.6% 17.5%);
|
|
71
|
+
--color-muted-foreground: hsl(215 20.2% 65.1%);
|
|
72
|
+
--color-accent: hsl(217.2 32.6% 17.5%);
|
|
73
|
+
--color-accent-foreground: hsl(210 40% 98%);
|
|
74
|
+
--color-destructive: hsl(0 62.8% 30.6%);
|
|
75
|
+
--color-destructive-foreground: hsl(210 40% 98%);
|
|
76
|
+
--color-border: hsl(217.2 32.6% 17.5%);
|
|
77
|
+
--color-input: hsl(217.2 32.6% 17.5%);
|
|
78
|
+
--color-ring: hsl(212.7 26.8% 83.9%);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Default Theme (Invana Brand Colors)
|
|
3
|
+
* Light and dark variants with green accent
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* Light mode - Default theme */
|
|
7
|
+
[data-theme="default-light"],
|
|
8
|
+
.theme-default-light {
|
|
9
|
+
/* Raw HSL values for opacity modifiers */
|
|
10
|
+
--background: 0 0% 97%;
|
|
11
|
+
--foreground: 210 10% 20%;
|
|
12
|
+
--muted: 210 6% 90%;
|
|
13
|
+
--muted-foreground: 210 8% 45%;
|
|
14
|
+
--accent: 142 70% 43%;
|
|
15
|
+
--accent-foreground: 0 0% 100%;
|
|
16
|
+
--popover: 0 0% 98%;
|
|
17
|
+
--popover-foreground: 210 10% 20%;
|
|
18
|
+
--border: 210 6% 85%;
|
|
19
|
+
--input: 210 6% 92%;
|
|
20
|
+
--card: 0 0% 100%;
|
|
21
|
+
--card-foreground: 210 10% 20%;
|
|
22
|
+
--primary: 142 70% 43%;
|
|
23
|
+
--primary-foreground: 0 0% 100%;
|
|
24
|
+
--secondary: 142 30% 95%;
|
|
25
|
+
--secondary-foreground: 142 25% 40%;
|
|
26
|
+
--destructive: 0 70% 60%;
|
|
27
|
+
--destructive-foreground: 0 0% 100%;
|
|
28
|
+
--ring: 142 70% 43%;
|
|
29
|
+
|
|
30
|
+
/* Full HSL colors for direct use */
|
|
31
|
+
--color-background: hsl(0 0% 97%);
|
|
32
|
+
--color-foreground: hsl(210 10% 20%);
|
|
33
|
+
--color-card: hsl(0 0% 100%);
|
|
34
|
+
--color-card-foreground: hsl(210 10% 20%);
|
|
35
|
+
--color-popover: hsl(0 0% 98%);
|
|
36
|
+
--color-popover-foreground: hsl(210 10% 20%);
|
|
37
|
+
--color-primary: hsl(142 70% 43%);
|
|
38
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
39
|
+
--color-secondary: hsl(142 30% 95%);
|
|
40
|
+
--color-secondary-foreground: hsl(142 25% 40%);
|
|
41
|
+
--color-muted: hsl(210 6% 90%);
|
|
42
|
+
--color-muted-foreground: hsl(210 8% 45%);
|
|
43
|
+
--color-accent: hsl(142 70% 43%);
|
|
44
|
+
--color-accent-foreground: hsl(0 0% 100%);
|
|
45
|
+
--color-destructive: hsl(0 70% 60%);
|
|
46
|
+
--color-destructive-foreground: hsl(0 0% 100%);
|
|
47
|
+
--color-border: hsl(210 6% 85%);
|
|
48
|
+
--color-input: hsl(210 6% 92%);
|
|
49
|
+
--color-ring: hsl(142 70% 43%);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Dark mode - Default theme */
|
|
53
|
+
[data-theme="default-dark"],
|
|
54
|
+
.theme-default-dark {
|
|
55
|
+
/* Raw HSL values for opacity modifiers */
|
|
56
|
+
--background: 210 4% 10%;
|
|
57
|
+
--foreground: 0 0% 85%;
|
|
58
|
+
--muted: 210 6% 18%;
|
|
59
|
+
--muted-foreground: 210 8% 60%;
|
|
60
|
+
--accent: 142 70% 43%;
|
|
61
|
+
--accent-foreground: 210 4% 13%;
|
|
62
|
+
--popover: 210 4% 11%;
|
|
63
|
+
--popover-foreground: 0 0% 85%;
|
|
64
|
+
--border: 210 6% 22%;
|
|
65
|
+
--input: 210 6% 22%;
|
|
66
|
+
--card: 210 4% 14%;
|
|
67
|
+
--card-foreground: 0 0% 85%;
|
|
68
|
+
--primary: 142 70% 60%;
|
|
69
|
+
--primary-foreground: 210 4% 13%;
|
|
70
|
+
--secondary: 210 8% 28%;
|
|
71
|
+
--secondary-foreground: 0 0% 85%;
|
|
72
|
+
--destructive: 0 60% 45%;
|
|
73
|
+
--destructive-foreground: 0 0% 95%;
|
|
74
|
+
--ring: 142 70% 60%;
|
|
75
|
+
|
|
76
|
+
/* Full HSL colors for direct use */
|
|
77
|
+
--color-background: hsl(210 4% 10%);
|
|
78
|
+
--color-foreground: hsl(0 0% 85%);
|
|
79
|
+
--color-card: hsl(210 4% 14%);
|
|
80
|
+
--color-card-foreground: hsl(0 0% 85%);
|
|
81
|
+
--color-popover: hsl(210 4% 11%);
|
|
82
|
+
--color-popover-foreground: hsl(0 0% 85%);
|
|
83
|
+
--color-primary: hsl(142 70% 60%);
|
|
84
|
+
--color-primary-foreground: hsl(210 4% 13%);
|
|
85
|
+
--color-secondary: hsl(210 8% 28%);
|
|
86
|
+
--color-secondary-foreground: hsl(0 0% 85%);
|
|
87
|
+
--color-muted: hsl(210 6% 18%);
|
|
88
|
+
--color-muted-foreground: hsl(210 8% 60%);
|
|
89
|
+
--color-accent: hsl(142 70% 43%);
|
|
90
|
+
--color-accent-foreground: hsl(210 4% 13%);
|
|
91
|
+
--color-destructive: hsl(0 60% 45%);
|
|
92
|
+
--color-destructive-foreground: hsl(0 0% 95%);
|
|
93
|
+
--color-border: hsl(210 6% 22%);
|
|
94
|
+
--color-input: hsl(210 6% 22%);
|
|
95
|
+
--color-ring: hsl(142 70% 60%);
|
|
96
|
+
}
|