@uipath/apollo-wind 1.5.0 → 2.0.0-pr482.0700da2

package/dist/styles.css

@@ -331,24 +331,23 @@
     --color-chip-success-background: var(--color-chip-success-background);
     --color-error-icon: var(--color-error-icon);
     --color-error-icon-inverse: var(--color-error-icon-inverse);
-    --color-error-text: var(--color-error-text);
-    --color-error-background: var(--color-error-background);
+    --color-error-text: var(--error);
+    --color-error-background: var(--error-background);
     --color-error-foreground-inverse: var(--color-error-foreground-inverse);
     --color-info-foreground: var(--color-info-foreground);
     --color-info-icon: var(--color-info-icon);
     --color-info-icon-inverse: var(--color-info-icon-inverse);
-    --color-info-text: var(--color-info-text);
+    --color-info-text: var(--info);
     --color-info-foreground-inverse: var(--color-info-foreground-inverse);
-    --color-info-background: var(--color-info-background);
+    --color-info-background: var(--info-background);
     --color-success-icon: var(--color-success-icon);
     --color-success-icon-inverse: var(--color-success-icon-inverse);
-    --color-success-text: var(--color-success-text);
-    --color-success-background: var(--color-success-background);
+    --color-success-background: var(--success-background);
     --color-success-foreground-inverse: var(--color-success-foreground-inverse);
     --color-warning-icon: var(--color-warning-icon);
     --color-warning-icon-inverse: var(--color-warning-icon-inverse);
-    --color-warning-text: var(--color-warning-text);
-    --color-warning-background: var(--color-warning-background);
+    --color-warning-text: var(--warning);
+    --color-warning-background: var(--warning-background);
     --color-warning-foreground-inverse: var(--color-warning-foreground-inverse);
     --color-icon-default: var(--color-icon-default);
     --color-icon-inverted-default: var(--color-icon-inverted-default);
@@ -949,14 +948,14 @@
     width: calc(var(--spacing) * 24);
     height: calc(var(--spacing) * 24);
   }
-  .size-\[--cell-size\] {
-    width: --cell-size;
-    height: --cell-size;
-  }
   .size-\[360px\] {
     width: 360px;
     height: 360px;
   }
+  .size-\[var\(--cell-size\)\] {
+    width: var(--cell-size);
+    height: var(--cell-size);
+  }
   .size-full {
     width: 100%;
     height: 100%;
@@ -1039,9 +1038,6 @@
   .h-96 {
     height: calc(var(--spacing) * 96);
   }
-  .h-\[--cell-size\] {
-    height: --cell-size;
-  }
   .h-\[1px\] {
     height: 1px;
   }
@@ -1099,6 +1095,9 @@
   .h-\[calc\(100vh-10rem\)\] {
     height: calc(100vh - 10rem);
   }
+  .h-\[var\(--cell-size\)\] {
+    height: var(--cell-size);
+  }
   .h-\[var\(--radix-select-trigger-height\)\] {
     height: var(--radix-select-trigger-height);
   }
@@ -1282,9 +1281,6 @@
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
-  .w-\[--cell-size\] {
-    width: --cell-size;
-  }
   .w-\[--radix-popover-trigger-width\] {
     width: --radix-popover-trigger-width;
   }
@@ -1402,6 +1398,9 @@
   .w-\[930px\] {
     width: 930px;
   }
+  .w-\[var\(--cell-size\)\] {
+    width: var(--cell-size);
+  }
   .w-auto {
     width: auto;
   }
@@ -2489,6 +2488,9 @@
   .bg-emerald-950 {
     background-color: var(--color-emerald-950);
   }
+  .bg-error-background {
+    background-color: var(--error-background);
+  }
   .bg-foreground {
     background-color: var(--foreground);
   }
@@ -2642,6 +2644,9 @@
   .bg-indigo-950 {
     background-color: var(--color-indigo-950);
   }
+  .bg-info-background {
+    background-color: var(--info-background);
+  }
   .bg-muted {
     background-color: var(--muted);
   }
@@ -2963,6 +2968,9 @@
   .bg-slate-950 {
     background-color: var(--color-slate-950);
   }
+  .bg-success-background {
+    background-color: var(--success-background);
+  }
   .bg-success\/10 {
     background-color: var(--success);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3086,6 +3094,9 @@
   .bg-violet-950 {
     background-color: var(--color-violet-950);
   }
+  .bg-warning-background {
+    background-color: var(--warning-background);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -3331,8 +3342,8 @@
   .px-10 {
     padding-inline: calc(var(--spacing) * 10);
   }
-  .px-\[--cell-size\] {
-    padding-inline: --cell-size;
+  .px-\[var\(--cell-size\)\] {
+    padding-inline: var(--cell-size);
   }
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
@@ -3718,6 +3729,9 @@
   .text-destructive-foreground {
     color: var(--destructive-foreground);
   }
+  .text-error {
+    color: var(--error);
+  }
   .text-foreground {
     color: var(--foreground);
   }
@@ -3790,6 +3804,9 @@
   .text-green-800 {
     color: var(--color-green-800);
   }
+  .text-info {
+    color: var(--info);
+  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -3859,6 +3876,9 @@
   .text-violet-400 {
     color: var(--color-violet-400);
   }
+  .text-warning {
+    color: var(--warning);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -4597,6 +4617,16 @@
       }
     }
   }
+  .hover\:bg-error-background\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--error-background);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--error-background) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-foreground-accent-muted {
     &:hover {
       @media (hover: hover) {
@@ -4618,6 +4648,16 @@
       }
     }
   }
+  .hover\:bg-info-background\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--info-background);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--info-background) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-muted {
     &:hover {
       @media (hover: hover) {
@@ -4716,6 +4756,16 @@
       }
     }
   }
