@webstudio-is/sdk-components-react-radix 0.90.0 → 0.92.0

package/lib/theme/tailwind-classes.js

@@ -1,10 +1,6 @@
-import { theme } from "./tailwind-theme";
-import {
-  parseCssValue,
-  parseBoxShadow,
-  StyleValue
-} from "@webstudio-is/css-data";
-const property = (property2, value) => {
+"use strict";
+import * as theme from "./__generated__/tailwind-theme";
+export const property = (property2, value) => {
   if (value.startsWith("--")) {
     return {
       property: property2,
@@ -17,7 +13,7 @@ const property = (property2, value) => {
   };
 };
 const preflight = () => {
-  const borderColorValue = parseCssValue("color", theme("colors")["border"]);
+  const borderColorValue = theme.colors.border;
   return [
     {
       property: "borderTopStyle",
@@ -53,89 +49,55 @@ const preflight = () => {
     }
   ];
 };
-const z = (zIndex) => {
-  const valueString = theme("zIndex")[zIndex ?? "auto"];
-  const value = parseCssValue("zIndex", valueString);
+export const z = (value) => {
   return [
     {
       property: "zIndex",
-      value
+      value: theme.zIndex[value]
     }
   ];
 };
-const overflow = (value) => [
+export const overflow = (value) => [
   {
     property: "overflow",
     value: { type: "keyword", value }
   }
 ];
-const rounded = (radius) => {
-  const valueString = theme("borderRadius")[radius ?? "DEFAULT"];
-  const value = parseCssValue("borderTopWidth", valueString);
+export const rounded = (value = "DEFAULT") => {
+  const styleValue = theme.borderRadius[value];
   return [
-    {
-      property: "borderTopLeftRadius",
-      value
-    },
-    {
-      property: "borderTopRightRadius",
-      value
-    },
-    {
-      property: "borderBottomRightRadius",
-      value
-    },
-    {
-      property: "borderBottomLeftRadius",
-      value
-    }
+    { property: "borderTopLeftRadius", value: styleValue },
+    { property: "borderTopRightRadius", value: styleValue },
+    { property: "borderBottomRightRadius", value: styleValue },
+    { property: "borderBottomLeftRadius", value: styleValue }
   ];
 };
-const border = (borderWidthOrColor) => {
+export const border = (borderWidthOrColor) => {
   if (typeof borderWidthOrColor === "number" || borderWidthOrColor === void 0) {
-    const key = `${borderWidthOrColor ?? "DEFAULT"}`;
-    const valueString = theme("borderWidth")?.[key] ?? "1px";
-    const value2 = parseCssValue("borderTopWidth", valueString);
+    const styleValue2 = theme.borderWidth[borderWidthOrColor ?? "DEFAULT"];
     return [
       ...preflight(),
-      { property: "borderTopWidth", value: value2 },
-      { property: "borderRightWidth", value: value2 },
-      { property: "borderBottomWidth", value: value2 },
-      { property: "borderLeftWidth", value: value2 }
+      { property: "borderTopWidth", value: styleValue2 },
+      { property: "borderRightWidth", value: styleValue2 },
+      { property: "borderBottomWidth", value: styleValue2 },
+      { property: "borderLeftWidth", value: styleValue2 }
     ];
   }
-  const value = parseCssValue("color", theme("colors")[borderWidthOrColor]);
+  const styleValue = theme.colors[borderWidthOrColor];
   return [
-    {
-      property: "borderTopColor",
-      value
-    },
-    {
-      property: "borderRightColor",
-      value
-    },
-    {
-      property: "borderBottomColor",
-      value
-    },
-    {
-      property: "borderLeftColor",
-      value
-    }
+    { property: "borderTopColor", value: styleValue },
+    { property: "borderRightColor", value: styleValue },
+    { property: "borderBottomColor", value: styleValue },
+    { property: "borderLeftColor", value: styleValue }
   ];
 };
-const borderB = (borderWidthOrColor) => {
+export const borderB = (borderWidthOrColor) => {
   let widthValue = { type: "unit", value: 1, unit: "number" };
-  let colorValue = parseCssValue(
-    "color",
-    theme("colors")["border"]
-  );
+  let colorValue = theme.colors.border;
   if (typeof borderWidthOrColor === "number" || borderWidthOrColor === void 0) {
-    const key = `${borderWidthOrColor ?? "DEFAULT"}`;
-    const valueString = theme("borderWidth")[key] ?? "1px";
-    widthValue = parseCssValue("borderTopWidth", valueString);
+    widthValue = theme.borderWidth[borderWidthOrColor ?? "DEFAULT"];
   } else {
-    colorValue = parseCssValue("color", theme("colors")[borderWidthOrColor]);
+    colorValue = theme.colors[borderWidthOrColor];
   }
   return [
     {
@@ -153,121 +115,95 @@ const borderB = (borderWidthOrColor) => {
   ];
 };
 const paddingProperty = (property2) => (padding) => {
-  const key = `${padding}`;
-  const valueString = theme("padding")?.[key] ?? "0";
-  const value = parseCssValue(property2, valueString);
-  return [{ property: property2, value }];
+  return [{ property: property2, value: theme.padding[padding] }];
 };
-const pt = (padding) => {
+export const pt = (padding) => {
   return paddingProperty("paddingTop")(padding);
 };
-const pb = (padding) => {
+export const pb = (padding) => {
   return paddingProperty("paddingBottom")(padding);
 };
-const pl = (padding) => {
+export const pl = (padding) => {
   return paddingProperty("paddingLeft")(padding);
 };
-const pr = (padding) => {
+export const pr = (padding) => {
   return paddingProperty("paddingRight")(padding);
 };
-const px = (padding) => {
+export const px = (padding) => {
   return [pl(padding), pr(padding)].flat();
 };
-const py = (padding) => {
+export const py = (padding) => {
   return [pt(padding), pb(padding)].flat();
 };
-const p = (padding) => {
+export const p = (padding) => {
   return [px(padding), py(padding)].flat();
 };
 const marginProperty = (property2) => (margin) => {
-  const key = `${margin}`;
-  const valueString = theme("margin")?.[key] ?? "0";
-  const value = parseCssValue(property2, valueString);
-  return [{ property: property2, value }];
+  return [{ property: property2, value: theme.margin[margin] }];
 };
-const ml = (margin) => {
+export const ml = (margin) => {
   return marginProperty("marginLeft")(margin);
 };
-const mr = (margin) => {
+export const mr = (margin) => {
   return marginProperty("marginRight")(margin);
 };
-const mt = (margin) => {
+export const mt = (margin) => {
   return marginProperty("marginTop")(margin);
 };
-const mb = (margin) => {
+export const mb = (margin) => {
   return marginProperty("marginBottom")(margin);
 };
-const mx = (margin) => {
+export const mx = (margin) => {
   return [ml(margin), mr(margin)].flat();
 };
-const my = (margin) => {
+export const my = (margin) => {
   return [mt(margin), mb(margin)].flat();
 };
-const m = (margin) => {
+export const m = (margin) => {
   return [mx(margin), my(margin)].flat();
 };
-const w = (spacing) => {
-  const key = `${spacing}`;
-  const valueString = theme("width")?.[key] ?? "0";
-  const value = parseCssValue("width", valueString);
-  return [{ property: "width", value }];
+export const w = (spacing) => {
+  return [{ property: "width", value: theme.width[spacing] }];
 };
-const h = (spacing) => {
-  const key = `${spacing}`;
-  const valueString = theme("height")?.[key] ?? "0";
-  const value = parseCssValue("height", valueString);
-  return [{ property: "height", value }];
+export const h = (spacing) => {
+  return [{ property: "height", value: theme.height[spacing] }];
 };
-const minH = (spacing) => {
-  const key = `${spacing}`;
-  const valueString = theme("height")?.[key] ?? "0";
-  const value = parseCssValue("minHeight", valueString);
-  return [{ property: "minHeight", value }];
+export const minH = (spacing) => {
+  return [{ property: "minHeight", value: theme.minHeight[spacing] }];
 };
-const opacity = (opacity2) => {
-  const key = `${opacity2}`;
-  const valueString = theme("opacity")?.[key] ?? "0";
-  const value = parseCssValue("opacity", valueString);
+export const opacity = (opacity2) => {
   return [
     {
       property: "opacity",
-      value
+      value: theme.opacity[opacity2]
     }
   ];
 };
-const cursor = (cursor2) => {
-  const valueString = theme("cursor")?.[cursor2] ?? "auto";
-  const value = parseCssValue("cursor", valueString);
+export const cursor = (cursor2) => {
   return [
     {
       property: "cursor",
-      value
+      value: theme.cursor[cursor2]
     }
   ];
 };
-const maxW = (spacing) => {
-  const key = `${spacing}`;
-  const valueString = theme("maxWidth")?.[key] ?? "0";
-  const value = parseCssValue("width", valueString);
-  return [{ property: "maxWidth", value }];
+export const maxW = (spacing) => {
+  return [{ property: "maxWidth", value: theme.maxWidth[spacing] }];
 };
 const positionStyle = (property2, spacing) => {
-  const key = `${spacing}`;
-  const valueString = theme("inset")?.[key] ?? "0";
-  const value = parseCssValue(property2, valueString);
-  return { property: property2, value };
-};
-const top = (spacing) => [positionStyle("top", spacing)];
-const right = (spacing) => [positionStyle("right", spacing)];
-const bottom = (spacing) => [positionStyle("bottom", spacing)];
-const left = (spacing) => [positionStyle("left", spacing)];
-const inset = (spacing) => [
+  return { property: property2, value: theme.inset[spacing] };
+};
+export const top = (spacing) => [positionStyle("top", spacing)];
+export const right = (spacing) => [positionStyle("right", spacing)];
+export const bottom = (spacing) => [positionStyle("bottom", spacing)];
+export const left = (spacing) => [positionStyle("left", spacing)];
+export const inset = (spacing) => [
   positionStyle("left", spacing),
   positionStyle("right", spacing),
   positionStyle("top", spacing),
   positionStyle("bottom", spacing)
 ];
-const aspect = (value) => {
+export const aspect = (value) => {
   let unparsed = value;
   if (value === "square") {
     unparsed = "1 / 1";
@@ -282,20 +218,13 @@ const aspect = (value) => {
     }
   ];
 };
-const backdropBlur = (blur) => {
-  const valueString = theme("blur")[blur];
-  const value = {
-    type: "unparsed",
-    value: `blur(${valueString})`
-  };
-  return [{ property: "backdropFilter", value }];
+export const backdropBlur = (blur) => {
+  return [{ property: "backdropFilter", value: theme.blur[blur] }];
 };
-const list = (listStyle) => {
-  const valueString = theme("listStyleType")[listStyle];
-  const value = parseCssValue("listStyleType", valueString);
-  return [{ property: "listStyleType", value }];
+export const list = (listStyle) => {
+  return [{ property: "listStyleType", value: theme.listStyleType[listStyle] }];
 };
-const select = (selectValue) => {
+export const select = (_selectValue) => {
   return [
     {
       property: "userSelect",
@@ -306,8 +235,8 @@ const select = (selectValue) => {
     }
   ];
 };
-const bg = (color, alpha) => {
-  const value = parseCssValue("backgroundColor", theme("colors")[color]);
+export const bg = (color, alpha) => {
+  const value = theme.colors[color];
   if (alpha !== void 0 && value.type === "rgb") {
     value.alpha = alpha / 100;
   }
@@ -318,20 +247,20 @@ const bg = (color, alpha) => {
     }
   ];
 };
-const fixed = () => {
+export const fixed = () => {
   return [{ property: "position", value: { type: "keyword", value: "fixed" } }];
 };
-const relative = () => {
+export const relative = () => {
   return [
     { property: "position", value: { type: "keyword", value: "relative" } }
   ];
 };
-const absolute = () => {
+export const absolute = () => {
   return [
     { property: "position", value: { type: "keyword", value: "absolute" } }
   ];
 };
-const grid = () => {
+export const grid = () => {
   return [{ property: "display", value: { type: "keyword", value: "grid" } }];
 };
 const alignItems = {
@@ -341,7 +270,7 @@ const alignItems = {
   baseline: "baseline",
   stretch: "stretch"
 };
-const items = (alignItemsParam) => {
+export const items = (alignItemsParam) => {
   return [
     {
       property: "alignItems",
@@ -361,7 +290,7 @@ const justifyContent = {
   evenly: "space-evenly",
   stretch: "stretch"
 };
-const justify = (justifyContentParam) => {
+export const justify = (justifyContentParam) => {
   return [
     {
       property: "justifyContent",
@@ -372,16 +301,16 @@ const justify = (justifyContentParam) => {
     }
   ];
 };
-const inlineFlex = () => {
+export const inlineFlex = () => {
   return [
     { property: "display", value: { type: "keyword", value: "inline-flex" } }
   ];
 };
-const block = () => {
+export const block = () => {
   return [{ property: "display", value: { type: "keyword", value: "block" } }];
 };
 const flexDirection = { row: "row", col: "column" };
-const flex = (flexParam) => {
+export const flex = (flexParam) => {
   if (flexParam === void 0) {
     return [{ property: "display", value: { type: "keyword", value: "flex" } }];
   }
@@ -459,7 +388,7 @@ const flex = (flexParam) => {
     }
   ];
 };
-const grow = () => {
+export const grow = () => {
   return [
     {
       property: "flexGrow",
@@ -467,7 +396,7 @@ const grow = () => {
     }
   ];
 };
-const shrink = (value) => {
+export const shrink = (value) => {
   return [
     {
       property: "flexGrow",
@@ -475,18 +404,14 @@ const shrink = (value) => {
     }
   ];
 };
-const gap = (gapValue) => {
-  const key = `${gapValue}`;
-  const valueString = theme("spacing")?.[key] ?? "0";
-  const value = parseCssValue("rowGap", valueString);
+export const gap = (gapValue) => {
+  const value = theme.spacing[gapValue];
   return [
     { property: "rowGap", value },
     { property: "columnGap", value }
   ];
 };
-const lineClamp = (lineClampValue) => {
-  const key = `${lineClampValue}`;
-  const valueString = theme("lineClamp")?.[key];
+export const lineClamp = (lineClampValue) => {
   return [
     {
       property: "overflow",
@@ -511,26 +436,19 @@ const lineClamp = (lineClampValue) => {
     },
     {
       property: "-webkit-line-clamp",
-      value: {
-        type: "keyword",
-        value: valueString
-      }
+      value: theme.lineClamp[lineClampValue]
     }
   ];
 };
-const leading = (lineHeight) => {
-  const key = `${lineHeight}`;
-  const valueString = theme("lineHeight")[key];
-  const value = parseCssValue("lineHeight", valueString);
-  return [{ property: "lineHeight", value }];
+export const leading = (lineHeight) => {
+  return [{ property: "lineHeight", value: theme.lineHeight[lineHeight] }];
 };
-const tracking = (letterSpacing) => {
-  const key = `${letterSpacing}`;
-  const valueString = theme("letterSpacing")[key];
-  const value = parseCssValue("letterSpacing", valueString);
-  return [{ property: "letterSpacing", value }];
+export const tracking = (letterSpacing) => {
+  return [
+    { property: "letterSpacing", value: theme.letterSpacing[letterSpacing] }
+  ];
 };
-const outline = (value) => {
+export const outline = (_value) => {
   return [
     {
       property: "outlineWidth",
@@ -550,42 +468,23 @@ const outline = (value) => {
     }
   ];
 };
-const textSizes = [
-  "sm",
-  "base",
-  "lg",
-  "xs",
-  "xl",
-  "2xl",
-  "3xl",
-  "4xl",
-  "5xl",
-  "6xl",
-  "7xl",
-  "8xl",
-  "9xl"
-];
+const textSizes = Object.keys(theme.fontSize);
 const isTextSize = (value) => textSizes.includes(value);
-const text = (sizeOrColor) => {
+export const text = (sizeOrColor) => {
   if (isTextSize(sizeOrColor)) {
-    const valueArr = theme("fontSize")[sizeOrColor];
-    const [fontSizeString, { lineHeight: lineHeightString }] = valueArr;
-    const fontSize = parseCssValue("fontSize", fontSizeString);
-    const lineHeight = parseCssValue("lineHeight", lineHeightString);
     return [
-      { property: "fontSize", value: fontSize },
-      { property: "lineHeight", value: lineHeight }
+      { property: "fontSize", value: theme.fontSize[sizeOrColor] },
+      { property: "lineHeight", value: theme.fontSizeLineHeight[sizeOrColor] }
     ];
   }
-  const value = parseCssValue("color", theme("colors")[sizeOrColor]);
   return [
     {
       property: "color",
-      value
+      value: theme.colors[sizeOrColor]
     }
   ];
 };
-const noUnderline = () => {
+export const noUnderline = () => {
   return [
     {
       property: "textDecorationLine",
@@ -593,7 +492,7 @@ const noUnderline = () => {
     }
   ];
 };
-const underline = () => {
+export const underline = () => {
   return [
     {
       property: "textDecorationLine",
@@ -601,14 +500,11 @@ const underline = () => {
     }
   ];
 };
-const underlineOffset = (offset) => {
-  const key = `${offset}`;
-  const valueString = theme("textUnderlineOffset")[key];
-  const value = parseCssValue("textUnderlineOffset", valueString);
+export const underlineOffset = (offset) => {
   return [
     {
       property: "textUnderlineOffset",
-      value
+      value: theme.textUnderlineOffset[offset]
     }
   ];
 };
@@ -623,7 +519,7 @@ const weights = {
   extrabold: "800",
   black: "900"
 };
-const font = (weight) => {
+export const font = (weight) => {
   return [
     {
       property: "fontWeight",
@@ -631,7 +527,7 @@ const font = (weight) => {
     }
   ];
 };
-const whitespace = (value) => {
+export const whitespace = (value) => {
   return [
     {
       property: "whiteSpace",
@@ -639,37 +535,59 @@ const whitespace = (value) => {
     }
   ];
 };
-const shadow = (shadowSize) => {
-  const valueString = theme("boxShadow")[shadowSize];
-  const value = parseBoxShadow(valueString);
+export const shadow = (shadowSize) => {
   return [
     {
       property: "boxShadow",
-      value
+      value: theme.boxShadow[shadowSize]
     }
   ];
 };
-const ring = (ringColor, ringWidth, ringOffsetColor = "background", ringOffsetWidth = 0, inset2 = "") => {
-  const ringWidthUnits = theme("ringWidth")[ringWidth];
-  const ringOffsetWidthUnits = theme("ringOffsetWidth")[ringOffsetWidth];
-  const ringColorRgb = theme("colors")[ringColor];
-  const ringOffsetColorRgb = theme("colors")[ringOffsetColor];
-  const ringOffsetShadow = `${inset2} 0 0 0 ${ringOffsetWidthUnits} ${ringOffsetColorRgb}`;
-  const ringWidthParsed = parseFloat(ringWidthUnits);
-  const ringOffsetWidthParsed = parseFloat(ringOffsetWidthUnits);
-  const ringShadow = `${inset2} 0 0 0 ${ringWidthParsed + ringOffsetWidthParsed}px ${ringColorRgb}`;
-  const value = parseBoxShadow(`${ringOffsetShadow}, ${ringShadow}`);
+export const ring = (ringColor, ringWidth, ringOffsetColor = "background", ringOffsetWidth = 0) => {
+  const ringWidthStyleValue = theme.ringWidth[ringWidth];
+  const ringOffsetWidthStyleValue = theme.ringOffsetWidth[ringOffsetWidth];
+  const ringColorStyleValue = theme.colors[ringColor];
+  const ringOffsetColorStyleValue = theme.colors[ringOffsetColor];
+  const ringOffsetShadow = {
+    type: "tuple",
+    value: [
+      { type: "unit", value: 0, unit: "number" },
+      { type: "unit", value: 0, unit: "number" },
+      { type: "unit", value: 0, unit: "number" },
+      ringOffsetWidthStyleValue,
+      ringOffsetColorStyleValue
+    ]
+  };
+  const ringWidthValue = ringWidthStyleValue.type === "unit" ? ringWidthStyleValue.value : 0;
+  const ringOffsetWidthValue = ringOffsetWidthStyleValue.type === "unit" ? ringOffsetWidthStyleValue.value : 0;
+  const ringShadow = {
+    type: "tuple",
+    value: [
+      { type: "unit", value: 0, unit: "number" },
+      { type: "unit", value: 0, unit: "number" },
+      { type: "unit", value: 0, unit: "number" },
+      {
+        type: "unit",
+        value: ringWidthValue + ringOffsetWidthValue,
+        unit: ringWidthStyleValue.type === "unit" ? ringWidthStyleValue.unit : "number"
+      },
+      ringColorStyleValue
+    ]
+  };
   return [
     {
       property: "boxShadow",
-      value
+      value: {
+        type: "layers",
+        value: [ringOffsetShadow, ringShadow]
+      }
     }
   ];
 };
-const pointerEvents = (value) => {
+export const pointerEvents = (value) => {
   return [{ property: "pointerEvents", value: { type: "keyword", value } }];
 };
-const transition = (value) => {
+export const transition = (value) => {
   if (value === "none") {
     return [
       {
@@ -693,7 +611,7 @@ const transition = (value) => {
     }
   ];
 };
-const duration = (ms) => {
+export const duration = (ms) => {
   return [
     {
       property: "transitionDuration",
@@ -701,103 +619,33 @@ const duration = (ms) => {
     }
   ];
 };
-const hover = (value) => {
+export const hover = (value) => {
   return value.map((decl) => ({
     ...decl,
     state: ":hover"
   }));
 };
-const focus = (value) => {
+export const focus = (value) => {
   return value.map((decl) => ({
     ...decl,
     state: ":focus"
   }));
 };
-const focusVisible = (value) => {
+export const focusVisible = (value) => {
   return value.map((decl) => ({
     ...decl,
     state: ":focus-visible"
   }));
 };
-const disabled = (value) => {
+export const disabled = (value) => {
   return value.map((decl) => ({
     ...decl,
     state: ":disabled"
   }));
 };
-const state = (value, state2) => {
+export const state = (value, state2) => {
   return value.map((decl) => ({
     ...decl,
     state: state2
   }));
 };
-export {
-  absolute,
-  aspect,
-  backdropBlur,
-  bg,
-  block,
-  border,
-  borderB,
-  bottom,
-  cursor,
-  disabled,
-  duration,
-  fixed,
-  flex,
-  focus,
-  focusVisible,
-  font,
-  gap,
-  grid,
-  grow,
-  h,
-  hover,
-  inlineFlex,
-  inset,
-  items,
-  justify,
-  leading,
-  left,
-  lineClamp,
-  list,
-  m,
-  maxW,
-  mb,
-  minH,
-  ml,
-  mr,
-  mt,
-  mx,
-  my,
-  noUnderline,
-  opacity,
-  outline,
-  overflow,
-  p,
-  pb,
-  pl,
-  pointerEvents,
-  pr,
-  property,
-  pt,
-  px,
-  py,
-  relative,
-  right,
-  ring,
-  rounded,
-  select,
-  shadow,
-  shrink,
-  state,
-  text,
-  top,
-  tracking,
-  transition,
-  underline,
-  underlineOffset,
-  w,
-  whitespace,
-  z
-};