Merge pull request #1282 from vtex/feature/tokens

Tokens package

.storybook/themeDecorator.jsx

@@ -1,6 +1,9 @@
 import React from 'react'
 import { ThemeProvider } from '../packages/admin-ui/dist/vtex-admin-ui.esm'
+import '../packages/tokens/dist/styles.min.css'
 
 export function themeDecorator(storyFn) {
-  return <ThemeProvider experimentalDisabledGlobalStyles>{storyFn()}</ThemeProvider>
+  return (
+    <ThemeProvider experimentalDisabledGlobalStyles>{storyFn()}</ThemeProvider>
+  )
 }

packages/components/package.json

@@ -17,17 +17,15 @@
       "import": "./dist/esm/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./styles": "./dist/styles.min.css"
+    "./styles": "./dist/index.css"
   },
   "engines": {
     "node": ">=16"
   },
   "scripts": {
-    "prebuild": "rm -rf dist && rm -rf shoreline && pnpm run theme",
+    "prebuild": "rm -rf dist",
     "dev": "tsup --watch",
-    "build": "npm run prebuild && tsup && npm run build:css",
-    "build:css": "lightningcss --minify --bundle --targets '>= 0.25%' ./src/styles.css -o ./dist/styles.min.css",
-    "theme": "shorelinecss theme"
+    "build": "tsup"
   },
   "repository": {
     "directory": "packages/admin-ui",

packages/components/src/action/stories/action.stories.tsx

@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React from 'react'
 
 import { Action } from '../index'

packages/components/src/alert/alert.tsx

@@ -7,6 +7,7 @@ import {
 } from '@vtex/shoreline-icons'
 import type { ComponentPropsWithoutRef, MouseEventHandler } from 'react'
 import React, { forwardRef } from 'react'
+import './alert.css'
 
 import { IconButton } from '../icon-button'
 

packages/components/src/alert/stories/alert.stories.tsx

@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../alert.css'
 import React, { useState } from 'react'
 
 import { Alert } from '../index'

packages/components/src/bleed/bleed.tsx

@@ -1,6 +1,7 @@
 import type { CSSProperties, ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { cssVar } from '@vtex/shoreline-utils'
+import './bleed.css'
 
 const defaultBleed = '0rem'
 

packages/components/src/bleed/stories/bleed.stories.tsx

@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React from 'react'
 
 import { Bleed } from '../index'

packages/components/src/button/button.tsx

@@ -5,6 +5,7 @@ import { Button as BaseButton } from '@ariakit/react'
 import { Spinner } from '../spinner'
 import { Center } from '../center'
 import { Compose, Composable } from '../compose'
+import './button.css'
 
 /**
  * Buttons triggers allow users to identify and start the most important actions in a container.

packages/components/src/button/stories/button.stories.tsx

@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import './style.css'
 
 import React, { Fragment } from 'react'

packages/components/src/center/center.tsx

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+import './center.css'
 
 export const Center = forwardRef<HTMLDivElement, CenterProps>(function Center(
   props,

packages/components/src/center/stories/center.stories.tsx

@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React from 'react'
 
 import { Center } from '../index'

packages/components/src/checkbox/checkbox.tsx

@@ -4,9 +4,9 @@ import { IconCheckSmall, IconMinusSmall } from '@vtex/shoreline-icons'
 
 import { VisuallyHidden } from '../visually-hidden'
 import { useAriaCheckbox } from './use-aria-checkbox'
-
 import type { AriaCheckboxProps } from './use-aria-checkbox'
 import { Text } from '../text'
+import './checkbox.css'
 
 /**
  * Checkbox controls allow users to make multiple independent choices in a form where there are at most five options and each option is binary.

packages/components/src/checkbox/stories/checkbox-integrations.stories.tsx

@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../checkbox.css'
 import React, { useMemo, useState } from 'react'
 import { useForm, Controller } from 'react-hook-form'
 import { FixedSizeList } from 'react-window'

packages/components/src/checkbox/stories/checkbox.stories.tsx

@@ -1,6 +1,4 @@
 import React, { useState } from 'react'
-import '../../../dist/styles.min.css'
-import '../checkbox.css'
 
 import { Checkbox, CheckboxField, CheckboxGroup } from '../index'
 import { VisuallyHidden } from '@ariakit/react'

packages/components/src/clickable/clickable.tsx

@@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Compose } from '../compose'
 import { hasSomeTextSelected } from '@vtex/shoreline-utils'
+import './clickable.css'
 
 /**
  * Represents clickable surfaces

packages/components/src/clickable/stories/clickable.stories.tsx

@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../clickable.css'
 import React from 'react'
 
 import { Clickable, ClickableBubble } from '../index'

packages/components/src/combobox/stories/combobox.stories.tsx

@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React, { startTransition, useMemo, useState } from 'react'
 import { matchSorter } from 'match-sorter'
 

packages/components/src/compose/stories/compose.stories.tsx

@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React, { useRef } from 'react'
 
 import { Compose, Composable } from '../index'

packages/components/src/content/content.tsx

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+import './content.css'
 
 import type { ContentContainerAs } from './types'
 

packages/components/src/content/stories/content.stories.tsx

@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import './styles.css'
 
 import React from 'react'

packages/components/src/field/field.tsx

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+import './field.css'
 
 export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
   props,

packages/components/src/field/stories/field.stories.tsx

@@ -1,13 +1,9 @@
-import '../../../dist/styles.min.css'
-import './style.css'
-import '../field.css'
-
 import React from 'react'
+import { Checkbox, Radio } from '@ariakit/react'
 
 import { Field, FieldLabel, FieldMessage } from '../index'
 import { Stack } from '../../stack'
-
-import { Checkbox, Radio } from '@ariakit/react'
+import './style.css'
 
 export default {
   title: 'shoreline-components/field',

packages/components/src/filter/filter.tsx

@@ -6,6 +6,7 @@ import { FilterTrigger } from './filter-trigger'
 import type { FilterPopoverProps } from './filter-popover'
 import { FilterPopover } from './filter-popover'
 import { FilterList } from './filter-list'
+import './filter.css'
 
 /**
  * Filter component

packages/components/src/filter/stories/filter.stories.tsx

@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../filter.css'
 import React, { useState, useMemo, startTransition } from 'react'
 import { matchSorter } from 'match-sorter'
 

packages/components/src/flex/flex.tsx

@@ -1,6 +1,7 @@
 import type { CSSProperties, ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import type { CSSProperty } from '@vtex/shoreline-utils'
+import './flex.css'
 
 export const Flex = forwardRef<HTMLDivElement, FlexProps>(function Flex(
   props,

packages/components/src/flex/stories/flex.stories.tsx

@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React from 'react'
 
 import { Flex } from '../index'

packages/components/src/grid/grid.tsx

@@ -1,6 +1,7 @@
 import type { CSSProperties, ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import type { CSSProperty } from '@vtex/shoreline-utils'
+import './grid.css'
 
 export const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(
   props,

packages/components/src/grid/stories/grid.stories.tsx

@@ -1,4 +1,3 @@
-import '../../../dist/styles.min.css'
 import React from 'react'
 
 import { Grid, GridCell } from '../index'

packages/components/src/icon-button/icon-button.tsx

@@ -4,6 +4,7 @@ import React, { forwardRef } from 'react'
 import type { ButtonProps } from '../button'
 import { Button } from '../button'
 import { AccessibleIcon } from '../accessible-icon'
+import './icon-button.css'
 
 /**
  * A button designed specifically for usage with a single icon.

packages/components/src/icon-button/stories/icon-button.stories.tsx

@@ -1,11 +1,8 @@
-import '../../../dist/styles.min.css'
-
 import React, { useState } from 'react'
-import { IconButton } from '../index'
-import { Stack } from '../../stack'
 import { IconTrash } from '@vtex/shoreline-icons'
-
 import { AccessibleIcon } from '../../accessible-icon'
+import { Stack } from '../../stack'
+import { IconButton } from '../index'
 
 export default {
   title: 'shoreline-components/icon-button',

packages/components/src/link-box/link-box.tsx

@@ -5,6 +5,7 @@ import type { ClickableProps } from '../clickable'
 import { Clickable } from '../clickable'
 import type { NavigationTarget } from './link-box-utils'
 import { navigate } from './link-box-utils'
+import './link-box.css'
 
 /**
  * A container that acts as a link. It allows text selection and stop its children event propagation.

packages/components/src/link-box/stories/link-box.stories.tsx

@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../link-box.css'
 import React from 'react'
 import { Button } from '../../button'
 import { Menu, MenuTrigger, MenuItem, MenuProvider } from '../../menu'

packages/components/src/link/link.tsx

@@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 
 import { Compose } from '../compose'
+import './link.css'
 
 /**
  * Anchor component

packages/components/src/link/stories/link.stories.tsx

@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../link.css'
 import React from 'react'
 
 import { Link } from '../index'

packages/components/src/menu/menu.tsx

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Menu as BaseMenu } from '@ariakit/react'
+import './menu.css'
 
 export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
   props,

packages/components/src/menu/stories/menu.stories.tsx

@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../menu.css'
 import React from 'react'
 import {
   IconCaretDown,

packages/components/src/modal/modal.tsx

@@ -1,7 +1,9 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Dialog } from '@ariakit/react'
+
 import { Container } from '../content'
+import './modal.css'
 
 export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
   props,

packages/components/src/modal/stories/modal.stories.tsx

@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../modal.css'
 import React, { useState } from 'react'
 
 import { Modal, ModalHeader } from '../index'

packages/components/src/pagination/pagination.tsx

@@ -10,6 +10,7 @@ import {
 import { AccessibleIcon } from '../accessible-icon'
 import { VisuallyHidden } from '../visually-hidden'
 import { useId } from '@vtex/shoreline-utils'
+import './pagination.css'
 
 /**
  * Pagination triggers allow merchants to view the size of a list and navigate between pages.

packages/components/src/pagination/stories/pagination.stories.tsx

@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../pagination.css'
 import './style.css'
 import React, { useState } from 'react'
 

packages/components/src/popover/popover.tsx

@@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Popover as BasePopover } from '@ariakit/react'
 import { Container } from '../content'
+import './popover.css'
 
 /**
  * Popover containers allow merchants to access and interact with more

packages/components/src/popover/stories/popover.stories.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
 
-import '../../../dist/styles.min.css'
-import '../popover.css'
 import './styles.css'
 
 import { Content } from '../../content'

packages/components/src/radio/radio-group.tsx

@@ -9,6 +9,7 @@ import {
 import { Field, FieldLabel, FieldMessage } from '../field'
 import { Stack } from '../stack'
 import { useId } from '@vtex/shoreline-utils'
+import './radio-group.css'
 
 export const RadioGroup = forwardRef<HTMLInputElement, RadioGroupProps>(
   function Radio(props, ref) {

packages/components/src/radio/radio.css

@@ -22,15 +22,15 @@
 
       &:hover {
         border: var(--sl-element-border-hover);
-      };
+      }
 
       &:checked {
         background-color: var(--sl-element-bg-checked);
         border: var(--sl-element-border-checked);
 
         &:hover {
           border: var(--sl-element-border-checked);
-        };
+        }
 
         &:after {
           background-color: var(--sl-element-check-bg);
@@ -42,7 +42,7 @@
       }
 
       &:after {
-        content: "";
+        content: '';
         width: 0.5rem;
         height: 0.5rem;
         display: block;
@@ -84,5 +84,5 @@
         --sl-element-focus-ring-checked: none;
       }
     }
-  };
+  }
 }

packages/components/src/radio/radio.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef } from 'react'
 import { Radio as BaseRadio } from '@ariakit/react'
 import { Field, FieldLabel } from '../field'
 import { useId } from '@vtex/shoreline-utils'
+import './radio.css'
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
   props,

packages/components/src/radio/stories/radio.stories.tsx

@@ -1,7 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../radio.css'
-import '../radio-group.css'
-import '../../field/field.css'
 import React, { useEffect, useState } from 'react'
 
 import { Radio, RadioGroup, useRadioState } from '../index'

packages/components/src/scroll-area/scroll-area.tsx

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Root, Viewport, Scrollbar, Thumb } from '@radix-ui/react-scroll-area'
+import './scroll-area.css'
 
 /**
  * Cross-browser scroll styling

packages/components/src/scroll-area/stories/scroll-area.stories.tsx

@@ -1,5 +1,3 @@
-import '../../../dist/styles.min.css'
-import '../scroll-area.css'
 import React from 'react'
 
 import { ScrollArea } from '../index'