@opensea/ui-kit - npm Package Compare versions

Comparing version 0.0.16 to 0.0.17

dist/index.modern.js

@@ -392,30 +392,31 @@ import { Slot } from '@radix-ui/react-slot';
   inherit: "inherit",
-  white: "var(--color-white)",
-  black: "var(--color-black)",
+  white: "rgb(var(--color-white) / <alpha-value>)",
+  black: "rgb(var(--color-black) / <alpha-value>)",
   // Grays
-  "gray-1": "var(--color-gray-1)",
-  "gray-2": "var(--color-gray-2)",
-  "gray-3": "var(--color-gray-3)",
+  "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)",
+  "gray-2": "rgb(var(--color-gray-2) / <alpha-value>)",
+  "gray-3": "rgb(var(--color-gray-3) / <alpha-value>)",
   // Blues
-  "blue-1": "var(--color-blue-1)",
-  "blue-2": "var(--color-blue-2)",
-  "blue-3": "var(--color-blue-3)",
-  "blue-4": "var(--color-blue-4)",
-  "blue-5": "var(--color-blue-5)",
+  "blue-1": "rgb(var(--color-blue-1) / <alpha-value>)",
+  "blue-2": "rgb(var(--color-blue-2) / <alpha-value>)",
+  "blue-3": "rgb(var(--color-blue-3) / <alpha-value>)",
+  "blue-4": "rgb(var(--color-blue-4) / <alpha-value>)",
+  "blue-5": "rgb(var(--color-blue-5) / <alpha-value>)",
   // Greens
-  "green-1": "var(--color-green-1)",
-  "green-2": "var(--color-green-2)",
+  "green-1": "rgb(var(--color-green-1) / <alpha-value>)",
+  "green-2": "rgb(var(--color-green-2) / <alpha-value>)",
   // Yellows
-  "yellow-1": "var(--color-yellow-1)",
-  "yellow-2": "var(--color-yellow-2)",
+  "yellow-1": "rgb(var(--color-yellow-1) / <alpha-value>)",
+  "yellow-2": "rgb(var(--color-yellow-2) / <alpha-value>)",
   // Reds
-  "red-1": "var(--color-red-1)",
-  "red-2": "var(--color-red-2)",
+  "red-1": "rgb(var(--color-red-1) / <alpha-value>)",
+  "red-2": "rgb(var(--color-red-2) / <alpha-value>)",
+  "red-3": "rgb(var(--color-red-3) / <alpha-value>)",
   // Accents
-  "accent-red": "var(--color-accent-red)",
-  "accent-purple": "var(--color-accent-purple)",
-  "accent-fuscia": "var(--color-accent-fuscia)",
-  "accent-orange": "var(--color-accent-orange)",
-  "accent-cerulean": "var(--color-accent-cerulean)",
-  "accent-aqua": "var(--color-accent-aqua)"
+  "accent-red": "rgb(var(--color-accent-red) / <alpha-value>)",
+  "accent-purple": "rgb(var(--color-accent-purple) / <alpha-value>)",
+  "accent-fuchsia": "rgb(var(--color-accent-fuchsia) / <alpha-value>)",
+  "accent-orange": "rgb(var(--color-accent-orange) / <alpha-value>)",
+  "accent-cerulean": "rgb(var(--color-accent-cerulean) / <alpha-value>)",
+  "accent-aqua": "rgb(var(--color-accent-aqua) / <alpha-value>)"
 };
