norma-library 0.6.5 → 0.6.61

package/src/helpers/colors.ts

@@ -1,258 +1,298 @@
-import { createTheme, PaletteOptions } from '@mui/material/styles';
-
-export const getPalette = () => {
-  return {
-    primary: '#db6619',
-    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,
-    '500': palette.primaryMedium,
-  },
-  secondary: {
-    main: palette.secondary,
-    light: palette.secondaryLight,
-    dark: palette.secondaryDark,
-    '500': palette.secondaryMedium,
-  },
-  error: {
-    main: palette.error,
-    light: palette.errorLight,
-    dark: palette.errorDark,
-    '500': palette.errorMedium,
-  },
-  warning: {
-    main: palette.warning,
-    light: palette.warningLight,
-    dark: palette.warningDark,
-    '500': palette.warningMedium,
-  },
-  info: {
-    main: palette.inherit,
-    light: palette.inheritLight,
-    dark: palette.inheritDark,
-    '500': palette.inheritMedium,
-  },
-  success: {
-    main: palette.success,
-    light: palette.successLight,
-    dark: palette.successDark,
-    '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) => {
-  console.log('RGB ==> ', rgbString);
-  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 };
+import { createTheme, PaletteOptions } from '@mui/material/styles';
+
+export const getPalette = () => {
+  return {
+    primary: '#db6619',
+    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 getPaletteV2 = () => {
+  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 paletteV2 = getPaletteV2();
+
+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: paletteV2.primary,
+    light: paletteV2.primaryLight,
+    dark: paletteV2.primaryDark,
+    '500': paletteV2.primaryMedium,
+  },
+  secondary: {
+    main: paletteV2.secondary,
+    light: paletteV2.secondaryLight,
+    dark: paletteV2.secondaryDark,
+    '500': paletteV2.secondaryMedium,
+  },
+  error: {
+    main: paletteV2.error,
+    light: paletteV2.errorLight,
+    dark: paletteV2.errorDark,
+    '500': paletteV2.errorMedium,
+  },
+  warning: {
+    main: paletteV2.warning,
+    light: paletteV2.warningLight,
+    dark: paletteV2.warningDark,
+    '500': paletteV2.warningMedium,
+  },
+  info: {
+    main: paletteV2.inherit,
+    light: paletteV2.inheritLight,
+    dark: paletteV2.inheritDark,
+    '500': paletteV2.inheritMedium,
+  },
+  success: {
+    main: paletteV2.success,
+    light: paletteV2.successLight,
+    dark: paletteV2.successDark,
+    '500': paletteV2.successMedium,
+  },
+  text: {
+    primary: paletteV2.black,
+    secondary: paletteV2.primary,
+    disabled: paletteV2.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) => {
+  console.log('RGB ==> ', rgbString);
+  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 };

package/src/helpers/index.ts

@@ -1,5 +1,5 @@
-export * from './borders';
-export * from './colors';
-export * from './sizes';
-export * from './radios';
-export * from './alignments';
+export * from './borders';
+export * from './colors';
+export * from './sizes';
+export * from './radios';
+export * from './alignments';

package/src/helpers/radios.ts

@@ -1,24 +1,24 @@
-function getRadioSize(radio: string) {
-  switch (radio) {
-    case 'none':
-      return 'rounded-none';
-    case 'xs':
-      return 'rounded-xs';
-    case 'sm':
-      return 'rounded-sm';
-    case 'md':
-      return 'rounded-md';
-    case 'lg':
-      return 'rounded-lg';
-    case 'xl':
-      return 'rounded-xl';
-    case 'xll':
-      return 'rounded-2xl';
-    case 'full':
-      return 'rounded-full';
-    default:
-      return 'rounded-none';
-  }
-}
-
-export { getRadioSize };
+function getRadioSize(radio: string) {
+  switch (radio) {
+    case 'none':
+      return 'rounded-none';
+    case 'xs':
+      return 'rounded-xs';
+    case 'sm':
+      return 'rounded-sm';
+    case 'md':
+      return 'rounded-md';
+    case 'lg':
+      return 'rounded-lg';
+    case 'xl':
+      return 'rounded-xl';
+    case 'xll':
+      return 'rounded-2xl';
+    case 'full':
+      return 'rounded-full';
+    default:
+      return 'rounded-none';
+  }
+}
+
+export { getRadioSize };