Skip to content

Commit b6e961a

Browse files
fluid-design-iofluid-design-io
committed
fix(theme): updated toast and modal css
1 parent d060eb5 commit b6e961a

File tree

2 files changed

+83
-61
lines changed

2 files changed

+83
-61
lines changed

‎src/lib/theme/default.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,23 @@ const defaultTheme: FluidTheme = {
149149
panel:
150150
'w-full focus-visible:ring-white focus-visible:ring-opacity-60 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-400 focus:outline-none focus:ring-2',
151151
},
152+
dialog: {
153+
base: 'bg-white ring-1 ring-black/5 transition dark:bg-gray-900 dark:ring-white/10 overflow-hidden rounded-md p-4',
154+
},
155+
toast: {
156+
base: 'bg-white dark:bg-gray-900 dark:ring-white/10 ring-1 ring-black/5 transition rounded-md p-4',
157+
position: {
158+
'bottom-left': '',
159+
'bottom-right': '',
160+
'bottom-center': '',
161+
'top-left': '',
162+
'top-center': '',
163+
'top-right': '',
164+
'center-left': '',
165+
center: '',
166+
'center-right': '',
167+
},
168+
},
152169
};
153170

154171
export default defaultTheme;

‎src/type.ts

Lines changed: 66 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { Dispatch, SetStateAction, SVGProps } from "react";
2-
import { DeepPartial } from "./lib/helpers/deep-partial";
1+
import React, { Dispatch, SetStateAction, SVGProps } from 'react';
2+
import { DeepPartial } from './lib/helpers/deep-partial';
33

44
/* ===== Start Fluid Theme ===== */
55
export type CustomFluidTheme = DeepPartial<FluidTheme>;
@@ -39,13 +39,13 @@ export interface FluidTheme {
3939
base: string;
4040
shape: FluidButtonShapes;
4141
//@ts-ignore
42-
weight: Pick<FluidButtonWeights, TabProps["weight"]>;
42+
weight: Pick<FluidButtonWeights, TabProps['weight']>;
4343
tabWrap: {
4444
base: string;
4545
//@ts-ignore
46-
active: Pick<FluidButtonWeights, TabProps["weight"]>;
46+
active: Pick<FluidButtonWeights, TabProps['weight']>;
4747
//@ts-ignore
48-
inactive: Pick<FluidButtonWeights, TabProps["weight"]>;
48+
inactive: Pick<FluidButtonWeights, TabProps['weight']>;
4949
};
5050
activeButton: {
5151
base: string;
@@ -55,10 +55,17 @@ export interface FluidTheme {
5555
square: string;
5656
};
5757
//@ts-ignore
58-
weight: Pick<FluidButtonWeights, TabProps["weight"]>;
58+
weight: Pick<FluidButtonWeights, TabProps['weight']>;
5959
};
6060
panel: string;
6161
};
62+
dialog: {
63+
base: string;
64+
};
65+
toast: {
66+
base: string;
67+
position: FluidPositions;
68+
};
6269
}
6370

