SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: ♻️ modularize button gradients

Browse source 
This allows for more flexibility when recoloring buttons
This commit is contained in:
Sebin Nyshkim 2025-06-20 21:30:26 +02:00
parent 5a3b2ac3d4
commit 05bae8229f
5 changed files with 69 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/ref-button.webc
View file

@ -3,15 +3,19 @@
<style webc:scoped="button">
:host {
--gradient-dir: to bottom right;
--gradient-base: var(--clr-box-background);
--gradient-start: oklch(from var(--gradient-base) calc(l + 0.2) c h);
--gradient-end: oklch(from var(--gradient-base) l c h);
position: relative;
background: linear-gradient(
var(--gradient-dir),
var(--clr-box-gradient-start) 0%,
var(--clr-box-gradient-end) 50%
var(--gradient-start) 0%,
var(--gradient-end) 50%
);
color: white;
color: var(--clr-text);
font-size: 1em;
font-weight: bold;
@ -26,10 +30,16 @@
}
:host::before {
--gradient-start: oklch(from var(--gradient-base) calc(l + 0.1) c h);
content: '';
position: absolute;
inset: var(--border-thin);
background-color: var(--clr-box-background);
background: linear-gradient(
var(--gradient-dir),
var(--gradient-start) 0%,
var(--gradient-end) 50%
);
border-radius: inherit;
z-index: -1;
}