@xqmsg/ui-core 0.23.1 → 0.23.2

package/src/theme/foundations/colors.ts

@@ -1,165 +1,165 @@
-export interface ColorHues {
-  50: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-  600: string;
-  700: string;
-  800: string;
-  900: string;
-}
-
-const blue: ColorHues = {
-  50: 'hsl(209, 100%, 95%)',
-  100: 'hsl(209, 100%, 90%)',
-  200: 'hsl(209, 100%, 80%)',
-  300: 'hsl(209, 100%, 70%)',
-  400: 'hsl(209, 100%, 60%)',
-  500: 'hsl(209, 100%, 50%)',
-  600: 'hsl(209, 100%, 40%)',
-  700: 'hsl(209, 100%, 30%)',
-  800: 'hsl(209, 100%, 20%)',
-  900: 'hsl(209, 100%, 10%)',
-};
-
-const red: ColorHues = {
-  50: 'hsl(0, 100%, 98%)',
-  100: 'hsl(0, 95%, 92%)',
-  200: 'hsl(0, 97%, 85%)',
-  300: 'hsl(0, 95%, 75%)',
-  400: 'hsl(0, 88%, 68%)',
-  500: 'hsl(0, 76%, 57%)',
-  600: 'hsl(0, 61%, 48%)',
-  700: 'hsl(0, 56%, 39%)',
-  800: 'hsl(0, 54%, 33%)',
-  900: 'hsl(357, 62%, 24%)',
-};
-
-const orange: ColorHues = {
-  50: 'hsl(40, 100%, 97%)',
-  100: 'hsl(39, 96%, 89%)',
-  200: 'hsl(38, 93%, 77%)',
-  300: 'hsl(33, 90%, 65%)',
-  400: 'hsl(27, 84%, 57%)',
-  500: 'hsl(24, 75%, 50%)',
-  600: 'hsl(20, 71%, 44%)',
-  700: 'hsl(16, 65%, 37%)',
-  800: 'hsl(14, 61%, 30%)',
-  900: 'hsl(14, 60%, 25%)',
-};
-
-const green: ColorHues = {
-  50: 'hsl(140, 60%, 96%)',
-  100: 'hsl(141, 65%, 92%)',
-  200: 'hsl(141, 63%, 88%)',
-  300: 'hsl(141, 64%, 80%)',
-  400: 'hsl(140, 64%, 73%)',
-  500: 'hsl(140, 64%, 61%)',
-  600: 'hsl(140, 42%, 48%)',
-  700: 'hsl(140, 42%, 36%)',
-  800: 'hsl(141, 42%, 24%)',
-  900: 'hsl(138, 42%, 6%)',
-};
-
-const label = {
-  primary: { light: '#000000', dark: '#FFFFFF' },
-  secondary: { light: '#3C3C4399' },
-  tertiary: { light: '', dark: '#EBEBF52E' },
-  error: '#FF0000',
-};
-
-const border = {
-  focus: '#3A6CD980',
-  default: '#D9D9D9',
-  light: '#99999919A',
-};
-
-const blur = {
-  quaternary: { light: '', dark: '#2A2A2A73' },
-  tertiary: { light: '', dark: '#111111A6' },
-};
-
-const fill = {
-  light: {
-    primary: '#74748033',
-    secondary: '#74748029',
-    tertiary: '#7474801F',
-    quaternary: '#7474800D',
-  },
-  success: '#d8f1b8',
-  error: '#ffbdb9',
-  warning: '#ffefb4',
-  action: '#0082ff',
-};
-
-const semantic = {
-  action: '#488ef7',
-  success: '#5fcf65',
-  warning: '#f8c352',
-  error: '#f96057',
-};
-
-export const colors = {
-  label,
-  blur,
-  border,
-  fill,
-  semantic,
-  transparent: 'transparent',
-  current: 'currentColor',
-  black: '#000000',
-  white: '#FFFFFF',
-  lightBlue: '#29abe2',
-  coolGray: '#F6F7FB',
-  darkBlue: '#292f4c',
-  backdrop: '#fbfcff',
-  whiteAlpha: {
-    50: 'rgba(255, 255, 255, 0.04)',
-    100: 'rgba(255, 255, 255, 0.06)',
-    200: 'rgba(255, 255, 255, 0.08)',
-    300: 'rgba(255, 255, 255, 0.16)',
-    400: 'rgba(255, 255, 255, 0.24)',
-    500: 'rgba(255, 255, 255, 0.36)',
-    600: 'rgba(255, 255, 255, 0.48)',
-    700: 'rgba(255, 255, 255, 0.64)',
-    800: 'rgba(255, 255, 255, 0.80)',
-    900: 'rgba(255, 255, 255, 0.92)',
-  },
-
-  blackAlpha: {
-    50: 'rgba(0, 0, 0, 0.04)',
-    100: 'rgba(0, 0, 0, 0.06)',
-    200: 'rgba(0, 0, 0, 0.08)',
-    300: 'rgba(0, 0, 0, 0.16)',
-    400: 'rgba(0, 0, 0, 0.24)',
-    500: 'rgba(0, 0, 0, 0.36)',
-    600: 'rgba(0, 0, 0, 0.48)',
-    700: 'rgba(0, 0, 0, 0.64)',
-    800: 'rgba(0, 0, 0, 0.80)',
-    900: 'rgba(0, 0, 0, 0.92)',
-  },
-
-  gray: {
-    50: 'hsl(240, 3%, 94%)',
-    100: 'hsl(210, 3%, 87%)',
-    200: 'hsl(220, 4%, 69%)', // #ADAFB3
-    300: 'hsl(225, 4%, 56%)',
-    400: 'hsl(222, 4%, 44%)',
-    500: 'hsl(224, 6%, 38%)',
-    600: 'hsl(227, 6%, 30%)',
-    700: 'hsl(230, 5%, 23%)', // #38393E
-    800: 'hsl(216, 6%, 15%)',
-    900: 'hsl(240, 5%, 4%)',
-  },
-
-  red,
-  orange,
-  green,
-  blue,
-};
-
-export type Colors = typeof colors;
-
-export default colors as Colors;
+export interface ColorHues {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+}
+
+const blue: ColorHues = {
+  50: 'hsl(209, 100%, 95%)',
+  100: 'hsl(209, 100%, 90%)',
+  200: 'hsl(209, 100%, 80%)',
+  300: 'hsl(209, 100%, 70%)',
+  400: 'hsl(209, 100%, 60%)',
+  500: 'hsl(209, 100%, 50%)',
+  600: 'hsl(209, 100%, 40%)',
+  700: 'hsl(209, 100%, 30%)',
+  800: 'hsl(209, 100%, 20%)',
+  900: 'hsl(209, 100%, 10%)',
+};
+
+const red: ColorHues = {
+  50: 'hsl(0, 100%, 98%)',
+  100: 'hsl(0, 95%, 92%)',
+  200: 'hsl(0, 97%, 85%)',
+  300: 'hsl(0, 95%, 75%)',
+  400: 'hsl(0, 88%, 68%)',
+  500: 'hsl(0, 76%, 57%)',
+  600: 'hsl(0, 61%, 48%)',
+  700: 'hsl(0, 56%, 39%)',
+  800: 'hsl(0, 54%, 33%)',
+  900: 'hsl(357, 62%, 24%)',
+};
+
+const orange: ColorHues = {
+  50: 'hsl(40, 100%, 97%)',
+  100: 'hsl(39, 96%, 89%)',
+  200: 'hsl(38, 93%, 77%)',
+  300: 'hsl(33, 90%, 65%)',
+  400: 'hsl(27, 84%, 57%)',
+  500: 'hsl(24, 75%, 50%)',
+  600: 'hsl(20, 71%, 44%)',
+  700: 'hsl(16, 65%, 37%)',
+  800: 'hsl(14, 61%, 30%)',
+  900: 'hsl(14, 60%, 25%)',
+};
+
+const green: ColorHues = {
+  50: 'hsl(140, 60%, 96%)',
+  100: 'hsl(141, 65%, 92%)',
+  200: 'hsl(141, 63%, 88%)',
+  300: 'hsl(141, 64%, 80%)',
+  400: 'hsl(140, 64%, 73%)',
+  500: 'hsl(140, 64%, 61%)',
+  600: 'hsl(140, 42%, 48%)',
+  700: 'hsl(140, 42%, 36%)',
+  800: 'hsl(141, 42%, 24%)',
+  900: 'hsl(138, 42%, 6%)',
+};
+
+const label = {
+  primary: { light: '#000000', dark: '#FFFFFF' },
+  secondary: { light: '#3C3C4399' },
+  tertiary: { light: '', dark: '#EBEBF52E' },
+  error: '#FF0000',
+};
+
+const border = {
+  focus: '#3A6CD980',
+  default: '#D9D9D9',
+  light: '#99999919A',
+};
+
+const blur = {
+  quaternary: { light: '', dark: '#2A2A2A73' },
+  tertiary: { light: '', dark: '#111111A6' },
+};
+
+const fill = {
+  light: {
+    primary: '#74748033',
+    secondary: '#74748029',
+    tertiary: '#7474801F',
+    quaternary: '#7474800D',
+  },
+  success: '#d8f1b8',
+  error: '#ffbdb9',
+  warning: '#ffefb4',
+  action: '#0082ff',
+};
+
+const semantic = {
+  action: '#488ef7',
+  success: '#5fcf65',
+  warning: '#f8c352',
+  error: '#f96057',
+};
+
+export const colors = {
+  label,
+  blur,
+  border,
+  fill,
+  semantic,
+  transparent: 'transparent',
+  current: 'currentColor',
+  black: '#000000',
+  white: '#FFFFFF',
+  lightBlue: '#29abe2',
+  coolGray: '#F6F7FB',
+  darkBlue: '#292f4c',
+  backdrop: '#fbfcff',
+  whiteAlpha: {
+    50: 'rgba(255, 255, 255, 0.04)',
+    100: 'rgba(255, 255, 255, 0.06)',
+    200: 'rgba(255, 255, 255, 0.08)',
+    300: 'rgba(255, 255, 255, 0.16)',
+    400: 'rgba(255, 255, 255, 0.24)',
+    500: 'rgba(255, 255, 255, 0.36)',
+    600: 'rgba(255, 255, 255, 0.48)',
+    700: 'rgba(255, 255, 255, 0.64)',
+    800: 'rgba(255, 255, 255, 0.80)',
+    900: 'rgba(255, 255, 255, 0.92)',
+  },
+
+  blackAlpha: {
+    50: 'rgba(0, 0, 0, 0.04)',
+    100: 'rgba(0, 0, 0, 0.06)',
+    200: 'rgba(0, 0, 0, 0.08)',
+    300: 'rgba(0, 0, 0, 0.16)',
+    400: 'rgba(0, 0, 0, 0.24)',
+    500: 'rgba(0, 0, 0, 0.36)',
+    600: 'rgba(0, 0, 0, 0.48)',
+    700: 'rgba(0, 0, 0, 0.64)',
+    800: 'rgba(0, 0, 0, 0.80)',
+    900: 'rgba(0, 0, 0, 0.92)',
+  },
+
+  gray: {
+    50: 'hsl(240, 3%, 94%)',
+    100: 'hsl(210, 3%, 87%)',
+    200: 'hsl(220, 4%, 69%)', // #ADAFB3
+    300: 'hsl(225, 4%, 56%)',
+    400: 'hsl(222, 4%, 44%)',
+    500: 'hsl(224, 6%, 38%)',
+    600: 'hsl(227, 6%, 30%)',
+    700: 'hsl(230, 5%, 23%)', // #38393E
+    800: 'hsl(216, 6%, 15%)',
+    900: 'hsl(240, 5%, 4%)',
+  },
+
+  red,
+  orange,
+  green,
+  blue,
+};
+
+export type Colors = typeof colors;
+
+export default colors as Colors;