6471
export interface FluidBoolean {
@@ -153,18 +160,18 @@ export interface FluidColors {
153160
purple: string;
154161
}
155162

156-
export type FluidHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
163+
export type FluidHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
157164

158165
export interface FluidPositions {
159-
"bottom-left": string;
160-
"bottom-right": string;
161-
"bottom-center": string;
162-
"top-left": string;
163-
"top-center": string;
164-
"top-right": string;
165-
"center-left": string;
166+
'bottom-left': string;
167+
'bottom-right': string;
168+
'bottom-center': string;
169+
'top-left': string;
170+
'top-center': string;
171+
'top-right': string;
172+
'center-left': string;
166173
center: string;
167-
"center-right": string;
174+
'center-right': string;
168175
}
169176

170177
export interface FluidSizes {
@@ -173,20 +180,20 @@ export interface FluidSizes {
173180
md: string;
174181
lg: string;
175182
xl: string;
176-
"2xl": string;
177-
"3xl": string;
178-
"4xl": string;
179-
"5xl": string;
180-
"6xl": string;
181-
"7xl": string;
183+
'2xl': string;
184+
'3xl': string;
185+
'4xl': string;
186+
'5xl': string;
187+
'6xl': string;
188+
'7xl': string;
182189
}
183190

184191
/* ===== End Fluid Theme ===== */
185192

186193
/* ===== Start Polymorphic Props ===== */
187194

188195
export type PolymorphicRef<C extends React.ElementType> =
189-
React.ComponentPropsWithRef<C>["ref"];
196+
React.ComponentPropsWithRef<C>['ref'];
190197

191198
export type AsProp<C extends React.ElementType> = {
192199
as?: C;
@@ -199,11 +206,9 @@ export type AsProp<C extends React.ElementType> = {
199206

200207
export type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
201208

202-
export type PolymorphicComponentProp<
203-
C extends React.ElementType,
204-
Props = {}
205-
> = React.PropsWithChildren<Props & AsProp<C>> &
206-
Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
209+
export type PolymorphicComponentProp<C extends React.ElementType, Props = {}> =
210+
React.PropsWithChildren<Props & AsProp<C>> &
211+
Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
207212

208213
export type PolymorphicComponentPropWithRef<
209214
C extends React.ElementType,
@@ -277,7 +282,7 @@ export type ButtonProps<C extends React.ElementType> =
277282
*
278283
* @type {'light' | 'normal' | 'bold' | 'outline' | 'clear' | 'link'}
279284
*/
280-
weight?: keyof FluidButtonWeights | "normal";
285+
weight?: keyof FluidButtonWeights | 'normal';
281286
/**
282287
* Adjust the padding to be the same for all edges
283288
*
@@ -315,10 +320,10 @@ export type ButtonProps<C extends React.ElementType> =
315320
>;
316321

317322
export type ButtonLoadingOptionsAnimation =
318-
| "spin"
319-
| "pulse"
320-
| "ping"
321-
| "spin-large";
323+
| 'spin'
324+
| 'pulse'
325+
| 'ping'
326+
| 'spin-large';
322327

323328
export type ButtonLoadingOptions = {
324329
animation?: ButtonLoadingOptionsAnimation;
@@ -339,7 +344,7 @@ export type ButtonIsLoadedOptions = {
339344
className?: string;
340345
};
341346

342-
export type ButtonComponent = <C extends React.ElementType = "button">(
347+
export type ButtonComponent = <C extends React.ElementType = 'button'>(
343348
props: ButtonProps<C>
344349
) => React.ReactElement | null;
345350

@@ -383,13 +388,13 @@ export type ButtonInnerProp = {
383388
* `flex` (default) or `between`
384389
* `between` will create a gap between the icon and the label
385390
*/
386-
iconStartPosition?: "flex" | "between";
391+
iconStartPosition?: 'flex' | 'between';
387392
/**
388393
* iconEndPosition: Position of the iconEnd
389394
* `flex` (default) or `between`
390395
* `between` will create a gap between the icon and the label
391396
*/
392-
iconEndPosition?: "flex" | "between";
397+
iconEndPosition?: 'flex' | 'between';
393398
} & SRProp;
394399

395400
/* ===== End Button Props ===== */
@@ -425,12 +430,12 @@ export type MenuProps = {
425430
* menuPositionX: Horizontal position of the menu
426431
* @defaultValue `start`
427432
*/
428-
menuPositionX?: "start" | "center" | "end";
433+
menuPositionX?: 'start' | 'center' | 'end';
429434
/**
430435
* menuPositionY: Vertical position of the menu
431436
* @defaultValue `top`
432437
*/
433-
menuPositionY?: "top" | "center" | "bottom";
438+
menuPositionY?: 'top' | 'center' | 'bottom';
434439
[x: string]: any;
435440
/**
436441
* Whether the menu should be rendered horizontally.
@@ -509,8 +514,8 @@ export type MenuProps = {
509514
* }
510515
* ```
511516
*/
512-
menus?: MenuItemProps<"button">[];
513-
} & ButtonProps<"button"> &
517+
menus?: MenuItemProps<'button'>[];
518+
} & ButtonProps<'button'> &
514519
SRProp;
515520

516521
export type MenuComponent = (props: MenuProps) => React.ReactElement | null;
@@ -533,15 +538,15 @@ export type MenuComponent = (props: MenuProps) => React.ReactElement | null;
533538
* @defaultValue `default`
534539
*/
535540
export type MenuRoleProp =
536-
| "separator"
537-
| "destructive"
538-
| "default"
539-
| "info"
540-
| "success"
541-
| "warning"
542-
| "primary";
543-
544-
export type MenuItemProps<C extends React.ElementType = "button"> =
541+
| 'separator'
542+
| 'destructive'
543+
| 'default'
544+
| 'info'
545+
| 'success'
546+
| 'warning'
547+
| 'primary';
548+
549+
export type MenuItemProps<C extends React.ElementType = 'button'> =
545550
PolymorphicComponentPropWithRef<
546551
C,
547552
{
@@ -553,7 +558,7 @@ export type MenuItemProps<C extends React.ElementType = "button"> =
553558
> &
554559
ButtonProps<C>;
555560

556-
export type MenuItemComponent = <C extends React.ElementType = "button">(
561+
export type MenuItemComponent = <C extends React.ElementType = 'button'>(
557562
props: MenuItemProps<C>
558563
) => React.ReactElement | null;
559564

@@ -565,7 +570,7 @@ export type DropdownProps = {
565570
list: DropdownListProps[];
566571
label?: string;
567572
labelClassName?: string;
568-
description?: FormProp["description"];
573+
description?: FormProp['description'];
569574
placeholder?: string;
570575
disabled?: boolean;
571576
className?: string;
@@ -736,22 +741,22 @@ export type DropdownProps = {
736741
*/
737742
export type DropdownListProps = Record<string, any> | string;
738743

739-
export type SelectProps<C extends React.ElementType = "div"> =
744+
export type SelectProps<C extends React.ElementType = 'div'> =
740745
PolymorphicComponentPropWithRef<C, {} & DropdownProps>;
741746

742-
export type SelectComponent = <C extends React.ElementType = "div">(
747+
export type SelectComponent = <C extends React.ElementType = 'div'>(
743748
props: SelectProps<C>
744749
) => React.ReactElement | null;
745750

746-
export type ComboBoxProps<C extends React.ElementType = "div"> =
751+
export type ComboBoxProps<C extends React.ElementType = 'div'> =
747752
PolymorphicComponentPropWithRef<
748753
C,
749754
{
750755
inputClassName?: string;
751756
} & DropdownProps
752757
>;
753758

754-
export type ComboBoxComponent = <C extends React.ElementType = "div">(
759+
export type ComboBoxComponent = <C extends React.ElementType = 'div'>(
755760
props: ComboBoxProps<C>
756761
) => React.ReactElement | null;
757762

@@ -781,7 +786,7 @@ export type TabItemProps = {
781786
content: React.ReactNode;
782787
};
783788

784-
export type TabListItemProps<C extends React.ElementType = "div"> =
789+
export type TabListItemProps<C extends React.ElementType = 'div'> =
785790
PolymorphicComponentPropWithRef<
786791
C,
787792
{
@@ -794,12 +799,12 @@ export type TabListItemProps<C extends React.ElementType = "div"> =
794799
* The title of the tab
795800
* @defaultValue `undefined`
796801
*/
797-
title?: TabItemProps["title"];
802+
title?: TabItemProps['title'];
798803
shape?: keyof FluidButtonShapes;
799804
size?: keyof FluidButtonSizes;
800805
weight?:
801-
| keyof Pick<FluidButtonWeights, "normal" | "clear" | "light">
802-
| "normal";
806+
| keyof Pick<FluidButtonWeights, 'normal' | 'clear' | 'light'>
807+
| 'normal';
803808
className?: string;
804809
tabClassName?: string;
805810
tabActiveClassName?: string;
@@ -810,9 +815,9 @@ export type TabListItemProps<C extends React.ElementType = "div"> =
810815

811816
export type TabListProps = {
812817
tabs?: TabItemProps[];
813-
} & Omit<TabListItemProps, "layoutId">;
818+
} & Omit<TabListItemProps, 'layoutId'>;
814819

815-
export type TabProps<C extends React.ElementType = "div"> =
820+
export type TabProps<C extends React.ElementType = 'div'> =
816821
PolymorphicComponentPropWithRef<
817822
C,
818823
{
@@ -824,6 +829,6 @@ export type TabProps<C extends React.ElementType = "div"> =
824829
} & TabListProps
825830
>;
826831

827-
export type TabComponent = <C extends React.ElementType = "div">(
832+
export type TabComponent = <C extends React.ElementType = 'div'>(
828833
props: TabProps<C>
829834
) => React.ReactElement | null;

0 commit comments

Comments
 (0)