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

Comparing version 1.2.2 to 1.2.3

dist/index.d.ts

@@ -7,10 +7,11 @@ import * as tailwindcss_types_config from 'tailwindcss/types/config';
 
+type RadixThemePluginOptions = {
+    useTailwindColorNames?: boolean;
+    useTailwindRadiusNames?: boolean;
+    mapMissingTailwindColors?: boolean | Partial<typeof tailwindColorsToRadixMap>;
+};
 declare const radixThemePlugin: {
-    (options: {
-        useTailwindColorNames?: boolean;
-        useTailwindRadiusNames?: boolean;
-        mapMissingTailwindColors?: boolean | Partial<typeof tailwindColorsToRadixMap>;
-    }): {
+    (options: RadixThemePluginOptions): {
         handler: tailwindcss_types_config.PluginCreator;
-        config?: Partial<tailwindcss_types_config.Config>;
+        config?: Partial<tailwindcss_types_config.Config> | undefined;
     };
@@ -20,2 +21,2 @@ __isOptionsFunction: true;
 
-export { radixThemePlugin as default };
+export { RadixThemePluginOptions, radixThemePlugin as default };

dist/index.js

@@ -31,14 +31,20 @@ 'use strict';
 const radixThemePlugin = plugin__default.default.withOptions(
-  ({
-    useTailwindColorNames = false,
-    useTailwindRadiusNames = false,
-    mapMissingTailwindColors = false
-  } = {}) => {
-    return function() {
+  ({}) => {
+    return ({ addBase }) => {
+      addBase({
+        "*": {
+          outlineColor: "currentColor"
+        },
+        "html, body": {
+          height: "100%",
+          "-webkit-font-smoothing": "antialiased",
+          "-moz-osx-font-smoothing": "grayscale"
+        }
+      });
     };
   },
   ({
-    useTailwindColorNames,
-    useTailwindRadiusNames,
-    mapMissingTailwindColors
+    useTailwindColorNames = true,
+    useTailwindRadiusNames = true,
+    mapMissingTailwindColors = true
   }) => {
@@ -80,3 +86,122 @@ function generateTailwindColors(colorName) {
     return {
+      darkMode: "class",
       theme: {
+        fontSize: {
+          xs: [
+            "var(--font-size-1)",
+            {
+              letterSpacing: "var(--letter-spacing-1)",
+              lineHeight: "var(--line-height-1)"
+            }
+          ],
+          sm: [
+            "var(--font-size-2)",
+            {
+              letterSpacing: "var(--letter-spacing-2)",
+              lineHeight: "var(--line-height-2)"
+            }
+          ],
+          base: [
+            "var(--font-size-3)",
+            {
+              letterSpacing: "var(--letter-spacing-3)",
+              lineHeight: "var(--line-height-3)"
+            }
+          ],
+          lg: [
+            "var(--font-size-4)",
+            {
+              letterSpacing: "var(--letter-spacing-4)",
+              lineHeight: "var(--line-height-4)"
+            }
+          ],
+          xl: [
+            "var(--font-size-5)",
+            {
+              letterSpacing: "var(--letter-spacing-5)",
+              lineHeight: "var(--line-height-5)"
+            }
+          ],
+          "2xl": [
+            "var(--font-size-6)",
+            {
+              letterSpacing: "var(--letter-spacing-6)",
+              lineHeight: "var(--line-height-6)"
+            }
+          ],
+          "3xl": [
+            "var(--font-size-7)",
+            {
+              letterSpacing: "var(--letter-spacing-7)",
+              lineHeight: "var(--line-height-7)"
+            }
+          ],
+          "4xl": [
+            "var(--font-size-8)",
+            {
+              letterSpacing: "var(--letter-spacing-8)",
+              lineHeight: "var(--line-height-8)"
+            }
+          ],
+          "5xl": [
+            "var(--font-size-9)",
+            {
+              letterSpacing: "var(--letter-spacing-9)",
+              lineHeight: "var(--line-height-9)"
+            }
+          ]
+        },
+        lineHeight: {
+          1: "var(--line-height-1)",
+          2: "var(--line-height-2)",
+          3: "var(--line-height-3)",
+          4: "var(--line-height-4)",
+          5: "var(--line-height-5)",
+          6: "var(--line-height-6)",
+          7: "var(--line-height-7)",
+          8: "var(--line-height-8)",
+          9: "var(--line-height-9)",
+          none: "1",
+          tight: "1.25",
+          snug: "1.375",
+          normal: "1.5",
+          relaxed: "1.625",
+          loose: "2"
+        },
+        fontFamily: {
+          sans: "var(--default-font-family)",
+          strong: "var(--strong-font-family)",
+          heading: "var(--heading-font-family)",
+          code: "var(--code-font-family)",
+          em: "var(--em-font-family)",
+          quote: "var(--quote-font-family)"
+        },
+        letterSpacing: {
+          1: "var(--letter-spacing-1)",
+          2: "var(--letter-spacing-2)",
+          3: "var(--letter-spacing-3)",
+          4: "var(--letter-spacing-4)",
+          5: "var(--letter-spacing-5)",
+          6: "var(--letter-spacing-6)",
+          7: "var(--letter-spacing-7)",
+          8: "var(--letter-spacing-8)",
+          9: "var(--letter-spacing-9)",
+          tighter: "-0.05em",
+          tight: "-0.025em",
+          normal: "0",
+          wide: "0.025em",
+          wider: "0.05em",
+          widest: "0.1em"
+        },
+        fontWeight: {
+          thin: "100",
+          extralight: "200",
+          light: "var(--font-weight-light)",
+          normal: "var(--font-weight-regular)",
+          medium: "var(--font-weight-medium)",
+          semibold: "600",
+          bold: "var(--font-weight-bold)",
+          extrabold: "800",
+          black: "900"
+        },
         spacing: {
@@ -134,5 +259,5 @@ "0": "0px",
           current: "currentColor",
-          background: "var(--color-background)",
           white: colors__namespace.white,
           black: colors__namespace.black,
+          background: "var(--color-background)",
           surface: {
@@ -139,0 +264,0 @@ DEFAULT: "var(--color-surface)",

package.json

 {
-  "version": "1.2.2",
+  "version": "1.2.3",
   "name": "radix-ui-themes-with-tailwind",
@@ -39,6 +39,8 @@ "description": "Tailwind plugin for Radix Themes",
     "dev": "tsup --watch",
+    "docs:dev": "cd docs-dev && pnpm run dev",
+    "docs:build": "cd docs-dev && pnpm run build",
     "debug": "npx ts-node test/tailwind.config.ts",
-    "version": "pnpm run build && git add -A",
+    "version": "pnpm run build && pnpm run docs:build && git add -A",
     "postversion": "git push && git push --tags && pnpm publish"
   }
 }

src/index.ts

 import plugin from "tailwindcss/plugin";
-
 import * as colors from "tailwindcss/colors";
@@ -13,21 +12,28 @@ import {
 
+export type RadixThemePluginOptions = {
+  useTailwindColorNames?: boolean;
+  useTailwindRadiusNames?: boolean;
+  mapMissingTailwindColors?: boolean | Partial<typeof tailwindColorsToRadixMap>;
+};
+
 const radixThemePlugin = plugin.withOptions(
-  ({
-    useTailwindColorNames = false,
-    useTailwindRadiusNames = false,
-    mapMissingTailwindColors = false,
-  }: {
-    useTailwindColorNames?: boolean;
-    useTailwindRadiusNames?: boolean;
-    mapMissingTailwindColors?:
-      | boolean
-      | Partial<typeof tailwindColorsToRadixMap>;
-  } = {}) => {
-    return function () {};
+  ({}: RadixThemePluginOptions) => {
+    return ({ addBase }) => {
+      addBase({
+        "*": {
+          outlineColor: "currentColor",
+        },
+        "html, body": {
+          height: "100%",
+          "-webkit-font-smoothing": "antialiased",
+          "-moz-osx-font-smoothing": "grayscale",
+        },
+      });
+    };
   },
   ({
-    useTailwindColorNames,
-    useTailwindRadiusNames,
-    mapMissingTailwindColors,
-  }) => {
+    useTailwindColorNames = true,
+    useTailwindRadiusNames = true,
+    mapMissingTailwindColors = true,
+  }: RadixThemePluginOptions) => {
     function generateTailwindColors(colorName: string) {
@@ -95,3 +101,122 @@ const c = {
     return {
+      darkMode: "class",
       theme: {
+        fontSize: {
+          xs: [
+            "var(--font-size-1)",
+            {
+              letterSpacing: "var(--letter-spacing-1)",
+              lineHeight: "var(--line-height-1)",
+            },
+          ],
+          sm: [
+            "var(--font-size-2)",
+            {
+              letterSpacing: "var(--letter-spacing-2)",
+              lineHeight: "var(--line-height-2)",
+            },
+          ],
+          base: [
+            "var(--font-size-3)",
+            {
+              letterSpacing: "var(--letter-spacing-3)",
+              lineHeight: "var(--line-height-3)",
+            },
+          ],
+          lg: [
+            "var(--font-size-4)",
+            {
+              letterSpacing: "var(--letter-spacing-4)",
+              lineHeight: "var(--line-height-4)",
+            },
+          ],
+          xl: [
+            "var(--font-size-5)",
+            {
+              letterSpacing: "var(--letter-spacing-5)",
+              lineHeight: "var(--line-height-5)",
+            },
+          ],
+          "2xl": [
+            "var(--font-size-6)",
+            {
+              letterSpacing: "var(--letter-spacing-6)",
+              lineHeight: "var(--line-height-6)",
+            },
+          ],
+          "3xl": [
+            "var(--font-size-7)",
+            {
+              letterSpacing: "var(--letter-spacing-7)",
+              lineHeight: "var(--line-height-7)",
+            },
+          ],
+          "4xl": [
+            "var(--font-size-8)",
+            {
+              letterSpacing: "var(--letter-spacing-8)",
+              lineHeight: "var(--line-height-8)",
+            },
+          ],
+          "5xl": [
+            "var(--font-size-9)",
+            {
+              letterSpacing: "var(--letter-spacing-9)",
+              lineHeight: "var(--line-height-9)",
+            },
+          ],
+        },
+        lineHeight: {
+          1: "var(--line-height-1)",
+          2: "var(--line-height-2)",
+          3: "var(--line-height-3)",
+          4: "var(--line-height-4)",
+          5: "var(--line-height-5)",
+          6: "var(--line-height-6)",
+          7: "var(--line-height-7)",
+          8: "var(--line-height-8)",
+          9: "var(--line-height-9)",
+          none: "1",
+          tight: "1.25",
+          snug: "1.375",
+          normal: "1.5",
+          relaxed: "1.625",
+          loose: "2",
+        },
+        fontFamily: {
+          sans: "var(--default-font-family)",
+          strong: "var(--strong-font-family)",
+          heading: "var(--heading-font-family)",
+          code: "var(--code-font-family)",
+          em: "var(--em-font-family)",
+          quote: "var(--quote-font-family)",
+        },
+        letterSpacing: {
+          1: "var(--letter-spacing-1)",
+          2: "var(--letter-spacing-2)",
+          3: "var(--letter-spacing-3)",
+          4: "var(--letter-spacing-4)",
+          5: "var(--letter-spacing-5)",
+          6: "var(--letter-spacing-6)",
+          7: "var(--letter-spacing-7)",
+          8: "var(--letter-spacing-8)",
+          9: "var(--letter-spacing-9)",
+          tighter: "-0.05em",
+          tight: "-0.025em",
+          normal: "0",
+          wide: "0.025em",
+          wider: "0.05em",
+          widest: "0.1em",
+        },
+        fontWeight: {
+          thin: "100",
+          extralight: "200",
+          light: "var(--font-weight-light)",
+          normal: "var(--font-weight-regular)",
+          medium: "var(--font-weight-medium)",
+          semibold: "600",
+          bold: "var(--font-weight-bold)",
+          extrabold: "800",
+          black: "900",
+        },
         spacing: {
@@ -149,5 +274,5 @@ "0": "0px",
           current: "currentColor",
-          background: "var(--color-background)",
           white: colors.white,
           black: colors.black,
+          background: "var(--color-background)",
           surface: {
@@ -154,0 +279,0 @@ DEFAULT: "var(--color-surface)",

src/utils.ts

@@ -17,4 +17,4 @@ import * as radixTheme from "@radix-ui/themes";
   number: RadixColorScales,
-  useTailwindColorNames: boolean,
-  alpha: boolean
+  useTailwindColorNames?: boolean,
+  alpha?: boolean
 ): number | string {
@@ -59,3 +59,3 @@ const map: Record<number, number> = {
     },
-    {}
+    {} as Record<string, string>
   );
@@ -62,0 +62,0 @@

tsconfig.json

@@ -5,2 +5,6 @@ {
     "target": "ESNext",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
@@ -11,3 +15,3 @@ "declaration": true,
   },
-  "exclude": ["dist", "node_modules"]
-}
+  "exclude": ["dist", "node_modules", "docs-dev", "docs"]
+}

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

Network access

Supply chain risk

This module accesses the network.

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

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

Improved metrics

Total package byte prevSize

2422421

increased by5072.13%

Number of package files

47

increased by235.71%

Lines of code

10146

increased by1619.66%

Worsened metrics

Number of medium supply chain risk alerts

5

increased by400%

No dependency changes