@vsn-ux/gaia-styles 0.2.4 → 0.3.0

package/dist/components.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
 .ga-avatar {
   display: inline-flex;
   height: calc(0.25rem * 10);
@@ -301,7 +301,7 @@
 .ga-dropdown {
   display: flex;
   max-height: calc(0.25rem * 81);
-  min-width: calc(0.25rem * 36);
+  max-width: 80ch;
   flex-direction: column;
   align-items: stretch;
   overflow-y: auto;
@@ -310,12 +310,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.25rem * 9);
+    min-width: calc(0.25rem * 0);
     flex-shrink: 0;
     cursor: pointer;
     flex-direction: row;
@@ -388,29 +392,80 @@
     --tw-font-weight: 600;
     font-weight: 600;
   }
-  .ga-dropdown__content-spinner {
+  .ga-dropdown__spinner {
     margin-inline: auto;
-    margin-block: calc(0.25rem * 8);
+    margin-block: calc(0.25rem * 5);
     display: inline-flex;
   }
+  .ga-dropdown__item-label {
+    min-width: calc(0.25rem * 0);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 .ga-form-field {
   display: flex;
   flex-direction: column;
   gap: calc(0.25rem * 2);
-  > *, > .ga-select, > .ga-input {
+  > .ga-select, > .ga-input {
     width: 100%;
+    flex-shrink: 0;
   }
   .ga-form-field__label {
+    display: inline-flex;
+    height: calc(0.25rem * 5);
+    width: fit-content;
+    max-width: 100%;
+    min-width: calc(0.25rem * 0);
+    gap: calc(0.25rem * 1);
     padding-inline: calc(0.25rem * 1);
+    --tw-leading: calc(0.25rem * 5);
+    line-height: calc(0.25rem * 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.25rem * 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.25rem * 5);
-    line-height: calc(0.25rem * 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;
@@ -549,33 +604,32 @@
 }
 .ga-menu {
   display: flex;
-  min-width: calc(0.25rem * 36);
+  max-height: calc(0.25rem * 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.25rem * 9);
+    min-height: calc(0.25rem * 9);
+    flex-shrink: 0;
     cursor: pointer;
     flex-direction: row;
-    align-items: center;
     gap: calc(0.25rem * 2);
     padding-inline: calc(0.25rem * 3);
     padding-block: calc(0.25rem * 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);
@@ -586,25 +640,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);
+        }
       }
     }
   }
@@ -622,6 +698,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.25rem * 0.5);
+    flex-shrink: 0;
+    color: var(--ga-color-icon-primary);
+  }
+  .ga-menu__item-content {
+    display: flex;
+    min-width: calc(0.25rem * 0);
+    flex-direction: column;
+  }
+  .ga-menu__item-title {
+    display: flex;
+    align-items: center;
+    gap: calc(0.25rem * 2);
+  }
+  .ga-menu__item-label {
+    height: calc(0.25rem * 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.25rem * 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.25rem * 3);
@@ -844,9 +974,8 @@
   border-width: 1px;
   border-color: var(--ga-color-border-primary);
   background-color: var(--ga-color-surface-primary);
+  padding-inline: calc(0.25rem * 3);
   padding-block: calc(0.25rem * 2);
-  padding-right: calc(0.25rem * 2);
-  padding-left: calc(0.25rem * 3);
   text-align: left;
   font-size: var(--ga-size-font-md);
   line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
@@ -914,6 +1043,180 @@
     }
   }
 }
+.ga-tag {
+  box-sizing: content-box;
+  display: inline-flex;
+  height: calc(0.25rem * 6);
+  flex-direction: row;
+  align-items: center;
+  gap: calc(0.25rem * 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.25rem * 1);
+  padding-left: calc(0.25rem * 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.25rem * 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.25rem * 1);
+  }
+  .ga-tag__separator {
+    height: calc(0.25rem * 5);
+    width: 1px;
+    background-color: var(--ga-color-border-primary);
+  }
+}
 .ga-text-area {
   display: flex;
   width: calc(0.25rem * 50);

package/dist/design-tokens.css

@@ -32,10 +32,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);
@@ -101,7 +102,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);

package/dist/design-tokens.d.ts

