@primer/react-brand 0.1.0 → 0.2.0-rc.dd0371a

package/CHANGELOG.md

@@ -0,0 +1,142 @@
+# @primer/react-brand
+
+## 0.2.0
+
+### Minor Changes
+
+- [#33](https://github.com/primer/react-brand/pull/33) [`662fcfc`](https://github.com/primer/react-brand/commit/662fcfc6d123460730317b7ddd3d3a4622d30dce) Thanks [@rezrah](https://github.com/rezrah)! - - Adds `River` component
+
+  - Renames `LinkButton` to `Button` :warning: (see below)
+  - Button supports polymorphism and can be used `as` either `a` or `button`
+
+  ### `River`
+
+  **NEW** Component :sparkles:
+
+  <table>
+  <tr>
+  <th> Before</th> <th> After</th>
+  </tr>
+  <tr>
+  <td valign="top">❌</td>
+  <td valign="top">
+
+  ```jsx
+  // import {River} from "@primer/react-brand";
+
+  <River>
+    <River.Visual>
+      <img
+        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
+        alt="placeholder, blank area with an off-white background color"
+      />
+    </River.Visual>
+    <River.Content>
+      <Heading>Heading</Heading>
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
+        felis nam pulvinar risus elementum.
+      </Text>
+      <Link href="#">Call to action</Link>
+    </River.Content>
+  </River>
+  ```
+
+  </td>
+  </tr>
+  </table>
+
+  See more examples in our documentation.
+  https://primer.style/react-brand/components/River
+
+  ### `LinkButton`
+
+  > **Warning**
+  > The changes below should be considered a breaking change for anyone relying on `LinkButton`, but as we are shipping a pre-v1 library, this has been marked as a `minor` release rather than `major`. Please remember to update your usage per the below example.
+
+  <table>
+  <tr>
+  <th> Before</th> <th> After</th>
+  </tr>
+  <tr>
+  <td valign="top">
+
+  ```jsx
+  //import { LinkButton } from '@primer/react-brand';
+
+  <LinkButton href="#">Sign up</LinkButton>
+  ```
+
+  </td>
+  <td valign="top">
+
+  ```jsx
+  //import { Button } from '@primer/react-brand';
+
+  <Button as="a" href="#">
+    Sign up
+  </Button>
+  ```
+
+  </td>
+  </tr>
+  <tr>
+  <td valign="top">
+
+  ❌
+
+  </td>
+  <td valign="top">
+
+  ```jsx
+  //import { Button } from '@primer/react-brand';
+
+  <Button onClick={handler}>Sign Up</Button>
+  ```
+
+  </td>
+  </tr>
+
+  </table>
+
+## 0.1.0
+
+### Minor Changes
+
+- [#19](https://github.com/primer/react-brand/pull/19) [`3b22e9e`](https://github.com/primer/react-brand/commit/3b22e9e0823401104d6e33b3c4f8664b755ea6ba) Thanks [@colebemis](https://github.com/colebemis)! - Add `size` prop to `Hero` component
+
+### Patch Changes
+
+- [#23](https://github.com/primer/react-brand/pull/23) [`77abf53`](https://github.com/primer/react-brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - add Text and Heading components
+
+* [#29](https://github.com/primer/react-brand/pull/29) [`144c7d7`](https://github.com/primer/react-brand/commit/144c7d762a91cb691699e4f8923ab08385c77966) Thanks [@rezrah](https://github.com/rezrah)! - Removed `gh-variables.css` from package as Brand variables are now surfaced in main.css
+
+  **To upgrade:**
+
+  - _Remove_ `import "@primer/react-brand/lib/css/gh-variables.css"`
+
+  - _Add_ `import "@primer/react-brand/lib/css/main.css"`
+
+- [#23](https://github.com/primer/react-brand/pull/23) [`77abf53`](https://github.com/primer/react-brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - forward className in Hero
+
+* [#25](https://github.com/primer/react-brand/pull/25) [`4b00b72`](https://github.com/primer/react-brand/commit/4b00b72f5dbf5e578351ea77e1e74cddc69833e7) Thanks [@rezrah](https://github.com/rezrah)! - adds baseline tokens
+
+- [#21](https://github.com/primer/react-brand/pull/21) [`ab06cce`](https://github.com/primer/react-brand/commit/ab06cceb6ed3b2eaca70f9738b9708343b4e6db9) Thanks [@rezrah](https://github.com/rezrah)! - Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.
+
+* [#27](https://github.com/primer/react-brand/pull/27) [`ca2d300`](https://github.com/primer/react-brand/commit/ca2d3002ba6f7ca9c719f80077c4d95246f33410) Thanks [@rezrah](https://github.com/rezrah)! - Updated Hero text appearance
+
+  - **updated** Hero description text size from `500` to `400`
+  - **updated** button alignment to not stretch on mobile viewports
+  - **removed** `size` prop. Now only one responsive size available.
+
+## 0.0.3
+
+### Patch Changes
+
+- [#18](https://github.com/primer/react-brand/pull/18) [`0835830`](https://github.com/primer/react-brand/commit/0835830fc15c582e280ac692ff3d578d6bcf282e) Thanks [@rezrah](https://github.com/rezrah)! - Fixes for production bundles
+
+## 0.0.2
+
+### Patch Changes
+
+- [#2](https://github.com/primer/react-brand/pull/2) [`ab01a8a`](https://github.com/primer/react-brand/commit/ab01a8ad1dc504f7a2865213b6f41c0b0adba131) Thanks [@colebemis](https://github.com/colebemis)! - Initialize releases with [changesets](https://github.com/changesets/changesets)

package/lib/Button/Button.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import '../../lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css';
+export declare type ButtonProps<C extends React.ElementType> = {
+    as?: C;
+    variant?: 'primary' | 'secondary';
+} & React.ComponentPropsWithoutRef<C>;
+export declare function Button<C extends React.ElementType>({ as, variant, className, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: ButtonProps<C>): JSX.Element;

package/lib/Button/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/lib/Heading/Heading.d.ts

@@ -13,7 +13,7 @@ export declare const classMap: {
 declare type HeadingTags = {
     as?: typeof HeadingTags[number];
 } & React.HTMLAttributes<HTMLHeadingElement>;
-declare type HeadingProps = {
+export declare type HeadingProps = {
     className?: string;
 } & HeadingTags;
 export declare function Heading({ className, children, as, ...rest }: PropsWithChildren<HeadingProps>): JSX.Element;

package/lib/Link/Link.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare type LinkProps = {
+    size?: 'medium' | 'large';
+} & React.ComponentPropsWithoutRef<'a'>;
+/**
+ * Links connect users to related content.
+ * These are not intended to be used as a call-to-action.
+ */
+export declare function Link({ size, className, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: LinkProps): JSX.Element;

package/lib/Link/index.d.ts

@@ -0,0 +1 @@
+export * from './Link';

package/lib/River/River.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import { HeadingTags, LinkProps, HeadingProps, TextProps } from '../';
+import '../../lib/design-tokens/css/tokens/functional/components/river/base.css';
+export declare type RiverProps = {
+    /**
+     * Only specific children are valid.
+     * These include: `River.Visual` and `River.Content`.
+     * The declarative order of the children will be ignored in the rendered output
+     * to enforce correct HTML semantics.
+     */
+    children: React.ReactElement<RiverVisualProps | RiverContentProps>[];
+    /**
+     * Apply a custom classname that will be forwarded to the root River element.
+     */
+    className?: string;
+    /**
+     * Apply an alternative image to text column ratio. The default is `50:50`.
+     */
+    imageTextRatio?: '60:40' | '50:50';
+    /**
+     * Adjust the order of the `Content` column. The default is `left`.
+     */
+    align?: 'left' | 'right' | 'center';
+};
+export declare const defaultRiverImageTextRatio = "50:50";
+export declare const defaultRiverAlign = "left";
+declare function Root({ imageTextRatio, align, className, children, ...rest }: RiverProps): JSX.Element;
+declare type RiverContentProps = {
+    /**
+     * Escape-hatch for inserting custom React components.
+     * Warning:
+     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
+     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
+     */
+    trailingComponent?: React.FunctionComponent;
+    /**
+     * Escape-hatch for inserting custom React components.
+     * Warning:
+     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
+     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
+     */
+    leadingComponent?: React.FunctionComponent;
+    /**
+     * Only valid children are allowed.
+     * These include: `Heading`, `Text` and `Link`.
+     * The declarative order of the children will be ignored in the rendered output
+     * to enforce correct HTML semantics.
+     */
+    children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[];
+};
+export declare const getHeadingWarning: (size: (typeof HeadingTags)[number]) => string;
+declare function Content({ children, leadingComponent: LeadingComponent, trailingComponent: TrailingComponent }: RiverContentProps): JSX.Element;
+declare type RiverVisualProps = {
+    className?: string;
+    /**
+     * `img` and `video` elements will apply a shadow by default.
+     * This can be disabled by setting this prop to `false`.
+     */
+    hasShadow?: boolean;
+};
+declare function Visual({ children, className, hasShadow }: React.PropsWithChildren<RiverVisualProps>): JSX.Element;
+/**
+ * Alternating text and image pairs.
+ */
+export declare const River: typeof Root & {
+    Visual: typeof Visual;
+    Content: typeof Content;
+};
+export {};

package/lib/River/index.d.ts

@@ -0,0 +1 @@
+export * from './River';

package/lib/Text/Text.d.ts

@@ -18,7 +18,7 @@ declare type TextTags = {
      */
     as?: typeof TextTags[number];
 } & RestrictedPolymorphism;
-declare type TextProps = {
+export declare type TextProps = {
     /**
      * Forward a custom HTML class attribute
      */

package/lib/component-helpers.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * Layout
+ */
+export declare const Container: ({ children }: {
+    children: any;
+}) => JSX.Element;

package/lib/css/main.css

@@ -91,7 +91,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:48 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {
@@ -897,7 +897,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:48 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {
@@ -922,7 +922,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:48 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {
@@ -1089,7 +1089,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:47 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {
@@ -1103,7 +1103,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:48 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {
@@ -1290,7 +1290,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:48 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {
@@ -1317,7 +1317,15 @@ select {
   --brand-Button-shadow-focus: hsl(var(--base-color-scale-white-0-hsl) / 25%) 0 0 0 4px;
 }
 
-.LinkButton-module__LinkButton___73d6V {
+.Button-module__Button___Ky\+-Z {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  vertical-align: middle;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1326,42 +1334,44 @@ select {
   text-decoration: none;
   border-radius: 6px;
   cursor: pointer;
+  border: none;
+  background: none;
 }
 
-.LinkButton-module__LinkButton___73d6V:focus {
+.Button-module__Button___Ky\+-Z:focus {
   outline: 0;
   box-shadow: var(--brand-Button-shadow-focus), var(--brand-Button-shadow-hover);
 }
 
-.LinkButton-module__LinkButton--label___-NRnw {
+.Button-module__Button--label___YPITC {
   font-weight: var(--base-text-weight-semibold);
 }
 
-.LinkButton-module__LinkButton-arrow___bd7ZC {
+.Button-module__Button-arrow___8MSd\+ {
   margin-left: 4px;
 }
 
-.LinkButton-module__LinkButton--primary___5T51r {
+.Button-module__Button--primary___bMjrR {
   color: var(--brand-color-text-onEmphasis);
   background-color: var(--brand-Button-background-base);
   background: var(--brand-Button-background-overlay);
 }
 
-.LinkButton-module__LinkButton--primary___5T51r:hover {
+.Button-module__Button--primary___bMjrR:hover {
   box-shadow: var(--brand-Button-shadow-hover);
 }
 
-.LinkButton-module__LinkButton--label-primary___TSZx\+ {
+.Button-module__Button--label-primary___1iRqu {
   color: var(--brand-color-text-onEmphasis);
 }
 
-.LinkButton-module__LinkButton--secondary___Oc3L1 {
+.Button-module__Button--secondary___gq64j {
   color: var(--brand-color-text-default);
   box-shadow: inset 0 0 0 1px var(--brand-color-border-default);
   transition: box-shadow 200ms;
 }
 
-.LinkButton-module__LinkButton--secondary___Oc3L1:hover {
+.Button-module__Button--secondary___gq64j:hover {
   box-shadow: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
 }
 
@@ -1419,7 +1429,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:47 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {
@@ -1427,3 +1437,179 @@ select {
   --brand-Hero-narrow-padding: var(--base-size-96) 0;
 }
 
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
+ */
+
+:root {
+  --brand-River-gap-heading-bottom: var(--base-size-8);
+  --brand-River-gap-column-large: var(--base-size-48);
+  --brand-River-gap-column-medium: var(--base-size-32);
+  --brand-River-visual-shadow: 0px 100px 80px rgba(0, 0, 0, 0.0174624), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0235573), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0282784), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.0339075), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.04317), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.07);
+  --brand-River-layout-margin-vertical: var(--base-size-48) 0;
+}
+
+.River-module__River___JrRJn {
+  display: grid;
+  grid-gap: var(--brand-River-gap-column-medium);
+  gap: var(--brand-River-gap-column-medium);
+  grid-auto-rows: -webkit-min-content;
+  grid-auto-rows: min-content;
+  margin: var(--brand-River-layout-margin-vertical);
+}
+
+.River-module__River__visual___FPRmp {
+  position: relative;
+  order: 2;
+}
+
+.River-module__River--align-center___v9wmC {
+  text-align: center;
+}
+
+.River-module__River__visual___FPRmp img,
+.River-module__River__visual___FPRmp video {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.River-module__River__visual--has-shadow___VCNVf {
+  box-shadow: var(--brand-River-visual-shadow);
+}
+
+.River-module__River__heading___1vglW {
+  margin-bottom: var(--brand-River-gap-heading-bottom);
+}
+
+.River-module__River__call-to-action___pr7tp {
+  margin-top: var(--base-size-24);
+}
+
+.River-module__River__text___jFOLz strong {
+  color: var(--brand-color-text-default);
+}
+
+/* Small breakpoint and up */
+@media screen and (min-width: 34rem) {
+  .River-module__River___JrRJn {
+    grid-template-rows: initial;
+  }
+  .River-module__River--50-50___ShFNW {
+    grid-template-columns: [content] 1fr [visual] 1fr;
+  }
+
+  .River-module__River--60-40___9LI6h {
+    grid-template-columns: [content] calc(40% - var(--base-size-12)) [visual] calc(60% - var(--base-size-12));
+  }
+
+  .River-module__River--align-left___x8Qd1 {
+    grid-template-areas: 'content visual';
+  }
+
+  .River-module__River--align-right___Mx1m- {
+    grid-template-areas: 'visual content';
+  }
+
+  .River-module__River--align-right___Mx1m-.River-module__River--60-40___9LI6h {
+    grid-template-columns: [visual] calc(60% - var(--base-size-12)) [content] calc(40% - var(--base-size-12));
+  }
+
+  .River-module__River__content___hRRqX {
+    display: grid;
+    align-content: center;
+    grid-area: content;
+  }
+
+  .River-module__River__visual___FPRmp {
+    grid-area: visual;
+    order: initial;
+  }
+
+  .River-module__River--align-center___v9wmC {
+    grid-auto-rows: -webkit-min-content;
+    grid-auto-rows: min-content;
+    grid-template-columns: initial;
+  }
+
+  .River-module__River--align-center___v9wmC .River-module__River__content___hRRqX,
+  .River-module__River--align-center___v9wmC .River-module__River__visual___FPRmp {
+    grid-area: unset;
+    justify-self: center;
+  }
+
+  .River-module__River--align-center___v9wmC .River-module__River__body-text___0BbuA {
+    max-width: 600px;
+    justify-self: center;
+  }
+
+  .River-module__River--align-center___v9wmC .River-module__River__visual___FPRmp {
+    margin-bottom: var(--base-size-48);
+  }
+  .River-module__River--align-center___v9wmC .River-module__River__content___hRRqX {
+    margin-top: var(--base-size-48);
+  }
+}
+
+/* Large breakpoint and up */
+@media screen and (min-width: 63.25rem) {
+  .River-module__River___JrRJn {
+    gap: var(--brand-River-gap-column-large);
+  }
+}
+
+.Link-module__Link___I46Yd {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: box-shadow 0.2s;
+  text-decoration: none;
+  cursor: pointer;
+  color: var(--brand-color-text-default);
+}
+
+.Link-module__Link___I46Yd::after {
+  position: absolute;
+  bottom: -0.15em;
+  left: 0;
+  width: calc(100% - 1.5em);
+  height: 2px;
+  pointer-events: none;
+  content: '';
+  background-color: var(--brand-color-text-default);
+  transform: scaleX(0);
+  transform-origin: 0 0;
+}
+
+@media screen and (prefers-reduced-motion: no-preference) {
+  .Link-module__Link___I46Yd::after {
+    transition: transform 0.3s ease;
+  }
+}
+
+.Link-module__Link___I46Yd:active:after,
+.Link-module__Link___I46Yd:hover:after,
+.Link-module__Link___I46Yd:focus:after {
+  transform: scaleX(1);
+}
+
+.Link-module__Link___I46Yd:focus {
+  outline: 0;
+}
+
+.Link-module__Link--label___N2WtW {
+  font-weight: var(--base-text-weight-semibold);
+}
+
+.Link-module__Link-arrow___Y1IN9 {
+  margin-left: 4px;
+}
+
+.Link-module__Link--large___CIEbO .Link-module__Link-arrow___Y1IN9 {
+  width: 20px;
+  height: 20px;
+}
+

package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:48 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/colors/color-scales.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:47 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:48 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:47 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:48 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/colors/global.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:47 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:48 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/hero/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:47 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/river/base.css

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
+ */
+
+:root {
+  --brand-River-gap-heading-bottom: var(--base-size-8);
+  --brand-River-gap-column-large: var(--base-size-48);
+  --brand-River-gap-column-medium: var(--base-size-32);
+  --brand-River-visual-shadow: 0px 100px 80px rgba(0, 0, 0, 0.0174624), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0235573), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0282784), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.0339075), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.04317), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.07);
+  --brand-River-layout-margin-vertical: var(--base-size-48) 0;
+}

package/lib/design-tokens/css/tokens/functional/size/border.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 23 May 2022 16:03:47 GMT
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
  */
 
 :root {