Skip to content

Commit 0fab105

Browse files
aaroncoxaaroncox
authored
Merge branch 'dev' into action-summaries
2 parents 17a76ea + 5ecc23a commit 0fab105

18 files changed

Lines changed: 236 additions & 81 deletions

File tree

‎src/app.css‎

Lines changed: 132 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -92,113 +92,185 @@
9292
--color-solar-900: #7c3b0b;
9393
--color-solar-950: #481d00;
9494

95-
/* Seeds - Not for general use */
96-
--color-seed: var(--color-sky-500);
97-
/* --color-neutral-seed: oklch(from var(--color-seed) l 0.01 h); */
98-
/* --color-neutral-variant-seed: oklch(from var(--color-seed) l 0.015 h); */
95+
--error-hue: 27;
96+
--success-hue: 152;
97+
98+
--color-primary: inherit;
99+
--color-primary-hover: inherit;
100+
--color-on-primary: inherit;
101+
--color-primary-container: inherit;
102+
--color-on-primary-container: inherit;
103+
--color-error: inherit;
104+
--color-on-error: inherit;
105+
--color-error-container: inherit;
106+
--color-on-error-container: inherit;
107+
--color-success: inherit;
108+
--color-on-success: inherit;
109+
--color-success-container: inherit;
110+
--color-on-success-container: inherit;
99111

100-
/* Color Roles and default dark values */
101-
--color-primary: oklch(from var(--color-seed) 0.82 c h);
102-
--color-primary-hover: oklch(from var(--color-seed) 0.9 c h);
103-
--color-on-primary: oklch(from var(--color-seed) 0.2 c h);
112+
--color-shadow: oklch(0 0 0);
113+
--color-scrim: oklch(0 0 0 / 0.5);
104114

105-
--color-primary-container: oklch(from var(--color-seed) 0.39 0.086 h);
106-
--color-on-primary-container: oklch(from var(--color-seed) 0.9 0.085 h);
115+
--color-outline: inherit;
116+
--color-outline-variant: inherit;
117+
--color-surface: inherit;
118+
--color-on-surface: inherit;
119+
--color-on-surface-variant: inherit;
120+
--color-surface-container-lowest: inherit;
121+
--color-surface-container-low: inherit;
122+
--color-surface-container: inherit;
123+
--color-surface-container-high: inherit;
124+
--color-surface-container-highest: inherit;
125+
--color-background: inherit;
126+
--color-on-background: inherit;
127+
}
107128

108-
--color-error: rgb(255 180 171);
109-
--color-on-error: rgb(105 0 5);
110-
--color-error-container: rgb(147 0 10);
111-
--color-on-error-container: rgb(255 218 214);
129+
@utility dark-scheme {
130+
--color-primary: oklch(from var(--theme-seed) 0.82 c h);
131+
--color-primary-hover: oklch(from var(--theme-seed) 0.9 c h);
132+
--color-on-primary: oklch(from var(--theme-seed) 0.2 c h);
112133

113-
--color-shadow: oklch(0 0 0);
114-
--color-scrim: oklch(0 0 0 / 0.5);
134+
--color-primary-container: oklch(from var(--theme-seed) 0.39 0.086 h);
135+
--color-on-primary-container: oklch(from var(--theme-seed) 0.9 0.085 h);
115136

116-
--color-surface-tint: var(--color-primary);
117-
--color-surface: color-mix(in oklab, var(--color-shark-950) 100%, var(--color-surface-tint) 1.5%);
118-
--color-background: var(--color-surface);
137+
--color-error: oklch(0.84 0.089 var(--error-hue));
138+
--color-on-error: oklch(0.33 0.134 var(--error-hue));
139+
--color-error-container: oklch(0.42 0.17 var(--error-hue));
140+
--color-on-error-container: oklch(0.92 0.042 var(--error-hue));
119141

120-
--color-on-surface: oklch(from var(--color-surface) 0.95 c h);
121-
--color-on-surface-variant: oklch(from var(--color-surface) 0.8 calc(c * 2) h);
122-
--color-on-background: var(--color-on-surface);
142+
--color-success: oklch(0.84 0.089 var(--success-hue));
143+
--color-on-success: oklch(0.33 0.134 var(--success-hue));
144+
--color-success-container: oklch(0.42 0.17 var(--success-hue));
145+
--color-on-success-container: oklch(0.92 0.042 var(--success-hue));
123146

124147
--color-outline: oklch(from var(--color-surface) 0.65 c h);
125148
--color-outline-variant: oklch(from var(--color-surface) 0.4 c h);
126149

150+
/* --color-surface: oklch( */
151+
/* from color-mix(in oklab, var(--color-shark-950) 100%, var(--color-primary) 1.5%) l c h */
152+
/* ); */
153+
154+
--color-surface: oklch(from var(--color-primary) 0.24 0.001 h);
155+
--color-on-surface: oklch(from var(--color-surface) 0.95 c h);
156+
--color-on-surface-variant: oklch(from var(--color-surface) 0.8 calc(c * 2) h);
157+
127158
/* Surface Containers ranked by emphasis (contrast) */
128159
--color-surface-container-lowest: oklch(from var(--color-surface) calc(l - 0.01) c h);
129160
--color-surface-container-low: oklch(from var(--color-surface) calc(l + 0.01) c h);
130161
--color-surface-container: oklch(from var(--color-surface) calc(l + 0.023) c h);
131162
--color-surface-container-high: oklch(from var(--color-surface) calc(l + 0.05) c h);
132163
--color-surface-container-highest: oklch(from var(--color-surface) calc(l + 0.1) c h);
164+
165+
--color-background: var(--color-surface);
166+
--color-on-background: var(--color-on-surface);
133167
}
134168

