From bd0dfd18ac472ae03158d600a850fd50fc6722e3 Mon Sep 17 00:00:00 2001
From: Mauricio Espinoza <mauricio.espinoza@axis.com>
Date: Wed, 9 Nov 2022 11:36:48 +0100
Subject: [PATCH] feat(theme): add more color slots

These color will be used and customize in ADA
---
 packages/core/src/Button/index.tsx                          | 4 ++--
 .../core/src/Checkbox/__snapshots__/index.test.tsx.snap     | 4 ++--
 packages/core/src/Checkbox/index.tsx                        | 4 ++--
 packages/core/src/Table/__snapshots__/index.test.tsx.snap   | 2 +-
 packages/core/src/theme.ts                                  | 6 ++++++
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/Button/index.tsx b/packages/core/src/Button/index.tsx
index 4aca4a27..eb715306 100644
--- a/packages/core/src/Button/index.tsx
+++ b/packages/core/src/Button/index.tsx
@@ -72,14 +72,14 @@ export const NativeButton = styled.button<{
             ? css`
                 background-color: ${theme.color.elementPrimary()};
                 box-shadow: ${theme.shadow.primaryButton};
-                border: 2px solid ${theme.color.textPrimary()};
+                border: 2px solid ${theme.color.elementBorderFocus()};
               `
             : undefined};
         }
 
         &:active {
           background-color: ${theme.color.textPrimary()};
-          box-shadow: 0 0 0 4px ${theme.color.elementPrimary(opacity[24])};
+          box-shadow: 0 0 0 4px ${theme.color.elementBorderActive(opacity[24])};
         }
 
         &:disabled {
diff --git a/packages/core/src/Checkbox/__snapshots__/index.test.tsx.snap b/packages/core/src/Checkbox/__snapshots__/index.test.tsx.snap
index 87e04b1f..3a903e18 100644
--- a/packages/core/src/Checkbox/__snapshots__/index.test.tsx.snap
+++ b/packages/core/src/Checkbox/__snapshots__/index.test.tsx.snap
@@ -290,7 +290,7 @@ exports[`Checkbox Checked 2`] = `
   content: '';
   width: 5px;
   height: 10px;
-  border: solid #fff;
+  border: solid rgb(255,255,255);
   border-width: 0 2px 2px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
@@ -488,7 +488,7 @@ exports[`Checkbox Checked 3`] = `
   content: '';
   width: 10px;
   height: 2px;
-  background-color: #fff;
+  background-color: rgb(255,255,255);
   border-radius: 2px;
 }
 
diff --git a/packages/core/src/Checkbox/index.tsx b/packages/core/src/Checkbox/index.tsx
index 05c517ab..d72a75b2 100644
--- a/packages/core/src/Checkbox/index.tsx
+++ b/packages/core/src/Checkbox/index.tsx
@@ -141,7 +141,7 @@ const CSSCheckboxChecked = styled(BaseCheckbox)`
     content: '';
     width: 5px;
     height: 10px;
-    border: solid #fff;
+    border: solid ${({ theme }) => theme.color.element17()};
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
     margin-bottom: 3px;
@@ -154,7 +154,7 @@ const CSSCheckboxIndeterminate = styled(BaseCheckbox)`
     content: '';
     width: 10px;
     height: 2px;
-    background-color: #fff;
+    background-color: ${({ theme }) => theme.color.element17()};
     border-radius: ${shape.radius.small};
   }
 `
diff --git a/packages/core/src/Table/__snapshots__/index.test.tsx.snap b/packages/core/src/Table/__snapshots__/index.test.tsx.snap
index e21df686..b043c9aa 100644
--- a/packages/core/src/Table/__snapshots__/index.test.tsx.snap
+++ b/packages/core/src/Table/__snapshots__/index.test.tsx.snap
@@ -135,7 +135,7 @@ exports[`Tables Table (full) 1`] = `
   content: '';
   width: 5px;
   height: 10px;
-  border: solid #fff;
+  border: solid rgb(255,255,255);
   border-width: 0 2px 2px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
diff --git a/packages/core/src/theme.ts b/packages/core/src/theme.ts
index 32b780f2..b5689f1a 100644
--- a/packages/core/src/theme.ts
+++ b/packages/core/src/theme.ts
@@ -81,6 +81,9 @@ export interface Color {
   readonly element14: CSSColor
   readonly element15: CSSColor
   readonly element16: CSSColor
+  readonly element17: CSSColor
+  readonly elementBorderActive: CSSColor
+  readonly elementBorderFocus: CSSColor
   readonly elementPrimary: CSSColor
   readonly elementHalfPrimary: CSSColor
   readonly elementError: CSSColor
@@ -198,6 +201,9 @@ const generateDefaultColors = (
     element14: palette.grey64,
     element15: palette.grey98,
     element16: palette.grey98,
+    element17: palette.white,
+    elementBorderActive: palette[`${color}500` as ColorName],
+    elementBorderFocus: palette[`${color}800` as ColorName],
     elementPrimary: palette[`${color}500` as ColorName],
     elementHalfPrimary: palette[`${color}600` as ColorName],
     elementError: palette.red700,