@biom3/react - npm Package Compare versions

Comparing version 0.0.3-alpha to 0.0.4-alpha

babel.config.js

@@ -11,5 +11,8 @@ // @NOTE: this config is ONLY used for test builds.
   return {
-    presets: ["next/babel", "@emotion/babel-preset-css-prop"],
+    presets: [
+      ["next/babel", { runtime: "automatic" }],
+      "@emotion/babel-preset-css-prop",
+    ],
     plugins,
   };
 };

nyc.config.js

 // @TODO: once we have components tested, we need to bump this to 90-95
-const COVERAGE_THRESHOLD = 40;
+const COVERAGE_THRESHOLD = 80;
 
@@ -8,3 +8,3 @@ module.exports = {
   statements: COVERAGE_THRESHOLD,
-  branch: COVERAGE_THRESHOLD,
+  branch: COVERAGE_THRESHOLD - 10,
   extends: "@istanbuljs/nyc-config-typescript",
@@ -11,0 +11,0 @@ include: ["src/**/*.ts", "src/**/*.tsx"],

package.json

 {
   "name": "@biom3/react",
-  "version": "0.0.3-alpha",
+  "version": "0.0.4-alpha",
   "main": "./dist/index.js",
@@ -34,3 +34,3 @@ "types": "./dist/index.d.ts",
     "csstype": "^3.1.1",
-    "cypress": "^12.0.2",
+    "cypress": "^12.1.0",
     "eslint": "^7.32.0",
@@ -37,0 +37,0 @@ "eslint-config-custom": "*",

readme.md

@@ -25,4 +25,75 @@ ![logohd](https://user-images.githubusercontent.com/1452237/205757058-6f0b6602-af1a-4ef9-a7d0-51c5feba1b80.png)
 
-## Component based maturity status
+## Using `sx` to style BIOME react components
 
+All BIOME react components provide the same API which can be used for making various style changes to a component and it's children. `sx` supports any style that you can render using [@emotion/react](https://www.npmjs.com/package/@emotion/react).
+
+As well as this, `sx` also supports various shorthand properties. A full listing of all supported shorthand properties (and their longhand equivalents) can be found [here](https://github.com/immutable/biom3/blob/main/packages/react/src/types/sxProps.ts#L75). It's completely up to the consumer as to whether they use standard longhand css properties (which might be more friendly to a junior engineer's eyes), or the time-saving shorthand properties.
+
+Furthermore, any `sx` style property, can be submitted as either a string, a function which returns a string, an array, or an object.
+
+### Responsive `sx` props
+
+Using array and object syntax will grant you easy access to responsive styles, according to your theme's base.breakpoint tokens. For exmaple:
+
+```tsx
+// Both of these snippets of code will render a div that has:
+// 1. default blue background-color
+// 2. red background-color at the "small" breakpoint and above
+// 3. green background-color at the "medium" breakpoint and above
+// 4. yellow background-color at the "large" breakpoint and above
+// 5. gold background-color at the "xLarge" breakpoint and above
+// 6. rebeccapurple background-color at the "xxLarge" breakpoint and above
+<Box
+  sx={{ bgc: ["blue", "red", "green", "yellow", "gold", "rebeccapurple"] }}
+/>
+// or
+<Box
+  sx={{
+    bgc: {
+      default: "blue", small: "red", medium: "green", large: "yellow", xLarge: "gold", xxLarge: "rebeccapurple"
+    }
+  }}
+/>
+```
+
+**\*NOTE:**
+You can skip breakpoints by using null, or simply by leaving them out. For example:
+
+```tsx
+// Both of these snippets of code will render a div that has:
+// 1. default blue background-color
+// 2. red background-color at the "small" breakpoint and above
+// 3. rebeccapurple background-color at the "xxLarge" breakpoint and above
+<Box
+  sx={{ bgc: ["blue", "red", null, null, null, "rebeccapurple"] }}
+/>
+// or
+<Box
+  sx={{
+    bgc: { default: "blue", small: "red", xxLarge: "rebeccapurple" }
+  }}
+/>
+// or
+<Box
+  sx={{
+    bgc: { default: "blue", small: "red", medium: null, xxLarge: "rebeccapurple" }
+  }}
+/>
+```
+
+### Building compound `sx` rules
+
+When passing a function, that function will always be called by passing in BIOME's theme, as the first arguement. For example:
+
+```tsx
+import { Theme } from "@emotion/react";
+<Box
+  sx={{
+    padding: (theme: Theme) => `${theme.ui.spacing.x2} ${theme.ui.spacing.x5}`,
+  }}
+/>;
+```
+
+## Component maturity status
+
 We have designed and implemented a grqanular status system where each BIOME design system component has it's own maturity status. Information on these component statuses can be found [in confluence](https://immutable.atlassian.net/wiki/spaces/DS/pages/2034439335/Proposal+Documentation#Component-status).
@@ -32,16 +103,36 @@
 
-### Status descriptions
+### Component statuses
 
-#### Alpha
+<!-- ```diff
++ Green
+- Red
+! Orange
+@@ Pink @@
+# Gray
+``` -->
 
-Early on in a component’s life, it’s status should be set to alpha - which gives developers using it, an indication of the component's maturity. alpha components are likely to see API changes (breaking changes will of-course be avoided - but may sometimes be necessary).
+```diff
+! alpha !
+```
 
-#### Beta
+Early on in a component’s life, it’s status should be set to **alpha** - which gives developers using it, an indication of the component's maturity. alpha components are likely to see API changes (breaking changes will of-course be avoided - but may sometimes be necessary).
 
-Components become beta when they have been used in production at least once.
+---
 
-#### Stable
+```diff
+@@ beta @@
+```
 
-Components will become stable when they have been beta for 2 months with no API changes. Stable components are fully mature, and will not have their API’s change in a breaking way (unless a new major version is released).
+Components become **beta** when they have been used in production at least once.
 
+---
+
+```diff
++ stable +
+```
+
+Components will become **stable** when they have been beta for 2 months with no API changes. Stable components are fully mature, and will not have their API’s change in a breaking way (unless a new major version is released).
+
+---
+
 ## How to provide design-tokens to all BIOME components
@@ -48,0 +139,0 @@

src/components/Body/index.ts

@@ -1,1 +0,2 @@
-export * from "./Body";
+export { Body } from "./Body";
+export type { BodyProps } from "./Body";

src/components/Body/readme.md

 # Body
 
-## Status
+```diff
+# Component status
+! alpha - 14th Dec 2022 !
+```
 
-### Alpha - 2nd Dec 2022
+## Description
+
+`<Body />` is a helper component, which renders all flavours of "body" text, according to the design-tokens mapped out for Body text inside of FIGMA.
+
+## Variant props
+
+`Body` uses `medium` as the default variant, though you can choose to use other variants. For example:
+
+```tsx
+<Body variant="small">some text</Body>
+```
+
+`Body` uses `regular` as the default weight, though you can choose to use other variants. For example:
+
+```tsx
+<Body weight="bold">some text</Body>
+```
+
+## Responsive variant props
+
+You can make either variant or weight props responsive, if you choose. For example:
+
+```tsx
+<Body
+  variant={["2xSmall", "xSmall", "small", "medium"]} // default: "2xSmall", small breakpoint and up: "xSmall", medium breakpoint and up: "small" and large breakpoint and up: "medium"
+  weight={["regular", null, null, null, null, "bold"]} // default: "regular", xxLarge breakpoint and up: "bold"
+>
+  some text
+</Body>
+```
+
+## `sx` prop
+
+### Coloring
+
+For now, coloring, as well as any other style changes, can be applied using the `sx` prop. In time, we may extend this `<Body />`'s top level props API to support coloring.
+
+### Theme aware
+
+Body's `sx` props are theme-aware. You are free to use design-tokens inside all `sx` prop fields. For exmaple, you can set the color of `Body` like so:
+
+```tsx
+<Body sx={{ c: "ui.text.body.color.secondary" }} />
+```
+
+### Default `sx` props
+
+`Body` has default `sx` style props. By default, any `<Body />` component will render with the default coloring:
+
+```tsx
+sx={{ color: "ui.text.body.color.primary" }}
+```
+
+For example:
+
+```tsx
+<Body>some body text</Body> // will render text with the coloring: "ui.text.body.color.primary"
+```
+
+Whilst use of the design-tokens is strongly encouraged, you are also able to utilise non-tokenised values instead. For example:
+
+```tsx
+<Body sx={{ c: "dodgerblue" }} />
+```
+
+**\*NOTE:** We ask that engineers try their best to avoid this however, in the interest of minimising technical debt. More information [here](https://immutable.atlassian.net/wiki/spaces/DS/pages/2034341776/Proposal+BIOME+Philosophy#Antipatterns).
+
+### Rendering `italic` text
+
+`Body` can render text in italic, when stipulated. For example:
+
+```tsx
+<Body sx={{ fontStyle: "italic" }}>some body text</Body>
+```
+
+## `as` prop
+
+`Body` can render itself as a `<span>` (default), `section`, `article`, `main`, `div` and many more. For example:
+
+```tsx
+<Body as="em">some body text</Body>
+```
+
+Will render: `<em>some body text</em>`

src/components/Box/index.ts

@@ -1,1 +0,2 @@
-export * from "./Box";
+export { Box } from "./Box";
+export type { BoxProps } from "./Box";

src/components/Box/readme.md

 # Box
 
-## Status: Alpha - 13th Dec 2022
+```diff
+# Component status
+! alpha - 13th Dec 2022 !
+```
 
@@ -23,3 +26,3 @@ ## Description
 
-## Sx prop
+## `sx` prop
 
@@ -34,3 +37,3 @@ ### Theme aware
 
-Whilst use of the tokens is strongly encouraged, you are also able to utilise non-tokenised values instead. For example:
+Whilst use of the design-tokens is strongly encouraged, you are also able to utilise non-tokenised values instead. For example:
 
@@ -55,3 +58,3 @@ ```tsx
 
-## as prop
+## `as` prop
 
@@ -63,1 +66,3 @@ Box can be made to render itself as a `<div>` (default), `section`, `article`, `main`, `span` and many more. For example:
 ```
+
+Will render: `<section></section>`

src/components/Heading/index.ts

@@ -1,1 +0,2 @@
-export * from "./Heading";
+export { Heading } from "./Heading";
+export type { HeadingProps } from "./Heading";

src/components/Heading/readme.md

 # Heading
 
-## Status
+```diff
+# Component status
+! alpha - 15th Dec 2022 !
+```
 
-### Alpha - 2nd Dec 2022
+## Description
+
+`<Heading />` is a helper component, which renders all flavours of "heading" text, according to the design-tokens mapped out for Heading text inside of FIGMA.
+
+## Variant props
+
+`Heading` uses `medium` as the default variant, though you can choose to use other variants. For example:
+
+```tsx
+<Heading variant="small">some text</Heading>
+```
+
+`Heading` uses `regular` as the default weight, though you can choose to use other variants. For example:
+
+```tsx
+<Heading weight="light">some text</Heading>
+// or
+<Heading weight="bold">some text</Heading>
+```
+
+## Responsive variant props
+
+You can make either variant or weight props responsive, if you choose. For example:
+
+```tsx
+<Heading
+  variant={["2xSmall", "xSmall", "small", null, "medium"]} // default: "2xSmall", small breakpoint and up: "xSmall", medium breakpoint and up: "small", xLarge breakpoint and up: "medium"
+  weight={["light", "regular", "bold"]} // default: "light", small breakpoint and up: "regular", medium breakpoint and up: "bold"
+>
+  some text
+</Heading>
+```
+
+## `sx` prop
+
+### Coloring
+
+For now, coloring, as well as any other style changes, can be applied using the `sx` prop. In time, we may extend this `<Heading />`'s top level props API to support coloring.
+
+### Theme aware
+
+Heading's `sx` props are theme-aware. You are free to use design-tokens inside all `sx` prop fields. For exmaple, you can set the color of `Heading` like so:
+
+```tsx
+<Heading sx={{ c: "ui.text.heading.color.secondary" }} />
+// or
+<Heading sx={{ c: "ui.text.heading.color.atmosphere" }} />
+```
+
+### Default `sx` props
+
+`Heading` has default `sx` style props. By default, any `<Heading />` component will render with the default coloring:
+
+```tsx
+sx={{ color: "ui.text.heading.color.primary" }}
+```
+
+For example:
+
+```tsx
+<Heading>some heading text</Heading> // will render text with the coloring: "ui.text.heading.color.primary"
+```
+
+Whilst use of the design-tokens is strongly encouraged, you are also able to utilise non-tokenised values instead. For example:
+
+```tsx
+<Heading sx={{ c: "dodgerblue" }} />
+```
+
+**\*NOTE:** We ask that engineers try their best to avoid this however, in the interest of minimising technical debt. More information [here](https://immutable.atlassian.net/wiki/spaces/DS/pages/2034341776/Proposal+BIOME+Philosophy#Antipatterns).
+
+### Rendering `italic` text
+
+`Heading` can render text in italic, when stipulated. For example:
+
+```tsx
+<Heading sx={{ fontStyle: "italic" }}>some heading text</Heading>
+```
+
+## `as` prop
+
+`Heading` can render itself as a `<span>` (default), `section`, `article`, `main`, `div` and many more. For example:
+
+```tsx
+<Heading as="em">some heading text</Heading>
+```
+
+Will render: `<em>some heading text</em>`

src/components/Icons/index.ts

@@ -1,67 +0,67 @@
-export * from "./SvgIcon";
-export * from "./IconAuthenticated";
-export * from "./IconTick";
-export * from "./IconSearch";
-export * from "./IconMinus";
-export * from "./IconExclaimation";
-export * from "./IconInformation";
-export * from "./IconCloseWithCircle";
-export * from "./IconReturnKeyboard";
-export * from "./IconCountdown";
-export * from "./IconAdd";
-export * from "./IconArrowForward";
-export * from "./IconArrowBackward";
-export * from "./IconThemeDark";
-export * from "./IconThemeLight";
-export * from "./IconPeople";
-export * from "./IconEmail";
-export * from "./IconPercentage";
-export * from "./IconLoader";
-export * from "./IconSwap";
-export * from "./IconMenu";
-export * from "./IconReturnKeyboard";
-export * from "./IconClose";
-export * from "./IconChevronForward";
-export * from "./IconChevronBackward";
-export * from "./IconChevronExpand";
-export * from "./IconChevronCollapse";
-export * from "./IconViewGrid";
-export * from "./IconDocuments";
-export * from "./IconDocument";
-export * from "./IconCircleArrow";
-export * from "./IconCopyText";
-export * from "./IconImxRewards";
-export * from "./IconTags";
-export * from "./IconWalletConnect";
-export * from "./IconSparkle";
-export * from "./IconDevSdk";
-export * from "./IconDevContracts";
-export * from "./IconDevExplorer";
-export * from "./IconGraphPerformance";
-export * from "./IconTokens";
-export * from "./IconImxTokenDex";
-export * from "./IconMore";
-export * from "./IconCalendar";
-export * from "./IconWallet";
-export * from "./IconMinting";
-export * from "./IconCart";
-export * from "./IconSettingsCog";
-export * from "./IconPreferences";
-export * from "./IconDiscord";
-export * from "./IconTwitter";
-export * from "./IconTelegram";
-export * from "./IconReddit";
-export * from "./IconSushiSwap";
-export * from "./IconPancakeSwap";
-export * from "./IconUniSwap";
-export * from "./IconImmtuableX";
-export * from "./IconImmtuable";
-export * from "./IconImmtuableStudio";
-export * from "./IconNotification";
-export * from "./IconHidePassword";
-export * from "./IconShowPassword";
-export * from "./IconImxToken";
-export * from "./IconEthToken";
-export * from "./IconViewList";
-export * from "./IconEducation";
-export * from "./IconDashboard";
+export { SvgIcon } from "./SvgIcon";
+export type { SvgIconProps } from "./SvgIcon";
+export { IconAuthenticated } from "./IconAuthenticated";
+export { IconTick } from "./IconTick";
+export { IconSearch } from "./IconSearch";
+export { IconMinus } from "./IconMinus";
+export { IconExclaimation } from "./IconExclaimation";
+export { IconInformation } from "./IconInformation";
+export { IconCloseWithCircle } from "./IconCloseWithCircle";
+export { IconReturnKeyboard } from "./IconReturnKeyboard";
+export { IconCountdown } from "./IconCountdown";
+export { IconAdd } from "./IconAdd";
+export { IconArrowForward } from "./IconArrowForward";
+export { IconArrowBackward } from "./IconArrowBackward";
+export { IconThemeDark } from "./IconThemeDark";
+export { IconThemeLight } from "./IconThemeLight";
+export { IconPeople } from "./IconPeople";
+export { IconEmail } from "./IconEmail";
+export { IconPercentage } from "./IconPercentage";
+export { IconLoader } from "./IconLoader";
+export { IconSwap } from "./IconSwap";
+export { IconMenu } from "./IconMenu";
+export { IconClose } from "./IconClose";
+export { IconChevronForward } from "./IconChevronForward";
+export { IconChevronBackward } from "./IconChevronBackward";
+export { IconChevronExpand } from "./IconChevronExpand";
+export { IconChevronCollapse } from "./IconChevronCollapse";
+export { IconViewGrid } from "./IconViewGrid";
+export { IconDocuments } from "./IconDocuments";
+export { IconDocument } from "./IconDocument";
+export { IconCircleArrow } from "./IconCircleArrow";
+export { IconCopyText } from "./IconCopyText";
+export { IconImxRewards } from "./IconImxRewards";
+export { IconTags } from "./IconTags";
+export { IconWalletConnect } from "./IconWalletConnect";
+export { IconSparkle } from "./IconSparkle";
+export { IconDevSdk } from "./IconDevSdk";
+export { IconDevContracts } from "./IconDevContracts";
+export { IconDevExplorer } from "./IconDevExplorer";
+export { IconGraphPerformance } from "./IconGraphPerformance";
+export { IconTokens } from "./IconTokens";
+export { IconImxTokenDex } from "./IconImxTokenDex";
+export { IconMore } from "./IconMore";
+export { IconCalendar } from "./IconCalendar";
+export { IconWallet } from "./IconWallet";
+export { IconMinting } from "./IconMinting";
+export { IconCart } from "./IconCart";
+export { IconSettingsCog } from "./IconSettingsCog";
+export { IconPreferences } from "./IconPreferences";
+export { IconDiscord } from "./IconDiscord";
+export { IconTwitter } from "./IconTwitter";
+export { IconTelegram } from "./IconTelegram";
+export { IconReddit } from "./IconReddit";
+export { IconSushiSwap } from "./IconSushiSwap";
+export { IconPancakeSwap } from "./IconPancakeSwap";
+export { IconUniSwap } from "./IconUniSwap";
+export { IconImmtuableX } from "./IconImmtuableX";
+export { IconImmtuable } from "./IconImmtuable";
+export { IconImmtuableStudio } from "./IconImmtuableStudio";
+export { IconNotification } from "./IconNotification";
+export { IconHidePassword } from "./IconHidePassword";
+export { IconShowPassword } from "./IconShowPassword";
+export { IconImxToken } from "./IconImxToken";
+export { IconEthToken } from "./IconEthToken";
+export { IconViewList } from "./IconViewList";
+export { IconEducation } from "./IconEducation";
+export { IconDashboard } from "./IconDashboard";

src/components/Icons/readme.md

 # SvgIcon
 
-## Status: Alpha - 13th Dec 2022
+```diff
+# Component status
+! alpha - 13th Dec 2022 !
+```
 
@@ -9,3 +12,3 @@ ## Description
 
-## Sx prop
+## `sx` prop
 
@@ -49,2 +52,4 @@ ### Theme aware
 
+**\*NOTE:** Due to the complexity involved in rendering gradients within SVG - the `fill` sx prop for SvgIcon does not currently support responsiveness. Please indicate your interest in this functionality in the following [jira ticket](https://immutable.atlassian.net/browse/DS-114).
+
 ## Using custom defs
@@ -70,3 +75,3 @@
 
-## viewBox prop
+## `viewBox` prop
 
@@ -73,0 +78,0 @@ Sometimes you might want to change SvgIcon's default viewbox setting of `0 0 24 24`. the `viewBox` prop allows just this behaviour. For example,

src/components/index.ts

@@ -1,71 +0,5 @@
-export { Box } from "./Box";
-export { Heading } from "./Heading";
-export { Body } from "./Body";
-export {
-  SvgIcon,
-  IconTick,
-  IconAuthenticated,
-  IconMinus,
-  IconSearch,
-  IconExclaimation,
-  IconCloseWithCircle,
-  IconCountdown,
-  IconInformation,
-  IconAdd,
-  IconArrowForward,
-  IconArrowBackward,
-  IconThemeDark,
-  IconThemeLight,
-  IconPeople,
-  IconEmail,
-  IconPercentage,
-  IconLoader,
-  IconSwap,
-  IconMenu,
-  IconReturnKeyboard,
-  IconClose,
-  IconChevronForward,
-  IconChevronBackward,
-  IconChevronExpand,
-  IconChevronCollapse,
-  IconViewGrid,
-  IconDocuments,
-  IconDocument,
-  IconCircleArrow,
-  IconCopyText,
-  IconImxRewards,
-  IconTags,
-  IconWalletConnect,
-  IconSparkle,
-  IconDevSdk,
-  IconDevContracts,
-  IconDevExplorer,
-  IconGraphPerformance,
-  IconTokens,
-  IconImxTokenDex,
-  IconMore,
-  IconCalendar,
-  IconWallet,
-  IconMinting,
-  IconCart,
-  IconSettingsCog,
-  IconPreferences,
-  IconDiscord,
-  IconTwitter,
-  IconTelegram,
-  IconReddit,
-  IconSushiSwap,
-  IconPancakeSwap,
-  IconUniSwap,
-  IconImmtuableX,
-  IconImmtuable,
-  IconImmtuableStudio,
-  IconNotification,
-  IconHidePassword,
-  IconShowPassword,
-  IconImxToken,
-  IconEthToken,
-  IconViewList,
-  IconEducation,
-  IconDashboard,
-} from "./Icons";
+export * from "./Box";
+export * from "./Heading";
+export * from "./Caption";
+export * from "./Body";
+export * from "./Icons";

src/providers/BiomeThemeProvider/readme.md

 # BiomeThemeProvider
 
-## Status: Alpha - 2nd Dec 2022
+```diff
+# Component status
+! alpha - 2nd Dec 2022 !
+```
 
@@ -44,3 +47,4 @@ ## Description
 ```tsx
-import { base, ui, onDarkBase } from "@biom3/design-tokens";
+import { ui, onLightBase, onDarkBase } from "@biom3/design-tokens";
+const DEFAULT_THEME = { base: onLightBase, ui };
 export const LightOrDarkThemeProvider = ({
@@ -57,7 +61,7 @@ children,
   // @NOTE: default to "light" theme
-  const [theme, setTheme] = useState<DesignTokens>({ base, ui });
+  const [theme, setTheme] = useState<DesignTokens>(DEFAULT_THEME);
 
   useEffect(() => {
     if (themeBrightness === "light") {
-      setTheme({ base, ui });
+      setTheme(DEFAULT_THEME);
     } else {
@@ -64,0 +68,0 @@ setTheme({ base: onDarkBase, ui });

src/types/index.ts

 export type { FullBaseTheme, FullUiTheme } from "./theme";
+export type { IconProps, SingleVariantIconProps } from "./icon";
+export type { AsDomProps, AsDomComponentProps } from "./dom";
+export type { ResponsiveKey, BreakpointTheme } from "./responsive";
+export type { BaseComponentPropTypes } from "./shared";
+export * from "./sxProps";

src/types/sxProps.ts

@@ -15,43 +15,51 @@ import { ValidSxValues } from "@biom3/design-tokens";
   | ResponsiveObjectMeasurement;
-export type MaxWidth = MeasurementAndResponsiveMeasurement & {};
+
+type WidthProps = MeasurementAndResponsiveMeasurement & {};
 export type WidthSxProps = {
-  maxw: MaxWidth;
-  minw: MeasurementAndResponsiveMeasurement;
-  w: MeasurementAndResponsiveMeasurement;
-  width: MeasurementAndResponsiveMeasurement;
-  minWidth: MeasurementAndResponsiveMeasurement;
-  maxWidth: MeasurementAndResponsiveMeasurement;
+  maxw: WidthProps;
+  minw: WidthProps;
+  w: WidthProps;
+  width: WidthProps;
+  minWidth: WidthProps;
+  maxWidth: WidthProps;
 };
+type HeightProps = MeasurementAndResponsiveMeasurement & {};
 export type HeightSxProps = {
-  maxh: MeasurementAndResponsiveMeasurement;
-  minh: MeasurementAndResponsiveMeasurement;
-  h: MeasurementAndResponsiveMeasurement;
-  height: MeasurementAndResponsiveMeasurement;
-  minHeight: MeasurementAndResponsiveMeasurement;
-  maxHeight: MeasurementAndResponsiveMeasurement;
+  maxh: HeightProps;
+  minh: HeightProps;
+  h: HeightProps;
+  height: HeightProps;
+  minHeight: HeightProps;
+  maxHeight: HeightProps;
 };
 
-export type DisplayProps =
-  | "block"
-  | "flex"
-  | "inline"
-  | "inline-flex"
-  | "grid"
-  | "inline-grid";
+type DisplayProps = MeasurementAndResponsiveMeasurement & {};
 export type DisplaySxProps = {
-  d: DisplayProps | DisplayProps[];
-  display: DisplayProps | DisplayProps[];
+  d: DisplayProps;
+  display: DisplayProps;
 };
 
+type FlexProps = MeasurementAndResponsiveMeasurement;
 export type FlexSxProps = {
-  flexDirection: "row" | "column";
+  flexDirection: FlexProps;
+  flexWrap: FlexProps;
+  flexFlow: FlexProps;
+  gap: FlexProps;
+  alignItems: FlexProps;
+  alignSelf: FlexProps;
+  flex: FlexProps;
+  f: FlexProps;
+  justifyItems: FlexProps;
+  justifyContent: FlexProps;
+  order: FlexProps;
+  o: FlexProps;
 };
 
-export type PositionProps = "relative" | "static" | "absolute";
+type PositionProps = MeasurementAndResponsiveMeasurement;
 export type PositionSxProps = {
-  pos: PositionProps | PositionProps[];
-  position: PositionProps | PositionProps[];
+  pos: PositionProps;
+  position: PositionProps;
 };
 
-export type BorderProps = MeasurementAndResponsiveMeasurement;
+type BorderProps = MeasurementAndResponsiveMeasurement;
 export type BorderSxProps = {
@@ -63,2 +71,3 @@ border: BorderProps;
   borderTop: BorderProps;
+  borderRadius: BorderProps;
   b: BorderProps;
@@ -80,2 +89,4 @@ bl: BorderProps;
   d: "display",
+  f: "flex",
+  o: "order",
   pos: "position",
@@ -102,2 +113,3 @@ m: "margin",
   bgc: "backgroundColor",
+  bgi: "backgroundImage",
   bg: "background",
@@ -116,73 +128,86 @@ b: "border",
 
+type MarginProps = MeasurementAndResponsiveMeasurement & {};
 export type MarginSxProps = {
-  marginTop: MeasurementAndResponsiveMeasurement;
-  marginBottom: MeasurementAndResponsiveMeasurement;
-  marginLeft: MeasurementAndResponsiveMeasurement;
-  marginRight: MeasurementAndResponsiveMeasurement;
-  margin: MeasurementAndResponsiveMeasurement;
-  m: MeasurementAndResponsiveMeasurement;
-  mt: MeasurementAndResponsiveMeasurement;
-  mb: MeasurementAndResponsiveMeasurement;
-  ml: MeasurementAndResponsiveMeasurement;
-  mr: MeasurementAndResponsiveMeasurement;
-  mx: MeasurementAndResponsiveMeasurement;
-  my: MeasurementAndResponsiveMeasurement;
+  marginTop: MarginProps;
+  marginBottom: MarginProps;
+  marginLeft: MarginProps;
+  marginRight: MarginProps;
+  margin: MarginProps;
+  m: MarginProps;
+  mt: MarginProps;
+  mb: MarginProps;
+  ml: MarginProps;
+  mr: MarginProps;
+  mx: MarginProps;
+  my: MarginProps;
 };
 
+type PaddingProps = MeasurementAndResponsiveMeasurement & {};
 export type PaddingSxProps = {
-  paddingTop: MeasurementAndResponsiveMeasurement;
-  paddingBottom: MeasurementAndResponsiveMeasurement;
-  paddingLeft: MeasurementAndResponsiveMeasurement;
-  paddingRight: MeasurementAndResponsiveMeasurement;
-  padding: MeasurementAndResponsiveMeasurement;
-  p: MeasurementAndResponsiveMeasurement;
-  pt: MeasurementAndResponsiveMeasurement;
-  pb: MeasurementAndResponsiveMeasurement;
-  pl: MeasurementAndResponsiveMeasurement;
-  pr: MeasurementAndResponsiveMeasurement;
-  px: MeasurementAndResponsiveMeasurement;
-  py: MeasurementAndResponsiveMeasurement;
+  paddingTop: PaddingProps;
+  paddingBottom: PaddingProps;
+  paddingLeft: PaddingProps;
+  paddingRight: PaddingProps;
+  padding: PaddingProps;
+  p: PaddingProps;
+  pt: PaddingProps;
+  pb: PaddingProps;
+  pl: PaddingProps;
+  pr: PaddingProps;
+  px: PaddingProps;
+  py: PaddingProps;
 };
 
+type BackgroundProps = MeasurementAndResponsiveMeasurement & {};
 export type BackgroundSxProps = {
-  background: MeasurementAndResponsiveMeasurement;
-  backgroundColor: MeasurementAndResponsiveMeasurement;
-  bgc: MeasurementAndResponsiveMeasurement;
-  bg: MeasurementAndResponsiveMeasurement;
+  background: BackgroundProps;
+  backgroundColor: BackgroundProps;
+  backgroundImage: BackgroundProps;
+  bgi: BackgroundProps;
+  bgc: BackgroundProps;
+  bg: BackgroundProps;
 };
 
+type ColorProps = MeasurementAndResponsiveMeasurement & {};
 export type ColorSxProps = {
-  c: MeasurementAndResponsiveMeasurement;
-  color: MeasurementAndResponsiveMeasurement;
+  c: ColorProps;
+  color: ColorProps;
 };
 
-export type SvgFillSxProps = {
-  fill: MeasurementAndResponsiveMeasurement;
+// @TODO: Due to the incredible complexity of gradient conversion inside of SVG's,
+// For now responsive gradients for fill are unsupported.
+type SvgProps = MeasurementAndResponsiveMeasurement & {};
+export type SvgSxProps = {
+  fill: SvgProps;
 };
 
+type TypographyProps = MeasurementAndResponsiveMeasurement & {};
 export type TypographySxProps = {
-  fontSize: MeasurementAndResponsiveMeasurement;
-  lineHeight: MeasurementAndResponsiveMeasurement;
-  fontWeight: MeasurementAndResponsiveMeasurement;
+  fontSize: TypographyProps;
+  lineHeight: TypographyProps;
+  fontWeight: TypographyProps;
+  fontStyle: TypographyProps;
 };
 
+type TransformProps = MeasurementAndResponsiveMeasurement & {};
 export type TransformCxssProps = {
-  transform: MeasurementAndResponsiveMeasurement;
+  transform: TransformProps;
 };
 
+type GridProps = MeasurementAndResponsiveMeasurement & {};
 export type GridSxProps = {
-  gridTemplateColumns: MeasurementAndResponsiveMeasurement;
-  gridTemplateRows: MeasurementAndResponsiveMeasurement;
-  justifyContent: MeasurementAndResponsiveMeasurement;
-  alignContent: MeasurementAndResponsiveMeasurement;
-  gridColumn: MeasurementAndResponsiveMeasurement;
-  gridRow: MeasurementAndResponsiveMeasurement;
-  gridArea: MeasurementAndResponsiveMeasurement;
-  gridTemplateAreas: MeasurementAndResponsiveMeasurement;
-  columnGap: MeasurementAndResponsiveMeasurement;
-  rowGap: MeasurementAndResponsiveMeasurement;
-  gap: MeasurementAndResponsiveMeasurement;
-  gridColumnStart: MeasurementAndResponsiveMeasurement;
-  gridColumnEnd: MeasurementAndResponsiveMeasurement;
-  gridAutoColumns: MeasurementAndResponsiveMeasurement;
+  gridTemplateColumns: GridProps;
+  gridTemplateRows: GridProps;
+  justifyContent: GridProps;
+  alignContent: GridProps;
+  gridColumn: GridProps;
+  gridRow: GridProps;
+  gridArea: GridProps;
+  gridTemplateAreas: GridProps;
+  columnGap: GridProps;
+  rowGap: GridProps;
+  gap: GridProps;
+  gridColumnStart: GridProps;
+  gridColumnEnd: GridProps;
+  gridAutoColumns: GridProps;
 };
@@ -205,3 +230,3 @@
 
-export type SvgSxProps = Partial<PositionSxProps> &
+export type SvgElementSxProps = Partial<PositionSxProps> &
   Partial<HeightSxProps> &
@@ -214,3 +239,3 @@ Partial<WidthSxProps> &
   Partial<TransformCxssProps> &
-  Partial<SvgFillSxProps>;
+  Partial<SvgSxProps>;
 
@@ -222,3 +247,3 @@ export type SxComponentProps = {
 export type SvgSxComponentProps = {
-  sx?: SvgSxProps;
+  sx?: SvgElementSxProps;
 };

src/types/theme.ts

@@ -1,2 +0,2 @@
-import { BaseTokens, ProcessedUiTokens, UiTokens } from "@biom3/design-tokens";
+import { BaseTokens, UiTokens } from "@biom3/design-tokens";
 
@@ -15,8 +15,1 @@ type SizingScale = {
 };
-
-declare module "@emotion/react" {
-  export interface Theme {
-    base: FullBaseTheme;
-    ui: ProcessedUiTokens;
-  }
-}

src/utils/colorHelpers.ts

@@ -0,1 +1,3 @@
+import { SxProps } from "../types";
+
 export function hexToRgb(hex: string): { r: number; g: number; b: number } {
@@ -48,1 +50,6 @@ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
 }
+
+// @TODO: types for this function are not quite right. :thinking:
+export function setDefaultSxTextColor(sx: SxProps, color: string) {
+  return sx.c ? { c: color } : sx.color ? { color: color } : { color: color };
+}

src/utils/sharedStyleHelpers.ts

@@ -90,3 +90,3 @@ import { Theme } from "@emotion/react";
             fontSize:
-              // TS isn't smart enough to infer past the second level, so we need to cast here. Matt Pocock approved, we promise!
+              // @NOTE: TS isn't smart enough to infer past the second level, so we need to cast here. Matt Pocock approved, we promise!
               (
@@ -93,0 +93,0 @@ themeProps.base.text[tokenTextComponent][

src/utils/sxToEmotionStyles.ts

 import { Theme } from "@emotion/react";
 import merge from "ts-deepmerge";
 import type * as CSS from "csstype";
-import { pickTokenValue } from "@biom3/design-tokens";
+import { Gradient, smartPickTokenValue } from "@biom3/design-tokens";
 import {
@@ -17,2 +17,4 @@ MeasurementAndResponsiveMeasurement,
 ): object is { [_ in K]: keyof SxProps } {
+  // @TODO: would be awesome to try and get this working
+  // (because it actually narrows the type), but it's not a priority atm
   // ): object is { [_ in K]: {} } {
@@ -43,2 +45,3 @@ return typeof object === "object" && object !== null && key in object;
 export const partOfTokenRegex = /base.|ui./i;
+
 export function applyStyleAmount(
@@ -49,8 +52,25 @@ rule: keyof SxProps,
 ): CSS.Properties {
-  const valueFromToken = value?.match(partOfTokenRegex)
-    ? pickTokenValue<string>(themeProps, value)
-    : value;
-  return rule.match(/X|Y/) && valueFromToken
-    ? applyXandYStyleAmount(rule, valueFromToken)
-    : { [rule]: valueFromToken };
+  if (!value) return {};
+  const valueFromToken =
+    smartPickTokenValue<string | Gradient>(themeProps, value) || value;
+
+  const isGradient = typeof valueFromToken === "object";
+  if (isGradient && rule.match(/background$|backgroundImage$|^color/)) {
+    const gradient = valueFromToken;
+    const styleObject = {
+      backgroundImage: gradient.spectrum,
+      backgroundBlendMode: gradient.blendMode,
+    };
+    return rule.match(/color/)
+      ? {
+          ...styleObject,
+          backgroundClip: "text",
+          textFillColor: "transparent",
+        }
+      : styleObject;
+  } else if (rule.match(/X$|Y$/) && typeof valueFromToken === "string") {
+    return applyXandYStyleAmount(rule, valueFromToken);
+  } else {
+    return { [rule]: valueFromToken };
+  }
 }
@@ -57,0 +77,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

778635

increased by18.96%

Number of package files

124

increased by5.98%

Lines of code

10030

increased by27.41%

Number of lines in readme file

145

increased by168.52%

No dependency changes