135-
/*
136-
The default border color has changed to `currentColor` in Tailwind CSS v4,
137-
so we've added these compatibility styles to make sure everything still
138-
looks the same as it did with Tailwind CSS v3.
169+
@utility light-scheme {
170+
--color-primary: oklch(from var(--theme-seed) 0.4 c h);
171+
--color-primary-hover: oklch(from var(--theme-seed) 0.5 c h);
172+
--color-on-primary: oklch(from var(--theme-seed) 1 0 h);
139173

140-
If we ever want to remove these styles, we need to add an explicit border
141-
color utility to any element that depends on these defaults.
142-
*/
143-
@layer base {
144-
*,
145-
::after,
146-
::before,
147-
::backdrop,
148-
::file-selector-button {
149-
border-color: var(--color-outline, currentColor);
150-
}
174+
--color-primary-container: oklch(from var(--theme-seed) 0.9 0.086 h);
175+
--color-on-primary-container: oklch(from var(--theme-seed) 0.218 0.085 h);
151176

152-
html {
153-
@apply bg-background text-on-background h-full;
154-
color-scheme: dark light;
155-
touch-action: manipulation;
156-
scrollbar-gutter: stable;
177+
--color-error: oklch(0.51 0.1927 var(--error-hue));
178+
--color-on-error: oklch(1 0 var(--error-hue));
179+
--color-error-container: oklch(0.92 0.042 var(--error-hue));
180+
--color-on-error-container: oklch(0.42 0.17 var(--error-hue));
157181

158-
::selection {
159-
@apply bg-primary text-on-primary;
160-
}
161-
}
182+
--color-success: oklch(0.51 0.1927 var(--success-hue));
183+
--color-on-success: oklch(1 0 var(--success-hue));
184+
--color-success-container: oklch(0.92 0.042 var(--success-hue));
185+
--color-on-success-container: oklch(0.42 0.17 var(--success-hue));
162186

163-
body {
164-
@apply h-auto min-h-svh;
187+
--color-outline: oklch(from var(--color-surface) 0.5664 c h);
188+
--color-outline-variant: oklch(from var(--color-surface) 0.8267 c h);
189+
190+
--color-surface: oklch(from var(--color-primary) 0.98 0.007 h);
191+
--color-on-surface: oklch(from var(--color-surface) 0.22 c h);
192+
--color-on-surface-variant: oklch(from var(--color-surface) 0.4 0.015 h);
193+
194+
--color-surface-container-lowest: oklch(from var(--color-surface) calc(l + 0.01) 0.01 h);
195+
--color-surface-container-low: oklch(from var(--color-surface) calc(l - 0.01) 0.01 h);
196+
--color-surface-container: oklch(from var(--color-surface) calc(l - 0.023) 0.01 h);
197+
--color-surface-container-high: oklch(from var(--color-surface) calc(l - 0.05) 0.01 h);
198+
--color-surface-container-highest: oklch(from var(--color-surface) calc(l - 0.1) 0.01 h);
199+
200+
--color-background: var(--color-surface);
201+
--color-on-background: var(--color-on-surface);
202+
}
203+
204+
@layer base {
205+
/* Schemes */
206+
[data-scheme='light'] {
207+
@apply light-scheme;
165208
}
166209

167-
p,
168-
li {
169-
@apply text-muted text-base font-normal;
210+
[data-scheme='dark'] {
211+
@apply dark-scheme;
170212
}
213+
214+
/* Themes */
171215
[data-theme='eos'] {
172-
--color-seed: rgb(248 187 113);
216+
--theme-seed: rgb(248 187 113);
173217
}
174218

175219
[data-theme='telos'] {
176-
--color-seed: rgb(207 189 254);
220+
--theme-seed: rgb(207 189 254);
221+
&[data-scheme='dark'] {
222+
--color-surface: oklch(from var(--color-primary) 0.24 0.02 h);
223+
}
177224
}
178225

179226
[data-theme='jungle4'] {
180-
--color-seed: #2e9e87;
227+
--theme-seed: #2e9e87;
228+
&[data-scheme='dark'] {
229+
--color-surface: oklch(from var(--color-primary) 0.24 0.005 h);
230+
}
181231
}
182232

183233
[data-theme='vaulta'] {
184-
--color-seed: #2e3bff;
234+
--theme-seed: #2e3bff;
235+
&[data-scheme='dark'] {
236+
--color-surface: oklch(from var(--color-primary) 0.24 0.02 h);
237+
}
185238
}
186239

187240
[data-theme='wax'] {
188-
--color-seed: rgb(255 183 123);
241+
--theme-seed: rgb(255 183 123);
242+
&[data-scheme='dark'] {
243+
--color-surface: oklch(from var(--color-primary) 0.24 0.001 h);
244+
}
189245
}
190246

191247
[data-theme='kylin'] {
192-
--color-seed: rgb(255 180 168);
248+
--theme-seed: rgb(255 180 168);
249+
}
250+
251+
/* Element defaults */
252+
:root {
253+
@apply bg-background text-on-background h-full;
254+
color-scheme: dark light;
255+
touch-action: manipulation;
256+
scrollbar-gutter: stable;
257+
258+
::selection {
259+
@apply bg-primary text-on-primary;
260+
}
193261
}
194262

195-
/* Light Mode Themes */
196-
@media (prefers-color-scheme: light) {
263+
body {
264+
@apply h-auto min-h-svh;
265+
}
266+
267+
p,
268+
li {
269+
@apply text-muted text-base font-normal;
197270
}
198271
}
199272

200273
@utility h1 {
201-
/* Headings are defined by class instead of tag to preserve semantic html independent of style */
202274
@apply text-5xl leading-none font-semibold;
203275
}
204276

‎src/app.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,11 @@
66
name="viewport"
77
content="width=device-width, initial-scale=1, interactive-widget=resizes-content"
88
/>
9-
<meta name="color-scheme" content="dark" />
9+
<meta name="color-scheme" content="dark light" />
1010
<link rel="icon" href="/favicon.ico" />
1111
<link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any" />
1212
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
1313
<meta name="apple-mobile-web-app-title" content="Unicove" />
14-
<!-- <link rel="manifest" href="/site.webmanifest" /> -->
1514
<style>
1615
@font-face {
1716
font-family: 'Inter';

‎src/lib/components/button/button.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
' inline-flex h-12 grow rounded-lg bg-primary px-8 text-on-primary focus:outline-transparent focus-visible:outline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-solar-500 disabled:bg-on-surface/12 disabled:text-on-surface/40';
5050
5151
const outlinedStyles =
52-
' flex h-12 grow rounded-lg px-8 text-primary ring-2 ring-inset ring-outline focus-visible:outline-hidden focus-visible:ring-solar-500 hover:active:ring-outline disabled:text-on-surface/40 disabled:hover:bg-transparent disabled:hover:ring-on-surface/12 disabled:ring-on-surface/12 ';
52+
' flex h-12 grow rounded-lg px-8 text-primary ring-2 ring-inset ring-outline-variant focus-visible:outline-hidden focus-visible:ring-solar-500 hover:active:ring-outline-variant disabled:text-on-surface/40 disabled:hover:bg-transparent disabled:hover:ring-on-surface/12 disabled:ring-on-surface/12 ';
5353
5454
const pillStyles =
5555
' inline-flex h-10 rounded-full border-2 border-transparent px-5 leading-4 focus-visible:border-solar-500 focus-visible:outline-hidden aria-[current]:border-outline-variant aria-[current]:focus-visible:border-solar-500';
@@ -81,7 +81,7 @@
8181
{...linkProps}
8282
>
8383
<div
84-
class="state-layer group-active/button:group-hove/buttonr:opacity-16 pointer-events-none absolute inset-0 rounded-[inherit] bg-current opacity-0 transition-opacity group-hover/button:opacity-8 group-focus-visible/button:opacity-10 group-disabled/button:hidden"
84+
class="state-layer pointer-events-none absolute inset-0 rounded-[inherit] bg-current opacity-0 transition-opacity group-hover/button:opacity-8 group-focus-visible/button:opacity-10 group-active/button:group-hover/button:opacity-16 group-disabled/button:hidden"
8585
></div>
8686
<span class="content-layer pointer-events-none relative text-inherit">
8787
{@render props.children()}

‎src/lib/components/elements/account.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
<a
4848
href={path}
4949
class={cn(
50-
'focus-visible:outline-solar-500 text-primary hover:text-primary-container inline-flex items-center gap-2 focus-visible:outline ',
50+
'focus-visible:outline-solar-500 text-primary hover:text-primary-hover inline-flex items-center gap-2 focus-visible:outline ',
5151
props.class
5252
)}
5353
use:melt={$trigger}

‎src/lib/components/elements/block.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</script>
1010

1111
{#if number}
12-
<a class="text-primary hover:text-primary-container" href="/{network}/block/{String(number)}">
12+
<a class="text-primary hover:text-primary-hover" href="/{network}/block/{String(number)}">
1313
{String(number)}
1414
</a>
1515
{/if}

‎src/lib/components/elements/contract.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
</script>
3535

3636
{#if name}
37-
<a class={cn('text-primary hover:text-primary-container', props.class)} {href}>
37+
<a class={cn('text-primary hover:text-primary-hover', props.class)} {href}>
3838
{#if children}
3939
{@render children()}
4040
{:else}

‎src/lib/components/elements/key.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
{#if key}
1818
<a
19-
class="text-primary hover:text-primary-container inline-grid grid-cols-[auto_1fr] items-start gap-2 font-mono"
19+
class="text-primary hover:text-primary-hover inline-grid grid-cols-[auto_1fr] items-start gap-2 font-mono"
2020
href="/{network}/key/{String(key)}"
2121
>
2222
{#if icon}

‎src/lib/components/elements/tradingpair.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,12 @@
4747
</span>
4848
{#if historic}
4949
{#if percentChangePositive}
50-
<span class="inline-flex items-center gap-1.5 leading-none text-green-300">
50+
<span class="text-success inline-flex items-center gap-1.5 leading-none">
5151
<Triangle fill="currentColor" class="size-2" />
5252
{percentChangeString}% {timeframeString}
5353
</span>
5454
{:else}
55-
<span class="inline-flex items-center gap-1.5 leading-none text-red-300">
55+
<span class="text-error inline-flex items-center gap-1.5 leading-none">
5656
<Triangle fill="currentColor" class="size-2 rotate-180" />
5757
{percentChangeString}% {timeframeString}
5858
</span>

‎src/lib/components/elements/transaction.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
{#if id}
1515
<a
16-
class={cn('text-primary hover:text-primary-container', className)}
16+
class={cn('text-primary hover:text-primary-hover', className)}
1717
href="/{network}/transaction/{String(id)}"
1818
>
1919
{truncatedString}

‎src/lib/components/input/switch.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
<button
4747
{id}
4848
use:melt={$root}
49-
class=" border-outline *:bg-outline focus-visible:border-solar-500 focus-visible:outline-solar-500 data-[state=checked]:*:bg-on-primary-container data-[state=checked]:bg-primary-container data-[state=checked]:border-primary-container data-[state=checked]:hover:bg-primary-container/90 data-[state=checked]:hover:border-primary-container/90 relative h-8 w-[52px] rounded-full border-2 bg-transparent *:size-4 *:translate-x-1.5 *:transition-transform focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:*:translate-x-[26px] data-[state=checked]:*:scale-150"
49+
class=" border-outline *:bg-outline focus-visible:border-solar-500 focus-visible:outline-solar-500 data-[state=checked]:*:bg-on-primary data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:hover:bg-primary/90 data-[state=checked]:hover:border-primary/90 relative h-8 w-[52px] rounded-full border-2 bg-transparent *:size-4 *:translate-x-1.5 *:transition-transform focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:*:translate-x-[26px] data-[state=checked]:*:scale-150"
5050
aria-labelledby={ariaLabelledBy}
5151
>
5252
<span class="thumb block rounded-full"></span>

0 commit comments

Comments
 (0)