Skip to content

Commit 97b3840

Browse files
shairezshairez
committed
docs: added tailwind css vars and change font
1 parent 6f3b97d commit 97b3840

File tree

7 files changed

+187
-60
lines changed

7 files changed

+187
-60
lines changed

‎.vscode/settings.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
"git.pullTags": false,
33
"conventionalCommits.scopes": ["fluffy", "headless", "docs"],
44
"tailwindCSS.experimental.classRegex": [
5-
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
6-
["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
5+
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
76
]
87
}

‎apps/website/src/colors.debug.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@layer base {
2+
:root {
3+
--color-background: hsl(0, 0%, 100%);
4+
--color-foreground: hsl(263, 84%, 5%);
5+
6+
--color-primary: hsl(263, 84%, 35%);
7+
--color-primary-foreground: hsl(0, 0%, 100%);
8+
9+
--color-secondary: hsl(197, 93%, 25%);
10+
--color-secondary-foreground: hsl(0, 0%, 100%);
11+
12+
--color-muted: hsl(210, 40%, 96%);
13+
--color-muted-foreground: hsl(263, 16%, 47%);
14+
15+
--color-accent: hsl(210, 40%, 96%);
16+
--color-accent-foreground: hsl(263, 47%, 11%);
17+
18+
--color-destructive: hsl(0, 84%, 60%);
19+
--color-destructive-foreground: hsl(263, 40%, 98%);
20+
21+
--color-card: hsl(0, 0%, 100%);
22+
--color-card-foreground: hsl(263, 84%, 5%);
23+
24+
--color-popover: hsl(0, 0%, 100%);
25+
--color-popover-foreground: hsl(263, 84%, 5%);
26+
27+
--color-border: hsl(263, 32%, 91%);
28+
29+
--color-input: hsl(263, 32%, 91%);
30+
31+
--color-ring: hsl(263, 84%, 25%);
32+
33+
--border-radius: 0.375rem;
34+
}
35+
36+
.dark {
37+
--color-background: hsl(263, 84%, 5%);
38+
--color-foreground: hsl(263, 40%, 98%);
39+
40+
--color-primary: hsl(263 40% 98%);
41+
--color-primary-foreground: hsl(263 47.4% 11.2%);
42+
43+
--color-secondary: hsl(197 32.6% 17.5%);
44+
--color-secondary-foreground: hsl(190 40% 98%);
45+
46+
--color-muted: hsl(218 32.6% 17.5%);
47+
--color-muted-foreground: hsl(263 20.2% 65.1%);
48+
49+
--color-accent: hsl(263 32.6% 17.5%);
50+
--color-accent-foreground: hsl(263 40% 98%);
51+
52+
--color-destructive: hsl(0 62.8% 30.6%);
53+
--color-destructive-foreground: hsl(263 40% 98%);
54+
55+
--color-card: hsl(263 84% 4.9%);
56+
--color-card-foreground: hsl(263 40% 98%);
57+
58+
--color-popover: hsl(263 84% 4.9%);
59+
--color-popover-foreground: hsl(263 40% 98%);
60+
61+
--color-border: hsl(263 32.6% 17.5%);
62+
63+
--color-input: hsl(263 32.6% 17.5%);
64+
65+
--color-ring: hsl(263 26.8% 83.9%);
66+
}
67+
}

‎apps/website/src/global.css

Lines changed: 66 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,78 @@
1+
@import '@fontsource-variable/inter';
2+
13
@tailwind components;
24
@tailwind base;
35
@tailwind utilities;
46

