@xanui/core 1.1.2 → 1.1.3

package/src/css/aliases.ts

@@ -1,35 +0,0 @@
-import { OptionAliases } from 'oncss'
-import { Aliases } from './types'
-
-const isStr = (v: any, or: any) => typeof v === 'string' ? v : or
-
-const aliases: OptionAliases<Aliases> = {
-   bgcolor: (v) => ({ backgroundColor: v }),
-   bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: "cover", backgroundRepeat: "no-repeat" }),
-   bg: (v) => ({ background: v }),
-   p: (v) => ({ padding: isStr(v, 8 * v) }),
-   pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),
-   pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),
-   pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),
-   pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),
-   px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),
-   py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),
-   m: (v) => ({ margin: isStr(v, 8 * v) }),
-   mt: (v) => ({ marginTop: isStr(v, 8 * v) }),
-   mr: (v) => ({ marginRight: isStr(v, 8 * v) }),
-   mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),
-   ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),
-   mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),
-   my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),
-   radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
-   borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
-   shadow: (v) => ({ boxShadow: v }),
-   flexBox: (v) => (v ? { display: "flex" } : {}),
-   flexRow: (v) => (v ? { flexDirection: "row" } : {}),
-   flexColumn: (v) => (v ? { flexDirection: "column" } : {}),
-   flexWraped: (v) => (v ? { flexWrap: "wrap" } : {}),
-   direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),
-   gap: (v) => ({ gap: isStr(v, 8 * v) }),
-};
-
-export default aliases

package/src/css/getProps.ts

@@ -1,38 +0,0 @@
-import { CSSProps } from "./types";
-
-const getProps = (prop: string, value: string, _css: CSSProps) => {
-    let important;
-    if (typeof value === 'string') {
-        const split = value.split("!")
-        important = split[1] ? "!important" : ""
-        value = split[0]
-    }
-
-    if (prop === 'disabled') {
-        if ((value as any) === true) {
-            return {
-                pointerEvents: "none!important",
-                cursor: "default!important",
-                userSelect: "none!important",
-                opacity: ".8!important"
-            } as any
-        }
-        return {}
-    }
-
-    if (value && typeof value === "number" && ["border", "borderRight", "borderLeft", "borderTop", "borderBottom"].includes(prop as any)) {
-        const keys: any = Object.keys(_css)
-        let p: any = {
-            [`${prop}Width`]: value + 'px' + (important || ""),
-        }
-        if (!keys.includes(`${prop}Color`)) {
-            p[`${prop}Color`] = "divider"
-        }
-        if (!keys.includes(`${prop}Style`)) {
-            p[`${prop}Style`] = "solid"
-        }
-        return p
-    }
-}
-
-export default getProps

package/src/css/getValue.ts

