@everlywell/ui-kit 0.8.0 → 0.8.2

package/index.mjs

@@ -798,9 +798,10 @@ const Qn = mo, ra = vo, $o = () => /* @__PURE__ */ or.jsx(
 }) => /* @__PURE__ */ or.jsxs(yo, { ...a, children: [
   /* @__PURE__ */ or.jsx($o, {}),
   e
-] }), yt = ["viridian", "terracotta"], Mo = Ir({
+] }), yt = ["redCS", "greenCS"], Mo = Ir({
   // The styles all button have in common
   baseStyle: {
+    fontFamily: "body",
     fontWeight: "medium",
     lineHeight: "body",
     letterSpacing: "normal",
@@ -867,16 +868,17 @@ const Qn = mo, ra = vo, $o = () => /* @__PURE__ */ or.jsx(
   },
   // Two variants: primary and secondary
   variants: {
+    // solid
     primary: (e) => {
       const { colorScheme: a } = e;
       return yt.includes(a) ? {
-        bg: `${a}.base`,
+        bg: `${a}.500`,
         color: "tints.white",
         ":hover, &.hover": {
-          bg: `${a}.dark`
+          bg: `${a}.900`
         },
         ":active, &.active": {
-          bg: `${a}.dark`
+          bg: `${a}.900`
         },
         ":disabled": {
           bg: "tints.lightGrey",
@@ -886,10 +888,10 @@ const Qn = mo, ra = vo, $o = () => /* @__PURE__ */ or.jsx(
         bg: "tints.white",
         color: "tints.black",
         ":hover, &.hover": {
-          bg: "viridian.wash"
+          bg: "greenCS.50"
         },
         ":active, &.active": {
-          bg: "viridian.wash"
+          bg: "greenCS.50"
         },
         ":disabled": {
           bg: "tints.lightGrey",
@@ -897,18 +899,19 @@ const Qn = mo, ra = vo, $o = () => /* @__PURE__ */ or.jsx(
         }
       };
     },
+    //outline
     secondary: (e) => {
       const { colorScheme: a } = e;
       return yt.includes(a) ? {
-        color: `${a}.base`,
-        boxShadow: (l) => `inset 0 0 0 2px ${l.colors[a].base}`,
+        color: `${a}.500`,
+        boxShadow: (l) => `inset 0 0 0 2px ${l.colors[a][500]}`,
         ":hover, &.hover": {
-          color: `${a}.dark`,
-          boxShadow: (l) => `inset 0 0 0 2px ${l.colors[a].dark}`
+          color: `${a}.900`,
+          boxShadow: (l) => `inset 0 0 0 2px ${l.colors[a][900]}`
         },
         ":active, &.active": {
-          color: `${a}.dark`,
-          boxShadow: (l) => `inset 0 0 0 2px ${l.colors[a].dark}`
+          color: `${a}.900`,
+          boxShadow: (l) => `inset 0 0 0 2px ${l.colors[a][900]}`
         },
         ":disabled": {
           color: "tints.lightGrey",
@@ -916,15 +919,15 @@ const Qn = mo, ra = vo, $o = () => /* @__PURE__ */ or.jsx(
           opacity: 0.7
         }
       } : {
-        color: "white",
+        color: "tints.white",
         boxShadow: (l) => `inset 0 0 0 2px ${l.colors.tints.white}`,
         ":hover, &.hover": {
           color: "tints.white",
-          boxShadow: (l) => `inset 0 0 0 2px ${l.colors.viridian.wash}`
+          boxShadow: (l) => `inset 0 0 0 2px ${l.colors.greenCS[50]}`
         },
         ":active, &.active": {
           color: "tints.white",
-          boxShadow: (l) => `inset 0 0 0 2px ${l.colors.viridian.wash}`
+          boxShadow: (l) => `inset 0 0 0 2px ${l.colors.greenCS[50]}`
         },
         ":disabled": {
           color: "tints.lightGrey",
@@ -939,7 +942,7 @@ const Qn = mo, ra = vo, $o = () => /* @__PURE__ */ or.jsx(
   defaultProps: {
     size: "md",
     variant: "primary",
-    colorScheme: "viridian"
+    colorScheme: "greenCS"
   }
 });
 function Et(e) {
@@ -2849,12 +2852,12 @@ const { defineMultiStyleConfig: Cn, definePartsStyle: En } = Hr(wn.keys), Fn = C
   closeButton: {
     bg: "tints.cream",
     borderRadius: "50%",
-    p: 1,
+    p: 3,
     _hover: {
       bg: "tints.darkCream"
     },
     "& .chakra-icon": {
-      p: 1
+      fontSize: "0.75rem"
     }
   },
   body: {
@@ -3014,8 +3017,6 @@ const { defineMultiStyleConfig: Cn, definePartsStyle: En } = Hr(wn.keys), Fn = C
     variant: "primary"
   }
 }), Vn = {
-  // this will enable us to use white as a colorScheme
-  white: { ...Rt.colors.whiteAlpha, base: "#FFFFFF" },
   tints: {
     black: "#0F0F0F",
     darkGrey: "#545454",
@@ -3028,26 +3029,6 @@ const { defineMultiStyleConfig: Cn, definePartsStyle: En } = Hr(wn.keys), Fn = C
     white: "#FFFFFF"
   },
   viridian: {
-    50: "#EFF9F5",
-    // wash
-    100: "#A1DEC1",
-    // lighter
-    200: "#68CA9C",
-    // light
-    300: "#28724F",
-    // base
-    400: "#28724F",
-    // base
-    500: "#28724F",
-    // base
-    600: "#28724F",
-    // base
-    700: "#28724F",
-    // base
-    800: "#28724F",
-    // base
-    900: "#143927",
-    // dark
     dark: "#143927",
     base: "#28724F",
     light: "#68CA9C",
@@ -3062,26 +3043,6 @@ const { defineMultiStyleConfig: Cn, definePartsStyle: En } = Hr(wn.keys), Fn = C
     wash: "#FFFEF2"
   },
   terracotta: {
-    50: "#FFF4F4",
-    // wash
-    100: "#FFC9C7",
-    // lighter
-    200: "#FF9E99",
-    // light
-    300: "#FF6B62",
-    // base
-    400: "#FF6B62",
-    // base
-    500: "#FF6B62",
-    // base
-    600: "#FF6B62",
-    // base
-    700: "#FF6B62",
-    // base
-    800: "#FF6B62",
-    // base
-    900: "#650500",
-    // dark
     dark: "#650500",
     base: "#FF6B62",
     light: "#FF9E99",
@@ -3116,6 +3077,53 @@ const { defineMultiStyleConfig: Cn, definePartsStyle: En } = Hr(wn.keys), Fn = C
     lighter: "#CBECF9",
     wash: "#F5FBFE"
   },
+  // color schemes
+  redCS: {
+    50: "#CC0F05",
+    // wash
+    100: "#CC0F05",
+    // lighter
+    200: "#CC0F05",
+    // light
+    300: "#CC0F05",
+    // base
+    400: "#CC0F05",
+    // base
+    500: "#CC0F05",
+    // base
+    600: "#CC0F05",
+    // base
+    700: "#CC0F05",
+    // base
+    800: "#CC0F05",
+    // base
+    900: "#650500"
+    // dark
+  },
+  greenCS: {
+    50: "#EFF9F5",
+    // wash
+    100: "#A1DEC1",
+    // lighter
+    200: "#68CA9C",
+    // light
+    300: "#28724F",
+    // base
+    400: "#28724F",
+    // base
+    500: "#28724F",
+    // base
+    600: "#28724F",
+    // base
+    700: "#28724F",
+    // base
+    800: "#28724F",
+    // base
+    900: "#143927"
+    // dark
+  },
+  whiteCS: { ...Rt.colors.whiteAlpha, base: "#FFFFFF" },
+  // contextual colors
   utility: {
     warning: "#CC0F05",
     sale: "#EE574F",

package/lib/theme/actions/Button/Button.config.d.ts

@@ -1,6 +1,7 @@
 import { StyleFunctionProps } from '@chakra-ui/react';
 declare const _default: {
     baseStyle?: {
+        fontFamily: string;
         fontWeight: string;
         lineHeight: string;
         letterSpacing: string;