+  .hover\:bg-success-background\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--success-background);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--success-background) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-surface {
     &:hover {
       @media (hover: hover) {
@@ -4754,6 +4804,16 @@
       }
     }
   }
+  .hover\:bg-warning-background\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--warning-background);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--warning-background) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:text-accent-foreground {
     &:hover {
       @media (hover: hover) {
@@ -5231,6 +5291,11 @@
       color: var(--primary-foreground);
     }
   }
+  .data-\[selected-single\=true\]\:rounded-full {
+    &[data-selected-single="true"] {
+      border-radius: calc(infinity * 1px);
+    }
+  }
   .data-\[selected-single\=true\]\:bg-primary {
     &[data-selected-single="true"] {
       background-color: var(--primary);
@@ -5246,11 +5311,6 @@
       background-color: var(--accent);
     }
   }
-  .data-\[selected\=true\]\:rounded-none {
-    &[data-selected="true"] {
-      border-radius: 0;
-    }
-  }
   .data-\[selected\=true\]\:text-accent-foreground {
     &[data-selected="true"] {
       color: var(--accent-foreground);
@@ -5794,12 +5854,6 @@
       visibility: hidden;
     }
   }
-  .\[\&_svg\]\:size-3\.5 {
-    & svg {
-      width: calc(var(--spacing) * 3.5);
-      height: calc(var(--spacing) * 3.5);
-    }
-  }
   .\[\&_svg\]\:size-4 {
     & svg {
       width: calc(var(--spacing) * 4);
@@ -5835,12 +5889,6 @@
       border-width: 0px;
     }
   }
-  .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md {
-    &:first-child[data-selected=true] button {
-      border-top-left-radius: var(--radius-md);
-      border-bottom-left-radius: var(--radius-md);
-    }
-  }
   .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
     &:has([role=checkbox]) {
       padding-right: calc(var(--spacing) * 0);
@@ -5864,12 +5912,6 @@
       }
     }
   }