@@ -144,6 +144,7 @@ export declare const tokens: {
   "color.icon.success": Record<".", ColorTokenNormalized["$value"]>;
   "color.icon.warning": Record<".", ColorTokenNormalized["$value"]>;
   "color.icon.error": Record<".", ColorTokenNormalized["$value"]>;
+  "color.icon.disabled": Record<".", ColorTokenNormalized["$value"]>;
   "size.0": Record<".", DimensionTokenNormalized["$value"]>;
   "size.2": Record<".", DimensionTokenNormalized["$value"]>;
   "size.4": Record<".", DimensionTokenNormalized["$value"]>;

package/dist/design-tokens.js

@@ -1147,12 +1147,12 @@ export const tokens = {
     ".": {
       "colorSpace": "srgb",
       "channels": [
-        0.7254901960784313,
-        0.7254901960784313,
-        0.7254901960784313
+        0.8,
+        0.8117647058823529,
+        0.8431372549019608
       ],
       "alpha": 1,
-      "hex": "#b9b9b9"
+      "hex": "#cccfd7"
     },
   },
   "color.text.disable-selected": {
@@ -1579,12 +1579,12 @@ export const tokens = {
     ".": {
       "colorSpace": "srgb",
       "channels": [
-        0.7254901960784313,
-        0.7254901960784313,
-        0.7254901960784313
+        0.43529411764705883,
+        0.4627450980392157,
+        0.5294117647058824
       ],
       "alpha": 1,
-      "hex": "#b9b9b9"
+      "hex": "#6f7687"
     },
   },
   "color.icon.success": {
@@ -1623,6 +1623,18 @@ export const tokens = {
       "hex": "#cc453e"
     },
   },
+  "color.icon.disabled": {
+    ".": {
+      "colorSpace": "srgb",
+      "channels": [
+        0.8,
+        0.8117647058823529,
+        0.8431372549019608
+      ],
+      "alpha": 1,
+      "hex": "#cccfd7"
+    },
+  },
   "size.0": {
     ".": {
       "value": 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsn-ux/gaia-styles",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
     "dev": "storybook dev -p 6006",

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

@@ -316,7 +316,7 @@
         "$value": "{color.primary.90}"
       },
       "disabled": {
-        "$value": "{color.utility.grey}"
+        "$value": "{color.neutral}"
       },
       "disable-selected": {
         "$value": "{color.neutral.60}"
@@ -430,7 +430,7 @@
         "$value": "{color.information}"
       },
       "on-disabled": {
-        "$value": "{color.utility.grey}"
+        "$value": "{color.neutral.60}"
       },
       "success": {
         "$value": "{color.success}"
@@ -440,6 +440,9 @@
       },
       "error": {
         "$value": "{color.error}"
+      },
+      "disabled": {
+        "$value": "{color.neutral}"
       }
     }
   },

package/src/styles/components/dropdown.css

@@ -1,8 +1,8 @@
 .ga-dropdown {
-  @apply flex max-h-81 min-w-36 flex-col items-stretch overflow-y-auto rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) outline-none;
+  @apply text-md flex max-h-81 max-w-[80ch] flex-col items-stretch overflow-y-auto rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) outline-none;
 
   .ga-dropdown__item {
-    @apply text-md relative flex h-9 shrink-0 cursor-pointer flex-row items-center gap-2 px-3 py-2 text-left leading-none text-(--ga-color-text-action);
+    @apply text-md relative flex h-9 min-w-0 shrink-0 cursor-pointer flex-row items-center gap-2 px-3 py-2 text-left leading-none text-(--ga-color-text-action);
 
     &:first-child {
       @apply rounded-t;
@@ -45,7 +45,11 @@
     @apply shrink-0 px-3 pt-3 pb-2 text-sm font-semibold;
   }
 
-  .ga-dropdown__content-spinner {
-    @apply mx-auto my-8 inline-flex;
+  .ga-dropdown__spinner {
+    @apply mx-auto my-5 inline-flex;
+  }
+
+  .ga-dropdown__item-label {
+    @apply min-w-0 truncate;
   }
 }

package/src/styles/components/form-field.css

@@ -1,14 +1,42 @@
 .ga-form-field {
   @apply flex flex-col gap-2;
 
-  > *,
   > .ga-select,
   > .ga-input {
-    @apply w-full;
+    @apply w-full shrink-0;
   }
 
   .ga-form-field__label {
-    @apply text-md px-1 leading-5 font-medium;
+    @apply inline-flex h-5 w-fit max-w-full min-w-0 gap-1 px-1 leading-5;
+
+    &:focus-visible {
+      @apply rounded outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+    }
+  }
+
+  .ga-form-field__label-text {
+    @apply text-md min-w-0 truncate font-medium;
+  }
+
+  .ga-form-field__label-state {
+    @apply text-sm font-normal;
+  }
+
+  .ga-form-field__label--defined {
+    .ga-form-field__label-text {
+      @apply border-b-2 border-dotted text-(--ga-color-text-action);
+    }
+
+    &:not(.ga-form-field__label--disabled) .ga-form-field__label-text:hover {
+      @apply text-(--ga-color-text-body);
+    }
+  }
+
+  .ga-form-field__label--disabled {
+    .ga-form-field__label-text,
+    .ga-form-field__label-state {
+      @apply border-(--ga-color-border-disabled) text-(--ga-color-text-disabled);
+    }
   }
 
   .ga-form-field__info {