Skip to content

Commit c3dfff4

Browse files
onmaxonmax
committed
fix: update color variables and gradients in CSS
1 parent 2e1675c commit c3dfff4

File tree

21 files changed

+157
-75
lines changed

21 files changed

+157
-75
lines changed

‎docs/.vitepress/theme/components/ColorPalette.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const colors = ['Neutral', 'Blue', 'Green', 'Red', 'Orange', 'Gold', 'Purple']
88
const variants = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1100]
99
1010
function getBg(color: string) {
11-
return { backgroundColor: `var(--nq-${color.toLowerCase()})` }
11+
return { backgroundColor: `var(--colors-${color.toLowerCase()})` }
1212
}
1313
1414
const activeColor = ref<string>()

‎docs/.vitepress/theme/components/GradientPalette.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ function setActiveGradient(gradient: string, variant: 'default' | 'darkened' | '
1414
const cssVar = computed(() => {
1515
const variant = activeGradient.value?.variant
1616
if (variant === 'hoverable') {
17-
return `background-image: var(--nq-${activeGradient.value?.color.toLowerCase()}-gradient)`
17+
return `background-image: var(--colors-${activeGradient.value?.color.toLowerCase()}-gradient)`
1818
}
19-
return `background-image: var(--nq-${activeGradient.value?.color.toLowerCase()}-gradient${variant === 'darkened' ? '-darkened' : ''})`
19+
return `background-image: var(--colors-${activeGradient.value?.color.toLowerCase()}-gradient${variant === 'darkened' ? '-darkened' : ''})`
2020
})
2121
2222
const tailwind = computed(() => {

‎docs/.vitepress/theme/components/IconSet.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -119,14 +119,14 @@ function selectColor(c: Color) {
119119

120120
<template>
121121
<DefineGrid v-slot="{ icons: iconsVariant, variant, classes }">
122-
<span block f-mt-xl f-text-2xs text="$c" nq-label op="90 dark:70" :style="`--c: var(--nq-${activeColor}-1100)`">
122+
<span block f-mt-xl f-text-2xs text="$c" nq-label op="90 dark:70" :style="`--c: var(--colors-${activeColor}-1100)`">
123123
{{ variant }}
124124
</span>
125125

126126
<ul pl-0 flex flex-wrap select-none text-2xl ml--8 f-mt-xs>
127127
<li v-for="icon in iconsVariant" :key="icon" flex>
128128
<button
129-
w-max bg-transparent op="70 dark:60 hocus:100" transition-opacity :style="`--c: var(--nq-${activeColor})`"
129+
w-max bg-transparent op="70 dark:60 hocus:100" transition-opacity :style="`--c: var(--colors-${activeColor})`"
130130
@click="() => selectedIcon = icon"
131131
>
132132
<Icon :icon text="$c" :class="[classes, { 'w-auto !h-24': icon.includes('horizontal') }]" />
@@ -158,7 +158,7 @@ function selectColor(c: Color) {
158158
v-for="c in colors" :key="c" shrink-0 size-21 rounded-full outline="~ 1 neutral/20"
159159
:data-active="activeColor === c ? '' : undefined"
160160
:class="{ 'op-30 hocus:op-80': c !== activeColor || (isLogo && !isMono) }" transition-colors
161-
:style="`background-color: var(--nq-${c});`" @click="selectColor(c)"
161+
:style="`background-color: var(--colors-${c});`" @click="selectColor(c)"
162162
/>
163163

164164
<button v-if="isLogo" stack bg="neutral-500 data-active:neutral" text-neutral-0 size-21 transition-opacity aspect-square rounded-full :data-state="!isMono ? 'active' : ''" @click="rotateLogoIcon">
@@ -169,11 +169,11 @@ function selectColor(c: Color) {
169169
<template v-else>
170170
<header
171171
flex="~ md:col gap-16 items-start"
172-
:style="`--c: var(--nq-${activeColor});--c2: var(--nq-${activeColor}-400);`"
172+
:style="`--c: var(--colors-${activeColor});--c2: var(--colors-${activeColor}-400);`"
173173
>
174174
<div
175175
stack f-p-md rounded-16 outline="~ 3 offset--3 $c2"
176-
:style="`background-color: color-mix(in oklch, var(--nq-${activeColor}) 4%, transparent)`" :class="{
176+
:style="`background-color: color-mix(in oklch, var(--colors-${activeColor}) 4%, transparent)`" :class="{
177177
'w-auto children:h-64 children:w-full': selectedIcon.includes('horizontal'),
178178
'w-max children:size-64 size-124': !selectedIcon.includes('horizontal'),
179179
'!bg-neutral-0 dark:!bg-neutral outline-neutral-100': isLogo && !isMono && !isWhite,
@@ -188,7 +188,7 @@ function selectColor(c: Color) {
188188
v-for="c in colors" :key="c" shrink-0 size-21 rounded-full outline="~ 1 neutral/20"
189189
:data-active="activeColor === c ? '' : undefined"
190190
:class="{ 'op-30 hocus:op-80': c !== activeColor || (isLogo && !isMono) }" transition-colors
191-
:style="`background-color: var(--nq-${c});`" @click="selectColor(c)"
191+
:style="`background-color: var(--colors-${c});`" @click="selectColor(c)"
192192
/>
193193

194194
<button v-if="isLogo" stack bg="neutral-500 data-active:neutral" text-neutral-0 size-21 transition-opacity aspect-square rounded-full :data-state="!isMono ? 'active' : ''" @click="rotateLogoIcon">

‎docs/uno.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ export default defineConfig<PresetWind3Theme>({
113113
'bg-gradient-red',
114114
'bg-gradient-red-darkened',
115115
'bg-gradient-red-hoverable',
116+
116117
'bg-gradient-orange',
117118
'bg-gradient-orange-darkened',
118119
'bg-gradient-orange-hoverable',

‎package.json‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,6 @@
4141
"vite": "catalog:build",
4242
"vitest": "catalog:test"
4343
},
44-
"pnpm": {
45-
"patchedDependencies": {
46-
"@nolebase/vitepress-plugin-git-changelog": "patches/@nolebase__vitepress-plugin-git-changelog.patch"
47-
}
48-
},
4944
"simple-git-hooks": {
5045
"pre-commit": "pnpm lint-staged"
5146
},

‎packages/nimiq-css/scripts/build-css.ts‎

Lines changed: 81 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@ function toKebabCase(str: string): string {
66
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
77
}
88

9+
interface GradientColorSource {
10+
from: [string, string]
11+
to: [string, string]
12+
darkened?: {
13+
from: [string, string]
14+
to: [string, string]
15+
}
16+
}
17+
918
interface GradientColor {
1019
from: string
1120
to: string
@@ -21,7 +30,43 @@ function extractGradients(colorData: typeof colors) {
2130
for (const colorName in colorData) {
2231
const colorDef = colorData[colorName as keyof typeof colorData]
2332
if (colorDef && typeof colorDef === 'object' && 'gradient' in colorDef) {
24-
gradients[colorName] = colorDef.gradient as GradientColor
33+
const gradientSource = colorDef.gradient as GradientColorSource
34+
35+
// Convert array format to light-dark() format
36+
const from = gradientSource.from[0] === gradientSource.from[1]
37+
? gradientSource.from[0]
38+
: `${gradientSource.from[0]},${gradientSource.from[1]}`
39+
40+
const to = gradientSource.to[0] === gradientSource.to[1]
41+
? gradientSource.to[0]
42+
: `${gradientSource.to[0]},${gradientSource.to[1]}`
43+
44+
gradients[colorName] = {
45+
from,
46+
to,
47+
}
48+
49+
// Handle darkened variants if they exist and are not empty
50+
if (gradientSource.darkened
51+
&& gradientSource.darkened.from
52+
&& gradientSource.darkened.to
53+
&& gradientSource.darkened.from[0]
54+
&& gradientSource.darkened.from[1]
55+
&& gradientSource.darkened.to[0]
56+
&& gradientSource.darkened.to[1]) {
57+
const darkenedFrom = gradientSource.darkened.from[0] === gradientSource.darkened.from[1]
58+
? gradientSource.darkened.from[0]
59+
: `${gradientSource.darkened.from[0]},${gradientSource.darkened.from[1]}`
60+
61+
const darkenedTo = gradientSource.darkened.to[0] === gradientSource.darkened.to[1]
62+
? gradientSource.darkened.to[0]
63+
: `${gradientSource.darkened.to[0]},${gradientSource.darkened.to[1]}`
64+
65+
gradients[colorName].darkened = {
66+
from: darkenedFrom,
67+
to: darkenedTo,
68+
}
69+
}
2570
}
2671
}
2772

@@ -36,15 +81,39 @@ function generateCssVariables(colorData: typeof colors, gradients: Record<string
3681
const colorDef = colorData[colorName as keyof typeof colorData]
3782
const kebabColorName = toKebabCase(colorName)
3883

39-
if (colorDef && typeof colorDef === 'object') {
84+
if (Array.isArray(colorDef)) {
85+
// Handle top-level array colors (like white, darkblue, darkerblue)
86+
const [lightValue, darkValue] = colorDef
87+
if (lightValue === darkValue) {
88+
// If both values are the same, create a single variable
89+
cssString += ` --colors-${kebabColorName}: ${lightValue};\n`
90+
}
91+
else {
92+
// If values are different, create separate variables for light and dark
93+
cssString += ` --colors-${kebabColorName}: light-dark(${lightValue}, ${darkValue});\n`
94+
}
95+
}
96+
else if (colorDef && typeof colorDef === 'object') {
4097
for (const shade in colorDef) {
4198
if (shade === 'gradient')
4299
continue // Skip gradient property for now
43100

44101
const shadeValue = colorDef[shade as keyof typeof colorDef]
45-
if (shadeValue && typeof shadeValue === 'string') {
102+
if (Array.isArray(shadeValue)) {
103+
const [lightValue, darkValue] = shadeValue
104+
const varName = `${kebabColorName}${shade === 'DEFAULT' ? '' : `-${shade}`}`
105+
if (lightValue === darkValue) {
106+
// If both values are the same, create a single variable
107+
cssString += ` --colors-${varName}: ${lightValue};\n`
108+
}
109+
else {
110+
// If values are different, use light-dark() function
111+
cssString += ` --colors-${varName}: light-dark(${lightValue}, ${darkValue});\n`
112+
}
113+
}
114+
else if (shadeValue && typeof shadeValue === 'string') {
46115
const varName = `${kebabColorName}${shade === 'DEFAULT' ? '' : `-${shade}`}`
47-
cssString += ` --nq-${varName}: ${shadeValue};\n`
116+
cssString += ` --colors-${varName}: ${shadeValue};\n`
48117
}
49118
}
50119
}
@@ -56,17 +125,17 @@ function generateCssVariables(colorData: typeof colors, gradients: Record<string
56125
const kebabGradientName = toKebabCase(gradientName)
57126

58127
// Generate -from and -to variables (they already contain light-dark() functions)
59-
cssString += ` --nq-${kebabGradientName}-gradient-from: ${gradientDef.from};\n`
60-
cssString += ` --nq-${kebabGradientName}-gradient-to: ${gradientDef.to};\n`
128+
cssString += ` --colors-${kebabGradientName}-gradient-from: ${gradientDef.from};\n`
129+
cssString += ` --colors-${kebabGradientName}-gradient-to: ${gradientDef.to};\n`
61130

62131
// Generate the gradient variable
63-
cssString += ` --nq-${kebabGradientName}-gradient: radial-gradient(var(--nq-${kebabGradientName}-gradient-from), var(--nq-${kebabGradientName}-gradient-to));\n`
132+
cssString += ` --colors-${kebabGradientName}-gradient: radial-gradient(at 100% 100%, var(--colors-${kebabGradientName}-gradient-from), var(--colors-${kebabGradientName}-gradient-to));\n`
64133

65-
// Generate darkened variants if they exist
66-
if (gradientDef.darkened) {
67-
cssString += ` --nq-${kebabGradientName}-gradient-darkened-from: ${gradientDef.darkened.from};\n`
68-
cssString += ` --nq-${kebabGradientName}-gradient-darkened-to: ${gradientDef.darkened.to};\n`
69-
cssString += ` --nq-${kebabGradientName}-gradient-darkened: radial-gradient(var(--nq-${kebabGradientName}-gradient-darkened-from), var(--nq-${kebabGradientName}-gradient-darkened-to));\n`
134+
// Generate darkened variants if they exist and are not empty
135+
if (gradientDef.darkened && gradientDef.darkened.from && gradientDef.darkened.to) {
136+
cssString += ` --colors-${kebabGradientName}-gradient-darkened-from: ${gradientDef.darkened.from};\n`
137+
cssString += ` --colors-${kebabGradientName}-gradient-darkened-to: ${gradientDef.darkened.to};\n`
138+
cssString += ` --colors-${kebabGradientName}-gradient-darkened: radial-gradient(at 100% 100%, var(--colors-${kebabGradientName}-gradient-darkened-from), var(--colors-${kebabGradientName}-gradient-darkened-to));\n`
70139
}
71140
}
72141

‎packages/nimiq-css/src/css/atomic.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ This file contains atomic CSS classes for styling elements. These classes are ve
6868

6969
.bg-neutral-gradient {
7070
background: var(--colors-neutral);
71-
background-image: var(--nq-gradient-neutral);
71+
background-image: var(--colors-gradient-neutral);
7272
}
7373

7474
.bg-neutral-50 {
@@ -140,9 +140,9 @@ This file contains atomic CSS classes for styling elements. These classes are ve
140140
}
141141

142142
.nq-shadow {
143-
box-shadow: var(--nq-shadow);
143+
box-shadow: var(--colors-shadow);
144144
}
145145

146146
.nq-shadow-lg {
147-
box-shadow: var(--nq-shadow-lg);
147+
box-shadow: var(--colors-shadow-lg);
148148
}

‎packages/nimiq-css/src/css/colors.css‎

Lines changed: 52 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -44,57 +44,76 @@
4444
--colors-purple-600: light-dark(oklch(0.8725 0.0224 300.16), oklch(0.3037 0.0894 298.08));
4545
--colors-purple-1100: light-dark(oklch(0.3841 0.0825 296.42), oklch(0.5483 0.2189 304.41));
4646
--colors-purple: light-dark(oklch(0.4629 0.1027 296.59), oklch(0.5483 0.2189 304.41));
47-
--colors-neutral-gradient-from: light-dark(oklch(0.2737 0.068 276.29), oklch(0.1553 0.075 316.25));
48-
--colors-neutral-gradient-to: light-dark(oklch(0.2018 0.0962 315.41), oklch(0.2221 0.0524 276.47));
49-
--colors-neutral-gradient: radial-gradient(var(--colors-neutral-gradient-from), var(--colors-neutral-gradient-to));
50-
--colors-neutral-gradient-darkened-from: ;
51-
--colors-neutral-gradient-darkened-to: ;
52-
--colors-neutral-gradient-darkened: radial-gradient(
53-
var(--colors-neutral-gradient-darkened-from),
54-
var(--colors-neutral-gradient-darkened-to)
47+
--colors-neutral-gradient-from: oklch(0.2737 0.068 276.29), oklch(0.1553 0.075 316.25);
48+
--colors-neutral-gradient-to: oklch(0.2018 0.0962 315.41), oklch(0.2221 0.0524 276.47);
49+
--colors-neutral-gradient: radial-gradient(
50+
at 100% 100%,
51+
var(--colors-neutral-gradient-from),
52+
var(--colors-neutral-gradient-to)
5553
);
56-
--colors-blue-gradient-from: light-dark(oklch(0.5849 0.1438 244.29), oklch(0.6982 0.1694 243.83));
57-
--colors-blue-gradient-to: light-dark(oklch(0.5849 0.1438 244.29), oklch(0.6982 0.1694 243.83));
58-
--colors-blue-gradient: radial-gradient(var(--colors-blue-gradient-from), var(--colors-blue-gradient-to));
59-
--colors-blue-gradient-darkened-from: light-dark(oklch(0.4857 0.182 263.07), oklch(0.5755 0.1828 254.79));
60-
--colors-blue-gradient-darkened-to: light-dark(oklch(0.5404 0.153 250.02), oklch(0.6546 0.1583 243.94));
54+
--colors-blue-gradient-from: oklch(0.5849 0.1438 244.29), oklch(0.6982 0.1694 243.83);
55+
--colors-blue-gradient-to: oklch(0.5849 0.1438 244.29), oklch(0.6982 0.1694 243.83);
56+
--colors-blue-gradient: radial-gradient(
57+
at 100% 100%,
58+
var(--colors-blue-gradient-from),
59+
var(--colors-blue-gradient-to)
60+
);
61+
--colors-blue-gradient-darkened-from: oklch(0.4857 0.182 263.07), oklch(0.5755 0.1828 254.79);
62+
--colors-blue-gradient-darkened-to: oklch(0.5404 0.153 250.02), oklch(0.6546 0.1583 243.94);
6163
--colors-blue-gradient-darkened: radial-gradient(
64+
at 100% 100%,
6265
var(--colors-blue-gradient-darkened-from),
6366
var(--colors-blue-gradient-darkened-to)
6467
);
65-
--colors-green-gradient-from: light-dark(oklch(0.6932 0.1245 178.48), oklch(0.755 0.1426 170.23));
66-
--colors-green-gradient-to: light-dark(oklch(0.6 0.12 176.55), oklch(0.65 0.17 167.35));
67-
--colors-green-gradient: radial-gradient(var(--colors-green-gradient-from), var(--colors-green-gradient-to));
68-
--colors-green-gradient-darkened-from: light-dark(oklch(0.6231 0.0909 178.94), oklch(0.7142 0.1457 167.35));
69-
--colors-green-gradient-darkened-to: light-dark(oklch(0.6873 0.1184 180.55), oklch(0.6971 0.1299 170.59));
68+
--colors-green-gradient-from: oklch(0.6932 0.1245 178.48), oklch(0.755 0.1426 170.23);
69+
--colors-green-gradient-to: oklch(0.6 0.12 176.55), oklch(0.65 0.17 167.35);
70+
--colors-green-gradient: radial-gradient(
71+
at 100% 100%,
72+
var(--colors-green-gradient-from),
73+
var(--colors-green-gradient-to)
74+
);
75+
--colors-green-gradient-darkened-from: oklch(0.6231 0.0909 178.94), oklch(0.7142 0.1457 167.35);
76+
--colors-green-gradient-darkened-to: oklch(0.6873 0.1184 180.55), oklch(0.6971 0.1299 170.59);
7077
--colors-green-gradient-darkened: radial-gradient(
78+
at 100% 100%,
7179
var(--colors-green-gradient-darkened-from),
7280
var(--colors-green-gradient-darkened-to)
7381
);
74-
--colors-orange-gradient-from: light-dark(oklch(0.7387 0.179 56.67), oklch(0.772 0.1738 64.55));
75-
--colors-orange-gradient-to: light-dark(oklch(0.65 0.22 41.13), oklch(0.7 0.2 56.46));
76-
--colors-orange-gradient: radial-gradient(var(--colors-orange-gradient-from), var(--colors-orange-gradient-to));
77-
--colors-orange-gradient-darkened-from: light-dark(oklch(0.6387 0.2 40.09), oklch(0.7442 0.1811 56.46));
78-
--colors-orange-gradient-darkened-to: light-dark(oklch(0.7115 0.1903 49.18), oklch(0.7438 0.1665 65.03));
82+
--colors-orange-gradient-from: oklch(0.7387 0.179 56.67), oklch(0.772 0.1738 64.55);
83+
--colors-orange-gradient-to: oklch(0.65 0.22 41.13), oklch(0.7 0.2 56.46);
84+
--colors-orange-gradient: radial-gradient(
85+
at 100% 100%,
86+
var(--colors-orange-gradient-from),
87+
var(--colors-orange-gradient-to)
88+
);
89+
--colors-orange-gradient-darkened-from: oklch(0.6387 0.2 40.09), oklch(0.7442 0.1811 56.46);
90+
--colors-orange-gradient-darkened-to: oklch(0.7115 0.1903 49.18), oklch(0.7438 0.1665 65.03);
7991
--colors-orange-gradient-darkened: radial-gradient(
92+
at 100% 100%,
8093
var(--colors-orange-gradient-darkened-from),
8194
var(--colors-orange-gradient-darkened-to)
8295
);
83-
--colors-red-gradient-from: light-dark(oklch(0.598 0.1886 30.3), oklch(0.6881 0.2018 30.03));
84-
--colors-red-gradient-to: light-dark(oklch(0.5 0.22 18.32), oklch(0.6 0.25 31.02));
85-
--colors-red-gradient: radial-gradient(var(--colors-red-gradient-from), var(--colors-red-gradient-to));
86-
--colors-red-gradient-darkened-from: light-dark(oklch(0.5344 0.1811 16.77), oklch(0.6515 0.2353 31.02));
87-
--colors-red-gradient-darkened-to: light-dark(oklch(0.5653 0.1974 26.27), oklch(0.6633 0.1852 30.4));
96+
--colors-red-gradient-from: oklch(0.598 0.1886 30.3), oklch(0.6881 0.2018 30.03);
97+
--colors-red-gradient-to: oklch(0.5 0.22 18.32), oklch(0.6 0.25 31.02);
98+
--colors-red-gradient: radial-gradient(at 100% 100%, var(--colors-red-gradient-from), var(--colors-red-gradient-to));
99+
--colors-red-gradient-darkened-from: oklch(0.5344 0.1811 16.77), oklch(0.6515 0.2353 31.02);
100+
--colors-red-gradient-darkened-to: oklch(0.5653 0.1974 26.27), oklch(0.6633 0.1852 30.4);
88101
--colors-red-gradient-darkened: radial-gradient(
102+
at 100% 100%,
89103
var(--colors-red-gradient-darkened-from),
90104
var(--colors-red-gradient-darkened-to)
91105
);
92-
--colors-gold-gradient-from: light-dark(oklch(0.7924 0.1593 85.61), oklch(0.8517 0.1579 83.77));
93-
--colors-gold-gradient-to: light-dark(oklch(0.7 0.17 69.51), oklch(0.78 0.17 72.79));
94-
--colors-gold-gradient: radial-gradient(var(--colors-gold-gradient-from), var(--colors-gold-gradient-to));
95-
--colors-gold-gradient-darkened-from: light-dark(oklch(0.7143 0.1554 63.42), oklch(0.8163 0.1548 72.79));
96-
--colors-gold-gradient-darkened-to: light-dark(oklch(0.7575 0.1547 78.24), oklch(0.8221 0.1507 83.64));
106+
--colors-gold-gradient-from: oklch(0.7924 0.1593 85.61), oklch(0.8517 0.1579 83.77);
107+
--colors-gold-gradient-to: oklch(0.7 0.17 69.51), oklch(0.78 0.17 72.79);
108+
--colors-gold-gradient: radial-gradient(
109+
at 100% 100%,
110+
var(--colors-gold-gradient-from),
111+
var(--colors-gold-gradient-to)
112+
);
113+
--colors-gold-gradient-darkened-from: oklch(0.7143 0.1554 63.42), oklch(0.8163 0.1548 72.79);
114+
--colors-gold-gradient-darkened-to: oklch(0.7575 0.1547 78.24), oklch(0.8221 0.1507 83.64);
97115
--colors-gold-gradient-darkened: radial-gradient(
116+
at 100% 100%,
98117
var(--colors-gold-gradient-darkened-from),
99118
var(--colors-gold-gradient-darkened-to)
100119
);

‎packages/nimiq-css/src/unocss/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ export const presetNimiq = definePreset((options: NimiqPresetOptions = {}) => {
258258

259259
[
260260
new RegExp(`^bg-gradient-(${colorsWithGradientsRe})-hoverable`),
261-
([, c]) => `bg-radial-[at_100%_100%] from-${c}-gradient-from to-${c}-gradient-to hover:from-${c}-darkened-from hover hover:to-${c}-gradient-darkened-to focus-visible:from-${c}-darkened-from focus-visible:to-${c}-gradient-darkened-to ease-out transition-colors duration-300`,
261+
([, c]) => `bg-radial-[at_100%_100%] from-${c}-gradient-from to-${c}-gradient-to hover:from-${c}-darkened-from hover hover:to-${c}-gradient-darkened-to focus-visible:from-${c}-gradient-darkened-from focus-visible:to-${c}-gradient-darkened-to ease-out transition-colors duration-300`,
262262
{ layer: `${prefix}colors`, autocomplete: [`bg-gradient-(${colorsWithGradientsRe})-hoverable`] },
263263
],
264264
)

0 commit comments

Comments
 (0)