kaizen-lib 0.2.3 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/ui/ReactionButton.tsx +11 -6
package/package.json
CHANGED
|
@@ -55,11 +55,11 @@ const Raiz = styled.button<{ $size: IconButtonSize; $tone: ReactionTone; $active
|
|
|
55
55
|
padding: 0 8px;
|
|
56
56
|
background: transparent;
|
|
57
57
|
--kz-icon-on: ${({ $tone }) => TONO_ENCENDIDO[$tone]};
|
|
58
|
+
--kz-icon-glow: ${({ $glow }) => ($glow ? '0 0 8px color-mix(in srgb, currentColor 65%, transparent)' : 'none')};
|
|
58
59
|
color: ${({ $active }) => ($active ? 'var(--kz-icon-on)' : fg.muted)};
|
|
59
60
|
|
|
60
61
|
svg {
|
|
61
|
-
filter: ${({ $active
|
|
62
|
-
$active && $glow ? 'drop-shadow(0 0 8px color-mix(in srgb, currentColor 65%, transparent))' : 'none'};
|
|
62
|
+
filter: ${({ $active }) => ($active ? 'drop-shadow(var(--kz-icon-glow))' : 'none')};
|
|
63
63
|
transition: filter ${motion.fast} ${motion.ease};
|
|
64
64
|
}
|
|
65
65
|
|
|
@@ -94,14 +94,19 @@ const Cuenta = styled.span`
|
|
|
94
94
|
* ```
|
|
95
95
|
*
|
|
96
96
|
* Un color que los seis tonos no cubren (la marca de un producto, no una
|
|
97
|
-
* categoría semántica)
|
|
98
|
-
*
|
|
97
|
+
* categoría semántica), o una intensidad de resplandor propia y no la
|
|
98
|
+
* genérica de `glow`, se pisan con `style`: `--kz-icon-on` y `--kz-icon-glow`
|
|
99
|
+
* son variables CSS comunes, y un estilo en línea le gana a la de acá por
|
|
100
|
+
* origen, no por especificidad — no hace falta tocar la librería por un
|
|
101
|
+
* color o un resplandor que ningún otro consumidor va a repetir.
|
|
99
102
|
*
|
|
100
103
|
* ```tsx
|
|
101
104
|
* <ReactionButton
|
|
102
105
|
* active={guardado}
|
|
103
|
-
*
|
|
104
|
-
*
|
|
106
|
+
* style={{
|
|
107
|
+
* '--kz-icon-on': 'var(--mi-color-de-marca)',
|
|
108
|
+
* '--kz-icon-glow': '0 0 8px rgba(255, 77, 109, 0.75)',
|
|
109
|
+
* } as React.CSSProperties}
|
|
105
110
|
* label="Guardar"
|
|
106
111
|
* >
|
|
107
112
|
* <IconoMarcador />
|