norma-library/src/helpers/colors.ts

Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.

import { createTheme, PaletteOptions } from '@mui/material/styles';

export const getPalette = () => {
  return {
    primary: '#fc7f29',
    primaryLight: '#FFDB9F',
    primaryMedium: '#FFA84C',
    primaryDark: '#B74608',
    inherit: '#666666',
    secondary: '#43bbf2',
    error: '#d63643',
    warning: '#ffc300',
    info: '#71d5f7',
    success: '#6bc235',
    white: '#ffffff',
    black: '#000000',
    helper: '#5a2a79',
    secondaryLight: '#D9FCFE',
    secondaryMedium: '#71D5F7',
    secondaryDark: '#154F8C',
    inheritLight: '#A3A3A3',
    inheritMedium: '#666666',
    inheritDark: '#292929',
    whiteLight: '#F5F5F5',
    whiteMedium: '#E0E0E0',
    whiteDark: '#CCCCCC',
    successLight: '#D9F8B0',
    successMedium: '#B9EC85',
    successDark: '#247010',
    errorLight: '#FABEAF',
    errorMedium: '#F29085',
    errorDark: '#F29085',
    warningLight: '#FFF7CC',
    warningMedium: '#FFE266',
    warningDark: '#936600',
    helperLight: '#F3D7F8',
    helperMedium: '#BF82D6',
    helperDark: '#250D46',
  };
};

export const palette = getPalette();

export const textColors = {
  inherit: palette.inherit,
  primary: palette.primary,
  secondary: palette.secondary,
  error: palette.error,
  warning: palette.warning,
  info: palette.info,
  success: palette.success,
  white: palette.white,
  black: palette.black,
  helper: palette.helper,
  primaryLight: palette.primaryLight,
  primaryMedium: palette.primaryMedium,
  primaryDark: palette.primaryDark,
  secondaryLight: palette.secondaryLight,
  secondaryMedium: palette.secondaryMedium,
  secondaryDark: palette.secondaryDark,
  inheritLight: palette.inheritLight,
  inheritMedium: palette.inheritMedium,
  inheritDark: palette.inheritDark,
  whiteLight: palette.whiteLight,
  whiteMedium: palette.whiteMedium,
  whiteDark: palette.whiteDark,
  successLight: palette.successLight,
  successMedium: palette.successMedium,
  successDark: palette.successDark,
  errorLight: palette.errorLight,
  errorMedium: palette.errorMedium,
  errorDark: palette.errorDark,
  warningLight: palette.warningLight,
  warningMedium: palette.warningMedium,
  warningDark: palette.warningDark,
  helperLight: palette.helperLight,
  helperMedium: palette.helperMedium,
  helperDark: palette.helperDark,
};

export const backgroundColors = {
  inherit: palette.inherit,
  primary: palette.primary,
  secondary: palette.secondary,
  error: palette.error,
  warning: palette.warning,
  info: palette.info,
  success: palette.success,
  white: palette.white,
  black: palette.black,
  primaryLight: palette.primaryLight,
  primaryMedium: palette.primaryMedium,
  primaryDark: palette.primaryDark,
  secondaryLight: palette.secondaryLight,
  secondaryMedium: palette.secondaryMedium,
  secondaryDark: palette.secondaryDark,
  inheritLight: palette.inheritLight,
  inheritMedium: palette.inheritMedium,
  inheritDark: palette.inheritDark,
  whiteLight: palette.whiteLight,
  whiteMedium: palette.whiteMedium,
  whiteDark: palette.whiteDark,
  successLight: palette.successLight,
  successMedium: palette.successMedium,
  successDark: palette.successDark,
  errorLight: palette.errorLight,
  errorMedium: palette.errorMedium,
  errorDark: palette.errorDark,
  warningLight: palette.warningLight,
  warningMedium: palette.warningMedium,
  warningDark: palette.warningDark,
  helperLight: palette.helperLight,
  helperMedium: palette.helperMedium,
  helperDark: palette.helperDark,
};

export const olosPalette = {
  primary: {
    main: palette.primary,
  },
  secondary: {
    main: palette.secondary,
  },
  error: {
    main: palette.error,
  },
  warning: {
    main: palette.warning,
  },
  info: {
    main: palette.info,
  },
  success: {
    main: palette.success,
  },
};

export const newOlosPalette: PaletteOptions = {
  primary: {
    main: palette.primary,
    light: palette.primaryLight,
    dark: palette.primaryDark,
    contrastText: palette.white,
    '500': palette.primaryMedium,
  },
  secondary: {
    main: palette.secondary,
    light: palette.secondaryLight,
    dark: palette.secondaryDark,
    contrastText: palette.white,
    '500': palette.secondaryMedium,
  },
  error: {
    main: palette.error,
    light: palette.errorLight,
    dark: palette.errorDark,
    contrastText: palette.white,
    '500': palette.errorMedium,
  },
  warning: {
    main: palette.warning,
    light: palette.warningLight,
    dark: palette.warningDark,
    contrastText: palette.white,
    '500': palette.warningMedium,
  },
  info: {
    main: palette.inherit,
    light: palette.inheritLight,
    dark: palette.inheritDark,
    contrastText: palette.white,
    '500': palette.inheritMedium,
  },
  success: {
    main: palette.success,
    light: palette.successLight,
    dark: palette.successDark,
    contrastText: palette.white,
    '500': palette.successMedium,
  },
  text: {
    primary: palette.black,
    secondary: palette.primary,
    disabled: palette.inherit,
  }
};

export const lightTheme = createTheme({
  palette: {
    mode: 'light',
    ...olosPalette,
  },
});

export const newLightTheme = createTheme({
  palette: {
    mode: 'light',
    ...newOlosPalette,
  },
});

export const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    ...olosPalette,
    background: {
      default: palette.inheritLight,
      paper: palette.inheritDark,
    },
  },
});

export const themes = {
  light: lightTheme,
  dark: darkTheme,
  newLight: newLightTheme,
};

type PaletteKey = keyof typeof getPalette;

const getColor = (key: PaletteKey) => {
  const palette = getPalette();
  if (palette.hasOwnProperty(key)) {
    return palette[key];
  } else {
    return '#CCC';
  }
};

const extractRGB = (rgbString: string) => {
  if (typeof rgbString === 'string') {
    const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);

    if (match) {
      const r = match[1];
      const g = match[2];
      const b = match[3];
      return `${r},${g},${b}`;
    }
  }
  return null;
};

const lightenRGB = (rgbString: string, amount = 20) => {
  if (typeof rgbString === 'string') {
    const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);

    if (match) {
      const r = parseInt(match[1]);
      const g = parseInt(match[2]);
      const b = parseInt(match[3]);

      const newR = Math.min(255, r + amount);
      const newG = Math.min(255, g + amount);
      const newB = Math.min(255, b + amount);

      return `rgb(${newR},${newG},${newB})`;
    }
  }
  return null;
};

export { getColor, extractRGB, lightenRGB };