Skip to content

Commit 187b8d2

Browse files
BenGSchulzBenGSchulz
committed
fix(apollo-wind): address theming gaps for apollo-react/canvas
Skeleton + Dropdown item separator use surface-overlay and properly show in light theme Badge supports status variants, tailwind css updated to support status utility classes Export TooltipPortal primitive
1 parent 2df721d commit 187b8d2

8 files changed

Lines changed: 57 additions & 18 deletions

File tree

‎packages/apollo-wind/src/components/ui/badge.stories.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,19 @@ export const Basic = {
3030
export const Variants = {
3131
name: 'Variants',
3232
render: () => (
33-
<div className="flex flex-wrap items-center gap-3">
34-
<Badge variant="default">Default</Badge>
35-
<Badge variant="secondary">Secondary</Badge>
36-
<Badge variant="destructive">Destructive</Badge>
37-
<Badge variant="outline">Outline</Badge>
33+
<div className="flex flex-col gap-3">
34+
<div className="flex flex-wrap items-center gap-3">
35+
<Badge variant="default">Default</Badge>
36+
<Badge variant="secondary">Secondary</Badge>
37+
<Badge variant="destructive">Destructive</Badge>
38+
<Badge variant="outline">Outline</Badge>
39+
</div>
40+
<div className="flex flex-wrap items-center gap-3">
41+
<Badge variant="success">Success</Badge>
42+
<Badge variant="warning">Warning</Badge>
43+
<Badge variant="error">Error</Badge>
44+
<Badge variant="info">Info</Badge>
45+
</div>
3846
</div>
3947
),
4048
};

‎packages/apollo-wind/src/components/ui/badge.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ const badgeVariants = cva(
1313
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
1414
destructive:
1515
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
16+
error: 'border-transparent bg-error-background text-error hover:bg-error-background/80',
17+
warning:
18+
'border-transparent bg-warning-background text-warning hover:bg-warning-background/80',
19+
info: 'border-transparent bg-info-background text-info hover:bg-info-background/80',
20+
success:
21+
'border-transparent bg-success-background text-success hover:bg-success-background/80',
1622
outline: 'text-foreground',
1723
},
1824
},

‎packages/apollo-wind/src/components/ui/dropdown-menu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ const DropdownMenuSeparator = React.forwardRef<
155155
>(({ className, ...props }, ref) => (
156156
<DropdownMenuPrimitive.Separator
157157
ref={ref}
158-
className={cn('-mx-1 my-1 h-px bg-muted', className)}
158+
className={cn('-mx-1 my-1 h-px bg-surface-overlay', className)}
159159
{...props}
160160
/>
161161
));

‎packages/apollo-wind/src/components/ui/skeleton.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ describe('Skeleton', () => {
2020
expect(skeleton).toHaveClass('rounded-md');
2121
});
2222

