@eqtylab/equality 1.2.4 → 1.4.0

package/dist/metric-card.module.module.css.module.css

@@ -87,14 +87,6 @@
     --tw-shadow-color: color-mix(in oklab, rgba(0, 0, 0, 0.1) var(--tw-shadow-alpha), transparent);
   }
 }
-.metric-card--floating {
-  border-color: var(--color-border-floating);
-  background-color: var(--color-background-floating);
-  --tw-shadow-color: rgba(0, 0, 0, 0.15);
-  @supports (color: color-mix(in lab, red, red)) {
-    --tw-shadow-color: color-mix(in oklab, rgba(0, 0, 0, 0.15) var(--tw-shadow-alpha), transparent);
-  }
-}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;

package/dist/popover.module.module.css.module.css

@@ -1,6 +1,6 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 .popover-content {
-  background-color: var(--color-background-floating);
+  background-color: var(--color-background-overlay);
   color: var(--color-text-primary);
   --tw-outline-style: none;
   outline-style: none;
@@ -10,12 +10,12 @@
   }
   border-style: var(--tw-border-style);
   border-width: 1px;
-  border-color: var(--color-border-floating);
+  border-color: var(--color-border-overlay);
   --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  --tw-shadow-color: rgba(0, 0, 0, 0.15);
+  --tw-shadow-color: rgba(0, 0, 0, 0.1);
   @supports (color: color-mix(in lab, red, red)) {
-    --tw-shadow-color: color-mix(in oklab, rgba(0, 0, 0, 0.15) var(--tw-shadow-alpha), transparent);
+    --tw-shadow-color: color-mix(in oklab, rgba(0, 0, 0, 0.1) var(--tw-shadow-alpha), transparent);
   }
   z-index: 50;
   width: calc(0.25rem * 72);

package/dist/select.module.module.css.module.css

@@ -65,7 +65,7 @@
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--color-border);
-  background-color: var(--color-background-floating);
+  background-color: var(--color-background-overlay);
   color: var(--color-text-primary);
   z-index: 50;
   border-radius: var(--radius-md, 0.375rem);
@@ -246,17 +246,6 @@
 .select-content--overlay .select-item {
   --mix-color: var(--color-background-overlay);
 }
-.select-content--floating {
-  border-color: var(--color-border-floating);
-  background-color: var(--color-background-floating);
-  --tw-shadow-color: rgba(0, 0, 0, 0.15);
-  @supports (color: color-mix(in lab, red, red)) {
-    --tw-shadow-color: color-mix(in oklab, rgba(0, 0, 0, 0.15) var(--tw-shadow-alpha), transparent);
-  }
-}
-.select-content--floating .select-item {
-  --mix-color: var(--color-background-floating);
-}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;

package/dist/sort-button.module.module.css.module.css

@@ -11,7 +11,7 @@
   gap: calc(0.25rem * 2);
   &:hover {
     @media (hover: hover) {
-      color: var(--color-brand-primary);
+      color: var(--color-text-link);
     }
   }
   &>svg {

package/dist/spinner.module.module.css.module.css

@@ -10,7 +10,7 @@
   z-index: 10;
 }
 .spinner-background {
-  border-color: var(--color-greyscale-800);
+  border-color: var(--color-background-sunken);
   border-radius: calc(infinity * 1px);
   position: absolute;
   inset: calc(0.25rem * 0);

package/dist/table-components.module.module.css.module.css

@@ -1,6 +1,5 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 .table {
-  position: relative;
   width: 100%;
   overflow: auto;
 }
@@ -34,15 +33,8 @@
   --tw-font-weight: 500;
   font-weight: 500;
 }
