Skip to content

Commit

Permalink
fix(theme): updated toast and modal css
Browse files Browse the repository at this point in the history
  • Loading branch information
@fluid-design-io
fluid-design-io committed Feb 5, 2023
1 parent d060eb5 commit b6e961a
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 61 deletions.
17 changes: 17 additions & 0 deletions src/lib/theme/default.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,23 @@ const defaultTheme: FluidTheme = {
panel:
'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',
},
dialog: {
base: 'bg-white ring-1 ring-black/5 transition dark:bg-gray-900 dark:ring-white/10 overflow-hidden rounded-md p-4',
},
toast: {
base: 'bg-white dark:bg-gray-900 dark:ring-white/10 ring-1 ring-black/5 transition rounded-md p-4',
position: {
'bottom-left': '',
'bottom-right': '',
'bottom-center': '',
'top-left': '',
'top-center': '',
'top-right': '',
'center-left': '',
center: '',
'center-right': '',
},
},
};

export default defaultTheme;
127 changes: 66 additions & 61 deletions src/type.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Dispatch, SetStateAction, SVGProps } from "react";
import { DeepPartial } from "./lib/helpers/deep-partial";
import React, { Dispatch, SetStateAction, SVGProps } from 'react';
import { DeepPartial } from './lib/helpers/deep-partial';

/* ===== Start Fluid Theme ===== */
export type CustomFluidTheme = DeepPartial<FluidTheme>;
Expand Down Expand Up @@ -39,13 +39,13 @@ export interface FluidTheme {
base: string;
shape: FluidButtonShapes;
//@ts-ignore
weight: Pick<FluidButtonWeights, TabProps["weight"]>;
weight: Pick<FluidButtonWeights, TabProps['weight']>;
tabWrap: {
base: string;
//@ts-ignore
active: Pick<FluidButtonWeights, TabProps["weight"]>;
active: Pick<FluidButtonWeights, TabProps['weight']>;
//@ts-ignore
inactive: Pick<FluidButtonWeights, TabProps["weight"]>;
inactive: Pick<FluidButtonWeights, TabProps['weight']>;
};
activeButton: {
base: string;
Expand All @@ -55,10 +55,17 @@ export interface FluidTheme {
square: string;
};
//@ts-ignore
weight: Pick<FluidButtonWeights, TabProps["weight"]>;
weight: Pick<FluidButtonWeights, TabProps['weight']>;
};
panel: string;
};
dialog: {
base: string;
};
toast: {
base: string;
position: FluidPositions;
};
}

export interface FluidBoolean {
Expand Down Expand Up @@ -153,18 +160,18 @@ export interface FluidColors {
purple: string;
}

export type FluidHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
export type FluidHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

export interface FluidPositions {
"bottom-left": string;
"bottom-right": string;
"bottom-center": string;
"top-left": string;
"top-center": string;
"top-right": string;
"center-left": string;
'bottom-left': string;
'bottom-right': string;
'bottom-center': string;
'top-left': string;
'top-center': string;
'top-right': string;
'center-left': string;
center: string;
"center-right": string;
'center-right': string;
}

export interface FluidSizes {
Expand All @@ -173,20 +180,20 @@ export interface FluidSizes {
md: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
"4xl": string;
"5xl": string;
"6xl": string;
"7xl": string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
}

/* ===== End Fluid Theme ===== */

/* ===== Start Polymorphic Props ===== */

export type PolymorphicRef<C extends React.ElementType> =
React.ComponentPropsWithRef<C>["ref"];
React.ComponentPropsWithRef<C>['ref'];

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

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

export type PolymorphicComponentProp<
C extends React.ElementType,
Props = {}
> = React.PropsWithChildren<Props & AsProp<C>> &
Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
export type PolymorphicComponentProp<C extends React.ElementType, Props = {}> =
React.PropsWithChildren<Props & AsProp<C>> &
Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;

export type PolymorphicComponentPropWithRef<
C extends React.ElementType,
Expand Down Expand Up @@ -277,7 +282,7 @@ export type ButtonProps<C extends React.ElementType> =
*
* @type {'light' | 'normal' | 'bold' | 'outline' | 'clear' | 'link'}
*/
weight?: keyof FluidButtonWeights | "normal";
weight?: keyof FluidButtonWeights | 'normal';
/**
* Adjust the padding to be the same for all edges
*
Expand Down Expand Up @@ -315,10 +320,10 @@ export type ButtonProps<C extends React.ElementType> =
>;

export type ButtonLoadingOptionsAnimation =
| "spin"
| "pulse"
| "ping"
| "spin-large";
| 'spin'
| 'pulse'
| 'ping'
| 'spin-large';

export type ButtonLoadingOptions = {
animation?: ButtonLoadingOptionsAnimation;
Expand All @@ -339,7 +344,7 @@ export type ButtonIsLoadedOptions = {
className?: string;
};

export type ButtonComponent = <C extends React.ElementType = "button">(
export type ButtonComponent = <C extends React.ElementType = 'button'>(
props: ButtonProps<C>
) => React.ReactElement | null;

Expand Down Expand Up @@ -383,13 +388,13 @@ export type ButtonInnerProp = {
* `flex` (default) or `between`
* `between` will create a gap between the icon and the label
*/
iconStartPosition?: "flex" | "between";
iconStartPosition?: 'flex' | 'between';
/**
* iconEndPosition: Position of the iconEnd
* `flex` (default) or `between`
* `between` will create a gap between the icon and the label
*/
iconEndPosition?: "flex" | "between";
iconEndPosition?: 'flex' | 'between';
} & SRProp;

/* ===== End Button Props ===== */
Expand Down Expand Up @@ -425,12 +430,12 @@ export type MenuProps = {
* menuPositionX: Horizontal position of the menu
* @defaultValue `start`
*/
menuPositionX?: "start" | "center" | "end";
menuPositionX?: 'start' | 'center' | 'end';
/**
* menuPositionY: Vertical position of the menu
* @defaultValue `top`
*/
menuPositionY?: "top" | "center" | "bottom";
menuPositionY?: 'top' | 'center' | 'bottom';
[x: string]: any;
/**
* Whether the menu should be rendered horizontally.
Expand Down Expand Up @@ -509,8 +514,8 @@ export type MenuProps = {
* }
* ```
*/
menus?: MenuItemProps<"button">[];
} & ButtonProps<"button"> &
menus?: MenuItemProps<'button'>[];
} & ButtonProps<'button'> &
SRProp;

