@conveyorhq/arrow-ds 2.0.0-beta.7 → 2.0.0-beta.9

package/src/storybook-components/Story.tsx

@@ -2,14 +2,26 @@ import React from "react";
 import classNames from "classnames";
 import { Box, BoxProps } from "../components/Box";
 import { Heading } from "../components/Heading";
+import { ComponentStatus, COMPONENT_STATUS } from "./ComponentStatus";
 
 interface StoryProps extends BoxProps {
   title?: string;
+  deprecated?: boolean;
 }
 
-const Story = ({ className, title, children }: StoryProps) => (
+const Story = ({
+  className,
+  title,
+  children,
+  deprecated = false,
+}: StoryProps) => (
   <Box className={classNames("p-6 relative", className)}>
     {title && <Heading.H1 className="mb-6">{title}</Heading.H1>}
+    {deprecated && (
+      <Box className="mb-6">
+        <ComponentStatus status={COMPONENT_STATUS.DEPRECATED} />
+      </Box>
+    )}
 
     {children}
   </Box>

package/src/style-dictionary/dist/tokens.css

@@ -0,0 +1,378 @@
+/**
+ * This tokens file was automatically generated by Style Dictionary
+ * Please do not edit this file directly; token definitions can be found in style-dictionary.config.js
+ */
+
+:root {
+  --border-radius-none: 0;
+  --border-radius-px: 1px;
+  --border-radius-sm: 2px;
+  --border-radius-md: 3px;
+  --border-radius-default: 4px;
+  --border-radius-lg: 8px;
+  --border-radius-full: 9999px;
+  --border-width-0: 0;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+  --border-width-8: 8px;
+  --border-width-default: 1px;
+  --color-lighten-100: rgba(255, 255, 255, 0.04);
+  --color-lighten-200: rgba(255, 255, 255, 0.08);
+  --color-lighten-300: rgba(255, 255, 255, 0.12);
+  --color-gray-100: #f9fbfc;
+  --color-gray-200: #f4f7f9;
+  --color-gray-300: #edf3f7;
+  --color-gray-400: #dee7ee;
+  --color-gray-500: #b9c8d2;
+  --color-gray-600: #86a3b5;
+  --color-gray-700: #47687d;
+  --color-gray-800: #204156;
+  --color-gray-900: #001b28;
+  --color-brand-green-200: #7de5ca;
+  --color-brand-green-300: #5cd8b7;
+  --color-brand-green-400: #33c69f;
+  --color-brand-green-500: #20b08a;
+  --color-brand-green-600: #12926f;
+  --color-blue-0: #e6f3ff;
+  --color-blue-100: #c2e2ff;
+  --color-blue-200: #76baf9;
+  --color-blue-300: #3e9ef5;
+  --color-blue-400: #0d7de4;
+  --color-blue-500: #0668ca;
+  --color-blue-600: #0052b1;
+  --color-green-100: #e8f5ee;
+  --color-green-200: #a1ddae;
+  --color-green-300: #7bc88c;
+  --color-green-400: #54af68;
+  --color-green-500: #3c9f52;
+  --color-green-600: #29853d;
+  --color-gold-100: #fff4de;
+  --color-gold-200: #ffd883;
+  --color-gold-300: #ffcc5a;
+  --color-gold-400: #fdb515;
+  --color-gold-500: #f0a600;
+  --color-gold-600: #dc9801;
+  --color-red-100: #fdeeee;
+  --color-red-200: #ffa7a1;
+  --color-red-300: #fa7d76;
+  --color-red-400: #f25d54;
+  --color-red-500: #e4473e;
+  --color-red-600: #d93329;
+  --color-orange-200: #ffc3a1;
+  --color-orange-300: #ffaa7a;
+  --color-orange-400: #f38f56;
+  --color-orange-500: #ed7b3b;
+  --color-orange-600: #e36823;
+  --color-pink-200: #daccd7;
+  --color-pink-300: #d3b8cd;
+  --color-pink-400: #cca8c4;
+  --color-pink-500: #c297b9;
+  --color-pink-600: #b881ac;
+  --color-cyan-200: #a1d8f1;
+  --color-cyan-300: #7dc3e4;
+  --color-cyan-400: #61accf;
+  --color-cyan-500: #3e9ecb;
+  --color-cyan-600: #2488b6;
+  --color-purple-200: #c8b3e8;
+  --color-purple-300: #a68ad2;
+  --color-purple-400: #8969bd;
+  --color-purple-500: #7757ad;
+  --color-purple-600: #604194;
+  --color-white: #ffffff;
+  --color-black: #000b11;
+  --color-brand-black: #132333;
+  --color-screen: rgba(0, 0, 0, 0.25);
+  --color-success: #54af68;
+  --color-failure: #f25d54;
+  --color-caution: #fdb515;
+  --color-border: #dee7ee;
+  --color-placeholder: #86a3b5;
+  --color-link: #0d7de4;
+  --font-size-h1: 26px;
+  --font-size-h2: 20px;
+  --font-size-h3: 16px;
+  --font-size-h4: 14px;
+  --font-size-h5: 12px;
+  --font-size-h6: 11px;
+  --font-size-body-sm: 12px;
+  --font-size-body: 14px;
+  --font-size-body-lg: 16px;
+  --font-size-icon: 13px;
+  --font-size-icon-sm: 11px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 600;
+  --height-0: 0;
+  --height-1: 4px;
+  --height-2: 8px;
+  --height-3: 12px;
+  --height-4: 16px;
+  --height-5: 20px;
+  --height-6: 24px;
+  --height-7: 28px;
+  --height-8: 32px;
+  --height-9: 36px;
+  --height-10: 40px;
+  --height-11: 44px;
+  --height-12: 48px;
+  --height-13: 52px;
+  --height-14: 56px;
+  --height-15: 60px;
+  --height-16: 64px;
+  --height-17: 68px;
+  --height-18: 72px;
+  --height-19: 76px;
+  --height-20: 80px;
+  --height-21: 84px;
+  --height-22: 88px;
+  --height-23: 92px;
+  --height-24: 96px;
+  --height-25: 100px;
+  --height-26: 104px;
+  --height-27: 108px;
+  --height-28: 112px;
+  --height-29: 116px;
+  --height-30: 120px;
+  --height-31: 124px;
+  --height-32: 128px;
+  --height-33: 132px;
+  --height-34: 136px;
+  --height-35: 140px;
+  --height-36: 144px;
+  --height-37: 148px;
+  --height-38: 152px;
+  --height-39: 156px;
+  --height-40: 160px;
+  --height-41: 164px;
+  --height-42: 168px;
+  --height-43: 172px;
+  --height-44: 176px;
+  --height-45: 180px;
+  --height-46: 184px;
+  --height-47: 188px;
+  --height-48: 192px;
+  --height-49: 196px;
+  --height-50: 200px;
+  --height-51: 204px;
+  --height-52: 208px;
+  --height-53: 212px;
+  --height-54: 216px;
+  --height-55: 220px;
+  --height-56: 224px;
+  --height-57: 228px;
+  --height-58: 232px;
+  --height-59: 236px;
+  --height-60: 240px;
+  --height-61: 244px;
+  --height-62: 248px;
+  --height-63: 252px;
+  --height-64: 256px;
+  --height-auto: auto;
+  --height-px: 1px;
+  --height-full: 100%;
+  --height-screen: 100vh;
+  --height-appbar: 48px;
+  --height-cell: 34px;
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-loose: 2;
+  --screen-width-sm: 576px;
+  --screen-width-md: 768px;
+  --screen-width-lg: 992px;
+  --screen-width-xl: 1200px;
+  --shadow-default: 0 2px 4px 0 rgba(0,0,0,0.10);
+  --shadow-up: 0 -2px 4px 0 rgba(0,0,0,0.10);
+  --shadow-md: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);
+  --shadow-lg: 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);
+  --shadow-glow: rgba(7,114,239,0.2) 0 0 1rem;
+  --shadow-none: none;
+  --shadow-focus: rgba(7, 114, 239, 0.2) 0 0 1px 3px;
+  --shadow-focus-inside: rgba(7, 114, 239, 0.2) 0 0 1px 3px inset;
+  --shadow-focus-brand: rgba(125, 229, 202, 0.2) 0 0 1px 3px;
+  --shadow-popover: 0 0 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.1);
+  --shadow-button-primary: 0 4px 8px rgba(255, 255, 255, 0.1) inset, 0 2px 5px rgba(0, 0, 0, 0.1);
+  --shadow-button-secondary: 0 1px 3px rgba(0, 0, 0, 0.05);
+  --shadow-paper: 0 0 3px rgba(0,0,0,0.1), 9px 9px rgba(0,0,0,0.04);
+  --shadow-tile: 0 10px 20px rgba(0, 0, 0, 0.1), 0 0 3px rgba(0, 0, 0, 0.1);
+  --spacing-0: 0;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-11: 44px;
+  --spacing-12: 48px;
+  --spacing-13: 52px;
+  --spacing-14: 56px;
+  --spacing-15: 60px;
+  --spacing-16: 64px;
+  --spacing-17: 68px;
+  --spacing-18: 72px;
+  --spacing-19: 76px;
+  --spacing-20: 80px;
+  --spacing-21: 84px;
+  --spacing-22: 88px;
+  --spacing-23: 92px;
+  --spacing-24: 96px;
+  --spacing-25: 100px;
+  --spacing-26: 104px;
+  --spacing-27: 108px;
+  --spacing-28: 112px;
+  --spacing-29: 116px;
+  --spacing-30: 120px;
+  --spacing-31: 124px;
+  --spacing-32: 128px;
+  --spacing-33: 132px;
+  --spacing-34: 136px;
+  --spacing-35: 140px;
+  --spacing-36: 144px;
+  --spacing-37: 148px;
+  --spacing-38: 152px;
+  --spacing-39: 156px;
+  --spacing-40: 160px;
+  --spacing-41: 164px;
+  --spacing-42: 168px;
+  --spacing-43: 172px;
+  --spacing-44: 176px;
+  --spacing-45: 180px;
+  --spacing-46: 184px;
+  --spacing-47: 188px;
+  --spacing-48: 192px;
+  --spacing-49: 196px;
+  --spacing-50: 200px;
+  --spacing-51: 204px;
+  --spacing-52: 208px;
+  --spacing-53: 212px;
+  --spacing-54: 216px;
+  --spacing-55: 220px;
+  --spacing-56: 224px;
+  --spacing-57: 228px;
+  --spacing-58: 232px;
+  --spacing-59: 236px;
+  --spacing-60: 240px;
+  --spacing-61: 244px;
+  --spacing-62: 248px;
+  --spacing-63: 252px;
+  --spacing-64: 256px;
+  --tracking-tight: -0.05em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --type-sans: 'Neue Montreal', system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --type-serif: 'Copernicus', serif;
+  --type-mono: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  --width-0: 0;
+  --width-1: 4px;
+  --width-2: 8px;
+  --width-3: 12px;
+  --width-4: 16px;
+  --width-5: 20px;
+  --width-6: 24px;
+  --width-7: 28px;
+  --width-8: 32px;
+  --width-9: 36px;
+  --width-10: 40px;
+  --width-11: 44px;
+  --width-12: 48px;
+  --width-13: 52px;
+  --width-14: 56px;
+  --width-15: 60px;
+  --width-16: 64px;
+  --width-17: 68px;
+  --width-18: 72px;
+  --width-19: 76px;
+  --width-20: 80px;
+  --width-21: 84px;
+  --width-22: 88px;
+  --width-23: 92px;
+  --width-24: 96px;
+  --width-25: 100px;
+  --width-26: 104px;
+  --width-27: 108px;
+  --width-28: 112px;
+  --width-29: 116px;
+  --width-30: 120px;
+  --width-31: 124px;
+  --width-32: 128px;
+  --width-33: 132px;
+  --width-34: 136px;
+  --width-35: 140px;
+  --width-36: 144px;
+  --width-37: 148px;
+  --width-38: 152px;
+  --width-39: 156px;
+  --width-40: 160px;
+  --width-41: 164px;
+  --width-42: 168px;
+  --width-43: 172px;
+  --width-44: 176px;
+  --width-45: 180px;
+  --width-46: 184px;
+  --width-47: 188px;
+  --width-48: 192px;
+  --width-49: 196px;
+  --width-50: 200px;
+  --width-51: 204px;
+  --width-52: 208px;
+  --width-53: 212px;
+  --width-54: 216px;
+  --width-55: 220px;
+  --width-56: 224px;
+  --width-57: 228px;
+  --width-58: 232px;
+  --width-59: 236px;
+  --width-60: 240px;
+  --width-61: 244px;
+  --width-62: 248px;
+  --width-63: 252px;
+  --width-64: 256px;
+  --width-one-half: 50%;
+  --width-one-third: 33.33333%;
+  --width-two-thirds: 66.66667%;
+  --width-one-quarter: 25%;
+  --width-three-quarters: 75%;
+  --width-one-fifth: 20%;
+  --width-two-fifths: 40%;
+  --width-three-fifths: 60%;
+  --width-four-fifths: 80%;
+  --width-one-sixth: 16.66667%;
+  --width-five-sixths: 83.33333%;
+  --width-auto: auto;
+  --width-px: 1px;
+  --width-full: 100%;
+  --width-screen: 100vw;
+  --width-max-content: max-content;
+  --width-xs: 20rem;
+  --width-sm: 30rem;
+  --width-md: 40rem;
+  --width-lg: 50rem;
+  --width-xl: 60rem;
+  --width-two-xl: 70rem;
+  --width-three-xl: 80rem;
+  --width-four-xl: 90rem;
+  --width-five-xl: 100rem;
+  --z-index-0: 0;
+  --z-index-10: 10;
+  --z-index-20: 20;
+  --z-index-30: 30;
+  --z-index-40: 40;
+  --z-index-50: 50;
+  --z-index-auto: auto;
+  --z-index-below: -1;
+  --z-index-default: 1;
+  --z-index-popup: 400;
+  --z-index-dialog: 500;
+  --z-index-dropdown: 600;
+  --z-index-overlay: 700;
+  --z-index-menu: 800;
+  --z-index-modal: 900;
+  --z-index-toast: 1000;
+  --z-index-max: 2147483647;
+}