-.table-row {
-  border-bottom-style: var(--tw-border-style);
-  border-bottom-width: 1px;
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
-  transition-duration: var(--tw-duration, 150ms);
-}
 .table-head {
-  height: calc(0.25rem * 12);
+  height: calc(0.25rem * 10);
   padding-inline: calc(0.25rem * 4);
   vertical-align: middle;
   text-align: left;
@@ -58,7 +50,7 @@
 }
 .table-cell {
   padding-inline: calc(0.25rem * 4);
-  padding-block: calc(0.25rem * 3);
+  padding-block: calc(0.25rem * 2);
   vertical-align: middle;
   &:has([role=checkbox]) {
     padding-right: calc(0.25rem * 0);
@@ -76,6 +68,16 @@
 }
 .table--sunken .table-body {
   background-color: var(--color-background-sunken);
+  --table-stripe-bg: light-dark(
+    var(--color-background-sunken),
+    var(--color-background-sunken)
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --table-stripe-bg: light-dark(
+    color-mix(in oklch, var(--color-background-sunken), black 2%),
+    color-mix(in oklch, var(--color-background-sunken), white 4%)
+  );
+  }
 }
 .table--base .table-header,
 .table--base .table-footer {
@@ -83,6 +85,16 @@
 }
 .table--base .table-body {
   background-color: var(--color-background-base);
+  --table-stripe-bg: light-dark(
+    var(--color-background-base),
+    var(--color-background-base)
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --table-stripe-bg: light-dark(
+    color-mix(in oklch, var(--color-background-base), black 2%),
+    color-mix(in oklch, var(--color-background-base), white 4%)
+  );
+  }
 }
 .table--raised .table-header,
 .table--raised .table-footer {
@@ -90,20 +102,36 @@
 }
 .table--raised .table-body {
   background-color: var(--color-background-raised);
+  --table-stripe-bg: light-dark(
+    var(--color-background-raised),
+    var(--color-background-raised)
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --table-stripe-bg: light-dark(
+    color-mix(in oklch, var(--color-background-raised), black 2%),
+    color-mix(in oklch, var(--color-background-raised), white 4%)
+  );
+  }
 }
 .table--overlay .table-header,
 .table--overlay .table-footer {
-  background-color: var(--color-background-floating);
+  background-color: var(--color-background-overlay);
 }
 .table--overlay .table-body {
   background-color: var(--color-background-overlay);
+  --table-stripe-bg: light-dark(
+    var(--color-background-overlay),
+    var(--color-background-overlay)
+  );
+  @supports (color: color-mix(in lab, red, red)) {
+    --table-stripe-bg: light-dark(
+    color-mix(in oklch, var(--color-background-overlay), black 2%),
+    color-mix(in oklch, var(--color-background-overlay), white 4%)
+  );
+  }
 }
-.table--floating .table-header,
-.table--floating .table-footer {
-  background-color: var(--color-background-top);
-}
-.table--floating .table-body {
-  background-color: var(--color-background-floating);
+.table-body .table-row:nth-child(even) {
+  background-color: var(--table-stripe-bg);
 }
 @property --tw-border-style {
   syntax: "*";

package/dist/table.module.module.css.module.css

@@ -6,19 +6,38 @@
 .table-row-clickable {
   --mix-color: var(--color-brand-primary);
   --hover-darken: 50%;
+  --hover-lighten: 50%;
   cursor: pointer;
   &:hover {
     @media (hover: hover) {
-      background-color: var(--mix-color);
+      background-color: var(--mix-color) !important;
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklch, var(--mix-color), black var(--hover-darken, 20%));
+        background-color: color-mix(in oklch, var(--mix-color), white var(--hover-lighten, 20%)) !important;
+      }
+    }
+  }
+  &:where(html[data-equality-theme=dark], html[data-equality-theme=dark] *, [data-equality-theme=dark] .root, [data-equality-theme=dark] .root *) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--mix-color) !important;
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklch, var(--mix-color), black var(--hover-darken, 20%)) !important;
+        }
       }
     }
   }
   &[data-state="selected"] {
     background-color: var(--mix-color);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklch, var(--mix-color), black var(--hover-darken, 20%));
+      background-color: color-mix(in oklch, var(--mix-color), white var(--hover-lighten, 20%));
+    }
+  }
+  &:where(html[data-equality-theme=dark], html[data-equality-theme=dark] *, [data-equality-theme=dark] .root, [data-equality-theme=dark] .root *) {
+    &[data-state="selected"] {
+      background-color: var(--mix-color);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklch, var(--mix-color), black var(--hover-darken, 20%));
+      }
     }
   }
 }
@@ -69,15 +88,6 @@
 .table--overlay.table-border {
   border-color: var(--color-border-overlay);
 }
-.table--floating {
-  --tw-shadow-color: rgba(0, 0, 0, 0.15);
-  @supports (color: color-mix(in lab, red, red)) {
-    --tw-shadow-color: color-mix(in oklab, rgba(0, 0, 0, 0.15) var(--tw-shadow-alpha), transparent);
-  }
-}
-.table--floating.table-border {
-  border-color: var(--color-border-floating);
-}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;

