@vsn-ux/gaia-styles 0.5.11 → 0.5.13

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 Visma Software AS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/all-10pt.css

@@ -14,7 +14,9 @@
   --ga-color-border-information: var(--ga-color-information);
   --ga-color-border-primary: var(--ga-color-neutral-60);
   --ga-color-border-secondary: var(--ga-color-secondary-30);
+  --ga-color-border-selected: var(--ga-color-green-60);
   --ga-color-border-success: var(--ga-color-success);
+  --ga-color-border-tertiary: var(--ga-color-neutral);
   --ga-color-border-warning: var(--ga-color-warning);
   --ga-color-cyan-60: #377ea0;
   --ga-color-cyan-70: #2a6480;
@@ -100,6 +102,7 @@
   --ga-color-surface-information: var(--ga-color-information-light);
   --ga-color-surface-page: var(--ga-color-neutral-10);
   --ga-color-surface-primary: var(--ga-color-white);
+  --ga-color-surface-selected: var(--ga-color-green-10);
   --ga-color-surface-success: var(--ga-color-success-light);
   --ga-color-surface-warning: var(--ga-color-utility-orange-light);
   --ga-color-teal-10: #ecf5f4;
@@ -115,14 +118,16 @@
   --ga-color-text-action: var(--ga-color-primary);
   --ga-color-text-action-hover: var(--ga-color-primary-90);
   --ga-color-text-body: var(--ga-color-primary-90);
+  --ga-color-text-body-secondary: var(--ga-color-primary-70);
   --ga-color-text-disable-selected: var(--ga-color-neutral-60);
   --ga-color-text-disabled: var(--ga-color-utility-grey);
   --ga-color-text-error: var(--ga-color-primary-90);
   --ga-color-text-headings: var(--ga-color-primary-90);
   --ga-color-text-information: var(--ga-color-primary-90);
   --ga-color-text-link-visited: var(--ga-color-purple-80);
+  --ga-color-text-menu: var(--ga-color-secondary);
   --ga-color-text-on-action: var(--ga-color-secondary-10);
-  --ga-color-text-on-disabled: var(--ga-color-primary-70);
+  --ga-color-text-on-disabled: var(--ga-color-neutral-60);
   --ga-color-text-success: var(--ga-color-primary-90);
   --ga-color-text-warning: var(--ga-color-primary-90);
   --ga-color-utility-blue: var(--ga-color-blue-40);
@@ -681,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 {
@@ -1151,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);
@@ -2033,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);
@@ -2043,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);
       }
@@ -2055,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);
         }
       }
@@ -2984,7 +2991,7 @@
     background-color: var(--ga-color-surface-primary);
     color: var(--ga-color-text-action);
     .ga-icon {
-      color: var(--ga-color-icon-action);
+      color: var(--ga-color-icon-primary);
     }
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -2992,10 +2999,11 @@
       outline-offset: 2px;
       outline-color: var(--ga-color-border-focus);
     }
