From f73b1042209b6a6b1517775caa3c259415708ea8 Mon Sep 17 00:00:00 2001
From: Claire Dagan <clairedagan@gmail.com>
Date: Mon, 25 Sep 2023 09:48:15 +0200
Subject: [PATCH] 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`
---
 src/components/Dropdown/Item.tsx              |  2 +-
 src/components/Dropdown/index.tsx             | 10 ++--
 src/components/SideMenu/Button.tsx            |  4 +-
 src/components/SingleTag.tsx                  | 16 +++---
 src/elements/Button.tsx                       | 32 ++++++------
 src/elements/IconButton.tsx                   |  4 +-
 src/fields/DatePicker/CalendarPicker.tsx      | 16 +++---
 src/fields/DateRangePicker/DateInput.tsx      | 12 ++---
 .../DateRangePicker/RangeCalendarPicker.tsx   | 16 +++---
 .../DateRangePicker/RangedTimePicker.tsx      |  4 +-
 src/fields/DateRangePicker/TimeInput.tsx      | 12 ++---
 src/fields/MultiSelect.tsx                    |  6 +--
 src/fields/NumberInput.tsx                    |  4 +-
 src/fields/Select.tsx                         |  4 +-
 src/fields/TextInput.tsx                      |  4 +-
 src/fields/Textarea.tsx                       |  4 +-
 src/tables/SimpleTable.tsx                    |  2 +-
 src/theme.ts                                  | 20 +++----
 stories/Colors.stories.tsx                    | 52 ++++++++-----------
 19 files changed, 102 insertions(+), 122 deletions(-)

diff --git a/src/components/Dropdown/Item.tsx b/src/components/Dropdown/Item.tsx
index 9adc3b4fc..5798abd53 100644
--- 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
index d9fb9622f..a7c00c695 100644
--- 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
index b518d1dc3..e5bfdc170 100644
--- 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
index 713ecc2c7..cd105352e 100644
--- 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
index 4a0794ddd..08c757add 100644
--- 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
index 6b488f59b..8aab82f9d 100644
--- 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
index fabc97df7..b9b947d45 100644
--- 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
index 85ad61c13..f448b6857 100644
--- 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
index a432c68ae..ea0d2d144 100644
--- 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
index 118f83d04..8ce70bed0 100644
--- 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
index 9a353595b..866f9f0a2 100644
--- 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
index 72991200a..296dba145 100644
--- 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
index 5de810e44..7367d49b4 100644
--- 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;
   }
 `
diff --git a/src/fields/Select.tsx b/src/fields/Select.tsx
index b4cc8b318..a906bd53f 100644
--- a/src/fields/Select.tsx
+++ b/src/fields/Select.tsx
@@ -230,12 +230,12 @@ const Box = styled.div<{
       padding: 4px 40px 6px 8px;
 
       :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-stack {
diff --git a/src/fields/TextInput.tsx b/src/fields/TextInput.tsx
index 8a25ad1a9..072e298c2 100644
--- a/src/fields/TextInput.tsx
+++ b/src/fields/TextInput.tsx
@@ -129,12 +129,12 @@ const StyledInput = styled(Input)<{
   }
 
   :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;
   }
 `
diff --git a/src/fields/Textarea.tsx b/src/fields/Textarea.tsx
index 566cffd5c..4dd3db2f5 100644
--- a/src/fields/Textarea.tsx
+++ b/src/fields/Textarea.tsx
@@ -105,12 +105,12 @@ const StyledInput = styled(Input)<{
   }
 
   :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;
   }
 `
diff --git a/src/tables/SimpleTable.tsx b/src/tables/SimpleTable.tsx
index f559c6f1e..2c6c72b62 100644
--- a/src/tables/SimpleTable.tsx
+++ b/src/tables/SimpleTable.tsx
@@ -43,7 +43,7 @@ const Th = styled.th`
 const BodyTr = styled.tr`
   :hover {
     > td {
-      background-color: ${p => p.theme.color.blueYonder[25]};
+      background-color: ${p => p.theme.color.blueYonder25};
     }
   }
   td:first-child {
diff --git a/src/theme.ts b/src/theme.ts
index f5140e23d..166636ebd 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -22,20 +22,18 @@ export const THEME = {
     white: '#FFFFFF',
 
     // Accentuation Colors
-    blueYonder: {
-      25: '#D4DDE7',
-      100: '#567A9E'
-    },
-    blueGray: {
-      100: '#5697D2',
-      25: '#D4E5F4'
-    },
+    blueYonder: '#567A9E',
+    blueYonder25: '#D4DDE7',
+    blueGray: '#5697D2',
+    blueGray25: '#D4E5F4',
+    maximumRed: '#E1000F',
+    maximumRed15: '#FBD9DB',
+
     babyBlueEyes: '#99C9FF',
 
     // Notification Colors
     mediumSeaGreen: '#29B361',
     goldenPoppy: '#FAC11A',
-    maximumRed: '#E1000F',
 
     /** CONTEXTUAL COLORS */
 
@@ -55,10 +53,6 @@ export const THEME = {
     // Beacon Malfunction
     powderBlue: '#9ED7D9',
     wheat: '#EDD6A4',
-    // goldenPoppy: '#FAC11A',
-    // maximumRed: '#E1000F',
-    // charcoal: '#3B4559',
-    // mediumSeaGreen: '#29B361',
     opal: '#A5BCC0',
 
     // Regulation Areas
diff --git a/stories/Colors.stories.tsx b/stories/Colors.stories.tsx
index 997d2851e..d47dc22e0 100644
--- a/stories/Colors.stories.tsx
+++ b/stories/Colors.stories.tsx
@@ -9,23 +9,28 @@ const Wrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
 `
-const ColorSample = styled.div`
-  width: 120px;
-  height: 120px;
-  margin: 5px;
-  display: inline-block;
-  background-color: ${props => props.color};
-  border: 1px solid black;
+const ColorContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 20px;
+  padding: 16px;
+  border: ${p => `1px solid ${p.theme.color.lightGray}`};
   > span {
-    color: white;
-    filter: drop-shadow(1px 1px 0px black);
+    font-size: 13px;
   }
 `
 
+const ColorSample = styled.div<{ color }>`
+  width: 150px;
+  height: 100px;
+  background-color: ${props => props.color};
+  border: ${p => `1px solid ${p.theme.color.lightGray}`};
+`
+
 const meta: Meta<typeof ColorSample> = {
   title: 'Colors',
   component: ColorSample,
-  decorators: [generateStoryDecorator()]
+  decorators: [generateStoryDecorator({ fixedWidth: 1000 })]
 }
 
 export default meta
@@ -33,25 +38,14 @@ export default meta
 export function _Colors() {
   return (
     <Wrapper>
-      {Object.entries(THEME.color).map(([key, value]) => {
-        if (typeof value === 'object') {
-          return Object.entries(value).map(([key2, value2]) => (
-            <ColorSample key={key2} color={value2}>
-              <span>
-                {key}.{key2} <br /> {value2}
-              </span>
-            </ColorSample>
-          ))
-        }
-
-        return (
-          <ColorSample key={key} color={value}>
-            <span>
-              {key} <br /> {value}
-            </span>
-          </ColorSample>
-        )
-      })}
+      {Object.entries(THEME.color).map(([key, value]) => (
+        <ColorContainer key={key}>
+          <span>
+            {key} <br /> {value}
+          </span>
+          <ColorSample color={value} />
+        </ColorContainer>
+      ))}
     </Wrapper>
   )
 }