From 3fc0d3ac8ff11579d7dd5ff18f7de54d2b4d60c7 Mon Sep 17 00:00:00 2001 From: Vincenzo Guerrisi Date: Fri, 26 Apr 2024 19:31:24 +0200 Subject: [PATCH 1/5] refactor theme and sprinkles --- .../bento-design-system/src/Chip/Chip.css.ts | 14 +- .../src/Field/Field.css.ts | 5 +- .../bento-design-system/src/Icons/Icon.css.ts | 5 +- .../src/Icons/IconProps.ts | 2 +- .../src/Modal/Modal.css.ts | 2 +- .../src/RadioGroupField/Radio.css.ts | 5 +- .../src/SelectField/SelectField.css.ts | 29 ++- .../src/Slider/Slider.css.ts | 2 +- .../src/Switch/Switch.css.ts | 3 +- .../src/Table/Table.css.ts | 14 +- .../src/Typography/Body/Body.css.ts | 4 +- .../src/Typography/Body/Body.tsx | 7 +- .../src/Typography/Display/Display.css.ts | 2 +- .../src/Typography/Headline/Headline.css.ts | 2 +- .../src/Typography/Label/Label.css.ts | 5 +- .../src/Typography/Title/Title.css.ts | 3 +- .../bento-design-system/src/util/atoms.ts | 137 +++++++++-- .../src/util/bentoTokens.ts | 159 +++---------- .../src/util/defaultTokens.ts | 188 +++++++-------- packages/bento-design-system/src/vars.css.ts | 214 +++++++++--------- 20 files changed, 398 insertions(+), 404 deletions(-) diff --git a/packages/bento-design-system/src/Chip/Chip.css.ts b/packages/bento-design-system/src/Chip/Chip.css.ts index 1b92597ff..adc81c064 100644 --- a/packages/bento-design-system/src/Chip/Chip.css.ts +++ b/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", + }), +]); diff --git a/packages/bento-design-system/src/Field/Field.css.ts b/packages/bento-design-system/src/Field/Field.css.ts index a7e756db9..a2088823f 100644 --- a/packages/bento-design-system/src/Field/Field.css.ts +++ b/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, }, }, }, diff --git a/packages/bento-design-system/src/Icons/Icon.css.ts b/packages/bento-design-system/src/Icons/Icon.css.ts index c90d98aff..715194067 100644 --- a/packages/bento-design-system/src/Icons/Icon.css.ts +++ b/packages/bento-design-system/src/Icons/Icon.css.ts @@ -1,4 +1,3 @@ -import { style } from "@vanilla-extract/css"; import { recipe } from "@vanilla-extract/recipes"; import { bentoSprinkles } from "../internal"; @@ -6,14 +5,14 @@ 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 }), diff --git a/packages/bento-design-system/src/Icons/IconProps.ts b/packages/bento-design-system/src/Icons/IconProps.ts index 4b7d4dd6d..7db44b477 100644 --- a/packages/bento-design-system/src/Icons/IconProps.ts +++ b/packages/bento-design-system/src/Icons/IconProps.ts @@ -1,7 +1,7 @@ import { BentoSprinkles } from "../internal"; export type IconProps = { - size: Extract | 12; + size: Extract; color?: | "default" | "primary" diff --git a/packages/bento-design-system/src/Modal/Modal.css.ts b/packages/bento-design-system/src/Modal/Modal.css.ts index 9f2cf3ad7..251907107 100644 --- a/packages/bento-design-system/src/Modal/Modal.css.ts +++ b/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", }); diff --git a/packages/bento-design-system/src/RadioGroupField/Radio.css.ts b/packages/bento-design-system/src/RadioGroupField/Radio.css.ts index e9956eb0e..38b909462 100644 --- a/packages/bento-design-system/src/RadioGroupField/Radio.css.ts +++ b/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, }, }, }, diff --git a/packages/bento-design-system/src/SelectField/SelectField.css.ts b/packages/bento-design-system/src/SelectField/SelectField.css.ts index a7ddd3bdc..d485d4b73 100644 --- a/packages/bento-design-system/src/SelectField/SelectField.css.ts +++ b/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" }, diff --git a/packages/bento-design-system/src/Slider/Slider.css.ts b/packages/bento-design-system/src/Slider/Slider.css.ts index a8c93bc84..94b0bd8ef 100644 --- a/packages/bento-design-system/src/Slider/Slider.css.ts +++ b/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.typography.body.sizes.medium.lineHeight} + 8)`, }); export const trackContainer = bentoSprinkles({ diff --git a/packages/bento-design-system/src/Switch/Switch.css.ts b/packages/bento-design-system/src/Switch/Switch.css.ts index 211ec3e69..6668d3101 100644 --- a/packages/bento-design-system/src/Switch/Switch.css.ts +++ b/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, }, }, }, diff --git a/packages/bento-design-system/src/Table/Table.css.ts b/packages/bento-design-system/src/Table/Table.css.ts index 494c5cdfb..25bbfb4b0 100644 --- a/packages/bento-design-system/src/Table/Table.css.ts +++ b/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: { diff --git a/packages/bento-design-system/src/Typography/Body/Body.css.ts b/packages/bento-design-system/src/Typography/Body/Body.css.ts index 075f493f2..b73824ed2 100644 --- a/packages/bento-design-system/src/Typography/Body/Body.css.ts +++ b/packages/bento-design-system/src/Typography/Body/Body.css.ts @@ -3,10 +3,10 @@ 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 }), + small: bentoSprinkles({ fontSize: "bodySmall", lineHeight: "bodySmall" }), medium: bentoSprinkles({ fontSize: "bodyMedium", lineHeight: "bodyMedium" }), large: bentoSprinkles({ fontSize: "bodyLarge", lineHeight: "bodyLarge" }), }, diff --git a/packages/bento-design-system/src/Typography/Body/Body.tsx b/packages/bento-design-system/src/Typography/Body/Body.tsx index 2b351e869..c6193fde1 100644 --- a/packages/bento-design-system/src/Typography/Body/Body.tsx +++ b/packages/bento-design-system/src/Typography/Body/Body.tsx @@ -17,12 +17,7 @@ export function Body({ as = "span", }: Props) { return ( - + {children} ); diff --git a/packages/bento-design-system/src/Typography/Display/Display.css.ts b/packages/bento-design-system/src/Typography/Display/Display.css.ts index 9dcbb96db..1e48e3beb 100644 --- a/packages/bento-design-system/src/Typography/Display/Display.css.ts +++ b/packages/bento-design-system/src/Typography/Display/Display.css.ts @@ -3,7 +3,7 @@ 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", fontWeight: "display", color: "textPrimary" }), variants: { size: { small: bentoSprinkles({ fontSize: "displaySmall", lineHeight: "displaySmall" }), diff --git a/packages/bento-design-system/src/Typography/Headline/Headline.css.ts b/packages/bento-design-system/src/Typography/Headline/Headline.css.ts index c5829b7c6..d3dc44350 100644 --- a/packages/bento-design-system/src/Typography/Headline/Headline.css.ts +++ b/packages/bento-design-system/src/Typography/Headline/Headline.css.ts @@ -3,7 +3,7 @@ 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", fontWeight: "headline", color: "textPrimary" }), variants: { size: { small: bentoSprinkles({ fontSize: "headlineSmall", lineHeight: "headlineSmall" }), diff --git a/packages/bento-design-system/src/Typography/Label/Label.css.ts b/packages/bento-design-system/src/Typography/Label/Label.css.ts index 89069ead4..11391acc8 100644 --- a/packages/bento-design-system/src/Typography/Label/Label.css.ts +++ b/packages/bento-design-system/src/Typography/Label/Label.css.ts @@ -3,23 +3,20 @@ 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", fontWeight: "label" }), variants: { size: { small: bentoSprinkles({ fontSize: "labelSmall", lineHeight: "labelSmall", - letterSpacing: 1, }), medium: bentoSprinkles({ fontSize: "labelMedium", lineHeight: "labelMedium", - letterSpacing: 1, }), large: bentoSprinkles({ fontSize: "labelLarge", lineHeight: "labelLarge", - letterSpacing: 2, }), }, color: { diff --git a/packages/bento-design-system/src/Typography/Title/Title.css.ts b/packages/bento-design-system/src/Typography/Title/Title.css.ts index 24c4c9e5c..26540ab44 100644 --- a/packages/bento-design-system/src/Typography/Title/Title.css.ts +++ b/packages/bento-design-system/src/Typography/Title/Title.css.ts @@ -3,13 +3,12 @@ import { bentoSprinkles } from "../../internal/sprinkles.css"; import { ellipsis } from "../typography.css"; export const titleRecipe = strictRecipe({ - base: bentoSprinkles({ fontFamily: "default", fontWeight: "title" }), + base: bentoSprinkles({ fontFamily: "title", fontWeight: "title" }), variants: { size: { small: bentoSprinkles({ fontSize: "titleSmall", lineHeight: "titleSmall", - letterSpacing: 1, }), medium: bentoSprinkles({ fontSize: "titleMedium", lineHeight: "titleMedium" }), large: bentoSprinkles({ fontSize: "titleLarge", lineHeight: "titleLarge" }), diff --git a/packages/bento-design-system/src/util/atoms.ts b/packages/bento-design-system/src/util/atoms.ts index 4656beec8..364a254ab 100644 --- a/packages/bento-design-system/src/util/atoms.ts +++ b/packages/bento-design-system/src/util/atoms.ts @@ -1,22 +1,59 @@ +import { CSSVarFunction } from "@vanilla-extract/private"; import { vars } from "../vars.css"; -const radius = { - ...vars.radius, +const spacing = { 0: 0, + 4: 4, + 8: 8, 12: 12, + 16: 16, 24: 24, 32: 32, 40: 40, 80: 80, + 120: 120, + 160: 160, +} as const; + +const negativeSpacing = { + negative0: 0, + negative4: 4, + negative8: 8, + negative12: 12, + negative16: 16, + negative24: 24, + negative32: 32, + negative40: 40, + negative80: 80, + negative120: 120, + negative160: 160, +} as const; + +const radius = { + ...spacing, circled: "50%", // dirty trick to make the border-radius look good regardless of the width of the container circledX: "100vh", -}; +} as const; export * from "./conditions"; export * from "./shorthands"; +type BoxShadowConfig = "" | "Bottom" | "Strong"; +type BoxShadowVars = Record<`${keyof typeof vars.outlineColor}${BoxShadowConfig}`, CSSVarFunction>; +const boxShadowsFromOutlines: BoxShadowVars = Object.entries(vars.outlineColor).reduce( + (acc, [key, value]) => { + return { + ...acc, + [key]: `inset 0px 0px 0px 1px ${value}`, + [`${key}Bottom`]: `inset 0px -1px 0px ${value}`, + [`${key}Strong`]: `inset 0px 0px 0px 2px ${value}`, + }; + }, + {} as BoxShadowVars +); + export const unconditionalProperties = { borderRadius: radius, borderTopLeftRadius: radius, @@ -24,13 +61,57 @@ export const unconditionalProperties = { borderBottomLeftRadius: radius, borderBottomRightRadius: radius, textTransform: ["none", "uppercase", "lowercase", "capitalize"], - fontFamily: vars.fontFamily, - fontWeight: vars.fontWeight, - fontSize: vars.fontSize, - lineHeight: vars.lineHeight, - letterSpacing: vars.letterSpacing, + fontFamily: { + body: vars.typography.body.fontFamily, + display: vars.typography.display.fontFamily, + headline: vars.typography.headline.fontFamily, + label: vars.typography.label.fontFamily, + title: vars.typography.title.fontFamily, + }, + fontWeight: { + body: vars.typography.body.fontWeight.regular, + bodyStrong: vars.typography.body.fontWeight.strong, + display: vars.typography.display.fontWeight, + headline: vars.typography.headline.fontWeight, + label: vars.typography.label.fontWeight, + title: vars.typography.title.fontWeight, + }, + fontSize: { + bodySmall: vars.typography.body.sizes.small.fontSize, + bodyMedium: vars.typography.body.sizes.medium.fontSize, + bodyLarge: vars.typography.body.sizes.large.fontSize, + displaySmall: vars.typography.display.sizes.small.fontSize, + displayMedium: vars.typography.display.sizes.medium.fontSize, + displayLarge: vars.typography.display.sizes.large.fontSize, + headlineSmall: vars.typography.headline.sizes.small.fontSize, + headlineMedium: vars.typography.headline.sizes.medium.fontSize, + headlineLarge: vars.typography.headline.sizes.large.fontSize, + labelSmall: vars.typography.label.sizes.small.fontSize, + labelMedium: vars.typography.label.sizes.medium.fontSize, + labelLarge: vars.typography.label.sizes.large.fontSize, + titleSmall: vars.typography.title.sizes.small.fontSize, + titleMedium: vars.typography.title.sizes.medium.fontSize, + titleLarge: vars.typography.title.sizes.large.fontSize, + }, + lineHeight: { + bodySmall: vars.typography.body.sizes.small.lineHeight, + bodyMedium: vars.typography.body.sizes.medium.lineHeight, + bodyLarge: vars.typography.body.sizes.large.lineHeight, + displaySmall: vars.typography.display.sizes.small.lineHeight, + displayMedium: vars.typography.display.sizes.medium.lineHeight, + displayLarge: vars.typography.display.sizes.large.lineHeight, + headlineSmall: vars.typography.headline.sizes.small.lineHeight, + headlineMedium: vars.typography.headline.sizes.medium.lineHeight, + headlineLarge: vars.typography.headline.sizes.large.lineHeight, + labelSmall: vars.typography.label.sizes.small.lineHeight, + labelMedium: vars.typography.label.sizes.medium.lineHeight, + labelLarge: vars.typography.label.sizes.large.lineHeight, + titleSmall: vars.typography.title.sizes.small.lineHeight, + titleMedium: vars.typography.title.sizes.medium.lineHeight, + titleLarge: vars.typography.title.sizes.large.lineHeight, + }, height: { - ...vars.space, + ...spacing, full: "100%", }, position: ["relative", "absolute", "fixed", "sticky"], @@ -38,6 +119,8 @@ export const unconditionalProperties = { overflowX: ["hidden", "visible", "auto"], overflowY: ["hidden", "visible", "auto"], isolation: ["auto", "isolate"], + textOverflow: ["ellipsis"], + whiteSpace: ["nowrap"], } as const; export const responsiveProperties = { @@ -69,27 +152,27 @@ export const responsiveProperties = { flexGrow: [0, 1, 2], flex: [0, 1, 2], width: { - ...vars.space, + ...spacing, full: "100%", }, - paddingTop: vars.space, - paddingBottom: vars.space, - paddingLeft: vars.space, - paddingRight: vars.space, - gap: vars.space, + paddingTop: spacing, + paddingBottom: spacing, + paddingLeft: spacing, + paddingRight: spacing, + gap: spacing, textAlign: ["left", "center", "right", "justify"], maxWidth: { 700: "700px", 1440: "1440px", }, - top: vars.space, - bottom: vars.space, - left: vars.space, - right: vars.space, - marginTop: vars.negativeSpace, - marginBottom: vars.negativeSpace, - marginLeft: vars.negativeSpace, - marginRight: vars.negativeSpace, + top: spacing, + bottom: spacing, + left: spacing, + right: spacing, + marginTop: { ...spacing, ...negativeSpacing }, + marginBottom: { ...spacing, ...negativeSpacing }, + marginLeft: { ...spacing, ...negativeSpacing }, + marginRight: { ...spacing, ...negativeSpacing }, } as const; const color = { @@ -121,6 +204,7 @@ export const allColors = { ...vars.textColor, ...vars.foregroundColor, ...vars.backgroundColor, + ...vars.interactiveForegroundColor, ...vars.interactiveBackgroundColor, ...vars.outlineColor, ...vars.dataVisualizationColor, @@ -135,7 +219,12 @@ export const statusProperties = { default: "default", notAllowed: "not-allowed", }, - boxShadow: { ...vars.boxShadow, none: "none", inherit: "inset 0px 0px 0px 1px" }, + boxShadow: { + ...boxShadowsFromOutlines, + ...vars.elevations, + none: "none", + inherit: "inset 0px 0px 0px 1px", + }, outline: { none: "none", }, diff --git a/packages/bento-design-system/src/util/bentoTokens.ts b/packages/bento-design-system/src/util/bentoTokens.ts index a6229e07e..a31b9bc99 100644 --- a/packages/bento-design-system/src/util/bentoTokens.ts +++ b/packages/bento-design-system/src/util/bentoTokens.ts @@ -1,81 +1,37 @@ +import { TypographySize } from "../Typography/TypographyProps"; + +export type DataVisualizationPalette = "pastel" | "soft" | "bright" | "dark"; +export type DataVisualizationColor = + | "Grey" + | "Red" + | "Orange" + | "Yellow" + | "Green" + | "Jade" + | "Blue" + | "Indigo" + | "Violet" + | "Pink"; + +type TypographyTokens = { + fontFamily: string; + fontWeight: HasBold extends true ? { regular: string; strong: string } : string; + sizes: Record< + TypographySize, + { + fontSize: string; + lineHeight: string; + } + >; +}; + export type BentoTokens = { - fontFamily: { - default: string; - }; - fontWeight: { - body: string; - bodyStrong: string; - display: string; - headline: string; - label: string; - title: string; - }; - fontSize: { - bodySmall: string; - bodyMedium: string; - bodyLarge: string; - displaySmall: string; - displayMedium: string; - displayLarge: string; - headlineSmall: string; - headlineMedium: string; - headlineLarge: string; - labelSmall: string; - labelMedium: string; - labelLarge: string; - titleSmall: string; - titleMedium: string; - titleLarge: string; - }; - lineHeight: { - bodySmall: string; - bodyMedium: string; - bodyLarge: string; - displaySmall: string; - displayMedium: string; - displayLarge: string; - headlineSmall: string; - headlineMedium: string; - headlineLarge: string; - labelSmall: string; - labelMedium: string; - labelLarge: string; - titleSmall: string; - titleMedium: string; - titleLarge: string; - }; - letterSpacing: { - 1: string; - 2: string; - }; - space: { - 0: string; - 4: string; - 8: string; - 12: string; - 16: string; - 24: string; - 32: string; - 40: string; - 80: string; - }; - negativeSpace: { - 0: string; - // NOTE(gabro): ideally we would use "-4" and so on here, but we can't due to - // https://github.com/Swatinem/rollup-plugin-dts/issues/201 - negative4: string; - negative8: string; - negative12: string; - negative16: string; - negative24: string; - negative32: string; - negative40: string; - negative80: string; - }; - radius: { - 4: string; - 8: string; - 16: string; + typography: { + body: TypographyTokens; + display: TypographyTokens; + headline: TypographyTokens; + label: TypographyTokens; + title: TypographyTokens; }; brandColor: { brandPrimary: string; @@ -196,53 +152,8 @@ export type BentoTokens = { outlineWarning: string; outlineNegative: string; }; - dataVisualizationColor: { - softGrey: string; - softRed: string; - softOrange: string; - softYellow: string; - softGreen: string; - softJade: string; - softBlue: string; - softIndigo: string; - softViolet: string; - softPink: string; - brightGrey: string; - brightRed: string; - brightOrange: string; - brightYellow: string; - brightGreen: string; - brightJade: string; - brightBlue: string; - brightIndigo: string; - brightViolet: string; - brightPink: string; - }; - boxShadow: { - outlineInteractive: string; - outlineInteractiveBottom: string; - outlineInteractivePrimaryEnabled: string; - outlineInteractivePrimaryFocus: string; - outlineInteractivePrimaryHover: string; - outlineInteractiveSecondaryEnabled: string; - outlineInteractiveSecondaryFocus: string; - outlineInteractiveSecondaryHover: string; - outlineInteractiveDangerEnabled: string; - outlineInteractiveDangerFocus: string; - outlineInteractiveDangerHover: string; - outlineInteractiveDisabled: string; - outlineDecorative: string; - outlineDecorativeBottom: string; - outlineContainer: string; - outlineInputEnabled: string; - outlineInputHover: string; - outlineInputFocus: string; - outlineInputDisabled: string; - outlineInformative: string; - outlinePositive: string; - outlineWarning: string; - outlineNegative: string; - outlineNegativeStrong: string; + dataVisualizationColor: Record<`${DataVisualizationPalette}${DataVisualizationColor}`, string>; + elevations: { elevationSmall: string; elevationMedium: string; elevationLarge: string; diff --git a/packages/bento-design-system/src/util/defaultTokens.ts b/packages/bento-design-system/src/util/defaultTokens.ts index e0279472c..e11a36073 100644 --- a/packages/bento-design-system/src/util/defaultTokens.ts +++ b/packages/bento-design-system/src/util/defaultTokens.ts @@ -44,102 +44,94 @@ const colors = { interactive10_40: "rgba(179, 190, 255, 0.4)", interactive40: "#5C17E5", interactive60: "#360090", + red01: "#FFF2F4", red10: "#FFBDCB", red30: "#FC5275", + red50: "#D20E36", + orange01: "#FFF6F2", orange10: "#FFD4BC", orange30: "#FB8951", + orange50: "#D24E0D", + yellow01: "#FFFCF2", yellow10: "#FFF4B2", yellow30: "#FFD439", + yellow50: "#C39200", + green01: "#F9FFF2", green10: "#DBF1BC", green30: "#A3D65C", + green50: "#5F9F07", + jade01: "#F2FFF8", jade10: "#B7F6D7", jade30: "#51E098", + jade50: "#01A252", + blue01: "#F2FCFF", blue10: "#BCF2FF", blue30: "#51D0FB", + blue50: "#0DA0D2", + indigo01: "#ECEFF4", indigo10: "#C0D3F9", indigo30: "#5F8CE6", + indigo50: "#1D54C2", + violet01: "#FAF2FF", violet10: "#DABEEA", violet30: "#A463C7", + violet50: "#7C20AD", + pink01: "#FFF2F9", pink10: "#F8B0DA", pink30: "#E648A4", + pink50: "#C20B76", }; +const displayFontFamily = "Lexend, Arial, sans-serif"; +const groteskFontFamily = "Lexend, Arial, sans-serif"; + export const defaultTokens: BentoTokens = { - fontFamily: { - default: "Lexend, Arial, sans-serif", - }, - fontSize: { - bodySmall: pixelToRem(12), - bodyMedium: pixelToRem(14), - bodyLarge: pixelToRem(16), - headlineSmall: pixelToRem(32), - headlineMedium: pixelToRem(36), - headlineLarge: pixelToRem(40), - displaySmall: pixelToRem(44), - displayMedium: pixelToRem(52), - displayLarge: pixelToRem(64), - labelSmall: pixelToRem(12), - labelMedium: pixelToRem(14), - labelLarge: pixelToRem(16), - titleSmall: pixelToRem(14), - titleMedium: pixelToRem(16), - titleLarge: pixelToRem(22), - }, - lineHeight: { - bodySmall: pixelToRem(18), - bodyMedium: pixelToRem(20), - bodyLarge: pixelToRem(24), - headlineSmall: pixelToRem(36), - headlineMedium: pixelToRem(40), - headlineLarge: pixelToRem(44), - displaySmall: pixelToRem(50), - displayMedium: pixelToRem(58), - displayLarge: pixelToRem(72), - labelSmall: pixelToRem(18), - labelMedium: pixelToRem(20), - labelLarge: pixelToRem(24), - titleSmall: pixelToRem(16), - titleMedium: pixelToRem(18), - titleLarge: pixelToRem(24), - }, - fontWeight: { - body: "400", - bodyStrong: "600", - display: "600", - headline: "600", - label: "500", - title: "600", - }, - letterSpacing: { - 1: "0", - 2: "0", - }, - space: { - 0: "0", - 4: "4px", - 8: "8px", - 12: "12px", - 16: "16px", - 24: "24px", - 32: "32px", - 40: "40px", - 80: "80px", - }, - negativeSpace: { - 0: "0", - negative4: "-4px", - negative8: "-8px", - negative12: "-12px", - negative16: "-16px", - negative24: "-24px", - negative32: "-32px", - negative40: "-40px", - negative80: "-80px", - }, - radius: { - 4: "4px", - 8: "8px", - 16: "16px", + typography: { + body: { + fontFamily: groteskFontFamily, + fontWeight: { regular: "400", strong: "600" }, + sizes: { + small: { fontSize: pixelToRem(12), lineHeight: pixelToRem(18) }, + medium: { fontSize: pixelToRem(14), lineHeight: pixelToRem(20) }, + large: { fontSize: pixelToRem(16), lineHeight: pixelToRem(24) }, + }, + }, + headline: { + fontFamily: displayFontFamily, + fontWeight: "600", + sizes: { + small: { fontSize: pixelToRem(32), lineHeight: pixelToRem(36) }, + medium: { fontSize: pixelToRem(36), lineHeight: pixelToRem(40) }, + large: { fontSize: pixelToRem(40), lineHeight: pixelToRem(44) }, + }, + }, + display: { + fontFamily: displayFontFamily, + fontWeight: "600", + sizes: { + small: { fontSize: pixelToRem(44), lineHeight: pixelToRem(50) }, + medium: { fontSize: pixelToRem(52), lineHeight: pixelToRem(58) }, + large: { fontSize: pixelToRem(64), lineHeight: pixelToRem(72) }, + }, + }, + label: { + fontFamily: groteskFontFamily, + fontWeight: "500", + sizes: { + small: { fontSize: pixelToRem(12), lineHeight: pixelToRem(18) }, + medium: { fontSize: pixelToRem(14), lineHeight: pixelToRem(20) }, + large: { fontSize: pixelToRem(16), lineHeight: pixelToRem(24) }, + }, + }, + title: { + fontFamily: displayFontFamily, + fontWeight: "600", + sizes: { + small: { fontSize: pixelToRem(14), lineHeight: pixelToRem(16) }, + medium: { fontSize: pixelToRem(16), lineHeight: pixelToRem(18) }, + large: { fontSize: pixelToRem(22), lineHeight: pixelToRem(24) }, + }, + }, }, brandColor: { brandPrimary: colors.bentoViolet40, @@ -261,6 +253,16 @@ export const defaultTokens: BentoTokens = { outlineNegative: colors.negative30, }, dataVisualizationColor: { + pastelGrey: colors.neutral01, + pastelRed: colors.red01, + pastelOrange: colors.orange01, + pastelYellow: colors.yellow01, + pastelGreen: colors.green01, + pastelJade: colors.jade01, + pastelBlue: colors.blue01, + pastelIndigo: colors.indigo01, + pastelViolet: colors.violet01, + pastelPink: colors.pink01, softGrey: colors.neutral10, softRed: colors.red10, softOrange: colors.orange10, @@ -281,32 +283,18 @@ export const defaultTokens: BentoTokens = { brightIndigo: colors.indigo30, brightViolet: colors.violet30, brightPink: colors.pink30, + darkGrey: colors.neutral50, + darkRed: colors.red50, + darkOrange: colors.orange50, + darkYellow: colors.yellow50, + darkGreen: colors.green50, + darkJade: colors.jade50, + darkBlue: colors.blue50, + darkIndigo: colors.indigo50, + darkViolet: colors.violet50, + darkPink: colors.pink50, }, - boxShadow: { - outlineInteractive: `inset 0px 0px 0px 1px ${colors.interactive40}`, - outlineInteractiveBottom: `inset 0px -1px 0px ${colors.interactive40}`, - outlineInteractivePrimaryEnabled: `inset 0px 0px 0px 1px ${colors.interactive40}`, - outlineInteractivePrimaryFocus: `inset 0px 0px 0px 1px ${colors.interactive60}`, - outlineInteractivePrimaryHover: `inset 0px 0px 0px 1px ${colors.interactive60}`, - outlineInteractiveSecondaryEnabled: `inset 0px 0px 0px 1px ${colors.neutral80}`, - outlineInteractiveSecondaryFocus: `inset 0px 0px 0px 1px ${colors.black}`, - outlineInteractiveSecondaryHover: `inset 0px 0px 0px 1px ${colors.black}`, - outlineInteractiveDangerEnabled: `inset 0px 0px 0px 1px ${colors.negative40}`, - outlineInteractiveDangerFocus: `inset 0px 0px 0px 1px ${colors.negative60}`, - outlineInteractiveDangerHover: `inset 0px 0px 0px 1px ${colors.negative60}`, - outlineInteractiveDisabled: `inset 0px 0px 0px 1px ${colors.neutral40_30}`, - outlineDecorative: `inset 0px 0px 0px 1px ${colors.neutral20}`, - outlineDecorativeBottom: `inset 0px -1px 0px ${colors.neutral20}`, - outlineContainer: `inset 0px 0px 0px 1px ${colors.neutral05}`, - outlineInputEnabled: `inset 0px 0px 0px 1px ${colors.neutral40}`, - outlineInputHover: `inset 0px 0px 0px 1px ${colors.neutral60}`, - outlineInputFocus: `inset 0px 0px 0px 2px ${colors.interactive40}`, - outlineInputDisabled: `inset 0px 0px 0px 1px ${colors.neutral40_30}`, - outlineInformative: `inset 0px 0px 0px 1px ${colors.informative30}`, - outlinePositive: `inset 0px 0px 0px 1px ${colors.positive50}`, - outlineWarning: `inset 0px 0px 0px 1px ${colors.warning40}`, - outlineNegative: `inset 0px 0px 0px 1px ${colors.negative30}`, - outlineNegativeStrong: `inset 0px 0px 0px 2px ${colors.negative30}`, + elevations: { elevationSmall: `0px 4px 8px ${colors.black_16}`, elevationMedium: `0px 8px 16px ${colors.black_16}`, elevationLarge: `0px 16px 32px ${colors.black_16}`, diff --git a/packages/bento-design-system/src/vars.css.ts b/packages/bento-design-system/src/vars.css.ts index 602a74b80..8769d9173 100644 --- a/packages/bento-design-system/src/vars.css.ts +++ b/packages/bento-design-system/src/vars.css.ts @@ -2,83 +2,97 @@ import { createGlobalThemeContract } from "@vanilla-extract/css"; export const vars = createGlobalThemeContract( { - fontFamily: { - default: null, - }, - fontWeight: { - body: null, - bodyStrong: null, - display: null, - headline: null, - label: null, - title: null, - }, - fontSize: { - bodySmall: null, - bodyMedium: null, - bodyLarge: null, - displaySmall: null, - displayMedium: null, - displayLarge: null, - headlineSmall: null, - headlineMedium: null, - headlineLarge: null, - labelSmall: null, - labelMedium: null, - labelLarge: null, - titleSmall: null, - titleMedium: null, - titleLarge: null, - }, - lineHeight: { - bodySmall: null, - bodyMedium: null, - bodyLarge: null, - displaySmall: null, - displayMedium: null, - displayLarge: null, - headlineSmall: null, - headlineMedium: null, - headlineLarge: null, - labelSmall: null, - labelMedium: null, - labelLarge: null, - titleSmall: null, - titleMedium: null, - titleLarge: null, - }, - letterSpacing: { - 1: null, - 2: null, - }, - space: { - 0: null, - 4: null, - 8: null, - 12: null, - 16: null, - 24: null, - 32: null, - 40: null, - 80: null, - }, - negativeSpace: { - 0: null, - // NOTE(gabro): ideally we would use "-4" and so on here, but we can't due to - // https://github.com/Swatinem/rollup-plugin-dts/issues/201 - negative4: null, - negative8: null, - negative12: null, - negative16: null, - negative24: null, - negative32: null, - negative40: null, - negative80: null, - }, - radius: { - 4: null, - 8: null, - 16: null, + typography: { + body: { + fontFamily: null, + fontWeight: { regular: null, strong: null }, + sizes: { + small: { + fontSize: null, + lineHeight: null, + }, + medium: { + fontSize: null, + lineHeight: null, + }, + large: { + fontSize: null, + lineHeight: null, + }, + }, + }, + display: { + fontFamily: null, + fontWeight: null, + sizes: { + small: { + fontSize: null, + lineHeight: null, + }, + medium: { + fontSize: null, + lineHeight: null, + }, + large: { + fontSize: null, + lineHeight: null, + }, + }, + }, + headline: { + fontFamily: null, + fontWeight: null, + sizes: { + small: { + fontSize: null, + lineHeight: null, + }, + medium: { + fontSize: null, + lineHeight: null, + }, + large: { + fontSize: null, + lineHeight: null, + }, + }, + }, + label: { + fontFamily: null, + fontWeight: null, + sizes: { + small: { + fontSize: null, + lineHeight: null, + }, + medium: { + fontSize: null, + lineHeight: null, + }, + large: { + fontSize: null, + lineHeight: null, + }, + }, + }, + title: { + fontFamily: null, + fontWeight: null, + sizes: { + small: { + fontSize: null, + lineHeight: null, + }, + medium: { + fontSize: null, + lineHeight: null, + }, + large: { + fontSize: null, + lineHeight: null, + }, + }, + }, }, brandColor: { brandPrimary: null, @@ -200,6 +214,16 @@ export const vars = createGlobalThemeContract( outlineNegative: null, }, dataVisualizationColor: { + pastelGrey: null, + pastelRed: null, + pastelOrange: null, + pastelYellow: null, + pastelGreen: null, + pastelJade: null, + pastelBlue: null, + pastelIndigo: null, + pastelViolet: null, + pastelPink: null, softGrey: null, softRed: null, softOrange: null, @@ -220,32 +244,18 @@ export const vars = createGlobalThemeContract( brightIndigo: null, brightViolet: null, brightPink: null, + darkGrey: null, + darkRed: null, + darkOrange: null, + darkYellow: null, + darkGreen: null, + darkJade: null, + darkBlue: null, + darkIndigo: null, + darkViolet: null, + darkPink: null, }, - boxShadow: { - outlineInteractive: null, - outlineInteractiveBottom: null, - outlineInteractivePrimaryEnabled: null, - outlineInteractivePrimaryFocus: null, - outlineInteractivePrimaryHover: null, - outlineInteractiveSecondaryEnabled: null, - outlineInteractiveSecondaryFocus: null, - outlineInteractiveSecondaryHover: null, - outlineInteractiveDangerEnabled: null, - outlineInteractiveDangerFocus: null, - outlineInteractiveDangerHover: null, - outlineInteractiveDisabled: null, - outlineDecorative: null, - outlineDecorativeBottom: null, - outlineContainer: null, - outlineInputEnabled: null, - outlineInputHover: null, - outlineInputFocus: null, - outlineInputDisabled: null, - outlineInformative: null, - outlinePositive: null, - outlineWarning: null, - outlineNegative: null, - outlineNegativeStrong: null, + elevations: { elevationSmall: null, elevationMedium: null, elevationLarge: null, From 3fe32158ee342edd4eb50189c0dd1d377d9b63f8 Mon Sep 17 00:00:00 2001 From: Vincenzo Guerrisi Date: Fri, 26 Apr 2024 19:46:06 +0200 Subject: [PATCH 2/5] fix website (spacings) --- packages/website/src/components/SpacingScale.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/website/src/components/SpacingScale.tsx b/packages/website/src/components/SpacingScale.tsx index a55215a89..0c4bd80b9 100644 --- a/packages/website/src/components/SpacingScale.tsx +++ b/packages/website/src/components/SpacingScale.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Box, DesignSystemProvider, Inline, Stack, vars } from "../snippets"; +import { Box, DesignSystemProvider, Inline, Stack, responsiveProperties } from "../snippets"; import { defaultMessages } from "@buildo/bento-design-system/lib/defaultMessages/en"; const SpacePoint = ({ space }: { space: string }) => ( @@ -10,10 +10,10 @@ export function SpacingScale() { return ( - {Object.entries(vars.space).map(([name, space]) => ( + {Object.entries(responsiveProperties.gap).map(([name, space]) => ( {name} - + ))} From 3237a6b48d659a93d61fd5424e8453760e56ee7c Mon Sep 17 00:00:00 2001 From: Vincenzo Guerrisi Date: Fri, 26 Apr 2024 19:53:00 +0200 Subject: [PATCH 3/5] fix configurator build --- packages/configuration-builder/src/sprinkles.css.ts | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/configuration-builder/src/sprinkles.css.ts b/packages/configuration-builder/src/sprinkles.css.ts index e994e3b57..8c380c144 100644 --- a/packages/configuration-builder/src/sprinkles.css.ts +++ b/packages/configuration-builder/src/sprinkles.css.ts @@ -2,7 +2,7 @@ import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles"; import { unconditionalProperties, unconditionalPropertiesShorthands, - responsiveProperties as bentoResponsiveProperties, + responsiveProperties, responsivePropertiesConditions, responsivePropertiesDefaultCondition, responsivePropertiesShorthands, @@ -11,7 +11,6 @@ import { statusPropertiesDefaultCondition, } from "@buildo/bento-design-system"; -const spaces = { ...bentoResponsiveProperties.gap, 120: "120px" }; const backgrounds = { ...bentoStatusProperties.background, "linear-gradient-1": "linear-gradient(285deg, #E0D5F5 0%, #EFE9FA 100%)", @@ -19,15 +18,6 @@ const backgrounds = { "linear-gradient-3": "linear-gradient(285deg, #CCE6FB 0%, #E4F2FD 100%)", }; -const responsiveProperties = { - ...bentoResponsiveProperties, - paddingTop: spaces, - paddingBottom: spaces, - paddingLeft: spaces, - paddingRight: spaces, - gap: spaces, -}; - const statusProperties = { ...bentoStatusProperties, background: backgrounds, From 0bc27e7a1774d437349df586375e1e4f307f58a9 Mon Sep 17 00:00:00 2001 From: Vincenzo Guerrisi Date: Fri, 24 May 2024 13:44:42 +0200 Subject: [PATCH 4/5] refactor typography tokens --- .../src/Slider/Slider.css.ts | 2 +- .../src/Typography/Body/Body.css.ts | 66 ++++++- .../src/Typography/Display/Display.css.ts | 23 ++- .../src/Typography/Headline/Headline.css.ts | 23 ++- .../src/Typography/Label/Label.css.ts | 8 +- .../src/Typography/Title/Title.css.ts | 18 +- .../bento-design-system/src/util/atoms.ts | 77 ++------ .../src/util/bentoTokens.ts | 28 +-- .../src/util/defaultTokens.ts | 123 ++++++++----- packages/bento-design-system/src/vars.css.ts | 168 ++++++++---------- 10 files changed, 299 insertions(+), 237 deletions(-) diff --git a/packages/bento-design-system/src/Slider/Slider.css.ts b/packages/bento-design-system/src/Slider/Slider.css.ts index 94b0bd8ef..cf93e8d3e 100644 --- a/packages/bento-design-system/src/Slider/Slider.css.ts +++ b/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.typography.body.sizes.medium.lineHeight} + 8)`, + paddingBottom: `calc(${vars.lineHeight.bodyMedium} + 8)`, }); export const trackContainer = bentoSprinkles({ diff --git a/packages/bento-design-system/src/Typography/Body/Body.css.ts b/packages/bento-design-system/src/Typography/Body/Body.css.ts index b73824ed2..f88b69734 100644 --- a/packages/bento-design-system/src/Typography/Body/Body.css.ts +++ b/packages/bento-design-system/src/Typography/Body/Body.css.ts @@ -6,13 +6,25 @@ export const bodyRecipe = strictRecipe({ base: bentoSprinkles({ fontFamily: "body" }), variants: { size: { - small: bentoSprinkles({ fontSize: "bodySmall", lineHeight: "bodySmall" }), - 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" }), + }, + ], }); diff --git a/packages/bento-design-system/src/Typography/Display/Display.css.ts b/packages/bento-design-system/src/Typography/Display/Display.css.ts index 1e48e3beb..ca5fc0585 100644 --- a/packages/bento-design-system/src/Typography/Display/Display.css.ts +++ b/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: "display", 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" }), diff --git a/packages/bento-design-system/src/Typography/Headline/Headline.css.ts b/packages/bento-design-system/src/Typography/Headline/Headline.css.ts index d3dc44350..23ce944fe 100644 --- a/packages/bento-design-system/src/Typography/Headline/Headline.css.ts +++ b/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: "headline", 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" }), diff --git a/packages/bento-design-system/src/Typography/Label/Label.css.ts b/packages/bento-design-system/src/Typography/Label/Label.css.ts index 11391acc8..e9c86dc02 100644 --- a/packages/bento-design-system/src/Typography/Label/Label.css.ts +++ b/packages/bento-design-system/src/Typography/Label/Label.css.ts @@ -3,20 +3,26 @@ import { bentoSprinkles } from "../../internal/sprinkles.css"; import { ellipsis } from "../typography.css"; export const labelRecipe = strictRecipe({ - base: bentoSprinkles({ fontFamily: "label", fontWeight: "label" }), + base: bentoSprinkles({ fontFamily: "label" }), variants: { size: { small: bentoSprinkles({ fontSize: "labelSmall", lineHeight: "labelSmall", + fontWeight: "labelSmall", + letterSpacing: "labelSmall", }), medium: bentoSprinkles({ fontSize: "labelMedium", lineHeight: "labelMedium", + fontWeight: "labelMedium", + letterSpacing: "labelMedium", }), large: bentoSprinkles({ fontSize: "labelLarge", lineHeight: "labelLarge", + fontWeight: "labelLarge", + letterSpacing: "labelLarge", }), }, color: { diff --git a/packages/bento-design-system/src/Typography/Title/Title.css.ts b/packages/bento-design-system/src/Typography/Title/Title.css.ts index 26540ab44..815b769fd 100644 --- a/packages/bento-design-system/src/Typography/Title/Title.css.ts +++ b/packages/bento-design-system/src/Typography/Title/Title.css.ts @@ -3,15 +3,27 @@ import { bentoSprinkles } from "../../internal/sprinkles.css"; import { ellipsis } from "../typography.css"; export const titleRecipe = strictRecipe({ - base: bentoSprinkles({ fontFamily: "title", fontWeight: "title" }), + base: bentoSprinkles({ fontFamily: "title" }), variants: { size: { small: bentoSprinkles({ fontSize: "titleSmall", lineHeight: "titleSmall", + fontWeight: "titleSmall", + letterSpacing: "titleSmall", + }), + medium: bentoSprinkles({ + fontSize: "titleMedium", + lineHeight: "titleMedium", + fontWeight: "titleMedium", + letterSpacing: "titleMedium", + }), + large: bentoSprinkles({ + fontSize: "titleLarge", + lineHeight: "titleLarge", + fontWeight: "titleLarge", + letterSpacing: "titleLarge", }), - medium: bentoSprinkles({ fontSize: "titleMedium", lineHeight: "titleMedium" }), - large: bentoSprinkles({ fontSize: "titleLarge", lineHeight: "titleLarge" }), }, color: { default: bentoSprinkles({ color: "textPrimary" }), diff --git a/packages/bento-design-system/src/util/atoms.ts b/packages/bento-design-system/src/util/atoms.ts index 364a254ab..7353fc7e8 100644 --- a/packages/bento-design-system/src/util/atoms.ts +++ b/packages/bento-design-system/src/util/atoms.ts @@ -14,20 +14,15 @@ const spacing = { 120: 120, 160: 160, } as const; - -const negativeSpacing = { - negative0: 0, - negative4: 4, - negative8: 8, - negative12: 12, - negative16: 16, - negative24: 24, - negative32: 32, - negative40: 40, - negative80: 80, - negative120: 120, - negative160: 160, -} as const; +const negativeSpacing: Record<`negative${keyof typeof spacing}`, number> = Object.entries( + spacing +).reduce( + (acc, [key, value]) => ({ + ...acc, + [`negative${key}`]: value, + }), + {} as Record<`negative${keyof typeof spacing}`, number> +); const radius = { ...spacing, @@ -61,55 +56,11 @@ export const unconditionalProperties = { borderBottomLeftRadius: radius, borderBottomRightRadius: radius, textTransform: ["none", "uppercase", "lowercase", "capitalize"], - fontFamily: { - body: vars.typography.body.fontFamily, - display: vars.typography.display.fontFamily, - headline: vars.typography.headline.fontFamily, - label: vars.typography.label.fontFamily, - title: vars.typography.title.fontFamily, - }, - fontWeight: { - body: vars.typography.body.fontWeight.regular, - bodyStrong: vars.typography.body.fontWeight.strong, - display: vars.typography.display.fontWeight, - headline: vars.typography.headline.fontWeight, - label: vars.typography.label.fontWeight, - title: vars.typography.title.fontWeight, - }, - fontSize: { - bodySmall: vars.typography.body.sizes.small.fontSize, - bodyMedium: vars.typography.body.sizes.medium.fontSize, - bodyLarge: vars.typography.body.sizes.large.fontSize, - displaySmall: vars.typography.display.sizes.small.fontSize, - displayMedium: vars.typography.display.sizes.medium.fontSize, - displayLarge: vars.typography.display.sizes.large.fontSize, - headlineSmall: vars.typography.headline.sizes.small.fontSize, - headlineMedium: vars.typography.headline.sizes.medium.fontSize, - headlineLarge: vars.typography.headline.sizes.large.fontSize, - labelSmall: vars.typography.label.sizes.small.fontSize, - labelMedium: vars.typography.label.sizes.medium.fontSize, - labelLarge: vars.typography.label.sizes.large.fontSize, - titleSmall: vars.typography.title.sizes.small.fontSize, - titleMedium: vars.typography.title.sizes.medium.fontSize, - titleLarge: vars.typography.title.sizes.large.fontSize, - }, - lineHeight: { - bodySmall: vars.typography.body.sizes.small.lineHeight, - bodyMedium: vars.typography.body.sizes.medium.lineHeight, - bodyLarge: vars.typography.body.sizes.large.lineHeight, - displaySmall: vars.typography.display.sizes.small.lineHeight, - displayMedium: vars.typography.display.sizes.medium.lineHeight, - displayLarge: vars.typography.display.sizes.large.lineHeight, - headlineSmall: vars.typography.headline.sizes.small.lineHeight, - headlineMedium: vars.typography.headline.sizes.medium.lineHeight, - headlineLarge: vars.typography.headline.sizes.large.lineHeight, - labelSmall: vars.typography.label.sizes.small.lineHeight, - labelMedium: vars.typography.label.sizes.medium.lineHeight, - labelLarge: vars.typography.label.sizes.large.lineHeight, - titleSmall: vars.typography.title.sizes.small.lineHeight, - titleMedium: vars.typography.title.sizes.medium.lineHeight, - titleLarge: vars.typography.title.sizes.large.lineHeight, - }, + fontFamily: vars.fontFamily, + fontWeight: vars.fontWeight, + fontSize: vars.fontSize, + lineHeight: vars.lineHeight, + letterSpacing: vars.letterSpacing, height: { ...spacing, full: "100%", diff --git a/packages/bento-design-system/src/util/bentoTokens.ts b/packages/bento-design-system/src/util/bentoTokens.ts index a31b9bc99..19096cb9d 100644 --- a/packages/bento-design-system/src/util/bentoTokens.ts +++ b/packages/bento-design-system/src/util/bentoTokens.ts @@ -1,5 +1,8 @@ import { TypographySize } from "../Typography/TypographyProps"; +type TypographyFamily = "display" | "headline" | "title" | "body" | "label"; +type TypographyComponent = `${TypographyFamily}${Capitalize}`; + export type DataVisualizationPalette = "pastel" | "soft" | "bright" | "dark"; export type DataVisualizationColor = | "Grey" @@ -13,26 +16,13 @@ export type DataVisualizationColor = | "Violet" | "Pink"; -type TypographyTokens = { - fontFamily: string; - fontWeight: HasBold extends true ? { regular: string; strong: string } : string; - sizes: Record< - TypographySize, - { - fontSize: string; - lineHeight: string; - } - >; -}; - export type BentoTokens = { - typography: { - body: TypographyTokens; - display: TypographyTokens; - headline: TypographyTokens; - label: TypographyTokens; - title: TypographyTokens; - }; + fontFamily: Record; + fontWeight: Record & + Record<`bodyStrong${Capitalize}`, string>; + fontSize: Record; + lineHeight: Record; + letterSpacing: Record; brandColor: { brandPrimary: string; brandSecondary: string; diff --git a/packages/bento-design-system/src/util/defaultTokens.ts b/packages/bento-design-system/src/util/defaultTokens.ts index e11a36073..fbcf9a0e8 100644 --- a/packages/bento-design-system/src/util/defaultTokens.ts +++ b/packages/bento-design-system/src/util/defaultTokens.ts @@ -86,52 +86,83 @@ const displayFontFamily = "Lexend, Arial, sans-serif"; const groteskFontFamily = "Lexend, Arial, sans-serif"; export const defaultTokens: BentoTokens = { - typography: { - body: { - fontFamily: groteskFontFamily, - fontWeight: { regular: "400", strong: "600" }, - sizes: { - small: { fontSize: pixelToRem(12), lineHeight: pixelToRem(18) }, - medium: { fontSize: pixelToRem(14), lineHeight: pixelToRem(20) }, - large: { fontSize: pixelToRem(16), lineHeight: pixelToRem(24) }, - }, - }, - headline: { - fontFamily: displayFontFamily, - fontWeight: "600", - sizes: { - small: { fontSize: pixelToRem(32), lineHeight: pixelToRem(36) }, - medium: { fontSize: pixelToRem(36), lineHeight: pixelToRem(40) }, - large: { fontSize: pixelToRem(40), lineHeight: pixelToRem(44) }, - }, - }, - display: { - fontFamily: displayFontFamily, - fontWeight: "600", - sizes: { - small: { fontSize: pixelToRem(44), lineHeight: pixelToRem(50) }, - medium: { fontSize: pixelToRem(52), lineHeight: pixelToRem(58) }, - large: { fontSize: pixelToRem(64), lineHeight: pixelToRem(72) }, - }, - }, - label: { - fontFamily: groteskFontFamily, - fontWeight: "500", - sizes: { - small: { fontSize: pixelToRem(12), lineHeight: pixelToRem(18) }, - medium: { fontSize: pixelToRem(14), lineHeight: pixelToRem(20) }, - large: { fontSize: pixelToRem(16), lineHeight: pixelToRem(24) }, - }, - }, - title: { - fontFamily: displayFontFamily, - fontWeight: "600", - sizes: { - small: { fontSize: pixelToRem(14), lineHeight: pixelToRem(16) }, - medium: { fontSize: pixelToRem(16), lineHeight: pixelToRem(18) }, - large: { fontSize: pixelToRem(22), lineHeight: pixelToRem(24) }, - }, - }, + fontFamily: { + display: displayFontFamily, + headline: displayFontFamily, + title: displayFontFamily, + body: groteskFontFamily, + label: groteskFontFamily, + }, + fontWeight: { + displaySmall: "600", + displayMedium: "600", + displayLarge: "600", + headlineSmall: "600", + headlineMedium: "600", + headlineLarge: "600", + titleSmall: "600", + titleMedium: "600", + titleLarge: "600", + bodySmall: "400", + bodyMedium: "400", + bodyLarge: "400", + bodyStrongSmall: "600", + bodyStrongMedium: "600", + bodyStrongLarge: "600", + labelSmall: "500", + labelMedium: "500", + labelLarge: "500", + }, + fontSize: { + displaySmall: pixelToRem(44), + displayMedium: pixelToRem(52), + displayLarge: pixelToRem(64), + headlineSmall: pixelToRem(32), + headlineMedium: pixelToRem(36), + headlineLarge: pixelToRem(40), + titleSmall: pixelToRem(14), + titleMedium: pixelToRem(16), + titleLarge: pixelToRem(22), + bodySmall: pixelToRem(12), + bodyMedium: pixelToRem(14), + bodyLarge: pixelToRem(16), + labelSmall: pixelToRem(12), + labelMedium: pixelToRem(14), + labelLarge: pixelToRem(16), + }, + lineHeight: { + displaySmall: pixelToRem(50), + displayMedium: pixelToRem(58), + displayLarge: pixelToRem(72), + headlineSmall: pixelToRem(36), + headlineMedium: pixelToRem(40), + headlineLarge: pixelToRem(44), + titleSmall: pixelToRem(16), + titleMedium: pixelToRem(18), + titleLarge: pixelToRem(24), + bodySmall: pixelToRem(18), + bodyMedium: pixelToRem(20), + bodyLarge: pixelToRem(24), + labelSmall: pixelToRem(18), + labelMedium: pixelToRem(20), + labelLarge: pixelToRem(24), + }, + letterSpacing: { + displaySmall: "0", + displayMedium: "0", + displayLarge: "0", + headlineSmall: "0", + headlineMedium: "0", + headlineLarge: "0", + titleSmall: "0", + titleMedium: "0", + titleLarge: "0", + bodySmall: "0", + bodyMedium: "0", + bodyLarge: "0", + labelSmall: "0", + labelMedium: "0", + labelLarge: "0", }, brandColor: { brandPrimary: colors.bentoViolet40, diff --git a/packages/bento-design-system/src/vars.css.ts b/packages/bento-design-system/src/vars.css.ts index 8769d9173..81393b553 100644 --- a/packages/bento-design-system/src/vars.css.ts +++ b/packages/bento-design-system/src/vars.css.ts @@ -2,97 +2,83 @@ import { createGlobalThemeContract } from "@vanilla-extract/css"; export const vars = createGlobalThemeContract( { - typography: { - body: { - fontFamily: null, - fontWeight: { regular: null, strong: null }, - sizes: { - small: { - fontSize: null, - lineHeight: null, - }, - medium: { - fontSize: null, - lineHeight: null, - }, - large: { - fontSize: null, - lineHeight: null, - }, - }, - }, - display: { - fontFamily: null, - fontWeight: null, - sizes: { - small: { - fontSize: null, - lineHeight: null, - }, - medium: { - fontSize: null, - lineHeight: null, - }, - large: { - fontSize: null, - lineHeight: null, - }, - }, - }, - headline: { - fontFamily: null, - fontWeight: null, - sizes: { - small: { - fontSize: null, - lineHeight: null, - }, - medium: { - fontSize: null, - lineHeight: null, - }, - large: { - fontSize: null, - lineHeight: null, - }, - }, - }, - label: { - fontFamily: null, - fontWeight: null, - sizes: { - small: { - fontSize: null, - lineHeight: null, - }, - medium: { - fontSize: null, - lineHeight: null, - }, - large: { - fontSize: null, - lineHeight: null, - }, - }, - }, - title: { - fontFamily: null, - fontWeight: null, - sizes: { - small: { - fontSize: null, - lineHeight: null, - }, - medium: { - fontSize: null, - lineHeight: null, - }, - large: { - fontSize: null, - lineHeight: null, - }, - }, - }, + fontFamily: { + display: null, + headline: null, + title: null, + body: null, + label: null, + }, + fontWeight: { + displaySmall: null, + displayMedium: null, + displayLarge: null, + headlineSmall: null, + headlineMedium: null, + headlineLarge: null, + titleSmall: null, + titleMedium: null, + titleLarge: null, + bodySmall: null, + bodyMedium: null, + bodyLarge: null, + bodyStrongSmall: null, + bodyStrongMedium: null, + bodyStrongLarge: null, + labelSmall: null, + labelMedium: null, + labelLarge: null, + }, + fontSize: { + displaySmall: null, + displayMedium: null, + displayLarge: null, + headlineSmall: null, + headlineMedium: null, + headlineLarge: null, + titleSmall: null, + titleMedium: null, + titleLarge: null, + bodySmall: null, + bodyMedium: null, + bodyLarge: null, + labelSmall: null, + labelMedium: null, + labelLarge: null, + }, + lineHeight: { + displaySmall: null, + displayMedium: null, + displayLarge: null, + headlineSmall: null, + headlineMedium: null, + headlineLarge: null, + titleSmall: null, + titleMedium: null, + titleLarge: null, + bodySmall: null, + bodyMedium: null, + bodyLarge: null, + labelSmall: null, + labelMedium: null, + labelLarge: null, + }, + letterSpacing: { + displaySmall: null, + displayMedium: null, + displayLarge: null, + headlineSmall: null, + headlineMedium: null, + headlineLarge: null, + titleSmall: null, + titleMedium: null, + titleLarge: null, + bodySmall: null, + bodyMedium: null, + bodyLarge: null, + labelSmall: null, + labelMedium: null, + labelLarge: null, }, brandColor: { brandPrimary: null, From 43b3ffa759f82516be4b221c6a24e4b62904bf4d Mon Sep 17 00:00:00 2001 From: Vincenzo Guerrisi Date: Fri, 24 May 2024 14:32:21 +0200 Subject: [PATCH 5/5] fix default fontFamily --- .../bento-design-system/src/util/defaultTokens.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/bento-design-system/src/util/defaultTokens.ts b/packages/bento-design-system/src/util/defaultTokens.ts index fbcf9a0e8..6ba6014bc 100644 --- a/packages/bento-design-system/src/util/defaultTokens.ts +++ b/packages/bento-design-system/src/util/defaultTokens.ts @@ -82,16 +82,15 @@ const colors = { pink50: "#C20B76", }; -const displayFontFamily = "Lexend, Arial, sans-serif"; -const groteskFontFamily = "Lexend, Arial, sans-serif"; +const fontFamily = "Lexend, Arial, sans-serif"; export const defaultTokens: BentoTokens = { fontFamily: { - display: displayFontFamily, - headline: displayFontFamily, - title: displayFontFamily, - body: groteskFontFamily, - label: groteskFontFamily, + display: fontFamily, + headline: fontFamily, + title: fontFamily, + body: fontFamily, + label: fontFamily, }, fontWeight: { displaySmall: "600",