Skip to content

Commit 4676af9

Browse files
OnatcerOnatcer
committed
move css variables and tailwind theme config into ui package
1 parent 18c8e62 commit 4676af9

File tree

6 files changed

+382
-355
lines changed

6 files changed

+382
-355
lines changed

‎resources/css/app.css‎

Lines changed: 6 additions & 232 deletions
Original file line numberDiff line numberDiff line change
@@ -1,240 +1,14 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
4-
:root.dark {
5-
--color-bg-primary: #101012;
6-
--color-bg-secondary: #17181B;
7-
--color-bg-tertiary: #2A2C32;
8-
--color-bg-quaternary: #141518;
9-
--color-bg-background: #090909;
10-
--color-text-primary: #ffffff;
11-
--color-text-secondary: #e3e4e6;
12-
--color-text-tertiary: #969799;
13-
--color-text-quaternary: #595a5c;
1+
/* Import shared solidtime styles from UI package */
2+
@import '../js/packages/ui/styles.css';
143

15-
--color-border-primary: #191b1f;
16-
--color-border-secondary: #23252a;
17-
--color-border-tertiary: #2c2e33;
18-
--color-border-quaternary: #393B42;
19-
--color-input-border-active: rgba(255,255,255,0.3);
20-
21-
--theme-color-chart: var(--color-accent-200);
22-
23-
--theme-color-menu-active: var(--color-bg-secondary);
24-
--theme-color-card-background: var(--color-bg-secondary);
25-
--theme-shadow-card: 0 4px 7px 0px rgb(0 0 0 / 15%);
26-
--theme-shadow-dropdown: 0 4px 7px 0px rgb(0 0 0 / 40%);
27-
28-
--theme-color-card-background-active: var(--color-bg-tertiary);
29-
30-
--theme-color-row-background: var(--color-bg-primary);
31-
--theme-color-row-heading-background: var(--theme-color-card-background);
32-
--theme-color-row-heading-border: var(--theme-color-card-border);
33-
--theme-color-icon-default: var(--color-text-tertiary);
34-
35-
--theme-color-ring: rgba(255,255,255,0.5);
36-
37-
--theme-color-button-primary-background: rgba(var(--color-accent-300), 0.1);
38-
--theme-color-button-primary-background-hover: rgba(var(--color-accent-300), 0.2);
39-
--theme-color-button-primary-border: rgba(var(--color-accent-300), 0.2);
40-
--theme-color-button-primary-text: var(--color-text-primary);
41-
42-
--theme-color-input-background: var(--color-bg-secondary);
43-
44-
--theme-color-input-select-active: rgb(var(--color-accent-300));
45-
--theme-color-input-select-active-hover: rgb(var(--color-accent-200));
46-
47-
--color-accent-default: rgba(var(--color-accent-300), 0.2);
48-
--color-accent-foreground: rgb(var(--color-accent-100));
49-
--theme-color-default-background: var(--color-bg-primary);
50-
51-
}
52-
53-
:root.light {
54-
--color-bg-primary: #FFFFFF;
55-
--color-bg-secondary: #f7f7f8;
56-
--color-bg-tertiary: #eeeeef;
57-
--color-bg-quaternary: #e1e1e3;
58-
--color-bg-background: #F5F5F5;
59-
--color-text-primary: #18181b;
60-
--color-text-secondary: #3f3f46;
61-
--color-text-tertiary: #57575C;
62-
--color-text-quaternary: #a1a1aa;
63-
--color-border-primary: #e7e7e7;
64-
--color-border-secondary: #e5e5e5;
65-
--color-border-tertiary: #dfdfdf;
66-
--color-border-quaternary: #d1d1d1;
67-
--color-input-border-active: rgba(0,0,0,0.3);
68-
--theme-color-menu-active: var(--color-bg-quaternary);
69-
70-
--theme-color-card-background: var(--color-bg-primary);
71-
--theme-color-card-background-active: var(--color-bg-tertiary);
72-
73-
--theme-color-chart: var(--color-accent-400);
74-
75-
--theme-shadow-card: lch(0 0 0 / 0.022) 0px 3px 6px -2px, lch(0 0 0 / 0.044) 0px 1px 1px;
76-
--theme-shadow-dropdown: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
77-
78-
--theme-color-row-background: var(--theme-color-card-background);
79-
--theme-color-row-heading-background: var(--color-bg-secondary);
80-
--theme-color-row-heading-border: var(--color-border-tertiary);
81-
--theme-color-icon-default: var(--color-text-quaternary);
82-
83-
--theme-color-ring: rgba(0,0,0, 0.7);
84-
85-
--theme-color-button-primary-background: rgba(var(--color-accent-600), 0.9);
86-
--theme-color-button-primary-background-hover: rgba(var(--color-accent-600), 1);
87-
--theme-color-button-primary-border: rgba(var(--color-accent-600), 1);
88-
--theme-color-button-primary-text: #FFFFFF;
89-
90-
--theme-color-input-background: var(--color-bg-primary);
91-
92-
--theme-color-input-select-active: rgb(var(--color-accent-400));
93-
--theme-color-input-select-active-hover: rgb(var(--color-accent-500));
94-
95-
--color-accent-default: rgb(var(--color-accent-100));
96-
--color-accent-foreground: rgb(var(--color-accent-800));
97-
--theme-color-default-background: #FCFCFC;
98-
99-
}
100-
101-
:root {
102-
--theme-color-icon-active: rgb(var(--color-text-tertiary));
103-
--theme-color-card-background-separator: var(--color-border-tertiary);
104-
--theme-color-card-border: var(--color-border-secondary);
105-
--theme-color-card-border-active: var(--color-border-tertiary);
106-
--theme-color-default-background-separator: var(--color-border-primary);
107-
--theme-color-primary-text: var(--color-text-primary);
108-
--theme-color-input-border: var(--color-border-quaternary);
109-
--theme-color-tab-background: var(--theme-color-card-background);
110-
--theme-color-tab-background-active: var(--theme-color-card-background-active);
111-
--theme-color-tab-border: var(--theme-color-card-border);
112-
--theme-color-row-separator-background: var(--theme-color-default-background-separator);
113-
--theme-color-row-border: var(--theme-color-card-border);
114-
115-
--color-accent-50: 240, 249, 255; /* sky-50 */
116-
--color-accent-100: 224, 242, 254; /* sky-100 */
117-
--color-accent-200: 186, 230, 253; /* sky-200 */
118-
--color-accent-300: 125, 211, 252; /* sky-300 */
119-
--color-accent-400: 56, 189, 248; /* sky-400 */
120-
--color-accent-500: 14, 165, 233; /* sky-500 */
121-
--color-accent-600: 2, 132, 199; /* sky-600 */
122-
--color-accent-700: 3, 105, 161; /* sky-700 */
123-
--color-accent-800: 7, 89, 133; /* sky-800 */
124-
--color-accent-900: 12, 74, 110; /* sky-900 */
125-
--color-accent-950: 8, 47, 73; /* sky-950 */
126-
127-
--theme-button-secondary-background: var(--theme-color-card-background);
128-
--theme-button-secondary-background-active: var(--theme-color-card-background-active);
129-
--popover-border: var(--color-border-secondary);
130-
}
131-
132-
* {
133-
-webkit-font-smoothing: antialiased;
134-
-moz-osx-font-smoothing: grayscale;
135-
}
136-
137-
/* width */
138-
::-webkit-scrollbar {
139-
width: 5px;
140-
}
141-
142-
/* Track */
143-
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
144-
background: transparent;
145-
}
146-
147-
/* Handle */
148-
::-webkit-scrollbar-thumb {
149-
background: #888;
150-
border-radius: 2px;
151-
}
152-
153-
/* Handle on hover */
154-
::-webkit-scrollbar-thumb:hover {
155-
background: #555;
156-
}
157-
158-
[x-cloak] {
159-
display: none;
160-
}
161-
body {
162-
background-color: var(--theme-color-default-background);
163-
}
164-
165-
166-
/* Inter Variable Font with browser compatibility considerations */
4+
/* Main app specific styles - Inter font */
1675
@font-face {
1686
font-family: 'Inter';
169-
src: url('/fonts/InterVariable.woff2') format('woff2'),
170-
url('/fonts/InterVariable.ttf') format('truetype');
7+
src:
8+
url('/fonts/InterVariable.woff2') format('woff2'),
9+
url('/fonts/InterVariable.ttf') format('truetype');
17110
font-weight: 100 900;
17211
font-style: normal;
17312
font-display: swap;
17413
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
17514
}
176-
177-
@layer base {
178-
:root {
179-
--background: var(--color-bg-background);
180-
--foreground: var(--color-text-primary);
181-
--card: var(--theme-color-card-background);
182-
--card-foreground: var(--color-text-primary);
183-
--popover: var(--theme-color-card-background);
184-
--popover-foreground: var(--color-text-primary);
185-
--primary: var(--theme-color-button-primary-background);
186-
--primary-foreground: var(--theme-color-button-primary-text);
187-
--secondary: var(--color-bg-secondary);
188-
--secondary-foreground: var(--color-text-primary);
189-
--muted: var(--color-bg-tertiary);
190-
--muted-foreground: var(--color-text-tertiary);
191-
--accent: var(--theme-color-button-primary-background);
192-
--accent-foreground: var(--theme-color-button-primary-text);
193-
--destructive: 0 84.2% 60.2%;
194-
--destructive-foreground: var(--color-text-primary);
195-
--border: var(--color-border-primary);
196-
--input: var(--color-border-tertiary);
197-
--ring: var(--theme-color-ring);
198-
--chart-1: var(--color-accent-400);
199-
--chart-2: var(--color-accent-500);
200-
--chart-3: var(--color-accent-600);
201-
--chart-4: var(--color-accent-700);
202-
--chart-5: var(--color-accent-800);
203-
--radius: 0.5rem;
204-
}
205-
.dark {
206-
--background: var(--color-bg-background);
207-
--foreground: var(--color-text-primary);
208-
--card: var(--theme-color-card-background);
209-
--card-foreground: var(--color-text-primary);
210-
--popover: var(--theme-color-card-background);
211-
--popover-foreground: var(--color-text-primary);
212-
--primary: var(--theme-color-button-primary-background);
213-
--primary-foreground: var(--theme-color-button-primary-text);
214-
--secondary: var(--color-bg-secondary);
215-
--secondary-foreground: var(--color-text-primary);
216-
--muted: var(--color-bg-tertiary);
217-
--muted-foreground: var(--color-text-tertiary);
218-
--accent: var(--theme-color-button-primary-background);
219-
--accent-foreground: var(--theme-color-button-primary-text);
220-
--destructive: 0 62.8% 30.6%;
221-
--destructive-foreground: var(--color-text-primary);
222-
--border: var(--color-border-primary);
223-
--input: var(--color-border-tertiary);
224-
--ring: var(--theme-color-ring);
225-
--chart-1: var(--color-accent-200);
226-
--chart-2: var(--color-accent-300);
227-
--chart-3: var(--color-accent-400);
228-
--chart-4: var(--color-accent-500);
229-
--chart-5: var(--color-accent-600);
230-
}
231-
}
232-
233-
@layer base {
234-
* {
235-
@apply border-border;
236-
}
237-
body {
238-
@apply bg-background text-foreground;
239-
}
240-
}

‎resources/js/Components/ui/calendar/CalendarNextButton.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts" setup>
2-
import { cn, buttonVariants } from '@solidtime/ui';
2+
import { cn, buttonVariants } from '@/packages/ui/src/index';
33
import { ChevronRight } from 'lucide-vue-next';
44
import { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui';
55
import { computed, type HTMLAttributes } from 'vue';

‎resources/js/packages/ui/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@
2121
"default": "./dist/solidtime-ui-lib.umd.cjs"
2222
}
2323
},
24-
"./style.css": "./dist/style.css"
24+
"./style.css": "./dist/style.css",
25+
"./styles.css": "./styles.css",
26+
"./tailwind.theme.js": "./tailwind.theme.js"
2527
},
2628
"scripts": {
2729
"dev": "vite",

0 commit comments

Comments
 (0)