@@ -428,4 +429,4 @@ const tailwindBase = {
       // Base background
-      "base-1": "var(--color-base-1)",
-      "base-2": "var(--color-base-2)",
+      "base-1": "rgb(var(--color-base-1) / <alpha-value>)",
+      "base-2": "rgb(var(--color-base-2) / <alpha-value>)",
       // Component background grays
@@ -436,6 +437,6 @@ "component-gray-1": "var(--color-component-gray-1)",
       // Elevation
-      "elevation-1": "var(--color-elevation-1)",
-      "elevation-1-subtle": "var(--color-elevation-1-subtle)",
-      "elevation-2": "var(--color-elevation-2)",
-      "elevation-3": "var(--color-elevation-3)",
+      "elevation-1": "rgb(var(--color-elevation-1) / <alpha-value>)",
+      "elevation-1-subtle": "rgb(var(--color-elevation-1-subtle) / <alpha-value>)",
+      "elevation-2": "rgb(var(--color-elevation-2) / <alpha-value>)",
+      "elevation-3": "rgb(var(--color-elevation-3) / <alpha-value>)",
       // In case we need to use border colors as background colors e.g. Separator
@@ -448,14 +449,14 @@ "border-1": "var(--color-border-1)",
       // Base text
-      primary: "var(--color-text-primary)",
-      secondary: "var(--color-text-secondary)",
+      primary: "rgb(var(--color-text-primary) / <alpha-value>)",
+      secondary: "rgb(var(--color-text-secondary) / <alpha-value>)",
       // Interactive text
-      "interactive-primary": "var(--color-text-interactive-primary)",
-      "interactive-primary-hover": "var(--color-text-interactive-primary-hover)",
-      "interactive-secondary": "var(--color-text-interactive-secondary)",
-      "interactive-secondary-hover": "var(--color-text-interactive-secondary-hover)",
+      "interactive-primary": "rgb(var(--color-text-interactive-primary) / <alpha-value>)",
+      "interactive-primary-hover": "rgb(var(--color-text-interactive-primary-hover) / <alpha-value>)",
+      "interactive-secondary": "rgb(var(--color-text-interactive-secondary) / <alpha-value>)",
+      "interactive-secondary-hover": "rgb(var(--color-text-interactive-secondary-hover) / <alpha-value>)",
       // Interactive icons
-      "icon-primary": "var(--color-icon-primary)",
-      "icon-primary-hover": "var(--color-icon-primary-hover)",
-      "icon-secondary": "var(--color-icon-secondary)",
-      "icon-secondary-hover": "var(--color-icon-secondary-hover)"
+      "icon-primary": "rgb(var(--color-icon-primary) / <alpha-value>)",
+      "icon-primary-hover": "rgb(var(--color-icon-primary-hover) / <alpha-value>)",
+      "icon-secondary": "rgb(var(--color-icon-secondary) / <alpha-value>)",
+      "icon-secondary-hover": "rgb(var(--color-icon-secondary-hover) / <alpha-value>)"
     }),
