@vsn-ux/gaia-styles 0.2.4 → 0.3.0

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

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
 :root {
   --ga-color-blue-10: #edf4fe;
   --ga-color-blue-40: #93bbf9;
@@ -29,10 +29,11 @@
   --ga-color-grey-40: #b9b9b9;
   --ga-color-icon-action: var(--ga-color-primary);
   --ga-color-icon-action-hover: var(--ga-color-primary-60);
+  --ga-color-icon-disabled: var(--ga-color-neutral);
   --ga-color-icon-error: var(--ga-color-error);
   --ga-color-icon-information: var(--ga-color-information);
   --ga-color-icon-on-action: var(--ga-color-secondary);
-  --ga-color-icon-on-disabled: var(--ga-color-utility-grey);
+  --ga-color-icon-on-disabled: var(--ga-color-neutral-60);
   --ga-color-icon-on-primary: var(--ga-color-white);
   --ga-color-icon-primary: var(--ga-color-primary-90);
   --ga-color-icon-success: var(--ga-color-success);
@@ -98,7 +99,7 @@
   --ga-color-text-action-hover: var(--ga-color-primary-90);
   --ga-color-text-body: var(--ga-color-primary-90);
   --ga-color-text-disable-selected: var(--ga-color-neutral-60);
-  --ga-color-text-disabled: var(--ga-color-utility-grey);
+  --ga-color-text-disabled: var(--ga-color-neutral);
   --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);
