@vsn-ux/gaia-styles 0.5.12 → 0.5.14

package/dist/all-10pt.css

@@ -686,7 +686,7 @@
     }
     &.ga-card--selected {
       border-color: var(--ga-color-border-focus);
-      background-color: var(--ga-color-surface-success);
+      background-color: var(--ga-color-surface-selected);
     }
   }
   .ga-calendar {
@@ -1156,7 +1156,7 @@
         color: var(--ga-color-text-disable-selected);
       }
       &.ga-dropdown__item--selected {
-        background-color: var(--ga-color-surface-success);
+        background-color: var(--ga-color-surface-selected);
         --tw-font-weight: 600;
         font-weight: 600;
         color: var(--ga-color-text-body);
@@ -2029,7 +2029,7 @@
   ));
     .ga-segmented-control__button {
       display: inline-flex;
-      height: calc(0.4rem * 9);
+      height: calc(0.4rem * 8.5);
       cursor: pointer;
       align-items: center;
       justify-content: center;
@@ -2038,7 +2038,6 @@
       border-style: var(--tw-border-style);
       border-width: 1px;
       border-color: transparent;
-      background-color: var(--ga-color-surface-primary);
       padding-inline: calc(0.4rem * 4);
       vertical-align: middle;
       --tw-leading: calc(0.4rem * 1);
@@ -2048,7 +2047,10 @@
       &.ga-segmented-control__button--selected, &:hover {
         border-color: var(--ga-color-border-action);
       }
-      &:hover {
+      &.ga-segmented-control__button--selected {
+        background-color: var(--ga-color-surface-primary);
+      }
+      &:hover:not(.ga-segmented-control__button--selected) {
         background-color: var(--ga-color-surface-action-hover-2);
         color: var(--ga-color-text-action-hover);
       }
@@ -2060,7 +2062,7 @@
       }
       &.ga-segmented-control__button--icon-only {
         padding-inline: calc(0.4rem * 2.25);
-        &:hover {
+        &:hover:not(.ga-segmented-control__button--selected) {
           color: var(--ga-color-icon-action-hover);
         }
       }
@@ -2237,6 +2239,9 @@
       }
       .ga-select__value {
         display: contents;
+        .ga-tag {
+          min-width: calc(0.4rem * 0);
+        }
       }
       .ga-select__input {
         height: calc(0.4rem * 6.5);

package/dist/all-no-reset-10pt.css

@@ -539,7 +539,7 @@
     }
     &.ga-card--selected {
       border-color: var(--ga-color-border-focus);
-      background-color: var(--ga-color-surface-success);
+      background-color: var(--ga-color-surface-selected);
     }
   }
   .ga-calendar {
@@ -1009,7 +1009,7 @@
         color: var(--ga-color-text-disable-selected);
       }
       &.ga-dropdown__item--selected {
-        background-color: var(--ga-color-surface-success);
+        background-color: var(--ga-color-surface-selected);
         --tw-font-weight: 600;
         font-weight: 600;
         color: var(--ga-color-text-body);
@@ -1882,7 +1882,7 @@
   ));
     .ga-segmented-control__button {
       display: inline-flex;
-      height: calc(0.4rem * 9);
+      height: calc(0.4rem * 8.5);
       cursor: pointer;
       align-items: center;
       justify-content: center;
@@ -1891,7 +1891,6 @@
       border-style: var(--tw-border-style);
       border-width: 1px;
       border-color: transparent;
-      background-color: var(--ga-color-surface-primary);
       padding-inline: calc(0.4rem * 4);
       vertical-align: middle;
       --tw-leading: calc(0.4rem * 1);
@@ -1901,7 +1900,10 @@
       &.ga-segmented-control__button--selected, &:hover {
         border-color: var(--ga-color-border-action);
       }
-      &:hover {
+      &.ga-segmented-control__button--selected {
+        background-color: var(--ga-color-surface-primary);
+      }
+      &:hover:not(.ga-segmented-control__button--selected) {
         background-color: var(--ga-color-surface-action-hover-2);
         color: var(--ga-color-text-action-hover);
       }
@@ -1913,7 +1915,7 @@
       }
       &.ga-segmented-control__button--icon-only {
         padding-inline: calc(0.4rem * 2.25);
-        &:hover {
+        &:hover:not(.ga-segmented-control__button--selected) {
           color: var(--ga-color-icon-action-hover);
         }
       }
@@ -2090,6 +2092,9 @@
       }
       .ga-select__value {
         display: contents;
+        .ga-tag {
+          min-width: calc(0.4rem * 0);
+        }
       }
       .ga-select__input {
         height: calc(0.4rem * 6.5);

package/dist/all-no-reset.css

@@ -539,7 +539,7 @@
     }
     &.ga-card--selected {
       border-color: var(--ga-color-border-focus);
-      background-color: var(--ga-color-surface-success);
+      background-color: var(--ga-color-surface-selected);
     }
   }
   .ga-calendar {
@@ -1009,7 +1009,7 @@
         color: var(--ga-color-text-disable-selected);
       }
       &.ga-dropdown__item--selected {
-        background-color: var(--ga-color-surface-success);
+        background-color: var(--ga-color-surface-selected);
         --tw-font-weight: 600;
         font-weight: 600;
         color: var(--ga-color-text-body);
@@ -1882,7 +1882,7 @@
   ));
     .ga-segmented-control__button {
       display: inline-flex;
-      height: calc(0.25rem * 9);
+      height: calc(0.25rem * 8.5);
       cursor: pointer;
       align-items: center;
       justify-content: center;
@@ -1891,7 +1891,6 @@
       border-style: var(--tw-border-style);
       border-width: 1px;
       border-color: transparent;
-      background-color: var(--ga-color-surface-primary);
       padding-inline: calc(0.25rem * 4);
       vertical-align: middle;
       --tw-leading: calc(0.25rem * 1);
@@ -1901,7 +1900,10 @@
       &.ga-segmented-control__button--selected, &:hover {
         border-color: var(--ga-color-border-action);
       }
-      &:hover {
+      &.ga-segmented-control__button--selected {
+        background-color: var(--ga-color-surface-primary);
+      }
+      &:hover:not(.ga-segmented-control__button--selected) {
         background-color: var(--ga-color-surface-action-hover-2);
         color: var(--ga-color-text-action-hover);
       }
@@ -1913,7 +1915,7 @@
       }
       &.ga-segmented-control__button--icon-only {
         padding-inline: calc(0.25rem * 2.25);
-        &:hover {
+        &:hover:not(.ga-segmented-control__button--selected) {
           color: var(--ga-color-icon-action-hover);
         }
       }
@@ -2090,6 +2092,9 @@
       }
       .ga-select__value {
         display: contents;
+        .ga-tag {
+          min-width: calc(0.25rem * 0);
+        }
       }
       .ga-select__input {
         height: calc(0.25rem * 6.5);

package/dist/all.css

@@ -686,7 +686,7 @@
     }
     &.ga-card--selected {
       border-color: var(--ga-color-border-focus);
-      background-color: var(--ga-color-surface-success);
+      background-color: var(--ga-color-surface-selected);
     }
   }
   .ga-calendar {
@@ -1156,7 +1156,7 @@
         color: var(--ga-color-text-disable-selected);
       }
       &.ga-dropdown__item--selected {
-        background-color: var(--ga-color-surface-success);
+        background-color: var(--ga-color-surface-selected);
         --tw-font-weight: 600;
         font-weight: 600;
         color: var(--ga-color-text-body);
@@ -2029,7 +2029,7 @@
   ));
     .ga-segmented-control__button {
       display: inline-flex;
-      height: calc(0.25rem * 9);
+      height: calc(0.25rem * 8.5);
       cursor: pointer;
       align-items: center;
       justify-content: center;
@@ -2038,7 +2038,6 @@
       border-style: var(--tw-border-style);
       border-width: 1px;
       border-color: transparent;
-      background-color: var(--ga-color-surface-primary);
       padding-inline: calc(0.25rem * 4);
       vertical-align: middle;
       --tw-leading: calc(0.25rem * 1);
@@ -2048,7 +2047,10 @@
       &.ga-segmented-control__button--selected, &:hover {
         border-color: var(--ga-color-border-action);
       }
-      &:hover {
+      &.ga-segmented-control__button--selected {
+        background-color: var(--ga-color-surface-primary);
+      }
+      &:hover:not(.ga-segmented-control__button--selected) {
         background-color: var(--ga-color-surface-action-hover-2);
         color: var(--ga-color-text-action-hover);
       }
@@ -2060,7 +2062,7 @@
       }
       &.ga-segmented-control__button--icon-only {
         padding-inline: calc(0.25rem * 2.25);
-        &:hover {
+        &:hover:not(.ga-segmented-control__button--selected) {
           color: var(--ga-color-icon-action-hover);
         }
       }
@@ -2237,6 +2239,9 @@
       }
       .ga-select__value {
         display: contents;
+        .ga-tag {
+          min-width: calc(0.25rem * 0);
+        }
       }
       .ga-select__input {
         height: calc(0.25rem * 6.5);

package/dist/components/card.css

@@ -36,7 +36,7 @@
   }
   &.ga-card--selected {
     border-color: var(--ga-color-border-focus);
-    background-color: var(--ga-color-surface-success);
+    background-color: var(--ga-color-surface-selected);
   }
 }
 @property --tw-border-style {

package/dist/components/dropdown.css

@@ -67,7 +67,7 @@
       color: var(--ga-color-text-disable-selected);
     }
     &.ga-dropdown__item--selected {
-      background-color: var(--ga-color-surface-success);
+      background-color: var(--ga-color-surface-selected);
       --tw-font-weight: 600;
       font-weight: 600;
       color: var(--ga-color-text-body);

package/dist/components/segmented-control.css

@@ -21,7 +21,7 @@
   ));
   .ga-segmented-control__button {
     display: inline-flex;
-    height: calc(0.25rem * 9);
+    height: calc(0.25rem * 8.5);
     cursor: pointer;
     align-items: center;
     justify-content: center;
@@ -30,7 +30,6 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: transparent;
-    background-color: var(--ga-color-surface-primary);
     padding-inline: calc(0.25rem * 4);
     vertical-align: middle;
     --tw-leading: calc(0.25rem * 1);
@@ -40,7 +39,10 @@
     &.ga-segmented-control__button--selected, &:hover {
       border-color: var(--ga-color-border-action);
     }
-    &:hover {
+    &.ga-segmented-control__button--selected {
+      background-color: var(--ga-color-surface-primary);
+    }
+    &:hover:not(.ga-segmented-control__button--selected) {
       background-color: var(--ga-color-surface-action-hover-2);
       color: var(--ga-color-text-action-hover);
     }
@@ -52,7 +54,7 @@
     }
     &.ga-segmented-control__button--icon-only {
       padding-inline: calc(0.25rem * 2.25);
-      &:hover {
+      &:hover:not(.ga-segmented-control__button--selected) {
         color: var(--ga-color-icon-action-hover);
       }
     }

package/dist/components/select.css

@@ -159,6 +159,9 @@
     }
     .ga-select__value {
       display: contents;
+      .ga-tag {
+        min-width: calc(0.25rem * 0);
+      }
     }
     .ga-select__input {
       height: calc(0.25rem * 6.5);

package/dist/components.css

@@ -315,7 +315,7 @@
   }
   &.ga-card--selected {
     border-color: var(--ga-color-border-focus);
-    background-color: var(--ga-color-surface-success);
+    background-color: var(--ga-color-surface-selected);
   }
 }
 .ga-calendar {
@@ -785,7 +785,7 @@
       color: var(--ga-color-text-disable-selected);
     }
     &.ga-dropdown__item--selected {
-      background-color: var(--ga-color-surface-success);
+      background-color: var(--ga-color-surface-selected);
       --tw-font-weight: 600;
       font-weight: 600;
       color: var(--ga-color-text-body);
@@ -1658,7 +1658,7 @@
   ));
   .ga-segmented-control__button {
     display: inline-flex;
-    height: calc(0.25rem * 9);
+    height: calc(0.25rem * 8.5);
     cursor: pointer;
     align-items: center;
     justify-content: center;
@@ -1667,7 +1667,6 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: transparent;
-    background-color: var(--ga-color-surface-primary);
     padding-inline: calc(0.25rem * 4);
     vertical-align: middle;
     --tw-leading: calc(0.25rem * 1);
@@ -1677,7 +1676,10 @@
     &.ga-segmented-control__button--selected, &:hover {
       border-color: var(--ga-color-border-action);
     }
-    &:hover {
+    &.ga-segmented-control__button--selected {
+      background-color: var(--ga-color-surface-primary);
+    }
+    &:hover:not(.ga-segmented-control__button--selected) {
       background-color: var(--ga-color-surface-action-hover-2);
       color: var(--ga-color-text-action-hover);
     }
@@ -1689,7 +1691,7 @@
     }
     &.ga-segmented-control__button--icon-only {
       padding-inline: calc(0.25rem * 2.25);
-      &:hover {
+      &:hover:not(.ga-segmented-control__button--selected) {
         color: var(--ga-color-icon-action-hover);
       }
     }
@@ -1866,6 +1868,9 @@
     }
     .ga-select__value {
       display: contents;
+      .ga-tag {
+        min-width: calc(0.25rem * 0);
+      }
     }
     .ga-select__input {
       height: calc(0.25rem * 6.5);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsn-ux/gaia-styles",
-  "version": "0.5.12",
+  "version": "0.5.14",
   "type": "module",
   "license": "MIT",
   "scripts": {

package/src/styles/components/card.css

@@ -18,6 +18,6 @@
   }
 
   &.ga-card--selected {
-    @apply border-(--ga-color-border-focus) bg-(--ga-color-surface-success);
+    @apply border-(--ga-color-border-focus) bg-(--ga-color-surface-selected);
   }
 }

package/src/styles/components/dropdown.css

@@ -26,7 +26,7 @@
     }
 
     &.ga-dropdown__item--selected {
-      @apply bg-(--ga-color-surface-success) font-semibold text-(--ga-color-text-body);
+      @apply bg-(--ga-color-surface-selected) font-semibold text-(--ga-color-text-body);
 
       &.ga-dropdown__item--disabled {
         @apply bg-(--ga-color-surface-disable-selected) text-(--ga-color-text-on-action);

package/src/styles/components/segmented-control.css

@@ -2,14 +2,18 @@
   @apply text-md inline-flex items-center justify-center gap-0.5 rounded border border-(--ga-color-border-primary) p-0.5 align-middle;
 
   .ga-segmented-control__button {
-    @apply inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded border border-transparent bg-(--ga-color-surface-primary) px-4 align-middle leading-1 whitespace-nowrap text-(--ga-color-text-action);
+    @apply inline-flex h-8.5 cursor-pointer items-center justify-center gap-2 rounded border border-transparent px-4 align-middle leading-1 whitespace-nowrap text-(--ga-color-text-action);
 
     &.ga-segmented-control__button--selected,
     &:hover {
       @apply border-(--ga-color-border-action);
     }
 
-    &:hover {
+    &.ga-segmented-control__button--selected {
+      @apply bg-(--ga-color-surface-primary);
+    }
+
+    &:hover:not(.ga-segmented-control__button--selected) {
       @apply bg-(--ga-color-surface-action-hover-2) text-(--ga-color-text-action-hover);
     }
 
@@ -20,7 +24,7 @@
     &.ga-segmented-control__button--icon-only {
       @apply px-2.25;
 
-      &:hover {
+      &:hover:not(.ga-segmented-control__button--selected) {
         @apply text-(--ga-color-icon-action-hover);
       }
     }

package/src/styles/components/select.css

@@ -85,6 +85,10 @@
 
     .ga-select__value {
       @apply contents;
+
+      .ga-tag {
+        @apply min-w-0;
+      }
     }
 
     .ga-select__input {