Merge pull request #53 from crswll/simplify-transparency

crswll · May 4, 2024 · cda7554 · cda7554
2 parents 10d37ec + 6de91a0
commit cda7554
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-theme-swapper",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "main": "src/index.js",
   "license": "MIT",
   "devDependencies": {

diff --git a/src/utils.js b/src/utils.js
@@ -70,7 +70,7 @@ function toConfigValue (keys, value) {
   }
 
   if (colorConfigKeys.includes(keys[0])) {
-    return `color-mix(in srgb, var(--${getTailwindKeyName(keys)}), transparent calc(100% - 100% * <alpha-value>))`
+    return `color-mix(in srgb, var(--${getTailwindKeyName(keys)}) calc(100% * <alpha-value>), transparent)`
   }
 
   return `var(--${getTailwindKeyName(keys)})`

diff --git a/test/index.test.js b/test/index.test.js
@@ -76,11 +76,11 @@ postcss(tailwindcss({
       expect(resolvedConfig).toMatchObject({
         "theme": {
           "colors": {
-            "with-opacity": "color-mix(in srgb, var(--colors-with-opacity), transparent calc(100% - 100% * <alpha-value>))",
-            "hotpink": "color-mix(in srgb, var(--colors-hotpink), transparent calc(100% - 100% * <alpha-value>))",
+            "with-opacity": "color-mix(in srgb, var(--colors-with-opacity) calc(100% * <alpha-value>), transparent)",
+            "hotpink": "color-mix(in srgb, var(--colors-hotpink) calc(100% * <alpha-value>), transparent)",
             "primary": {
-              "default": "color-mix(in srgb, var(--colors-primary), transparent calc(100% - 100% * <alpha-value>))",
-              "darker": "color-mix(in srgb, var(--colors-primary-darker), transparent calc(100% - 100% * <alpha-value>))",
+              "default": "color-mix(in srgb, var(--colors-primary) calc(100% * <alpha-value>), transparent)",
+              "darker": "color-mix(in srgb, var(--colors-primary-darker) calc(100% * <alpha-value>), transparent)",
             }
           },
           "spacing": {

diff --git a/test/utils.test.js b/test/utils.test.js
@@ -121,10 +121,10 @@ describe('getThemeAsCustomProps', () => {
 
       expect(result).toEqual({
         colors: {
-          red: "color-mix(in srgb, var(--colors-red), transparent calc(100% - 100% * <alpha-value>))",
+          red: "color-mix(in srgb, var(--colors-red) calc(100% * <alpha-value>), transparent)",
           primary: {
-            default: "color-mix(in srgb, var(--colors-primary), transparent calc(100% - 100% * <alpha-value>))",
-            darker: "color-mix(in srgb, var(--colors-primary-darker), transparent calc(100% - 100% * <alpha-value>))",
+            default: "color-mix(in srgb, var(--colors-primary) calc(100% * <alpha-value>), transparent)",
+            darker: "color-mix(in srgb, var(--colors-primary-darker) calc(100% * <alpha-value>), transparent)",
           },
         },
         fontSize: {
@@ -156,7 +156,7 @@ describe('getThemeAsCustomProps', () => {
     })
 
     test('should just return the value when it is not a color', () => {
-      expect(tailwindConfigValueTransformer(['colors', 'primary'], 'rgb(255, 0, 0)')).toEqual('color-mix(in srgb, var(--colors-primary), transparent calc(100% - 100% * <alpha-value>))')
+      expect(tailwindConfigValueTransformer(['colors', 'primary'], 'rgb(255, 0, 0)')).toEqual('color-mix(in srgb, var(--colors-primary) calc(100% * <alpha-value>), transparent)')
       expect(tailwindConfigValueTransformer(['fontSize'], '16px')).toEqual('var(--font-size)')
     })
   })