radix-ui-themes-with-tailwind - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

dist/index.d.ts

@@ -6,2 +6,3 @@ import * as tailwindcss_types_config from 'tailwindcss/types/config';
 declare const tailwindColorsToRadixMap: Record<"zinc" | "neutral" | "stone" | "emerald" | "fuchsia" | "rose", RadixColors | Record<string, string>>;
+
 declare const radixThemePlugin: {
@@ -8,0 +9,0 @@ (options: {

dist/index.js

@@ -1,45 +0,31 @@
-import plugin from 'tailwindcss/plugin';
-import * as radixTheme from '@radix-ui/themes';
-import * as colors from 'tailwindcss/colors';
+'use strict';
 
-const accentColorNames = [];
-const grayColorNames = [];
-radixTheme.themeAccentColorsGrouped.map((group) => {
-  accentColorNames.push(...group.values.filter((color) => color !== "gray"));
-});
-radixTheme.themeGrayColorsGrouped.map((group) => {
-  grayColorNames.push(...group.values.filter((color) => color !== "auto"));
-});
-function getColorTokenName(number, useTailwindColorNames, alpha) {
-  const map = {
-    1: 50,
-    2: 50,
-    3: 100,
-    4: 200,
-    5: 300,
-    6: 400,
-    7: 500,
-    8: 600,
-    9: 700,
-    10: 800,
-    11: 900,
-    12: 950
-  };
-  if (!useTailwindColorNames) {
-    return alpha ? "a" + number : number;
+var plugin = require('tailwindcss/plugin');
+var colors = require('tailwindcss/colors');
+var utils = require('./utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
   }
-  return alpha ? "a" + map[number] : map[number];
+  n.default = e;
+  return Object.freeze(n);
 }
-const radixRadiusToTailwindMap = {
-  1: "xxs",
-  2: "xs",
-  3: "sm",
-  4: "md",
-  5: "lg",
-  6: "xl"
-};
-function getRadiusTokenName(radius, useTailwindColorNames) {
-  return useTailwindColorNames ? radixRadiusToTailwindMap[radius] : radius;
-}
-const radixThemePlugin = plugin.withOptions(
+
+var plugin__default = /*#__PURE__*/_interopDefault(plugin);
+var colors__namespace = /*#__PURE__*/_interopNamespace(colors);
+
+const radixThemePlugin = plugin__default.default.withOptions(
   ({
@@ -60,94 +46,12 @@ useTailwindColorNames = false,
       const c = {
-        surface: `var(--color-surface-${colorName})`,
-        [getColorTokenName(1, useTailwindColorNames)]: `var(--${colorName}-1)`,
-        [getColorTokenName(2, useTailwindColorNames)]: `var(--${colorName}-2)`,
-        [getColorTokenName(3, useTailwindColorNames)]: `var(--${colorName}-3)`,
-        [getColorTokenName(4, useTailwindColorNames)]: `var(--${colorName}-4)`,
-        [getColorTokenName(5, useTailwindColorNames)]: `var(--${colorName}-5)`,
-        [getColorTokenName(6, useTailwindColorNames)]: `var(--${colorName}-6)`,
-        [getColorTokenName(7, useTailwindColorNames)]: `var(--${colorName}-7)`,
-        [getColorTokenName(8, useTailwindColorNames)]: `var(--${colorName}-8)`,
-        [getColorTokenName(9, useTailwindColorNames)]: `var(--${colorName}-9)`,
-        "9-contrast": `var(--${colorName}-9-contrast)`,
-        [getColorTokenName(
-          10,
-          useTailwindColorNames
-        )]: `var(--${colorName}-10)`,
-        [getColorTokenName(
-          11,
-          useTailwindColorNames
-        )]: `var(--${colorName}-11)`,
-        [getColorTokenName(
-          12,
-          useTailwindColorNames
-        )]: `var(--${colorName}-12)`,
-        DEFAULT: `var(--${colorName}-9)`,
-        [getColorTokenName(
-          1,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a1)`,
-        [getColorTokenName(
-          2,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a2)`,
-        [getColorTokenName(
-          3,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a3)`,
-        [getColorTokenName(
-          4,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a4)`,
-        [getColorTokenName(
-          5,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a5)`,
-        [getColorTokenName(
-          6,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a6)`,
-        [getColorTokenName(
-          7,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a7)`,
-        [getColorTokenName(
-          8,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a8)`,
-        [getColorTokenName(
-          9,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a9)`,
-        [getColorTokenName(
-          10,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a10)`,
-        [getColorTokenName(
-          11,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a11)`,
-        [getColorTokenName(
-          12,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a12)`
+        ...utils.getColorDefinitions(colorName, false, useTailwindColorNames),
+        ...utils.getColorDefinitions(colorName, true, useTailwindColorNames)
       };
-      if (grayColorNames.includes(colorName)) {
-        c[`2-translucent`] = `var(--${colorName}-2-translucent)`;
+      if (utils.grayColorNames.includes(colorName)) {
+        c[`${utils.getColorTokenName(2, useTailwindColorNames, false)}-translucent`] = `var(--${colorName}-2-translucent)`;
       }
       return c;
     }
-    const allRadixColors = [...accentColorNames, ...grayColorNames].reduce((acc, colorName) => {
-      acc[colorName] = generateTailwindColors(colorName);
+    const allRadixColors = [...utils.accentColorNames, ...utils.grayColorNames].reduce((acc, colorName) => {
+      acc[colorName] = { ...generateTailwindColors(colorName) };
       return acc;
@@ -216,9 +120,9 @@ }, {});
           none: "0px",
-          [getRadiusTokenName(1, useTailwindRadiusNames)]: "var(--radius-1)",
-          [getRadiusTokenName(2, useTailwindRadiusNames)]: "var(--radius-2)",
-          [getRadiusTokenName(3, useTailwindRadiusNames)]: "var(--radius-3)",
+          [utils.getRadiusTokenName(1, useTailwindRadiusNames)]: "var(--radius-1)",
+          [utils.getRadiusTokenName(2, useTailwindRadiusNames)]: "var(--radius-2)",
+          [utils.getRadiusTokenName(3, useTailwindRadiusNames)]: "var(--radius-3)",
           DEFAULT: "var(--radius-3)",
-          [getRadiusTokenName(4, useTailwindRadiusNames)]: "var(--radius-4)",
-          [getRadiusTokenName(5, useTailwindRadiusNames)]: "var(--radius-5)",
-          [getRadiusTokenName(6, useTailwindRadiusNames)]: "var(--radius-6)",
+          [utils.getRadiusTokenName(4, useTailwindRadiusNames)]: "var(--radius-4)",
+          [utils.getRadiusTokenName(5, useTailwindRadiusNames)]: "var(--radius-5)",
+          [utils.getRadiusTokenName(6, useTailwindRadiusNames)]: "var(--radius-6)",
           full: "99999px"
@@ -231,4 +135,4 @@ },
           background: "var(--color-background)",
-          white: colors.white,
-          black: colors.black,
+          white: colors__namespace.white,
+          black: colors__namespace.black,
           surface: {
@@ -244,63 +148,6 @@ DEFAULT: "var(--color-surface)",
           selection: "var(--color-selection-root)",
-          accent: {
-            surface: "var(--color-surface-accent)",
-            1: "var(--accent-1)",
-            2: "var(--accent-2)",
-            3: "var(--accent-3)",
-            4: "var(--accent-4)",
-            5: "var(--accent-5)",
-            6: "var(--accent-6)",
-            7: "var(--accent-7)",
-            8: "var(--accent-8)",
-            9: "var(--accent-9)",
-            "9-contrast": "var(--accent-9-contrast)",
-            10: "var(--accent-10)",
-            11: "var(--accent-11)",
-            12: "var(--accent-12)",
-            DEFAULT: "var(--accent-9)",
-            a1: "var(--accent-a1)",
-            a2: "var(--accent-a2)",
-            a3: "var(--accent-a3)",
-            a4: "var(--accent-a4)",
-            a5: "var(--accent-a5)",
-            a6: "var(--accent-a6)",
-            a7: "var(--accent-a7)",
-            a8: "var(--accent-a8)",
-            a9: "var(--accent-a9)",
-            a10: "var(--accent-a10)",
-            a11: "var(--accent-a11)",
-            a12: "var(--accent-a12)"
-          },
-          gray: {
-            surface: "var(--gray-surface)",
-            1: "var(--gray-1)",
-            2: "var(--gray-2)",
-            "2-translucent": "var(--gray-2-translucent)",
-            3: "var(--gray-3)",
-            4: "var(--gray-4)",
-            5: "var(--gray-5)",
-            6: "var(--gray-6)",
-            7: "var(--gray-7)",
-            8: "var(--gray-8)",
-            9: "var(--gray-9)",
-            "9-contrast": "var(--gray-9-contrast)",
-            10: "var(--gray-10)",
-            11: "var(--gray-11)",
-            12: "var(--gray-12)",
-            DEFAULT: "var(--gray-9)",
-            a1: "var(--gray-a1)",
-            a2: "var(--gray-a2)",
-            a3: "var(--gray-a3)",
-            a4: "var(--gray-a4)",
-            a5: "var(--gray-a5)",
-            a6: "var(--gray-a6)",
-            a7: "var(--gray-a7)",
-            a8: "var(--gray-a8)",
-            a9: "var(--gray-a9)",
-            a10: "var(--gray-a10)",
-            a11: "var(--gray-a11)",
-            a12: "var(--gray-a12)"
-          },
           ...allRadixColors,
-          ...mappingsOfMissingTailwindColors
+          ...mappingsOfMissingTailwindColors,
+          accent: generateTailwindColors("accent"),
+          gray: generateTailwindColors("gray")
         }
@@ -313,4 +160,4 @@ }
 
-export { src_default as default };
+module.exports = src_default;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package.json

 {
-  "version": "1.2.1",
+  "version": "1.2.2",
   "name": "radix-ui-themes-with-tailwind",
   "description": "Tailwind plugin for Radix Themes",
   "main": "./dist/index.js",
-  "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
@@ -40,2 +39,3 @@ "./package.json": "./package.json"
     "dev": "tsup --watch",
+    "debug": "npx ts-node test/tailwind.config.ts",
     "version": "pnpm run build && git add -A",
@@ -42,0 +42,0 @@ "postversion": "git push && git push --tags && pnpm publish"

src/index.ts

 import plugin from "tailwindcss/plugin";
-import * as radixTheme from "@radix-ui/themes";
+
 import * as colors from "tailwindcss/colors";
+import {
+  accentColorNames,
+  getColorDefinitions,
+  getColorTokenName,
+  getRadiusTokenName,
+  grayColorNames,
+  tailwindColorsToRadixMap,
+} from "./utils";
 
-const accentColorNames: string[] = [];
-const grayColorNames: string[] = [];
-
-radixTheme.themeAccentColorsGrouped.map((group) => {
-  accentColorNames.push(...group.values.filter((color) => color !== "gray"));
-});
-radixTheme.themeGrayColorsGrouped.map((group) => {
-  grayColorNames.push(...group.values.filter((color) => color !== "auto"));
-});
-
-function getColorTokenName(
-  number: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12,
-  useTailwindColorNames?: boolean,
-  alpha?: boolean
-): number | string {
-  const map: Record<number, number> = {
-    1: 50,
-    2: 50,
-    3: 100,
-    4: 200,
-    5: 300,
-    6: 400,
-    7: 500,
-    8: 600,
-    9: 700,
-    10: 800,
-    11: 900,
-    12: 950,
-  } as const;
-
-  if (!useTailwindColorNames) {
-    return alpha ? "a" + number : number;
-  }
-
-  return alpha ? (("a" + map[number]) as string) : (map[number] as number);
-}
-
-type RadixColors = Exclude<
-  | (typeof radixTheme.themeAccentColorsOrdered)[number]
-  | (typeof radixTheme.themeGrayColorsGrouped)[0]["values"][number],
-  "auto"
->;
-
-const tailwindColorsToRadixMap: Record<
-  "zinc" | "neutral" | "stone" | "emerald" | "fuchsia" | "rose",
-  RadixColors | Record<string, string>
-> = {
-  zinc: "sand",
-  neutral: "sage",
-  stone: "sand",
-  emerald: "grass",
-  fuchsia: "plum",
-  rose: "crimson",
-};
-
-const radixRadiusToTailwindMap = {
-  1: "xxs",
-  2: "xs",
-  3: "sm",
-  4: "md",
-  5: "lg",
-  6: "xl",
-} as const;
-
-function getRadiusTokenName(
-  radius: keyof typeof radixRadiusToTailwindMap,
-  useTailwindColorNames?: boolean
-): string | number {
-  return useTailwindColorNames ? radixRadiusToTailwindMap[radius] : radius;
-}
-
 const radixThemePlugin = plugin.withOptions(
@@ -97,90 +34,10 @@ ({
       const c = {
-        surface: `var(--color-surface-${colorName})`,
-        [getColorTokenName(1, useTailwindColorNames)]: `var(--${colorName}-1)`,
-        [getColorTokenName(2, useTailwindColorNames)]: `var(--${colorName}-2)`,
-        [getColorTokenName(3, useTailwindColorNames)]: `var(--${colorName}-3)`,
-        [getColorTokenName(4, useTailwindColorNames)]: `var(--${colorName}-4)`,
-        [getColorTokenName(5, useTailwindColorNames)]: `var(--${colorName}-5)`,
-        [getColorTokenName(6, useTailwindColorNames)]: `var(--${colorName}-6)`,
-        [getColorTokenName(7, useTailwindColorNames)]: `var(--${colorName}-7)`,
-        [getColorTokenName(8, useTailwindColorNames)]: `var(--${colorName}-8)`,
-        [getColorTokenName(9, useTailwindColorNames)]: `var(--${colorName}-9)`,
-        "9-contrast": `var(--${colorName}-9-contrast)`,
-        [getColorTokenName(
-          10,
-          useTailwindColorNames
-        )]: `var(--${colorName}-10)`,
-        [getColorTokenName(
-          11,
-          useTailwindColorNames
-        )]: `var(--${colorName}-11)`,
-        [getColorTokenName(
-          12,
-          useTailwindColorNames
-        )]: `var(--${colorName}-12)`,
-        DEFAULT: `var(--${colorName}-9)`,
-        [getColorTokenName(
-          1,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a1)`,
-        [getColorTokenName(
-          2,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a2)`,
-        [getColorTokenName(
-          3,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a3)`,
-        [getColorTokenName(
-          4,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a4)`,
-        [getColorTokenName(
-          5,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a5)`,
-        [getColorTokenName(
-          6,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a6)`,
-        [getColorTokenName(
-          7,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a7)`,
-        [getColorTokenName(
-          8,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a8)`,
-        [getColorTokenName(
-          9,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a9)`,
-        [getColorTokenName(
-          10,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a10)`,
-        [getColorTokenName(
-          11,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a11)`,
-        [getColorTokenName(
-          12,
-          useTailwindColorNames,
-          true
-        )]: `var(--${colorName}-a12)`,
+        ...getColorDefinitions(colorName, false, useTailwindColorNames),
+        ...getColorDefinitions(colorName, true, useTailwindColorNames),
       };
 
       if (grayColorNames.includes(colorName)) {
-        (c as any)[`2-translucent`] = `var(--${colorName}-2-translucent)`;
+        c[
+          `${getColorTokenName(2, useTailwindColorNames, false)}-translucent`
+        ] = `var(--${colorName}-2-translucent)`;
       }
@@ -194,3 +51,3 @@
     >((acc, colorName) => {
-      acc[colorName] = generateTailwindColors(colorName);
+      acc[colorName] = { ...generateTailwindColors(colorName) };
       return acc;
@@ -305,63 +162,6 @@ }, {});
           selection: "var(--color-selection-root)",
-          accent: {
-            surface: "var(--color-surface-accent)",
-            1: "var(--accent-1)",
-            2: "var(--accent-2)",
-            3: "var(--accent-3)",
-            4: "var(--accent-4)",
-            5: "var(--accent-5)",
-            6: "var(--accent-6)",
-            7: "var(--accent-7)",
-            8: "var(--accent-8)",
-            9: "var(--accent-9)",
-            "9-contrast": "var(--accent-9-contrast)",
-            10: "var(--accent-10)",
-            11: "var(--accent-11)",
-            12: "var(--accent-12)",
-            DEFAULT: "var(--accent-9)",
-            a1: "var(--accent-a1)",
-            a2: "var(--accent-a2)",
-            a3: "var(--accent-a3)",
-            a4: "var(--accent-a4)",
-            a5: "var(--accent-a5)",
-            a6: "var(--accent-a6)",
-            a7: "var(--accent-a7)",
-            a8: "var(--accent-a8)",
-            a9: "var(--accent-a9)",
-            a10: "var(--accent-a10)",
-            a11: "var(--accent-a11)",
-            a12: "var(--accent-a12)",
-          },
-          gray: {
-            surface: "var(--gray-surface)",
-            1: "var(--gray-1)",
-            2: "var(--gray-2)",
-            "2-translucent": "var(--gray-2-translucent)",
-            3: "var(--gray-3)",
-            4: "var(--gray-4)",
-            5: "var(--gray-5)",
-            6: "var(--gray-6)",
-            7: "var(--gray-7)",
-            8: "var(--gray-8)",
-            9: "var(--gray-9)",
-            "9-contrast": "var(--gray-9-contrast)",
-            10: "var(--gray-10)",
-            11: "var(--gray-11)",
-            12: "var(--gray-12)",
-            DEFAULT: "var(--gray-9)",
-            a1: "var(--gray-a1)",
-            a2: "var(--gray-a2)",
-            a3: "var(--gray-a3)",
-            a4: "var(--gray-a4)",
-            a5: "var(--gray-a5)",
-            a6: "var(--gray-a6)",
-            a7: "var(--gray-a7)",
-            a8: "var(--gray-a8)",
-            a9: "var(--gray-a9)",
-            a10: "var(--gray-a10)",
-            a11: "var(--gray-a11)",
-            a12: "var(--gray-a12)",
-          },
           ...allRadixColors,
           ...mappingsOfMissingTailwindColors,
+          accent: generateTailwindColors("accent"),
+          gray: generateTailwindColors("gray"),
         },
@@ -368,0 +168,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of downloads

116

increased by20.83%

Number of package files

14

increased by16.67%

Worsened metrics

Total package byte prevSize

46836

decreased by-41.31%

Lines of code

590

decreased by-42.66%

Number of medium supply chain risk alerts

1

increased byInfinity%

Is type module

No

No dependency changes