@mohammadsalman/storybook-custom-ui 1.0.0 → 1.0.2

package/src/theme/defaultTheme.ts

@@ -1,182 +0,0 @@
-import { Theme, PaletteColor } from './types';
-
-const createPaletteColor = (main: string, light: string, dark: string): PaletteColor => ({
-  50: light,
-  100: light,
-  200: light,
-  300: main,
-  400: main,
-  500: main,
-  600: main,
-  700: dark,
-  800: dark,
-  900: dark,
-});
-
-export const defaultTheme: Theme = {
-  mode: 'light',
-  palette: {
-    primary: createPaletteColor('#1976d2', '#42a5f5', '#1565c0'),
-    secondary: createPaletteColor('#9c27b0', '#ba68c8', '#7b1fa2'),
-    success: createPaletteColor('#2e7d32', '#66bb6a', '#1b5e20'),
-    error: createPaletteColor('#d32f2f', '#ef5350', '#c62828'),
-    warning: createPaletteColor('#ed6c02', '#ff9800', '#e65100'),
-    info: createPaletteColor('#0288d1', '#42a5f5', '#01579b'),
-    grey: {
-      50: '#fafafa',
-      100: '#f5f5f5',
-      200: '#eeeeee',
-      300: '#e0e0e0',
-      400: '#bdbdbd',
-      500: '#9e9e9e',
-      600: '#757575',
-      700: '#616161',
-      800: '#424242',
-      900: '#212121',
-    },
-    text: {
-      primary: 'rgba(0, 0, 0, 0.87)',
-      secondary: 'rgba(0, 0, 0, 0.6)',
-      disabled: 'rgba(0, 0, 0, 0.38)',
-    },
-    background: {
-      default: '#ffffff',
-      paper: '#ffffff',
-    },
-    divider: 'rgba(0, 0, 0, 0.12)',
-    action: {
-      active: 'rgba(0, 0, 0, 0.54)',
-      hover: 'rgba(0, 0, 0, 0.04)',
-      selected: 'rgba(0, 0, 0, 0.08)',
-      disabled: 'rgba(0, 0, 0, 0.26)',
-      disabledBackground: 'rgba(0, 0, 0, 0.12)',
-    },
-  },
-  typography: {
-    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-    fontSize: 14,
-    fontWeightLight: 300,
-    fontWeightRegular: 400,
-    fontWeightMedium: 500,
-    fontWeightBold: 700,
-    h1: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 300,
-      fontSize: '6rem',
-      lineHeight: '1.167',
-      letterSpacing: '-0.01562em',
-    },
-    h2: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 300,
-      fontSize: '3.75rem',
-      lineHeight: '1.2',
-      letterSpacing: '-0.00833em',
-    },
-    h3: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '3rem',
-      lineHeight: '1.167',
-      letterSpacing: '0em',
-    },
-    h4: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '2.125rem',
-      lineHeight: '1.235',
-      letterSpacing: '0.00735em',
-    },
-    h5: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '1.5rem',
-      lineHeight: '1.334',
-      letterSpacing: '0em',
-    },
-    h6: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 500,
-      fontSize: '1.25rem',
-      lineHeight: '1.6',
-      letterSpacing: '0.0075em',
-    },
-    subtitle1: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '1rem',
-      lineHeight: '1.75',
-      letterSpacing: '0.00938em',
-    },
-    subtitle2: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 500,
-      fontSize: '0.875rem',
-      lineHeight: '1.57',
-      letterSpacing: '0.00714em',
-    },
-    body1: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '1rem',
-      lineHeight: '1.5',
-      letterSpacing: '0.00938em',
-    },
-    body2: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '0.875rem',
-      lineHeight: '1.43',
-      letterSpacing: '0.01071em',
-    },
-    button: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 500,
-      fontSize: '0.875rem',
-      lineHeight: '1.75',
-      letterSpacing: '0.02857em',
-    },
-    caption: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '0.75rem',
-      lineHeight: '1.66',
-      letterSpacing: '0.03333em',
-    },
-    overline: {
-      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeight: 400,
-      fontSize: '0.75rem',
-      lineHeight: '2.66',
-      letterSpacing: '0.08333em',
-    },
-  },
-  spacing: {
-    unit: 8,
-  },
-  shape: {
-    borderRadius: 4,
-  },
-  shadows: {
-    0: 'none',
-    1: '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)',
-    2: '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)',
-    3: '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)',
-    4: '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)',
-    5: '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)',
-    6: '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)',
-    8: '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)',
-    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)',
-    16: '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)',
-    24: '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)',
-  },
-  zIndex: {
-    mobileStepper: 1000,
-    speedDial: 1050,
-    appBar: 1100,
-    drawer: 1200,
-    modal: 1300,
-    snackbar: 1400,
-    tooltip: 1500,
-  },
-};

