refactor: drop tailwind from radix package (#4704)

All styles use our css parser, no need to additional abstraction any
more. Theme is handwritten and contains only used stuff.

```diff
- 880 MB
+ 859 MB
```

Author: TrySound

packages/sdk-components-react-radix/package.json

@@ -42,7 +42,6 @@
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",
     "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts !./src/*.test.{ts,tsx}' -e asChild -e modal -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
-    "build:tailwind": "tsx --conditions=webstudio scripts/generate-tailwind-theme.ts && prettier --write src/theme/__generated__",
     "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc"
@@ -81,7 +80,6 @@
     "@webstudio-is/template": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
     "react": "18.3.0-canary-14898b6a9-20240318",
-    "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "tailwindcss": "^3.3.3"
+    "react-dom": "18.3.0-canary-14898b6a9-20240318"
   }
 }

packages/sdk-components-react-radix/scripts/generate-tailwind-theme.ts

@@ -12,8 +12,7 @@ import {
   type WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
 import { div, h3, button } from "@webstudio-is/sdk/normalize.css";
-import * as tc from "./theme/tailwind-classes";
-import { buttonReset } from "./theme/styles";
+import { buttonReset } from "./shared/preset-styles";
 import {
   propsAccordion,
   propsAccordionItem,
@@ -75,7 +74,17 @@ export const metaAccordionHeader: WsComponentMeta = {
     },
   ],
   presetStyle: {
-    h3: [h3, tc.my(0)].flat(),
+    h3: [
+      ...h3,
+      {
+        property: "marginTop",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+      {
+        property: "marginBottom",
+        value: { type: "unit", unit: "px", value: 0 },
+      },
+    ],
   },
 };
 

packages/sdk-components-react-radix/src/accordion.ws.ts

@@ -5,7 +5,7 @@ import {
   type WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
 import { button, span } from "@webstudio-is/sdk/normalize.css";
-import { buttonReset } from "./theme/styles";
+import { buttonReset } from "./shared/preset-styles";
 import {
   propsCheckbox,
   propsCheckboxIndicator,

packages/sdk-components-react-radix/src/checkbox.ws.ts

@@ -23,7 +23,7 @@ import {
   propsDialogTitle,
   propsDialogDescription,
 } from "./__generated__/dialog.props";
-import { buttonReset } from "./theme/styles";
+import { buttonReset } from "./shared/preset-styles";
 
 const presetStyle = {
   div,

packages/sdk-components-react-radix/src/dialog.ws.ts

@@ -5,7 +5,7 @@ import {
   type WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
 import { button, div, span } from "@webstudio-is/sdk/normalize.css";
-import { buttonReset } from "./theme/styles";
+import { buttonReset } from "./shared/preset-styles";
 import {
   propsRadioGroup,
   propsRadioGroupIndicator,

packages/sdk-components-react-radix/src/radio-group.ws.ts

@@ -0,0 +1,47 @@
+// this module should not rely on "template" and other unpublished packages
+import type { StyleProperty, Unit } from "@webstudio-is/css-engine";
+import type { EmbedTemplateStyleDecl } from "@webstudio-is/react-sdk";
+
+const unit = (property: StyleProperty, value: number, unit: Unit) => ({
+  property,
+  value: { type: "unit", unit, value } as const,
+});
+
+const keyword = (property: StyleProperty, value: string) => ({
+  property,
+  value: { type: "keyword", value } as const,
+});
+
+const rgb = (property: StyleProperty, r: number, g: number, b: number) => ({
+  property,
+  value: { type: "rgb", alpha: 1, r, g, b } as const,
+});
+
+export const buttonReset: EmbedTemplateStyleDecl[] = [
+  {
+    property: "backgroundColor",
+    value: { type: "keyword", value: "transparent" },
+  },
+  {
+    property: "backgroundImage",
+    value: { type: "keyword", value: "none" },
+  },
+
+  unit("borderTopWidth", 0, "px"),
+  unit("borderRightWidth", 0, "px"),
+  unit("borderBottomWidth", 0, "px"),
+  unit("borderLeftWidth", 0, "px"),
+  keyword("borderTopStyle", "solid"),
+  keyword("borderRightStyle", "solid"),
+  keyword("borderBottomStyle", "solid"),
+  keyword("borderLeftStyle", "solid"),
+  rgb("borderTopColor", 226, 232, 240),
+  rgb("borderRightColor", 226, 232, 240),
+  rgb("borderBottomColor", 226, 232, 240),
+  rgb("borderLeftColor", 226, 232, 240),
+
+  unit("paddingTop", 0, "px"),
+  unit("paddingRight", 0, "px"),
+  unit("paddingBottom", 0, "px"),
+  unit("paddingLeft", 0, "px"),
+];