fix: add warning colours per theme and use them

ts/components/NoticeBanner.tsx

@@ -53,8 +53,7 @@ export const NoticeBanner = (props: NoticeBannerProps) => {
 
 const StyledGroupInviteBanner = styled(Flex)`
   position: relative;
-  background-color: var(--orange-color);
+  color: var(--warning-color);
-  color: var(--black-color);
   font-size: var(--font-size-sm);
   padding: var(--margins-xs) var(--margins-lg);
   text-align: center;
@@ -62,8 +61,6 @@ const StyledGroupInviteBanner = styled(Flex)`
 
   // when part a a dialog, invert it and make it narrower (as the dialog grows to make it fit)
   ${StyledRootDialog} & {
-    background-color: unset;
-    color: var(--text-primary-color);
     max-width: 300px;
   }
 `;

ts/themes/classicDark.ts

@@ -4,6 +4,7 @@ import { ThemeColorVariables } from './variableColors';
 
 export const classicDark: ThemeColorVariables = {
   '--danger-color': THEMES.CLASSIC_DARK.DANGER,
+  '--warning-color': THEMES.CLASSIC_DARK.WARNING,
   '--disabled-color': THEMES.CLASSIC_DARK.DISABLED,
 
   '--background-primary-color': THEMES.CLASSIC_DARK.COLOR1,

ts/themes/classicLight.ts

@@ -4,6 +4,7 @@ import { ThemeColorVariables } from './variableColors';
 
 export const classicLight: ThemeColorVariables = {
   '--danger-color': THEMES.CLASSIC_LIGHT.DANGER,
+  '--warning-color': THEMES.CLASSIC_LIGHT.WARNING,
   '--disabled-color': THEMES.CLASSIC_LIGHT.DISABLED,
 
   '--background-primary-color': THEMES.CLASSIC_LIGHT.COLOR6,

ts/themes/constants/colors.tsx

@@ -119,6 +119,7 @@ export function convertThemeStateToName(themeState: string): ThemeNames {
 type ThemeColors = {
   PRIMARY: string;
   DANGER: string;
+  WARNING: string;
   DISABLED: string;
   COLOR0: string;
   COLOR1: string;
@@ -134,6 +135,7 @@ type Themes = Record<ThemeNames, ThemeColors>;
 // Classic Light
 const classicLightPrimary = primaryGreen;
 const classicLightDanger = dangerLight;
+const classicLightWarning = '#A64B00';
 const classicLightDisabled = disabledLight;
 const classicLight0 = '#000000';
 const classicLight1 = '#6D6D6D';
@@ -146,6 +148,7 @@ const classicLight6 = '#FFFFFF';
 // Classic Dark
 const classicDarkPrimary = primaryGreen;
 const classicDarkDanger = dangerDark;
+const classicDarkWarning = '#FCB159';
 const classicDarkDisabled = disabledDark;
 const classicDark0 = '#000000';
 const classicDark1 = '#1B1B1B';
@@ -158,6 +161,7 @@ const classicDark6 = '#FFFFFF';
 // Ocean Light
 const oceanLightPrimary = primaryBlue;
 const oceanLightDanger = dangerLight;
+const oceanLightWarning = '#A64B00';
 const oceanLightDisabled = disabledLight;
 const oceanLight0 = '#000000';
 const oceanLight1 = '#19345D';
@@ -171,6 +175,7 @@ const oceanLight7 = '#FCFFFF';
 // Ocean Dark
 const oceanDarkPrimary = primaryBlue;
 const oceanDarkDanger = dangerDark;
+const oceanDarkWarning = '#FCB159';
 const oceanDarkDisabled = disabledDark;
 const oceanDark0 = '#000000';
 const oceanDark1 = '#1A1C28';
@@ -185,6 +190,7 @@ const THEMES: Themes = {
   CLASSIC_LIGHT: {
     PRIMARY: classicLightPrimary,
     DANGER: classicLightDanger,
+    WARNING: classicLightWarning,
     DISABLED: classicLightDisabled,
     COLOR0: classicLight0,
     COLOR1: classicLight1,
@@ -196,6 +202,7 @@ const THEMES: Themes = {
   },
   CLASSIC_DARK: {
     PRIMARY: classicDarkPrimary,
+    WARNING: classicDarkWarning,
     DANGER: classicDarkDanger,
     DISABLED: classicDarkDisabled,
     COLOR0: classicDark0,
@@ -208,6 +215,7 @@ const THEMES: Themes = {
   },
   OCEAN_LIGHT: {
     PRIMARY: oceanLightPrimary,
+    WARNING: oceanLightWarning,
     DANGER: oceanLightDanger,
     DISABLED: oceanLightDisabled,
     COLOR0: oceanLight0,
@@ -221,6 +229,7 @@ const THEMES: Themes = {
   },
   OCEAN_DARK: {
     PRIMARY: oceanDarkPrimary,
+    WARNING: oceanDarkWarning,
     DANGER: oceanDarkDanger,
     DISABLED: oceanDarkDisabled,
     COLOR0: oceanDark0,

ts/themes/oceanDark.ts

@@ -4,6 +4,7 @@ import { ThemeColorVariables } from './variableColors';
 
 export const oceanDark: ThemeColorVariables = {
   '--danger-color': THEMES.OCEAN_DARK.DANGER,
+  '--warning-color': THEMES.OCEAN_DARK.WARNING,
   '--disabled-color': THEMES.OCEAN_DARK.DISABLED,
 
   '--background-primary-color': THEMES.OCEAN_DARK.COLOR1,

ts/themes/oceanLight.ts

@@ -4,6 +4,7 @@ import { ThemeColorVariables } from './variableColors';
 
 export const oceanLight: ThemeColorVariables = {
   '--danger-color': THEMES.OCEAN_LIGHT.DANGER,
+  '--warning-color': THEMES.OCEAN_LIGHT.WARNING,
   '--disabled-color': THEMES.OCEAN_LIGHT.DISABLED,
 
   '--background-primary-color': THEMES.OCEAN_LIGHT.COLOR7!,

ts/themes/variableColors.tsx

@@ -1,6 +1,7 @@
 // Default Theme should be Classic Dark
 export type ThemeColorVariables = {
   '--danger-color': string;
+  '--warning-color': string;
   '--disabled-color': string;
 
   /* Backgrounds */