feat: Expose ucsc theme

README.md

@@ -34,7 +34,7 @@ status.
 
 > **HEADS UP!** currently you need
 >
-to [add the Casavo private NPM registry token](https://github.com/casavo/community-of-practice/blob/master/frontend/best-practices/setup-project.md#package-registry),
+> to [add the Casavo private NPM registry token](https://github.com/casavo/community-of-practice/blob/master/frontend/best-practices/setup-project.md#package-registry),
 > but we are planning to release this package as a public NPM one in the near future.
 
 install the package in your project (_you can use whatever package manager you prefer_)
@@ -43,7 +43,7 @@ install the package in your project (_you can use whatever package manager you p
 npm i @casavo/habitat
 ```
 
-import the `style.css` and `HabitatTheme` global class and apply it to top level node of you application.
+import the `style.css` and one of the exported themes (like the default one) `HabitatTheme` global class and apply it to top level node of you application.
 
 > **HEADS UP!** the `@casavo/habitat/style.css` file will also apply a global CSS reset/normalise, it is suggested to
 > remove existing reset solutions.
@@ -92,19 +92,30 @@ export const MyComponent = (): FC => {
 you can also import a specific component directly
 
 ```typescript jsx
-import {Badge} from "@casavo/habitat/badge"
-import {Button} from "@casavo/habitat/button"
-import {Checkbox} from "@casavo/habitat/checkbox"
-import {Switch} from "@casavo/habitat/switch"
-import { H1, H2, H3, H4, H5, H6, Body, Inline } from "@casavo/habitat/typography"
+import { Badge } from "@casavo/habitat/badge";
+import { Button } from "@casavo/habitat/button";
+import { Checkbox } from "@casavo/habitat/checkbox";
+import { Switch } from "@casavo/habitat/switch";
+import {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Body,
+  Inline,
+} from "@casavo/habitat/typography";
 ```
 
+**Note:** there is also a _tenant_ theme exported from the package that overrides some of the default values, called `UcscHabitatTheme` used for one of our partnerships.
+
 | Habitat Components | [RSC](https://www.plasmic.app/blog/how-react-server-components-work) |
-|-------------------|----------------------------------------------------------------------|
-| Badge             | ✅                                                                    |
-| Button            | ❌                                                                    |
-| Checkbox          | ❌                                                                    |
-| Typography        | ✅                                                                    |
+| ------------------ | -------------------------------------------------------------------- |
+| Badge              | ✅                                                                   |
+| Button             | ❌                                                                   |
+| Checkbox           | ❌                                                                   |
+| Typography         | ✅                                                                   |
 
 <!--
 ## 🚧🚧 WIP 🚧🚧 - How to override the base theme
@@ -196,8 +207,8 @@ steps:
 
 1. copy the `.json` generated by Figma in the root folder of the project
 
-    - if the file has the same name of the existing one just overwrite it
-    - if the file name change delete the existing one and update the `source` value in the `dictionary.config.json` file
+   - if the file has the same name of the existing one just overwrite it
+   - if the file name change delete the existing one and update the `source` value in the `dictionary.config.json` file
 
 2. from the terminal execute `$ npm run update:tokens`
 3. this will generate a new plain `.json` token file in the `src/utils` folder
@@ -210,8 +221,8 @@ steps:
 With `next-translate` we already have a dedicated component that handles the HTML interpolation, you can use it as children to any of our components as following:
 
 ```jsx
-import { Body, Inline } from "@casavo/habitat"
-import Trans from "next-translate/Trans"
+import { Body, Inline } from "@casavo/habitat";
+import Trans from "next-translate/Trans";
 
 <Body>
   <Trans
@@ -220,19 +231,19 @@ import Trans from "next-translate/Trans"
     }}
     i18nKey={"context:my-text"}
   />
-</Body>
+</Body>;
 ```
 
 so as you can see we are correctly rendering the HTML markup inside the component and also mapping any `<strong>` tag defined in the i18n string with an `<Inline>` Habitat component.
 
 In the case where you are **not** receiving the `i18nKey` string but just a string with HTML content within, you can use the `html=""` prop that we added in every typography components:
 
 ```jsx
-import { Body } from "@casavo/habitat"
+import { Body } from "@casavo/habitat";
 
 const HTMLstring = `Some <strong>text</strong> with HTML entities. <br /> Enjoy!`;
 
-<Body html={HTMLstring} />
+<Body html={HTMLstring} />;
 ```
 
 that prop is a wrapper for React's [dangerouslySetInnerHTML](https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html), and should be used as a last resort

package.json

@@ -2,7 +2,7 @@
   "name": "@casavo/habitat",
   "description": "Casavo Design System Library",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.1.0",
   "type": "module",
   "license": "Apache-2.0",
   "homepage": "https://github.com/casavo/habitat",

src/components/Badge/Badge.css.ts

@@ -1,41 +1,41 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 import { recipe } from "@vanilla-extract/recipes";
-import { vars } from "../../utils/theme.css";
+import { themeContract } from "../../utils/themes";
 
 export const BadgeContainer = recipe({
   base: {
     alignItems: "center",
-    borderRadius: vars.corners[300],
+    borderRadius: themeContract.corners[300],
     display: "inline-flex",
-    gap: vars.space[100],
+    gap: themeContract.space[100],
     justifyContent: "center",
-    padding: `${vars.space[100]} ${vars.space[200]}`,
+    padding: `${themeContract.space[100]} ${themeContract.space[200]}`,
   },
   variants: {
     theme: {
       dark: {
-        backgroundColor: vars.colors.root.darkgreen[700],
-        color: vars.colors.root.neutral[0],
-        fill: vars.colors.root.neutral[0],
+        backgroundColor: themeContract.colors.root.darkgreen[700],
+        color: themeContract.colors.root.neutral[0],
+        fill: themeContract.colors.root.neutral[0],
       },
       light: {
-        backgroundColor: vars.colors.root.offwhite[100],
-        color: vars.colors.root.neutral[600],
-        fill: vars.colors.root.neutral[600],
+        backgroundColor: themeContract.colors.root.offwhite[100],
+        color: themeContract.colors.root.neutral[600],
+        fill: themeContract.colors.root.neutral[600],
       },
     },
     status: {
       error: {
-        backgroundColor: vars.colors.root.red[200],
-        color: vars.colors.root.red[600],
+        backgroundColor: themeContract.colors.root.red[200],
+        color: themeContract.colors.root.red[600],
       },
       success: {
-        backgroundColor: vars.colors.root.green[200],
-        color: vars.colors.root.green[600],
+        backgroundColor: themeContract.colors.root.green[200],
+        color: themeContract.colors.root.green[600],
       },
       warning: {
-        backgroundColor: vars.colors.root.yellow[200],
-        color: vars.colors.root.yellow[600],
+        backgroundColor: themeContract.colors.root.yellow[200],
+        color: themeContract.colors.root.yellow[600],
       },
     },
   },

src/components/Button/Button.css.ts

@@ -1,15 +1,17 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 import { recipe } from "@vanilla-extract/recipes";
-import { vars } from "../../utils/theme.css";
+import { themeContract } from "../../utils/themes";
 import { keyframes, style } from "@vanilla-extract/css";
 
-const black = vars.colors.buttons.light.background.default;
-const white = vars.colors.buttons.dark.background.default;
+const black = themeContract.colors.buttons.light.background.default;
+const white = themeContract.colors.buttons.dark.background.default;
 
-const background = vars.colors.buttons.dark.background.disabled;
-const activeDark = vars.colors.buttons.dark.background["active, pressed"];
-const disabled = vars.colors.buttons.dark.text.disabled;
-const activeLight = vars.colors.buttons.light.background["active, pressed"];
+const background = themeContract.colors.buttons.dark.background.disabled;
+const activeDark =
+  themeContract.colors.buttons.dark.background["active, pressed"];
+const disabled = themeContract.colors.buttons.dark.text.disabled;
+const activeLight =
+  themeContract.colors.buttons.light.background["active, pressed"];
 
 const rotate = keyframes({
   "0%": { transform: "rotate(0deg)" },
@@ -25,11 +27,11 @@ export const ButtonContainer = recipe({
   base: {
     alignItems: "center",
     alignSelf: "stretch",
-    borderRadius: vars.corners[50],
+    borderRadius: themeContract.corners[50],
     display: "inline-flex",
-    gap: vars.space[100],
+    gap: themeContract.space[100],
     justifyContent: "center",
-    padding: `${vars.space[150]} ${vars.space[200]}`,
+    padding: `${themeContract.space[150]} ${themeContract.space[200]}`,
     cursor: "pointer",
     ":disabled": {
       cursor: "not-allowed",

src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -28,22 +28,6 @@ exports[`Button component > renders 1`] = `
 </button>
 `;
 
-exports[`Button component > renders with a disabled state 1`] = `
-<button
-  class="Button_ButtonContainer__1kgv65v2 Button_ButtonContainer_iconLayout_sx__1kgv65vb Button_ButtonContainer_size_medium__1kgv65v9 Button_ButtonContainer_theme_dark__1kgv65v3 Button_ButtonContainer_variant_primary__1kgv65v5 Button_ButtonContainer_compound_0__1kgv65vd"
-  data-disabled="true"
-  data-rac=""
-  disabled=""
-  type="button"
->
-  <p
-    class="Typography__3igy4nb Typography_base__3igy4na Typography_BodyStyle_noMargin_true__3igy4nc Typography_BodyStyle_size_m__3igy4ne Typography_BodyStyle_strong_true__3igy4nh"
-  >
-    Click me
-  </p>
-</button>
-`;
-
 exports[`Button component > renders with a loading state 1`] = `
 <button
   class="Button_ButtonContainer__1kgv65v2 Button_ButtonContainer_iconLayout_sx__1kgv65vb Button_ButtonContainer_size_medium__1kgv65v9 Button_ButtonContainer_theme_dark__1kgv65v3 Button_ButtonContainer_variant_primary__1kgv65v5 Button_ButtonContainer_compound_0__1kgv65vd"

src/components/Checkbox/Checkbox.css.ts

@@ -1,13 +1,13 @@
 import { globalStyle, style } from "@vanilla-extract/css";
-import { vars } from "../../utils/theme.css";
+import { themeContract } from "../../utils/themes";
 import { recipe } from "@vanilla-extract/recipes";
 
-const gap = vars.space[100];
-const size = vars.space[200];
-const checked = vars.colors.root.orange[500];
-const grey = vars.colors.root.neutral[300];
-const white = vars.colors.root.neutral[100]
-const error = vars.colors.root.red[600];
+const gap = themeContract.space[100];
+const size = themeContract.space[200];
+const checked = themeContract.colors.root.orange[500];
+const grey = themeContract.colors.root.neutral[300];
+const white = themeContract.colors.root.neutral[100];
+const error = themeContract.colors.root.red[600];
 
 export const wrapper = style({
   alignItems: "center",
@@ -19,11 +19,11 @@ export const wrapper = style({
 export const checkbox = recipe({
   base: {
     alignItems: "center",
-    backgroundColor: vars.colors.root.neutral[0],
+    backgroundColor: themeContract.colors.root.neutral[0],
     border: `1px solid ${grey}`,
     borderRadius: 4,
     display: "flex",
-    flexShrink:0,
+    flexShrink: 0,
     height: size,
     justifyContent: " center",
     transition: "all 200ms",

src/components/Checkbox/Checkbox.tsx

@@ -2,7 +2,7 @@ import type { CheckboxProps } from "react-aria-components";
 import { Checkbox as CheckboxAria } from "react-aria-components";
 import { checkbox, messageStyle, wrapper } from "./Checkbox.css";
 import { Body } from "../Typography";
-import { vars } from "../../utils/theme.css.ts";
+import { themeContract } from "../../utils/themes/themeContract.css.ts";
 
 type Props = React.PropsWithChildren<
   {
@@ -45,7 +45,11 @@ export const Checkbox = ({
           >
             <path
               d="M4.35982 7.39202L2.87769 8.73317L6.5114 12.7572L13.5542 5.70712L12.1414 4.29291L6.58447 9.85565L4.35982 7.39202Z"
-              fill={disabled ? vars.colors.root.neutral[300] : vars.colors.root.neutral[0]}
+              fill={
+                disabled
+                  ? themeContract.colors.root.neutral[300]
+                  : themeContract.colors.root.neutral[0]
+              }
             />
           </svg>
         )}

src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -73,7 +73,7 @@ exports[`Checkbox component > renders as selected 1`] = `
     >
       <path
         d="M4.35982 7.39202L2.87769 8.73317L6.5114 12.7572L13.5542 5.70712L12.1414 4.29291L6.58447 9.85565L4.35982 7.39202Z"
-        fill="var(--colors-root-neutral-0__w88n3727)"
+        fill="var(--colors-root-neutral-0__1g4476z26)"
       />
     </svg>
   </div>

src/components/Spinner/Spinner.css.ts

@@ -1,7 +1,7 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 import { keyframes } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
-import { vars } from "../../utils/theme.css";
+import { themeContract } from "../../utils/themes";
 
 const sizes: Record<"large" | "medium" | "small", number> = {
   large: 28,
@@ -90,7 +90,7 @@ export const Circle = recipe({
         variant: "primary",
       },
       style: {
-        borderColor: vars.colors.root.neutral[0],
+        borderColor: themeContract.colors.root.neutral[0],
       },
     },
     {
@@ -99,7 +99,7 @@ export const Circle = recipe({
         variant: "secondary" || "tertiary",
       },
       style: {
-        borderColor: vars.colors.root.neutral[600],
+        borderColor: themeContract.colors.root.neutral[600],
       },
     },
     {
@@ -108,7 +108,7 @@ export const Circle = recipe({
         variant: "primary",
       },
       style: {
-        borderColor: vars.colors.root.neutral[600],
+        borderColor: themeContract.colors.root.neutral[600],
       },
     },
     {
@@ -117,7 +117,7 @@ export const Circle = recipe({
         variant: "secondary" || "tertiary",
       },
       style: {
-        borderColor: vars.colors.root.neutral[0],
+        borderColor: themeContract.colors.root.neutral[0],
       },
     },
   ],
@@ -176,7 +176,7 @@ export const Spin = recipe({
         variant: "primary",
       },
       style: {
-        borderTopColor: vars.colors.root.neutral[0],
+        borderTopColor: themeContract.colors.root.neutral[0],
       },
     },
     {
@@ -185,7 +185,7 @@ export const Spin = recipe({
         variant: "secondary" || "tertiary",
       },
       style: {
-        borderTopColor: vars.colors.root.neutral[600],
+        borderTopColor: themeContract.colors.root.neutral[600],
       },
     },
     {
@@ -194,7 +194,7 @@ export const Spin = recipe({
         variant: "primary",
       },
       style: {
-        borderTopColor: vars.colors.root.neutral[600],
+        borderTopColor: themeContract.colors.root.neutral[600],
       },
     },
     {
@@ -203,7 +203,7 @@ export const Spin = recipe({
         variant: "secondary" || "tertiary",
       },
       style: {
-        borderTopColor: vars.colors.root.neutral[0],
+        borderTopColor: themeContract.colors.root.neutral[0],
       },
     },
   ],