@crystallize/design-system 1.20.1 → 1.21.0

package/dist/index.js

@@ -29214,7 +29214,7 @@ function ActionMenu({ children, tabIndex, size, ...delegated }) {
       type: "button",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {
-          className: "sr-only",
+          className: "c-action-menu__trigger-text",
           children: "Open more options"
         }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {
@@ -34535,7 +34535,7 @@ function DialogContent({ children, closable = true, type, className, container,
         ...delegated,
         children: [
           IconComponent && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", {
-            className: "flex h-[44px] w-[44px]  min-w-[44px] items-center justify-center rounded-lg bg-gray-50-900 p-[5px]",
+            className: "c-dialog-icon-wrapper",
             children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(IconComponent, {
               className: "c-dialog-icon",
               width: 34,
@@ -34645,7 +34645,7 @@ function ConfirmDialog({
         }),
         content,
         (displayOk || okCancel || displayCancel) && /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", {
-          className: "mt-4 flex items-center justify-end gap-4",
+          className: "c-dialog-content__buttons",
           children: [
             cancelButton,
             okButton
@@ -35174,11 +35174,11 @@ var Slider = (0, import_react111.forwardRef)(({ className, transparentRange, ...
 var import_jsx_runtime126 = require("react/jsx-runtime");
 function StackIcon({ type, children, size = 18 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("span", {
-    className: "relative leading-[0] inline-block",
+    className: "c-stack-icon",
     children: [
       type === "create" && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", {
         style: { width: size, height: size },
-        className: "absolute right-0 top-0 flex -translate-y-1/3 translate-x-1/3 items-center justify-center rounded border border-solid border-white bg-gray-50-900",
+        className: "c-stack-icon__icon",
         children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Icon.Add, {
           width: size - 4,
           height: size - 4
@@ -35233,7 +35233,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
             height: 12
           }),
           /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", {
-            className: "sr-only",
+            className: "c-tag__remove-button-text",
             children: "Remove"
           })
         ]
@@ -37665,7 +37665,7 @@ function BlockFormatDropDown({
           "data-testid": "toggle-block-format-code",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("i", {
-              className: `icon c-rte-icon-code border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "code" ? "selected" : ""}`
+              className: `icon c-rte-icon-code c-rte-toolbar__block-format__icon ${blockType === "code" ? "selected" : ""}`
             }),
             /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("span", {
               className: `c-rte-toolbar__block-format__text ${blockType === "code" ? "selected" : ""}`,

package/dist/index.mjs

@@ -324,7 +324,7 @@ function ActionMenu({ children, tabIndex, size, ...delegated }) {
       type: "button",
       children: [
         /* @__PURE__ */ jsx9("span", {
-          className: "sr-only",
+          className: "c-action-menu__trigger-text",
           children: "Open more options"
         }),
         /* @__PURE__ */ jsx9("span", {
@@ -5645,7 +5645,7 @@ function DialogContent({ children, closable = true, type, className, container,
         ...delegated,
         children: [
           IconComponent && /* @__PURE__ */ jsx112("div", {
-            className: "flex h-[44px] w-[44px]  min-w-[44px] items-center justify-center rounded-lg bg-gray-50-900 p-[5px]",
+            className: "c-dialog-icon-wrapper",
             children: /* @__PURE__ */ jsx112(IconComponent, {
               className: "c-dialog-icon",
               width: 34,
@@ -5755,7 +5755,7 @@ function ConfirmDialog({
         }),
         content,
         (displayOk || okCancel || displayCancel) && /* @__PURE__ */ jsxs102("div", {
-          className: "mt-4 flex items-center justify-end gap-4",
+          className: "c-dialog-content__buttons",
           children: [
             cancelButton,
             okButton
@@ -6284,11 +6284,11 @@ var Slider = forwardRef111(({ className, transparentRange, ...delegated }, ref)
 import { jsx as jsx126, jsxs as jsxs108 } from "react/jsx-runtime";
 function StackIcon({ type, children, size = 18 }) {
   return /* @__PURE__ */ jsxs108("span", {
-    className: "relative leading-[0] inline-block",
+    className: "c-stack-icon",
     children: [
       type === "create" && /* @__PURE__ */ jsx126("span", {
         style: { width: size, height: size },
-        className: "absolute right-0 top-0 flex -translate-y-1/3 translate-x-1/3 items-center justify-center rounded border border-solid border-white bg-gray-50-900",
+        className: "c-stack-icon__icon",
         children: /* @__PURE__ */ jsx126(Icon.Add, {
           width: size - 4,
           height: size - 4
@@ -6343,7 +6343,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
             height: 12
           }),
           /* @__PURE__ */ jsx127("span", {
-            className: "sr-only",
+            className: "c-tag__remove-button-text",
             children: "Remove"
           })
         ]
@@ -8857,7 +8857,7 @@ function BlockFormatDropDown({
           "data-testid": "toggle-block-format-code",
           children: [
             /* @__PURE__ */ jsx141("i", {
-              className: `icon c-rte-icon-code border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "code" ? "selected" : ""}`
+              className: `icon c-rte-icon-code c-rte-toolbar__block-format__icon ${blockType === "code" ? "selected" : ""}`
             }),
             /* @__PURE__ */ jsx141("span", {
               className: `c-rte-toolbar__block-format__text ${blockType === "code" ? "selected" : ""}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.20.1",
+  "version": "1.21.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -60,35 +60,35 @@
     "@faker-js/faker": "7.6.0",
     "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
     "@mdx-js/react": "^2.2.1",
-    "@storybook/addon-actions": "7.0.12",
-    "@storybook/addon-backgrounds": "7.0.12",
+    "@storybook/addon-actions": "7.6.2",
+    "@storybook/addon-backgrounds": "7.6.2",
     "@storybook/addon-docs": "7.0.0-beta.14",
-    "@storybook/addon-essentials": "7.0.12",
-    "@storybook/addon-highlight": "7.0.12",
-    "@storybook/addon-interactions": "7.0.12",
-    "@storybook/addon-links": "7.0.12",
-    "@storybook/addon-measure": "7.0.12",
-    "@storybook/addon-outline": "7.0.12",
-    "@storybook/manager-api": "7.0.12",
-    "@storybook/react": "7.0.12",
-    "@storybook/react-vite": "7.0.12",
-    "@storybook/theming": "7.0.12",
-    "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "12.0.0",
-    "@testing-library/user-event": "14.4.3",
+    "@storybook/addon-essentials": "7.6.2",
+    "@storybook/addon-highlight": "7.6.2",
+    "@storybook/addon-interactions": "7.6.2",
+    "@storybook/addon-links": "7.6.2",
+    "@storybook/addon-measure": "7.6.2",
+    "@storybook/addon-outline": "7.6.2",
+    "@storybook/manager-api": "7.6.2",
+    "@storybook/react": "7.6.2",
+    "@storybook/react-vite": "7.6.2",
+    "@storybook/theming": "7.6.2",
+    "@testing-library/jest-dom": "6.1.5",
+    "@testing-library/react": "14.1.2",
+    "@testing-library/user-event": "14.5.1",
     "@types/prettier": "2.7.2",
     "@types/react": "17.0.1",
     "@types/react-dom": "17.0.1",
-    "@types/testing-library__jest-dom": "5.14.5",
     "@vitejs/plugin-react": "^3.0.1",
     "concurrently": "^7.6.0",
     "hex-rgb": "4.3.0",
     "postcss": "^8.4.21",
+    "postcss-import": "^15.1.0",
     "prettier": "2.8.4",
-    "storybook": "7.0.12",
+    "storybook": "7.6.2",
     "storybook-addon-designs": "^6.3.1",
     "storybook-dark-mode": "^2.0.5",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^3.3.5",
     "tsup": "^6.5.0",
     "typescript": "4.9.4",
     "vite": "4.3.4",
@@ -116,7 +116,7 @@
   ],
   "scripts": {
     "build:storybook": "storybook build -s public",
-    "build:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --minify",
+    "build:tw": "tailwindcss -c ./tailwind.config.cjs -i src/index.css -o dist/index.css",
     "build:tsup": "tsup src/index.ts --format esm,cjs --dts",
     "build": "pnpm build:tw && pnpm build:tsup",
     "dev:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --watch & tsup src/index.ts --format esm --dts --watch",

package/src/action-menu/action-menu.css

@@ -26,6 +26,10 @@
   &:not(:disabled):active {
     @apply scale-95 bg-purple-100-800;
   }
+
+  &__trigger-text {
+    @apply sr-only;
+  }
 }
 
 .c-action-menu-xs {

package/src/action-menu/action-menu.tsx

@@ -36,7 +36,7 @@ export function ActionMenu({ children, tabIndex, size, ...delegated }: ActionMen
         tabIndex={tabIndex}
         type="button"
       >
-        <span className="sr-only">Open more options</span>
+        <span className="c-action-menu__trigger-text">Open more options</span>
         <span className="c-action-menu-dot"></span>
         <span className="c-action-menu-dot"></span>
         <span className="c-action-menu-dot"></span>

package/src/button/Button.stories.tsx

@@ -30,7 +30,14 @@ export const AllButton: Story = {
   render: () => {
     return (
       <div>
-        <div className="grid grid-cols-6 justify-items-center gap-6">
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
+            gap: '1.5rem',
+            justifyItems: 'center',
+          }}
+        >
           {sizes.map(size =>
             variants.map(variant =>
               intent.map(intent => (

package/src/checkbox/checkbox.stories.tsx

@@ -36,9 +36,11 @@ export const Controlled: Story = {
 export const WithLabel: Story = {
   render: () => {
     return (
-      <div className="flex items-center space-x-2">
+      <div style={{ display: 'flex', alignItems: 'center' }}>
         <Checkbox id="with-label-c1" defaultChecked={true} />
-        <Label htmlFor="with-label-c1">Accept terms and conditions.</Label>
+        <Label style={{ marginLeft: '0.5rem' }} htmlFor="with-label-c1">
+          Accept terms and conditions.
+        </Label>
       </div>
     );
   },
@@ -47,14 +49,18 @@ export const WithLabel: Story = {
 export const Disabled: Story = {
   render: () => {
     return (
-      <div className="space-y-4">
-        <div className="flex items-center space-x-2">
+      <div>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
           <Checkbox id="disabled-c1" defaultChecked={true} disabled />
-          <Label htmlFor="disabled-c1">Accept terms and conditions.</Label>
+          <Label style={{ marginLeft: '0.5rem' }} htmlFor="disabled-c1">
+            Accept terms and conditions.
+          </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div style={{ display: 'flex', marginTop: '1rem', alignItems: 'center' }}>
           <Checkbox id="disabled-c2" defaultChecked={false} disabled />
-          <Label htmlFor="disabled-c2">Accept terms and conditions.</Label>
+          <Label style={{ marginLeft: '0.5rem' }} htmlFor="disabled-c2">
+            Accept terms and conditions.
+          </Label>
         </div>
       </div>
     );

package/src/colors/Colors.stories.tsx

@@ -1,4 +1,3 @@
-import { cx } from 'class-variance-authority';
 import { useDarkMode } from 'storybook-dark-mode';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -73,8 +72,8 @@ function ColorItem({ colorName, color }: { colorName: ColorName; color: Color })
 
   return (
     <div>
-      <h2 className="text-gray">{colorName}</h2>
-      <div className="grid grid-cols-10">
+      <h2 style={{ color: 'rgb(var(--c-color-gray))' }}>{colorName}</h2>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(10, minmax(0, 1fr))' }}>
         {shades.map(shade => {
           // @ts-expect-error
           const def = color[shade] as string;
@@ -87,20 +86,50 @@ function ColorItem({ colorName, color }: { colorName: ColorName; color: Color })
           return (
             <div>
               <div
-                style={{ background: def, color: textColor }}
-                className={cx('relative flex h-24 flex-1 items-center justify-center')}
+                style={{
+                  background: def,
+                  color: textColor,
+                  display: 'flex',
+                  position: 'relative',
+                  flex: '1 1 0%',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  height: '6rem',
+                }}
               >
                 {!isDefault ? null : (
                   <div
-                    className="h-[8px] w-[8px] rounded"
                     style={{
+                      width: 8,
+                      height: 8,
                       backgroundColor: 'currentColor',
+                      borderRadius: '0.25rem',
                     }}
                   />
                 )}
-                <div className="absolute top-2 left-2 right-2 text-center text-sm">{shade}</div>
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: '0.5rem',
+                    right: '0.5rem',
+                    left: '0.5rem',
+                    fontSize: '0.875rem',
+                    lineHeight: '1.25rem',
+                    textAlign: 'center',
+                  }}
+                >
+                  {shade}
+                </div>
               </div>
-              <div className={cx('p-4 text-center text-sm text-gray')}>
+              <div
+                style={{
+                  padding: '1rem',
+                  fontSize: '0.875rem',
+                  lineHeight: '1.25rem',
+                  textAlign: 'center',
+                  color: 'rgb(var(--c-color-gray))',
+                }}
+              >
                 {applicatedAt.map(a => (
                   <div key={a.application}>{a.application}</div>
                 ))}

package/src/dialog/Dialog.stories.tsx

@@ -15,7 +15,7 @@ export default meta;
 type Story = StoryObj<typeof Dialog>;
 
 const Lorem = () => (
-  <p className="leading-6">
+  <p style={{ lineHeight: '1.5rem' }}>
     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis neque id, blanditiis exercitationem doloremque
     quam ab minima architecto culpa.
   </p>
@@ -30,7 +30,7 @@ export const Component: Story = {
       <Dialog.Content>
         <Dialog.Title>This is a normal Dialog</Dialog.Title>
         <Dialog.Description>That is described in a declarative way</Dialog.Description>
-        <div className="flex items-center justify-between">
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           Here will go the main content
           <ActionMenu>
             <ActionMenu.Item onSelect={() => console.warn('Download')}>Download</ActionMenu.Item>
@@ -58,7 +58,7 @@ export const ComponentWithDangerAction: Story = {
             <Lorem />
           </Dialog.Description>
 
-          <div className="mt-8 flex justify-end gap-4">
+          <div style={{ display: 'flex', marginTop: '2rem', gap: '1rem', justifyContent: 'flex-end' }}>
             <Button>Cancel</Button>
             <Button intent="danger">Delete</Button>
           </div>
@@ -76,7 +76,7 @@ export const ShowConfirm: Story = {
         title: 'We need your confirmation',
         description: 'In order to proceed to you account we need your confirmation',
         content: (
-          <p className="my-6">
+          <p style={{ marginTop: '1.5rem', marginBottom: '1.5rem' }}>
             We really like cookies and our cookies is what allow us to provide you with an awesome user experience. Do
             you allow us to set some cookies for you?
           </p>

package/src/dialog/confirm-dialog.tsx

@@ -59,7 +59,7 @@ export function ConfirmDialog({
         {description && <Dialog.Description>{description}</Dialog.Description>}
         {content}
         {(displayOk || okCancel || displayCancel) && (
-          <div className="mt-4 flex items-center justify-end gap-4">
+          <div className="c-dialog-content__buttons">
             {cancelButton}
             {okButton}
           </div>

package/src/dialog/dialog.css

@@ -6,6 +6,10 @@
     @apply fixed inset-0 z-[100] bg-overlay;
   }
 
+  &-icon-wrapper {
+    @apply flex h-[44px] w-[44px]  min-w-[44px] items-center justify-center rounded-lg bg-gray-50-900 p-[5px];
+  }
+
   &-icon {
     @apply my-1 shrink-0;
   }
@@ -25,4 +29,10 @@
   &-with-icon {
     @apply flex items-start gap-6 pl-6;
   }
+
+  &-content {
+    &__buttons {
+      @apply mt-4 flex items-center justify-end gap-4;
+    }
+  }
 }

package/src/dialog/dialog.tsx

@@ -41,7 +41,7 @@ function DialogContent({ children, closable = true, type, className, container,
       <DialogPrimitive.Overlay className="c-dialog-overlay" />
       <DialogPrimitive.Content className={dialogContentStyles({ withIcon, class: className })} {...delegated}>
         {IconComponent && (
-          <div className="flex h-[44px] w-[44px]  min-w-[44px] items-center justify-center rounded-lg bg-gray-50-900 p-[5px]">
+          <div className="c-dialog-icon-wrapper">
             <IconComponent className="c-dialog-icon" width={34} height={34} />
           </div>
         )}

package/src/dropdown-menu/DropdownMenu.stories.tsx

@@ -14,15 +14,15 @@ function ContentWithIcon() {
     <>
       <DropdownMenu.Label>View</DropdownMenu.Label>
       <DropdownMenu.Item>
-        <div className="flex items-center font-sans">
+        <div style={{ display: 'flex', alignItems: 'center' }}>
           <Icon.Glasses width={24} height={24} />
-          <span className="px-3">Nerdy</span>
+          <span style={{ padding: '0 12px' }}>Nerdy</span>
         </div>
       </DropdownMenu.Item>
       <DropdownMenu.Item>
-        <div className="flex items-center">
+        <div style={{ display: 'flex', alignItems: 'center' }}>
           <Icon.GraphQL width={24} height={24} />
-          <span className="px-3 font-sans">Developer</span>
+          <span style={{ padding: '0 12px' }}>Developer</span>
         </div>
       </DropdownMenu.Item>
     </>

package/src/icon-button/IconButton.stories.tsx

@@ -19,9 +19,16 @@ export const AllButton: Story = {
   name: 'All Buttons',
   render: () => {
     return (
-      <div className="grid grid-cols-5 justify-items-center gap-6">
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(5, minmax(0, 1fr))',
+          gap: '1.5rem',
+          justifyItems: 'center',
+        }}
+      >
         {sizes.map(size => (
-          <Card>
+          <Card style={{ display: 'flex', alignItems: 'center' }}>
             <IconButton size={size}>
               <Icon.Cancel width={16} height={16} />
             </IconButton>

package/src/iconography/Icon.stories.tsx

@@ -20,14 +20,15 @@ export const AllIcons: Story = {
   render: () => {
     return (
       <div>
-        <div className="flex  flex-wrap gap-6">
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem' }}>
           {Object.keys(Icon).map(iconName => {
             // @ts-expect-error
             const Cmp = Icon[iconName];
             const cmpString = `<Icon.${iconName} />`;
             return (
               <div
-                className="w-36 h-36 cursor-pointer text-center active:scale-95"
+                className="copy-icon-button"
+                style={{ width: '9rem', height: '9rem', textAlign: 'center', cursor: 'pointer' }}
                 onClick={() => {
                   const type = 'text/plain';
                   const blob = new Blob([cmpString], { type });
@@ -37,7 +38,9 @@ export const AllIcons: Story = {
                 <Card title={cmpString}>
                   <Cmp width={44} height={44} />
                 </Card>
-                <div className="mt-2 whitespace-nowrap text-xs text-gray-800-100">{cmpString}</div>
+                <div style={{ marginTop: '0.5rem', fontSize: '0.75rem', lineHeight: '1rem', whiteSpace: 'nowrap' }}>
+                  {cmpString}
+                </div>
               </div>
             );
           })}

package/src/index.css

@@ -1,14 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  body {
-    @apply font-sans text-gray;
-  }
-  input,
-  textarea,
-  button {
-    @apply font-sans text-gray;
-  }
-}

package/src/input-with-label/InputWithLabel.stories.tsx

@@ -64,7 +64,7 @@ export const WithAppend: Story = {
     placeholder: 'Luke Skywalker',
     label: 'Name',
     variant: 'elevated',
-    append: <div className="self-end">🍩</div>,
+    append: <div style={{ alignSelf: 'flex-end' }}>🍩</div>,
     id: 'my-id',
   },
 };

package/src/popover/popover.stories.tsx

@@ -28,7 +28,7 @@ type Story = StoryObj<typeof Popover>;
 export const SimpleTemplate: Story = {
   name: 'Simple Template',
   render: args => (
-    <div className="flex w-1/2 justify-center pt-14">
+    <div style={{ display: 'flex', paddingTop: '3.5rem', justifyContent: 'center', width: '50%' }}>
       <Popover {...args} content="Content goes here">
         <Icon.Customers width={32} height={32} />
       </Popover>
@@ -39,7 +39,7 @@ export const SimpleTemplate: Story = {
 export const WithCustomCloseButton: Story = {
   name: 'With custom Close button',
   render: () => (
-    <div className="flex w-1/2 justify-center pt-14">
+    <div style={{ display: 'flex', paddingTop: '3.5rem', justifyContent: 'center', width: '50%' }}>
       <Popover content="Content goes here" side="left" closeButton={<button>close</button>}>
         <Icon.Customers width={32} height={32} />
       </Popover>

package/src/progress/progress.css

@@ -3,5 +3,5 @@
 }
 
 .c-progress-indicator {
-  @apply h-full w-full transform bg-cyan-300-600 duration-500 ease-linear;
+  @apply h-full w-full bg-cyan-300-600 duration-500 ease-linear;
 }