Skip to content

Commit eff875e

Browse files
scriptcodedscriptcoded
committed
feat: tailwind theme
1 parent 2e106c3 commit eff875e

File tree

9 files changed

+234
-5
lines changed

9 files changed

+234
-5
lines changed

‎.changeset/kind-mangos-hammer.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@scouterna/design-tokens": patch
3+
"@scouterna/ui-react": patch
4+
"@scouterna/ui-webc": patch
5+
"@scouterna/tailwind-theme": patch
6+
---
7+
8+
Add Tailwind theme

‎.vscode/settings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"files.associations": {
3+
"**/packages/tailwind-theme/**/*.css": "tailwindcss",
34
"*.css": "css" // Avoid CSS files being detected as Tailwind-flavored CSS
45
},
56
"editor.defaultFormatter": "biomejs.biome"

‎biome.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,14 @@
5555
}
5656
}
5757
}
58+
},
59+
{
60+
"includes": ["packages/tailwind-theme/**/*.css"],
61+
"css": {
62+
"parser": {
63+
"tailwindDirectives": true
64+
}
65+
}
5866
}
5967
]
6068
}

‎packages/design-tokens/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,16 @@
1111
],
1212
"repository": {
1313
"type": "git",
14-
"url": "https://github.com/Scouterna/j26-components.git"
14+
"url": "https://github.com/Scouterna/j26-components.git",
15+
"directory": "packages/design-tokens"
1516
},
1617
"type": "module",
1718
"scripts": {
1819
"build": "node build-tokens.mjs"
1920
},
2021
"keywords": [],
2122
"author": "",
22-
"license": "UNLICENSED",
23+
"license": "MIT",
2324
"packageManager": "pnpm@10.24.0",
2425
"devDependencies": {
2526
"style-dictionary": "^5.1.1"

‎packages/tailwind-theme/package.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "@scouterna/tailwind-theme",
3+
"version": "0.0.1",
4+
"description": "Scouterna Design System Tailwind CSS Theme",
5+
"main": "theme.css",
6+
"module": "theme.css",
7+
"files": [
8+
"theme.css"
9+
],
10+
"exports": {
11+
".": {
12+
"import": "./theme.css",
13+
"default": "./theme.css"
14+
}
15+
},
16+
"repository": {
17+
"type": "git",
18+
"url": "https://github.com/Scouterna/j26-components.git",
19+
"directory": "packages/tailwind-theme"
20+
},
21+
"keywords": [],
22+
"author": "",
23+
"license": "MIT",
24+
"packageManager": "pnpm@10.24.0",
25+
"dependencies": {
26+
"@scouterna/design-tokens": "workspace:*"
27+
}
28+
}

