|
9 | 9 | @custom-variant dark (&:where(.dark, .dark *)); |
10 | 10 |
|
11 | 11 | @theme { |
12 | | - --color-cream: #FFF9F5; |
13 | | - --color-butter: #FDAE4B; |
| 12 | + --color-cream: #fff9f5; |
| 13 | + --color-butter: #fdae4b; |
14 | 14 | --color-burnt-butter: #f2911b; |
15 | | - --color-midnight: #0F033A; |
16 | | - --color-evening: #251A4D; |
17 | | - --color-merino: #F2E7DD; |
| 15 | + --color-midnight: #0f033a; |
| 16 | + --color-evening: #251a4d; |
| 17 | + --color-merino: #f2e7dd; |
18 | 18 | --color-hurricane: #807575; |
19 | | - --color-dolphin: #6C6489; |
20 | | - --color-peach-orange: #FFC497; |
21 | | - --color-seashell-peach: #FFF0E8; |
22 | | - --color-dawn-pink: #F1E5E4; |
23 | | - --color-salmon: #F89377; |
24 | | - --color-fair-pink: #FFEAE4; |
| 19 | + --color-dolphin: #6c6489; |
| 20 | + --color-peach-orange: #ffc497; |
| 21 | + --color-seashell-peach: #fff0e8; |
| 22 | + --color-dawn-pink: #f1e5e4; |
| 23 | + --color-salmon: #f89377; |
| 24 | + --color-fair-pink: #ffeae4; |
25 | 25 |
|
26 | | - --font-sans: "Be Vietnam Pro", "sans-serif"; |
27 | | - --font-display: "Be Vietnam Pro", "sans-serif"; |
28 | | - --font-mono: "Jetbrains Mono", "sans-serif"; |
| 26 | + --font-sans: 'Be Vietnam Pro', 'sans-serif'; |
| 27 | + --font-display: 'Be Vietnam Pro', 'sans-serif'; |
| 28 | + --font-mono: 'Jetbrains Mono', 'sans-serif'; |
29 | 29 |
|
30 | 30 | --spacing-8xl: 88rem; |
31 | 31 | } |
|
45 | 45 | } |
46 | 46 |
|
47 | 47 | @utility prose { |
48 | | - & h2 { |
49 | | - @apply lg:relative; |
50 | | - } |
51 | | - |
52 | | - & h3 { |
53 | | - @apply lg:relative; |
54 | | - } |
55 | | - |
56 | | - & h4 { |
57 | | - @apply lg:relative; |
58 | | - } |
59 | | - |
60 | | - & h5 { |
61 | | - @apply lg:relative; |
62 | | - } |
63 | | - |
64 | | - & h6 { |
65 | | - @apply lg:relative; |
66 | | - } |
67 | | - |
68 | | - & .heading-anchor { |
69 | | - @apply mr-2 inline-block align-baseline text-butter shadow-none dark:shadow-none; |
70 | | - @apply lg:absolute lg:-left-7 lg:top-0; |
71 | | - } |
72 | | - |
73 | | - /* All `.prose` elements except `code` */ |
74 | | - & *:not(code)::selection { |
75 | | - @apply bg-primary-500/20; |
76 | | - } |
77 | | - |
78 | | - /* All `code` elements and their children */ |
79 | | - & code::selection { |
80 | | - @apply bg-cream/20; |
81 | | - } |
82 | | - & code *::selection { |
83 | | - @apply bg-cream/20; |
84 | | - } |
85 | | - |
86 | | - /* All `.prose` elements except `code` */ |
87 | | - .dark & *:not(code)::selection { |
88 | | - @apply bg-slate-500/50; |
89 | | - } |
90 | | - |
91 | | - /* All `code` elements and their children */ |
92 | | - .dark & code::selection { |
93 | | - @apply bg-slate-500/50; |
94 | | - } |
95 | | - |
96 | | - .dark & code *::selection { |
97 | | - @apply bg-slate-500/50; |
98 | | - } |
| 48 | + & h2 { |
| 49 | + @apply lg:relative; |
| 50 | + } |
| 51 | + |
| 52 | + & h3 { |
| 53 | + @apply lg:relative; |
| 54 | + } |
| 55 | + |
| 56 | + & h4 { |
| 57 | + @apply lg:relative; |
| 58 | + } |
| 59 | + |
| 60 | + & h5 { |
| 61 | + @apply lg:relative; |
| 62 | + } |
| 63 | + |
| 64 | + & h6 { |
| 65 | + @apply lg:relative; |
| 66 | + } |
| 67 | + |
| 68 | + & .heading-anchor { |
| 69 | + @apply mr-2 inline-block align-baseline text-butter shadow-none dark:shadow-none; |
| 70 | + @apply lg:absolute lg:-left-7 lg:top-0; |
| 71 | + } |
| 72 | + |
| 73 | + /* All `.prose` elements except `code` */ |
| 74 | + & *:not(code)::selection { |
| 75 | + @apply bg-primary-500/20; |
| 76 | + } |
| 77 | + |
| 78 | + /* All `code` elements and their children */ |
| 79 | + & code::selection { |
| 80 | + @apply bg-cream/20; |
| 81 | + } |
| 82 | + & code *::selection { |
| 83 | + @apply bg-cream/20; |
| 84 | + } |
| 85 | + |
| 86 | + /* All `.prose` elements except `code` */ |
| 87 | + .dark & *:not(code)::selection { |
| 88 | + @apply bg-slate-500/50; |
| 89 | + } |
| 90 | + |
| 91 | + /* All `code` elements and their children */ |
| 92 | + .dark & code::selection { |
| 93 | + @apply bg-slate-500/50; |
| 94 | + } |
| 95 | + |
| 96 | + .dark & code *::selection { |
| 97 | + @apply bg-slate-500/50; |
| 98 | + } |
99 | 99 | } |
100 | 100 |
|
101 | 101 | @utility heading-anchor { |
102 | | - .prose & { |
103 | | - @apply mr-2 inline-block align-baseline text-butter shadow-none dark:shadow-none; |
104 | | - @apply lg:absolute lg:-left-7 lg:top-0; |
105 | | - } |
| 102 | + .prose & { |
| 103 | + @apply mr-2 inline-block align-baseline text-butter shadow-none dark:shadow-none; |
| 104 | + @apply lg:absolute lg:-left-7 lg:top-0; |
| 105 | + } |
106 | 106 | } |
107 | 107 |
|
108 | 108 | @utility dark { |
109 | | - /* Dark Theme */ |
110 | | - |
111 | | - /* All elements except `.prose` and `code` */ |
112 | | - & *::selection { |
113 | | - @apply bg-slate-500/50; |
114 | | - } |
115 | | - |
116 | | - /* All `.prose` elements except `code` */ |
117 | | - & .prose *:not(code)::selection { |
118 | | - @apply bg-slate-500/50; |
119 | | - } |
120 | | - |
121 | | - /* All `code` elements and their children */ |
122 | | - & .prose code::selection { |
123 | | - @apply bg-slate-500/50; |
124 | | - } |
125 | | - & .prose code *::selection { |
126 | | - @apply bg-slate-500/50; |
127 | | - } |
128 | | - |
129 | | - & p code { |
130 | | - @apply bg-dolphin/40; |
131 | | - } |
132 | | - |
133 | | - & ul code { |
134 | | - @apply bg-dolphin/40; |
135 | | - } |
136 | | - |
137 | | - & p code::selection { |
138 | | - @apply !bg-slate-500/50; |
139 | | - } |
140 | | - |
141 | | - & ul code::selection { |
142 | | - @apply !bg-slate-500/50; |
143 | | - } |
| 109 | + /* Dark Theme */ |
| 110 | + |
| 111 | + /* All elements except `.prose` and `code` */ |
| 112 | + & *::selection { |
| 113 | + @apply bg-slate-500/50; |
| 114 | + } |
| 115 | + |
| 116 | + /* All `.prose` elements except `code` */ |
| 117 | + & .prose *:not(code)::selection { |
| 118 | + @apply bg-slate-500/50; |
| 119 | + } |
| 120 | + |
| 121 | + /* All `code` elements and their children */ |
| 122 | + & .prose code::selection { |
| 123 | + @apply bg-slate-500/50; |
| 124 | + } |
| 125 | + & .prose code *::selection { |
| 126 | + @apply bg-slate-500/50; |
| 127 | + } |
| 128 | + |
| 129 | + & p code { |
| 130 | + @apply bg-dolphin/40; |
| 131 | + } |
| 132 | + |
| 133 | + & ul code { |
| 134 | + @apply bg-dolphin/40; |
| 135 | + } |
| 136 | + |
| 137 | + & p code::selection { |
| 138 | + @apply !bg-slate-500/50; |
| 139 | + } |
| 140 | + |
| 141 | + & ul code::selection { |
| 142 | + @apply !bg-slate-500/50; |
| 143 | + } |
144 | 144 | } |
145 | 145 |
|
146 | 146 | @layer base { |
|
0 commit comments