@@ -482,7 +483,7 @@
   .ga-dropdown {
     display: flex;
     max-height: calc(0.4rem * 81);
-    min-width: calc(0.4rem * 36);
+    max-width: 80ch;
     flex-direction: column;
     align-items: stretch;
     overflow-y: auto;
@@ -491,12 +492,16 @@
     border-width: 1px;
     border-color: var(--ga-color-border-primary);
     background-color: var(--ga-color-surface-primary);
+    font-size: var(--ga-size-font-md);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
     --tw-outline-style: none;
     outline-style: none;
     .ga-dropdown__item {
       position: relative;
       display: flex;
       height: calc(0.4rem * 9);
+      min-width: calc(0.4rem * 0);
       flex-shrink: 0;
       cursor: pointer;
       flex-direction: row;
@@ -569,29 +574,80 @@
       --tw-font-weight: 600;
       font-weight: 600;
     }
-    .ga-dropdown__content-spinner {
+    .ga-dropdown__spinner {
       margin-inline: auto;
-      margin-block: calc(0.4rem * 8);
+      margin-block: calc(0.4rem * 5);
       display: inline-flex;
     }
+    .ga-dropdown__item-label {
+      min-width: calc(0.4rem * 0);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
   .ga-form-field {
     display: flex;
     flex-direction: column;
     gap: calc(0.4rem * 2);
-    > *, > .ga-select, > .ga-input {
+    > .ga-select, > .ga-input {
       width: 100%;
+      flex-shrink: 0;
     }
     .ga-form-field__label {
+      display: inline-flex;
+      height: calc(0.4rem * 5);
+      width: fit-content;
+      max-width: 100%;
+      min-width: calc(0.4rem * 0);
+      gap: calc(0.4rem * 1);
       padding-inline: calc(0.4rem * 1);
+      --tw-leading: calc(0.4rem * 5);
+      line-height: calc(0.4rem * 5);
+      &:focus-visible {
+        border-radius: var(--ga-radius);
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+        outline-offset: 2px;
+        outline-color: var(--ga-color-border-focus);
+      }
+    }
+    .ga-form-field__label-text {
+      min-width: calc(0.4rem * 0);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       font-size: var(--ga-size-font-md);
       line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
       letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
-      --tw-leading: calc(0.4rem * 5);
-      line-height: calc(0.4rem * 5);
       --tw-font-weight: 500;
       font-weight: 500;
     }
+    .ga-form-field__label-state {
+      font-size: var(--ga-size-font-sm);
+      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      letter-spacing: var(--tw-tracking, 0);
+      --tw-font-weight: 400;
+      font-weight: 400;
+    }
+    .ga-form-field__label--defined {
+      .ga-form-field__label-text {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 2px;
+        --tw-border-style: dotted;
+        border-style: dotted;
+        color: var(--ga-color-text-action);
+      }
+      &:not(.ga-form-field__label--disabled) .ga-form-field__label-text:hover {
+        color: var(--ga-color-text-body);
+      }
+    }
+    .ga-form-field__label--disabled {
+      .ga-form-field__label-text, .ga-form-field__label-state {
+        border-color: var(--ga-color-border-disabled);
+        color: var(--ga-color-text-disabled);
+      }
+    }
     .ga-form-field__info {
       display: flex;
       align-items: center;
@@ -730,33 +786,32 @@
   }
   .ga-menu {
     display: flex;
-    min-width: calc(0.4rem * 36);
+    max-height: calc(0.4rem * 81);
+    max-width: 80ch;
     flex-direction: column;
     align-items: stretch;
+    overflow-y: auto;
     border-radius: var(--ga-radius);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--ga-color-border-primary);
     background-color: var(--ga-color-surface-primary);
+    font-size: var(--ga-size-font-md);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
     .ga-menu__item {
       position: relative;
       display: flex;
-      height: calc(0.4rem * 9);
+      min-height: calc(0.4rem * 9);
+      flex-shrink: 0;
       cursor: pointer;
       flex-direction: row;
-      align-items: center;
       gap: calc(0.4rem * 2);
       padding-inline: calc(0.4rem * 3);
       padding-block: calc(0.4rem * 2);
       text-align: left;
-      font-size: var(--ga-size-font-md);
-      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
-      letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
       --tw-leading: 1;
       line-height: 1;
-      --tw-font-weight: 500;
-      font-weight: 500;
-      color: var(--ga-color-text-action);
       &:first-child {
         border-top-left-radius: var(--ga-radius);
         border-top-right-radius: var(--ga-radius);
@@ -767,25 +822,47 @@
       }
       &:hover {
         background-color: var(--ga-color-surface-action-hover-2);
-        color: var(--ga-color-text-action-hover);
+        .ga-menu__item-icon {
+          color: var(--ga-color-icon-action);
+        }
+        .ga-menu__item-label {
+          color: var(--ga-color-text-action-hover);
+        }
       }
       &:focus, &:focus-visible {
         --tw-outline-style: none;
         outline-style: none;
       }
       &.ga-menu__item--disabled {
+        cursor: not-allowed;
         background-color: var(--ga-color-surface-primary);
-        color: var(--ga-color-text-disabled);
+        .ga-menu__item-icon {
+          color: var(--ga-color-icon-disabled);
+        }
+        .ga-menu__item-label {
+          color: var(--ga-color-text-disabled);
+        }
       }
       &.ga-menu__item--selected {
         background-color: var(--ga-color-surface-action);
         color: var(--ga-color-text-on-action);
+        .ga-menu__item-icon {
+          color: var(--ga-color-icon-on-action);
+        }
+        .ga-menu__item-label {
+          color: var(--ga-color-text-on-action);
+        }
         &:hover {
           background-color: var(--ga-color-surface-action-hover);
         }
         &.ga-menu__item--disabled {
           background-color: var(--ga-color-surface-primary);
-          color: var(--ga-color-text-disable-selected);
+          .ga-menu__item-icon {
+            color: var(--ga-color-icon-on-disabled);
+          }
+          .ga-menu__item-label {
+            color: var(--ga-color-text-disable-selected);
+          }
         }
       }
     }
@@ -803,6 +880,60 @@
         --tw-content: '';
         content: var(--tw-content);
       }
+      &.ga-menu__item--selected {
+        &::after {
+          border-color: var(--ga-color-white);
+        }
+      }
+    }
+    .ga-menu__item-icon {
+      margin-top: calc(0.4rem * 0.5);
+      flex-shrink: 0;
+      color: var(--ga-color-icon-primary);
+    }
+    .ga-menu__item-content {
+      display: flex;
+      min-width: calc(0.4rem * 0);
+      flex-direction: column;
+    }
+    .ga-menu__item-title {
+      display: flex;
+      align-items: center;
+      gap: calc(0.4rem * 2);
+    }
+    .ga-menu__item-label {
+      height: calc(0.4rem * 5);
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: var(--ga-size-font-md);
+      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+      letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+      --tw-font-weight: 500;
+      font-weight: 500;
+      color: var(--ga-color-text-action);
+    }
+    .ga-menu__item-shortcut {
+      flex-shrink: 0;
+      border-radius: var(--ga-radius);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--ga-color-border-disabled);
+      background-color: #fff;
+      padding-inline: calc(0.4rem * 1);
+      font-size: var(--ga-size-font-xs);
+      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1));
+      letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
+      --tw-font-weight: 500;
+      font-weight: 500;
+      color: var(--ga-color-text-body);
+    }
+    .ga-menu__item-description {
+      font-size: var(--ga-size-font-xs);
+      line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1));
+      letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
+      color: var(--ga-color-text-disable-selected);
     }
     .ga-menu__separator {
       margin-left: calc(0.4rem * 3);
@@ -1025,9 +1156,8 @@
     border-width: 1px;
     border-color: var(--ga-color-border-primary);
     background-color: var(--ga-color-surface-primary);
+    padding-inline: calc(0.4rem * 3);
     padding-block: calc(0.4rem * 2);
-    padding-right: calc(0.4rem * 2);
-    padding-left: calc(0.4rem * 3);
     text-align: left;
     font-size: var(--ga-size-font-md);
     line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
@@ -1095,6 +1225,180 @@
       }
     }
   }
