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

package/src/style-dictionary/src/tracking.js

@@ -0,0 +1,7 @@
+module.exports = {
+  tracking: {
+    tight: { value: "-0.05em" },
+    normal: { value: "0" },
+    wide: { value: "0.05em" },
+  },
+};

package/src/style-dictionary/src/type.js

@@ -0,0 +1,34 @@
+module.exports = {
+  type: {
+    sans: {
+      value: [
+        "'Neue Montreal'",
+        "system-ui",
+        "BlinkMacSystemFont",
+        "-apple-system",
+        "'Segoe UI'",
+        "'Roboto'",
+        "'Oxygen'",
+        "'Ubuntu'",
+        "'Cantarell'",
+        "'Fira Sans'",
+        "'Droid Sans'",
+        "'Helvetica Neue'",
+        "sans-serif",
+      ].join(", "),
+    },
+    serif: {
+      value: ["'Copernicus'", "serif"].join(", "),
+    },
+    mono: {
+      value: [
+        "'Menlo'",
+        "'Monaco'",
+        "'Consolas'",
+        "'Liberation Mono'",
+        "'Courier New'",
+        "monospace",
+      ].join(", "),
+    },
+  },
+};

package/src/style-dictionary/src/width.js

@@ -0,0 +1,32 @@
+const spacing = require("./spacing").spacing;
+
+module.exports = {
+  width: {
+    ...spacing,
+    "one-half": { value: "50%", tailwindId: "1/2" },
+    "one-third": { value: "33.33333%", tailwindId: "1/3" },
+    "two-thirds": { value: "66.66667%", tailwindId: "2/3" },
+    "one-quarter": { value: "25%", tailwindId: "1/4" },
+    "three-quarters": { value: "75%", tailwindId: "3/4" },
+    "one-fifth": { value: "20%", tailwindId: "1/5" },
+    "two-fifths": { value: "40%", tailwindId: "2/5" },
+    "three-fifths": { value: "60%", tailwindId: "3/5" },
+    "four-fifths": { value: "80%", tailwindId: "4/5" },
+    "one-sixth": { value: "16.66667%", tailwindId: "1/6" },
+    "five-sixths": { value: "83.33333%", tailwindId: "5/6" },
+    auto: { value: "auto" },
+    px: { value: "1px" },
+    full: { value: "100%" },
+    screen: { value: "100vw" },
+    "max-content": { value: "max-content" },
+    xs: { value: "20rem" },
+    sm: { value: "30rem" },
+    md: { value: "40rem" },
+    lg: { value: "50rem" },
+    xl: { value: "60rem" },
+    "two-xl": { value: "70rem", tailwindId: "2xl" },
+    "three-xl": { value: "80rem", tailwindId: "3xl" },
+    "four-xl": { value: "90rem", tailwindId: "4xl" },
+    "five-xl": { value: "100rem", tailwindId: "5xl" },
+  },
+};

package/src/style-dictionary/src/z-index.js

@@ -0,0 +1,21 @@
+module.exports = {
+  zIndex: {
+    auto: { value: "auto" },
+    "0": { value: 0 },
+    "10": { value: 10 },
+    "20": { value: 20 },
+    "30": { value: 30 },
+    "40": { value: 40 },
+    "50": { value: 50 },
+    below: { value: -1 },
+    default: { value: 1 },
+    popup: { value: 400 },
+    dialog: { value: 500 },
+    dropdown: { value: 600 },
+    overlay: { value: 700 },
+    menu: { value: 800 },
+    modal: { value: 900 },
+    toast: { value: 1000 },
+    max: { value: 2147483647 },
+  },
+};

package/src/style-dictionary/tailwind.config.js

