Merge pull request #154 from BouyguesTelecom/update/colors

update colors
BouyguesTelecom · Oct 15, 2024 · 5c39e2c · 5c39e2c
2 parents 2797d1a + 8d31b0c
commit 5c39e2c
Show file tree

Hide file tree

Showing 20 changed files with 91 additions and 122 deletions.
diff --git a/examples/react-template/screens/Breadcrumb.tsx b/examples/react-template/screens/Breadcrumb.tsx
@@ -29,7 +29,7 @@ export const BreadcrumScreen = (): JSX.Element => {
         Next to BreadcrumbItem
       </Button>
 
-      <Spacer size={SpacerSize.MEDIUM} />
+      <Spacer size={SpacerSize.FOUR} />
 
       <Text typo={[TypographyBold.TEXT_WEIGHT_SEMIBOLD]}>Simple Breadcrumb</Text>
       <Breadcrumb>

diff --git a/examples/react-template/screens/Card.tsx b/examples/react-template/screens/Card.tsx
@@ -71,7 +71,7 @@ export const CardScreen = (): JSX.Element => {
         </ColumnsItem>
       </Columns>
       <Title level={TitleLevels.TWO}>CardImage & markup </Title>
-      <Spacer size={SpacerSize.MEDIUM} />
+      <Spacer size={SpacerSize.FOUR} />
       <Card active backgroundColor={TrilogyColor.BACKGROUND}>
         <CardImage src="https://i.etsystatic.com/10951167/r/il/df66c4/1860902191/il_570xN.1860902191_kuoj.jpg" />
         <CardContent>
@@ -91,7 +91,7 @@ export const CardScreen = (): JSX.Element => {
       </Card>
 
       <Title level={TitleLevels.TWO}>CardImage & markup </Title>
-      <Spacer size={SpacerSize.MEDIUM} />
+      <Spacer size={SpacerSize.FOUR} />
       <Card markup={CardMarkup.A} backgroundColor={TrilogyColor.BACKGROUND}>
         <CardImage src="https://i.etsystatic.com/10951167/r/il/df66c4/1860902191/il_570xN.1860902191_kuoj.jpg" />
         <CardContent>

diff --git a/examples/react-template/screens/Checkbox.tsx b/examples/react-template/screens/Checkbox.tsx
@@ -45,7 +45,7 @@ export const CheckboxScreen = (): JSX.Element => {
             />
           </ColumnsItem>
         </Columns>
-        <Spacer size={SpacerSize.MEDIUM} />
+        <Spacer size={SpacerSize.FOUR} />
         <Columns>
           <ColumnsItem size={6} centered>
             <Checkbox
@@ -71,7 +71,7 @@ export const CheckboxScreen = (): JSX.Element => {
             />
           </ColumnsItem>
         </Columns>
-        <Spacer size={20} />
+        <Spacer size={8} />
 
         <Checkbox
           checked

diff --git a/examples/react-template/screens/Otp.tsx b/examples/react-template/screens/Otp.tsx
@@ -18,23 +18,23 @@ export const OtpScreen = (): JSX.Element => {
         label="Set your OTP"
         autoFocus
       />
-      <Spacer size={SpacerSize.HUGE} />
+      <Spacer size={SpacerSize.SIX} />
 
       <Otp
         disabled
         onChange={(code) => console.log("onChange", code)}
         onCompleted={(code) => console.log("onCompleted", code)}
         label="OTP Disabled"
       />
-      <Spacer size={SpacerSize.HUGE} />
+      <Spacer size={SpacerSize.SIX} />
       <Otp
         error
         errorMessage={"This is an error message"}
         onChange={(code) => console.log("onChange", code)}
         onCompleted={(code) => console.log("onCompleted", code)}
         label="OTP Error"
       />
-      <Spacer size={SpacerSize.HUGE} />
+      <Spacer size={SpacerSize.SIX} />
 
       <Otp
         errorMessage={"This is a message"}

diff --git a/examples/react-template/screens/Radio.tsx b/examples/react-template/screens/Radio.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import { Spacer, SpacerSize, TextLevels, TypographyAlign } from '@trilogy-ds/react'
 import {
   AutoLayout,
   Columns,
@@ -13,38 +13,35 @@ import {
   Text,
   Title,
   TitleLevels,
-} from "@trilogy-ds/react/components";
-import { RadioList } from "@trilogy-ds/react/components/radio/list";
-import { Spacer, SpacerSize, TypographyAlign } from "@trilogy-ds/react";
+} from '@trilogy-ds/react/components'
+import { RadioList } from '@trilogy-ds/react/components/radio/list'
+import * as React from 'react'
 
 export const RadioScreen = (): JSX.Element => {
   return (
     <AutoLayout>
       <Container>
         <Rows>
           <RowItem>
-          <Text typo={TypographyAlign.TEXT_CENTERED}>
-          Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
-          consectetur, adipisci velit...
-        </Text>
+            <Text typo={TypographyAlign.TEXT_CENTERED}>
+              Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
+            </Text>
           </RowItem>
           <RowItem>
-          <Text typo={TypographyAlign.TEXT_CENTERED}>
-          Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
-          consectetur, adipisci velit...
-        </Text>
+            <Text typo={TypographyAlign.TEXT_CENTERED}>
+              Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
+            </Text>
           </RowItem>
-
         </Rows>
 
         <Columns>
           <ColumnsItem size={6} centered>
             <Radio
               tile
               iconTile={IconName.CHECK_CIRCLE}
-              label="Lorem ipsum dolor"
-              name="radio1"
-              value="default value 1"
+              label='Lorem ipsum dolor'
+              name='radio1'
+              value='default value 1'
               // eslint-disable-next-line no-console
               onChange={(e) => console.log(e.radioValue, e.radioChecked)}
               checked
@@ -54,23 +51,23 @@ export const RadioScreen = (): JSX.Element => {
             <Radio
               iconTile={IconName.CHECK_CIRCLE}
               tile
-              label="Lorem ipsum dolor"
-              name="radio1"
-              value="default value 1"
+              label='Lorem ipsum dolor'
+              name='radio1'
+              value='default value 1'
               // eslint-disable-next-line no-console
               onChange={(e) => console.log(e.radioValue, e.radioChecked)}
             />
           </ColumnsItem>
         </Columns>
-        <Spacer size={SpacerSize.MEDIUM} />
+        <Spacer size={SpacerSize.FIVE} />
         <Columns>
           <ColumnsItem size={6} centered>
             <Radio
               tile
               iconTile={IconName.CHECK_CIRCLE}
-              label="Lorem ipsum dolor"
-              name="radio1"
-              value="default value 1"
+              label='Lorem ipsum dolor'
+              name='radio1'
+              value='default value 1'
               // eslint-disable-next-line no-console
               onChange={(e) => console.log(e.radioValue, e.radioChecked)}
             />
@@ -80,49 +77,27 @@ export const RadioScreen = (): JSX.Element => {
               disabled
               iconTile={IconName.CHECK_CIRCLE}
               tile
-              label="Lorem ipsum dolor"
-              name="radio1"
-              value="default value 1"
+              label='Lorem ipsum dolor'
+              name='radio1'
+              value='default value 1'
               // eslint-disable-next-line no-console
               onChange={(e) => console.log(e.radioValue, e.radioChecked)}
             />
           </ColumnsItem>
         </Columns>
-        <Spacer size={20} />
+        <Spacer size={8} />
         <RadioList isMobile>
-          <Radio
-            checked
-            iconTile={IconName.EYE}
-            tile
-            horizontalTile
-            label="abc narrow"
-            narrow
-            marginless
-          />
-          <Radio
-            disabled
-            horizontalTile
-            label="abc narrow"
-            tile
-            narrow
-            marginless
-          />
-          <Radio
-            description={"lorem kenenf ns k "}
-            tile
-            horizontalTile
-            label="abc narrow"
-            narrow
-            marginless
-          />
+          <Radio checked iconTile={IconName.EYE} tile horizontalTile label='abc narrow' narrow marginless />
+          <Radio disabled horizontalTile label='abc narrow' tile narrow marginless />
+          <Radio description={'lorem kenenf ns k '} tile horizontalTile label='abc narrow' narrow marginless />
 
           <Radio
             tile
             horizontalTile
-            label="Radio tile"
-            name="radio"
-            value="default value 1"
-            description="Neque porro quisquam est qui dolorem ipsum quia dolor sit amet"
+            label='Radio tile'
+            name='radio'
+            value='default value 1'
+            description='Neque porro quisquam est qui dolorem ipsum quia dolor sit amet'
             // eslint-disable-next-line no-console
             onChange={(e) => console.log(e.radioValue, e.radioChecked)}
             checked={false}
@@ -142,40 +117,26 @@ export const RadioScreen = (): JSX.Element => {
           <Icon name={IconName.EXCLAMATION_CIRCLE} />
           <Rows>
             <RowItem>
-              <Title
-                level={TitleLevels.THREE}
-                markup={"div"}
-                className={"is-marginless"}
-              >
+              <Title level={TitleLevels.THREE} markup={'div'} className={'is-marginless'}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               </Title>
             </RowItem>
             <RowItem>
-              <Text
-                level={TitleLevels.THREE}
-                markup={"div"}
-                className={"is-marginless"}
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Curabitur pretium id sem quis auctor. Lorem ipsum dolor sit
-                amet, consectetur adipiscing elit. Sed vehicula semper leo, a
-                scelerisque erat tristique id.
+              <Text level={TextLevels.THREE} markup={'div'} className={'is-marginless'}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium id sem quis auctor. Lorem
+                ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula semper leo, a scelerisque erat tristique
+                id.
               </Text>
             </RowItem>
           </Rows>
         </Radio>
-        <Spacer size={20} />
+        <Spacer size={8} />
         <RadioList isMobile>
-          <Radio checked label="abc narrow" narrow marginless />
-          <Radio disabled label="abc narrow" narrow marginless />
-          <Radio
-            description={"lorem kenenf ns k "}
-            label="abc narrow"
-            narrow
-            marginless
-          />
+          <Radio checked label='abc narrow' narrow marginless />
+          <Radio disabled label='abc narrow' narrow marginless />
+          <Radio description={'lorem kenenf ns k '} label='abc narrow' narrow marginless />
         </RadioList>
       </Container>
     </AutoLayout>
-  );
-};
+  )
+}
diff --git a/examples/react-template/screens/Sticker.tsx b/examples/react-template/screens/Sticker.tsx
@@ -16,7 +16,7 @@ export const StickerScreen = (): JSX.Element => {
         <Sticker>Sticker</Sticker>
         <Sticker variant={"ACCENT"}>Sticker</Sticker>
         <Sticker variant={"INFO"}>Sticker</Sticker>
-        <Spacer size={SpacerSize.HUGE} horizontal />
+        <Spacer size={SpacerSize.SIX} horizontal />
 
         <Sticker variant={VariantState.ACCENT} small>
           Sticker
@@ -28,7 +28,7 @@ export const StickerScreen = (): JSX.Element => {
           Sticker
         </Sticker>
 
-        <Spacer size={SpacerSize.HUGE} />
+        <Spacer size={SpacerSize.SIX} />
         <Box hat>
           <Sticker hat>Im a sticker hat</Sticker>
           <BoxContent>

diff --git a/packages/react/components/accordion/item/AccordionItem.native.tsx b/packages/react/components/accordion/item/AccordionItem.native.tsx
@@ -60,7 +60,7 @@ const AccordionItem = ({
       borderWidth: 1,
       borderColor:
         (disabled && getColorStyle(TrilogyColor.DISABLED_FADE)) ||
-        getColorStyle(TrilogyColor.MAIN_FADE)
+        getColorStyle(TrilogyColor.NEUTRAL)
     },
     bodyBackground: {
       borderRadius: 6,

diff --git a/packages/react/components/autocomplete/menu/AutoCompleteMenu.native.tsx b/packages/react/components/autocomplete/menu/AutoCompleteMenu.native.tsx
@@ -12,7 +12,7 @@ const AutoCompleteMenuNative = ({ suggestions, handleSelectItem }: AutoCompleteM
       backgroundColor: getColorStyle(TrilogyColor.BACKGROUND),
       borderWidth: 1,
       borderRadius: 3,
-      borderColor: getColorStyle(TrilogyColor.MAIN_FADE),
+      borderColor: getColorStyle(TrilogyColor.NEUTRAL),
       width: '100%',
       maxHeight: 165,
       flexGrow: 1,

diff --git a/packages/react/components/box/Box.native.tsx b/packages/react/components/box/Box.native.tsx
@@ -55,7 +55,7 @@ const Box = ({
       borderWidth: (flat && 1) || (active && 2) || 0,
       borderColor: active
         ? getColorStyle(TrilogyColor.MAIN)
-        : getColorStyle(TrilogyColor.MAIN_FADE),
+        : getColorStyle(TrilogyColor.NEUTRAL),
       marginTop: hat ? 35 : 0,
       flex: fullheight ? 1 : 0,
     },

diff --git a/packages/react/components/card/Card.native.tsx b/packages/react/components/card/Card.native.tsx
@@ -55,6 +55,7 @@ const Card = ({
       borderColor:
         (flat && borderColor) ||
         (active && getColorStyle(TrilogyColor.MAIN)) ||
+        (active === false && getColorStyle(TrilogyColor.NEUTRAL)) ||
         "transparent",
       borderRadius: cardRadius,
       backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : colorBgc,

diff --git a/packages/react/components/checkbox/Checkbox.native.tsx b/packages/react/components/checkbox/Checkbox.native.tsx
@@ -78,7 +78,7 @@ const Checkbox = ({
       borderColor:
         (disabled && getColorStyle(TrilogyColor.DISABLED_FADE)) ||
         (_checked && getColorStyle(TrilogyColor.MAIN)) ||
-        getColorStyle(TrilogyColor.MAIN_FADE),
+        getColorStyle(TrilogyColor.NEUTRAL),
       borderRadius: 6,
       textAlign: "center",
       alignItems: "center",

diff --git a/packages/react/components/chips/Chips.native.tsx b/packages/react/components/chips/Chips.native.tsx
@@ -43,7 +43,7 @@ const Chips = ({
       paddingTop: 6,
       paddingBottom: 5,
       margin: 6,
-      borderColor: active ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.MAIN_FADE),
+      borderColor: active ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.NEUTRAL),
       borderWidth: 1,
       flexDirection: "row",
     },

diff --git a/packages/react/components/input/Input.native.tsx b/packages/react/components/input/Input.native.tsx
@@ -248,7 +248,7 @@ const Input = ({
         (status && status === 'error' && getColorStyle(StatusState.ERROR)) ||
         (status && status === 'default' && inputColor) ||
         (isFocused && getColorStyle(TrilogyColor.MAIN)) ||
-        getColorStyle(TrilogyColor.MAIN_FADE),
+        getColorStyle(TrilogyColor.NEUTRAL),
       height: 46,
       width: '100%',
     },
@@ -367,7 +367,7 @@ const Input = ({
             onBlur?.(e)
           }}
           placeholder={placeholder}
-          placeholderTextColor={disabled ? getColorStyle(TrilogyColor.DISABLED) : getColorStyle(TrilogyColor.MAIN)}
+          placeholderTextColor={disabled ? getColorStyle(TrilogyColor.DISABLED) : getColorStyle(TrilogyColor.FONT_PLACEHOLDER)}
           style={styles.input}
           {...others}
         />

diff --git a/packages/react/components/otp/Otp.native.tsx b/packages/react/components/otp/Otp.native.tsx
@@ -78,7 +78,7 @@ const Otp = ({
         (disabled && getColorStyle(TrilogyColor.DISABLED)) ||
         (activated && getColorStyle(TrilogyColor.MAIN)) ||
         (error && getColorStyle(TrilogyColor.ERROR)) ||
-        getColorStyle(TrilogyColor.MAIN_FADE),
+        getColorStyle(TrilogyColor.NEUTRAL),
       borderWidth: 1,
       borderRadius: 4,
       marginHorizontal: 5,

diff --git a/packages/react/components/radio/Radio.native.tsx b/packages/react/components/radio/Radio.native.tsx
@@ -46,7 +46,7 @@ const Radio = ({
   const getRadioInsideColor = (isDisabled: boolean, isMain: boolean) => {
     if (isDisabled) return getColorStyle(TrilogyColor.DISABLED_FADE)
     if (isMain) return getColorStyle(TrilogyColor.MAIN)
-    return getColorStyle(TrilogyColor.MAIN_FADE)
+    return getColorStyle(TrilogyColor.NEUTRAL)
   }
 
   useEffect(() => {