Skip to content

Commit 7cea084

Browse files
bslobodinbslobodin
committed
wip
1 parent db5e233 commit 7cea084

File tree

5 files changed

+87
-35
lines changed

5 files changed

+87
-35
lines changed

‎tailwind/README.md‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,15 @@
11
# flexoki + tailwind 4 = ❤️
22

3-
## namespaced
3+
## namespaced.css
44

5-
Grab this file if you want to use Flexoki palette without affecting any of your existing Tailwind colors,
5+
Grab this file if you want to use Flexoki palette without affecting any of your existing Tailwind colors, e.g. `bg-flexoki-paper` or `text-flexoki-blue-600`.
66

7-
```
8-
bg-flexoki-red-300
9-
```
7+
- [namespaced.css](namespaced.css)
8+
- 🔍 [Tailwind Play](https://play.tailwindcss.com/NB8XDrpw9C)
109

11-
- application-namespaced.css
12-
- application-namespaced.html (sample for [play.tailwindcss.com](play.tailwindcss.com]))
13-
- https://play.tailwindcss.com/PGMNxzNsWp
10+
## replacement.css
1411

12+
Grab this file if you want to replace your Tailwind color palette with Flexoki, e.g. `bg-paper` or `text-blue-600`.
1513

16-
## replacement
17-
18-
Grab this file if you want to replace your Tailwind color palette with Flexoki.
19-
20-
```
21-
bg-red-300
22-
```
23-
24-
- application-replacement.css
25-
- application-replacement.html (sample for [play.tailwindcss.com](play.tailwindcss.com]))
26-
- https://play.tailwindcss.com/tdHRBg47iW
14+
- [replacement.css](replacement.css)
15+
- 🔍 [Tailwind Play](https://play.tailwindcss.com/yQR20MnlW8)

tailwind/application-namespaced.css renamed to tailwind/namespaced.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import 'tailwindcss';
22

3+
/* Specify new namespaced colors. */
34
@theme {
45
--color-flexoki-black: #100F0F;
56
--color-flexoki-paper: #FFFCF0;
@@ -131,6 +132,7 @@
131132
--color-flexoki-magenta-950: #24131D;
132133
}
133134

135+
/* Define some semantic aliases. */
134136
@theme inline {
135137
--color-flexoki-light-bg: var(--color-flexoki-paper);
136138
--color-flexoki-light-bg-2: var(--color-flexoki-base-50);

tailwind/application-namespaced.html renamed to tailwind/namespaced.html

File renamed without changes.

tailwind/application-replacement.css renamed to tailwind/replacement.css

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
@import 'tailwindcss';
22

3+
/* https://tailwindcss.com/docs/colors#customizing-your-colors */
4+
35
@theme {
6+
/* Disable default colors to prevent their use; feel free to re-enable as needed though. */
47
--color-amber-*: initial;
58
--color-lime-*: initial;
69
--color-emerald-*: initial;
@@ -12,14 +15,13 @@
1215
--color-pink-*: initial;
1316
--color-rose-*: initial;
1417
--color-slate-*: initial;
15-
--color-gray-*: initial;
1618
--color-zinc-*: initial;
1719
--color-neutral-*: initial;
1820
--color-stone-*: initial;
1921

22+
/* Specify new default colors. */
2023
--color-black: #100F0F;
2124
--color-paper: #FFFCF0;
22-
2325
--color-base-50: #F2F0E5;
2426
--color-base-100: #E6E4D9;
2527
--color-base-150: #DAD8CE;
@@ -33,7 +35,6 @@
3335
--color-base-850: #343331;
3436
--color-base-900: #282726;
3537
--color-base-950: #1C1B1A;
36-
3738
--color-red-50: #FFE1D5;
3839
--color-red-100: #FFCABB;
3940
--color-red-150: #FDB2A2;
@@ -47,7 +48,6 @@
4748
--color-red-850: #551B18;
4849
--color-red-900: #3E1715;
4950
--color-red-950: #261312;
50-
5151
--color-orange-50: #FFE7CE;
5252
--color-orange-100: #FED3AF;
5353
--color-orange-150: #FCC192;
@@ -61,7 +61,6 @@
6161
--color-orange-850: #59290D;
6262
--color-orange-900: #40200D;
6363
--color-orange-950: #27180E;
64-
6564
--color-yellow-50: #FAEEC6;
6665
--color-yellow-100: #F6E2A0;
6766
--color-yellow-150: #F1D67E;
@@ -75,7 +74,6 @@
7574
--color-yellow-850: #503D02;
7675
--color-yellow-900: #3A2D04;
7776
--color-yellow-950: #241E08;
78-
7977
--color-green-50: #EDEECF;
8078
--color-green-100: #DDE2B2;
8179
--color-green-150: #CDD597;
@@ -89,7 +87,6 @@
8987
--color-green-850: #313D07;
9088
--color-green-900: #252D09;
9189
--color-green-950: #1A1E0C;
92-
9390
--color-cyan-50: #DDF1E4;
9491
--color-cyan-100: #BFE8D9;
9592
--color-cyan-150: #A2DECE;
@@ -103,7 +100,6 @@
103100
--color-cyan-850: #143F3C;
104101
--color-cyan-900: #122F2C;
105102
--color-cyan-950: #101F1D;
106-
107103
--color-blue-50: #E1ECEB;
108104
--color-blue-100: #C6DDE8;
109105
--color-blue-150: #ABCFE2;
@@ -117,7 +113,6 @@
117113
--color-blue-850: #133051;
118114
--color-blue-900: #12253B;
119115
--color-blue-950: #101A24;
120-
121116
--color-purple-50: #F0EAEC;
122117
--color-purple-100: #E2D9E9;
123118
--color-purple-150: #D3CAE6;
@@ -131,7 +126,6 @@
131126
--color-purple-850: #31234E;
132127
--color-purple-900: #261C39;
133128
--color-purple-950: #1A1623;
134-
135129
--color-magenta-50: #FEE4E5;
136130
--color-magenta-100: #FCCFDA;
137131
--color-magenta-150: #F9B9CF;
@@ -147,6 +141,7 @@
147141
--color-magenta-950: #24131D;
148142
}
149143

144+
/* Define some semantic aliases. */
150145
@theme inline {
151146
--color-light-bg: var(--color-paper);
152147
--color-light-bg-2: var(--color-base-50);
@@ -156,7 +151,6 @@
156151
--color-light-ui: var(--color-base-100);
157152
--color-light-ui-2: var(--color-base-150);
158153
--color-light-ui-3: var(--color-base-200);
159-
160154
--color-dark-bg: var(--color-black);
161155
--color-dark-bg-2: var(--color-base-950);
162156
--color-dark-tx: var(--color-base-200);
@@ -165,7 +159,6 @@
165159
--color-dark-ui: var(--color-base-900);
166160
--color-dark-ui-2: var(--color-base-850);
167161
--color-dark-ui-3: var(--color-base-800);
168-
169162
--color-light-re: var(--color-red-600);
170163
--color-light-or: var(--color-orange-600);
171164
--color-light-ye: var(--color-yellow-600);
@@ -174,7 +167,6 @@
174167
--color-light-bl: var(--color-blue-600);
175168
--color-light-pu: var(--color-purple-600);
176169
--color-light-ma: var(--color-magenta-600);
177-
178170
--color-dark-re: var(--color-red-400);
179171
--color-dark-or: var(--color-orange-400);
180172
--color-dark-ye: var(--color-yellow-400);
@@ -183,7 +175,6 @@
183175
--color-dark-bl: var(--color-blue-400);
184176
--color-dark-pu: var(--color-purple-400);
185177
--color-dark-ma: var(--color-magenta-400);
186-
187178
--color-light-re-2: var(--color-red-400);
188179
--color-light-or-2: var(--color-orange-400);
189180
--color-light-ye-2: var(--color-yellow-400);
@@ -192,7 +183,6 @@
192183
--color-light-bl-2: var(--color-blue-400);
193184
--color-light-pu-2: var(--color-purple-400);
194185
--color-light-ma-2: var(--color-magenta-400);
195-
196186
--color-dark-re-2: var(--color-red-600);
197187
--color-dark-or-2: var(--color-orange-600);
198188
--color-dark-ye-2: var(--color-yellow-600);

tailwind/application-replacement.html renamed to tailwind/replacement.html

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="p-8 bg-paper text-black">
1+
<div class="p-8">
22
<div class="not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4">
33
<div class="col-start-2 grid grid-cols-13 justify-items-center gap-1.5 font-medium text-gray-950 *:rotate-180 *:[writing-mode:vertical-lr] sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb]">
44
<div>50</div>
@@ -384,4 +384,75 @@
384384
<div class="aspect-1/1 rounded-sm outline -outline-offset-1 outline-black/10 sm:rounded-md" style="background-color: var(--color-stone-950);"></div>
385385
</div>
386386
</div>
387+
388+
<div class="mt-8 grid grid-cols-2 gap-4 text-center">
389+
<div class="rounded-sm bg-paper py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">paper</div>
390+
<div class="rounded-sm bg-black py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">black</div>
391+
392+
<div class="rounded-sm bg-light-bg py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">light-bg</div>
393+
<div class="rounded-sm bg-dark-bg py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">dark-bg</div>
394+
395+
<div class="rounded-sm bg-light-bg-2 py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">light-bg-2</div>
396+
<div class="rounded-sm bg-dark-bg-2 py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">dark-bg-2</div>
397+
398+
<div class="rounded-sm bg-light-ui py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">light-ui</div>
399+
<div class="rounded-sm bg-dark-ui py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">dark-ui</div>
400+
401+
<div class="rounded-sm bg-light-ui-2 py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">light-ui-2</div>
402+
<div class="rounded-sm bg-dark-ui-2 py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">dark-ui-2</div>
403+
404+
<div class="rounded-sm bg-light-ui-3 py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">light-ui-3</div>
405+
<div class="rounded-sm bg-dark-ui-3 py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">dark-ui-3</div>
406+
407+
<div class="rounded-sm bg-light-tx py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-tx</div>
408+
<div class="rounded-sm bg-dark-tx py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-tx</div>
409+
410+
<div class="rounded-sm bg-light-tx-2 py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">light-tx-2</div>
411+
<div class="rounded-sm bg-dark-tx-2 py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">dark-tx-2</div>
412+
413+
<div class="rounded-sm bg-light-tx-3 py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">light-tx-3</div>
414+
<div class="rounded-sm bg-dark-tx-3 py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">dark-tx-3</div>
415+
416+
<div class="rounded-sm bg-dark-re py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-re</div>
417+
<div class="rounded-sm bg-light-re py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-re</div>
418+
419+
<div class="rounded-sm bg-dark-re-2 py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-re-2</div>
420+
<div class="rounded-sm bg-light-re-2 py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-re-2</div>
421+
422+
<div class="rounded-sm bg-dark-or py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-or</div>
423+
<div class="rounded-sm bg-light-or py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-or</div>
424+
425+
<div class="rounded-sm bg-dark-or-2 py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-or-2</div>
426+
<div class="rounded-sm bg-light-or-2 py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-or-2</div>
427+
428+
<div class="rounded-sm bg-dark-ye py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-ye</div>
429+
<div class="rounded-sm bg-light-ye py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-ye</div>
430+
431+
<div class="rounded-sm bg-dark-ye-2 py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-ye-2</div>
432+
<div class="rounded-sm bg-light-ye-2 py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-ye-2</div>
433+
434+
<div class="rounded-sm bg-dark-gr py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-gr</div>
435+
<div class="rounded-sm bg-light-gr py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-gr</div>
436+
437+
<div class="rounded-sm bg-dark-gr-2 py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-gr-2</div>
438+
<div class="rounded-sm bg-light-gr-2 py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-gr-2</div>
439+
440+
<div class="rounded-sm bg-dark-cy py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-cy</div>
441+
<div class="rounded-sm bg-light-cy py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-cy</div>
442+
443+
<div class="rounded-sm bg-dark-cy-2 py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-cy-2</div>
444+
<div class="rounded-sm bg-light-cy-2 py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-cy-2</div>
445+
446+
<div class="rounded-sm bg-dark-bl py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-bl</div>
447+
<div class="rounded-sm bg-light-bl py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-bl</div>
448+
449+
<div class="rounded-sm bg-dark-bl-2 py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-bl-2</div>
450+
<div class="rounded-sm bg-light-bl-2 py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-bl-2</div>
451+
452+
<div class="rounded-sm bg-dark-pu-2 py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-pu-2</div>
453+
<div class="rounded-sm bg-light-pu-2 py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-pu-2</div>
454+
455+
<div class="rounded-sm bg-dark-ma-2 py-1 font-medium text-gray-950 outline -outline-offset-1 outline-black/10">dark-ma-2</div>
456+
<div class="rounded-sm bg-light-ma-2 py-1 font-medium text-gray-50 outline -outline-offset-1 outline-black/10">light-ma-2</div>
457+
</div>
387458
</div>

0 commit comments

Comments
 (0)