@@ -0,0 +1,87 @@
+const {
+  borderRadius,
+  borderWidth,
+  color,
+  fontSize,
+  fontWeight,
+  height,
+  leading,
+  screenWidth,
+  shadow,
+  spacing,
+  tracking,
+  type,
+  width,
+  zIndex,
+} = require("./dist/tokens.module");
+
+const colors = {
+  ...color,
+  current: "currentColor",
+  transparent: "transparent",
+};
+
+const borderColor = {
+  DEFAULT: color.gray[400],
+  ...colors,
+};
+
+const margin = {
+  ...spacing,
+  auto: "auto",
+  px: "1px",
+};
+
+const padding = {
+  ...spacing,
+  px: "1px",
+};
+
+const willChange = {
+  auto: "auto",
+  scroll: "scroll-position",
+  contents: "contents",
+  opacity: "opacity",
+  transform: "transform",
+};
+
+const extend = {
+  transitionProperty: {
+    input: ["border-color", "box-shadow", "color"],
+  },
+};
+
+module.exports = {
+  config: {
+    content: [],
+    theme: {
+      backgroundColor: colors,
+      borderColor,
+      borderRadius,
+      borderWidth,
+      boxShadow: shadow,
+      colors,
+      fontFamily: type,
+      fontSize,
+      fontWeight,
+      gap: spacing,
+      height,
+      letterSpacing: tracking,
+      lineHeight: leading,
+      margin,
+      maxHeight: height,
+      maxWidth: width,
+      minHeight: height,
+      minWidth: width,
+      padding,
+      screens: screenWidth,
+      spacing,
+      textColor: colors,
+      width,
+      willChange,
+      zIndex,
+      extend,
+    },
+    plugins: [],
+  },
+};

