@grupalia/rn-ui-kit 0.0.1

package/src/styles/colors.ts

@@ -0,0 +1,383 @@
+export default {
+  base: {
+    white: '#FFFFFF',
+    black: '#000000',
+    transparent: '#FFFFFF00',
+  },
+  gray_light: {
+    25: '#FDFDFD',
+    50: '#FAFAFA',
+    100: '#F5F5F5',
+    200: '#E9EAEB',
+    300: '#D5D7DA',
+    400: '#A4A7AE',
+    500: '#717680',
+    600: '#535862',
+    700: '#414651',
+    800: '#252B37',
+    900: '#181D27',
+    950: '#0A0D12',
+  },
+  gray_dark: {
+    25: '#FAFAFA',
+    50: '#F7F7F7',
+    100: '#F0F0F1',
+    200: '#ECECED',
+    300: '#CECFD2',
+    400: '#94979C',
+    500: '#85888E',
+    600: '#61656C',
+    700: '#373A41',
+    800: '#22262F',
+    900: '#13161B',
+    950: '#0C0E12',
+  },
+  brand: {
+    25: '#FCFAFF',
+    50: '#F9F5FF',
+    100: '#F4EBFF',
+    200: '#E9D7FE',
+    300: '#D6BBFB',
+    400: '#B692F6',
+    500: '#9E77ED',
+    600: '#7F56D9',
+    700: '#6941C6',
+    800: '#53389E',
+    900: '#42307D',
+    950: '#2C1C5F',
+  },
+  error: {
+    25: '#FFFBFA',
+    50: '#FEF3F2',
+    100: '#FEE4E2',
+    200: '#FECDCA',
+    300: '#FDA29B',
+    400: '#F97066',
+    500: '#F04438',
+    600: '#D92D20',
+    700: '#B42318',
+    800: '#912018',
+    900: '#7A271A',
+    950: '#55160C',
+  },
+  warning: {
+    25: '#FFFCF5',
+    50: '#FFFAEB',
+    100: '#FEF0C7',
+    200: '#FEDF89',
+    300: '#FEC84B',
+    400: '#FDB022',
+    500: '#F79009',
+    600: '#DC6803',
+    700: '#B54708',
+    800: '#93370D',
+    900: '#7A2E0E',
+    950: '#4E1D09',
+  },
+  success: {
+    25: '#F6FEF9',
+    50: '#ECFDF3',
+    100: '#DCFAE6',
+    200: '#ABEFC6',
+    300: '#75E0A7',
+    400: '#47CD89',
+    500: '#17B26A',
+    600: '#079455',
+    700: '#067647',
+    800: '#085D3A',
+    900: '#074D31',
+    950: '#053321',
+  },
+  gray_blue: {
+    25: '#FCFDFE',
+    50: '#F8F9FB',
+    100: '#F0F2F5',
+    200: '#E4E7EC',
+    300: '#D0D5DD',
+    400: '#98A2B3',
+    500: '#667085',
+    600: '#475467',
+    700: '#344054',
+    800: '#1D2939',
+    900: '#101828',
+    950: '#0C111D',
+  },
+  gray_cool: {
+    25: '#FCFCFD',
+    50: '#F9FAFB',
+    100: '#F2F4F7',
+    200: '#EAECF0',
+    300: '#D0D5DD',
+    400: '#98A2B3',
+    500: '#667085',
+    600: '#475467',
+    700: '#344054',
+    800: '#1D2939',
+    900: '#101828',
+    950: '#0C111D',
+  },
+  gray_modern: {
+    25: '#FCFCFC',
+    50: '#FAFAFA',
+    100: '#F5F5F5',
+    200: '#E5E5E5',
+    300: '#D4D4D4',
+    400: '#A3A3A3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717',
+    950: '#0A0A0A',
+  },
+  gray_iron: {
+    25: '#FCFCFC',
+    50: '#F9FAFA',
+    100: '#F1F2F4',
+    200: '#E4E5E7',
+    300: '#CFD1D6',
+    400: '#9CA0AB',
+    500: '#6D7380',
+    600: '#545964',
+    700: '#3D414A',
+    800: '#282B31',
+    900: '#1A1D21',
+    950: '#0F1014',
+  },
+  gray_true: {
+    25: '#FCFCFC',
+    50: '#FAFAFA',
+    100: '#F5F5F5',
+    200: '#E5E5E5',
+    300: '#D4D4D4',
+    400: '#A3A3A3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717',
+    950: '#0A0A0A',
+  },
+  gray_warm: {
+    25: '#FDFDFC',
+    50: '#FAF9F8',
+    100: '#F6F3F1',
+    200: '#E7E5E4',
+    300: '#D6D3D1',
+    400: '#A8A29E',
+    500: '#78716C',
+    600: '#57534E',
+    700: '#44403C',
+    800: '#292524',
+    900: '#1C1917',
+    950: '#0C0A09',
+  },
+  moss: {
+    25: '#FBFDFB',
+    50: '#F5FAF5',
+    100: '#EBF6EC',
+    200: '#DAF0DB',
+    300: '#BFE1C1',
+    400: '#9FD0A1',
+    500: '#77BA79',
+    600: '#55A459',
+    700: '#3F7D42',
+    800: '#336635',
+    900: '#2C542E',
+    950: '#1B351D',
+  },
+  green_light: {
+    25: '#FBFEFC',
+    50: '#F6FEF9',
+    100: '#EDFCF2',
+    200: '#DCFCE7',
+    300: '#BBF7D0',
+    400: '#86EFAC',
+    500: '#4ADE80',
+    600: '#22C55E',
+    700: '#15803D',
+    800: '#166534',
+    900: '#14532D',
+    950: '#052E16',
+  },
+  green: {
+    25: '#F7FDF9',
+    50: '#EFFCF4',
+    100: '#D5F8E3',
+    200: '#ADEEC9',
+    300: '#76E4A8',
+    400: '#48D88C',
+    500: '#12B76A',
+    600: '#039855',
+    700: '#027A48',
+    800: '#05603A',
+    900: '#054F31',
+    950: '#013220',
+  },
+  teal: {
+    25: '#F5FDFF',
+    50: '#F0FAFA',
+    100: '#CDF4F8',
+    200: '#A6E9F1',
+    300: '#6EDCE8',
+    400: '#3EC9DA',
+    500: '#06AED4',
+    600: '#008DBB',
+    700: '#027092',
+    800: '#085B76',
+    900: '#094C62',
+    950: '#053342',
+  },
+  blue_light: {
+    25: '#F5FAFF',
+    50: '#EFF8FF',
+    100: '#D1E9FF',
+    200: '#B2DDFF',
+    300: '#84CAFF',
+    400: '#53B1FD',
+    500: '#2997FF',
+    600: '#0072EF',
+    700: '#0056C1',
+    800: '#004094',
+    900: '#003579',
+    950: '#002554',
+  },
+  blue: {
+    25: '#F5F9FF',
+    50: '#EFF4FF',
+    100: '#D1E0FF',
+    200: '#B4CDFF',
+    300: '#84ADFF',
+    400: '#528BFF',
+    500: '#2E73FF',
+    600: '#155EEF',
+    700: '#004EEB',
+    800: '#0040C1',
+    900: '#003197',
+    950: '#001F60',
+  },
+  blue_dark: {
+    25: '#F4F8FF',
+    50: '#EEF4FF',
+    100: '#DCE7FF',
+    200: '#C3D4FE',
+    300: '#A1BBFD',
+    400: '#7F9DFD',
+    500: '#6172F3',
+    600: '#444CE7',
+    700: '#3538CD',
+    800: '#2D31A6',
+    900: '#2D3282',
+    950: '#1C2557',
+  },
+  indigo: {
+    25: '#F5F8FF',
+    50: '#EEF4FF',
+    100: '#E0EAFF',
+    200: '#C7D7FE',
+    300: '#A4BCFD',
+    400: '#8098F9',
+    500: '#6172F3',
+    600: '#444CE7',
+    700: '#3538CD',
+    800: '#2D31A6',
+    900: '#2D3282',
+    950: '#1E2250',
+  },
+  purple: {
+    25: '#FCFAFF',
+    50: '#FAF5FF',
+    100: '#F4EBFF',
+    200: '#E9D7FE',
+    300: '#D6BBFB',
+    400: '#B692F6',
+    500: '#9E77ED',
+    600: '#7F56D9',
+    700: '#6941C6',
+    800: '#53389E',
+    900: '#42307D',
+    950: '#2A1A5B',
+  },
+  violet: {
+    25: '#FCF8FF',
+    50: '#FAECFF',
+    100: '#F9D7FE',
+    200: '#F4B9FE',
+    300: '#EE94FF',
+    400: '#E26EFB',
+    500: '#CF52F6',
+    600: '#AE3DD9',
+    700: '#8E30B7',
+    800: '#732BA6',
+    900: '#622A8A',
+    950: '#3E195C',
+  },
+  fuchsia: {
+    25: '#FDF4FF',
+    50: '#FCEDFE',
+    100: '#FADCFD',
+    200: '#F6B4F9',
+    300: '#F289F4',
+    400: '#EA5FED',
+    500: '#DD25D7',
+    600: '#C115B4',
+    700: '#A1108D',
+    800: '#851572',
+    900: '#70175F',
+    950: '#4B0A3C',
+  },
+  pink: {
+    25: '#FEF6FB',
+    50: '#FDF2FA',
+    100: '#FCE7F6',
+    200: '#FCCEEE',
+    300: '#FAA7E0',
+    400: '#F670C7',
+    500: '#EE46BC',
+    600: '#DD2590',
+    700: '#C11574',
+    800: '#9E165F',
+    900: '#851651',
+    950: '#590935',
+  },
+  rose: {
+    25: '#FFF5F5',
+    50: '#FFF1F3',
+    100: '#FFE4E8',
+    200: '#FECDD6',
+    300: '#FEA3B4',
+    400: '#FD6F8E',
+    500: '#F63D68',
+    600: '#E31B54',
+    700: '#C0155A',
+    800: '#A1104E',
+    900: '#89124C',
+    950: '#5B0A30',
+  },
+  primary: {
+    50: '#EEF6FF',
+    100: '#DBEAFC',
+    200: '#ADD4FF',
+    300: '#89BCFF',
+    400: '#629FFF',
+    500: '#1D8FFF',
+    600: '#0077EE',
+    700: '#0064D6',
+    800: '#0055B8',
+    900: '#004899',
+    950: '#002957',
+  },
+  secondary: {
+    50: '#FBF6FF',
+    100: '#F7EAFF',
+    200: '#EFD6FF',
+    300: '#E7C2FF',
+    400: '#DEABFF',
+    500: '#D190FF',
+    600: '#BF71EE',
+    700: '#AB56D6',
+    800: '#9640B8',
+    900: '#852F99',
+    950: '#4A1957',
+  },
+};

