Skip to content

Commit 244c531

Browse files
endigo9740endigo9740
authored
Feat/add conic radial gradients (#2694)
1 parent 17d1440 commit 244c531

File tree

8 files changed

+108
-5
lines changed

8 files changed

+108
-5
lines changed

‎.changeset/six-tables-warn.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@skeletonlabs/skeleton": minor
3+
---
4+
5+
Feature: Added radial and conic gradient support

‎packages/skeleton/src/plugin/core.ts

+7-5
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ import utilColorPairings from './utilities/color-pairings.js';
1010
import utilTypography from './utilities/typography.js';
1111
import utilPresets from './utilities/presets.js';
1212
// Extends
13+
import extendAnimations from './extends/animations.js';
14+
import extendBackgrounds from './extends/backgrounds.js';
15+
import extendBorders from './extends/borders.js';
1316
import extendColors from './extends/colors.js';
1417
import extendSpacing from './extends/spacing.js';
15-
import extendBorders from './extends/borders.js';
16-
import extendAnimAndKeyframes from './extends/animations.js';
1718

1819
export const coreUtilities = {
1920
...utilColorPairings(),
@@ -24,10 +25,11 @@ export const coreUtilities = {
2425
export const coreConfig = {
2526
theme: {
2627
extend: {
27-
...extendColors(),
28-
...extendSpacing(),
28+
...extendAnimations(),
29+
...extendBackgrounds(),
2930
...extendBorders(),
30-
...extendAnimAndKeyframes()
31+
...extendColors(),
32+
...extendSpacing()
3133
}
3234
}
3335
};

‎packages/skeleton/src/plugin/extends/backgrounds.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Skeleton Backgrounds
2+
// https://tailwindcss.com/docs/background-image
3+
4+
export const extendSpacing = () => {
5+
return {
6+
backgroundImage: {
7+
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
8+
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
9+
}
10+
} satisfies Record<string, Record<string, string>>;
11+
};
12+
13+
export default extendSpacing;

‎sites/next.skeleton.dev/src/content/docs/tailwind/gradients.mdx

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
layout: '@layouts/LayoutDoc.astro'
3+
title: Gradients
4+
description: Extends Tailwind Gradients to support both radial and conic variations.
5+
srcCore: '/plugin/extends/gradients.css'
6+
showDocsUrl: true
7+
---
8+
9+
export const components = componentSet;
10+
11+
import Example from '@examples/tailwind/gradients/Example.astro';
12+
import ExampleRaw from '@examples/tailwind/gradients/Example.astro?raw';
13+
import ExampleConic from '@examples/tailwind/gradients/ExampleConic.astro';
14+
import ExampleConicRaw from '@examples/tailwind/gradients/ExampleConic.astro?raw';
15+
import ExampleSpinner from '@examples/tailwind/gradients/ExampleSpinner.astro';
16+
import ExampleSpinnerRaw from '@examples/tailwind/gradients/ExampleSpinner.astro?raw';
17+
import ExampleText from '@examples/tailwind/gradients/ExampleText.astro';
18+
import ExampleTextRaw from '@examples/tailwind/gradients/ExampleText.astro?raw';
19+
20+
## Radial
21+
22+
<Preview client:load>
23+
<Fragment slot="preview">
24+
<Example />
25+
</Fragment>
26+
<Fragment slot="code">
27+
<Code code={ExampleRaw} lang="astro" />
28+
</Fragment>
29+
</Preview>
30+
31+
## Conic
32+
33+
<Preview client:load>
34+
<Fragment slot="preview">
35+
<ExampleConic />
36+
</Fragment>
37+
<Fragment slot="code">
38+
<Code code={ExampleConicRaw} lang="astro" />
39+
</Fragment>
40+
</Preview>
41+
42+
## Spinner
43+
44+
<Preview client:load>
45+
<Fragment slot="preview">
46+
<ExampleSpinner />
47+
</Fragment>
48+
<Fragment slot="code">
49+
<Code code={ExampleSpinnerRaw} lang="astro" />
50+
</Fragment>
51+
</Preview>
52+
53+
## Text
54+
55+
<Preview client:load>
56+
<Fragment slot="preview">
57+
<ExampleText />
58+
</Fragment>
59+
<Fragment slot="code">
60+
<Code code={ExampleTextRaw} lang="astro" />
61+
</Fragment>
62+
</Preview>
63+
64+
## Supported Utilities
65+
66+
Both radial and conic variations support Tailwind's linear gradient options, including [Color Stops](https://tailwindcss.com/docs/gradient-color-stops) and [Stop Positions](https://tailwindcss.com/blog/tailwindcss-v3-3#fine-tune-gradient-color-stop-positions).
67+
68+
## NextJS Users
69+
70+
Feel free to remove `gradient-radial` and `gradient-conic` from your local Tailwind config, these are redudant with Skeleton.

‎sites/next.skeleton.dev/src/examples/tailwind/gradients/Example.astro

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<figure
2+
class="size-48 aspect-square rounded-full bg-gradient-radial from-tertiary-500 via-secondary-500 to-primary-500"
3+
>
4+
</figure>

‎sites/next.skeleton.dev/src/examples/tailwind/gradients/ExampleConic.astro

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<figure class="size-48 aspect-square rounded-full bg-gradient-conic from-success-500 via-warning-500 to-error-500">
2+
</figure>

‎sites/next.skeleton.dev/src/examples/tailwind/gradients/ExampleSpinner.astro

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<figure class="size-10 aspect-square rounded-full bg-gradient-conic from-transparent to-primary-500 animate-spin">
2+
</figure>

‎sites/next.skeleton.dev/src/examples/tailwind/gradients/ExampleText.astro

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<h1 class="type-scale-9 uppercase font-bold">
2+
<span class="bg-gradient-radial from-tertiary-500 to-primary-500 bg-clip-text text-transparent box-decoration-clone">
3+
Skeleton
4+
</span>
5+
</h1>

0 commit comments

Comments
 (0)