feat(theme)!: add new color and update accentuation colors

BREAKING CHANGE: Accentuation colors are no longer objects with key accentuation but just string with this pattern `colorAccentuationNumber`. Exemple: `blueYonder[25]` becomes `blueYonder25`
MTES-MCT · Sep 25, 2023 · 0d673f4 · 0d673f4
1 parent 73ebb17
commit 0d673f4
Show file tree

Hide file tree

Showing 19 changed files with 102 additions and 122 deletions.
diff --git a/src/components/Dropdown/Item.tsx b/src/components/Dropdown/Item.tsx
@@ -37,7 +37,7 @@ const SecondaryDropdownItem = styled(RsuiteDropdown.Item)<{
   :hover {
     background-color: ${p => p.theme.color.cultured};
     border: 1px solid ${p => p.theme.color.lightGray};
-    color: ${p => p.theme.color.blueYonder['100']};
+    color: ${p => p.theme.color.blueYonder};
   }
   &:not(:last-child) {
     margin-bottom: 1px;

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -43,14 +43,14 @@ const PrimaryDropdown = styled(RsuiteDropdown)<{
     padding: ${p => (p.$hasIcon ? '4px' : '5px')} 12px ${p => (p.$hasIcon ? '5px' : '7px')};
 
     :hover {
-      background-color: ${p => p.theme.color.blueYonder['100']};
-      border: 1px solid ${p => p.theme.color.blueYonder['100']};
+      background-color: ${p => p.theme.color.blueYonder};
+      border: 1px solid ${p => p.theme.color.blueYonder};
       color: ${p => p.theme.color.white};
     }
 
     :active {
-      background-color: ${p => p.theme.color.blueGray['100']};
-      border: 1px solid ${p => p.theme.color.blueGray['100']};
+      background-color: ${p => p.theme.color.blueGray};
+      border: 1px solid ${p => p.theme.color.blueGray};
       color: ${p => p.theme.color.white};
     }
 
@@ -93,7 +93,7 @@ const SecondaryDropdown = styled(RsuiteDropdown)<{
     :active {
       background-color: transparent;
       border: none;
-      color: ${p => p.theme.color.blueYonder['100']};
+      color: ${p => p.theme.color.blueYonder};
     }
 
     > svg {

diff --git a/src/components/SideMenu/Button.tsx b/src/components/SideMenu/Button.tsx
@@ -19,7 +19,7 @@ const MenuButton = styled(IconButton)<{
   $isActive?: boolean
 }>`
   animation: none;
-  background: ${p => (p.$isActive ? p.theme.color.blueGray[100] : 'none')};
+  background: ${p => (p.$isActive ? p.theme.color.blueGray : 'none')};
   border: 0;
   border-bottom: solid 0.5px ${p => p.theme.color.slateGray};
   color: ${p => (p.$isActive ? p.theme.color.white : p.theme.color.gainsboro)};
@@ -28,7 +28,7 @@ const MenuButton = styled(IconButton)<{
 
   :hover,
   :focus {
-    background: ${p => (p.$isActive ? p.theme.color.blueGray[100] : 'rgba(255, 255, 255, 0.125)')};
+    background: ${p => (p.$isActive ? p.theme.color.blueGray : 'rgba(255, 255, 255, 0.125)')};
     border: 0;
     border: none;
     color: ${p => p.theme.color.white};

diff --git a/src/components/SingleTag.tsx b/src/components/SingleTag.tsx
@@ -80,29 +80,29 @@ const PrimaryIconButton = styled(IconButton)`
 `
 
 const SecondaryText = styled(PrimaryText)`
-  background-color: ${p => p.theme.color.blueYonder[100]};
+  background-color: ${p => p.theme.color.blueYonder};
   color: ${p => p.theme.color.white};
 `
 
 const SecondaryIconButton = styled(PrimaryIconButton)`
-  background-color: ${p => p.theme.color.blueYonder[100]};
+  background-color: ${p => p.theme.color.blueYonder};
   color: ${p => p.theme.color.white};
 
   :hover,
   &._hover {
-    background-color: ${p => p.theme.color.blueYonder[100]};
-    color: ${p => p.theme.color.blueYonder[25]};
+    background-color: ${p => p.theme.color.blueYonder};
+    color: ${p => p.theme.color.blueYonder25};
   }
 
   :active,
   &._active {
-    background-color: ${p => p.theme.color.blueYonder[100]};
-    color: ${p => p.theme.color.blueYonder[25]};
+    background-color: ${p => p.theme.color.blueYonder};
+    color: ${p => p.theme.color.blueYonder25};
   }
 
   :disabled,
   &._disabled {
-    background-color: ${p => p.theme.color.blueYonder[100]};
-    color: ${p => p.theme.color.blueYonder[25]};
+    background-color: ${p => p.theme.color.blueYonder};
+    color: ${p => p.theme.color.blueYonder25};
   }
 `
diff --git a/src/elements/Button.tsx b/src/elements/Button.tsx
@@ -126,15 +126,15 @@ export const PrimaryButton = styled.button`
 
   :hover,
   &._hover {
-    background-color: ${p => p.theme.color.blueYonder['100']};
-    border: 1px solid ${p => p.theme.color.blueYonder['100']};
+    background-color: ${p => p.theme.color.blueYonder};
+    border: 1px solid ${p => p.theme.color.blueYonder};
     color: ${p => p.theme.color.white};
   }
 
   :active,
   &._active {
-    background-color: ${p => p.theme.color.blueGray['100']};
-    border: 1px solid ${p => p.theme.color.blueGray['100']};
+    background-color: ${p => p.theme.color.blueGray};
+    border: 1px solid ${p => p.theme.color.blueGray};
     color: ${p => p.theme.color.white};
   }
 
@@ -153,16 +153,16 @@ export const SecondaryButton = styled.button`
 
   :hover,
   &._hover {
-    background-color: ${p => p.theme.color.blueYonder['25']};
-    border: 1px solid ${p => p.theme.color.blueYonder['100']};
-    color: ${p => p.theme.color.blueYonder['100']};
+    background-color: ${p => p.theme.color.blueYonder25};
+    border: 1px solid ${p => p.theme.color.blueYonder};
+    color: ${p => p.theme.color.blueYonder};
   }
 
   :active,
   &._active {
-    background-color: ${p => p.theme.color.blueGray['25']};
-    border: 1px solid ${p => p.theme.color.blueGray['100']};
-    color: ${p => p.theme.color.blueGray['100']};
+    background-color: ${p => p.theme.color.blueGray25};
+    border: 1px solid ${p => p.theme.color.blueGray};
+    color: ${p => p.theme.color.blueGray};
   }
 
   :disabled,
@@ -180,16 +180,16 @@ export const TertiaryButton = styled.button`
 
   :hover,
   &._hover {
-    background-color: ${p => p.theme.color.blueYonder['25']};
-    border: 1px solid ${p => p.theme.color.blueYonder['25']};
-    color: ${p => p.theme.color.blueYonder['100']};
+    background-color: ${p => p.theme.color.blueYonder25};
+    border: 1px solid ${p => p.theme.color.blueYonder25};
+    color: ${p => p.theme.color.blueYonder};
   }
 
   :active,
   &._active {
-    background-color: ${p => p.theme.color.blueGray['25']};
-    border: 1px solid ${p => p.theme.color.blueGray['100']};
-    color: ${p => p.theme.color.blueGray['100']};
+    background-color: ${p => p.theme.color.blueGray25};
+    border: 1px solid ${p => p.theme.color.blueGray};
+    color: ${p => p.theme.color.blueGray};
   }
 
   :disabled,

diff --git a/src/elements/IconButton.tsx b/src/elements/IconButton.tsx
@@ -132,14 +132,14 @@ const TertiaryButton = styled.button<{
   &._hover {
     background-color: transparent;
     border: ${p => (p.isCompact ? 0 : '1px solid transparent')};
-    color: ${p => p.theme.color.blueYonder['100']};
+    color: ${p => p.theme.color.blueYonder};
   }
 
   :active,
   &._active {
     background-color: transparent;
     border: ${p => (p.isCompact ? 0 : '1px solid transparent')};
-    color: ${p => p.theme.color.blueGray['100']};
+    color: ${p => p.theme.color.blueGray};
   }
 
   :disabled,

diff --git a/src/fields/DatePicker/CalendarPicker.tsx b/src/fields/DatePicker/CalendarPicker.tsx
@@ -162,7 +162,7 @@ export const Box = styled.div`
           width: 33px;
 
           &.rs-calendar-table-cell-in-range:before {
-            background-color: ${p => p.theme.color.blueGray[25]};
+            background-color: ${p => p.theme.color.blueGray25};
             height: 33px;
             margin-top: 0;
           }
@@ -177,8 +177,8 @@ export const Box = styled.div`
             width: 33px;
           }
           &:hover .rs-calendar-table-cell-content {
-            background-color: ${p => p.theme.color.blueYonder[25]};
-            color: ${p => p.theme.color.blueYonder[100]};
+            background-color: ${p => p.theme.color.blueYonder25};
+            color: ${p => p.theme.color.blueYonder};
           }
           &[role='columnheader'] .rs-calendar-table-cell-content,
           &[role='columnheader']:hover .rs-calendar-table-cell-content {
@@ -190,7 +190,7 @@ export const Box = styled.div`
             color: ${p => p.theme.color.lightGray};
           }
           &.rs-calendar-table-cell-selected > .rs-calendar-table-cell-content {
-            background-color: ${p => p.theme.color.blueGray[100]};
+            background-color: ${p => p.theme.color.blueGray};
           }
         }
       }
@@ -203,7 +203,7 @@ export const Box = styled.div`
           color: ${p => p.theme.color.slateGray};
 
           &.rs-calendar-month-dropdown-year-active {
-            color: ${p => p.theme.color.blueYonder[100]};
+            color: ${p => p.theme.color.blueYonder};
           }
         }
 
@@ -219,11 +219,11 @@ export const Box = styled.div`
             width: 33px;
           }
           &:hover > .rs-calendar-month-dropdown-cell-content {
-            background-color: ${p => p.theme.color.blueYonder[25]};
-            color: ${p => p.theme.color.blueYonder[100]};
+            background-color: ${p => p.theme.color.blueYonder25};
+            color: ${p => p.theme.color.blueYonder};
           }
           &.rs-calendar-month-dropdown-cell-active > .rs-calendar-month-dropdown-cell-content {
-            background-color: ${p => p.theme.color.blueGray[100]};
+            background-color: ${p => p.theme.color.blueGray};
             color: ${p => p.theme.color.white};
           }
         }

diff --git a/src/fields/DateRangePicker/DateInput.tsx b/src/fields/DateRangePicker/DateInput.tsx
@@ -248,9 +248,9 @@ const Box = styled.div<{
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   box-shadow: ${p =>
     p.$hasError || p.$isFocused
-      ? `inset 0px 0px 0px 1px ${p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100]}`
+      ? `inset 0px 0px 0px 1px ${p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray}`
       : 'none'};
-  color: ${p => (p.$isFocused ? p.theme.color.blueGray[100] : p.theme.color.slateGray)};
+  color: ${p => (p.$isFocused ? p.theme.color.blueGray : p.theme.color.slateGray)};
   display: inline-flex;
   font-size: inherit;
   justify-content: space-between;
@@ -261,13 +261,9 @@ const Box = styled.div<{
     box-shadow: ${p =>
       `inset 0px 0px 0px 1px ${
         // eslint-disable-next-line no-nested-ternary
-        p.$isDisabled
-          ? p.theme.color.cultured
-          : p.$isFocused
-          ? p.theme.color.blueGray[100]
-          : p.theme.color.blueYonder[100]
+        p.$isDisabled ? p.theme.color.cultured : p.$isFocused ? p.theme.color.blueGray : p.theme.color.blueYonder
       }`};
-    color: ${p => (p.$isFocused ? p.theme.color.blueGray[100] : p.theme.color.blueYonder[100])};
+    color: ${p => (p.$isFocused ? p.theme.color.blueGray : p.theme.color.blueYonder)};
   }
 
   > div:nth-child(2) {

diff --git a/src/fields/DateRangePicker/RangeCalendarPicker.tsx b/src/fields/DateRangePicker/RangeCalendarPicker.tsx
@@ -204,7 +204,7 @@ const Box = styled.div`
             width: 33px;
 
             &.rs-calendar-table-cell-in-range:before {
-              background-color: ${p => p.theme.color.blueGray[25]};
+              background-color: ${p => p.theme.color.blueGray25};
               height: 33px;
               margin-top: 0;
             }
@@ -219,8 +219,8 @@ const Box = styled.div`
               width: 33px;
             }
             &:hover .rs-calendar-table-cell-content {
-              background-color: ${p => p.theme.color.blueYonder[25]};
-              color: ${p => p.theme.color.blueYonder[100]};
+              background-color: ${p => p.theme.color.blueYonder25};
+              color: ${p => p.theme.color.blueYonder};
             }
             &[role='columnheader'] .rs-calendar-table-cell-content,
             &[role='columnheader']:hover .rs-calendar-table-cell-content {
@@ -232,7 +232,7 @@ const Box = styled.div`
               color: ${p => p.theme.color.lightGray};
             }
             &.rs-calendar-table-cell-selected > .rs-calendar-table-cell-content {
-              background-color: ${p => p.theme.color.blueGray[100]};
+              background-color: ${p => p.theme.color.blueGray};
             }
           }
         }
@@ -245,7 +245,7 @@ const Box = styled.div`
             color: ${p => p.theme.color.slateGray};
 
             &.rs-calendar-month-dropdown-year-active {
-              color: ${p => p.theme.color.blueYonder[100]};
+              color: ${p => p.theme.color.blueYonder};
             }
           }
 
@@ -261,11 +261,11 @@ const Box = styled.div`
               width: 33px;
             }
             &:hover > .rs-calendar-month-dropdown-cell-content {
-              background-color: ${p => p.theme.color.blueYonder[25]};
-              color: ${p => p.theme.color.blueYonder[100]};
+              background-color: ${p => p.theme.color.blueYonder25};
+              color: ${p => p.theme.color.blueYonder};
             }
             &.rs-calendar-month-dropdown-cell-active > .rs-calendar-month-dropdown-cell-content {
-              background-color: ${p => p.theme.color.blueGray[100]};
+              background-color: ${p => p.theme.color.blueGray};
               color: ${p => p.theme.color.white};
             }
           }