-    &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
+    &:hover:not( :disabled, .ga-quick-filter-button--disabled, .ga-quick-filter-button--selected ) {
       background-color: var(--ga-color-surface-action-hover-2);
+      color: var(--ga-color-text-action-hover);
       .ga-icon {
-        color: var(--ga-color-icon-action-hover);
+        color: var(--ga-color-icon-action);
       }
     }
     &:active:not(:disabled, .ga-quick-filter-button--disabled) {
@@ -3026,9 +3034,6 @@
       &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
         border-color: var(--ga-color-border-action-hover);
         background-color: var(--ga-color-surface-action-hover);
-        .ga-icon {
-          color: var(--ga-color-icon-on-action-hover);
-        }
       }
       &:disabled, &.ga-quick-filter-button--disabled {
         border-color: var(--ga-color-surface-disabled);

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

@@ -14,7 +14,9 @@
   --ga-color-border-information: var(--ga-color-information);
   --ga-color-border-primary: var(--ga-color-neutral-60);
   --ga-color-border-secondary: var(--ga-color-secondary-30);
+  --ga-color-border-selected: var(--ga-color-green-60);
   --ga-color-border-success: var(--ga-color-success);
+  --ga-color-border-tertiary: var(--ga-color-neutral);
   --ga-color-border-warning: var(--ga-color-warning);
   --ga-color-cyan-60: #377ea0;
   --ga-color-cyan-70: #2a6480;
@@ -100,6 +102,7 @@
   --ga-color-surface-information: var(--ga-color-information-light);
   --ga-color-surface-page: var(--ga-color-neutral-10);
   --ga-color-surface-primary: var(--ga-color-white);
+  --ga-color-surface-selected: var(--ga-color-green-10);
   --ga-color-surface-success: var(--ga-color-success-light);
   --ga-color-surface-warning: var(--ga-color-utility-orange-light);
   --ga-color-teal-10: #ecf5f4;
@@ -115,14 +118,16 @@
   --ga-color-text-action: var(--ga-color-primary);
   --ga-color-text-action-hover: var(--ga-color-primary-90);
   --ga-color-text-body: var(--ga-color-primary-90);
+  --ga-color-text-body-secondary: var(--ga-color-primary-70);
   --ga-color-text-disable-selected: var(--ga-color-neutral-60);
   --ga-color-text-disabled: var(--ga-color-utility-grey);
   --ga-color-text-error: var(--ga-color-primary-90);
   --ga-color-text-headings: var(--ga-color-primary-90);
   --ga-color-text-information: var(--ga-color-primary-90);
   --ga-color-text-link-visited: var(--ga-color-purple-80);
+  --ga-color-text-menu: var(--ga-color-secondary);
   --ga-color-text-on-action: var(--ga-color-secondary-10);
-  --ga-color-text-on-disabled: var(--ga-color-primary-70);
+  --ga-color-text-on-disabled: var(--ga-color-neutral-60);
   --ga-color-text-success: var(--ga-color-primary-90);
   --ga-color-text-warning: var(--ga-color-primary-90);
   --ga-color-utility-blue: var(--ga-color-blue-40);
@@ -534,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 {
@@ -1004,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);
@@ -1886,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);
@@ -1896,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);
       }
@@ -1908,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);
         }
       }
@@ -2837,7 +2844,7 @@
     background-color: var(--ga-color-surface-primary);
     color: var(--ga-color-text-action);
     .ga-icon {
-      color: var(--ga-color-icon-action);
+      color: var(--ga-color-icon-primary);
     }
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -2845,10 +2852,11 @@
       outline-offset: 2px;
       outline-color: var(--ga-color-border-focus);
     }
-    &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
+    &:hover:not( :disabled, .ga-quick-filter-button--disabled, .ga-quick-filter-button--selected ) {
       background-color: var(--ga-color-surface-action-hover-2);
+      color: var(--ga-color-text-action-hover);
       .ga-icon {
-        color: var(--ga-color-icon-action-hover);
+        color: var(--ga-color-icon-action);
       }
     }
     &:active:not(:disabled, .ga-quick-filter-button--disabled) {
@@ -2879,9 +2887,6 @@
       &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
         border-color: var(--ga-color-border-action-hover);
         background-color: var(--ga-color-surface-action-hover);
-        .ga-icon {
-          color: var(--ga-color-icon-on-action-hover);
-        }
       }
       &:disabled, &.ga-quick-filter-button--disabled {
         border-color: var(--ga-color-surface-disabled);

package/dist/all-no-reset.css

@@ -14,7 +14,9 @@
   --ga-color-border-information: var(--ga-color-information);
   --ga-color-border-primary: var(--ga-color-neutral-60);
   --ga-color-border-secondary: var(--ga-color-secondary-30);
+  --ga-color-border-selected: var(--ga-color-green-60);
   --ga-color-border-success: var(--ga-color-success);
+  --ga-color-border-tertiary: var(--ga-color-neutral);
   --ga-color-border-warning: var(--ga-color-warning);
   --ga-color-cyan-60: #377ea0;
   --ga-color-cyan-70: #2a6480;
@@ -100,6 +102,7 @@
   --ga-color-surface-information: var(--ga-color-information-light);
   --ga-color-surface-page: var(--ga-color-neutral-10);
   --ga-color-surface-primary: var(--ga-color-white);
+  --ga-color-surface-selected: var(--ga-color-green-10);
   --ga-color-surface-success: var(--ga-color-success-light);
   --ga-color-surface-warning: var(--ga-color-utility-orange-light);
   --ga-color-teal-10: #ecf5f4;
@@ -115,14 +118,16 @@
   --ga-color-text-action: var(--ga-color-primary);
   --ga-color-text-action-hover: var(--ga-color-primary-90);
   --ga-color-text-body: var(--ga-color-primary-90);
+  --ga-color-text-body-secondary: var(--ga-color-primary-70);
   --ga-color-text-disable-selected: var(--ga-color-neutral-60);
   --ga-color-text-disabled: var(--ga-color-utility-grey);
   --ga-color-text-error: var(--ga-color-primary-90);
   --ga-color-text-headings: var(--ga-color-primary-90);
   --ga-color-text-information: var(--ga-color-primary-90);
   --ga-color-text-link-visited: var(--ga-color-purple-80);
+  --ga-color-text-menu: var(--ga-color-secondary);
   --ga-color-text-on-action: var(--ga-color-secondary-10);
-  --ga-color-text-on-disabled: var(--ga-color-primary-70);
+  --ga-color-text-on-disabled: var(--ga-color-neutral-60);
   --ga-color-text-success: var(--ga-color-primary-90);
   --ga-color-text-warning: var(--ga-color-primary-90);
   --ga-color-utility-blue: var(--ga-color-blue-40);
@@ -534,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 {
@@ -1004,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);
@@ -1886,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);
@@ -1896,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);
       }