-  .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md {
-    &:last-child[data-selected=true] button {
-      border-top-right-radius: var(--radius-md);
-      border-bottom-right-radius: var(--radius-md);
-    }
-  }
   .\[\&\:not\(\:last-child\)\]\:border-b {
     &:not(:last-child) {
       border-bottom-style: var(--tw-border-style);
@@ -7588,6 +7630,10 @@ body.dark, .dark {
   --success: var(--color-success-icon, #74c94b);
   --warning: var(--color-warning-icon, #ffbb27);
   --info: var(--color-info-foreground, #42a1ff);
+  --error-background: var(--color-error-background, #000000);
+  --info-background: var(--color-info-background, #000000);
+  --success-background: var(--color-success-background, #000000);
+  --warning-background: var(--color-warning-background, #000000);
   --ring: var(--color-primary, #66adff);
   --logo: var(--color-logo, #ffffff);
   --brand-subtle: var(--brand-lighter);
@@ -7646,6 +7692,12 @@ body.dark-hc, .dark-hc {
   --success: var(--color-success-icon, #74c94b);
   --warning: var(--color-warning-icon, #ffbb27);
   --info: var(--color-info-foreground, #42a1ff);
+  --error-background: var(--color-error-background, #000000);
+  --error-text: var(--color-error-text, #ffadad);
+  --info-background: var(--color-info-background, #000000);
+  --info-text: var(--color-info-text, #42a1ff);
+  --success-background: var(--color-success-background, #000000);
+  --warning-background: var(--color-warning-background, #000000);
   --ring: var(--color-primary, #badaff);
   --logo: var(--color-logo, #ffffff);
   --brand-subtle: var(--brand-lighter);
@@ -7704,6 +7756,10 @@ body.light, .light {
   --success: var(--color-success-icon, #038108);
   --warning: var(--color-warning-text, #9e6100);
   --info: var(--color-info-foreground, #1665b3);
+  --error-background: var(--color-error-background, #fff0f1);
+  --info-background: var(--color-info-background, #e9f1fa);
+  --success-background: var(--color-success-background, #eeffe5);
+  --warning-background: var(--color-warning-background, #fff3db);
   --ring: var(--color-primary, #0067df);
   --logo: var(--color-logo, #fa4616);
   --brand-subtle: var(--brand-lighter);
@@ -7762,6 +7818,12 @@ body.light-hc, .light-hc {
   --success: var(--color-success-icon, #005603);
   --warning: var(--color-warning-text, #273139);
   --info: var(--color-info-foreground, #11508d);
+  --error-background: var(--color-error-background, #fff0f1);
+  --error-text: var(--color-error-text, #a6040a);
+  --info-background: var(--color-info-background, #e9f1fa);
+  --info-text: var(--color-info-text, #11508d);
+  --success-background: var(--color-success-background, #eeffe5);
+  --warning-background: var(--color-warning-background, #fff3db);
   --ring: var(--color-primary, #00489d);
   --logo: var(--color-logo, #fa4616);
   --brand-subtle: var(--brand-lighter);

package/dist/tailwind.css

@@ -60,6 +60,10 @@ body.dark, .dark {
   --success: var(--color-success-icon, #74c94b);
   --warning: var(--color-warning-icon, #ffbb27);
   --info: var(--color-info-foreground, #42a1ff);
+  --error-background: var(--color-error-background, #000000);
+  --info-background: var(--color-info-background, #000000);
+  --success-background: var(--color-success-background, #000000);
+  --warning-background: var(--color-warning-background, #000000);
 
   /* ── Ring / Focus ────────────────────────────────────────────────────── */
   --ring: var(--color-primary, #66adff);
@@ -137,6 +141,12 @@ body.dark-hc, .dark-hc {
   --success: var(--color-success-icon, #74c94b);
   --warning: var(--color-warning-icon, #ffbb27);
   --info: var(--color-info-foreground, #42a1ff);
+  --error-background: var(--color-error-background, #000000);
+  --error-text: var(--color-error-text, #ffadad);
+  --info-background: var(--color-info-background, #000000);
+  --info-text: var(--color-info-text, #42a1ff);
+  --success-background: var(--color-success-background, #000000);
+  --warning-background: var(--color-warning-background, #000000);
 
   /* ── Ring / Focus ────────────────────────────────────────────────────── */
   --ring: var(--color-primary, #badaff);
@@ -214,6 +224,10 @@ body.light, .light {
   --success: var(--color-success-icon, #038108);
   --warning: var(--color-warning-text, #9e6100);
   --info: var(--color-info-foreground, #1665b3);
+  --error-background: var(--color-error-background, #fff0f1);
+  --info-background: var(--color-info-background, #e9f1fa);
+  --success-background: var(--color-success-background, #eeffe5);
+  --warning-background: var(--color-warning-background, #fff3db);
 
   /* ── Ring / Focus ────────────────────────────────────────────────────── */
   --ring: var(--color-primary, #0067df);
@@ -291,6 +305,12 @@ body.light-hc, .light-hc {
   --success: var(--color-success-icon, #005603);
   --warning: var(--color-warning-text, #273139);
   --info: var(--color-info-foreground, #11508d);
+  --error-background: var(--color-error-background, #fff0f1);
+  --error-text: var(--color-error-text, #a6040a);
+  --info-background: var(--color-info-background, #e9f1fa);
+  --info-text: var(--color-info-text, #11508d);
+  --success-background: var(--color-success-background, #eeffe5);
+  --warning-background: var(--color-warning-background, #fff3db);
 
   /* ── Ring / Focus ────────────────────────────────────────────────────── */
   --ring: var(--color-primary, #00489d);
@@ -943,24 +963,24 @@ body.canvas, .canvas {
   --color-chip-success-background: var(--color-chip-success-background);
   --color-error-icon: var(--color-error-icon);
   --color-error-icon-inverse: var(--color-error-icon-inverse);
-  --color-error-text: var(--color-error-text);
-  --color-error-background: var(--color-error-background);
+  --color-error-text: var(--error);
+  --color-error-background: var(--error-background);
   --color-error-foreground-inverse: var(--color-error-foreground-inverse);
   --color-info-foreground: var(--color-info-foreground);
   --color-info-icon: var(--color-info-icon);
   --color-info-icon-inverse: var(--color-info-icon-inverse);
-  --color-info-text: var(--color-info-text);
+  --color-info-text: var(--info);
   --color-info-foreground-inverse: var(--color-info-foreground-inverse);
-  --color-info-background: var(--color-info-background);
+  --color-info-background: var(--info-background);
   --color-success-icon: var(--color-success-icon);
   --color-success-icon-inverse: var(--color-success-icon-inverse);
-  --color-success-text: var(--color-success-text);
-  --color-success-background: var(--color-success-background);
+  --color-success-text: var(--success);
+  --color-success-background: var(--success-background);
   --color-success-foreground-inverse: var(--color-success-foreground-inverse);
   --color-warning-icon: var(--color-warning-icon);
   --color-warning-icon-inverse: var(--color-warning-icon-inverse);
-  --color-warning-text: var(--color-warning-text);
-  --color-warning-background: var(--color-warning-background);
+  --color-warning-text: var(--warning);
+  --color-warning-background: var(--warning-background);
   --color-warning-foreground-inverse: var(--color-warning-foreground-inverse);
   --color-icon-default: var(--color-icon-default);
   --color-icon-inverted-default: var(--color-icon-inverted-default);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "1.5.0",
+  "version": "2.0.0-pr482.0700da2",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",