feat(theme): add more color slots

These color will be used and customize in ADA

Author: tripleWdotcom

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 {

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;
 }
 

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};
   }
 `

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);

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,