Skip to content

Commit cdea67f

Browse files
Initial config migration
1 parent aff912c commit cdea67f

File tree

5 files changed

+116
-131
lines changed

5 files changed

+116
-131
lines changed

.prettierrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@
1111
"parser": "svelte"
1212
}
1313
}
14-
]
14+
],
15+
"tailwindStylesheet": "./src/app.css"
1516
}

src/app.css

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
@import "tailwindcss";
2+
3+
@variant dark (&:is(.dark *));
4+
5+
@theme {
6+
--breakpoint-xs: 475px;
7+
--breakpoint-2xl: 1400px;
8+
9+
--color-background: hsl(var(--background));
10+
--color-foreground: hsl(var(--foreground));
11+
12+
--color-card: hsl(var(--card));
13+
--color-card-foreground: hsl(var(--card-foreground));
14+
15+
--color-popover: hsl(var(--popover));
16+
--color-popover-foreground: hsl(var(--popover-foreground));
17+
18+
--color-primary: hsl(var(--primary));
19+
--color-primary-foreground: hsl(var(--primary-foreground));
20+
21+
--color-secondary: hsl(var(--secondary));
22+
--color-secondary-foreground: hsl(var(--secondary-foreground));
23+
24+
--color-muted: hsl(var(--muted));
25+
--color-muted-foreground: hsl(var(--muted-foreground));
26+
27+
--color-accent: hsl(var(--accent));
28+
--color-accent-foreground: hsl(var(--accent-foreground));
29+
30+
--color-destructive: hsl(var(--destructive));
31+
--color-destructive-foreground: hsl(var(--destructive-foreground));
32+
33+
--color-border: hsl(var(--border));
34+
--color-input: hsl(var(--input));
35+
--color-ring: hsl(var(--ring));
36+
37+
/*
38+
--color-sidebar: hsl(var(--sidebar-background));
39+
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
40+
--color-sidebar-primary: hsl(var(--sidebar-primary));
41+
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
42+
--color-sidebar-accent: hsl(var(--sidebar-accent));
43+
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
44+
--color-sidebar-border: hsl(var(--sidebar-border));
45+
--color-sidebar-ring: hsl(var(--sidebar-ring));
46+
*/
47+
48+
--radius-xl: calc(var(--radius) + 4px);
49+
--radius-lg: var(--radius);
50+
--radius-md: calc(var(--radius) - 2px);
51+
--radius-sm: calc(var(--radius) - 4px);
52+
}
53+
54+
@layer base {
55+
:root {
56+
--background: 0 0% 100%;
57+
--foreground: 20 14.3% 4.1%;
58+
--card: 0 0% 100%;
59+
--card-foreground: 20 14.3% 4.1%;
60+
--popover: 0 0% 100%;
61+
--popover-foreground: 20 14.3% 4.1%;
62+
--primary: 24.6 95% 53.1%;
63+
--primary-foreground: 60 9.1% 97.8%;
64+
--secondary: 60 4.8% 95.9%;
65+
--secondary-foreground: 24 9.8% 10%;
66+
--muted: 60 4.8% 95.9%;
67+
--muted-foreground: 25 5.3% 44.7%;
68+
--accent: 60 4.8% 95.9%;
69+
--accent-foreground: 24 9.8% 10%;
70+
--destructive: 0 72.22% 50.59%;
71+
--destructive-foreground: 60 9.1% 97.8%;
72+
--border: 20 5.9% 90%;
73+
--input: 20 5.9% 90%;
74+
--ring: 24.6 95% 53.1%;
75+
--radius: 0.5rem;
76+
}
77+
.dark {
78+
--background: 20 14.3% 4.1%;
79+
--foreground: 60 9.1% 97.8%;
80+
--card: 20 14.3% 4.1%;
81+
--card-foreground: 60 9.1% 97.8%;
82+
--popover: 20 14.3% 4.1%;
83+
--popover-foreground: 60 9.1% 97.8%;
84+
--primary: 20.5 90.2% 48.2%;
85+
--primary-foreground: 60 9.1% 97.8%;
86+
--secondary: 12 6.5% 15.1%;
87+
--secondary-foreground: 60 9.1% 97.8%;
88+
--muted: 12 6.5% 15.1%;
89+
--muted-foreground: 24 5.4% 63.9%;
90+
--accent: 12 6.5% 15.1%;
91+
--accent-foreground: 60 9.1% 97.8%;
92+
--destructive: 0 72.2% 50.6%;
93+
--destructive-foreground: 60 9.1% 97.8%;
94+
--border: 12 6.5% 15.1%;
95+
--input: 12 6.5% 15.1%;
96+
--ring: 20.5 90.2% 48.2%;
97+
}
98+
}
99+
100+
@layer base {
101+
::selection {
102+
@apply bg-primary text-primary-foreground;
103+
}
104+
105+
* {
106+
@apply border-border;
107+
}
108+
109+
body {
110+
@apply flex min-h-screen flex-col bg-background text-foreground;
111+
}
112+
}

