Add new 'base' color in themes (50) (#978)

YoussefHenna · web-flow · commit 257e39ea9b1b · 2024-12-18T13:10:02.000+01:00
* Add new `base` color to default themes

* Update 'brand' usage to be 'base'

* Update app tsx to use base

* Fix linter issues
diff --git a/example/src/AccordionExample.js b/example/src/AccordionExample.js
@@ -5,7 +5,7 @@ import Section, { Container } from "./Section";
 
 function AccordionExample({ theme }) {
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="Basic accordion with no additional styles">
         <AccordionGroup label={"Basic"}>
           <Text>Item 1</Text>
@@ -30,7 +30,7 @@ function AccordionExample({ theme }) {
         <AccordionGroup
           openColor={theme.colors.branding.primary}
           closedColor={theme.colors.branding.secondary}
-          caretColor={theme.colors.border.brand}
+          caretColor={theme.colors.border.base}
           icon={"folder"}
           iconSize={26}
           style={{ fontWeight: "normal" }}
diff --git a/example/src/ActionSheetExample.js b/example/src/ActionSheetExample.js
@@ -20,7 +20,7 @@ function ActionSheetExample({ theme }) {
   }, []);
 
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="Action Sheet">
         <ButtonSolid title="Open Action Sheet" onPress={showActionSheet} />
         <ActionSheet visible={visible} onClose={hideActionSheet}>
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -183,7 +183,7 @@ const DarkTheme = createTheme({
     name: "DarkTheme",
     colors: {
       background: {
-        brand: "#404040",
+        base: "#404040",
       },
       text: {
         normal: "white",
@@ -221,14 +221,14 @@ const OtherTheme = createTheme({
         secondary: "#824D74",
       },
       background: {
-        brand: "black",
+        base: "black",
       },
       text: {
         strong: "white",
         normal: "white",
       },
       border: {
-        brand: "#FDAF7B",
+        base: "#FDAF7B",
       },
     },
     typography: {
@@ -358,7 +358,7 @@ function Example({ title, children }: ExampleProps) {
       hasTopSafeArea={true}
       hasBottomSafeArea={true}
       scrollable={false}
-      style={{ backgroundColor: theme.colors.background.brand }}
+      style={{ backgroundColor: theme.colors.background.base }}
     >
       <View
         style={[
diff --git a/example/src/DatePickerExample.js b/example/src/DatePickerExample.js
@@ -12,7 +12,7 @@ function DatePickerExample({ theme }) {
   const [date3, setDate3] = React.useState(new Date());
 
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="Underline">
         <DatePicker
           label="Date (without date prop)"
diff --git a/example/src/SliderExample.tsx b/example/src/SliderExample.tsx
@@ -9,7 +9,7 @@ function SliderExample({ theme }) {
   const handleChange = (v) => setValue(v);
 
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="Uncontrolled">
         <Slider
           onValueChange={console.log}
@@ -28,7 +28,7 @@ function SliderExample({ theme }) {
       <Section title="Controlled">
         <Slider
           step={10}
-          maximumTrackTintColor={theme.colors.foreground.brand}
+          maximumTrackTintColor={theme.colors.foreground.base}
           minimumTrackTintColor={theme.colors.branding.primary}
           thumbTintColor={theme.colors.branding.primary}
           value={value}
@@ -43,7 +43,7 @@ function SliderExample({ theme }) {
       <Section title="Controlled with initial value">
         <Slider
           step={10}
-          maximumTrackTintColor={theme.colors.foreground.brand}
+          maximumTrackTintColor={theme.colors.foreground.base}
           minimumTrackTintColor={theme.colors.branding.primary}
           thumbTintColor={theme.colors.branding.primary}
           value={value2}
diff --git a/example/src/StarRatingExample.js b/example/src/StarRatingExample.js
@@ -6,7 +6,7 @@ function StarRatingExample({ theme }) {
   const [rating, setRating] = React.useState(0.5);
 
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="Star Rating">
         <StarRating rating={3.5} />
       </Section>
diff --git a/example/src/StepperExample.js b/example/src/StepperExample.js
@@ -10,7 +10,7 @@ function StepperExample({ theme }) {
   const handleChange = (v) => setValue(v);
 
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="With State">
         <Stepper value={value} onChange={handleChange} />
       </Section>
diff --git a/example/src/SurfaceExample.js b/example/src/SurfaceExample.js
@@ -5,7 +5,7 @@ import Section, { Container } from "./Section";
 
 function SurfaceExample({ theme }) {
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="overflow: 'hidden', backgroundColor: 'pink'">
         <Surface
           style={{
diff --git a/example/src/SwitchExample.js b/example/src/SwitchExample.js
@@ -8,7 +8,7 @@ function SwitchExample({ theme }) {
   const handleChange = (v) => toggle(v);
 
   return (
-    <Container style={{ backgroundColor: theme.colors.background.brand }}>
+    <Container style={{ backgroundColor: theme.colors.background.base }}>
       <Section title="Enabled">
         <Switch value={value} disabled={false} onValueChange={handleChange} />
       </Section>
diff --git a/packages/core/src/components/BottomSheet/BottomSheet.tsx b/packages/core/src/components/BottomSheet/BottomSheet.tsx
@@ -67,7 +67,7 @@ const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
   ) => {
     const theme = useTheme();
     const backgroundColor =
-      (style as ViewStyle)?.backgroundColor || theme.colors.background.brand;
+      (style as ViewStyle)?.backgroundColor || theme.colors.background.base;
 
     const snapPoints = snapPointsProp ?? [
       topSnapPosition,
@@ -102,15 +102,15 @@ const BottomSheet = React.forwardRef<BottomSheetComponent, BottomSheetProps>(
             : getSnapIndexFromPosition(initialSnapPosition)
         }
         handleIndicatorStyle={[
-          { backgroundColor: handleColor ?? theme.colors.border.brand },
+          { backgroundColor: handleColor ?? theme.colors.border.base },
           !showHandle ? { display: "none" } : {},
         ]}
         backgroundStyle={{
           backgroundColor,
           borderTopLeftRadius: topBorderRadius,
           borderTopRightRadius: topBorderRadius,
           borderWidth,
-          borderColor: borderColor ?? theme.colors.border.brand,
+          borderColor: borderColor ?? theme.colors.border.base,
         }}
         onChange={(index) =>
           // Convert bottom-sheet index to match our top-to-bottom ordering
diff --git a/packages/core/src/components/DatePicker/DatePicker.tsx b/packages/core/src/components/DatePicker/DatePicker.tsx
@@ -267,17 +267,17 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
 
   inputTextColor = colors.text.strong;
   if (disabled) {
-    activeColor = colors.border.brand;
+    activeColor = colors.border.base;
     placeholderColor = colors.text.light;
     borderColor = "transparent";
     underlineColor = "transparent";
-    backgroundColor = colors.border.brand;
+    backgroundColor = colors.border.base;
   } else {
     activeColor = inputBorderColorActive || colors.branding.primary;
     placeholderColor = colors.text.light;
     underlineColor =
-      viewStyles.borderColor ?? inputBorderColor ?? colors.border.brand;
-    backgroundColor = colors.background.brand;
+      viewStyles.borderColor ?? inputBorderColor ?? colors.border.base;
+    backgroundColor = colors.background.base;
   }
 
   const { lineHeight, ...subtitle1 } = typography.subtitle1;
@@ -560,7 +560,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
             style={[
               styles.picker,
               {
-                backgroundColor: colors.border.brand,
+                backgroundColor: colors.border.base,
               },
             ]}
           >
diff --git a/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx b/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx
@@ -15,8 +15,8 @@ const DeckSwiperCard: React.FC<
     style={[
       styles.card,
       {
-        backgroundColor: theme.colors.background.brand,
-        borderColor: theme.colors.border.brand,
+        backgroundColor: theme.colors.background.base,
+        borderColor: theme.colors.border.base,
       },
       style,
     ]}
diff --git a/packages/core/src/components/Divider.tsx b/packages/core/src/components/Divider.tsx
@@ -19,7 +19,7 @@ const Divider: React.FC<React.PropsWithChildren<Props>> = ({
     <View
       style={[
         {
-          backgroundColor: color || colors.border.brand,
+          backgroundColor: color || colors.border.base,
           height: StyleSheet.hairlineWidth,
         },
         style,
diff --git a/packages/core/src/components/Elevation.tsx b/packages/core/src/components/Elevation.tsx
@@ -33,7 +33,7 @@ const Elevation: React.FC<React.PropsWithChildren<Props>> = ({
       style={[
         {
           borderRadius,
-          backgroundColor: colors.background.brand,
+          backgroundColor: colors.background.base,
         },
         elevation ? { elevation } : null,
         style,
diff --git a/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx b/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx
@@ -129,8 +129,8 @@ const AudioPlayerWithInterface = React.forwardRef<
           testID="audio-player-interface"
           style={[
             {
-              backgroundColor: theme.colors.background.brand,
-              borderColor: theme.colors.border.brand,
+              backgroundColor: theme.colors.background.base,
+              borderColor: theme.colors.border.base,
             },
             styles.container,
             viewStyles,
@@ -166,7 +166,7 @@ const AudioPlayerWithInterface = React.forwardRef<
                 completedTrackColor ?? theme.colors.branding.primary
               }
               maximumTrackTintColor={
-                remainingTrackColor ?? theme.colors.border.brand
+                remainingTrackColor ?? theme.colors.border.base
               }
               thumbTintColor={thumbColor ?? theme.colors.branding.primary}
               minimumValue={0}
diff --git a/packages/core/src/components/Picker/dropdown/DropDownModalPicker.tsx b/packages/core/src/components/Picker/dropdown/DropDownModalPicker.tsx
@@ -28,8 +28,8 @@ const ModalPicker: React.FC<
   selectedIconName = "Feather/check",
   selectedIconColor = theme.colors.text.strong,
   selectedIconSize = 20,
-  dropDownBackgroundColor = theme.colors.background.brand,
-  dropDownBorderColor = theme.colors.border.brand,
+  dropDownBackgroundColor = theme.colors.background.base,
+  dropDownBorderColor = theme.colors.border.base,
   dropDownTextColor = theme.colors.text.strong,
   dropDownBorderWidth = 1,
   dropDownBorderRadius = 8,
diff --git a/packages/core/src/components/Picker/dropdown/DropDownPicker.tsx b/packages/core/src/components/Picker/dropdown/DropDownPicker.tsx
@@ -28,8 +28,8 @@ const DropDownPicker: React.FC<
   selectedIconName = "Feather/check",
   selectedIconColor = theme.colors.text.strong,
   selectedIconSize = 20,
-  dropDownBackgroundColor = theme.colors.background.brand,
-  dropDownBorderColor = theme.colors.border.brand,
+  dropDownBackgroundColor = theme.colors.background.base,
+  dropDownBorderColor = theme.colors.border.base,
   dropDownTextColor = theme.colors.text.strong,
   dropDownBorderWidth = 1,
   dropDownBorderRadius = 8,
diff --git a/packages/core/src/components/PinInput/PinInput.tsx b/packages/core/src/components/PinInput/PinInput.tsx
@@ -97,7 +97,7 @@ const PinInput = React.forwardRef<NativeTextInput, PinInputProps>(
           testID="default-code-input-cell"
           style={[
             styles.cell,
-            { borderColor: theme.colors.border.brand },
+            { borderColor: theme.colors.border.base },
             viewStyles,
             isFocused && focusedBorderWidth
               ? { borderWidth: focusedBorderWidth }
diff --git a/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx b/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx
@@ -24,7 +24,7 @@ export const CircularProgress: React.FC<
   thickness = 10,
   trackThickness = thickness,
   color = theme.colors.branding.primary,
-  trackColor = theme.colors.border.brand,
+  trackColor = theme.colors.border.base,
   trackOpacity = 1,
   showTrack = true,
   animationDuration = DEFAULT_ANIMATION_DURATION,
diff --git a/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx b/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx
@@ -21,7 +21,7 @@ export const LinearProgress: React.FC<ValueProgressProps> = ({
   thickness = 10,
   trackThickness = thickness,
   color = theme.colors.branding.primary,
-  trackColor = theme.colors.border.brand,
+  trackColor = theme.colors.border.base,
   trackOpacity = 1,
   showTrack = true,
   animationDuration = DEFAULT_ANIMATION_DURATION,
diff --git a/packages/core/src/components/ScreenContainer.tsx b/packages/core/src/components/ScreenContainer.tsx
@@ -36,7 +36,7 @@ function ScreenContainer({
   ...rest
 }: ScreenContainerProps) {
   const backgroundColor =
-    StyleSheet.flatten(style)?.backgroundColor || theme.colors.background.brand;
+    StyleSheet.flatten(style)?.backgroundColor || theme.colors.background.base;
 
   const edges: Edge[] = [];
   if (hasSafeArea || hasTopSafeArea) {
diff --git a/packages/core/src/components/SectionList/SectionHeader.tsx b/packages/core/src/components/SectionList/SectionHeader.tsx
@@ -22,7 +22,7 @@ export const DefaultSectionHeader = withTheme(
       <Text
         testID="default-section-header"
         style={{
-          color: theme.colors.background.brand,
+          color: theme.colors.background.base,
           backgroundColor: theme.colors.branding.primary,
           fontSize: 16,
           padding: 10,
diff --git a/packages/core/src/components/Surface.tsx b/packages/core/src/components/Surface.tsx
@@ -38,7 +38,7 @@ const Surface: React.FC<React.PropsWithChildren<Props>> = ({
     if (backgroundColor) {
       return backgroundColor;
     } else {
-      return colors.background.brand;
+      return colors.background.base;
     }
   };
 
diff --git a/packages/core/src/components/SwipeableItem/SwipeableItem.tsx b/packages/core/src/components/SwipeableItem/SwipeableItem.tsx
@@ -207,14 +207,14 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
         <Icon
           name={item.icon}
           size={item.iconSize || 25}
-          color={item.color || theme.colors.background.brand}
+          color={item.color || theme.colors.background.base}
         />
       )}
       {item.title && (
         <Text
           style={[
             textStyles,
-            { color: item.color || theme.colors.background.brand },
+            { color: item.color || theme.colors.background.base },
           ]}
         >
           {item.title}
@@ -294,7 +294,7 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
           style={[
             styles.surfaceContainer,
             {
-              backgroundColor: theme.colors.background.brand,
+              backgroundColor: theme.colors.background.base,
             },
             surfaceContainerStyles,
           ]}
diff --git a/packages/core/src/components/Swiper/Swiper.tsx b/packages/core/src/components/Swiper/Swiper.tsx
@@ -49,7 +49,7 @@ const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
       prevTitleColor,
       nextTitleColor,
       dotsTouchable = true,
-      dotColor = theme?.colors.foreground.brand,
+      dotColor = theme?.colors.foreground.base,
       dotActiveColor = theme?.colors.branding.primary,
       data,
       keyExtractor,
diff --git a/packages/core/src/components/TabView/TabView.tsx b/packages/core/src/components/TabView/TabView.tsx
@@ -137,7 +137,7 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
           ) : null
         }
         style={{
-          backgroundColor: tabsBackgroundColor || theme.colors.background.brand,
+          backgroundColor: tabsBackgroundColor || theme.colors.background.base,
         }}
       />
     );
diff --git a/packages/core/src/components/Table/Table.tsx b/packages/core/src/components/Table/Table.tsx
@@ -27,7 +27,7 @@ export interface Props<T> extends TableProps, ScrollViewProps {
 const Table = <T extends object>({
   theme,
   borderWidth = 1,
-  borderColor = theme.colors.border.brand,
+  borderColor = theme.colors.border.base,
   borderStyle = "solid",
   drawTopBorder = true,
   drawBottomBorder = false,
diff --git a/packages/core/src/components/TextField.tsx b/packages/core/src/components/TextField.tsx
@@ -270,7 +270,7 @@ class TextField extends React.Component<Props, State> {
       placeholderColor = colors.text.light;
       borderColor = "transparent";
       underlineColor = "transparent";
-      backgroundColor = colors.border.brand;
+      backgroundColor = colors.border.base;
     } else {
       activeColor = error ? colors.text.danger : activeBorderColorProp;
       placeholderColor = borderColor = colors.text.light;
diff --git a/packages/core/src/deprecated-components/AvatarEdit.tsx b/packages/core/src/deprecated-components/AvatarEdit.tsx
@@ -29,8 +29,8 @@ const AvatarEdit: React.FC<React.PropsWithChildren<Props>> = ({
 }) => {
   const colorStyles = {
     editBackgroundColor: theme.colors.branding.primary,
-    editIconColor: theme.colors.background.brand,
-    editBorderColor: theme.colors.background.brand,
+    editIconColor: theme.colors.background.base,
+    editBorderColor: theme.colors.background.base,
   };
 
   const dimensions = {
diff --git a/packages/core/src/deprecated-components/Card.tsx b/packages/core/src/deprecated-components/Card.tsx
diff --git a/packages/core/src/deprecated-components/DeprecatedButton.tsx b/packages/core/src/deprecated-components/DeprecatedButton.tsx
diff --git a/packages/core/src/deprecated-components/DeprecatedFAB.tsx b/packages/core/src/deprecated-components/DeprecatedFAB.tsx
diff --git a/packages/core/src/deprecated-components/FieldSearchBarFull.tsx b/packages/core/src/deprecated-components/FieldSearchBarFull.tsx
diff --git a/packages/core/src/deprecated-components/RowBodyIcon.tsx b/packages/core/src/deprecated-components/RowBodyIcon.tsx
diff --git a/packages/maps/src/components/marker-cluster/MapMarkerClusterView.tsx b/packages/maps/src/components/marker-cluster/MapMarkerClusterView.tsx
diff --git a/packages/theme/src/DefaultTheme.ts b/packages/theme/src/DefaultTheme.ts
