Refactor theme and sprinkles

packages/bento-design-system/src/Chip/Chip.css.ts

@@ -20,9 +20,11 @@ export const chipRecipe = strictRecipe({
 
 export const maxWidth = createVar();
 
-export const ellipsedLabel = style({
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  maxWidth: maxWidth,
-});
+export const ellipsedLabel = style([
+  { maxWidth: maxWidth },
+  bentoSprinkles({
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  }),
+]);

packages/bento-design-system/src/Field/Field.css.ts

@@ -2,6 +2,7 @@ import { createVar } from "@vanilla-extract/css";
 import { bentoSprinkles } from "../internal/sprinkles.css";
 import { strictRecipe } from "../util/strictRecipe";
 import { vars } from "../vars.css";
+import { statusProperties } from "../util/atoms";
 
 export const readOnlyBackground = createVar();
 
@@ -46,7 +47,7 @@ export const inputRecipe = strictRecipe({
         {
           selectors: {
             [`&:focus-within${notDisabled}`]: {
-              boxShadow: vars.boxShadow.outlineInputFocus,
+              boxShadow: statusProperties.boxShadow.outlineInputFocus,
             },
           },
         },
@@ -61,7 +62,7 @@ export const inputRecipe = strictRecipe({
         {
           selectors: {
             [`&:focus-within${notDisabled}`]: {
-              boxShadow: vars.boxShadow.outlineNegativeStrong,
+              boxShadow: statusProperties.boxShadow.outlineNegativeStrong,
             },
           },
         },

packages/bento-design-system/src/Icons/Icon.css.ts

@@ -1,19 +1,18 @@
-import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { bentoSprinkles } from "../internal";
 
 export const iconRecipe = recipe({
   variants: {
     width: {
       8: bentoSprinkles({ width: 8 }),
-      12: style({ width: "12px" }),
+      12: bentoSprinkles({ width: 12 }),
       16: bentoSprinkles({ width: 16 }),
       24: bentoSprinkles({ width: 24 }),
       40: bentoSprinkles({ width: 40 }),
     },
     height: {
       8: bentoSprinkles({ height: 8 }),
-      12: style({ height: "12px" }),
+      12: bentoSprinkles({ height: 12 }),
       16: bentoSprinkles({ height: 16 }),
       24: bentoSprinkles({ height: 24 }),
       40: bentoSprinkles({ height: 40 }),

packages/bento-design-system/src/Icons/IconProps.ts

@@ -1,7 +1,7 @@
 import { BentoSprinkles } from "../internal";
 
 export type IconProps = {
-  size: Extract<BentoSprinkles["width"], 8 | 16 | 24 | 40> | 12;
+  size: Extract<BentoSprinkles["width"], 8 | 12 | 16 | 24 | 40>;
   color?:
     | "default"
     | "primary"

packages/bento-design-system/src/Modal/Modal.css.ts

@@ -35,6 +35,6 @@ export const underlay = bentoSprinkles({
   background: "backgroundDarkScrim",
 });
 
-export const modalBody = style({
+export const modalBody = bentoSprinkles({
   overflowY: "auto",
 });

packages/bento-design-system/src/RadioGroupField/Radio.css.ts

@@ -3,6 +3,7 @@ import { bentoSprinkles } from "../internal";
 import { strictRecipe } from "../util/strictRecipe";
 import { vars } from "../vars.css";
 import { radioOption } from "./RadioGroupField.css";
+import { statusProperties } from "../util/atoms";
 
 export const outerRadioCircleRecipe = strictRecipe({
   base: bentoSprinkles({
@@ -21,10 +22,10 @@ export const outerRadioCircleRecipe = strictRecipe({
         {
           selectors: {
             [`${radioOption}:hover:not([disabled]) &`]: {
-              boxShadow: vars.boxShadow.outlineInputHover,
+              boxShadow: statusProperties.boxShadow.outlineInputHover,
             },
             [`${radioOption}[disabled] &`]: {
-              boxShadow: vars.boxShadow.outlineInputDisabled,
+              boxShadow: statusProperties.boxShadow.outlineInputDisabled,
             },
           },
         },

packages/bento-design-system/src/SelectField/SelectField.css.ts

@@ -1,7 +1,6 @@
 import { style } from "@vanilla-extract/css";
 import { bentoSprinkles } from "../internal";
 import { strictRecipe } from "../util/strictRecipe";
-import { vars } from "../vars.css";
 
 export const control = strictRecipe({
   base: [
@@ -60,25 +59,23 @@ export const control = strictRecipe({
   ],
 });
 
-export const singleValue = style({
-  gridArea: "1/1/2/3",
-  textOverflow: "ellipsis",
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-});
-
-export const placeholder = style({ gridArea: "1/1/2/3" });
-
-export const menu = style([
-  {
-    marginTop: vars.space[4],
-    overflow: "hidden",
-  },
+export const singleValue = style([
   bentoSprinkles({
-    background: "backgroundPrimary",
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
   }),
+  { gridArea: "1/1/2/3" },
 ]);
 
+export const placeholder = style({ gridArea: "1/1/2/3" });
+
+export const menu = bentoSprinkles({
+  marginTop: 4,
+  background: "backgroundPrimary",
+  overflow: "hidden",
+});
+
 export const optionRecipe = strictRecipe({
   base: bentoSprinkles({
     cursor: { default: "pointer", disabled: "notAllowed" },

packages/bento-design-system/src/Slider/Slider.css.ts

@@ -8,7 +8,7 @@ export const slider = style({
   // so their labels don't contribute to the vertical space, causing them to overlap with elements
   // below the Slider.
   // This takes into account the height the label + the space between the label and the thumb
-  paddingBottom: `calc(${vars.lineHeight.bodyMedium} + ${vars.space[8]})`,
+  paddingBottom: `calc(${vars.lineHeight.bodyMedium} + 8)`,
 });
 
 export const trackContainer = bentoSprinkles({

packages/bento-design-system/src/Switch/Switch.css.ts

@@ -3,6 +3,7 @@ import { vars } from "../vars.css";
 import { bentoSprinkles } from "../internal";
 import { strictRecipe } from "../util/strictRecipe";
 import { extendedHitAreaRecipe } from "../util/extendedHitArea.css";
+import { statusProperties } from "../util/atoms";
 
 export const switchContainer = style([
   { position: "relative", zIndex: "1" },
@@ -34,7 +35,7 @@ export const switchOuterRecipe = strictRecipe({
         {
           selectors: {
             [`${switchContainer}:hover:not([disabled]) &`]: {
-              boxShadow: vars.boxShadow.outlineInputHover,
+              boxShadow: statusProperties.boxShadow.outlineInputHover,
             },
           },
         },

packages/bento-design-system/src/Table/Table.css.ts

@@ -3,11 +3,15 @@ import { bentoSprinkles } from "../internal";
 import { strictRecipe } from "../util/strictRecipe";
 import { vars } from "../vars.css";
 
-export const table = style({
-  gridAutoRows: "max-content",
-  // NOTE(gabro): this is to avoid the internal z-indexes to "leak" out of the Table
-  isolation: "isolate",
-});
+export const table = style([
+  {
+    gridAutoRows: "max-content",
+  },
+  bentoSprinkles({
+    // NOTE(gabro): this is to avoid the internal z-indexes to "leak" out of the Table
+    isolation: "isolate",
+  }),
+]);
 
 export const lastLeftStickyColumn = strictRecipe({
   variants: {

packages/bento-design-system/src/Typography/Body/Body.css.ts

@@ -3,16 +3,28 @@ import { bentoSprinkles } from "../../internal/sprinkles.css";
 import { ellipsis } from "../typography.css";
 
 export const bodyRecipe = strictRecipe({
-  base: bentoSprinkles({ fontFamily: "default" }),
+  base: bentoSprinkles({ fontFamily: "body" }),
   variants: {
     size: {
-      small: bentoSprinkles({ fontSize: "bodySmall", lineHeight: "bodySmall", letterSpacing: 1 }),
-      medium: bentoSprinkles({ fontSize: "bodyMedium", lineHeight: "bodyMedium" }),
-      large: bentoSprinkles({ fontSize: "bodyLarge", lineHeight: "bodyLarge" }),
+      small: bentoSprinkles({
+        fontSize: "bodySmall",
+        lineHeight: "bodySmall",
+        letterSpacing: "bodySmall",
+      }),
+      medium: bentoSprinkles({
+        fontSize: "bodyMedium",
+        lineHeight: "bodyMedium",
+        letterSpacing: "bodyMedium",
+      }),
+      large: bentoSprinkles({
+        fontSize: "bodyLarge",
+        lineHeight: "bodyLarge",
+        letterSpacing: "bodyLarge",
+      }),
     },
     weight: {
-      default: bentoSprinkles({ fontWeight: "body" }),
-      strong: bentoSprinkles({ fontWeight: "bodyStrong" }),
+      default: {},
+      strong: {},
     },
     color: {
       default: bentoSprinkles({ color: "textPrimary" }),
@@ -33,4 +45,48 @@ export const bodyRecipe = strictRecipe({
       true: ellipsis,
     },
   },
+  compoundVariants: [
+    {
+      variants: {
+        size: "small",
+        weight: "default",
+      },
+      style: bentoSprinkles({ fontWeight: "bodySmall" }),
+    },
+    {
+      variants: {
+        size: "medium",
+        weight: "default",
+      },
+      style: bentoSprinkles({ fontWeight: "bodyMedium" }),
+    },
+    {
+      variants: {
+        size: "large",
+        weight: "default",
+      },
+      style: bentoSprinkles({ fontWeight: "bodyLarge" }),
+    },
+    {
+      variants: {
+        size: "small",
+        weight: "strong",
+      },
+      style: bentoSprinkles({ fontWeight: "bodyStrongSmall" }),
+    },
+    {
+      variants: {
+        size: "medium",
+        weight: "strong",
+      },
+      style: bentoSprinkles({ fontWeight: "bodyStrongMedium" }),
+    },
+    {
+      variants: {
+        size: "large",
+        weight: "strong",
+      },
+      style: bentoSprinkles({ fontWeight: "bodyStrongLarge" }),
+    },
+  ],
 });

packages/bento-design-system/src/Typography/Body/Body.tsx

@@ -17,12 +17,7 @@ export function Body({
   as = "span",
 }: Props) {
   return (
-    <Box
-      as={as}
-      className={bodyRecipe({ weight, size, color, ellipsis })}
-      textAlign={align}
-      fontFamily="default"
-    >
+    <Box as={as} className={bodyRecipe({ weight, size, color, ellipsis })} textAlign={align}>
       {children}
     </Box>
   );

packages/bento-design-system/src/Typography/Display/Display.css.ts

@@ -3,12 +3,27 @@ import { bentoSprinkles } from "../../internal";
 import { ellipsis } from "../typography.css";
 
 export const displayRecipe = strictRecipe({
-  base: bentoSprinkles({ fontFamily: "default", fontWeight: "display", color: "textPrimary" }),
+  base: bentoSprinkles({ fontFamily: "display", color: "textPrimary" }),
   variants: {
     size: {
-      small: bentoSprinkles({ fontSize: "displaySmall", lineHeight: "displaySmall" }),
-      medium: bentoSprinkles({ fontSize: "displayMedium", lineHeight: "displayMedium" }),
-      large: bentoSprinkles({ fontSize: "displayLarge", lineHeight: "displayLarge" }),
+      small: bentoSprinkles({
+        fontSize: "displaySmall",
+        lineHeight: "displaySmall",
+        fontWeight: "displaySmall",
+        letterSpacing: "displaySmall",
+      }),
+      medium: bentoSprinkles({
+        fontSize: "displayMedium",
+        lineHeight: "displayMedium",
+        fontWeight: "displayMedium",
+        letterSpacing: "displayMedium",
+      }),
+      large: bentoSprinkles({
+        fontSize: "displayLarge",
+        lineHeight: "displayLarge",
+        fontWeight: "displayLarge",
+        letterSpacing: "displayLarge",
+      }),
     },
     color: {
       primary: bentoSprinkles({ color: "textPrimary" }),

packages/bento-design-system/src/Typography/Headline/Headline.css.ts

@@ -3,12 +3,27 @@ import { bentoSprinkles } from "../../internal";
 import { ellipsis } from "../typography.css";
 
 export const headlineRecipe = strictRecipe({
-  base: bentoSprinkles({ fontFamily: "default", fontWeight: "headline", color: "textPrimary" }),
+  base: bentoSprinkles({ fontFamily: "headline", color: "textPrimary" }),
   variants: {
     size: {
-      small: bentoSprinkles({ fontSize: "headlineSmall", lineHeight: "headlineSmall" }),
-      medium: bentoSprinkles({ fontSize: "headlineMedium", lineHeight: "headlineMedium" }),
-      large: bentoSprinkles({ fontSize: "headlineLarge", lineHeight: "headlineLarge" }),
+      small: bentoSprinkles({
+        fontSize: "headlineSmall",
+        lineHeight: "headlineSmall",
+        fontWeight: "headlineSmall",
+        letterSpacing: "headlineSmall",
+      }),
+      medium: bentoSprinkles({
+        fontSize: "headlineMedium",
+        lineHeight: "headlineMedium",
+        fontWeight: "headlineMedium",
+        letterSpacing: "headlineMedium",
+      }),
+      large: bentoSprinkles({
+        fontSize: "headlineLarge",
+        lineHeight: "headlineLarge",
+        fontWeight: "headlineLarge",
+        letterSpacing: "headlineLarge",
+      }),
     },
     color: {
       primary: bentoSprinkles({ color: "textPrimary" }),

packages/bento-design-system/src/Typography/Label/Label.css.ts

@@ -3,23 +3,26 @@ import { bentoSprinkles } from "../../internal/sprinkles.css";
 import { ellipsis } from "../typography.css";
 
 export const labelRecipe = strictRecipe({
-  base: bentoSprinkles({ fontFamily: "default", fontWeight: "label" }),
+  base: bentoSprinkles({ fontFamily: "label" }),
   variants: {
     size: {
       small: bentoSprinkles({
         fontSize: "labelSmall",
         lineHeight: "labelSmall",
-        letterSpacing: 1,
+        fontWeight: "labelSmall",
+        letterSpacing: "labelSmall",
       }),
       medium: bentoSprinkles({
         fontSize: "labelMedium",
         lineHeight: "labelMedium",
-        letterSpacing: 1,
+        fontWeight: "labelMedium",
+        letterSpacing: "labelMedium",
       }),
       large: bentoSprinkles({
         fontSize: "labelLarge",
         lineHeight: "labelLarge",
-        letterSpacing: 2,
+        fontWeight: "labelLarge",
+        letterSpacing: "labelLarge",
       }),
     },
     color: {