diff --git a/src/fields/DateRangePicker/RangedTimePicker.tsx b/src/fields/DateRangePicker/RangedTimePicker.tsx
@@ -144,14 +144,14 @@ const Box = styled.div`
 const Option = styled.div<{
   isSelected: boolean
 }>`
-  background-color: ${p => (p.isSelected ? p.theme.color.blueGray[100] : 'transparent')};
+  background-color: ${p => (p.isSelected ? p.theme.color.blueGray : 'transparent')};
   color: ${p => (p.isSelected ? p.theme.color.white : p.theme.color.gunMetal)};
   cursor: pointer;
   line-height: 1;
   padding: 5px 0 7px 6.5px;
 
   :hover {
-    background-color: ${p => (p.isSelected ? p.theme.color.blueGray[100] : p.theme.color.blueYonder[25])};
+    background-color: ${p => (p.isSelected ? p.theme.color.blueGray : p.theme.color.blueYonder25)};
   }
 
   > span {

diff --git a/src/fields/DateRangePicker/TimeInput.tsx b/src/fields/DateRangePicker/TimeInput.tsx
@@ -252,9 +252,9 @@ const Box = styled.div<{
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   box-shadow: ${p =>
     p.$hasError || p.$isFocused
-      ? `inset 0px 0px 0px 1px ${p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100]}`
+      ? `inset 0px 0px 0px 1px ${p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray}`
       : 'none'};
-  color: ${p => (p.$isFocused ? p.theme.color.blueGray[100] : p.theme.color.slateGray)};
+  color: ${p => (p.$isFocused ? p.theme.color.blueGray : p.theme.color.slateGray)};
   display: inline-block;
   font-size: inherit;
   padding: ${p => (p.$isCompact ? '4.5px 8px 7px' : '3px 8px 5px')};
@@ -265,13 +265,9 @@ const Box = styled.div<{
     box-shadow: ${p =>
       `inset 0px 0px 0px 1px ${
         // eslint-disable-next-line no-nested-ternary
-        p.$isDisabled
-          ? p.theme.color.cultured
-          : p.$isFocused
-          ? p.theme.color.blueGray[100]
-          : p.theme.color.blueYonder[100]
+        p.$isDisabled ? p.theme.color.cultured : p.$isFocused ? p.theme.color.blueGray : p.theme.color.blueYonder
       }`};
-    color: ${p => (p.$isFocused ? p.theme.color.blueGray[100] : p.theme.color.blueYonder[100])};
+    color: ${p => (p.$isFocused ? p.theme.color.blueGray : p.theme.color.blueYonder)};
   }
 `
 

diff --git a/src/fields/MultiSelect.tsx b/src/fields/MultiSelect.tsx
@@ -212,7 +212,7 @@ const Box = styled.div<{
           return p.theme.color.maximumRed
         }
         if (p.$isActive) {
-          return p.theme.color.blueGray[100]
+          return p.theme.color.blueGray
         }
 
         return p.theme.color.gainsboro
@@ -221,12 +221,12 @@ const Box = styled.div<{
     width: 100%;
 
     :hover {
-      border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
+      border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder)} !important;
     }
 
     :active,
     :focus {
-      border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
+      border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray)} !important;
     }
 
     > .rs-picker-toggle {

diff --git a/src/fields/NumberInput.tsx b/src/fields/NumberInput.tsx
@@ -133,12 +133,12 @@ const StyledInput = styled(Input)<{
   width: 100%;
 
   :hover {
-    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder)} !important;
   }
 
   :active,
   :focus {
-    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray)} !important;
     outline: 0;
   }
 `