Merge pull request #112 from BouyguesTelecom/remove/SomeColors

Remove/some colors
BouyguesTelecom · Sep 12, 2024 · c0a0917 · c0a0917
2 parents a2be802 + 13c5b26
commit c0a0917
Show file tree

Hide file tree

Showing 63 changed files with 195 additions and 193 deletions.
diff --git a/examples/react-template/screens/Box.tsx b/examples/react-template/screens/Box.tsx
@@ -212,7 +212,7 @@ export const BoxScreen = (): JSX.Element => {
           </ColumnsItem>
           <ColumnsItem size={6}>
             <Box leftBorder={TrilogyColor.WARNING} className='is-fullheight'>
-              <BoxContent background={"NEUTRAL_LIGHT"}>
+              <BoxContent background={"FADE_NEUTRAL"}>
                 <Title level={TitleLevels.FOUR}>Highlited box</Title>
                 <Text>
                   Eget tincidunt tincidunt id massa sollicitudin. Egestas felis

diff --git a/examples/react-template/screens/Pagination.tsx b/examples/react-template/screens/Pagination.tsx
@@ -13,6 +13,11 @@ export const PaginationScreen = (): JSX.Element => {
       <Section>
         <Title level={TitleLevels.THREE}>Pagination</Title>
         <Divider />
+        <Pagination
+          onClick={(e) => console.log("event", e)}
+          count={50}
+          href={(page) => `?page=${page}`}
+        />
       </Section>
       <Section>
         <Pagination

diff --git a/examples/react-template/screens/Progress.tsx b/examples/react-template/screens/Progress.tsx
@@ -4,7 +4,7 @@ import { StatusState, TypographyBold, Section, Title, TitleLevels, Divider, Prog
 export const ProgressScreen = (): JSX.Element => {
 
   return (
-    <Section backgroundSrc={'https://design.bouyguestelecom.fr/v1/card-sample.200bd9f7.png'}>
+    <Section>
       <Section>
         <Title level={TitleLevels.THREE}>Progress Bar</Title>
 
@@ -57,7 +57,7 @@ export const ProgressScreen = (): JSX.Element => {
 
         <Divider />
 
-        <ProgressRadial percent={30} secondPercent={30}>
+        <ProgressRadial percent={30} secondPercent={30} alert={AlertState.INFO} secondAlert={AlertState.WARNING}>
           <Title level={TitleLevels.THREE} marginless>60</Title>
           <Text level={TextLevels.ONE} marginless>/ 100 Go</Text>
         </ProgressRadial>

diff --git a/packages/react/components/box/Box.native.tsx b/packages/react/components/box/Box.native.tsx
@@ -75,7 +75,7 @@ const Box = ({
     skeleton: {
       width: "100%",
       minHeight: 50,
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT, 0),
+      backgroundColor: getColorStyle(TrilogyColor.FADE_NEUTRAL),
       overflow: "hidden",
       borderRadius: boxRadius,
     },

diff --git a/packages/react/components/button/Button.stories.tsx b/packages/react/components/button/Button.stories.tsx
@@ -16,7 +16,7 @@ const TemplateMultiple: ComponentStory<typeof Button> = (args) => (
   <ButtonList>
     <Button variant={ButtonVariant.PRIMARY} {...args} />
     <Button variant={ButtonVariant.SECONDARY} {...args} />
-    <Button variant={ButtonVariant.ACCENT} disabled {...args} />
+    <Button variant={ButtonVariant.CONVERSION} disabled {...args} />
     <Button variant={ButtonVariant.GHOST} loading {...args} />
   </ButtonList>
 );
@@ -41,7 +41,7 @@ Secondary.args = {
 export const Accent = Template.bind({});
 Accent.args = {
   children: "Button accent",
-  variant: ButtonVariant.ACCENT,
+  variant: ButtonVariant.CONVERSION,
 };
 
 export const Ghost = Template.bind({});

diff --git a/packages/react/components/card/Card.native.tsx b/packages/react/components/card/Card.native.tsx
@@ -81,7 +81,7 @@ const Card = ({
     skeleton: {
       width: "100%",
       minHeight: 50,
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT),
+      backgroundColor: getColorStyle(TrilogyColor.FADE_NEUTRAL),
       overflow: "hidden",
       borderRadius: cardRadius,
     },

diff --git a/packages/react/components/chips/Chips.native.tsx b/packages/react/components/chips/Chips.native.tsx
@@ -34,7 +34,7 @@ const Chips = ({
   const styles = StyleSheet.create({
     chips: {
       backgroundColor:
-        (disabled && getColorStyle(TrilogyColor.NEUTRAL_LIGHT)) ||
+        (disabled && getColorStyle(TrilogyColor.FADE_NEUTRAL)) ||
         (activeItem && getColorStyle(TrilogyColor.MAIN)) ||
         getColorStyle(TrilogyColor.BACKGROUND),
       borderRadius: 30,

diff --git a/packages/react/components/hero/Hero.native.tsx b/packages/react/components/hero/Hero.native.tsx
@@ -111,7 +111,7 @@ const Hero = ({
             setOverlapHeight(height)
           }}
         >
-          <Box background={TrilogyColor.NEUTRAL_LIGHT}>
+          <Box background={TrilogyColor.FADE_NEUTRAL}>
             <View style={{ marginBottom: secondOverlapHeight / 2 }} />
             {overlap && typeof overlap !== "boolean" ? overlap[0] : null}
           </Box>

diff --git a/packages/react/components/icon/Icon.native.tsx b/packages/react/components/icon/Icon.native.tsx
@@ -119,7 +119,7 @@ const Icon = ({
       width: circledWidth,
       height: circledWidth,
       borderRadius: iconSkeletonRadius,
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT),
+      backgroundColor: getColorStyle(TrilogyColor.FADE_NEUTRAL),
       overflow: "hidden",
     },
   })

diff --git a/packages/react/components/input/gauge/hook/useGauge.tsx b/packages/react/components/input/gauge/hook/useGauge.tsx
@@ -36,7 +36,7 @@ export const useGauge = ({ validationRules, inputValue }: IParams) => {
     if (calc <= 50 && calc > 0) return getColorStyle(TrilogyColor.ERROR)
     if (calc <= 99 && calc > 50) return getColorStyle(TrilogyColor.WARNING)
     if (calc === 100) return getColorStyle(TrilogyColor.SUCCESS)
-    return getColorStyle(TrilogyColor.NEUTRAL_LIGHT)
+    return getColorStyle(TrilogyColor.FADE_NEUTRAL)
   }, [points, nbAllVerifies])
 
   const LengthvalidationRulesText = useMemo(() => {

diff --git a/packages/react/components/list/item/ListItem.native.tsx b/packages/react/components/list/item/ListItem.native.tsx
@@ -56,7 +56,7 @@ const ListItem = ({
       borderRadius: 30,
     },
     swipeInfo: {
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT),
+      backgroundColor: getColorStyle(TrilogyColor.FADE_NEUTRAL),
       width: 2,
       height: 20,
       borderRadius: 6,

diff --git a/packages/react/components/progress/radial/ProgressRadial.native.tsx b/packages/react/components/progress/radial/ProgressRadial.native.tsx
@@ -66,13 +66,13 @@ const ProgressRadial = ({
       backgroundColor: color,
     },
     labelDisk: {
-      color: getColorStyle(TrilogyColor.BACKGROUND),
+      color: getColorStyle(TrilogyColor.FONT),
       textAlign: "center",
       fontSize: 20,
       fontWeight: "500",
     },
     descriptionDisk: {
-      color: getColorStyle(TrilogyColor.BACKGROUND),
+      color: getColorStyle(TrilogyColor.FONT),
       textAlign: "center",
       fontWeight: "400",
     },

diff --git a/packages/react/components/progress/radial/ProgressRadial.tsx b/packages/react/components/progress/radial/ProgressRadial.tsx
@@ -6,6 +6,7 @@ import { hashClass } from '../../../helpers';
 import { useTrilogyContext } from '../../../context';
 import { Title, TitleLevels } from '../../title'
 import { Text, TextLevels } from '../../text'
+import {getColorStyle} from "@/objects/facets/Color";
 
 const ProgressRadial = ({
   children,
@@ -42,8 +43,7 @@ const ProgressRadial = ({
 
     let styleBackground;
     styleBackground = `radial-gradient(circle at center, white 58%, transparent 58.1%),`;
-    styleBackground += `conic-gradient(#0C7B91 0 ${firstProgressDegree}deg, #25465f ${secondProgressStartDegree}deg ${secondProgressStartDegree + secondProgressDegree}deg, gainsboro ${secondProgressStartDegree + secondProgressDegree}deg 360deg)`;
-
+    styleBackground += `conic-gradient(#0C7B91 0 ${firstProgressDegree}deg, #${getColorStyle('MAIN')} ${secondProgressStartDegree}deg ${secondProgressStartDegree + secondProgressDegree}deg, gainsboro ${secondProgressStartDegree + secondProgressDegree}deg 360deg)`;
     progressRadial.style.background = styleBackground;
   };
 

diff --git a/packages/react/components/range/Range.tsx b/packages/react/components/range/Range.tsx
@@ -53,13 +53,12 @@ const Range = ({
     if (refTrack.current) {
       const track = refTrack.current as HTMLElement
       track.style.background = `linear-gradient(to right, ${getColorStyle(
-        TrilogyColor.NEUTRAL_LIGHT,
-        1
+        TrilogyColor.FADE_NEUTRAL
       )} ${(cursorMin / max) * 100}% , ${getColorStyle(TrilogyColor.MAIN, 1)} ${
         (cursorMin / max) * 100
       }% , ${getColorStyle(TrilogyColor.MAIN, 1)} ${
         (cursorMax / max) * 100
-      }%, ${getColorStyle(TrilogyColor.NEUTRAL_LIGHT, 1)} ${
+      }%, ${getColorStyle(TrilogyColor.FADE_NEUTRAL)} ${
         (cursorMax / max) * 100
       }%) `
     }

diff --git a/packages/react/components/segment-control/SegmentControl.native.tsx b/packages/react/components/segment-control/SegmentControl.native.tsx
@@ -54,7 +54,7 @@ const SegmentControl = ({
     segmentedControl: {
       flexDirection: "row",
       width: "100%",
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL, 1),
       borderRadius: 4,
       padding: 4,
       paddingRight: -4,

diff --git a/packages/react/components/segment-control/item/SegmentControlItem.native.tsx b/packages/react/components/segment-control/item/SegmentControlItem.native.tsx
@@ -33,7 +33,7 @@ const SegmentControlItem = ({
         (activeItem && getColorStyle(TrilogyColor.MAIN)) ||
         (inverted && getColorStyle(TrilogyColor.BACKGROUND)) ||
         (disabled && getColorStyle(TrilogyColor.DISABLED, 1)) ||
-        getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+        getColorStyle(TrilogyColor.NEUTRAL, 1),
     },
     text: {
       paddingHorizontal: 16,

diff --git a/packages/react/components/table/td/TableTd.native.tsx b/packages/react/components/table/td/TableTd.native.tsx
@@ -16,8 +16,8 @@ const TableTd = ({ children, ...others }: TableTdProps): JSX.Element => {
       padding: 10,
       borderBottomWidth: 0.2,
       borderRightWidth: 0.2,
-      borderBottomColor: getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
-      borderRightColor: getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+      borderBottomColor: getColorStyle(TrilogyColor.NEUTRAL, 1),
+      borderRightColor: getColorStyle(TrilogyColor.NEUTRAL, 1),
     },
     text: {
       color: getColorStyle(TrilogyColor.MAIN),

diff --git a/packages/react/components/table/th/TableTh.native.tsx b/packages/react/components/table/th/TableTh.native.tsx
@@ -15,9 +15,9 @@ const TableTh = ({ children, ...others }: TableThProps): JSX.Element => {
     tableTh: {
       flexDirection: "column",
       flex: 1,
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL, 1),
       padding: 10,
-      borderRightColor: getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+      borderRightColor: getColorStyle(TrilogyColor.NEUTRAL, 1),
       borderRightWidth: 0.2,
     },
     title: {

diff --git a/packages/react/components/table/tr/TableTr.native.tsx b/packages/react/components/table/tr/TableTr.native.tsx
@@ -27,7 +27,7 @@ const TableTr = ({
     },
     expendable: {
       width: "100%",
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL, 1),
       padding: 10,
     },
   })

diff --git a/packages/react/components/tabs/item/TabsItem.native.tsx b/packages/react/components/tabs/item/TabsItem.native.tsx
@@ -32,7 +32,7 @@ const TabsItem = ({
 
   const getIconColor = React.useMemo(() => {
     if (inverted) {
-      if (disabled) return TrilogyColor.NEUTRAL_LIGHT
+      if (disabled) return TrilogyColor.FADE_NEUTRAL
       return TrilogyColor.BACKGROUND
     }
     if (disabled) return TrilogyColor.DISABLED

diff --git a/packages/react/components/tag/Tag.native.tsx b/packages/react/components/tag/Tag.native.tsx
@@ -51,7 +51,7 @@ const Tag = ({
       backgroundColor:
         (inverted && getColorStyle(TrilogyColor.BACKGROUND)) ||
         (variant && (backgroundColor as TrilogyColor)) ||
-        getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+        getColorStyle(TrilogyColor.NEUTRAL, 1),
     },
     text: {
       alignSelf: "center",

diff --git a/packages/react/components/text/Text.native.tsx b/packages/react/components/text/Text.native.tsx
@@ -80,7 +80,7 @@ const Text = ({
         (level && level == "THREE" && 5) ||
         3,
       borderWidth: 0.1,
-      borderColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT),
+      borderColor: getColorStyle(TrilogyColor.FADE_NEUTRAL),
       overflow: "hidden",
       height: textLevels(level as TextLevels | TextLevelValues),
     },

diff --git a/packages/react/components/textarea/Textarea.native.tsx b/packages/react/components/textarea/Textarea.native.tsx
@@ -136,7 +136,7 @@ const Textarea = (
       top: 2,
       left: iconName ? 40 : 8,
       fontSize: 12,
-      color: getColorStyle(TrilogyColor.NEUTRAL_DARK),
+      color: getColorStyle(TrilogyColor.NEUTRAL),
       backgroundColor: "transparent",
       padding: 8,
       paddingBottom: 4,

diff --git a/packages/react/components/timeline/marker/TimelineMarker.native.tsx b/packages/react/components/timeline/marker/TimelineMarker.native.tsx
@@ -33,10 +33,10 @@ const TimelineMarker = ({
       marginRight: "auto",
       borderColor:
         (active && getColorStyle(TrilogyColor.MAIN)) ||
-        (undone && getColorStyle(TrilogyColor.NEUTRAL_LIGHT)) ||
-        (cancel && getColorStyle(TrilogyColor.NEUTRAL_DARK)) ||
+        (undone && getColorStyle(TrilogyColor.NEUTRAL, 1)) ||
+        (cancel && getColorStyle(TrilogyColor.NEUTRAL)) ||
         (done && getColorStyle(TrilogyColor.MAIN)) ||
-        getColorStyle(TrilogyColor.NEUTRAL_LIGHT),
+        getColorStyle(TrilogyColor.NEUTRAL, 1),
     },
     icon: {
       alignSelf: "center",
@@ -53,17 +53,17 @@ const TimelineMarker = ({
             !iconColor
               ? (active && TrilogyColor.BACKGROUND) ||
                 (undone && TrilogyColor.MAIN) ||
-                (cancel && TrilogyColor.BACKGROUND) ||
+                (cancel && TrilogyColor.FADE_NEUTRAL) ||
                 (done && TrilogyColor.BACKGROUND) ||
                 TrilogyColor.BACKGROUND
               : iconColor
           }
           backgroundColor={
             (active && TrilogyColor.MAIN) ||
-            (undone && TrilogyColor.NEUTRAL_LIGHT) ||
-            (cancel && TrilogyColor.NEUTRAL_DARK) ||
+            (undone && TrilogyColor.FADE_NEUTRAL) ||
+            (cancel && TrilogyColor.NEUTRAL) ||
             (done && TrilogyColor.MAIN) ||
-            TrilogyColor.NEUTRAL_LIGHT
+            TrilogyColor.FADE_NEUTRAL
           }
           size={IconSize.SMALL}
         />

diff --git a/packages/react/components/title/Title.native.tsx b/packages/react/components/title/Title.native.tsx
@@ -92,7 +92,7 @@ const Title = ({
       alignSelf: getAlignSelf(),
       borderRadius: 5,
       borderWidth: 0.1,
-      borderColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT, 0),
+      borderColor: getColorStyle(TrilogyColor.FADE_NEUTRAL),
       overflow: "hidden",
       height: titlesLevels(),
     },

diff --git a/packages/react/objects/Typography/TypographyColor.ts b/packages/react/objects/Typography/TypographyColor.ts
@@ -11,7 +11,6 @@ export enum TypographyColor {
   TEXT_WARNING = "has-text-warning",
   TEXT_ERROR = "has-text-error",
   TEXT_NEUTRAL = "has-text-grey",
-  TEXT_NEUTRAL_DARK = "has-text-grey-dark",
   TEXT_WHITE = "has-text-white",
   TEXT_DISABLED = "has-text-disabled",
 }
@@ -55,10 +54,6 @@ export const setTypographyColor = (
       ? getColorStyle(TrilogyColor.ERROR, 0)
       : typo === TypographyColor.TEXT_ERROR &&
         getColorStyle(TrilogyColor.ERROR, 0)) ||
-    (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_NEUTRAL_DARK)
-      ? getColorStyle(TrilogyColor.NEUTRAL_DARK, 0)
-      : typo === TypographyColor.TEXT_NEUTRAL_DARK &&
-        getColorStyle(TrilogyColor.NEUTRAL_DARK, 0)) ||
     (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_NEUTRAL)
       ? getColorStyle(TrilogyColor.NEUTRAL, 0)
       : typo === TypographyColor.TEXT_NEUTRAL &&

diff --git a/packages/react/objects/atoms/Background.ts b/packages/react/objects/atoms/Background.ts
@@ -20,6 +20,10 @@ export const getBackgroundClassName = (
   if (backgroundType && typeof backgroundType === 'object') {
     return `background-${getColorClassName(backgroundType.color)}${backgroundType.fade ? '-fade' : ''}`
   }
+  if( backgroundType.startsWith('FADE-') ) {
+    return `background-${getColorClassName( (backgroundType.replace('FADE-', '') as TrilogyColor))}-fade`
+  }
+
   return `background-${getColorClassName(backgroundType)}`
 }
 

diff --git a/packages/react/objects/atoms/Text.ts b/packages/react/objects/atoms/Text.ts
@@ -30,9 +30,7 @@ export const getTextClassName = (textType?: string): string => {
     case "WHITE":
       return "text-white"
     case "NEUTRAL":
-      return "text-neutral-light"
-    case "NEUTRAL_DARK":
-      return "text-neutral-dark"
+      return "text-neutral"
     case "SUCCESS":
       return "text-success"
     case "WARNING":