Skip to content

Commit 36c42f2

Browse files
hotlonghotlong
committed
Refactor CSS structure by removing legacy styles and adding Tailwind CSS configuration
1 parent 70e8dfb commit 36c42f2

3 files changed

Lines changed: 151 additions & 30 deletions

File tree

‎examples/msw-object-form/src/App.css‎

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,4 @@
1-
:root {
2-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3-
line-height: 1.5;
4-
font-weight: 400;
5-
6-
color-scheme: light dark;
7-
color: rgba(0, 0, 0, 0.87);
8-
background-color: #f9fafb;
9-
10-
font-synthesis: none;
11-
text-rendering: optimizeLegibility;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
14-
}
15-
16-
body {
17-
margin: 0;
18-
display: flex;
19-
place-items: center;
20-
min-width: 320px;
21-
min-height: 100vh;
22-
}
23-
24-
#root {
25-
width: 100%;
26-
}
27-
28-
code {
29-
font-family: 'Courier New', monospace;
30-
}
1+
/*
2+
Styles are handled by Tailwind CSS in index.css
3+
This file is kept for backward compatibility or custom overrides.
4+
*/

‎examples/msw-object-form/src/index.css‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
@import 'tailwindcss';
2+
3+
/* Scan sources for Tailwind classes */
4+
@source '../src/**/*.{ts,tsx}';
5+
@source '../../../packages/components/src/**/*.{ts,tsx}';
6+
@source '../../../packages/layout/src/**/*.{ts,tsx}';
7+
@source '../../../packages/fields/src/**/*.{ts,tsx}';
8+
@source '../../../packages/react/src/**/*.{ts,tsx}';
9+
@source '../../../packages/plugin-dashboard/src/**/*.{ts,tsx}';
10+
@source '../../../packages/plugin-form/src/**/*.{ts,tsx}';
11+
@source '../../../packages/plugin-grid/src/**/*.{ts,tsx}';
12+
13+
/* Tailwind plugin for animations remove
14+
@plugin 'tailwindcss-animate';
15+
*/
16+
17+
/* Define theme colors for Tailwind 4 */
18+
@theme {
19+
/* Border radius tokens */
20+
--radius-lg: var(--radius);
21+
--radius-md: calc(var(--radius) - 2px);
22+
--radius-sm: calc(var(--radius) - 4px);
23+
24+
/* Color tokens mapped to CSS variables */
25+
--color-border: hsl(var(--border));
26+
--color-input: hsl(var(--input));
27+
--color-ring: hsl(var(--ring));
28+
--color-background: hsl(var(--background));
29+
--color-foreground: hsl(var(--foreground));
30+
--color-primary: hsl(var(--primary));
31+
--color-primary-foreground: hsl(var(--primary-foreground));
32+
--color-secondary: hsl(var(--secondary));
33+
--color-secondary-foreground: hsl(var(--secondary-foreground));
34+
--color-destructive: hsl(var(--destructive));
35+
--color-destructive-foreground: hsl(var(--destructive-foreground));
36+
--color-muted: hsl(var(--muted));
37+
--color-muted-foreground: hsl(var(--muted-foreground));
38+
--color-accent: hsl(var(--accent));
39+
--color-accent-foreground: hsl(var(--accent-foreground));
40+
--color-popover: hsl(var(--popover));
41+
--color-popover-foreground: hsl(var(--popover-foreground));
42+
--color-card: hsl(var(--card));
43+
--color-card-foreground: hsl(var(--card-foreground));
44+
--color-sidebar: hsl(var(--sidebar));
45+
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
46+
--color-sidebar-primary: hsl(var(--sidebar-primary));
47+
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
48+
--color-sidebar-accent: hsl(var(--sidebar-accent));
49+
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
50+
--color-sidebar-border: hsl(var(--sidebar-border));
51+
--color-sidebar-ring: hsl(var(--sidebar-ring));
52+
}
53+
54+
/* CSS custom properties for theme */
55+
@layer base {
56+
:root {
57+
--background: 0 0% 100%;
58+
--foreground: 222.2 84% 4.9%;
59+
60+
--card: 0 0% 100%;
61+
--card-foreground: 222.2 84% 4.9%;
62+
63+
--popover: 0 0% 100%;
64+
--popover-foreground: 222.2 84% 4.9%;
65+
66+
--primary: 222.2 47.4% 11.2%;
67+
--primary-foreground: 210 40% 98%;
68+
69+
--secondary: 210 40% 96.1%;
70+
--secondary-foreground: 222.2 47.4% 11.2%;
71+
72+
--muted: 210 40% 96.1%;
73+
--muted-foreground: 215.4 16.3% 46.9%;
74+
75+
--accent: 210 40% 96.1%;
76+
--accent-foreground: 222.2 47.4% 11.2%;
77+
78+
--destructive: 0 84.2% 60.2%;
79+
--destructive-foreground: 210 40% 98%;
80+
81+
--border: 214.3 31.8% 91.4%;
82+
--input: 214.3 31.8% 91.4%;
83+
--ring: 222.2 84% 4.9%;
84+
85+
--radius: 0.5rem;
86+
87+
/* Sidebar colors */
88+
--sidebar: 0 0% 98%;
89+
--sidebar-foreground: 240 5.3% 26.1%;
90+
--sidebar-primary: 240 5.9% 10%;
91+
--sidebar-primary-foreground: 0 0% 98%;
92+
--sidebar-accent: 240 4.8% 95.9%;
93+
--sidebar-accent-foreground: 240 5.9% 10%;
94+
--sidebar-border: 220 13% 91%;
95+
--sidebar-ring: 217.2 91.2% 59.8%;
96+
}
97+
98+
.dark {
99+
--background: 222.2 84% 4.9%;
100+
--foreground: 210 40% 98%;
101+
102+
--card: 222.2 84% 4.9%;
103+
--card-foreground: 210 40% 98%;
104+
105+
--popover: 222.2 84% 4.9%;
106+
--popover-foreground: 210 40% 98%;
107+
108+
--primary: 210 40% 98%;
109+
--primary-foreground: 222.2 47.4% 11.2%;
110+
111+
--secondary: 217.2 32.6% 17.5%;
112+
--secondary-foreground: 210 40% 98%;
113+
114+
--muted: 217.2 32.6% 17.5%;
115+
--muted-foreground: 215 20.2% 65.1%;
116+
117+
--accent: 217.2 32.6% 17.5%;
118+
--accent-foreground: 210 40% 98%;
119+
120+
--destructive: 0 62.8% 30.6%;
121+
--destructive-foreground: 210 40% 98%;
122+
123+
--border: 217.2 32.6% 17.5%;
124+
--input: 217.2 32.6% 17.5%;
125+
--ring: 212.7 26.8% 83.9%;
126+
127+
/* Sidebar colors for dark mode */
128+
--sidebar: 240 5.9% 10%;
129+
--sidebar-foreground: 240 4.8% 95.9%;
130+
--sidebar-primary: 224.3 76.3% 48%;
131+
--sidebar-primary-foreground: 0 0% 100%;
132+
--sidebar-accent: 240 3.7% 15.9%;
133+
--sidebar-accent-foreground: 240 4.8% 95.9%;
134+
--sidebar-border: 240 3.7% 15.9%;
135+
--sidebar-ring: 217.2 91.2% 59.8%;
136+
}
137+
138+
* {
139+
border-color: hsl(var(--border));
140+
}
141+
142+
body {
143+
background-color: hsl(var(--background));
144+
color: hsl(var(--foreground));
145+
}
146+
}

‎examples/msw-object-form/src/main.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
import React from 'react';
88
import ReactDOM from 'react-dom/client';
9+
import './index.css';
910
import { App } from './App';
1011
import { startMockServer } from './mocks/browser';
1112

0 commit comments

Comments
 (0)