@@ -462,0 +463,0 @@ borderColor: _extends({}, COMMON_COLORS, {

dist/index.module.js

@@ -394,30 +394,31 @@ import { Slot } from '@radix-ui/react-slot';
   inherit: "inherit",
-  white: "var(--color-white)",
-  black: "var(--color-black)",
+  white: "rgb(var(--color-white) / <alpha-value>)",
+  black: "rgb(var(--color-black) / <alpha-value>)",
   // Grays
-  "gray-1": "var(--color-gray-1)",
-  "gray-2": "var(--color-gray-2)",
-  "gray-3": "var(--color-gray-3)",
+  "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)",
+  "gray-2": "rgb(var(--color-gray-2) / <alpha-value>)",
+  "gray-3": "rgb(var(--color-gray-3) / <alpha-value>)",
   // Blues
-  "blue-1": "var(--color-blue-1)",
-  "blue-2": "var(--color-blue-2)",
-  "blue-3": "var(--color-blue-3)",
-  "blue-4": "var(--color-blue-4)",
-  "blue-5": "var(--color-blue-5)",
+  "blue-1": "rgb(var(--color-blue-1) / <alpha-value>)",
+  "blue-2": "rgb(var(--color-blue-2) / <alpha-value>)",
+  "blue-3": "rgb(var(--color-blue-3) / <alpha-value>)",
+  "blue-4": "rgb(var(--color-blue-4) / <alpha-value>)",
+  "blue-5": "rgb(var(--color-blue-5) / <alpha-value>)",
   // Greens
-  "green-1": "var(--color-green-1)",
-  "green-2": "var(--color-green-2)",
+  "green-1": "rgb(var(--color-green-1) / <alpha-value>)",
+  "green-2": "rgb(var(--color-green-2) / <alpha-value>)",
   // Yellows
-  "yellow-1": "var(--color-yellow-1)",
-  "yellow-2": "var(--color-yellow-2)",
+  "yellow-1": "rgb(var(--color-yellow-1) / <alpha-value>)",
+  "yellow-2": "rgb(var(--color-yellow-2) / <alpha-value>)",
   // Reds
-  "red-1": "var(--color-red-1)",
-  "red-2": "var(--color-red-2)",
+  "red-1": "rgb(var(--color-red-1) / <alpha-value>)",
+  "red-2": "rgb(var(--color-red-2) / <alpha-value>)",
+  "red-3": "rgb(var(--color-red-3) / <alpha-value>)",
   // Accents
-  "accent-red": "var(--color-accent-red)",
-  "accent-purple": "var(--color-accent-purple)",
-  "accent-fuscia": "var(--color-accent-fuscia)",
-  "accent-orange": "var(--color-accent-orange)",
-  "accent-cerulean": "var(--color-accent-cerulean)",
-  "accent-aqua": "var(--color-accent-aqua)"
+  "accent-red": "rgb(var(--color-accent-red) / <alpha-value>)",
+  "accent-purple": "rgb(var(--color-accent-purple) / <alpha-value>)",
+  "accent-fuchsia": "rgb(var(--color-accent-fuchsia) / <alpha-value>)",
+  "accent-orange": "rgb(var(--color-accent-orange) / <alpha-value>)",
+  "accent-cerulean": "rgb(var(--color-accent-cerulean) / <alpha-value>)",
+  "accent-aqua": "rgb(var(--color-accent-aqua) / <alpha-value>)"
 };
@@ -430,4 +431,4 @@ var tailwindBase = {
       // Base background
-      "base-1": "var(--color-base-1)",
-      "base-2": "var(--color-base-2)",
+      "base-1": "rgb(var(--color-base-1) / <alpha-value>)",
+      "base-2": "rgb(var(--color-base-2) / <alpha-value>)",
       // Component background grays
@@ -438,6 +439,6 @@ "component-gray-1": "var(--color-component-gray-1)",
       // Elevation
-      "elevation-1": "var(--color-elevation-1)",
-      "elevation-1-subtle": "var(--color-elevation-1-subtle)",
-      "elevation-2": "var(--color-elevation-2)",
-      "elevation-3": "var(--color-elevation-3)",
+      "elevation-1": "rgb(var(--color-elevation-1) / <alpha-value>)",
+      "elevation-1-subtle": "rgb(var(--color-elevation-1-subtle) / <alpha-value>)",
+      "elevation-2": "rgb(var(--color-elevation-2) / <alpha-value>)",
+      "elevation-3": "rgb(var(--color-elevation-3) / <alpha-value>)",
       // In case we need to use border colors as background colors e.g. Separator
@@ -450,14 +451,14 @@ "border-1": "var(--color-border-1)",
       // Base text
-      primary: "var(--color-text-primary)",
-      secondary: "var(--color-text-secondary)",
+      primary: "rgb(var(--color-text-primary) / <alpha-value>)",
+      secondary: "rgb(var(--color-text-secondary) / <alpha-value>)",
       // Interactive text
-      "interactive-primary": "var(--color-text-interactive-primary)",
-      "interactive-primary-hover": "var(--color-text-interactive-primary-hover)",
-      "interactive-secondary": "var(--color-text-interactive-secondary)",
-      "interactive-secondary-hover": "var(--color-text-interactive-secondary-hover)",
+      "interactive-primary": "rgb(var(--color-text-interactive-primary) / <alpha-value>)",
+      "interactive-primary-hover": "rgb(var(--color-text-interactive-primary-hover) / <alpha-value>)",
+      "interactive-secondary": "rgb(var(--color-text-interactive-secondary) / <alpha-value>)",
+      "interactive-secondary-hover": "rgb(var(--color-text-interactive-secondary-hover) / <alpha-value>)",
       // Interactive icons
-      "icon-primary": "var(--color-icon-primary)",
-      "icon-primary-hover": "var(--color-icon-primary-hover)",
-      "icon-secondary": "var(--color-icon-secondary)",
-      "icon-secondary-hover": "var(--color-icon-secondary-hover)"
+      "icon-primary": "rgb(var(--color-icon-primary) / <alpha-value>)",
+      "icon-primary-hover": "rgb(var(--color-icon-primary-hover) / <alpha-value>)",
+      "icon-secondary": "rgb(var(--color-icon-secondary) / <alpha-value>)",
+      "icon-secondary-hover": "rgb(var(--color-icon-secondary-hover) / <alpha-value>)"
     }),
