chore: [IAI-214,IAI-226] Color values inventory + Update references t…

…o white color (pagopa#4057) * Delete NativeBase `View` component, replace with native one * Remove broken link to Invision * Remove unused variable in the theme variables' file * Improve visual appearance of colors in UI showroom * Add IOColorGradients object, add relative UI Showroom Item to display it * Add all the gradients used in the app * Add all remaining color values from generic `variables` object and other code blocks * Replace white `brandPrimaryInverted` color with `white` * Replace `colorWhite` references with new ones from the `IOColors` object * Restore `View` from `native-base` to avoid a worse view of UI showroom page * Resolve lint errors * Resolve TS compilation errors Co-authored-by: Cristiano Tofani <[email protected]>
dvisionlab · Jul 28, 2022 · 95301c7 · 95301c7
1 parent edb5132
commit 95301c7
Show file tree

Hide file tree

Showing 68 changed files with 397 additions and 190 deletions.
diff --git a/img/app-logo.svg b/img/app-logo.svg
diff --git a/ts/components/BetaTestingOverlay.tsx b/ts/components/BetaTestingOverlay.tsx
@@ -7,7 +7,7 @@ import { TouchableOpacity } from "react-native-gesture-handler";
 import { getAppVersion } from "../utils/appVersion";
 import { Label } from "../components/core/typography/Label";
 import { Body } from "../components/core/typography/Body";
-import customVariables from "../theme/variables";
+import { IOColors } from "../components/core/variables/IOColors";
 
 const styles = StyleSheet.create({
   versionContainer: {
@@ -25,7 +25,7 @@ const styles = StyleSheet.create({
   },
   versionText: {
     padding: 2,
-    backgroundColor: customVariables.colorWhite,
+    backgroundColor: IOColors.white,
     textAlign: "center"
   }
 });

diff --git a/ts/components/ButtonWithImage.tsx b/ts/components/ButtonWithImage.tsx
@@ -5,6 +5,7 @@ import customVariables from "../theme/variables";
 import { WithTestID } from "../types/WithTestID";
 import ButtonDefaultOpacity from "./ButtonDefaultOpacity";
 import IconFont from "./ui/IconFont";
+import { IOColors } from "./core/variables/IOColors";
 
 const styles = StyleSheet.create({
   viewRL: {
@@ -56,17 +57,17 @@ const darkStyles = StyleSheet.create({
   },
 
   icon: {
-    color: customVariables.colorWhite
+    color: IOColors.white
   },
 
   text: {
-    color: customVariables.colorWhite
+    color: IOColors.white
   }
 });
 
 const lightStyles = StyleSheet.create({
   button: {
-    backgroundColor: customVariables.colorWhite,
+    backgroundColor: IOColors.white,
     borderWidth: 1,
     borderColor: customVariables.brandPrimary
   },

diff --git a/ts/components/CiePinpad/index.tsx b/ts/components/CiePinpad/index.tsx
@@ -5,6 +5,7 @@ import I18n from "../../i18n";
 import customVariables from "../../theme/variables";
 import InputPlaceHolder from "../Pinpad/InputPlaceholder";
 import { INPUT_PLACEHOLDER_HEIGHT } from "../Pinpad/Placeholders";
+import { IOColors } from "../core/variables/IOColors";
 
 type Props = {
   pinLength: number;
@@ -21,7 +22,7 @@ const styles = StyleSheet.create({
   text: {
     alignSelf: "center",
     justifyContent: "center",
-    color: customVariables.colorWhite
+    color: IOColors.white
   },
   placeHolderStyle: {
     height: 4,

diff --git a/ts/components/ExperimentalFeaturesBanner.tsx b/ts/components/ExperimentalFeaturesBanner.tsx
@@ -5,6 +5,7 @@ import { makeFontStyleObject } from "../theme/fonts";
 import variables from "../theme/variables";
 import IconFont from "./ui/IconFont";
 import { Body } from "./core/typography/Body";
+import { IOColors } from "./core/variables/IOColors";
 
 const styles = StyleSheet.create({
   experimentalFeaturesBannerContainer: {
@@ -23,18 +24,14 @@ const styles = StyleSheet.create({
   },
   experimentalFeaturesBannerMessage: {
     ...makeFontStyleObject(Platform.select, "600"),
-    color: variables.colorWhite
+    color: IOColors.white
   }
 });
 
 const ExperimentalFeaturesBanner = (
   <View style={styles.experimentalFeaturesBannerContainer}>
     <View style={styles.experimentalFeaturesBannerLeft}>
-      <IconFont
-        size={36}
-        color={variables.colorWhite}
-        name={"io-profilo-exp"}
-      />
+      <IconFont size={36} color={IOColors.white} name={"io-profilo-exp"} />
     </View>
     <View style={styles.experimentalFeaturesBannerRight}>
       <Body color={"white"} weight={"SemiBold"}>

diff --git a/ts/components/FiscalCodeLandscapeOverlay.tsx b/ts/components/FiscalCodeLandscapeOverlay.tsx
@@ -13,6 +13,7 @@ import customVariables from "../theme/variables";
 import { useMaxBrightness } from "../utils/brightness";
 import FiscalCodeComponent from "./FiscalCodeComponent";
 import AppHeader from "./ui/AppHeader";
+import { IOColors } from "./core/variables/IOColors";
 
 export type Props = Readonly<{
   onCancel: () => void;
@@ -86,7 +87,7 @@ const FiscalCodeLandscapeOverlay: React.FunctionComponent<Props> = (
             accessibilityRole={"button"}
             accessibilityLabel={I18n.t("global.buttons.close")}
           >
-            <IconFont name="io-close" color={customVariables.colorWhite} />
+            <IconFont name="io-close" color={IOColors.white} />
           </Button>
         </Right>
       </AppHeader>

diff --git a/ts/components/GoBackButton.tsx b/ts/components/GoBackButton.tsx
@@ -4,6 +4,7 @@ import { BackHandler, NativeEventSubscription } from "react-native";
 import I18n from "../i18n";
 import NavigationService from "../navigation/NavigationService";
 import variables from "../theme/variables";
+import { IOColors } from "../components/core/variables/IOColors";
 import ButtonDefaultOpacity from "./ButtonDefaultOpacity";
 import IconFont from "./ui/IconFont";
 
@@ -63,7 +64,7 @@ class GoBackButton extends React.PureComponent<Props> {
       >
         <IconFont
           name={"io-back"}
-          style={{ color: white ? variables.colorWhite : variables.colorBlack }}
+          style={{ color: white ? IOColors.white : variables.colorBlack }}
         />
       </ButtonDefaultOpacity>
     );

diff --git a/ts/components/IdpSuccessfulAuthentication.tsx b/ts/components/IdpSuccessfulAuthentication.tsx
@@ -7,6 +7,7 @@ import { StatusBar, StyleSheet } from "react-native";
 
 import variables from "../theme/variables";
 import IconFont from "./ui/IconFont";
+import { IOColors } from "./core/variables/IOColors";
 
 const styles = StyleSheet.create({
   container: {
@@ -25,6 +26,6 @@ export const IdpSuccessfulAuthentication = () => (
       barStyle="light-content"
       backgroundColor={styles.container.backgroundColor}
     />
-    <IconFont name="io-tick-big" color={variables.colorWhite} size={tickSize} />
+    <IconFont name="io-tick-big" color={IOColors.white} size={tickSize} />
   </View>
 );
diff --git a/ts/components/ListSelectionBar.tsx b/ts/components/ListSelectionBar.tsx
@@ -4,6 +4,7 @@ import { StyleSheet } from "react-native";
 import I18n from "../i18n";
 import customVariables from "../theme/variables";
 import ButtonDefaultOpacity from "./ButtonDefaultOpacity";
+import { IOColors } from "./core/variables/IOColors";
 
 const styles = StyleSheet.create({
   buttonBar: {
@@ -18,7 +19,7 @@ const styles = StyleSheet.create({
     margin: 5
   },
   buttonBarCenter: {
-    backgroundColor: customVariables.colorWhite
+    backgroundColor: IOColors.white
   }
 });
 

diff --git a/ts/components/Pinpad/KeyPad.tsx b/ts/components/Pinpad/KeyPad.tsx
@@ -7,6 +7,7 @@ import { makeFontStyleObject } from "../../theme/fonts";
 import customVariables from "../../theme/variables";
 import ButtonDefaultOpacity from "../ButtonDefaultOpacity";
 import StyledIconFont from "../ui/IconFont";
+import { IOColors } from "../core/variables/IOColors";
 
 // left -> the string to represent as text
 // right -> the icon to represent with name and size
@@ -49,7 +50,7 @@ const styles = StyleSheet.create({
     marginBottom: -10
   },
   white: {
-    color: customVariables.colorWhite
+    color: IOColors.white
   },
   buttonTextDigit: {
     fontSize: radius + 10
@@ -113,7 +114,7 @@ const renderPinCol = (
               color={
                 buttonType === "light"
                   ? customVariables.contentPrimaryBackground
-                  : customVariables.colorWhite
+                  : IOColors.white
               }
             />
           )

diff --git a/ts/components/RemindEmailValidationOverlay.tsx b/ts/components/RemindEmailValidationOverlay.tsx
@@ -38,6 +38,7 @@ import {
 } from "../store/reducers/profile";
 import { GlobalState } from "../store/reducers/types";
 import customVariables from "../theme/variables";
+import { IOColors } from "../components/core/variables/IOColors";
 import { isOnboardingCompleted } from "../utils/navigation";
 import { ContextualHelpPropsMarkdown } from "./screens/BaseScreenComponent";
 import TopScreenComponent, {
@@ -222,7 +223,7 @@ class RemindEmailValidationOverlay extends React.PureComponent<Props, State> {
           onPress={() => {
             this.setState({ displayError: false });
           }}
-          color={customVariables.colorWhite}
+          color={IOColors.white}
           accessible={true}
           accessibilityLabel={I18n.t("global.buttons.close")}
         />

diff --git a/ts/components/cie/CieReadingCardAnimation.tsx b/ts/components/cie/CieReadingCardAnimation.tsx
@@ -6,6 +6,7 @@ import ProgressCircle from "react-native-progress-circle";
 import customVariables from "../../theme/variables";
 import AnimatedRing from "../animations/AnimatedRing";
 import IconFont from "../ui/IconFont";
+import { IOColors } from "../core/variables/IOColors";
 
 export enum ReadingState {
   "reading" = "reading",
@@ -44,7 +45,7 @@ const styles = StyleSheet.create({
   },
   img: {
     overflow: "hidden",
-    backgroundColor: customVariables.colorWhite,
+    backgroundColor: IOColors.white,
     height: imgDimension - 3,
     width: imgDimension - 3,
     borderRadius: imgDimension / 2

diff --git a/ts/components/core/variables/IOColors.ts b/ts/components/core/variables/IOColors.ts
@@ -5,27 +5,114 @@ function asIOColors<T extends { [key: string]: ColorValue }>(arg: T): T {
   return arg;
 }
 
-/**
- * The palette of color used, created from
- * https://pagopa.invisionapp.com/console/IO-app---Library-ckcdil0710mt1014buxuo4u34/ckcdilqwl032d01xbx6db5zwz/play
- */
+function asIOColorGradients<T extends { [key: string]: Array<ColorValue> }>(
+  arg: T
+): T {
+  return arg;
+}
+
 export const IOColors = asIOColors({
-  black: "#000000",
   white: "#FFFFFF",
-  bluegreyDark: "#17324D",
-  bluegrey: "#475A6D",
-  grey: "#909DA8",
-  bluegreyLight: "#CCD4DC",
-  greyLight: "#E6E9F2",
+  colorWhiteRGB: `rgb(255, 255, 255)` /* from various JEST tests */,
   greyUltralight: "#FCFDFF",
+  brandLight: "#FCFDFF" /* from variables.ts, duplicate of greyUltraLight */,
+  tabUnderlineColor:
+    "#F6F6F6" /* from variables.ts, similar to brandGray, ALIAS TOKEN */,
+  brandGray: "#F5F6F7" /* from variables.ts */,
+  greyLight: "#E6E9F2",
+  brandLightGray: "#E6E9F2" /* from variables.ts, duplicate of greyLight */,
+  lightestGray: "#E0E3E6" /* from variables.ts */,
+  headerIconLight: "#E4E7EA" /* from variables.ts, ALIAS TOKEN */,
+  optCodeComponent: "#D9D9D9" /* from relative component */,
+  borderColor: `rgb(216, 216, 216)` /* found in various JEST tests, similar to optCodeComponent */,
+  lighterGray: "#C1C9D2" /* from variables.ts */,
+  bluegreyLight: "#CCD4DC",
+  brandMildGray: "#C7D1D9" /* from variables.ts */,
+  shineColor:
+    "#C1CCD6" /* from variables.ts, similar to brandMildGray, Animation ALIAS TOKEN */,
+  itemSeparator: "#C9C9C9" /* from variables.ts, ALIAS TOKEN */,
+  listSelectionBarColor: "#A9A9A9" /* from relative JEST snap test */,
+  btnLightBorderColor: "#AEB5BF" /* from variables.ts, ALIAS TOKEN */,
+  lightGray: "#909DA8" /* from variables.ts, duplicate of grey */,
+
+  disabledService:
+    "#909DA8" /* from variables.ts, duplicate of grey, ALIAS TOKEN */,
+  grey: "#909DA8",
+  headerIconDark: "#798593" /* from variables.ts, ALIAS TOKEN */,
+  itemBorderDefaultColor:
+    "#5F6F82" /* from variables.ts, similar to milderGray, ALIAS TOKEN */,
+  milderGray: "#5F6F80" /* from variables.ts */,
+  darkerGray: "#4B5C6F" /* from variables.ts */,
+  bluegrey: "#475A6D",
+  brandDarkGray: "#475A6D" /* from variables.ts, duplicate of bluegrey */,
+  textColor:
+    "#475A6D" /* from variables.ts, duplicate of bluegrey, ALIAS TOKEN */,
+  topTabBarTextColor:
+    "#475A6D" /* from variables.ts, duplicate of bluegrey, ALIAS TOKEN */,
+  unselectedColor:
+    "#475A6D" /* from variables.ts, duplicate of bluegrey, ALIAS TOKEN */,
+  bluegreyDark: "#17324D",
+  brandDarkestGray:
+    "#17324D" /* from variables.ts, duplicate of bluegreyDark */,
+  cardFontColor:
+    "#17324D" /* from variables.ts, duplicate of bluegreyDark and brandDarkestGray, ALIAS TOKEN */,
+  textColorDark: `rgb(28, 28, 30)` /* found in various JEST tests */,
+  black: "#000000",
+  colorBlack: "#000000" /* from variables.ts, duplicate of black */,
+  footerShadowColor:
+    "#000000" /* from variables.ts, duplicate of black, ALIAS TOKEN */,
+  brandPrimary: "#0066CC" /* from variables.ts */,
+  topTabBarActiveTextColor:
+    "#0066CC" /* from variables.ts, duplicate of brandPrimary, ALIAS TOKEN */,
   blue: "#0073E6",
+  selectedColor:
+    "#0073E6" /* from variables.ts, duplicate of blue, ALIAS TOKEN */,
+  contentPrimaryBackground:
+    "#0073E6" /* from variables.ts, duplicate of blue, ALIAS TOKEN */,
+  ListSelectionBarColor: "#007AFF" /* from ListSelectionBar JEST test */,
+  textLinkColor:
+    "#0073E6" /* from variables.ts, duplicate of blue, ALIAS TOKEN */,
+  checkBoxColor: "#039BE5" /* from CheckBox component */,
+  brandPrimaryLight: "#99CCFF" /* from variables.ts */,
+  noCieButton:
+    "#789CCD" /* Background of half-disabled noCIE CTA, from LandingScreen.tsx */,
+  featuredCardShadow: "#00274E" /* from FeaturedCard component */,
+  activeBonus: "#2C489D" /* from relative component (BonusVacanze) */,
+  cgnDiscount: "#9B5897" /* from CgnDiscountValueBox */,
   aqua: "#00C5CA",
+  brandHighlight: "#00C5CA" /* from variables.ts, duplicate of aqua */,
+  brandHighLighter: "#00CDD2" /* from variables.ts */,
+  toastColor: "#C1F4F2" /* from variables.ts, ALIAS TOKEN */,
+  badgeYellow: "#FFC824" /* from variables.ts, ALIAS TOKEN */,
+  cgnDiscountDetailBg: "#EB9505" /* from relative component */,
+  cardExpiredTextColor: "#FF0000" /* from variables.ts, ALIAS TOKEN */,
+  calendarExpirableColor: "#D0021B" /* from variables.ts, ALIAS TOKEN */,
+  itemTest: "#ED1727" /* from relative JEST snap test */,
   red: "#C02927",
+  brandDanger: "#CC3333" /* from variables.ts */,
+  brandSuccess: "#007005" /* from variables.ts */,
+  orange: "#EA7614",
   greyGradientTop: "#475A6D",
   greyGradientBottom: "#42484F",
   yellowGradientTop: "#FEC709",
-  yellowGradientBottom: "#FAA01F",
-  orange: "#EA7614"
+  yellowGradientBottom: "#FAA01F"
+});
+
+export const IOColorGradients = asIOColorGradients({
+  appLaunch: ["#0C00D3", "#0073E6"],
+  appIcon: ["#1D51DF", "#1723D5"],
+  grey: ["#475A6D", "#42484F"],
+  yellow: ["#FEC709", "#FAA01F"],
+  cgn: ["#9184B7", "#5C488F"],
+  cgnCulture: ["#C51C82", "#E28DC0"],
+  cgnHealth: ["#F1901A", "#EE898A"],
+  cgnLearning: ["#0871B6", "#AE97C3"],
+  cgnSport: ["#DC1415", "#F8C78C"],
+  cgnTelco: ["#0871B6", "#83B8DA"],
+  cgnFinance: ["#3E2F87", "#8FDBC0"],
+  cgnTravel: ["#E00F69", "#F8C78C"],
+  cgnMobility: ["#1D827D", "#8FC7C5"],
+  cgnJobOffers: ["#DC1415", "#EE898A"]
 });
 
 export type IOColorType = keyof typeof IOColors;
diff --git a/ts/components/messages/MedicalPrescriptionDueDateBar.tsx b/ts/components/messages/MedicalPrescriptionDueDateBar.tsx
@@ -22,6 +22,7 @@ import {
   getMessagePaymentExpirationInfo
 } from "../../utils/messages";
 import { CreatedMessageWithContentAndAttachments } from "../../../definitions/backend/CreatedMessageWithContentAndAttachments";
+import { IOColors } from "../core/variables/IOColors";
 import CalendarEventButton from "./CalendarEventButton";
 import CalendarIconComponent from "./CalendarIconComponent";
 
@@ -126,14 +127,14 @@ class MedicalPrescriptionDueDateBar extends React.PureComponent<Props> {
     return dueDate.fold(null, dd => {
       const iconBackgoundColor =
         this.isPrescriptionExpiring || this.isPrescriptionExpired
-          ? customVariables.colorWhite
+          ? IOColors.white
           : customVariables.brandDarkGray;
 
       const textColor = this.isPrescriptionExpiring
         ? customVariables.calendarExpirableColor
         : this.isPrescriptionExpired
         ? customVariables.brandDarkGray
-        : customVariables.colorWhite;
+        : IOColors.white;
 
       return (
         <CalendarIconComponent

diff --git a/ts/components/messages/MedicalPrescriptionIdentifiersComponent.tsx b/ts/components/messages/MedicalPrescriptionIdentifiersComponent.tsx
@@ -6,6 +6,7 @@ import { PrescriptionData } from "../../../definitions/backend/PrescriptionData"
 import I18n from "../../i18n";
 import customVariables from "../../theme/variables";
 import CopyButtonComponent from "../CopyButtonComponent";
+import { IOColors } from "../core/variables/IOColors";
 
 type Props = Readonly<{
   prescriptionData: PrescriptionData;
@@ -16,7 +17,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: customVariables.contentPadding,
     backgroundColor: customVariables.brandGray,
     borderBottomWidth: 1,
-    borderBottomColor: customVariables.colorWhite
+    borderBottomColor: IOColors.white
   },
   row: {
     flexDirection: "row",