@vsn-ux/gaia-styles 0.6.6 → 0.6.8

package/dist/components/file-uploader.css

@@ -0,0 +1,247 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+@layer properties;
+.ga-file-uploader {
+  display: flex;
+  flex-direction: column;
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+  .ga-file-uploader__heading {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+    .ga-file-uploader__heading-label {
+      vertical-align: middle;
+      font-size: calc(
+    var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+      line-height: var(--tw-leading, calc(
+    var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+      letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
+  ));
+      --tw-font-weight: 500;
+      font-weight: 500;
+    }
+    .ga-file-uploader__heading-description {
+      font-size: calc(
+    var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+      line-height: var(--tw-leading, calc(
+    var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+      letter-spacing: var(--tw-tracking, 0);
+      --tw-font-weight: 400;
+      font-weight: 400;
+    }
+  }
+  .ga-button {
+    width: fit-content;
+  }
+  .ga-file-uploader__heading {
+    color: var(--ga-color-text-body);
+  }
+  &.ga-file-uploader--disabled .ga-file-uploader__heading {
+    color: var(--ga-color-text-disable-selected);
+  }
+  .ga-file-uploader__file-list {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    .ga-file-uploader__file-item {
+      display: flex;
+      height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
+      max-width: 58rem;
+      min-width: 22rem;
+      align-items: center;
+      justify-content: space-between;
+      border-radius: var(--ga-radius);
+      background-color: var(--ga-color-surface-disabled);
+      padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+      padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+      font-size: calc(
+    var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+      line-height: var(--tw-leading, calc(
+    var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+      letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
+  ));
+      --tw-font-weight: 400;
+      font-weight: 400;
+      color: var(--ga-color-text-body);
+      .ga-file-uploader__file-action {
+        display: flex;
+        height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+        width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--ga-radius);
+        --tw-border-style: none;
+        border-style: none;
+        background-color: transparent;
+        padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+        color: var(--ga-color-icon-action);
+        &:focus-visible {
+          outline-style: var(--tw-outline-style);
+          outline-width: 2px;
+          outline-offset: 2px;
+          outline-color: var(--ga-color-border-focus);
+        }
+      }
+      .ga-file-uploader__file-icon {
+        height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+        width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+      }
+      &.ga-file-uploader__file-item--success {
+        .ga-file-uploader__file-icon {
+          color: var(--ga-color-icon-success);
+        }
+      }
+      &.ga-file-uploader__file-item--error {
+        height: auto;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+        border-color: var(--ga-color-border-error);
+        background-color: var(--ga-color-surface-error);
+        outline-style: var(--tw-outline-style);
+        outline-width: 1px;
+        outline-color: var(--ga-color-border-error);
+        .ga-file-uploader__error-file {
+          display: flex;
+          width: 100%;
+          align-items: center;
+          justify-content: space-between;
+          --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+          line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+        }
+        .ga-file-uploader__error-callout {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+          vertical-align: middle;
+          font-size: calc(
+    var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+          line-height: var(--tw-leading, calc(
+    var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+          letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1)
+  ));
+          --tw-font-weight: 400;
+          font-weight: 400;
+          .ga-file-uploader__error-callout-icon {
+            height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+            width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+            color: var(--ga-color-icon-error);
+          }
+        }
+      }
+    }
+  }
+  .ga-file-uploader__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .ga-file-uploader__dropzone {
+    display: flex;
+    min-height: 6.25rem;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    --tw-border-style: dashed;
+    border-style: dashed;
+    border-color: var(--ga-color-border-action);
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
+    text-align: center;
+    font-size: calc(
+    var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+    line-height: var(--tw-leading, calc(
+    var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+    letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
+  ));
+    --tw-font-weight: 400;
+    font-weight: 400;
+    color: var(--ga-color-text-action);
+    &:hover {
+      border-color: var(--ga-color-border-action-hover);
+      background-color: var(--ga-color-surface-action-hover-2);
+      color: var(--ga-color-text-action-hover);
+    }
+    &:focus-visible, &:focus-within {
+      --tw-border-style: none;
+      border-style: none;
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-color: var(--ga-color-border-focus);
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
+    &.ga-file-uploader__dropzone--drag-hover {
+      --tw-border-style: none;
+      border-style: none;
+      background-color: var(--ga-color-surface-page);
+      color: var(--ga-color-text-action-hover);
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-color: var(--ga-color-border-focus);
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
+  }
+  .ga-file-uploader__dropzone[aria-disabled='true'], &.ga-file-uploader--disabled .ga-file-uploader__dropzone {
+    cursor: not-allowed;
+    border-color: var(--ga-color-border-disabled);
+    background-color: var(--ga-color-surface-primary);
+    color: var(--ga-color-text-disabled);
+  }
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-font-weight: initial;
+      --tw-outline-style: solid;
+      --tw-border-style: solid;
+      --tw-leading: initial;
+    }
+  }
+}

package/dist/components/form-field.css

@@ -3,21 +3,21 @@
 .ga-form-field {
   display: flex;
   flex-direction: column;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   > .ga-select, > .ga-input {
     width: 100%;
     flex-shrink: 0;
   }
   .ga-form-field__label {
     display: inline-flex;
-    height: calc(0.25rem * 5);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 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);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
     &:focus-visible {
       border-radius: var(--ga-radius);
       outline-style: var(--tw-outline-style);
@@ -27,7 +27,7 @@
     }
   }
   .ga-form-field__label-text {
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -80,8 +80,8 @@
   .ga-form-field__info {
     display: flex;
     align-items: flex-start;
-    gap: calc(0.25rem * 1);
-    padding-inline: calc(0.25rem * 1);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     font-size: calc(
     var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
   );

package/dist/components/input.css

@@ -2,18 +2,18 @@
 @layer properties;
 .ga-input {
   display: flex;
-  height: calc(0.25rem * 10);
-  width: calc(0.25rem * 50);
+  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
+  width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 50);
   flex-direction: row;
   align-items: center;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   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);
-  padding-inline: calc(0.25rem * 3);
-  padding-block: calc(0.25rem * 2);
+  padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+  padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -71,15 +71,15 @@
     }
   }
   input, &:is(input) {
-    min-width: calc(0.25rem * 0);
-    --tw-leading: calc(0.25rem * 6);
-    line-height: calc(0.25rem * 6);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     &::placeholder {
       color: var(--ga-color-text-disabled);
     }
   }
   input {
-    height: calc(0.25rem * 6);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     width: 100%;
     --tw-outline-style: none;
     outline-style: none;

package/dist/components/link.css

@@ -2,13 +2,13 @@
 @layer properties;
 .ga-link {
   display: inline-flex;
-  height: calc(0.25rem * 5);
+  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: calc(0.25rem * 1);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   border-radius: var(--ga-radius);
-  padding-inline: calc(0.25rem * 0.5);
+  padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.5);
   vertical-align: middle;
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -36,7 +36,7 @@
     text-decoration-thickness: 1px;
   }
   &.ga-link--small {
-    height: calc(0.25rem * 4);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -46,7 +46,7 @@
     letter-spacing: var(--tw-tracking, 0);
   }
   &.ga-link--large {
-    height: calc(0.25rem * 6);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     font-size: calc(
     var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
   );

package/dist/components/loader.css

@@ -0,0 +1,127 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+.ga-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+  &.ga-loader--small {
+    font-size: calc(
+    var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+    line-height: var(--tw-leading, calc(
+    var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+    letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1)
+  ));
+    .ga-loader__icon {
+      height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+      width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    }
+  }
+  &.ga-loader--medium {
+    font-size: calc(
+    var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+    line-height: var(--tw-leading, calc(
+    var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+    letter-spacing: var(--tw-tracking, 0);
+    .ga-loader__icon {
+      height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
+      width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
+    }
+  }
+  &.ga-loader--large {
+    font-size: calc(
+    var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+    line-height: var(--tw-leading, calc(
+    var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+    letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
+  ));
+    .ga-loader__icon {
+      height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
+      width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
+    }
+  }
+  .ga-loader__icon--animated {
+    animation: ga-loader-animation 1100ms linear infinite;
+  }
+  .ga-loader__icon--reduced-motion {
+    display: none;
+    color: var(--ga-color-icon-primary);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ga-loader__icon--animated {
+      display: none;
+    }
+    .ga-loader__icon--reduced-motion {
+      display: block;
+    }
+  }
+  .ga-loader__label {
+    color: var(--ga-color-text-body);
+    &:empty {
+      display: none;
+    }
+  }
+}
+.ga-inline-loading {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+  font-size: calc(
+    var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+  line-height: var(--tw-leading, calc(
+    var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+  letter-spacing: var(--tw-tracking, 0);
+  color: var(--ga-color-text-body);
+  &.ga-inline-loading--active {
+    .ga-inline-loading__icon {
+      height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+      width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+      animation: ga-loader-animation 1100ms linear infinite;
+    }
+  }
+  &.ga-inline-loading--completed {
+    .ga-inline-loading__icon {
+      color: var(--ga-color-icon-success);
+    }
+  }
+  &.ga-inline-loading--error {
+    .ga-inline-loading__icon {
+      color: var(--ga-color-icon-error);
+    }
+  }
+  &.ga-inline-loading--inactive {
+    color: var(--ga-color-text-disable-selected);
+  }
+  .ga-inline-loading__icon {
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+  }
+}
+@keyframes ga-loader-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  31.82% {
+    transform: rotate(90deg);
+  }
+  63.64% {
+    transform: rotate(180deg);
+  }
+  81.82% {
+    transform: rotate(270deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/dist/components/menu.css

@@ -2,7 +2,7 @@
 @layer properties;
 .ga-menu {
   display: flex;
-  max-height: calc(0.25rem * 81);
+  max-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 81);
   max-width: 80ch;
   flex-direction: column;
   align-items: stretch;
@@ -26,13 +26,13 @@
   .ga-menu__item {
     position: relative;
     display: flex;
-    min-height: calc(0.25rem * 9);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 9);
     flex-shrink: 0;
     cursor: pointer;
     flex-direction: row;
-    gap: calc(0.25rem * 2);
-    padding-inline: calc(0.25rem * 3);
-    padding-block: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     text-align: left;
     --tw-leading: 1;
     line-height: 1;
@@ -116,22 +116,22 @@
     }
   }
   .ga-menu__item-icon {
-    margin-top: calc(0.25rem * 0.5);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.5);
     flex-shrink: 0;
     color: var(--ga-color-icon-primary);
   }
   .ga-menu__item-content {
     display: flex;
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex-direction: column;
   }
   .ga-menu__item-title {
     display: flex;
     align-items: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   .ga-menu__item-label {
-    height: calc(0.25rem * 5);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -156,7 +156,7 @@
     border-width: 1px;
     border-color: var(--ga-color-border-disabled);
     background-color: #fff;
-    padding-inline: calc(0.25rem * 1);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     font-size: calc(
     var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -183,15 +183,15 @@
     color: var(--ga-color-text-disable-selected);
   }
   .ga-menu__separator {
-    margin-left: calc(0.25rem * 3);
+    margin-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
     border-color: var(--ga-color-border-primary);
   }
   .ga-menu__title {
-    padding-inline: calc(0.25rem * 3);
-    padding-top: calc(0.25rem * 3);
-    padding-bottom: calc(0.25rem * 2);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+    padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+    padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
   );