src/app.pcss

Lines changed: 0 additions & 63 deletions
This file was deleted.

src/routes/+layout.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import "../app.pcss";
2+
import "../app.css";
33
import { onMount, type SvelteComponent } from "svelte";
44
import type { SvelteHTMLElements } from "svelte/elements";
55
import { fade } from "svelte/transition";

tailwind.config.ts

Lines changed: 1 addition & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,14 @@
11
import type { Config } from "tailwindcss";
2-
import defaultTheme from "tailwindcss/defaultTheme";
32
import typography from "@tailwindcss/typography";
43
import tailwindcssAnimate from "tailwindcss-animate";
54

65
export default {
7-
darkMode: ["class"],
8-
content: ["./src/**/*.{html,js,svelte,ts}"],
9-
safelist: ["dark"],
106
theme: {
117
container: {
128
center: true,
13-
padding: "2rem",
14-
screens: {
15-
"2xl": "1400px"
16-
}
17-
},
18-
screens: {
19-
xs: "475px",
20-
...defaultTheme.screens
9+
padding: "2rem"
2110
},
2211
extend: {
23-
colors: {
24-
border: "hsl(var(--border) / <alpha-value>)",
25-
input: "hsl(var(--input) / <alpha-value>)",
26-
ring: "hsl(var(--ring) / <alpha-value>)",
27-
background: "hsl(var(--background) / <alpha-value>)",
28-
foreground: "hsl(var(--foreground) / <alpha-value>)",
29-
primary: {
30-
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
31-
foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
32-
},
33-
secondary: {
34-
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
35-
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
36-
},
37-
destructive: {
38-
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
39-
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
40-
},
41-
muted: {
42-
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
43-
foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
44-
},
45-
accent: {
46-
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
47-
foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
48-
},
49-
popover: {
50-
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
51-
foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
52-
},
53-
card: {
54-
DEFAULT: "hsl(var(--card) / <alpha-value>)",
55-
foreground: "hsl(var(--card-foreground) / <alpha-value>)"
56-
},
57-
sidebar: {
58-
DEFAULT: "hsl(var(--sidebar-background))",
59-
foreground: "hsl(var(--sidebar-foreground))",
60-
primary: "hsl(var(--sidebar-primary))",
61-
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
62-
accent: "hsl(var(--sidebar-accent))",
63-
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
64-
border: "hsl(var(--sidebar-border))",
65-
ring: "hsl(var(--sidebar-ring))"
66-
}
67-
},
68-
borderRadius: {
69-
xl: "calc(var(--radius) + 4px)",
70-
lg: "var(--radius)",
71-
md: "calc(var(--radius) - 2px)",
72-
sm: "calc(var(--radius) - 4px)"
73-
},
74-
fontFamily: {
75-
sans: [...defaultTheme.fontFamily.sans]
76-
},
7712
typography: {
7813
DEFAULT: {
7914
css: {

0 commit comments

Comments
 (0)