feat: styled pill container and added some more colors

ts/components/basic/PillContainer.tsx

@@ -40,10 +40,11 @@ const StyledPillInner = styled.div<PillContainerProps>`
   margin: ${props => props.margin || ''};
   border-radius: 300px;
   cursor: ${props => (props.disableHover ? 'unset' : 'pointer')};
-  border: 1px solid var(--color-pill-divider);
+  border: 1px solid var(--border-color);
   transition: var(--default-duration);
   &:hover {
-    background: ${props => (props.disableHover ? 'none' : 'var(--color-clickable-hovered)')};
+    background: ${props =>
+      props.disableHover ? 'none' : 'var(--button-solid-background-hover-color)'};
   }
 `;
 

ts/themes/SessionTheme.tsx

@@ -467,6 +467,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     --primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY};
     --danger-color: ${COLORS.DANGER.LIGHT};
     --transparent-color: ${COLORS.TRANSPARENT};
+    --white-color: ${COLORS.WHITE};
 
     /* Backgrounds */
     --background-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
@@ -513,14 +514,7 @@ export const SessionGlobalStyles = createGlobalStyle`
 
     /* TODO Theming probably consolidate this */
     /* Buttons */
-    /* TODO Theming are solid buttons ever disabled? */
-    /* Solid */
-    --button-solid-background-color: var(--background-primary-color);
-    --button-solid-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
-    --button-solid-text-color: var(--text-primary-color);
-    --button-solid-text-hover-color: var(--text-primary-color);
-
-    /* Outline */
+    /* Outline (Default) */
     --button-outline-background-color: var(--transparent-color);
     --button-outline-background-hover-color: rgba(${hexColorToRGB(
       THEMES.CLASSIC_LIGHT.COLOR0
@@ -532,6 +526,18 @@ export const SessionGlobalStyles = createGlobalStyle`
     --button-outline-border-hover-color: var(--text-primary-color);
     --button-outline-disabled-color: var(--text-secondary-color);
 
+    /* TODO Theming are solid buttons ever disabled? */
+    /* Solid */
+    /* TODO Theming - Should Pills have their own colors */
+    /* Also used for Pills */
+    --button-solid-background-color: var(--background-primary-color);
+    --button-solid-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
+    --button-solid-text-color: var(--text-primary-color);
+    --button-solid-text-hover-color: var(--text-primary-color);
+    --button-solid-disabled-color: var(--text-secondary-color);
+      /* TODO Theming - Only light themes have shadows? */
+    --button-solid-shadow-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.25);
+
     /* Icons */
     --button-icon-background-color: var(--transparent-color);
     --button-icon-stroke-color: var(--text-secondary-color);

ts/themes/colors.tsx

@@ -23,9 +23,14 @@ type Colors = {
     CONNECTING: string;
     ERROR: string;
   };
+  SESSION: string;
   TRANSPARENT: string;
+  WHITE: string;
 };
 
+// Session Brand Color
+const sessionGreen = '#00f782';
+
 // Primary (can override theme default)
 const primaryGreen = '#31F196';
 const primaryBlue = '#57C9FA';
@@ -47,6 +52,9 @@ const pathError = '#EA5545';
 // Transparent
 const transparent = 'transparent';
 
+// White
+const white = '#FFFFFF';
+
 const COLORS: Colors = {
   PRIMARY: {
     GREEN: primaryGreen,
@@ -66,7 +74,9 @@ const COLORS: Colors = {
     CONNECTING: pathConnecting,
     ERROR: pathError,
   },
+  SESSION: sessionGreen,
   TRANSPARENT: transparent,
+  WHITE: white,
 };
 
 // Themes