package/src/theme/index.ts

@@ -1,3 +0,0 @@
-export * from './types';
-export * from './ThemeProvider';
-export * from './defaultTheme';

package/src/theme/types.ts

@@ -1,106 +0,0 @@
-export type ThemeMode = 'light' | 'dark';
-
-export interface PaletteColor {
-  50: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-  600: string;
-  700: string;
-  800: string;
-  900: string;
-}
-
-export interface Palette {
-  primary: PaletteColor;
-  secondary: PaletteColor;
-  success: PaletteColor;
-  error: PaletteColor;
-  warning: PaletteColor;
-  info: PaletteColor;
-  grey: PaletteColor;
-  text: {
-    primary: string;
-    secondary: string;
-    disabled: string;
-  };
-  background: {
-    default: string;
-    paper: string;
-  };
-  divider: string;
-  action: {
-    active: string;
-    hover: string;
-    selected: string;
-    disabled: string;
-    disabledBackground: string;
-  };
-}
-
-export interface Typography {
-  fontFamily: string;
-  fontSize: number;
-  fontWeightLight: number;
-  fontWeightRegular: number;
-  fontWeightMedium: number;
-  fontWeightBold: number;
-  h1: TypographyVariant;
-  h2: TypographyVariant;
-  h3: TypographyVariant;
-  h4: TypographyVariant;
-  h5: TypographyVariant;
-  h6: TypographyVariant;
-  subtitle1: TypographyVariant;
-  subtitle2: TypographyVariant;
-  body1: TypographyVariant;
-  body2: TypographyVariant;
-  button: TypographyVariant;
-  caption: TypographyVariant;
-  overline: TypographyVariant;
-}
-
-export interface TypographyVariant {
-  fontFamily: string;
-  fontWeight: number;
-  fontSize: string;
-  lineHeight: string;
-  letterSpacing: string;
-}
-
-export interface Spacing {
-  unit: number;
-}
-
-export interface Shape {
-  borderRadius: number;
-}
-
-export interface Shadows {
-  [key: number]: string;
-}
-
-export interface Theme {
-  mode: ThemeMode;
-  palette: Palette;
-  typography: Typography;
-  spacing: Spacing;
-  shape: Shape;
-  shadows: Shadows;
-  zIndex: {
-    mobileStepper: number;
-    speedDial: number;
-    appBar: number;
-    drawer: number;
-    modal: number;
-    snackbar: number;
-    tooltip: number;
-  };
-}
-
-export type ThemeProviderProps = {
-  theme: Theme;
-  children: React.ReactNode;
-};

package/src/utils/styles.ts

@@ -1,15 +0,0 @@
-import { Theme } from '../theme/types';
-
-export const spacing = (theme: Theme, ...values: number[]): string => {
-  return values.map(value => `${value * theme.spacing.unit}px`).join(' ');
-};
-
-export const getColor = (
-  theme: Theme,
-  color: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info',
-  shade: keyof Theme['palette']['primary'] = 500
-): string => {
-  return theme.palette[color][shade];
-};
-
-export const css = (styles: React.CSSProperties): React.CSSProperties => styles;