23-
it('applies bg-muted class', () => {
23+
it('applies bg-surface-overlay class', () => {
2424
const { container } = render(<Skeleton />);
2525
const skeleton = container.firstChild;
26-
expect(skeleton).toHaveClass('bg-muted');
26+
expect(skeleton).toHaveClass('bg-surface-overlay');
2727
});
2828

2929
it('applies custom className', () => {

‎packages/apollo-wind/src/components/ui/skeleton.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { cn } from '@/lib/index';
22

33
function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
4-
return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />;
4+
return (
5+
<div className={cn('animate-pulse rounded-md bg-surface-overlay', className)} {...props} />
6+
);
57
}
68

79
export { Skeleton };

‎packages/apollo-wind/src/components/ui/tooltip.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ const Tooltip = TooltipPrimitive.Root;
99

1010
const TooltipTrigger = TooltipPrimitive.Trigger;
1111

12+
const TooltipPortal = TooltipPrimitive.Portal;
13+
1214
const TooltipContent = React.forwardRef<
1315
React.ElementRef<typeof TooltipPrimitive.Content>,
1416
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
@@ -25,4 +27,4 @@ const TooltipContent = React.forwardRef<
2527
));
2628
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
2729

28-
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
30+
export { Tooltip, TooltipTrigger, TooltipPortal, TooltipContent, TooltipProvider };

‎packages/apollo-wind/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,7 @@ export {
212212
export {
213213
Tooltip,
214214
TooltipContent,
215+
TooltipPortal,
215216
TooltipProvider,
216217
TooltipTrigger,
217218
} from './components/ui/tooltip';

‎packages/apollo-wind/src/styles/tailwind.consumer.css‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,10 @@ body.dark, .dark {
6060
--success: var(--color-success-icon, #74c94b);
6161
--warning: var(--color-warning-icon, #ffbb27);
6262
--info: var(--color-info-foreground, #42a1ff);
63+
--error-background: var(--color-error-background, #000000);
64+
--info-background: var(--color-info-background, #000000);
65+
--success-background: var(--color-success-background, #000000);
66+
--warning-background: var(--color-warning-background, #000000);
6367

6468
/* ── Ring / Focus ────────────────────────────────────────────────────── */
6569
--ring: var(--color-primary, #66adff);
@@ -137,6 +141,12 @@ body.dark-hc, .dark-hc {
137141
--success: var(--color-success-icon, #74c94b);
138142
--warning: var(--color-warning-icon, #ffbb27);
139143
--info: var(--color-info-foreground, #42a1ff);
144+
--error-background: var(--color-error-background, #000000);
145+
--error-text: var(--color-error-text, #ffadad);
146+
--info-background: var(--color-info-background, #000000);
147+
--info-text: var(--color-info-text, #42a1ff);
148+
--success-background: var(--color-success-background, #000000);
149+
--warning-background: var(--color-warning-background, #000000);
140150

141151
/* ── Ring / Focus ────────────────────────────────────────────────────── */
142152
--ring: var(--color-primary, #badaff);
@@ -214,6 +224,10 @@ body.light, .light {
214224
--success: var(--color-success-icon, #038108);
215225
--warning: var(--color-warning-text, #9e6100);
216226
--info: var(--color-info-foreground, #1665b3);
227+
--error-background: var(--color-error-background, #fff0f1);
228+
--info-background: var(--color-info-background, #e9f1fa);
229+
--success-background: var(--color-success-background, #eeffe5);
230+
--warning-background: var(--color-warning-background, #fff3db);
217231

218232
/* ── Ring / Focus ────────────────────────────────────────────────────── */
219233
--ring: var(--color-primary, #0067df);
@@ -291,6 +305,12 @@ body.light-hc, .light-hc {
291305
--success: var(--color-success-icon, #005603);
292306
--warning: var(--color-warning-text, #273139);
293307
--info: var(--color-info-foreground, #11508d);
308+
--error-background: var(--color-error-background, #fff0f1);
309+
--error-text: var(--color-error-text, #a6040a);
310+
--info-background: var(--color-info-background, #e9f1fa);
311+
--info-text: var(--color-info-text, #11508d);
312+
--success-background: var(--color-success-background, #eeffe5);
313+
--warning-background: var(--color-warning-background, #fff3db);
294314

295315
/* ── Ring / Focus ────────────────────────────────────────────────────── */
296316
--ring: var(--color-primary, #00489d);
@@ -943,24 +963,24 @@ body.canvas, .canvas {
943963
--color-chip-success-background: var(--color-chip-success-background);
944964
--color-error-icon: var(--color-error-icon);
945965
--color-error-icon-inverse: var(--color-error-icon-inverse);
946-
--color-error-text: var(--color-error-text);
947-
--color-error-background: var(--color-error-background);
966+
--color-error-text: var(--error);
967+
--color-error-background: var(--error-background);
948968
--color-error-foreground-inverse: var(--color-error-foreground-inverse);
949969
--color-info-foreground: var(--color-info-foreground);
950970
--color-info-icon: var(--color-info-icon);
951971
--color-info-icon-inverse: var(--color-info-icon-inverse);
952-
--color-info-text: var(--color-info-text);
972+
--color-info-text: var(--info);
953973
--color-info-foreground-inverse: var(--color-info-foreground-inverse);
954-
--color-info-background: var(--color-info-background);
974+
--color-info-background: var(--info-background);
955975
--color-success-icon: var(--color-success-icon);
956976
--color-success-icon-inverse: var(--color-success-icon-inverse);
957-
--color-success-text: var(--color-success-text);
958-
--color-success-background: var(--color-success-background);
977+
--color-success-text: var(--success);
978+
--color-success-background: var(--success-background);
959979
--color-success-foreground-inverse: var(--color-success-foreground-inverse);
960980
--color-warning-icon: var(--color-warning-icon);
961981
--color-warning-icon-inverse: var(--color-warning-icon-inverse);
962-
--color-warning-text: var(--color-warning-text);
963-
--color-warning-background: var(--color-warning-background);
982+
--color-warning-text: var(--warning);
983+
--color-warning-background: var(--warning-background);
964984
--color-warning-foreground-inverse: var(--color-warning-foreground-inverse);
965985
--color-icon-default: var(--color-icon-default);
966986
--color-icon-inverted-default: var(--color-icon-inverted-default);

0 commit comments

Comments
 (0)