- feat: add new color palette

- feat: add ability to generate new custom color palette

Author: VasylHryha

packages/ui/src/services/color/presetsToShare.ts

@@ -0,0 +1,272 @@
+
+export const presetToShare = {
+  blue: '#154ec1',
+  blue7: '#154ec112',
+  blue10: '#154ec11a',
+  blue13: '#154ec121',
+  blueLight: '#2c5fc7',
+  blueDark: '#1244a8',
+  blueSoft7: '#60ace212',
+  blueSoft10: '#60ace21a',
+  blueSoft13: '#60ace221',
+  blueSoft20: '#60ace233',
+  blue20: '#154ec133',
+  blueSoftLight: '#70b4e5',
+  blueSoft: '#60ace2',
+  blueSoftDark: '#5496c5',
+
+  neutralPrimarySoft: '#ecf0f1',
+  neutralPrimaryDark: '#111921',
+  white: '#ffffff',
+  black: '#000000',
+  neutralPrimary: '#141d26',
+  neutralPrimary10: '#191d1f1a',
+  neutralPrimarySoft10: '#ecf0f11a',
+  neutralPrimaryLight: '#2c343c',
+  neutralPrimarySoftLight: '#eef1f2',
+  neutralPrimarySoftDark: '#cdd1d2',
+  neutralPrimary7: '#191d1f12',
+  neutralPrimary13: '#191d1f21',
+  neutralPrimarySoft7: '#ecf0f112',
+  neutralPrimarySoft13: '#ecf0f121',
+  neutralPrimarySoft20: '#ecf0f133',
+  neutralPrimary20: '#191d1f33',
+  neutralSecondaryLight: '#6c7178',
+  neutralSecondary: '#5c6169',
+  neutralSecondaryDark: '#50545b',
+  neutralSecondarySoftLight: '#b4bbc9',
+  neutralSecondarySoft: '#acb4c3',
+  neutralSecondarySoftDark: '#969daa',
+
+  yellowSoft: '#ffd952',
+  yellow7: '#84680612',
+  yellow10: '#8468061a',
+  yellow13: '#84680621',
+  yellowSoft7: '#ffd95212',
+  yellowSoft10: '#ffd9521a',
+  yellowSoft13: '#ffd95221',
+  yellowSoftLight: '#ffdd63',
+  yellowSoftDark: '#debd47',
+  yellowSoft20: '#ffd95233',
+  yellow20: '#84680633',
+  yellowLight: '#90771f',
+  yellow: '#846806',
+  yellowDark: '#735a05',
+
+  greenSoft: '#66be33',
+  green7: '#1f750012',
+  green10: '#1f75001a',
+  green13: '#1f750021',
+  greenSoft7: '#66be3312',
+  greenSoft10: '#66be331a',
+  greenSoft13: '#66be3321',
+  greenSoftLight: '#75c447',
+  greenSoftDark: '#59a52c',
+  greenSoft20: '#66be3333',
+  green20: '#1f750033',
+  greenLight: '#35831a',
+  green: '#1f7500',
+  greenDark: '#1b6600',
+
+  red7: '#c5181812',
+  red10: '#c518181a',
+  red13: '#c5181821',
+  redSoft7: '#f67d7312',
+  redSoft10: '#f67d731a',
+  redSoft13: '#f67d7321',
+  red20: '#c5181833',
+  redSoft20: '#f67d7333',
+  red: '#c51818',
+  redSoft: '#f67d73',
+  redSoftLight: '#f78a81',
+  redPaleDark: '#d66d64',
+  redLight: '#cb2f2f',
+  redDark: '#ab1515',
+
+  sky7: '#0b6aae12',
+  sky10: '#0b6aae1a',
+  sky13: '#0b6aae21',
+  skySoft7: '#56aeff12',
+  skySoft10: '#56aeff1a',
+  skySoft13: '#56aeff21',
+  sky20: '#0b6aae33',
+  skySoft20: '#56aeff33',
+  sky: '#0b6aae',
+  skySoft: '#56aeff',
+  skySoftLight: '#67b6ff',
+  skySoftDark: '#4b97de',
+  skyLight: '#2379b6',
+  skyDark: '#0a5c97',
+}
+
+export const lightNewTheme = {
+  text: {
+    primary: 'neutralPrimary',
+    secondary: 'neutralSecondary',
+    inverted: 'neutralPrimarySoft',
+    brand: 'blue',
+    info: 'sky',
+    warning: 'yellow',
+    success: 'green',
+    danger: 'red',
+    primaryConst: 'neutralPrimary',
+    invertedConst: 'neutralPrimarySoft',
+    brandHover: 'blueLight',
+    brandPressed: 'blueDark',
+    dangerHover: 'redLight',
+    dangerPressed: 'redDark',
+    successHover: 'greenLight',
+    successPressed: 'greenDark',
+    warningHover: 'yellowLight',
+    warningPressed: 'yellowDark',
+    infoHover: 'skyLight',
+    infoPressed: 'skyDark',
+    primaryHover: 'neutralPrimaryLight',
+    primaryPressed: 'neutralPrimaryDark',
+    secondaryHover: 'neutralSecondaryLight',
+    secondaryPressed: 'neutralSecondaryDark',
+    invertedHover: 'neutralPrimarySoftLight',
+    invertedPressed: 'neutralPrimarySoftDark',
+  },
+  background: {
+    primary: 'white',
+    brand: 'blue10',
+    brandAccent: 'blue',
+    secondary: 'neutralPrimarySoftLight',
+    warning: 'yellow10',
+    warningAccent: 'yellow',
+    danger: 'red10',
+    dangerAccent: 'red',
+    success: 'green10',
+    successAccent: 'green',
+    info: 'sky10',
+    infoAccent: 'sky',
+    neutral: 'neutralPrimary10',
+    neutralAccent: 'neutralPrimary',
+    brandHover: 'blue7',
+    brandPressed: 'blue13',
+    brandAccentHover: 'blueLight',
+    brandAccentPressed: 'blueDark',
+    warningPressed: 'yellow13',
+    warningHover: 'yellow7',
+    warningAccentPressed: 'yellowDark',
+    warningAccentHover: 'yellowLight',
+    dangerPressed: 'red13',
+    dangerHover: 'red7',
+    dangerAccentHover: 'redLight',
+    dangerAccentPressed: 'redDark',
+    successPressed: 'green13',
+    successHover: 'green7',
+    successAccentHover: 'greenLight',
+    successAccentPressed: 'greenDark',
+    infoHover: 'sky7',
+    infoPressed: 'sky13',
+    infoAccentHover: 'skyLight',
+    infoAccentPressed: 'skyDark',
+    neutralAccentHover: 'neutralPrimaryLight',
+    neutralAccentPressed: 'neutralPrimaryDark',
+    neutralHover: 'neutralPrimary7',
+    neutralPressed: 'neutralPrimary13',
+  },
+  border: {
+    neutral: 'neutralPrimary20',
+    successAccent: 'green',
+    warningAccent: 'yellow',
+    dangerAccent: 'red',
+    infoAccent: 'sky',
+    focus: 'skySoft',
+    brandAccent: 'blue',
+    neutralAccent: 'neutralPrimary',
+    danger: 'red20',
+    success: 'green20',
+    warning: 'yellow20',
+    info: 'sky20',
+    brand: 'blue20',
+  },
+}
+
+export const darkNewTheme = {
+  text: {
+    primary: 'neutralPrimarySoft',
+    secondary: 'neutralSecondarySoft',
+    inverted: 'neutralPrimary',
+    brand: 'blueSoft',
+    info: 'skySoft',
+    warning: 'yellowSoft',
+    success: 'greenSoft',
+    danger: 'redSoft',
+    primaryConst: 'neutralPrimary',
+    invertedConst: 'neutralPrimarySoft',
+    brandHover: 'blueSoftLight',
+    brandPressed: 'blueSoftDark',
+    dangerHover: 'redSoftLight',
+    dangerPressed: ['redPaleDark', 'redSoftDark'], // not all names from figma follow the same pattern
+    successHover: 'greenSoftLight',
+    successPressed: 'greenSoftDark',
+    warningHover: 'yellowSoftLight',
+    warningPressed: 'yellowSoftDark',
+    infoHover: 'skySoftLight',
+    infoPressed: 'skySoftDark',
+    primaryHover: 'neutralPrimarySoftLight',
+    primaryPressed: 'neutralPrimarySoftDark',
+    secondaryHover: 'neutralSecondarySoftLight',
+    secondaryPressed: 'neutralSecondarySoftDark',
+    invertedHover: 'neutralPrimaryLight',
+    invertedPressed: 'neutralPrimaryDark',
+  },
+  background: {
+    primary: 'neutralPrimary',
+    brand: 'blueSoft10',
+    brandAccent: 'blueSoft',
+    secondary: 'neutralPrimaryLight',
+    warning: 'yellowSoft10',
+    warningAccent: 'yellowSoft',
+    danger: 'redSoft10',
+    dangerAccent: 'redSoft',
+    success: 'greenSoft10',
+    successAccent: 'greenSoft',
+    info: 'skySoft10',
+    infoAccent: 'skySoft',
+    neutral: 'neutralPrimarySoft10',
+    neutralAccent: 'neutralPrimarySoft',
+    brandHover: 'blueSoft13',
+    brandPressed: 'blueSoft7',
+    brandAccentHover: 'blueSoftLight',
+    brandAccentPressed: 'blueSoftDark',
+    warningPressed: 'yellowSoft7',
+    warningHover: 'yellowSoft13',
+    warningAccentPressed: 'yellowSoftDark',
+    warningAccentHover: 'yellowSoftLight',
+    dangerPressed: 'redSoft7',
+    dangerHover: 'redSoft13',
+    dangerAccentHover: 'redSoftLight',
+    dangerAccentPressed: ['redPaleDark', 'redSoftDark'],
+    successPressed: 'greenSoft7',
+    successHover: 'greenSoft13',
+    successAccentHover: 'greenSoftLight',
+    successAccentPressed: 'greenSoftDark',
+    infoHover: 'skySoft13',
+    infoPressed: 'sky7',
+    infoAccentHover: 'skySoftLight',
+    infoAccentPressed: 'skySoftDark',
+    neutralAccentHover: 'neutralPrimarySoftLight',
+    neutralAccentPressed: 'neutralPrimarySoftDark',
+    neutralHover: 'neutralPrimarySoft13',
+    neutralPressed: 'neutralPrimarySoft7',
+  },
+  border: {
+    neutral: 'neutralPrimarySoft20',
+    successAccent: 'greenSoft',
+    warningAccent: 'yellowSoft',
+    dangerAccent: 'redSoft',
+    infoAccent: 'skySoft',
+    focus: 'skySoft',
+    brandAccent: 'blueSoft',
+    neutralAccent: 'neutralPrimarySoft',
+    danger: 'redSoft20',
+    success: 'greenSoft20',
+    warning: 'yellowSoft20',
+    info: 'skySoft20',
+    brand: 'blueSoft20',
+  },
+}