package/src/theme/foundations/shadows.ts

@@ -1,23 +1,23 @@
-import colors from './colors';
-
-const shadows = {
-  xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
-  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-  base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-  xl:
-    '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-  insetOutline: `inset 0 0 0 2px ${colors.fill.action}`,
-  outline: `0 0 0 2px ${colors.fill.action}`,
-  outlineDanger600: `0 0 0 2px ${colors.fill.error}`,
-  inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
-  none: 'none',
-  'dark-lg':
-    'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px',
-};
-
-export type Shadows = typeof shadows;
-
-export default shadows;
+import colors from './colors';
+
+const shadows = {
+  xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
+  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+  base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  xl:
+    '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+  insetOutline: `inset 0 0 0 2px ${colors.fill.action}`,
+  outline: `0 0 0 2px ${colors.fill.action}`,
+  outlineDanger600: `0 0 0 2px ${colors.fill.error}`,
+  inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+  none: 'none',
+  'dark-lg':
+    'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px',
+};
+
+export type Shadows = typeof shadows;
+
+export default shadows;

package/src/theme/foundations/typography.ts

@@ -1,62 +1,62 @@
-const typography = {
-  letterSpacings: {
-    tighter: '-0.05em',
-    tight: '-0.025em',
-    normal: '0',
-    wide: '0.025em',
-    wider: '0.05em',
-    widest: '0.1em',
-  },
-
-  lineHeights: {
-    normal: 'normal',
-    none: 1,
-    shorter: 1.25,
-    short: 1.375,
-    base: 1.5,
-    tall: 1.625,
-    taller: '2',
-    '3': '.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '7': '1.75rem',
-    '8': '2rem',
-    '9': '2.25rem',
-    '10': '2.5rem',
-  },
-
-  fontWeights: {
-    hairline: 100,
-    thin: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800,
-    black: 900,
-  },
-
-  fonts: {
-    base: `proxima-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
-    mono: `SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace`,
-  },
-
-  fontSizes: {
-    xs: '0.75rem',
-    sm: '0.875rem',
-    md: '1rem',
-    lg: '1.125rem',
-    xl: '1.25rem',
-    '2xl': '1.5rem',
-    '3xl': '1.875rem',
-    '4xl': '2.25rem',
-    '5xl': '3rem',
-    '6xl': '4rem',
-  },
-};
-
-export type Typography = typeof typography;
-
-export default typography;
+const typography = {
+  letterSpacings: {
+    tighter: '-0.05em',
+    tight: '-0.025em',
+    normal: '0',
+    wide: '0.025em',
+    wider: '0.05em',
+    widest: '0.1em',
+  },
+
+  lineHeights: {
+    normal: 'normal',
+    none: 1,
+    shorter: 1.25,
+    short: 1.375,
+    base: 1.5,
+    tall: 1.625,
+    taller: '2',
+    '3': '.75rem',
+    '4': '1rem',
+    '5': '1.25rem',
+    '6': '1.5rem',
+    '7': '1.75rem',
+    '8': '2rem',
+    '9': '2.25rem',
+    '10': '2.5rem',
+  },
+
+  fontWeights: {
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+  },
+
+  fonts: {
+    base: `proxima-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+    mono: `SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace`,
+  },
+
+  fontSizes: {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    md: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem',
+    '5xl': '3rem',
+    '6xl': '4rem',
+  },
+};
+
+export type Typography = typeof typography;
+
+export default typography;

