fix: add forgotten colors and update types

lad-tech · Jul 8, 2024 · 88cb363 · 88cb363
1 parent b67f9ba
commit 88cb363
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 48 deletions.
diff --git a/packages/core/src/styles/constants/colors/color.ts b/packages/core/src/styles/constants/colors/color.ts
@@ -1,3 +1,15 @@
+import {
+  IBannerColors,
+  IBgColors,
+  IBorderColors,
+  ICategoryColors,
+  IChartColors,
+  ICTAColors,
+  IElementColors,
+  IIconColors,
+  ITextColors,
+} from './types';
+
 export const primitivesColors = {
   Blue100: '#2B78EE',
   Blue80: '#5B99F9',
@@ -60,7 +72,7 @@ export const primitivesColors = {
   Accent80: '#5B99F9',
 };
 
-export const defaultTextLightColor = {
+export const defaultTextLightColor: ITextColors = {
   TextAccent: primitivesColors.Accent100,
   TextAccentContrast: primitivesColors.Accent80,
   TextPrimary: primitivesColors.Neutral100,
@@ -79,7 +91,7 @@ export const defaultTextLightColor = {
   /** @deprecated use TextInverse **/
   TextContrast: '#FFF',
 };
-export const defaultTextDarkColor = {
+export const defaultTextDarkColor: ITextColors = {
   TextAccent: primitivesColors.Accent100,
   TextAccentContrast: primitivesColors.Accent80,
   TextPrimary: primitivesColors.Neutral0,
@@ -99,7 +111,7 @@ export const defaultTextDarkColor = {
   TextContrast: '#20242D',
 };
 
-export const defaultIconLightColor = {
+export const defaultIconLightColor: IIconColors = {
   IconAccent: primitivesColors.Accent100,
   IconNeutral: primitivesColors.Neutral80,
   IconMuted: primitivesColors.Neutral40,
@@ -117,7 +129,7 @@ export const defaultIconLightColor = {
   /** @deprecated use IconError **/
   IconAttention: '#F54D3D',
 };
-export const defaultIconDarkColor = {
+export const defaultIconDarkColor: IIconColors = {
   IconAccent: primitivesColors.Accent80,
   IconNeutral: primitivesColors.Neutral10,
   IconMuted: primitivesColors.Neutral40,
@@ -136,7 +148,7 @@ export const defaultIconDarkColor = {
   IconAttention: '#F86B5D',
 };
 
-export const defaultElementLightColor = {
+export const defaultElementLightColor: IElementColors = {
   ElementAccent: primitivesColors.Accent100,
   ElementNeutral: primitivesColors.Neutral80,
   ElementMuted: primitivesColors.Neutral20,
@@ -154,7 +166,7 @@ export const defaultElementLightColor = {
   /** @deprecated use ElementError **/
   ElementAttention: '#F54D3D',
 };
-export const defaultElementDarkColor = {
+export const defaultElementDarkColor: IElementColors = {
   ElementAccent: primitivesColors.Accent80,
   ElementNeutral: primitivesColors.Neutral10,
   ElementMuted: primitivesColors.Neutral60,
@@ -173,7 +185,7 @@ export const defaultElementDarkColor = {
   ElementAdditional: '#FAB742',
 };
 
-export const defaultBorderLightColor = {
+export const defaultBorderLightColor: IBorderColors = {
   BorderAccent: primitivesColors.Blue100,
   BorderExtra: primitivesColors.Black08,
   BorderHard: primitivesColors.Black04,
@@ -183,7 +195,7 @@ export const defaultBorderLightColor = {
   BorderWarning: primitivesColors.Orange100,
   BorderError: primitivesColors.Red100,
 };
-export const defaultBorderDarkColor = {
+export const defaultBorderDarkColor: IBorderColors = {
   BorderAccent: primitivesColors.Blue80,
   BorderExtra: primitivesColors.White08,
   BorderHard: primitivesColors.White04,
@@ -194,7 +206,7 @@ export const defaultBorderDarkColor = {
   BorderError: primitivesColors.Red80,
 };
 
-export const defaultBgLightColor = {
+export const defaultBgLightColor: IBgColors = {
   BgAccent: primitivesColors.Accent100,
   BgPrimary: primitivesColors.Neutral0,
   BgPrimaryExtra: primitivesColors.White08,
@@ -223,7 +235,7 @@ export const defaultBgLightColor = {
   /** @deprecated **/
   BgContrastExtra: 'rgba(32, 36, 45, 0.75)',
 };
-export const defaultBgDarkColor = {
+export const defaultBgDarkColor: IBgColors = {
   BgAccent: primitivesColors.Accent80,
   BgPrimary: primitivesColors.Neutral100,
   BgPrimaryExtra: primitivesColors.Black08,
@@ -253,13 +265,13 @@ export const defaultBgDarkColor = {
   BgAccentHard: 'rgba(43, 120, 238, 0.45)',
 };
 
-export const defaultCTALightColor = {
+export const defaultCTALightColor: ICTAColors = {
   CtaBtnPrimary: primitivesColors.Accent100,
   CtaBtnSecondary: primitivesColors.Neutral10,
   CtaBtnMuted: primitivesColors.Neutral10,
   CtaBtnDestructive: primitivesColors.Red100,
 };
-export const defaultCTADarkColor = {
+export const defaultCTADarkColor: ICTAColors = {
   CtaBtnPrimary: primitivesColors.Accent80,
   CtaBtnSecondary: primitivesColors.Neutral80,
   CtaBtnMuted: primitivesColors.Neutral80,
@@ -326,7 +338,7 @@ export const defaultAdditionalDarkColor = {
 };
 
 /** @deprecated **/
-export const defaultChartLightColor = {
+export const defaultChartLightColor: IChartColors = {
   ChartFirst: '#FF6952',
   ChartFirstHard: 'rgba(255, 105, 82, 0.45)',
   ChartFirstSoft: 'rgba(255, 105, 82, 0.15)',
@@ -350,7 +362,7 @@ export const defaultChartLightColor = {
   ChartSeventhSoft: 'rgba(110, 110, 247, 0.15)',
 };
 /** @deprecated **/
-export const defaultChartDarkColor = {
+export const defaultChartDarkColor: IChartColors = {
   ChartFirst: '#FF6952',
   ChartFirstHard: 'rgba(255, 105, 82, 0.45)',
   ChartFirstSoft: 'rgba(255, 105, 82, 0.15)',
@@ -375,7 +387,7 @@ export const defaultChartDarkColor = {
 };
 
 /** @deprecated **/
-export const defaultCategoryLightColor = {
+export const defaultCategoryLightColor: ICategoryColors = {
   CategoryFirst: '#FF6952',
   CategoryFirstHard: 'rgba(255, 105, 82, 0.45)',
   CategoryFirstSoft: 'rgba(255, 105, 82, 0.15)',
@@ -399,7 +411,7 @@ export const defaultCategoryLightColor = {
   CategorySeventhSoft: 'rgba(110, 110, 247, 0.15)',
 };
 /** @deprecated **/
-export const defaultCategoryDarkColor = {
+export const defaultCategoryDarkColor: ICategoryColors = {
   CategoryFirst: '#FF6952',
   CategoryFirstHard: 'rgba(255, 105, 82, 0.45)',
   CategoryFirstSoft: 'rgba(255, 105, 82, 0.15)',
@@ -424,7 +436,7 @@ export const defaultCategoryDarkColor = {
 };
 
 /** @deprecated **/
-export const defaultBannerLightColor = {
+export const defaultBannerLightColor: IBannerColors = {
   BannerFirst: '#FF6952',
   BannerFirstHard: 'rgba(255, 105, 82, 0.45)',
   BannerFirstSoft: 'rgba(255, 105, 82, 0.15)',
@@ -448,7 +460,7 @@ export const defaultBannerLightColor = {
   BannerSeventhSoft: 'rgba(110, 110, 247, 0.15)',
 };
 /** @deprecated **/
-export const defaultBannerDarkColor = {
+export const defaultBannerDarkColor: IBannerColors = {
   BannerFirst: '#FF6952',
   BannerFirstHard: 'rgba(255, 105, 82, 0.45)',
   BannerFirstSoft: 'rgba(255, 105, 82, 0.15)',

diff --git a/packages/core/src/styles/constants/colors/types.ts b/packages/core/src/styles/constants/colors/types.ts
@@ -3,72 +3,102 @@ import {ImageStyle, TextStyle, ViewStyle} from 'react-native';
 import {IShadowKeys} from '../../shadows';
 
 export type ITextColors = {
+  TextAccent: string;
+  TextAccentContrast: string;
   TextPrimary: string;
   TextSecondary: string;
   TextTertiary: string;
   TextMuted: string;
-  TextAccent: string;
-  TextAccentContrast: string;
-  TextContrast: string;
+  TextSuccess: string;
+  TextWarning: string;
   TextError: string;
-  TextBlack: string;
-  TextBlackExtra: string;
   TextWhite: string;
   TextWhiteExtra: string;
-  TextSuccess: string;
-  TextWarning: string;
+  TextBlack: string;
+  TextBlackExtra: string;
+  TextInverse: string;
+
+  /** @deprecated use TextInverse **/
+  TextContrast: string;
 };
 
 export type IIconColors = {
+  IconAccent: string;
   IconNeutral: string;
   IconMuted: string;
-  IconBase: string;
-  IconAttention: string;
-  IconAdditional: string;
+  IconSuccess: string;
+  IconWarning: string;
+  IconError: string;
   IconWhite: string;
   IconBlack: string;
-  IconSuccess: string;
+  IconInverse: string;
+
+  /** @deprecated use IconAccent **/
+  IconBase: string;
+  /** @deprecated use IconWarning **/
+  IconAdditional: string;
+  /** @deprecated use IconError **/
+  IconAttention: string;
 };
 
 export type IElementColors = {
+  ElementAccent: string;
   ElementNeutral: string;
   ElementMuted: string;
-  ElementBase: string;
-  ElementAttention: string;
-  ElementAdditional: string;
+  ElementSuccess: string;
+  ElementWarning: string;
+  ElementError: string;
   ElementWhite: string;
   ElementBlack: string;
-  ElementSuccess: string;
+  ElementInverse: string;
+
+  /** @deprecated use ElementAccent **/
+  ElementBase: string;
+  /** @deprecated use ElementWarning **/
+  ElementAdditional: string;
+  /** @deprecated use ElementError **/
+  ElementAttention: string;
 };
 
 export type IBorderColors = {
+  BorderAccent: string;
   BorderExtra: string;
   BorderHard: string;
   BorderNormal: string;
   BorderSoft: string;
-  BorderError: string;
   BorderSuccess: string;
+  BorderWarning: string;
+  BorderError: string;
 };
 
 export type IBgColors = {
+  BgAccent: string;
   BgPrimary: string;
   BgPrimaryExtra: string;
   BgSecondary: string;
   BgTertiary: string;
-  BgQuaternary: string;
-  BgContrast: string;
-  BgContrastExtra: string;
+  BgSuccess: string;
+  BgWarning: string;
   BgError: string;
-  BgAccent: string;
+  BgWhite: string;
+  BgBlack: string;
+  BgOverlay: string;
+  BgInverse: string;
+
+  /** @deprecated **/
+  BgWhiteSoft: string;
+  /** @deprecated **/
   BgAccentSoft: string;
+  /** @deprecated **/
   BgAccentNormal: string;
+  /** @deprecated **/
   BgAccentHard: string;
-  BgOverlay: string;
-  BgBlack: string;
-  BgWhite: string;
-  BgWhiteSoft: string;
-  BgSuccess: string;
-  BgWarning: string;
+  /** @deprecated **/
+  BgQuaternary: string;
+  /** @deprecated **/
+  BgContrast: string;
+  /** @deprecated **/
+  BgContrastExtra: string;
 };
 
 export type ICTAColors = {
@@ -78,6 +108,37 @@ export type ICTAColors = {
   CtaBtnDestructive: string;
 };
 
+export type IAdditionalColors = {
+  AdditionalFirst: string;
+  AdditionalFirstHard: string;
+  AdditionalFirstSoft: string;
+
+  AdditionalSecond: string;
+  AdditionalSecondHard: string;
+  AdditionalSecondSoft: string;
+
+  AdditionalThird: string;
+  AdditionalThirdHard: string;
+  AdditionalThirdSoft: string;
+
+  AdditionalFourth: string;
+  AdditionalFourthHard: string;
+  AdditionalFourthSoft: string;
+
+  AdditionalFifth: string;
+  AdditionalFifthHard: string;
+  AdditionalFifthSoft: string;
+
+  AdditionalSixth: string;
+  AdditionalSixthHard: string;
+  AdditionalSixthSoft: string;
+
+  AdditionalSeventh: string;
+  AdditionalSeventhHard: string;
+  AdditionalSeventhSoft: string;
+};
+
+/** @deprecated **/
 export type IChartColors = {
   ChartFirst: string;
   ChartFirstHard: string;
@@ -101,7 +162,7 @@ export type IChartColors = {
   ChartSeventhHard: string;
   ChartSeventhSoft: string;
 };
-
+/** @deprecated **/
 export type ICategoryColors = {
   CategoryFirst: string;
   CategoryFirstHard: string;
@@ -125,7 +186,7 @@ export type ICategoryColors = {
   CategorySeventhHard: string;
   CategorySeventhSoft: string;
 };
-
+/** @deprecated **/
 export type IBannerColors = {
   BannerFirst: string;
   BannerFirstHard: string;

diff --git a/packages/core/src/styles/constants/theme.ts b/packages/core/src/styles/constants/theme.ts
@@ -4,6 +4,8 @@ import {getShadows} from '../shadows/getShadows';
 
 import {defaultSpaces} from './defaultSpaces';
 import {
+  defaultAdditionalDarkColor,
+  defaultAdditionalLightColor,
   defaultBannerDarkColor,
   defaultBannerLightColor,
   defaultBgDarkColor,
@@ -51,6 +53,7 @@ export const defaultTheme: IDefaultTheme = {
       ...defaultChartLightColor,
       ...defaultCategoryLightColor,
       ...defaultBannerLightColor,
+      ...defaultAdditionalLightColor,
     },
     [CurrentTheme.dark]: {
       ...defaultTextDarkColor,
@@ -62,6 +65,7 @@ export const defaultTheme: IDefaultTheme = {
       ...defaultChartDarkColor,
       ...defaultCategoryDarkColor,
       ...defaultBannerDarkColor,
+      ...defaultAdditionalDarkColor,
     },
   },
   spaces: {