@@ -1908,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);
         }
       }
@@ -2837,7 +2844,7 @@
     background-color: var(--ga-color-surface-primary);
     color: var(--ga-color-text-action);
     .ga-icon {
-      color: var(--ga-color-icon-action);
+      color: var(--ga-color-icon-primary);
     }
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -2845,10 +2852,11 @@
       outline-offset: 2px;
       outline-color: var(--ga-color-border-focus);
     }
-    &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
+    &:hover:not( :disabled, .ga-quick-filter-button--disabled, .ga-quick-filter-button--selected ) {
       background-color: var(--ga-color-surface-action-hover-2);
+      color: var(--ga-color-text-action-hover);
       .ga-icon {
-        color: var(--ga-color-icon-action-hover);
+        color: var(--ga-color-icon-action);
       }
     }
     &:active:not(:disabled, .ga-quick-filter-button--disabled) {
@@ -2879,9 +2887,6 @@
       &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
         border-color: var(--ga-color-border-action-hover);
         background-color: var(--ga-color-surface-action-hover);
-        .ga-icon {
-          color: var(--ga-color-icon-on-action-hover);
-        }
       }
       &:disabled, &.ga-quick-filter-button--disabled {
         border-color: var(--ga-color-surface-disabled);

package/dist/all.css

@@ -14,7 +14,9 @@
   --ga-color-border-information: var(--ga-color-information);
   --ga-color-border-primary: var(--ga-color-neutral-60);
   --ga-color-border-secondary: var(--ga-color-secondary-30);
+  --ga-color-border-selected: var(--ga-color-green-60);
   --ga-color-border-success: var(--ga-color-success);
+  --ga-color-border-tertiary: var(--ga-color-neutral);
   --ga-color-border-warning: var(--ga-color-warning);
   --ga-color-cyan-60: #377ea0;
   --ga-color-cyan-70: #2a6480;
@@ -100,6 +102,7 @@
   --ga-color-surface-information: var(--ga-color-information-light);
   --ga-color-surface-page: var(--ga-color-neutral-10);
   --ga-color-surface-primary: var(--ga-color-white);
+  --ga-color-surface-selected: var(--ga-color-green-10);
   --ga-color-surface-success: var(--ga-color-success-light);
   --ga-color-surface-warning: var(--ga-color-utility-orange-light);
   --ga-color-teal-10: #ecf5f4;
@@ -115,14 +118,16 @@
   --ga-color-text-action: var(--ga-color-primary);
   --ga-color-text-action-hover: var(--ga-color-primary-90);
   --ga-color-text-body: var(--ga-color-primary-90);
+  --ga-color-text-body-secondary: var(--ga-color-primary-70);
   --ga-color-text-disable-selected: var(--ga-color-neutral-60);
   --ga-color-text-disabled: var(--ga-color-utility-grey);
   --ga-color-text-error: var(--ga-color-primary-90);
   --ga-color-text-headings: var(--ga-color-primary-90);
   --ga-color-text-information: var(--ga-color-primary-90);
   --ga-color-text-link-visited: var(--ga-color-purple-80);
+  --ga-color-text-menu: var(--ga-color-secondary);
   --ga-color-text-on-action: var(--ga-color-secondary-10);
-  --ga-color-text-on-disabled: var(--ga-color-primary-70);
+  --ga-color-text-on-disabled: var(--ga-color-neutral-60);
   --ga-color-text-success: var(--ga-color-primary-90);
   --ga-color-text-warning: var(--ga-color-primary-90);
   --ga-color-utility-blue: var(--ga-color-blue-40);
@@ -681,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 {
@@ -1151,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);
@@ -2033,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);
@@ -2043,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);
       }