@@ -464,0 +465,0 @@ borderColor: _extends({}, COMMON_COLORS, {

dist/index.umd.js

@@ -409,30 +409,31 @@ (function (global, factory) {
     inherit: "inherit",
-    white: "var(--color-white)",
-    black: "var(--color-black)",
+    white: "rgb(var(--color-white) / <alpha-value>)",
+    black: "rgb(var(--color-black) / <alpha-value>)",
     // Grays
-    "gray-1": "var(--color-gray-1)",
-    "gray-2": "var(--color-gray-2)",
-    "gray-3": "var(--color-gray-3)",
+    "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)",
+    "gray-2": "rgb(var(--color-gray-2) / <alpha-value>)",
+    "gray-3": "rgb(var(--color-gray-3) / <alpha-value>)",
     // Blues
-    "blue-1": "var(--color-blue-1)",
-    "blue-2": "var(--color-blue-2)",
-    "blue-3": "var(--color-blue-3)",
-    "blue-4": "var(--color-blue-4)",
-    "blue-5": "var(--color-blue-5)",
+    "blue-1": "rgb(var(--color-blue-1) / <alpha-value>)",
+    "blue-2": "rgb(var(--color-blue-2) / <alpha-value>)",
+    "blue-3": "rgb(var(--color-blue-3) / <alpha-value>)",
+    "blue-4": "rgb(var(--color-blue-4) / <alpha-value>)",
+    "blue-5": "rgb(var(--color-blue-5) / <alpha-value>)",
     // Greens
-    "green-1": "var(--color-green-1)",
-    "green-2": "var(--color-green-2)",
+    "green-1": "rgb(var(--color-green-1) / <alpha-value>)",
+    "green-2": "rgb(var(--color-green-2) / <alpha-value>)",
     // Yellows
-    "yellow-1": "var(--color-yellow-1)",
-    "yellow-2": "var(--color-yellow-2)",
+    "yellow-1": "rgb(var(--color-yellow-1) / <alpha-value>)",
+    "yellow-2": "rgb(var(--color-yellow-2) / <alpha-value>)",
     // Reds
-    "red-1": "var(--color-red-1)",
-    "red-2": "var(--color-red-2)",
+    "red-1": "rgb(var(--color-red-1) / <alpha-value>)",
+    "red-2": "rgb(var(--color-red-2) / <alpha-value>)",
+    "red-3": "rgb(var(--color-red-3) / <alpha-value>)",
     // Accents
-    "accent-red": "var(--color-accent-red)",
-    "accent-purple": "var(--color-accent-purple)",
-    "accent-fuscia": "var(--color-accent-fuscia)",
-    "accent-orange": "var(--color-accent-orange)",
-    "accent-cerulean": "var(--color-accent-cerulean)",
-    "accent-aqua": "var(--color-accent-aqua)"
+    "accent-red": "rgb(var(--color-accent-red) / <alpha-value>)",
+    "accent-purple": "rgb(var(--color-accent-purple) / <alpha-value>)",
+    "accent-fuchsia": "rgb(var(--color-accent-fuchsia) / <alpha-value>)",
+    "accent-orange": "rgb(var(--color-accent-orange) / <alpha-value>)",
+    "accent-cerulean": "rgb(var(--color-accent-cerulean) / <alpha-value>)",
+    "accent-aqua": "rgb(var(--color-accent-aqua) / <alpha-value>)"
   };
@@ -445,4 +446,4 @@ var tailwindBase = {
         // Base background
-        "base-1": "var(--color-base-1)",
-        "base-2": "var(--color-base-2)",
+        "base-1": "rgb(var(--color-base-1) / <alpha-value>)",
+        "base-2": "rgb(var(--color-base-2) / <alpha-value>)",
         // Component background grays
@@ -453,6 +454,6 @@ "component-gray-1": "var(--color-component-gray-1)",
         // Elevation
-        "elevation-1": "var(--color-elevation-1)",
-        "elevation-1-subtle": "var(--color-elevation-1-subtle)",
-        "elevation-2": "var(--color-elevation-2)",
-        "elevation-3": "var(--color-elevation-3)",
+        "elevation-1": "rgb(var(--color-elevation-1) / <alpha-value>)",
+        "elevation-1-subtle": "rgb(var(--color-elevation-1-subtle) / <alpha-value>)",
+        "elevation-2": "rgb(var(--color-elevation-2) / <alpha-value>)",
+        "elevation-3": "rgb(var(--color-elevation-3) / <alpha-value>)",
         // In case we need to use border colors as background colors e.g. Separator
@@ -465,14 +466,14 @@ "border-1": "var(--color-border-1)",
         // Base text
-        primary: "var(--color-text-primary)",
-        secondary: "var(--color-text-secondary)",
+        primary: "rgb(var(--color-text-primary) / <alpha-value>)",
+        secondary: "rgb(var(--color-text-secondary) / <alpha-value>)",
         // Interactive text
-        "interactive-primary": "var(--color-text-interactive-primary)",
-        "interactive-primary-hover": "var(--color-text-interactive-primary-hover)",
-        "interactive-secondary": "var(--color-text-interactive-secondary)",
-        "interactive-secondary-hover": "var(--color-text-interactive-secondary-hover)",
+        "interactive-primary": "rgb(var(--color-text-interactive-primary) / <alpha-value>)",
+        "interactive-primary-hover": "rgb(var(--color-text-interactive-primary-hover) / <alpha-value>)",
+        "interactive-secondary": "rgb(var(--color-text-interactive-secondary) / <alpha-value>)",
+        "interactive-secondary-hover": "rgb(var(--color-text-interactive-secondary-hover) / <alpha-value>)",
         // Interactive icons
-        "icon-primary": "var(--color-icon-primary)",
-        "icon-primary-hover": "var(--color-icon-primary-hover)",
-        "icon-secondary": "var(--color-icon-secondary)",
-        "icon-secondary-hover": "var(--color-icon-secondary-hover)"
+        "icon-primary": "rgb(var(--color-icon-primary) / <alpha-value>)",
+        "icon-primary-hover": "rgb(var(--color-icon-primary-hover) / <alpha-value>)",
+        "icon-secondary": "rgb(var(--color-icon-secondary) / <alpha-value>)",
+        "icon-secondary-hover": "rgb(var(--color-icon-secondary-hover) / <alpha-value>)"
       }),
@@ -479,0 +480,0 @@ borderColor: _extends({}, COMMON_COLORS, {

dist/styles/tailwind-base.d.ts

@@ -21,24 +21,25 @@ export declare const tailwindBase: {
             inherit: "inherit";
-            white: "var(--color-white)";
-            black: "var(--color-black)";
-            "gray-1": "var(--color-gray-1)";
-            "gray-2": "var(--color-gray-2)";
-            "gray-3": "var(--color-gray-3)";
-            "blue-1": "var(--color-blue-1)";
-            "blue-2": "var(--color-blue-2)";
-            "blue-3": "var(--color-blue-3)";
-            "blue-4": "var(--color-blue-4)";
-            "blue-5": "var(--color-blue-5)";
-            "green-1": "var(--color-green-1)";
-            "green-2": "var(--color-green-2)";
-            "yellow-1": "var(--color-yellow-1)";
-            "yellow-2": "var(--color-yellow-2)";
-            "red-1": "var(--color-red-1)";
-            "red-2": "var(--color-red-2)";
-            "accent-red": "var(--color-accent-red)";
-            "accent-purple": "var(--color-accent-purple)";
-            "accent-fuscia": "var(--color-accent-fuscia)";
-            "accent-orange": "var(--color-accent-orange)";
-            "accent-cerulean": "var(--color-accent-cerulean)";
-            "accent-aqua": "var(--color-accent-aqua)";
+            white: "rgb(var(--color-white) / <alpha-value>)";
+            black: "rgb(var(--color-black) / <alpha-value>)";
+            "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)";
+            "gray-2": "rgb(var(--color-gray-2) / <alpha-value>)";
+            "gray-3": "rgb(var(--color-gray-3) / <alpha-value>)";
+            "blue-1": "rgb(var(--color-blue-1) / <alpha-value>)";
+            "blue-2": "rgb(var(--color-blue-2) / <alpha-value>)";
+            "blue-3": "rgb(var(--color-blue-3) / <alpha-value>)";
+            "blue-4": "rgb(var(--color-blue-4) / <alpha-value>)";
+            "blue-5": "rgb(var(--color-blue-5) / <alpha-value>)";
+            "green-1": "rgb(var(--color-green-1) / <alpha-value>)";
+            "green-2": "rgb(var(--color-green-2) / <alpha-value>)";
+            "yellow-1": "rgb(var(--color-yellow-1) / <alpha-value>)";
+            "yellow-2": "rgb(var(--color-yellow-2) / <alpha-value>)";
+            "red-1": "rgb(var(--color-red-1) / <alpha-value>)";
+            "red-2": "rgb(var(--color-red-2) / <alpha-value>)";
+            "red-3": "rgb(var(--color-red-3) / <alpha-value>)";
+            "accent-red": "rgb(var(--color-accent-red) / <alpha-value>)";
+            "accent-purple": "rgb(var(--color-accent-purple) / <alpha-value>)";
+            "accent-fuchsia": "rgb(var(--color-accent-fuchsia) / <alpha-value>)";
+            "accent-orange": "rgb(var(--color-accent-orange) / <alpha-value>)";
+            "accent-cerulean": "rgb(var(--color-accent-cerulean) / <alpha-value>)";
+            "accent-aqua": "rgb(var(--color-accent-aqua) / <alpha-value>)";
         };
@@ -59,24 +60,25 @@ textColor: {
             inherit: "inherit";
-            white: "var(--color-white)";
-            black: "var(--color-black)";
-            "gray-1": "var(--color-gray-1)";
-            "gray-2": "var(--color-gray-2)";
-            "gray-3": "var(--color-gray-3)";
-            "blue-1": "var(--color-blue-1)";
-            "blue-2": "var(--color-blue-2)";
-            "blue-3": "var(--color-blue-3)";
-            "blue-4": "var(--color-blue-4)";
-            "blue-5": "var(--color-blue-5)";
-            "green-1": "var(--color-green-1)";
-            "green-2": "var(--color-green-2)";
-            "yellow-1": "var(--color-yellow-1)";
-            "yellow-2": "var(--color-yellow-2)";
-            "red-1": "var(--color-red-1)";
-            "red-2": "var(--color-red-2)";
-            "accent-red": "var(--color-accent-red)";
-            "accent-purple": "var(--color-accent-purple)";
-            "accent-fuscia": "var(--color-accent-fuscia)";
-            "accent-orange": "var(--color-accent-orange)";
-            "accent-cerulean": "var(--color-accent-cerulean)";
-            "accent-aqua": "var(--color-accent-aqua)";
+            white: "rgb(var(--color-white) / <alpha-value>)";
+            black: "rgb(var(--color-black) / <alpha-value>)";
+            "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)";
+            "gray-2": "rgb(var(--color-gray-2) / <alpha-value>)";
+            "gray-3": "rgb(var(--color-gray-3) / <alpha-value>)";
+            "blue-1": "rgb(var(--color-blue-1) / <alpha-value>)";
+            "blue-2": "rgb(var(--color-blue-2) / <alpha-value>)";
+            "blue-3": "rgb(var(--color-blue-3) / <alpha-value>)";
+            "blue-4": "rgb(var(--color-blue-4) / <alpha-value>)";
+            "blue-5": "rgb(var(--color-blue-5) / <alpha-value>)";
+            "green-1": "rgb(var(--color-green-1) / <alpha-value>)";
+            "green-2": "rgb(var(--color-green-2) / <alpha-value>)";
+            "yellow-1": "rgb(var(--color-yellow-1) / <alpha-value>)";
+            "yellow-2": "rgb(var(--color-yellow-2) / <alpha-value>)";
+            "red-1": "rgb(var(--color-red-1) / <alpha-value>)";
+            "red-2": "rgb(var(--color-red-2) / <alpha-value>)";
+            "red-3": "rgb(var(--color-red-3) / <alpha-value>)";
+            "accent-red": "rgb(var(--color-accent-red) / <alpha-value>)";
+            "accent-purple": "rgb(var(--color-accent-purple) / <alpha-value>)";
+            "accent-fuchsia": "rgb(var(--color-accent-fuchsia) / <alpha-value>)";
+            "accent-orange": "rgb(var(--color-accent-orange) / <alpha-value>)";
+            "accent-cerulean": "rgb(var(--color-accent-cerulean) / <alpha-value>)";
+            "accent-aqua": "rgb(var(--color-accent-aqua) / <alpha-value>)";
         };
@@ -90,24 +92,25 @@ borderColor: {
             inherit: "inherit";
-            white: "var(--color-white)";
-            black: "var(--color-black)";
-            "gray-1": "var(--color-gray-1)";
-            "gray-2": "var(--color-gray-2)";
-            "gray-3": "var(--color-gray-3)";
-            "blue-1": "var(--color-blue-1)";
-            "blue-2": "var(--color-blue-2)";
-            "blue-3": "var(--color-blue-3)";
-            "blue-4": "var(--color-blue-4)";
-            "blue-5": "var(--color-blue-5)";
-            "green-1": "var(--color-green-1)";
-            "green-2": "var(--color-green-2)";
-            "yellow-1": "var(--color-yellow-1)";
-            "yellow-2": "var(--color-yellow-2)";
-            "red-1": "var(--color-red-1)";
-            "red-2": "var(--color-red-2)";
-            "accent-red": "var(--color-accent-red)";
-            "accent-purple": "var(--color-accent-purple)";
-            "accent-fuscia": "var(--color-accent-fuscia)";
-            "accent-orange": "var(--color-accent-orange)";
-            "accent-cerulean": "var(--color-accent-cerulean)";
-            "accent-aqua": "var(--color-accent-aqua)";
+            white: "rgb(var(--color-white) / <alpha-value>)";
+            black: "rgb(var(--color-black) / <alpha-value>)";
+            "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)";
+            "gray-2": "rgb(var(--color-gray-2) / <alpha-value>)";
+            "gray-3": "rgb(var(--color-gray-3) / <alpha-value>)";
+            "blue-1": "rgb(var(--color-blue-1) / <alpha-value>)";
+            "blue-2": "rgb(var(--color-blue-2) / <alpha-value>)";
+            "blue-3": "rgb(var(--color-blue-3) / <alpha-value>)";
+            "blue-4": "rgb(var(--color-blue-4) / <alpha-value>)";
+            "blue-5": "rgb(var(--color-blue-5) / <alpha-value>)";
+            "green-1": "rgb(var(--color-green-1) / <alpha-value>)";
+            "green-2": "rgb(var(--color-green-2) / <alpha-value>)";
+            "yellow-1": "rgb(var(--color-yellow-1) / <alpha-value>)";
+            "yellow-2": "rgb(var(--color-yellow-2) / <alpha-value>)";
+            "red-1": "rgb(var(--color-red-1) / <alpha-value>)";
+            "red-2": "rgb(var(--color-red-2) / <alpha-value>)";
+            "red-3": "rgb(var(--color-red-3) / <alpha-value>)";
+            "accent-red": "rgb(var(--color-accent-red) / <alpha-value>)";
+            "accent-purple": "rgb(var(--color-accent-purple) / <alpha-value>)";
+            "accent-fuchsia": "rgb(var(--color-accent-fuchsia) / <alpha-value>)";
+            "accent-orange": "rgb(var(--color-accent-orange) / <alpha-value>)";
+            "accent-cerulean": "rgb(var(--color-accent-cerulean) / <alpha-value>)";
+            "accent-aqua": "rgb(var(--color-accent-aqua) / <alpha-value>)";
         };
@@ -114,0 +117,0 @@ boxShadow: {

package.json

 {
   "name": "@opensea/ui-kit",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "OpenSea's Design System implementation in React",
@@ -68,3 +68,3 @@ "license": "MIT",
     "autoprefixer": "10.4.15",
-    "dd-trace": "4.13.1",
+    "dd-trace": "4.15.0",
     "hygen": "6.2.11",
@@ -71,0 +71,0 @@ "jsdom": "22.1.0",

src/styles/tailwind-base.ts

@@ -9,36 +9,37 @@ import type { Config } from "tailwindcss"
 
-  white: "var(--color-white)",
-  black: "var(--color-black)",
+  white: "rgb(var(--color-white) / <alpha-value>)",
+  black: "rgb(var(--color-black) / <alpha-value>)",
 
   // Grays
-  "gray-1": "var(--color-gray-1)",
-  "gray-2": "var(--color-gray-2)",
-  "gray-3": "var(--color-gray-3)",
+  "gray-1": "rgb(var(--color-gray-1) / <alpha-value>)",
+  "gray-2": "rgb(var(--color-gray-2) / <alpha-value>)",
+  "gray-3": "rgb(var(--color-gray-3) / <alpha-value>)",
 
   // Blues
-  "blue-1": "var(--color-blue-1)",
-  "blue-2": "var(--color-blue-2)",
-  "blue-3": "var(--color-blue-3)",
-  "blue-4": "var(--color-blue-4)",
-  "blue-5": "var(--color-blue-5)",
+  "blue-1": "rgb(var(--color-blue-1) / <alpha-value>)",
+  "blue-2": "rgb(var(--color-blue-2) / <alpha-value>)",
+  "blue-3": "rgb(var(--color-blue-3) / <alpha-value>)",
+  "blue-4": "rgb(var(--color-blue-4) / <alpha-value>)",
+  "blue-5": "rgb(var(--color-blue-5) / <alpha-value>)",
 
   // Greens
-  "green-1": "var(--color-green-1)",
-  "green-2": "var(--color-green-2)",
+  "green-1": "rgb(var(--color-green-1) / <alpha-value>)",
+  "green-2": "rgb(var(--color-green-2) / <alpha-value>)",
 
   // Yellows
-  "yellow-1": "var(--color-yellow-1)",
-  "yellow-2": "var(--color-yellow-2)",
+  "yellow-1": "rgb(var(--color-yellow-1) / <alpha-value>)",
+  "yellow-2": "rgb(var(--color-yellow-2) / <alpha-value>)",
 
   // Reds
-  "red-1": "var(--color-red-1)",
-  "red-2": "var(--color-red-2)",
+  "red-1": "rgb(var(--color-red-1) / <alpha-value>)",
+  "red-2": "rgb(var(--color-red-2) / <alpha-value>)",
+  "red-3": "rgb(var(--color-red-3) / <alpha-value>)",
 
   // Accents
-  "accent-red": "var(--color-accent-red)",
-  "accent-purple": "var(--color-accent-purple)",
-  "accent-fuscia": "var(--color-accent-fuscia)",
-  "accent-orange": "var(--color-accent-orange)",
-  "accent-cerulean": "var(--color-accent-cerulean)",
-  "accent-aqua": "var(--color-accent-aqua)",
+  "accent-red": "rgb(var(--color-accent-red) / <alpha-value>)",
+  "accent-purple": "rgb(var(--color-accent-purple) / <alpha-value>)",
+  "accent-fuchsia": "rgb(var(--color-accent-fuchsia) / <alpha-value>)",
+  "accent-orange": "rgb(var(--color-accent-orange) / <alpha-value>)",
+  "accent-cerulean": "rgb(var(--color-accent-cerulean) / <alpha-value>)",
+  "accent-aqua": "rgb(var(--color-accent-aqua) / <alpha-value>)",
 } as const
@@ -53,4 +54,4 @@
       // Base background
-      "base-1": "var(--color-base-1)",
-      "base-2": "var(--color-base-2)",
+      "base-1": "rgb(var(--color-base-1) / <alpha-value>)",
+      "base-2": "rgb(var(--color-base-2) / <alpha-value>)",
 
@@ -63,6 +64,7 @@ // Component background grays
       // Elevation
-      "elevation-1": "var(--color-elevation-1)",
-      "elevation-1-subtle": "var(--color-elevation-1-subtle)",
-      "elevation-2": "var(--color-elevation-2)",
-      "elevation-3": "var(--color-elevation-3)",
+      "elevation-1": "rgb(var(--color-elevation-1) / <alpha-value>)",
+      "elevation-1-subtle":
+        "rgb(var(--color-elevation-1-subtle) / <alpha-value>)",
+      "elevation-2": "rgb(var(--color-elevation-2) / <alpha-value>)",
+      "elevation-3": "rgb(var(--color-elevation-3) / <alpha-value>)",
 
@@ -77,18 +79,22 @@ // In case we need to use border colors as background colors e.g. Separator
       // Base text
-      primary: "var(--color-text-primary)",
-      secondary: "var(--color-text-secondary)",
+      primary: "rgb(var(--color-text-primary) / <alpha-value>)",
+      secondary: "rgb(var(--color-text-secondary) / <alpha-value>)",
 
       // Interactive text
-      "interactive-primary": "var(--color-text-interactive-primary)",
+      "interactive-primary":
+        "rgb(var(--color-text-interactive-primary) / <alpha-value>)",
       "interactive-primary-hover":
-        "var(--color-text-interactive-primary-hover)",
-      "interactive-secondary": "var(--color-text-interactive-secondary)",
+        "rgb(var(--color-text-interactive-primary-hover) / <alpha-value>)",
+      "interactive-secondary":
+        "rgb(var(--color-text-interactive-secondary) / <alpha-value>)",
       "interactive-secondary-hover":
-        "var(--color-text-interactive-secondary-hover)",
+        "rgb(var(--color-text-interactive-secondary-hover) / <alpha-value>)",
 
       // Interactive icons
-      "icon-primary": "var(--color-icon-primary)",
-      "icon-primary-hover": "var(--color-icon-primary-hover)",
-      "icon-secondary": "var(--color-icon-secondary)",
-      "icon-secondary-hover": "var(--color-icon-secondary-hover)",
+      "icon-primary": "rgb(var(--color-icon-primary) / <alpha-value>)",
+      "icon-primary-hover":
+        "rgb(var(--color-icon-primary-hover) / <alpha-value>)",
+      "icon-secondary": "rgb(var(--color-icon-secondary) / <alpha-value>)",
+      "icon-secondary-hover":
+        "rgb(var(--color-icon-secondary-hover) / <alpha-value>)",
     },
@@ -95,0 +101,0 @@ borderColor: {

No alert changes

Improved metrics

Total package byte prevSize

737968

increased by95.68%

Number of package files

89

increased by5.95%

Lines of code

7118

increased by2.26%

No dependency changes