package/dist/theme-base.css

@@ -25,7 +25,6 @@
   --color-shadow-base: transparent;
   --color-shadow-raised: rgba(0, 0, 0, 0.05);
   --color-shadow-overlay: rgba(0, 0, 0, 0.1);
-  --color-shadow-floating: rgba(0, 0, 0, 0.15);
 
   /* Animation */
   --animate-grow-in: grow-in 800ms ease-in-out backwards;

package/dist/theme-utilities.css

@@ -23,7 +23,7 @@
 }
 
 @utility dropdown-content {
-  @apply bg-background-floating text-text-primary border-border border;
+  @apply bg-background-overlay text-text-primary border-border border;
   @apply z-dropdown rounded-md p-1;
   @apply overflow-y-auto overflow-x-hidden;
   @apply max-h-80 min-w-32;

package/dist/theme.module.module.css.module.css

@@ -96,7 +96,6 @@
     }
     --color-background-base: var(--color-background-base);
     --color-background-bottom: var(--color-background-bottom);
-    --color-background-floating: var(--color-background-floating);
     --color-background-overlay: var(--color-background-overlay);
     --color-background-raised: var(--color-background-raised);
     --color-background-sunken: var(--color-background-sunken);
@@ -115,6 +114,7 @@
     --color-badge-background-primary: var(--color-badge-background-primary);
     --color-badge-background-question: var(--color-badge-background-question);
     --color-badge-background-ready-for-review: var(--color-badge-background-ready-for-review);
+    --color-badge-background-secondary: var(--color-badge-background-secondary);
     --color-badge-background-success: var(--color-badge-background-success);
     --color-badge-background-warning: var(--color-badge-background-warning);
     --color-badge-text-accepted: var(--color-badge-text-accepted);
@@ -130,11 +130,11 @@
     --color-badge-text-primary: var(--color-badge-text-primary);
     --color-badge-text-question: var(--color-badge-text-question);
     --color-badge-text-ready-for-review: var(--color-badge-text-ready-for-review);
+    --color-badge-text-secondary: var(--color-badge-text-secondary);
     --color-badge-text-success: var(--color-badge-text-success);
     --color-badge-text-warning: var(--color-badge-text-warning);
     --color-border-base: var(--color-border-base);
     --color-border-bottom: var(--color-border-bottom);
-    --color-border-floating: var(--color-border-floating);
     --color-border-overlay: var(--color-border-overlay);
     --color-border-raised: var(--color-border-raised);
     --color-border-sunken: var(--color-border-sunken);
@@ -429,14 +429,13 @@
   --color-amber-700: color(display-p3 0.4327 0.2812 0.1347);
   --color-amber-800: color(display-p3 0.2643 0.1753 0.09139);
   --color-amber-900: color(display-p3 0.1121 0.07777 0.04646);
-  --color-background-base: color(display-p3 0.8264 0.8324 0.8394);
-  --color-background-bottom: color(display-p3 0.6765 0.6823 0.689);
-  --color-background-floating: color(display-p3 0.9424 0.9485 0.9557);
-  --color-background-overlay: color(display-p3 0.9034 0.9095 0.9166);
-  --color-background-raised: color(display-p3 0.8648 0.8708 0.8779);
-  --color-background-sunken: color(display-p3 0.7758 0.7817 0.7887);
-  --color-background-top: color(display-p3 0.9817 0.9878 0.9951);
-  --color-background: color(display-p3 0.8264 0.8324 0.8394);
+  --color-background-base: color(display-p3 1 1 1);
+  --color-background-bottom: color(display-p3 0.7758 0.7817 0.7887);
+  --color-background-overlay: color(display-p3 0.9946 0.9998 0.9999);
+  --color-background-raised: color(display-p3 0.9554 0.9616 0.9688);
+  --color-background-sunken: color(display-p3 0.8648 0.8708 0.8779);
+  --color-background-top: color(display-p3 0.9294 0.9355 0.9426);
+  --color-background: color(display-p3 1 1 1);
   --color-badge-background-accepted: color(display-p3 0.795 0.7755 0.9866);
   --color-badge-background-comment: color(display-p3 0.795 0.7755 0.9866);
   --color-badge-background-compliant: color(display-p3 0.7403 0.8486 0.7417);