+  .ga-tag {
+    box-sizing: content-box;
+    display: inline-flex;
+    height: calc(0.4rem * 6);
+    flex-direction: row;
+    align-items: center;
+    gap: calc(0.4rem * 1);
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-action);
+    padding-right: calc(0.4rem * 1);
+    padding-left: calc(0.4rem * 2);
+    font-size: var(--ga-size-font-sm);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, 0);
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--ga-color-border-focus);
+    }
+    &.ga-tag--information {
+      border-color: var(--ga-color-border-information);
+      background-color: var(--ga-color-surface-information);
+      color: var(--ga-color-text-information);
+      .ga-tag__icon {
+        color: var(--ga-color-icon-information);
+      }
+    }
+    &.ga-tag--success {
+      border-color: var(--ga-color-border-success);
+      background-color: var(--ga-color-surface-success);
+      .ga-tag__icon {
+        color: var(--ga-color-icon-success);
+      }
+    }
+    &.ga-tag--error {
+      border-color: var(--ga-color-border-error);
+      background-color: var(--ga-color-surface-error);
+      .ga-tag__icon {
+        color: var(--ga-color-icon-error);
+      }
+    }
+    &.ga-tag--warning {
+      border-color: var(--ga-color-border-warning);
+      background-color: var(--ga-color-surface-warning);
+      .ga-tag__icon {
+        color: var(--ga-color-icon-warning);
+      }
+    }
+    &.ga-tag--disabled {
+      border-color: var(--ga-color-border-disabled);
+      background-color: var(--ga-color-surface-disabled);
+      color: var(--ga-color-text-disable-selected);
+      .ga-tag__icon {
+        color: var(--ga-color-icon-on-disabled);
+      }
+    }
+    &.ga-tag--interactive {
+      cursor: pointer;
+      --tw-border-style: dashed;
+      border-style: dashed;
+      &:hover {
+        background-color: var(--ga-color-surface-action-hover-2);
+        .ga-tag__icon {
+          color: var(--ga-color-icon-action-hover);
+        }
+      }
+    }
+    &.ga-tag--interactive-disabled {
+      cursor: not-allowed;
+      --tw-border-style: dashed;
+      border-style: dashed;
+      border-color: var(--ga-color-border-disabled);
+      color: var(--ga-color-text-disabled);
+      .ga-tag__icon {
+        color: var(--ga-color-icon-disabled);
+      }
+    }
+    &.ga-tag--interactive-selected {
+      --tw-border-style: solid;
+      border-style: solid;
+      color: var(--ga-color-text-action);
+      &:hover {
+        border-color: var(--ga-color-border-action-hover);
+        .ga-tag__icon {
+          color: var(--ga-color-icon-action-hover);
+        }
+      }
+    }
+    &.ga-tag--interactive-selected-disabled {
+      cursor: not-allowed;
+      --tw-border-style: solid;
+      border-style: solid;
+      border-color: var(--ga-color-surface-disable-selected);
+      background-color: var(--ga-color-surface-disable-selected);
+      color: var(--ga-color-text-on-action);
+      .ga-tag__icon {
+        color: var(--ga-color-icon-on-primary);
+      }
+    }
+    &.ga-tag--utility-grey, &.ga-tag--utility-indigo, &.ga-tag--utility-teal, &.ga-tag--utility-lime, &.ga-tag--utility-purple, &.ga-tag--utility-pink, &.ga-tag--utility-rose, &.ga-tag--utility-yellow, &.ga-tag--utility-blue, &.ga-tag--utility-green, &.ga-tag--utility-orange, &.ga-tag--utility-disabled {
+      border-radius: var(--ga-radius);
+      padding-left: calc(0.4rem * 1.5);
+      .ga-tag__icon {
+        color: var(--ga-color-text-body);
+      }
+    }
+    &.ga-tag--utility-grey {
+      border-color: var(--ga-color-utility-grey);
+      background-color: var(--ga-color-utility-grey-light);
+    }
+    &.ga-tag--utility-indigo {
+      border-color: var(--ga-color-utility-indigo);
+      background-color: var(--ga-color-utility-indigo-light);
+    }
+    &.ga-tag--utility-teal {
+      border-color: var(--ga-color-utility-teal);
+      background-color: var(--ga-color-utility-teal-light);
+    }
+    &.ga-tag--utility-lime {
+      border-color: var(--ga-color-utility-lime);
+      background-color: var(--ga-color-utility-lime-light);
+    }
+    &.ga-tag--utility-purple {
+      border-color: var(--ga-color-utility-purple);
+      background-color: var(--ga-color-utility-purple-light);
+    }
+    &.ga-tag--utility-pink {
+      border-color: var(--ga-color-utility-pink);
+      background-color: var(--ga-color-utility-pink-light);
+    }
+    &.ga-tag--utility-rose {
+      border-color: var(--ga-color-utility-rose);
+      background-color: var(--ga-color-utility-rose-light);
+    }
+    &.ga-tag--utility-yellow {
+      border-color: var(--ga-color-utility-yellow);
+      background-color: var(--ga-color-utility-yellow-light);
+    }
+    &.ga-tag--utility-blue {
+      border-color: var(--ga-color-utility-blue);
+      background-color: var(--ga-color-utility-blue-light);
+    }
+    &.ga-tag--utility-green {
+      border-color: var(--ga-color-utility-green);
+      background-color: var(--ga-color-utility-green-light);
+    }
+    &.ga-tag--utility-orange {
+      border-color: var(--ga-color-utility-orange);
+      background-color: var(--ga-color-utility-orange-light);
+    }
+    &.ga-tag--utility-disabled {
+      border-color: var(--ga-color-border-disabled);
+      background-color: var(--ga-color-surface-disabled);
+      color: var(--ga-color-text-disable-selected);
+    }
+    .ga-tag__icon {
+      flex-shrink: 0;
+      color: var(--ga-color-icon-action);
+    }
+    .ga-tag__label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding-right: calc(0.4rem * 1);
+    }
+    .ga-tag__separator {
+      height: calc(0.4rem * 5);
+      width: 1px;
+      background-color: var(--ga-color-border-primary);
+    }
+  }
   .ga-text-area {
     display: flex;
     width: calc(0.4rem * 50);