package/src/theme/provider/index.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/provider';
-import customXQChakraTheme from '../customXQChakraTheme';
-
-/**
- * A functional React wrapper component utilized to consume the custom XQ theme via `ChakraProvider`
- */
-export const XQThemeProvider: React.FC<ChakraProviderProps> = ({
-  children,
-  cssVarsRoot,
-}) => {
-  return (
-    <ChakraProvider
-      theme={customXQChakraTheme}
-      resetCSS
-      cssVarsRoot={cssVarsRoot}
-    >
-      {children}
-    </ChakraProvider>
-  );
-};
+import React from 'react';
+import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/provider';
+import customXQChakraTheme from '../customXQChakraTheme';
+
+/**
+ * A functional React wrapper component utilized to consume the custom XQ theme via `ChakraProvider`
+ */
+export const XQThemeProvider: React.FC<ChakraProviderProps> = ({
+  children,
+  cssVarsRoot,
+}) => {
+  return (
+    <ChakraProvider
+      theme={customXQChakraTheme}
+      resetCSS
+      cssVarsRoot={cssVarsRoot}
+    >
+      {children}
+    </ChakraProvider>
+  );
+};

package/src/theme/styles.ts

@@ -1,19 +1,19 @@
-export default {
-  global: {
-    'html, body, #root': {},
-    body: {
-      fontFamily: 'body',
-      color: 'black',
-      overflow: {
-        base: 'visible',
-      },
-      lineHeight: 'normal',
-    },
-    '*, *::before, *::after': {
-      borderColor: 'gray.200',
-    },
-    '*::placeholder': {
-      color: 'primary',
-    },
-  },
-};
+export default {
+  global: {
+    'html, body, #root': {},
+    body: {
+      fontFamily: 'body',
+      color: 'black',
+      overflow: {
+        base: 'visible',
+      },
+      lineHeight: 'normal',
+    },
+    '*, *::before, *::after': {
+      borderColor: 'gray.200',
+    },
+    '*::placeholder': {
+      color: 'primary',
+    },
+  },
+};