Skip to content

task: style to tailwind #4162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Hugos68 merged 5 commits into from
Nov 25, 2025
Merged

task: style to tailwind #4162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8b22816
style to tailwind
Hugos68 Nov 24, 2025
b129b6a
simplify progress
Hugos68 Nov 24, 2025
007bf83
update grid
Hugos68 Nov 24, 2025
6b0ff59
fix
Hugos68 Nov 24, 2025
4687ce8
fix examples
Hugos68 Nov 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/perky-brooms-grin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@skeletonlabs/skeleton-common": patch
"@skeletonlabs/skeleton-svelte": patch
"@skeletonlabs/skeleton-react": patch
---

task: Convert CSS variables from `style` expressions to `tailwind` classes

2 changes: 1 addition & 1 deletion packages/skeleton-common/src/classes/menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const classesMenu = defineSkeletonClasses({
positioner: '',
indicator: '',
content: 'card bg-surface-50-950 border border-surface-200-800 p-2 flex flex-col items-stretch gap-2 shadow-lg min-w-48',
arrow: '',
arrow: '[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-50-950)]',
arrowTip: '',
itemGroup: '',
itemGroupLabel: 'text-surface-600-400 text-xs px-2 py-1',
Expand Down
2 changes: 1 addition & 1 deletion packages/skeleton-common/src/classes/progress.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const classesProgress = defineSkeletonClasses({
],

// Circular
circle: '',
circle: '[--size:--spacing(24)] [--thickness:calc(var(--size)/12)]',
circleTrack: 'stroke-surface-200-800',
circleRange: [
'stroke-primary-500 transition-[stroke-dashoffset] ease-in-out',
Expand Down
4 changes: 0 additions & 4 deletions packages/skeleton-react/src/components/progress/anatomy/circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,6 @@ export default function Circle(props: ProgressCircleProps) {
progress.getCircleProps(),
{
className: classesProgress.circle,
style: {
['--size' as string]: '100px',
['--thickness' as string]: '10px',
},
},
rest,
);
Expand Down
1 change: 0 additions & 1 deletion packages/skeleton-svelte/src/components/progress/anatomy/circle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
progress().getCircleProps(),
{
class: classesProgress.circle,
style: '--size: 100px; --thickness: 10px;',
},
rest,
),
Expand Down
7 changes: 1 addition & 6 deletions playgrounds/skeleton-react/src/routes/components/popover/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,7 @@ function Page() {
<Popover.Title>Title</Popover.Title>
<Popover.Description>Description</Popover.Description>
<Popover.CloseTrigger>Close</Popover.CloseTrigger>
<Popover.Arrow
style={{
['--arrow-size' as string]: 'calc(var(--spacing) * 2)',
['--arrow-background' as string]: 'var(--color-surface-100-900)',
}}
>
<Popover.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
Copy link

Copilot AI Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect Tailwind arbitrary CSS variable syntax. The syntax [--arrow-size:--spacing(2)] is invalid. It should be [--arrow-size:calc(var(--spacing)*2)] to match the original calc(var(--spacing) * 2) value, or use a direct pixel/spacing value. The --spacing(2) function-like syntax is not valid CSS.

Suggested change
<Popover.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
<Popover.Arrow className="[--arrow-size:calc(var(--spacing)*2)] [--arrow-background:var(--color-surface-100-900)]">

Copilot uses AI. Check for mistakes.
<Popover.ArrowTip />
</Popover.Arrow>
</Popover.Content>
Expand Down
7 changes: 1 addition & 6 deletions playgrounds/skeleton-react/src/routes/components/tooltip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,7 @@ function Page() {
<Tooltip.Positioner>
<Tooltip.Content>
Content
<Tooltip.Arrow
style={{
['--arrow-size' as string]: 'calc(var(--spacing) * 2)',
['--arrow-background' as string]: 'var(--color-surface-100-900)',
}}
>
<Tooltip.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
Copy link

Copilot AI Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect Tailwind arbitrary CSS variable syntax. The syntax [--arrow-size:--spacing(2)] is invalid. It should be [--arrow-size:calc(var(--spacing)*2)] to match the original calc(var(--spacing) * 2) value, or use a direct pixel/spacing value. The --spacing(2) function-like syntax is not valid CSS.

Suggested change
<Tooltip.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
<Tooltip.Arrow className="[--arrow-size:calc(var(--spacing)*2)] [--arrow-background:var(--color-surface-100-900)]">

Copilot uses AI. Check for mistakes.
<Tooltip.ArrowTip />
</Tooltip.Arrow>
</Tooltip.Content>
Expand Down
2 changes: 1 addition & 1 deletion playgrounds/skeleton-svelte/src/routes/components/popover/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
nesciunt enim.
</Popover.Description>
<Popover.CloseTrigger class="btn preset-tonal">Close</Popover.CloseTrigger>
<Popover.Arrow style="--arrow-size: calc(var(--spacing) * 2); --arrow-background: var(--color-surface-100-900);">
<Popover.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
Copy link

Copilot AI Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect Tailwind arbitrary CSS variable syntax. The syntax [--arrow-size:--spacing(2)] is invalid. It should be [--arrow-size:calc(var(--spacing)*2)] to match the original calc(var(--spacing) * 2) value, or use a direct pixel/spacing value. The --spacing(2) function-like syntax is not valid CSS.

Suggested change
<Popover.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
<Popover.Arrow class="[--arrow-size:calc(var(--spacing)*2)] [--arrow-background:var(--color-surface-100-900)]">

Copilot uses AI. Check for mistakes.
<Popover.ArrowTip />
</Popover.Arrow>
</Popover.Content>
Expand Down
2 changes: 1 addition & 1 deletion playgrounds/skeleton-svelte/src/routes/components/tooltip/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<Tooltip.Positioner>
<Tooltip.Content>
Content
<Tooltip.Arrow style="--arrow-size: calc(var(--spacing) * 2); --arrow-background: var(--color-surface-100-900);">
<Tooltip.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
Copy link

Copilot AI Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect Tailwind arbitrary CSS variable syntax. The syntax [--arrow-size:--spacing(2)] is invalid. It should be [--arrow-size:calc(var(--spacing)*2)] to match the original calc(var(--spacing) * 2) value, or use a direct pixel/spacing value. The --spacing(2) function-like syntax is not valid CSS.

Suggested change
<Tooltip.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
<Tooltip.Arrow class="[--arrow-size:calc(var(--spacing)*2)] [--arrow-background:var(--color-surface-100-900)]">

Copilot uses AI. Check for mistakes.
<Tooltip.ArrowTip />
</Tooltip.Arrow>
</Tooltip.Content>
Expand Down
7 changes: 1 addition & 6 deletions sites/skeleton.dev/src/components/examples/framework-components/popover/react/anchor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,7 @@ export default function Anchor() {
</p>
</div>
</div>
<Popover.Arrow
style={{
['--arrow-size' as string]: 'calc(var(--spacing) * 2)',
['--arrow-background' as string]: 'var(--color-surface-100-900)',
}}
>
<Popover.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
Copy link

Copilot AI Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect Tailwind arbitrary CSS variable syntax. The syntax [--arrow-size:--spacing(2)] is invalid. It should be [--arrow-size:calc(var(--spacing)*2)] to match the original calc(var(--spacing) * 2) value, or use a direct pixel/spacing value. The --spacing(2) function-like syntax is not valid CSS.

Suggested change
<Popover.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
<Popover.Arrow className="[--arrow-size:calc(var(--spacing)*2)] [--arrow-background:var(--color-surface-100-900)]">

Copilot uses AI. Check for mistakes.
<Popover.ArrowTip />
</Popover.Arrow>
</Popover.Content>
Expand Down
7 changes: 1 addition & 6 deletions sites/skeleton.dev/src/components/examples/framework-components/popover/react/arrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,7 @@ export default function Arrow() {
<Popover.Positioner>
<Popover.Content className="card max-w-md p-4 bg-surface-100-900 shadow-xl">
<Popover.Description>This example will have a small arrow.</Popover.Description>
<Popover.Arrow
style={{
['--arrow-size' as string]: 'calc(var(--spacing) * 2)',
['--arrow-background' as string]: 'var(--color-surface-100-900)',
}}
>
<Popover.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
Copy link

Copilot AI Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect Tailwind arbitrary CSS variable syntax. The syntax [--arrow-size:--spacing(2)] is invalid. It should be [--arrow-size:calc(var(--spacing)*2)] to match the original calc(var(--spacing) * 2) value, or use a direct pixel/spacing value. The --spacing(2) function-like syntax is not valid CSS.

Suggested change
<Popover.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
<Popover.Arrow className="[--arrow-size:calc(var(--spacing)*2)] [--arrow-background:var(--color-surface-100-900)]">

Copilot uses AI. Check for mistakes.
<Popover.ArrowTip />
</Popover.Arrow>
</Popover.Content>
Expand Down
7 changes: 1 addition & 6 deletions sites/skeleton.dev/src/components/examples/framework-components/popover/react/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,7 @@ export default function Default() {
</p>
</div>
</div>
<Popover.Arrow
style={{
['--arrow-size' as string]: 'calc(var(--spacing) * 2)',
['--arrow-background' as string]: 'var(--color-surface-100-900)',
}}
>
<Popover.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
Copy link

Copilot AI Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect Tailwind arbitrary CSS variable syntax. The syntax [--arrow-size:--spacing(2)] is invalid. It should be [--arrow-size:calc(var(--spacing)*2)] to match the original calc(var(--spacing) * 2) value, or use a direct pixel/spacing value. The --spacing(2) function-like syntax is not valid CSS.

Suggested change
<Popover.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
<Popover.Arrow className="[--arrow-size:calc(var(--spacing)*2)] [--arrow-background:var(--color-surface-100-900)]">

Copilot uses AI. Check for mistakes.
<Popover.ArrowTip />
</Popover.Arrow>
</Popover.Content>
Expand Down
2 changes: 1 addition & 1 deletion sites/skeleton.dev/src/components/examples/framework-components/popover/svelte/anchor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
<p class="text-sm">100 <span class="opacity-60">Posts</span></p>
</div>
</div>
<Popover.Arrow style="--arrow-size: calc(var(--spacing) * 2); --arrow-background: var(--color-surface-100-900);">
<Popover.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
Copy link

Copilot AI Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect Tailwind arbitrary CSS variable syntax. The syntax [--arrow-size:--spacing(2)] is invalid. It should be [--arrow-size:calc(var(--spacing)*2)] to match the original calc(var(--spacing) * 2) value, or use a direct pixel/spacing value. The --spacing(2) function-like syntax is not valid CSS.

Suggested change
<Popover.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
<Popover.Arrow class="[--arrow-size:calc(var(--spacing)*2)] [--arrow-background:var(--color-surface-100-900)]">

Copilot uses AI. Check for mistakes.
<Popover.ArrowTip />
</Popover.Arrow>
</Popover.Content>
Expand Down
2 changes: 1 addition & 1 deletion sites/skeleton.dev/src/components/examples/framework-components/popover/svelte/arrow.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<Popover.Positioner>
<Popover.Content class="card max-w-md p-4 bg-surface-100-900 shadow-xl">
<Popover.Description>This example will have a small arrow.</Popover.Description>
<Popover.Arrow style="--arrow-size: calc(var(--spacing) * 2); --arrow-background: var(--color-surface-100-900);">
<Popover.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
Copy link

Copilot AI Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect Tailwind arbitrary CSS variable syntax. The syntax [--arrow-size:--spacing(2)] is invalid. It should be [--arrow-size:calc(var(--spacing)*2)] to match the original calc(var(--spacing) * 2) value, or use a direct pixel/spacing value. The --spacing(2) function-like syntax is not valid CSS.

Suggested change
<Popover.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
<Popover.Arrow class="[--arrow-size:calc(var(--spacing)*2)] [--arrow-background:var(--color-surface-100-900)]">

Copilot uses AI. Check for mistakes.
<Popover.ArrowTip />
</Popover.Arrow>
</Popover.Content>
Expand Down
2 changes: 1 addition & 1 deletion ...s/skeleton.dev/src/components/examples/framework-components/popover/svelte/default.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<p class="text-sm">100 <span class="opacity-60">Posts</span></p>
</div>
</div>
<Popover.Arrow style="--arrow-size: calc(var(--spacing) * 2); --arrow-background: var(--color-surface-100-900);">
<Popover.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
Copy link

Copilot AI Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect Tailwind arbitrary CSS variable syntax. The syntax [--arrow-size:--spacing(2)] is invalid. It should be [--arrow-size:calc(var(--spacing)*2)] to match the original calc(var(--spacing) * 2) value, or use a direct pixel/spacing value. The --spacing(2) function-like syntax is not valid CSS.

Suggested change
<Popover.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
<Popover.Arrow class="[--arrow-size:calc(var(--spacing)*2)] [--arrow-background:var(--color-surface-100-900)]">

Copilot uses AI. Check for mistakes.
<Popover.ArrowTip />
</Popover.Arrow>
</Popover.Content>
Expand Down
7 changes: 3 additions & 4 deletions ...keleton.dev/src/components/examples/framework-components/progress-circular/react/size.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
import { Progress } from '@skeletonlabs/skeleton-react';
import type { CSSProperties } from 'react';

export default function Size() {
return (
<div className="flex gap-4 justify-evenly items-center w-full">
<Progress value={75} className="w-fit">
<Progress.Circle style={{ '--size': '48px', '--thickness': '6px' } as CSSProperties}>
<Progress.Circle className="[--size:--spacing(16)]">
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
</Progress>
<Progress value={75} className="w-fit">
<Progress value={75}>
<Progress.Circle>
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
</Progress>
<Progress value={75} className="w-fit">
<Progress.Circle style={{ '--size': '125px', '--thickness': '12px' } as CSSProperties}>
<Progress.Circle className="[--size:--spacing(32)]">
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
Expand Down
4 changes: 2 additions & 2 deletions ...ton.dev/src/components/examples/framework-components/progress-circular/svelte/size.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<div class="flex gap-4 justify-evenly items-center w-full">
<Progress value={75} class="w-fit">
<Progress.Circle style="--size: 48px; --thickness: 6px;">
<Progress.Circle class="[--size:--spacing(12)]">
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
Expand All @@ -16,7 +16,7 @@
</Progress.Circle>
</Progress>
<Progress value={75} class="w-fit">
<Progress.Circle style="--size: 125px; --thickness: 12px;">
<Progress.Circle class="[--size:--spacing(32)]">
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
Expand Down
9 changes: 2 additions & 7 deletions sites/skeleton.dev/src/components/examples/framework-components/tooltip/react/arrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,9 @@ export default function Arrow() {
<Tooltip.Trigger>Hover</Tooltip.Trigger>
<Portal>
<Tooltip.Positioner>
<Tooltip.Content className="card bg-surface-100-900 p-2 shadow-xl">
<Tooltip.Content className="card bg-surface-100-900 p-2 shadow-xl">
<span>Hello Skeleton</span>
<Tooltip.Arrow
style={{
['--arrow-size' as string]: 'calc(var(--spacing) * 2)',
['--arrow-background' as string]: 'var(--color-surface-100-900)',
}}
>
<Tooltip.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
Copy link

Copilot AI Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect Tailwind arbitrary CSS variable syntax. The syntax [--arrow-size:--spacing(2)] is invalid. It should be [--arrow-size:calc(var(--spacing)*2)] to match the original calc(var(--spacing) * 2) value, or use a direct pixel/spacing value. The --spacing(2) function-like syntax is not valid CSS.

Suggested change
<Tooltip.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
<Tooltip.Arrow className="[--arrow-size:calc(var(--spacing)*2)] [--arrow-background:var(--color-surface-100-900)]">

Copilot uses AI. Check for mistakes.
<Tooltip.ArrowTip />
</Tooltip.Arrow>
</Tooltip.Content>
Expand Down
7 changes: 1 addition & 6 deletions sites/skeleton.dev/src/components/examples/framework-components/tooltip/react/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,7 @@ export default function Default() {
<Tooltip.Positioner>
<Tooltip.Content className="card p-2 preset-filled-surface-950-50">
<span>Hello Skeleton</span>
<Tooltip.Arrow
style={{
['--arrow-size' as string]: 'calc(var(--spacing) * 2)',
['--arrow-background' as string]: 'var(--color-surface-950-50)',
}}
>
<Tooltip.Arrow className="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-950-50)]">
<Tooltip.ArrowTip />
</Tooltip.Arrow>
</Tooltip.Content>
Expand Down
4 changes: 2 additions & 2 deletions sites/skeleton.dev/src/components/examples/framework-components/tooltip/svelte/arrow.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
<Tooltip.Trigger>Hover</Tooltip.Trigger>
<Portal>
<Tooltip.Positioner>
<Tooltip.Content class="card bg-surface-100-900 p-2 shadow-xl">
<Tooltip.Content class="card bg-surface-100-900 p-2 shadow-xl">
<span>Hello Skeleton</span>
<Tooltip.Arrow style="--arrow-size: calc(var(--spacing) * 2); --arrow-background: var(--color-surface-100-900);">
<Tooltip.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
Copy link

Copilot AI Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect Tailwind arbitrary CSS variable syntax. The syntax [--arrow-size:--spacing(2)] is invalid. It should be [--arrow-size:calc(var(--spacing)*2)] to match the original calc(var(--spacing) * 2) value, or use a direct pixel/spacing value. The --spacing(2) function-like syntax is not valid CSS.

Suggested change
<Tooltip.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-100-900)]">
<Tooltip.Arrow class="[--arrow-size:calc(var(--spacing)*2)] [--arrow-background:var(--color-surface-100-900)]">

Copilot uses AI. Check for mistakes.
<Tooltip.ArrowTip />
</Tooltip.Arrow>
</Tooltip.Content>
Expand Down
2 changes: 1 addition & 1 deletion ...s/skeleton.dev/src/components/examples/framework-components/tooltip/svelte/default.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<Tooltip.Positioner>
<Tooltip.Content class="card p-2 preset-filled-surface-950-50">
<span>Hello Skeleton</span>
<Tooltip.Arrow style="--arrow-size: calc(var(--spacing) * 2); --arrow-background: var(--color-surface-950-50);">
<Tooltip.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-950-50)]">
<Tooltip.ArrowTip />
</Tooltip.Arrow>
</Tooltip.Content>
Expand Down
6 changes: 3 additions & 3 deletions sites/skeleton.dev/src/components/landing-page/component-grid.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,21 +212,21 @@
<h2 class="h4 text-center">Progression</h2>
<div class="grid grid-cols-[1fr_auto] grid-row-2 gap-5">
<Progress value={32} class="relative items-center w-fit row-span-2">
<Progress.Circle style="--size: 200px;">
<Progress.Circle class="[--size:--spacing(48)]">
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
<Progress.ValueText class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl font-semibold" />
</Progress>
<Progress value={66} class="relative items-center w-fit self-center">
<Progress.Circle style="--size: 75px;">
<Progress.Circle class="[--size:--spacing(18)]">
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
<Progress.ValueText class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
</Progress>
<Progress value={35} class="relative items-center w-fit self-center">
<Progress.Circle style="--size: 75px;">
<Progress.Circle class="[--size:--spacing(18)]">
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
Expand Down