From 49fe4bf72d8e69058e76e6b64ac9a7e01b4c05f5 Mon Sep 17 00:00:00 2001 From: myrmidex Date: Sun, 23 Aug 2026 18:32:21 +0200 Subject: [PATCH] Adopt @lvl0/ui for palette, utilities, and font --- package.json | 3 ++ resources/css/app.css | 86 +--------------------------------- resources/fonts/7segment.woff | Bin 1952 -> 0 bytes 3 files changed, 4 insertions(+), 85 deletions(-) delete mode 100644 resources/fonts/7segment.woff diff --git a/package.json b/package.json index b712c3d..8813571 100644 --- a/package.json +++ b/package.json @@ -18,5 +18,8 @@ "@rollup/rollup-linux-x64-gnu": "4.9.5", "@tailwindcss/oxide-linux-x64-gnu": "^4.0.1", "lightningcss-linux-x64-gnu": "^1.29.1" + }, + "devDependencies": { + "@lvl0/ui": "git+ssh://git@forge.lvl0.xyz:2222/lvl0/ui.git#v0.1.0" } } diff --git a/resources/css/app.css b/resources/css/app.css index 7c32460..a048ee2 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -1,4 +1,5 @@ @import 'tailwindcss'; +@import '@lvl0/ui'; @import '../../vendor/livewire/flux/dist/flux.css'; @source '../views'; @@ -8,91 +9,6 @@ @custom-variant dark (&:where(.dark, .dark *)); -@theme { - /* lvl0 palette. Primary is the house red shared with incr and buckets; - bordeaux is the secondary, used for dividers and recessed chrome. */ - --color-primary: oklch(63.7% 0.237 25.331); - --color-bordeaux: oklch(25.8% 0.092 26.042); -} - -@font-face { - font-family: '7Segment'; - /* Relative so Vite resolves and fingerprints it; an absolute /fonts path - 404s against the dev server, which serves assets itself. */ - src: url('../fonts/7segment.woff') format('woff'); - font-weight: normal; - font-style: normal; -} - -.font-digital { - font-family: '7Segment', monospace; -} - -.glow-red { - box-shadow: 0 0 20px color-mix(in oklab, var(--color-primary) 40%, transparent); - transition: box-shadow 300ms ease; -} - -.glow-red:hover { - box-shadow: 0 0 25px color-mix(in oklab, var(--color-primary) 60%, transparent); -} - -.glow-red:focus, -.glow-red:focus-within { - box-shadow: 0 0 28px color-mix(in oklab, var(--color-primary) 70%, transparent); -} - -.glow-red-text { - text-shadow: - 0 0 12px color-mix(in oklab, var(--color-primary) 70%, transparent), - 0 0 30px color-mix(in oklab, var(--color-primary) 40%, transparent); -} - -/* Bordeaux itself is too dark to bloom against black, so the halo is emitted in - primary red at low alpha — dim element, brighter glow, as CRT phosphor behaves. */ -.glow-bordeaux { - box-shadow: 0 0 14px color-mix(in oklab, var(--color-primary) 35%, transparent); - transition: box-shadow 300ms ease; -} - -.glow-bordeaux:hover { - box-shadow: 0 0 18px color-mix(in oklab, var(--color-primary) 50%, transparent); -} - -.glow-bordeaux:focus, -.glow-bordeaux:focus-within { - box-shadow: 0 0 26px color-mix(in oklab, var(--color-primary) 65%, transparent); -} - -/* Same bloom for a 1-2px rule, where a spread-based shadow has no box to hug. */ -.glow-bordeaux-line { - box-shadow: - 0 0 6px color-mix(in oklab, var(--color-primary) 45%, transparent), - 0 0 14px color-mix(in oklab, var(--color-primary) 25%, transparent); -} - -.scrollbar-red { - scrollbar-width: thin; - scrollbar-color: var(--color-bordeaux) transparent; -} - -.scrollbar-red::-webkit-scrollbar { - width: 10px; -} - -.scrollbar-red::-webkit-scrollbar-track { - background: transparent; -} - -.scrollbar-red::-webkit-scrollbar-thumb { - background: var(--color-bordeaux); - border: 2px solid #000; -} - -.scrollbar-red::-webkit-scrollbar-thumb:hover { - background: var(--color-red-900); -} - @theme { --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; diff --git a/resources/fonts/7segment.woff b/resources/fonts/7segment.woff deleted file mode 100644 index 09ab3150d27946e0bf9697bc3badd40827c7d5ae..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1952 zcmZuydpy+J7T>>z5sgQV@_ytsp2rB24vFD73fCiwaLpLQkjEH@4NT@uD#aY>$le0pPlOM<^~V| zo3sGPOGd?NN&o+v_fgAz0ARP_8X4l4OdmSVh@-OsKz{%LA;NJU=pI>Oq;PcsAk0G@ zRS7T?;1bD>ii2n1kn2ex>X-mr zk|9n4-murN$afeW@F%0mj?BmoRNh zOUjw|b1NI)q-YTys;LrEgIh#PO=k|ZYousOt;)%a?Mu{ZjuXg^B~6H0{P%JyR;v9r z{DOZu*wwtT@^!#r%^MH9{OoN36Zh!f^ntdu=FY(=x`j|fPhP2TIJrRI)g3-iIFg_FTpTsb(06_LX4TrG+ z=Pig?M51_cpChd*(mW!M{(;fMWYdjlJyNyF=N(jZ`kLEOd7S=F#eKenf>9lD!rXY^-%(MpBFE};<5fT7j3QN)-#Flj>O_@V1xeX%E# z$t1ESUj_reIS`s)K47MRGVBpR*v<|LP{7-kQo#;5Cj;qih5!t%%R=@imssruw!j0> z0T)~bWuO+k0R3PVY$9^VUc?S@Lug1UQh<~pb;vX16*7-(p}SBWl#IHffoLq6juxP$ zXdT*)4xsZGz~nJK>;QHI3&divbSxJu!|r2^*b7XAO<~J8jw|5mxEW5topDe6IL^XZ zlHBJPBM}cdUN8^I91Aqt?Hdt+5E;_`9V|>S7AR7jYAVS& zllL)I;BEyX1OU|Rsr@%|rEYaebBVp)B3>1r8$Tn1e`23soU(N=7C0x*R3g{@ZoDom`+FhQUz$Dhz30k))$AnoG=4_&l8M0ddGVHta&OSt=C8u8Jxe>~ z!Jo~`;_82KqHYNqoN`PngEekZb#5M9rTltnYWZ+~W3Cc^R!-Tgsx2a*rj_Pm7?3$; zo4SAVBB|f=*6WH{JVV~;U__JSx^_TcdeszX#-sIUQ$fYN#X&-OmTH*Tgpi}19drLC z#dYo7fPO;7>9y7tt?{{G*1r^whc_AM^o~Rw4(Q#o*&G}hRi3ok^1StADMdrK)bCnH zk$zym{OS88+>d>4W}KG`9gPlO7$Vy8;~fM39q*@^U90M zC|6FBzt2{AnR7Zme$j|zTV9>PHU8rnw^F08!E`L~je1FQCz#ER)HCmYPg$#%-F&mteKqBy!A96(o19>B%ivYtgL@s; zv!^Ny+ZW{a#LVAo<907`ItAK)q@8^m!p(2fVybVzQl|mA?fbCZiPvD&>x)NffH`=K zeK|C-)6t>^F|Pq;HOLm(%Ay99%pKuOQj=PpQoCH76|tUfmY#KD@4|-h#p0t^kMio* zZjFh3ys`cRi%*w3Pgz;2Z(;d1tkoNzaw;YSqwzidNsHf(Hk4i;^c$fl?9Y80H15Tt pUeq6{?^!qzt(GUdw;OsRx#N+vH8JV#yci)!5#VE&W{(TOe*s8D?%MzW