@@ -2055,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);
         }
       }
@@ -2984,7 +2991,7 @@
     background-color: var(--ga-color-surface-primary);
     color: var(--ga-color-text-action);
     .ga-icon {
-      color: var(--ga-color-icon-action);
+      color: var(--ga-color-icon-primary);
     }
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -2992,10 +2999,11 @@
       outline-offset: 2px;
       outline-color: var(--ga-color-border-focus);
     }
-    &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
+    &:hover:not( :disabled, .ga-quick-filter-button--disabled, .ga-quick-filter-button--selected ) {
       background-color: var(--ga-color-surface-action-hover-2);
+      color: var(--ga-color-text-action-hover);
       .ga-icon {
-        color: var(--ga-color-icon-action-hover);
+        color: var(--ga-color-icon-action);
       }
     }
     &:active:not(:disabled, .ga-quick-filter-button--disabled) {
@@ -3026,9 +3034,6 @@
       &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
         border-color: var(--ga-color-border-action-hover);
         background-color: var(--ga-color-surface-action-hover);
-        .ga-icon {
-          color: var(--ga-color-icon-on-action-hover);
-        }
       }
       &:disabled, &.ga-quick-filter-button--disabled {
         border-color: var(--ga-color-surface-disabled);

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/quick-filter-button.css

@@ -29,7 +29,7 @@
   background-color: var(--ga-color-surface-primary);
   color: var(--ga-color-text-action);
   .ga-icon {
-    color: var(--ga-color-icon-action);
+    color: var(--ga-color-icon-primary);
   }
   &:focus-visible {
     outline-style: var(--tw-outline-style);
@@ -37,10 +37,11 @@
     outline-offset: 2px;
     outline-color: var(--ga-color-border-focus);
   }
-  &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
+  &:hover:not( :disabled, .ga-quick-filter-button--disabled, .ga-quick-filter-button--selected ) {
     background-color: var(--ga-color-surface-action-hover-2);
+    color: var(--ga-color-text-action-hover);
     .ga-icon {
-      color: var(--ga-color-icon-action-hover);
+      color: var(--ga-color-icon-action);
     }
   }
   &:active:not(:disabled, .ga-quick-filter-button--disabled) {
@@ -71,9 +72,6 @@
     &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
       border-color: var(--ga-color-border-action-hover);
       background-color: var(--ga-color-surface-action-hover);
-      .ga-icon {
-        color: var(--ga-color-icon-on-action-hover);
-      }
     }
     &:disabled, &.ga-quick-filter-button--disabled {
       border-color: var(--ga-color-surface-disabled);

package/dist/components/segmented-control.css

@@ -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.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);
@@ -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);
       }
     }