@@ -450,6 +449,7 @@
   --color-badge-background-primary: color(display-p3 0.795 0.7755 0.9866);
   --color-badge-background-question: color(display-p3 0.795 0.7755 0.9866);
   --color-badge-background-ready-for-review: color(display-p3 0.7289 0.7853 0.9401);
+  --color-badge-background-secondary: color(display-p3 0.7289 0.7853 0.9401);
   --color-badge-background-success: color(display-p3 0.7403 0.8486 0.7417);
   --color-badge-background-warning: color(display-p3 0.9327 0.8528 0.7204);
   --color-badge-text-accepted: color(display-p3 0.1608 0.1145 0.3417);
@@ -465,6 +465,7 @@
   --color-badge-text-primary: color(display-p3 0.1608 0.1145 0.3417);
   --color-badge-text-question: color(display-p3 0.1608 0.1145 0.3417);
   --color-badge-text-ready-for-review: color(display-p3 0.1017 0.1411 0.2832);
+  --color-badge-text-secondary: color(display-p3 0.1017 0.1411 0.2832);
   --color-badge-text-success: color(display-p3 0.1097 0.1998 0.08667);
   --color-badge-text-warning: color(display-p3 0.2723 0.1933 0.09642);
   --color-black: color(display-p3 0 0 0);
@@ -479,7 +480,6 @@
   --color-blue-900: color(display-p3 0.06177 0.08243 0.1475);
   --color-border-base: color(display-p3 0.7432 0.7432 0.7432);
   --color-border-bottom: color(display-p3 0.6158 0.6214 0.6281);
-  --color-border-floating: color(display-p3 0.8011 0.807 0.814);
   --color-border-overlay: color(display-p3 0.8011 0.807 0.814);
   --color-border-raised: color(display-p3 0.7383 0.7441 0.751);
   --color-border-sunken: color(display-p3 0.7432 0.7432 0.7432);
@@ -672,7 +672,6 @@
   color-scheme: dark;
   --color-background-base: color(display-p3 0.06018 0.06019 0.06787);
   --color-background-bottom: color(display-p3 0.00001094 0.000005131 0.00006469);
-  --color-background-floating: color(display-p3 0.1399 0.14 0.1485);
   --color-background-overlay: color(display-p3 0.1121 0.1122 0.1204);
   --color-background-raised: color(display-p3 0.08523 0.08526 0.09324);
   --color-background-sunken: color(display-p3 0.03547 0.03547 0.04268);
@@ -691,6 +690,7 @@
   --color-badge-background-primary: color(display-p3 0.2473 0.1645 0.5241);
   --color-badge-background-question: color(display-p3 0.2473 0.1645 0.5241);
   --color-badge-background-ready-for-review: color(display-p3 0.1442 0.2013 0.4303);
+  --color-badge-background-secondary: color(display-p3 0.1442 0.2013 0.4303);
   --color-badge-background-success: color(display-p3 0.1689 0.3045 0.136);
   --color-badge-background-warning: color(display-p3 0.4487 0.322 0.1436);
   --color-badge-text-accepted: color(display-p3 0.795 0.7755 0.9866);
@@ -706,11 +706,11 @@
   --color-badge-text-primary: color(display-p3 0.795 0.7755 0.9866);
   --color-badge-text-question: color(display-p3 0.795 0.7755 0.9866);
   --color-badge-text-ready-for-review: color(display-p3 0.7289 0.7853 0.9401);
+  --color-badge-text-secondary: color(display-p3 0.7289 0.7853 0.9401);
   --color-badge-text-success: color(display-p3 0.8698 0.8698 0.8698);
   --color-badge-text-warning: color(display-p3 0.9327 0.8528 0.7204);
   --color-border-base: color(display-p3 0.1792 0.1792 0.1792);
   --color-border-bottom: color(display-p3 0.1589 0.159 0.1677);
-  --color-border-floating: color(display-p3 0.3328 0.3328 0.3426);
   --color-border-overlay: color(display-p3 0.2796 0.2796 0.2891);
   --color-border-raised: color(display-p3 0.228 0.2281 0.2372);
   --color-border-sunken: color(display-p3 0.1792 0.1792 0.1792);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@eqtylab/equality",
   "description": "EQTYLab's component and token-based design system",
   "homepage": "https://equality.eqtylab.io/",
-  "version": "1.2.4",
+  "version": "1.4.0",
   "license": "Apache-2.0",
   "keywords": [
     "component library",
@@ -16,6 +16,7 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "development": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"