package/src/tokens/borders.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/border-width
+ */
 export const borderWidth = {
   DEFAULT: "1px",
   "0": "0",
@@ -6,6 +9,9 @@ export const borderWidth = {
   "8": "8px",
 };
 
+/**
+ * @deprecated Please use style-dictionary/border-radius
+ */
 export const borderRadius = {
   none: "0",
   px: "1px",

package/src/tokens/box-shadow.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/shadow
+ */
 export const boxShadow = {
   DEFAULT: "0 2px 4px 0 rgba(0,0,0,0.10)",
   up: "0 -2px 4px 0 rgba(0,0,0,0.10)",
@@ -14,4 +17,5 @@ export const boxShadow = {
     "0 4px 8px rgba(255, 255, 255, 0.1) inset, 0 2px 5px rgba(0, 0, 0, 0.1)",
   buttonSecondary: "0 1px 3px rgba(0, 0, 0, 0.05)",
   paper: "0 0 3px rgba(0,0,0,0.1), 9px 9px rgba(0,0,0,0.04)",
+  tile: "0 10px 20px rgba(0, 0, 0, 0.1), 0 0 3px rgba(0, 0, 0, 0.1)",
 };

package/src/tokens/colors.ts

@@ -106,6 +106,9 @@ const functionalColors = {
   link: blue["400"],
 };
 
+/**
+ * @deprecated Please use style-dictionary/color
+ */
 export const colors = {
   transparent: "transparent",
   white: "#fff",
@@ -126,6 +129,9 @@ export const colors = {
   ...functionalColors,
 };
 
+/**
+ * @deprecated Please use style-dictionary/color
+ */
 export const borderColors = {
   DEFAULT: gray["400"],
   ...colors,

package/src/tokens/font-family.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/type
+ */
 export const fontFamily = {
   sans: [
     "Neue Montreal",
@@ -14,7 +17,7 @@ export const fontFamily = {
     "Helvetica Neue",
     "sans-serif",
   ],
-  serif: ["IBM Plex Serif", "serif"],
+  serif: ["Copernicus", "serif"],
   mono: [
     "Menlo",
     "Monaco",

package/src/tokens/font-size.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/font-size
+ */
 export const fontSize = {
   h1: "26px",
   h2: "20px",

package/src/tokens/font-weight.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/font-weight
+ */
 export const fontWeight = {
   regular: 400,
   medium: 500,

package/src/tokens/height.ts

@@ -1,52 +1,14 @@
+import { positiveScale } from "./sizing-scale";
+
+/**
+ * @deprecated Please use style-dictionary/height
+ */
 export const height = {
+  ...positiveScale,
   auto: "auto",
   px: "1px",
-  "0": "0",
-  "1": "4px",
-  "2": "8px",
-  "3": "12px",
-  "4": "16px",
-  "5": "20px",
-  "6": "24px",
-  "7": "28px",
-  "8": "32px",
-  "9": "36px",
-  "10": "40px",
-  "12": "48px",
-  "14": "56px",
-  "15": "60px",
-  "16": "64px",
-  "18": "72px",
-  "20": "80px",
-  "22": "88px",
-  "24": "96px",
-  "26": "104px",
-  "28": "112px",
-  "30": "120px",
-  "32": "128px",
-  "34": "136px",
-  "36": "144px",
-  "38": "152px",
-  "40": "160px",
-  "42": "168px",
-  "44": "176px",
-  "46": "184px",
-  "48": "192px",
-  "50": "200px",
-  "52": "208px",
-  "54": "216px",
-  "56": "224px",
-  "58": "232px",
-  "60": "240px",
-  "62": "248px",
-  "64": "256px",
   full: "100%",
   screen: "100vh",
   appbar: "48px",
   cell: "34px",
 };
-
-export const maxHeight = {
-  full: "100%",
-  screen: "100vh",
-};

package/src/tokens/index.ts

@@ -4,7 +4,7 @@ import { colors, borderColors } from "./colors";
 import { fontFamily } from "./font-family";
 import { fontSize } from "./font-size";
 import { fontWeight } from "./font-weight";
-import { height, maxHeight } from "./height";
+import { height } from "./height";
 import { letterSpacing } from "./letter-spacing";
 import { lineHeight } from "./line-height";
 import { margin } from "./margin";
@@ -14,6 +14,9 @@ import { maxWidth, minWidth, width } from "./width";
 import { willChange } from "./will-change";
 import { zIndex } from "./z-index";
 
+/**
+ * @deprecated Please use the tokens from style-dictionary instead
+ */
 export const tokens = {
   borderColors,
   borderRadius,
@@ -27,7 +30,7 @@ export const tokens = {
   letterSpacing,
   lineHeight,
   margin,
-  maxHeight,
+  maxHeight: height,
   maxWidth,
   minWidth,
   padding,
@@ -37,8 +40,6 @@ export const tokens = {
   zIndex,
 };
 
-// Deprecated: tokens should be exported as part of the tokens object
-// These exports should be removed in arrow-ds 2.0
 export * from "./borders";
 export * from "./colors";
 export * from "./height";

package/src/tokens/letter-spacing.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/tracking
+ */
 export const letterSpacing = {
   tight: "-0.05em",
   normal: "0",

package/src/tokens/line-height.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/leading
+ */
 export const lineHeight = {
   none: 1,
   tight: 1.25,

package/src/tokens/margin.ts

@@ -1,52 +1,12 @@
+import { positiveScale, negativeScale } from "./sizing-scale";
+
+/**
+ * @deprecated Please use style-dictionary/spacing
+ */
 export const margin = {
+  ...positiveScale,
+  ...negativeScale,
   auto: "auto",
-  "0": "0",
   px: "1px",
-  "1": "4px",
-  "2": "8px",
-  "3": "12px",
-  "4": "16px",
-  "5": "20px",
-  "6": "24px",
-  "7": "28px",
-  "8": "32px",
-  "9": "36px",
-  "10": "40px",
-  "12": "48px",
-  "14": "56px",
-  "16": "64px",
-  "18": "72px",
-  "20": "80px",
-  "22": "88px",
-  "24": "96px",
-  "26": "104px",
-  "28": "112px",
-  "30": "120px",
-  "32": "128px",
-  "48": "192px",
-  "64": "256px",
   "-px": "-1px",
-  [`-1`]: "-4px",
-  [`-2`]: "-8px",
-  [`-3`]: "-12px",
-  [`-4`]: "-16px",
-  [`-5`]: "-20px",
-  [`-6`]: "-24px",
-  [`-7`]: "-28px",
-  [`-8`]: "-32px",
-  [`-9`]: "-36px",
-  [`-10`]: "-40px",
-  [`-12`]: "-48px",
-  [`-14`]: "-56px",
-  [`-16`]: "-64px",
-  [`-18`]: "-72px",
-  [`-20`]: "-80px",
-  [`-22`]: "-88px",
-  [`-24`]: "-96px",
-  [`-26`]: "-104px",
-  [`-28`]: "-112px",
-  [`-30`]: "-120px",
-  [`-32`]: "-128px",
-  [`-48`]: "-192px",
-  [`-64`]: "-256px",
 };

package/src/tokens/padding.ts

@@ -1,27 +1,9 @@
+import { positiveScale } from "./sizing-scale";
+
+/**
+ * @deprecated Please use style-dictionary/spacing
+ */
 export const padding = {
+  ...positiveScale,
   px: "1px",
-  "0": "0",
-  "1": "4px",
-  "2": "8px",
-  "3": "12px",
-  "4": "16px",
-  "5": "20px",
-  "6": "24px",
-  "7": "28px",
-  "8": "32px",
-  "9": "36px",
-  "10": "40px",
-  "12": "48px",
-  "14": "56px",
-  "16": "64px",
-  "18": "72px",
-  "20": "80px",
-  "22": "88px",
-  "24": "96px",
-  "26": "104px",
-  "28": "112px",
-  "30": "120px",
-  "32": "128px",
-  "48": "192px",
-  "64": "256px",
 };

package/src/tokens/screens.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated Please use style-dictionary/screen-width
+ */
 export const screens = {
   sm: "576px",
   md: "768px",

package/src/tokens/sizing-scale.ts

@@ -0,0 +1,140 @@
+/**
+ * @deprecated Please use style-dictionary/spacing
+ */
+export const positiveScale = {
+  0: "0",
+  1: "4px",
+  2: "8px",
+  3: "12px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  7: "28px",
+  8: "32px",
+  9: "36px",
+  10: "40px",
+  11: "44px",
+  12: "48px",
+  13: "52px",
+  14: "56px",
+  15: "60px",
+  16: "64px",
+  17: "68px",
+  18: "72px",
+  19: "76px",
+  20: "80px",
+  21: "84px",
+  22: "88px",
+  23: "92px",
+  24: "96px",
+  25: "100px",
+  26: "104px",
+  27: "108px",
+  28: "112px",
+  29: "116px",
+  30: "120px",
+  31: "124px",
+  32: "128px",
+  33: "132px",
+  34: "136px",
+  35: "140px",
+  36: "144px",
+  37: "148px",
+  38: "152px",
+  39: "156px",
+  40: "160px",
+  41: "164px",
+  42: "168px",
+  43: "172px",
+  44: "176px",
+  45: "180px",
+  46: "184px",
+  47: "188px",
+  48: "192px",
+  49: "196px",
+  50: "200px",
+  51: "204px",
+  52: "208px",
+  53: "212px",
+  54: "216px",
+  55: "220px",
+  56: "224px",
+  57: "228px",
+  58: "232px",
+  59: "236px",
+  60: "240px",
+  61: "244px",
+  62: "248px",
+  63: "252px",
+  64: "256px",
+};
+
+/**
+ * @deprecated Please use style-dictionary/spacing
+ */
+export const negativeScale = {
+  "-1": "-4px",
+  "-2": "-8px",
+  "-3": "-12px",
+  "-4": "-16px",
+  "-5": "-20px",
+  "-6": "-24px",
+  "-7": "-28px",
+  "-8": "-32px",
+  "-9": "-36px",
+  "-10": "-40px",
+  "-11": "-44px",
+  "-12": "-48px",
+  "-13": "-52px",
+  "-14": "-56px",
+  "-15": "-60px",
+  "-16": "-64px",
+  "-17": "-68px",
+  "-18": "-72px",
+  "-19": "-76px",
+  "-20": "-80px",
+  "-21": "-84px",
+  "-22": "-88px",
+  "-23": "-92px",
+  "-24": "-96px",
+  "-25": "-100px",
+  "-26": "-104px",
+  "-27": "-108px",
+  "-28": "-112px",
+  "-29": "-116px",
+  "-30": "-120px",
+  "-31": "-124px",
+  "-32": "-128px",
+  "-33": "-132px",
+  "-34": "-136px",
+  "-35": "-140px",
+  "-36": "-144px",
+  "-37": "-148px",
+  "-38": "-152px",
+  "-39": "-156px",
+  "-40": "-160px",
+  "-41": "-164px",
+  "-42": "-168px",
+  "-43": "-172px",
+  "-44": "-176px",
+  "-45": "-180px",
+  "-46": "-184px",
+  "-47": "-188px",
+  "-48": "-192px",
+  "-49": "-196px",
+  "-50": "-200px",
+  "-51": "-204px",
+  "-52": "-208px",
+  "-53": "-212px",
+  "-54": "-216px",
+  "-55": "-220px",
+  "-56": "-224px",
+  "-57": "-228px",
+  "-58": "-232px",
+  "-59": "-236px",
+  "-60": "-240px",
+  "-61": "-244px",
+  "-62": "-248px",
+  "-63": "-252px",
+  "-64": "-256px",
+};