feat: add dark and light variations of primary color

Author: abelflopes

packages/components/theme/src/styles/_theme-type.scss

@@ -2,7 +2,9 @@
 
 $theme-type: (
   "color": (
+    "highlight-primary-light",
     "highlight-primary",
+    "highlight-primary-dark",
     "neutral-0",
     "neutral-100",
     "neutral-200",

packages/components/theme/src/themes/default.ts

@@ -6,7 +6,9 @@ import type { Theme } from "../types";
 
 export const defaultTheme: Theme = {
   color: {
-    "highlight-primary": "#59BCC8",
+    "highlight-primary-light": "hsl(185deg 50% 85%)",
+    "highlight-primary": "hsl(185deg 50% 55%)",
+    "highlight-primary-dark": "hsl(185deg 50% 35%)",
     "neutral-0": "#fff",
     "neutral-100": "#edf2f7",
     "neutral-200": "#DBDEEB",

packages/components/theme/src/types.ts

@@ -1,7 +1,9 @@
 // Keep in sync with /Users/alopes/Desktop/dev-abel/react-ck/packages/components/theme/src/styles/_theme-type.scss
 export interface Theme {
   color: {
+    "highlight-primary-light": string;
     "highlight-primary": string;
+    "highlight-primary-dark": string;
     "neutral-0": string;
     "neutral-100": string;
     "neutral-200": string;