export type MenuComponent = (props: MenuProps) => React.ReactElement | null;
Expand All @@ -533,15 +538,15 @@ export type MenuComponent = (props: MenuProps) => React.ReactElement | null;
* @defaultValue `default`
*/
export type MenuRoleProp =
| "separator"
| "destructive"
| "default"
| "info"
| "success"
| "warning"
| "primary";

export type MenuItemProps<C extends React.ElementType = "button"> =
| 'separator'
| 'destructive'
| 'default'
| 'info'
| 'success'
| 'warning'
| 'primary';

export type MenuItemProps<C extends React.ElementType = 'button'> =
PolymorphicComponentPropWithRef<
C,
{
Expand All @@ -553,7 +558,7 @@ export type MenuItemProps<C extends React.ElementType = "button"> =
> &
ButtonProps<C>;

export type MenuItemComponent = <C extends React.ElementType = "button">(
export type MenuItemComponent = <C extends React.ElementType = 'button'>(
props: MenuItemProps<C>
) => React.ReactElement | null;

Expand All @@ -565,7 +570,7 @@ export type DropdownProps = {
list: DropdownListProps[];
label?: string;
labelClassName?: string;
description?: FormProp["description"];
description?: FormProp['description'];
placeholder?: string;
disabled?: boolean;
className?: string;
Expand Down Expand Up @@ -736,22 +741,22 @@ export type DropdownProps = {
*/
export type DropdownListProps = Record<string, any> | string;

export type SelectProps<C extends React.ElementType = "div"> =
export type SelectProps<C extends React.ElementType = 'div'> =
PolymorphicComponentPropWithRef<C, {} & DropdownProps>;

export type SelectComponent = <C extends React.ElementType = "div">(
export type SelectComponent = <C extends React.ElementType = 'div'>(
props: SelectProps<C>
) => React.ReactElement | null;

export type ComboBoxProps<C extends React.ElementType = "div"> =
export type ComboBoxProps<C extends React.ElementType = 'div'> =
PolymorphicComponentPropWithRef<
C,
{
inputClassName?: string;
} & DropdownProps
>;

export type ComboBoxComponent = <C extends React.ElementType = "div">(
export type ComboBoxComponent = <C extends React.ElementType = 'div'>(
props: ComboBoxProps<C>
) => React.ReactElement | null;

Expand Down Expand Up @@ -781,7 +786,7 @@ export type TabItemProps = {
content: React.ReactNode;
};

export type TabListItemProps<C extends React.ElementType = "div"> =
export type TabListItemProps<C extends React.ElementType = 'div'> =
PolymorphicComponentPropWithRef<
C,
{
Expand All @@ -794,12 +799,12 @@ export type TabListItemProps<C extends React.ElementType = "div"> =
* The title of the tab
* @defaultValue `undefined`
*/
title?: TabItemProps["title"];
title?: TabItemProps['title'];
shape?: keyof FluidButtonShapes;
size?: keyof FluidButtonSizes;
weight?:
| keyof Pick<FluidButtonWeights, "normal" | "clear" | "light">
| "normal";
| keyof Pick<FluidButtonWeights, 'normal' | 'clear' | 'light'>
| 'normal';
className?: string;
tabClassName?: string;
tabActiveClassName?: string;
Expand All @@ -810,9 +815,9 @@ export type TabListItemProps<C extends React.ElementType = "div"> =

export type TabListProps = {
tabs?: TabItemProps[];
} & Omit<TabListItemProps, "layoutId">;
} & Omit<TabListItemProps, 'layoutId'>;

export type TabProps<C extends React.ElementType = "div"> =
export type TabProps<C extends React.ElementType = 'div'> =
PolymorphicComponentPropWithRef<
C,
{
Expand All @@ -824,6 +829,6 @@ export type TabProps<C extends React.ElementType = "div"> =
} & TabListProps
>;

export type TabComponent = <C extends React.ElementType = "div">(
export type TabComponent = <C extends React.ElementType = 'div'>(
props: TabProps<C>
) => React.ReactElement | null;

0 comments on commit b6e961a

Please sign in to comment.