‎packages/tailwind-theme/theme.css‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
@import "@fontsource-variable/source-sans-3";
2+
@import "@scouterna/design-tokens/tokens.css";
3+
4+
body {
5+
font-family: "Source Sans 3 Variable", sans-serif;
6+
font-size: var(--text-body-base);
7+
line-height: 1.5;
8+
color: var(--color-text-base);
9+
}
10+
11+
@theme {
12+
--text-*: initial;
13+
--text-body-base: var(--fontsize-base);
14+
--text-body-sm: var(--fontsize-sm);
15+
--text-body-lg: var(--fontsize-lg);
16+
--text-body-xl: var(--fontsize-xl);
17+
--text-body-2xl: var(--fontsize-2xl);
18+
--text-heading-xl: var(--fontsize-6xl);
19+
--text-heading-lg: var(--fontsize-5xl);
20+
--text-heading-base: var(--fontsize-4xl);
21+
--text-heading-sm: var(--fontsize-3xl);
22+
--text-heading-xs: var(--fontsize-2xl);
23+
24+
--color-*: initial;
25+
--color-blue-50: #e6eeff;
26+
--color-blue-100: #d0e0ff;
27+
--color-blue-200: #9cc3ff;
28+
--color-blue-300: #58a6ff;
29+
--color-blue-400: #0087e3;
30+
--color-blue-500: #006bb5;
31+
--color-blue-600: #00508a;
32+
--color-blue-700: #003660;
33+
--color-blue-800: #002748;
34+
--color-blue-900: #00162d;
35+
--color-blue-950: #000f21;
36+
--color-neutral-50: #ebf1f7;
37+
--color-neutral-100: #d7e4f0;
38+
--color-neutral-200: #b1cde3;
39+
--color-neutral-300: #87b3d4;
40+
--color-neutral-400: #749bb7;
41+
--color-neutral-500: #608199;
42+
--color-neutral-600: #4c667a;
43+
--color-neutral-700: #374b5a;
44+
--color-neutral-800: #25343f;
45+
--color-neutral-900: #131d24;
46+
--color-neutral-950: #0a1217;
47+
--color-white: #ffffff;
48+
--color-challengerpink-50: #fff0f2;
49+
--color-challengerpink-100: #ffdde3;
50+
--color-challengerpink-200: #ffbac7;
51+
--color-challengerpink-300: #ff93ab;
52+
--color-challengerpink-400: #ff668e;
53+
--color-challengerpink-500: #ff1271;
54+
--color-challengerpink-600: #da005e;
55+
--color-challengerpink-700: #a60046;
56+
--color-challengerpink-800: #72002e;
57+
--color-challengerpink-900: #470019;
58+
--color-challengerpink-950: #30000f;
59+
--color-orange-50: #fffbeb;
60+
--color-orange-100: #fef3c7;
61+
--color-orange-200: #fde68a;
62+
--color-orange-300: #fcd34d;
63+
--color-orange-400: #fbbf24;
64+
--color-orange-500: #f59e0b;
65+
--color-orange-600: #d97706;
66+
--color-orange-700: #b45309;
67+
--color-orange-800: #92400e;
68+
--color-orange-900: #78350f;
69+
--color-orange-950: #451a03;
70+
--color-gray-50: #f3f3f4;
71+
--color-gray-100: #e5e5e6;
72+
--color-gray-200: #cbccce;
73+
--color-gray-300: #b2b3b6;
74+
--color-gray-400: #9c9ea1;
75+
--color-gray-500: #85868a;
76+
--color-gray-600: #6e7073;
77+
--color-gray-700: #585a5c;
78+
--color-gray-800: #444547;
79+
--color-gray-900: #252627;
80+
--color-gray-950: #151616;
81+
--color-discovererblue-50: #eaf5ff;
82+
--color-discovererblue-100: #cde9ff;
83+
--color-discovererblue-200: #92d4ff;
84+
--color-discovererblue-300: #1ec0ff;
85+
--color-discovererblue-400: #00a8e1;
86+
--color-discovererblue-500: #008bbb;
87+
--color-discovererblue-600: #006d94;
88+
--color-discovererblue-700: #01516f;
89+
--color-discovererblue-800: #00394f;
90+
--color-discovererblue-900: #00202f;
91+
--color-discovererblue-950: #00131d;
92+
--color-trackergreen-50: #ccfec6;
93+
--color-trackergreen-100: #85fd72;
94+
--color-trackergreen-200: #5be23d;
95+
--color-trackergreen-300: #4ec333;
96+
--color-trackergreen-400: #41a629;
97+
--color-trackergreen-500: #348821;
98+
--color-trackergreen-600: #286c18;
99+
--color-trackergreen-700: #1c5110;
100+
--color-trackergreen-800: #113808;
101+
--color-trackergreen-900: #072103;
102+
--color-trackergreen-950: #031501;
103+
--color-green-50: #f0fdf4;
104+
--color-green-100: #dcfce7;
105+
--color-green-200: #b9f8cf;
106+
--color-green-300: #7bf1a8;
107+
--color-green-400: #05df72;
108+
--color-green-500: #00c950;
109+
--color-green-600: #00a63e;
110+
--color-green-700: #008236;
111+
--color-green-800: #016630;
112+
--color-green-900: #0d542b;
113+
--color-green-950: #032e15;
114+
--color-red-50: #fef2f2;
115+
--color-red-100: #ffe2e2;
116+
--color-red-200: #ffc9c9;
117+
--color-red-300: #ffa2a2;
118+
--color-red-400: #ff6467;
119+
--color-red-500: #fb2c36;
120+
--color-red-600: #e7000b;
121+
--color-red-700: #c10007;
122+
--color-red-800: #9f0712;
123+
--color-red-900: #82181a;
124+
--color-red-950: #460809;
125+
--color-black: #000000;
126+
--color-roveryellow-50: #fffd62;
127+
--color-roveryellow-100: #f4f203;
128+
--color-roveryellow-200: #e2e000;
129+
--color-roveryellow-300: #c3c100;
130+
--color-roveryellow-400: #a4a300;
131+
--color-roveryellow-500: #878500;
132+
--color-roveryellow-600: #6a6900;
133+
--color-roveryellow-700: #515000;
134+
--color-roveryellow-800: #373700;
135+
--color-roveryellow-900: #1f1f00;
136+
--color-roveryellow-950: #121200;
137+
--color-adventurerorange-50: #fff1ee;
138+
--color-adventurerorange-100: #fee2dd;
139+
--color-adventurerorange-200: #fec0b4;
140+
--color-adventurerorange-300: #fda18b;
141+
--color-adventurerorange-400: #fd7a4c;
142+
--color-adventurerorange-500: #e95f13;
143+
--color-adventurerorange-600: #b94a0d;
144+
--color-adventurerorange-700: #8e3708;
145+
--color-adventurerorange-800: #622303;
146+
--color-adventurerorange-900: #3c1301;
147+
--color-adventurerorange-950: #280a01;
148+
--color-text-caution-base: var(--color-orange-700);
149+
--color-text-caution-bold-base: var(--color-orange-50);
150+
--color-text-brand-base: var(--color-blue-700);
151+
--color-text-brand-inverse: var(--color-white);
152+
--color-text-danger-base: var(--color-red-700);
153+
--color-text-danger-bold-base: var(--color-red-50);
154+
--color-text-positive-bold-base: var(--color-green-50);
155+
--color-text-positive-base: var(--color-green-700);
156+
--color-text-base: var(--color-neutral-800);
157+
--color-background-danger-base: var(--color-red-100);
158+
--color-background-danger-bold-base: var(--color-red-700);
159+
--color-background-danger-bold-hovered: var(--color-red-800);
160+
--color-background-danger-bold-pressed: var(--color-red-900);
161+
--color-background-brand-subtle-hovered: var(--color-blue-50);
162+
--color-background-brand-subtle-pressed: var(--color-blue-100);
163+
--color-background-brand-subtle-base: var(--color-blue-700);
164+
--color-background-brand-hovered: var(--color-blue-800);
165+
--color-background-brand-pressed: var(--color-blue-900);
166+
--color-background-brand-base: var(--color-blue-700);
167+
--color-background-positive-base: var(--color-green-100);
168+
--color-background-positive-bold-base: var(--color-green-700);
169+
--color-background-positive-bold-hovered: var(--color-green-800);
170+
--color-background-positive-bold-pressed: var(--color-green-900);
171+
--color-background-caution-base: var(--color-orange-100);
172+
--color-background-caution-bold-base: var(--color-orange-700);
173+
--color-background-caution-bold-hovered: var(--color-orange-800);
174+
--color-background-caution-bold-pressed: var(--color-orange-900);
175+
}

‎packages/ui-react/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,16 @@
1010
],
1111
"repository": {
1212
"type": "git",
13-
"url": "https://github.com/Scouterna/j26-components.git"
13+
"url": "https://github.com/Scouterna/j26-components.git",
14+
"directory": "packages/ui-react"
1415
},
1516
"scripts": {
1617
"build": "tsc --outDir ./dist",
1718
"dev": "tsc --outDir ./dist --watch --preserveWatchOutput"
1819
},
1920
"keywords": [],
2021
"author": "",
21-
"license": "UNLICENSED",
22+
"license": "MIT",
2223
"packageManager": "pnpm@10.24.0",
2324
"dependencies": {
2425
"@stencil/react-output-target": "^1.2.0",

‎packages/ui-webc/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@
3434
},
3535
"repository": {
3636
"type": "git",
37-
"url": "https://github.com/Scouterna/j26-components.git"
37+
"url": "https://github.com/Scouterna/j26-components.git",
38+
"directory": "packages/ui-webc"
3839
},
3940
"files": [
4041
"dist/",

‎pnpm-lock.yaml‎

Lines changed: 6 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)