package/src/styles/foreground-colors.ts

@@ -0,0 +1,84 @@
+import colors from './colors';
+
+export default {
+  'fg-primary': {
+    light: colors.gray_light['900'],
+    dark: colors.base.white,
+  },
+  'fg-secondary': {
+    light: colors.gray_light['700'],
+    dark: colors.gray_dark['300'],
+  },
+  'fg-secondary_hover': {
+    light: colors.gray_light['800'],
+    dark: colors.gray_dark['200'],
+  },
+  'fg-tertiary': {
+    light: colors.gray_light['600'],
+    dark: colors.gray_dark['400'],
+  },
+  'fg-tertiary_hover': {
+    light: colors.gray_light['700'],
+    dark: colors.gray_dark['300'],
+  },
+  'fg-quaternary': {
+    light: colors.gray_light['400'],
+    dark: colors.gray_dark['600'],
+  },
+  'fg-quaternary_hover': {
+    light: colors.gray_light['500'],
+    dark: colors.gray_dark['500'],
+  },
+  'fg-white': {
+    light: colors.base.white,
+    dark: colors.base.white,
+  },
+  'fg-disabled': {
+    light: colors.gray_light['400'],
+    dark: colors.gray_dark['500'],
+  },
+  'fg-disabled_subtle': {
+    light: colors.gray_light['300'],
+    dark: colors.gray_dark['600'],
+  },
+  'fg-brand-primary': {
+    light: colors.brand['600'],
+    dark: colors.brand['500'],
+  },
+  'fg-brand-primary_alt': {
+    light: colors.brand['600'],
+    dark: colors.gray_dark['300'],
+  },
+  'fg-brand-secondary': {
+    light: colors.brand['500'],
+    dark: colors.brand['500'],
+  },
+  'fg-brand-secondary_alt': {
+    light: colors.brand['500'],
+    dark: colors.gray_dark['600'],
+  },
+  'fg-error-primary': {
+    light: colors.error['600'],
+    dark: colors.error['500'],
+  },
+  'fg-error-secondary': {
+    light: colors.error['500'],
+    dark: colors.error['400'],
+  },
+  'fg-warning-primary': {
+    light: colors.warning['600'],
+    dark: colors.warning['500'],
+  },
+  'fg-warning-secondary': {
+    light: colors.warning['500'],
+    dark: colors.warning['400'],
+  },
+  'fg-success-primary': {
+    light: colors.success['600'],
+    dark: colors.success['500'],
+  },
+  'fg-success-secondary': {
+    light: colors.success['500'],
+    dark: colors.success['400'],
+  },
+};