@@ -1,117 +0,0 @@
-import { CSSProps } from "./types"
-
-const getColor = (color: string) => {
-    return {
-        [`${color}`]: `var(--color-${color}-primary)`,
-        [`${color}.primary`]: `var(--color-${color}-primary)`,
-        [`${color}.secondary`]: `var(--color-${color}-secondary)`,
-        [`${color}.text`]: `var(--color-${color}-text)`,
-        [`${color}.alpha`]: `var(--color-${color}-alpha)`
-    }
-}
-
-const withImportant = (important: any, value: any) => important ? value + important : value
-const colors: any = {
-    "text": `var(--color-text-primary)`,
-    "text.primary": `var(--color-text-primary)`,
-    "text.secondary": `var(--color-text-secondary)`,
-
-    "background": `var(--color-background-primary)`,
-    "background.primary": `var(--color-background-primary)`,
-    "background.secondary": `var(--color-background-secondary)`,
-    "background.alpha": `var(--color-background-alpha)`,
-    "divider": `var(--color-divider)`,
-
-    ...getColor("brand"),
-    ...getColor("accent"),
-    ...getColor("info"),
-    ...getColor("success"),
-    ...getColor("warning"),
-    ...getColor("danger"),
-}
-
-const breakpoints: any = {
-    "xs": "var(--bp-xs)",
-    "sm": "var(--bp-sm)",
-    "md": "var(--bp-md)",
-    "lg": "var(--bp-lg)",
-    "xl": "var(--bp-xl)"
-}
-
-let fontsizes: any = {
-    "h1": "var(--fontsize-h1)",
-    "h2": "var(--fontsize-h2)",
-    "h3": "var(--fontsize-h3)",
-    "h4": "var(--fontsize-h4)",
-    "h5": "var(--fontsize-h5)",
-    "h6": "var(--fontsize-h6)",
-    "text": "var(--fontsize-text)",
-    "button": "var(--fontsize-button)",
-    "small": "var(--fontsize-small)"
-}
-
-let lineHeights: any = {
-    "h1": "var(--lineheight-h1)",
-    "h2": "var(--lineheight-h2)",
-    "h3": "var(--lineheight-h3)",
-    "h4": "var(--lineheight-h4)",
-    "h5": "var(--lineheight-h5)",
-    "h6": "var(--lineheight-h6)",
-    "text": "var(--lineheight-text)",
-    "button": "var(--lineheight-button)",
-    "small": "var(--lineheight-small)"
-}
-
-let fontWeights: any = {
-    "h1": "var(--fontweight-h1)",
-    "h2": "var(--fontweight-h2)",
-    "h3": "var(--fontweight-h3)",
-    "h4": "var(--fontweight-h4)",
-    "h5": "var(--fontweight-h5)",
-    "h6": "var(--fontweight-h6)",
-    "text": "var(--fontweight-text)",
-    "button": "var(--fontweight-button)",
-    "small": "var(--fontweight-small)"
-}
-
-let font: any = {
-    "h1": "var(--font-h1)",
-    "h2": "var(--font-h2)",
-    "h3": "var(--font-h3)",
-    "h4": "var(--font-h4)",
-    "h5": "var(--font-h5)",
-    "h6": "var(--font-h6)",
-    "text": "var(--font-text)",
-    "button": "var(--font-button)",
-    "small": "var(--font-small)"
-}
-
-const getValue = (prop: any, value: string | number, _css: CSSProps): any => {
-    let important;
-
-    if (typeof value === 'string') {
-        const split = value.split("!")
-        important = split[1] ? "!important" : ""
-        value = split[0]
-    }
-
-    if (['width', 'maxWidth', 'minWidth', 'max-width', 'min-width'].includes(prop)) {
-        return withImportant(important, breakpoints[value] || value)
-    } else if (['fontFamily', 'font-family'].includes(prop) && value === 'default') {
-        return withImportant(important, "var(--font-family)")
-    } if (prop === 'font' && typeof value === "string" && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
-        return withImportant(important, font[value] || value)
-    } if (['fontWeight', 'font-weight'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
-        return withImportant(important, fontWeights[value] || value)
-    } else if (['lineHeight', 'line-height'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
-        return withImportant(important, lineHeights[value] || value)
-    } else if (['fontSize', 'font-size'].includes(prop) && typeof value === 'string') {
-        return withImportant(important, fontsizes[value] || value)
-    } else if (typeof value === "number" && ["shadow", "boxShadow"].includes(prop)) {
-        return withImportant(important, `var(--shadow-${value})`)
-    }
-
-    return withImportant(important, colors[value] || value)
-}
-
-export default getValue

package/src/css/index.ts

@@ -1,78 +0,0 @@
-import getValue from "./getValue"
-import getProps from "./getProps"
-import aliases from "./aliases"
-import { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'
-import { css as _css } from "oncss"
-
-export {
-    getValue,
-    getProps
-}
-
-export const breakpoints = {
-    xs: 0,
-    sm: 600,
-    md: 900,
-    lg: 1200,
-    xl: 1536
-}
-
-export const css = (props: CSSProps, options?: CSSOptionProps) => {
-    const cssOptions: CSSOptionProps = {
-        ...options,
-        breakpoints,
-        aliases,
-        getValue: (p: any, v: any, _c: any, dept) => {
-            if (options?.getValue) {
-                let _val = options?.getValue(p, v, _c, dept)
-                if (_val) return _val
-            }
-            return getValue(p, v, _c)
-        },
-        getProps: (p: any, v: any, _c: any, dept) => {
-            if (options?.getProps) {
-                let _p = options?.getProps(p, v, _c, dept)
-                if (_p) return _p
-            }
-            return getProps(p, v, _c)
-        },
-    }
-    return _css<Aliases, BreakpointKeys>(props, cssOptions)
-}
-
-export const adjustColor = (hex: string, factor: number) => {
-
-    hex = hex.replace(/^#/, '')
-
-    let r = parseInt(hex.slice(0, 2), 16)
-    let g = parseInt(hex.slice(2, 4), 16)
-    let b = parseInt(hex.slice(4, 6), 16)
-
-    r = Math.floor(r * factor)
-    g = Math.floor(g * factor)
-    b = Math.floor(b * factor)
-
-    r = Math.min(255, Math.max(0, r))
-    g = Math.min(255, Math.max(0, g))
-    b = Math.min(255, Math.max(0, b))
-
-    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-}
-
-export const adjustTextContrast = (color: string) => {
-    color = color.replace(/^#/, '')
-    const r = parseInt(color.slice(0, 2), 16);
-    const g = parseInt(color.slice(2, 4), 16);
-    const b = parseInt(color.slice(4, 6), 16);
-
-    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-    return luminance > 0.5 ? '#111111' : '#FFFFFF';
-}
-
-export const alpha = (color: string, opacity = 1) => {
-    if (typeof opacity !== 'number') return color
-    let _opacity = opacity * 100
-    if (!color.startsWith("#")) throw new Error(`color must be hex`)
-    return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();
-};
-

package/src/index.ts

@@ -1,34 +0,0 @@
-import Tag from './Tag'
-import useTagProps from './Tag/useTagProps'
-import useAnimation from './useAnimation'
-import useColorTemplate from './useColorTemplate'
-import useBreakpoint from './breakpoint/useBreakpoint'
-import useBreakpointProps from './breakpoint/useBreakpointProps'
-import ServerStyleTags from './ServerStyleTags'
-import isWindow from './isWindow'
-import useInterface from './useInterface'
-import Transition from './Transition'
-
-export * from './css'
-export * from "./theme"
-export * from './css/types'
-export * from './Tag/types'
-export * from './theme/types'
-export * from './useColorTemplate'
-export * from './useAnimation'
-export type * from './Transition'
-export type * from './Tag/types'
-export type { useBreakpointPropsType } from './breakpoint/useBreakpointProps'
-
-export {
-    Tag,
-    useTagProps,
-    useAnimation,
-    Transition,
-    useColorTemplate,
-    ServerStyleTags,
-    useBreakpoint,
-    useBreakpointProps,
-    isWindow,
-    useInterface
-}

package/src/isWindow.ts

@@ -1,3 +0,0 @@
-
-const isWindow = (): Window | void => typeof window !== 'undefined' ? window : undefined
-export default isWindow

package/src/theme/ThemeCssVars.ts

@@ -1,107 +0,0 @@
-import { ThemeOptions } from "./types";
-
-const ThemeCssVars = (theme: ThemeOptions) => {
-
-    const shadows: any = {}
-    theme.shadow.forEach((s, i) => shadows[`--shadow-${i}`] = s)
-
-    return {
-        "--bp-xs": theme.breakpoints.xs,
-        "--bp-sm": theme.breakpoints.sm,
-        "--bp-md": theme.breakpoints.md,
-        "--bp-lg": theme.breakpoints.lg,
-        "--bp-xl": theme.breakpoints.xl,
-
-        "--font-family": theme.typography.fontFamily,
-        "--font-h1": `${theme.typography.h1.fontWeight} ${theme.typography.h1.fontSize}px/${theme.typography.h1.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-h2": `${theme.typography.h2.fontWeight} ${theme.typography.h2.fontSize}px/${theme.typography.h2.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-h3": `${theme.typography.h3.fontWeight} ${theme.typography.h3.fontSize}px/${theme.typography.h3.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-h4": `${theme.typography.h4.fontWeight} ${theme.typography.h4.fontSize}px/${theme.typography.h4.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-h5": `${theme.typography.h5.fontWeight} ${theme.typography.h5.fontSize}px/${theme.typography.h5.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-h6": `${theme.typography.h6.fontWeight} ${theme.typography.h6.fontSize}px/${theme.typography.h6.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-text": `${theme.typography.text.fontWeight} ${theme.typography.text.fontSize}px/${theme.typography.text.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-button": `${theme.typography.button.fontWeight} ${theme.typography.button.fontSize}px/${theme.typography.button.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-small": `${theme.typography.small.fontWeight} ${theme.typography.small.fontSize}px/${theme.typography.small.lineHeight} ${theme.typography.fontFamily}`,
-
-        "--fontsize-h1": `${theme.typography.h1.fontSize}px`,
-        "--fontsize-h2": `${theme.typography.h2.fontSize}px`,
-        "--fontsize-h3": `${theme.typography.h3.fontSize}px`,
-        "--fontsize-h4": `${theme.typography.h4.fontSize}px`,
-        "--fontsize-h5": `${theme.typography.h5.fontSize}px`,
-        "--fontsize-h6": `${theme.typography.h6.fontSize}px`,
-        "--fontsize-text": `${theme.typography.text.fontSize}px`,
-        "--fontsize-button": `${theme.typography.button.fontSize}px`,
-        "--fontsize-small": `${theme.typography.small.fontSize}px`,
-
-        "--fontweight-h1": theme.typography.h1.fontWeight + "",
-        "--fontweight-h2": theme.typography.h2.fontWeight + "",
-        "--fontweight-h3": theme.typography.h3.fontWeight + "",
-        "--fontweight-h4": theme.typography.h4.fontWeight + "",
-        "--fontweight-h5": theme.typography.h5.fontWeight + "",
-        "--fontweight-h6": theme.typography.h6.fontWeight + "",
-        "--fontweight-text": theme.typography.text.fontWeight + "",
-        "--fontweight-button": theme.typography.button.fontWeight + "",
-        "--fontweight-small": theme.typography.small.fontWeight + "",
-
-        "--lineheight-h1": theme.typography.h1.lineHeight + "",
-        "--lineheight-h2": theme.typography.h2.lineHeight + "",
-        "--lineheight-h3": theme.typography.h3.lineHeight + "",
-        "--lineheight-h4": theme.typography.h4.lineHeight + "",
-        "--lineheight-h5": theme.typography.h5.lineHeight + "",
-        "--lineheight-h6": theme.typography.h6.lineHeight + "",
-        "--lineheight-text": theme.typography.text.lineHeight + "",
-        "--lineheight-button": theme.typography.button.lineHeight + "",
-        "--lineheight-small": theme.typography.small.lineHeight + "",
-
-        "--color-text": theme.colors.text.primary,
-        "--color-text-primary": theme.colors.text.primary,
-        "--color-text-secondary": theme.colors.text.secondary,
-
-        "--color-background": theme.colors.background.primary,
-        "--color-background-primary": theme.colors.background.primary,
-        "--color-background-secondary": theme.colors.background.secondary,
-        "--color-background-alpha": theme.colors.background.alpha,
-
-        "--color-divider": theme.colors.divider,
-
-        "--color-brand": theme.colors.brand.primary,
-        "--color-brand-primary": theme.colors.brand.primary,
-        "--color-brand-secondary": theme.colors.brand.secondary,
-        "--color-brand-alpha": theme.colors.brand.alpha,
-        "--color-brand-text": theme.colors.brand.text,
-
-        "--color-accent": theme.colors.accent.primary,
-        "--color-accent-primary": theme.colors.accent.primary,
-        "--color-accent-secondary": theme.colors.accent.secondary,
-        "--color-accent-alpha": theme.colors.accent.alpha,
-        "--color-accent-text": theme.colors.accent.text,
-
-        "--color-info": theme.colors.info.primary,
-        "--color-info-primary": theme.colors.info.primary,
-        "--color-info-secondary": theme.colors.info.secondary,
-        "--color-info-alpha": theme.colors.info.alpha,
-        "--color-info-text": theme.colors.info.text,
-
-        "--color-success": theme.colors.success.primary,
-        "--color-success-primary": theme.colors.success.primary,
-        "--color-success-secondary": theme.colors.success.secondary,
-        "--color-success-alpha": theme.colors.success.alpha,
-        "--color-success-text": theme.colors.success.text,
-
-        "--color-warning": theme.colors.warning.primary,
-        "--color-warning-primary": theme.colors.warning.primary,
-        "--color-warning-secondary": theme.colors.warning.secondary,
-        "--color-warning-alpha": theme.colors.warning.alpha,
-        "--color-warning-text": theme.colors.warning.text,
-
-        "--color-danger": theme.colors.danger.primary,
-        "--color-danger-primary": theme.colors.danger.primary,
-        "--color-danger-secondary": theme.colors.danger.secondary,
-        "--color-danger-alpha": theme.colors.danger.alpha,
-        "--color-danger-text": theme.colors.danger.text,
-        ...shadows,
-    }
-}
-
-
-export default ThemeCssVars

package/src/theme/ThemeDefaultOptions.ts

@@ -1,146 +0,0 @@
-import { ThemeOptionInput, ThemeTypographyType } from './types'
-
-export const lightColorPallete = {
-    text: {
-        primary: "#212B36",
-        secondary: "#637381",
-    },
-    background: {
-        primary: "#FFFFFF",
-        secondary: "#EDEFF7",
-    },
-    divider: "#DADCE0"
-}
-
-export const darkColorPallete = {
-    text: {
-        primary: "#FFFFFF",
-        secondary: "#C4CDD5",
-    },
-    background: {
-        primary: "#272727",
-        secondary: "#1E1E1E",
-    },
-    divider: "#3D3D3D"
-}
-
-export const ThemeColors = {
-    ...lightColorPallete,
-    brand: {
-        primary: "#3b82f6",
-        secondary: "#60a5fa",
-        text: "#FFFFFF"
-    },
-    accent: {
-        primary: "#14b8a6",
-        secondary: "#2dd4bf",
-        text: "#FFFFFF"
-    },
-    info: {
-        primary: "#0ea5e9",
-        secondary: "#60a5fa",
-        text: "#FFFFFF"
-    },
-    success: {
-        primary: "#22c55e",
-        secondary: "#4ade80",
-        text: "#FFFFFF"
-    },
-    warning: {
-        primary: "#f59e0b",
-        secondary: "#fbbf24",
-        text: "#FFFFFF"
-    },
-    danger: {
-        primary: "#ef4444",
-        secondary: "#f87171",
-        text: "#FFFFFF"
-    },
-}
-
-export const ThemeTypography: ThemeTypographyType = {
-    fontFamily: '"Inter",sans-serif,"Helvetica","Arial"',
-    h1: {
-        fontSize: 47.78,
-        lineHeight: 1.3,
-        fontWeight: 400,
-    },
-    h2: {
-        fontSize: 39.81,
-        lineHeight: 1.35,
-        fontWeight: 400,
-    },
-    h3: {
-        fontSize: 33.18,
-        lineHeight: 1.4,
-        fontWeight: 400,
-    },
-    h4: {
-        fontSize: 27.65,
-        lineHeight: 1.45,
-        fontWeight: 400,
-    },
-    h5: {
-        fontSize: 27.65,
-        lineHeight: 1.5,
-        fontWeight: 400,
-    },
-    h6: {
-        fontSize: 23.04,
-        lineHeight: 1.55,
-        fontWeight: 400,
-    },
-    text: {
-        fontSize: 16,
-        lineHeight: 1.6,
-        fontWeight: 400,
-    },
-    button: {
-        fontSize: 13.33,
-        lineHeight: 1.6,
-        fontWeight: 500,
-    },
-    small: {
-        fontSize: 12.33,
-        lineHeight: 1.6,
-        fontWeight: 400,
-    }
-}
-
-export const shadow = [
-    "none",
-    "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-    "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-    "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-    "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-    "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-    "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-    "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-    "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-    "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-    "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-    "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-    "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-    "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-    "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-    "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-    "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-    "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-    "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-]
-
-export default {
-    name: "light",
-    rtl: false,
-    shadow,
-    globalStyle: {},
-    colors: ThemeColors,
-    typography: ThemeTypography,
-    interfaces: {}
-} as ThemeOptionInput