@@ -2618,7 +2620,7 @@ textarea.ga-text-area {
   background-color: var(--ga-color-surface-primary);
   color: var(--ga-color-text-action);
   .ga-icon {
-    color: var(--ga-color-icon-action);
+    color: var(--ga-color-icon-primary);
   }
   &:focus-visible {
     outline-style: var(--tw-outline-style);
@@ -2626,10 +2628,11 @@ textarea.ga-text-area {
     outline-offset: 2px;
     outline-color: var(--ga-color-border-focus);
   }
-  &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
+  &:hover:not( :disabled, .ga-quick-filter-button--disabled, .ga-quick-filter-button--selected ) {
     background-color: var(--ga-color-surface-action-hover-2);
+    color: var(--ga-color-text-action-hover);
     .ga-icon {
-      color: var(--ga-color-icon-action-hover);
+      color: var(--ga-color-icon-action);
     }
   }
   &:active:not(:disabled, .ga-quick-filter-button--disabled) {
@@ -2660,9 +2663,6 @@ textarea.ga-text-area {
     &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
       border-color: var(--ga-color-border-action-hover);
       background-color: var(--ga-color-surface-action-hover);
-      .ga-icon {
-        color: var(--ga-color-icon-on-action-hover);
-      }
     }
     &:disabled, &.ga-quick-filter-button--disabled {
       border-color: var(--ga-color-surface-disabled);

package/dist/design-tokens.css

@@ -17,7 +17,9 @@
   --ga-color-border-information: var(--ga-color-information);
   --ga-color-border-primary: var(--ga-color-neutral-60);
   --ga-color-border-secondary: var(--ga-color-secondary-30);
+  --ga-color-border-selected: var(--ga-color-green-60);
   --ga-color-border-success: var(--ga-color-success);
+  --ga-color-border-tertiary: var(--ga-color-neutral);
   --ga-color-border-warning: var(--ga-color-warning);
   --ga-color-cyan-60: #377ea0;
   --ga-color-cyan-70: #2a6480;
@@ -103,6 +105,7 @@
   --ga-color-surface-information: var(--ga-color-information-light);
   --ga-color-surface-page: var(--ga-color-neutral-10);
   --ga-color-surface-primary: var(--ga-color-white);
+  --ga-color-surface-selected: var(--ga-color-green-10);
   --ga-color-surface-success: var(--ga-color-success-light);
   --ga-color-surface-warning: var(--ga-color-utility-orange-light);
   --ga-color-teal-10: #ecf5f4;
@@ -118,14 +121,16 @@
   --ga-color-text-action: var(--ga-color-primary);
   --ga-color-text-action-hover: var(--ga-color-primary-90);
   --ga-color-text-body: var(--ga-color-primary-90);
+  --ga-color-text-body-secondary: var(--ga-color-primary-70);
   --ga-color-text-disable-selected: var(--ga-color-neutral-60);
   --ga-color-text-disabled: var(--ga-color-utility-grey);
   --ga-color-text-error: var(--ga-color-primary-90);
   --ga-color-text-headings: var(--ga-color-primary-90);
   --ga-color-text-information: var(--ga-color-primary-90);
   --ga-color-text-link-visited: var(--ga-color-purple-80);
+  --ga-color-text-menu: var(--ga-color-secondary);
   --ga-color-text-on-action: var(--ga-color-secondary-10);
-  --ga-color-text-on-disabled: var(--ga-color-primary-70);
+  --ga-color-text-on-disabled: var(--ga-color-neutral-60);
   --ga-color-text-success: var(--ga-color-primary-90);
   --ga-color-text-warning: var(--ga-color-primary-90);
   --ga-color-utility-blue: var(--ga-color-blue-40);

package/dist/design-tokens.d.ts

@@ -117,6 +117,8 @@ export declare const tokens: {
   "color.text.on-action": Record<".", ColorTokenNormalized["$value"]>;
   "color.text.on-disabled": Record<".", ColorTokenNormalized["$value"]>;
   "color.text.link-visited": Record<".", ColorTokenNormalized["$value"]>;
+  "color.text.menu": Record<".", ColorTokenNormalized["$value"]>;
+  "color.text.body-secondary": Record<".", ColorTokenNormalized["$value"]>;
   "color.surface.page": Record<".", ColorTokenNormalized["$value"]>;
   "color.surface.primary": Record<".", ColorTokenNormalized["$value"]>;
   "color.surface.disabled": Record<".", ColorTokenNormalized["$value"]>;
@@ -128,6 +130,7 @@ export declare const tokens: {
   "color.surface.action-hover": Record<".", ColorTokenNormalized["$value"]>;
   "color.surface.action-hover-2": Record<".", ColorTokenNormalized["$value"]>;
   "color.surface.disable-selected": Record<".", ColorTokenNormalized["$value"]>;
+  "color.surface.selected": Record<".", ColorTokenNormalized["$value"]>;
   "color.border.primary": Record<".", ColorTokenNormalized["$value"]>;
   "color.border.secondary": Record<".", ColorTokenNormalized["$value"]>;
   "color.border.disabled": Record<".", ColorTokenNormalized["$value"]>;
@@ -139,6 +142,8 @@ export declare const tokens: {
   "color.border.action-hover": Record<".", ColorTokenNormalized["$value"]>;
   "color.border.action-hover-2": Record<".", ColorTokenNormalized["$value"]>;
   "color.border.focus": Record<".", ColorTokenNormalized["$value"]>;
+  "color.border.selected": Record<".", ColorTokenNormalized["$value"]>;
+  "color.border.tertiary": Record<".", ColorTokenNormalized["$value"]>;
   "color.icon.primary": Record<".", ColorTokenNormalized["$value"]>;
   "color.icon.on-primary": Record<".", ColorTokenNormalized["$value"]>;
   "color.icon.action": Record<".", ColorTokenNormalized["$value"]>;

package/dist/design-tokens.js

@@ -1255,12 +1255,12 @@ export const tokens = {
     ".": {
       "colorSpace": "srgb",
       "components": [
-        0.16470588235294117,
-        0.39215686274509803,
-        0.5019607843137255
+        0.43529411764705883,
+        0.4627450980392157,
+        0.5294117647058824
       ],
       "alpha": 1,
-      "hex": "#2a6480"
+      "hex": "#6f7687"
     },
   },
   "color.text.link-visited": {
@@ -1275,6 +1275,30 @@ export const tokens = {
       "hex": "#591ab5"
     },
   },
+  "color.text.menu": {
+    ".": {
+      "colorSpace": "srgb",
+      "components": [
+        0.9803921568627451,
+        0.8784313725490196,
+        0.807843137254902
+      ],
+      "alpha": 1,
+      "hex": "#fae0ce"
+    },
+  },
+  "color.text.body-secondary": {
+    ".": {
+      "colorSpace": "srgb",
+      "components": [
+        0.16470588235294117,
+        0.39215686274509803,
+        0.5019607843137255
+      ],
+      "alpha": 1,
+      "hex": "#2a6480"
+    },
+  },
   "color.surface.page": {
     ".": {
       "colorSpace": "srgb",
@@ -1407,6 +1431,18 @@ export const tokens = {
       "hex": "#6f7687"
     },
   },
+  "color.surface.selected": {
+    ".": {
+      "colorSpace": "srgb",
+      "components": [
+        0.9333333333333333,
+        0.9607843137254902,
+        0.9333333333333333
+      ],
+      "alpha": 1,
+      "hex": "#eef5ee"
+    },
+  },
   "color.border.primary": {
     ".": {
       "colorSpace": "srgb",
@@ -1539,6 +1575,30 @@ export const tokens = {
       "hex": "#1f4e66"
     },
   },
+  "color.border.selected": {
+    ".": {
+      "colorSpace": "srgb",
+      "components": [
+        0.26666666666666666,
+        0.5215686274509804,
+        0.2823529411764706
+      ],
+      "alpha": 1,
+      "hex": "#448548"
+    },
+  },
+  "color.border.tertiary": {
+    ".": {
+      "colorSpace": "srgb",
+      "components": [
+        0.8,
+        0.8117647058823529,
+        0.8431372549019608
+      ],
+      "alpha": 1,
+      "hex": "#cccfd7"
+    },
+  },
   "color.icon.primary": {
     ".": {
       "colorSpace": "srgb",

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@vsn-ux/gaia-styles",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "type": "module",
+  "license": "MIT",
   "scripts": {
     "dev": "storybook dev -p 6006",
     "dev-lib": "node ./build-component-styles.js --watch",

package/src/design-tokens/dtcg-tokens.json

@@ -343,10 +343,16 @@
         "$value": "{color.secondary.10}"
       },
       "on-disabled": {
-        "$value": "{color.primary.70}"
+        "$value": "{color.neutral.60}"
       },
       "link-visited": {
         "$value": "{color.purple.80}"
+      },
+      "menu": {
+        "$value": "{color.secondary}"
+      },
+      "body-secondary": {
+        "$value": "{color.primary.70}"
       }
     },
     "surface": {
@@ -382,6 +388,9 @@
       },
       "disable-selected": {
         "$value": "{color.neutral.60}"
+      },
+      "selected": {
+        "$value": "{color.green.10}"
       }
     },
     "border": {
@@ -417,6 +426,12 @@
       },
       "focus": {
         "$value": "{color.primary}"
+      },
+      "selected": {
+        "$value": "{color.green.60}"
+      },
+      "tertiary": {
+        "$value": "{color.neutral}"
       }
     },
     "icon": {

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/quick-filter-button.css

@@ -3,18 +3,22 @@
   @apply border border-(--ga-color-border-action) bg-(--ga-color-surface-primary) text-(--ga-color-text-action);
 
   .ga-icon {
-    @apply text-(--ga-color-icon-action);
+    @apply text-(--ga-color-icon-primary);
   }
 
   &:focus-visible {
     @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
   }
 
-  &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
-    @apply bg-(--ga-color-surface-action-hover-2);
+  &:hover:not(
+      :disabled,
+      .ga-quick-filter-button--disabled,
+      .ga-quick-filter-button--selected
+    ) {
+    @apply bg-(--ga-color-surface-action-hover-2) text-(--ga-color-text-action-hover);
 
     .ga-icon {
-      @apply text-(--ga-color-icon-action-hover);
+      @apply text-(--ga-color-icon-action);
     }
   }
 
@@ -48,10 +52,6 @@
 
     &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
       @apply border-(--ga-color-border-action-hover) bg-(--ga-color-surface-action-hover);
-
-      .ga-icon {
-        @apply text-(--ga-color-icon-on-action-hover);
-      }
     }
 
     &:disabled,

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-9 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);
       }
     }