5-
@font-face {
6-
font-family: 'Poppins';
7-
font-style: normal;
8-
font-weight: 400;
9-
font-display: fallback;
10-
src: url('/fonts/poppins-400.woff2') format('woff2');
11-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
12-
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
13-
}
7+
@layer base {
8+
:root {
9+
--color-background: 0 0% 100%;
10+
--color-foreground: 263 84% 5%;
1411

15-
@font-face {
16-
font-family: 'Poppins';
17-
font-style: normal;
18-
font-weight: 500;
19-
font-display: fallback;
20-
src: url('/fonts/poppins-500.woff2') format('woff2');
21-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
22-
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
23-
}
12+
--color-primary: 263 84% 35%;
13+
--color-primary-foreground: 0 0% 100%;
14+
15+
--color-secondary: 197 93% 25%;
16+
--color-secondary-foreground: 0 0% 100%;
17+
18+
--color-muted: 210 40% 96%;
19+
--color-muted-foreground: 263 16% 47%;
20+
21+
--color-accent: 210 40% 96%;
22+
--color-accent-foreground: 263 47% 11%;
23+
24+
--color-destructive: 0 84% 60%;
25+
--color-destructive-foreground: 263 40% 98%;
26+
27+
--color-card: 0 0% 100%;
28+
--color-card-foreground: 263 84% 5%;
29+
30+
--color-popover: 0 0% 100%;
31+
--color-popover-foreground: 263 84% 5%;
32+
33+
--color-border: 263 32% 91%;
34+
35+
--color-input: 263 32% 91%;
36+
37+
--color-ring: 263 84% 25%;
38+
39+
--border-radius: 0.375rem;
40+
}
2441

25-
@font-face {
26-
font-family: 'Poppins';
27-
font-style: normal;
28-
font-weight: 700;
29-
font-display: fallback;
30-
src: url('/fonts/poppins-700.woff2') format('woff2');
31-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
32-
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
42+
.dark {
43+
--color-background: 263 84% 5%;
44+
--color-foreground: 263 40% 98%;
45+
46+
--color-primary: 263 40% 98%;
47+
--color-primary-foreground: 263 47.4% 11.2%;
48+
49+
--color-secondary: 197 32.6% 17.5%;
50+
--color-secondary-foreground: 190 40% 98%;
51+
52+
--color-muted: 218 32.6% 17.5%;
53+
--color-muted-foreground: 263 20.2% 65.1%;
54+
55+
--color-accent: 263 32.6% 17.5%;
56+
--color-accent-foreground: 263 40% 98%;
57+
58+
--color-destructive: 0 62.8% 30.6%;
59+
--color-destructive-foreground: 263 40% 98%;
60+
61+
--color-card: 263 84% 4.9%;
62+
--color-card-foreground: 263 40% 98%;
63+
64+
--color-popover: 263 84% 4.9%;
65+
--color-popover-foreground: 263 40% 98%;
66+
67+
--color-border: 263 32.6% 17.5%;
68+
69+
--color-input: 263 32.6% 17.5%;
70+
71+
--color-ring: 263 26.8% 83.9%;
72+
}
3373
}
3474

3575
:root {
36-
--color-primary: #006ce9;
37-
3876
--qwik-dark-blue: #006ce9;
3977
--qwik-light-blue: #18b6f6;
4078
--qwik-light-purple: #ac7ff4;
@@ -96,10 +134,6 @@ html {
96134

97135
background-color: var(--color-bg) !important;
98136
color: var(--color-text) !important;
99-
100-
font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
101-
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
102-
'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
103137
}
104138

105139
body {

‎apps/website/src/routes/_components/router-head/router-head.tsx

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,6 @@ export const RouterHead = component$(() => {
1919

2020
<link rel="preconnect" href="https://fonts.googleapis.com" />
2121
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
22-
<link
23-
rel="preload"
24-
href="/fonts/poppins-400.woff2"
25-
as="font"
26-
type="font/woff2"
27-
crossOrigin="anonymous"
28-
/>
29-
<link
30-
rel="preload"
31-
href="/fonts/poppins-500.woff2"
32-
as="font"
33-
type="font/woff2"
34-
crossOrigin="anonymous"
35-
/>
36-
<link
37-
rel="preload"
38-
href="/fonts/poppins-700.woff2"
39-
as="font"
40-
type="font/woff2"
41-
crossOrigin="anonymous"
42-
/>
4322

4423
<meta property="og:site_name" content="Qwik" />
4524
<meta name="twitter:site" content="@QwikDev" />

‎apps/website/tailwind.config.cjs

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ const { join } = require('path');
44
module.exports = {
55
content: [
66
join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
7-
join(__dirname, '../../packages/kit-tailwind/src/**/*.{js,ts,jsx,tsx,mdx}')
7+
join(__dirname, '../../packages/kit-tailwind/src/**/*.{js,ts,jsx,tsx,mdx}'),
8+
join(__dirname, '../../packages/kit-fluffy/src/**/*.{js,ts,jsx,tsx,mdx}')
89
],
910
plugins: [require('daisyui')],
1011
darkMode: 'class',
@@ -14,6 +15,9 @@ module.exports = {
1415
},
1516
theme: {
1617
extend: {
18+
fontFamily: {
19+
sans: ['Inter Variable', 'sans-serif']
20+
},
1721
backgroundImage: {
1822
'optional-theme-bg': "url('/Button-bg.svg')"
1923
},
@@ -49,12 +53,45 @@ module.exports = {
4953
950: 'hsl(269, 67%, 13%)'
5054
},
5155

56+
border: 'hsl(var(--color-border))',
57+
input: 'hsl(var(--color-input))',
58+
ring: 'hsl(var(--color-ring))',
59+
background: 'hsl(var(--color-background))',
60+
foreground: 'hsl(var(--color-foreground))',
61+
5262
primary: {
53-
DEFAULT: 'var(--color-primary)',
54-
forground: 'var(--color-primary)',
55-
dark: 'var(--color-primary-dark)',
56-
light: 'var(--color-primary-light)'
63+
DEFAULT: 'hsl(var(--color-primary))',
64+
foreground: 'hsl(var(--color-primary-foreground))'
65+
},
66+
secondary: {
67+
DEFAULT: 'hsl(var(--color-secondary))',
68+
foreground: 'hsl(var(--color-secondary-foreground))'
69+
},
70+
accent: {
71+
DEFAULT: 'hsl(var(--color-accent))',
72+
foreground: 'hsl(var(--color-accent-foreground))'
73+
},
74+
muted: {
75+
DEFAULT: 'hsl(var(--color-muted))',
76+
foreground: 'hsl(var(--color-muted-foreground))'
77+
},
78+
destructive: {
79+
DEFAULT: 'hsl(var(--color-destructive))',
80+
foreground: 'hsl(var(--color-destructive-foreground))'
81+
},
82+
popover: {
83+
DEFAULT: 'hsl(var(--color-popover))',
84+
foreground: 'hsl(var(--color-popover-foreground))'
85+
},
86+
card: {
87+
DEFAULT: 'hsl(var(--color-card))',
88+
foreground: 'hsl(var(--color-card-foreground))'
5789
}
90+
},
91+
borderRadius: {
92+
lg: 'var(--border-radius)',
93+
md: 'calc(var(--border-radius) - 2px)',
94+
sm: 'calc(var(--border-radius) - 4px)'
5895
}
5996
}
6097
}

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@cypress/code-coverage": "3.10.0",
2828
"@cypress/vite-dev-server": "^2.2.1",
2929
"@floating-ui/dom": "1.0.10",
30+
"@fontsource-variable/inter": "5.0.8",
3031
"@frsource/cypress-plugin-visual-regression-diff": "3.3.5",
3132
"@jscutlery/semver": "^2.30.1",
3233
"@k11r/nx-cloudflare-wrangler": "2.4.2",

‎pnpm-lock.yaml

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)