@vsn-ux/gaia-styles 1.0.0-alpha.2

package/dist/base.css

@@ -0,0 +1,6 @@
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+body {
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  font-feature-settings: 'liga' 1, 'calt' 1;
+  color: var(--ga-color-cyan-90);
+}

package/dist/components/avatar.css

@@ -0,0 +1,34 @@
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+.ga-avatar {
+  display: inline-flex;
+  height: calc(0.25rem * 10);
+  width: calc(0.25rem * 10);
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: calc(infinity * 1px);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  vertical-align: middle;
+  --tw-font-weight: 700;
+  font-weight: 700;
+  &.ga-avatar--small {
+    height: calc(0.25rem * 6);
+    width: calc(0.25rem * 6);
+    font-size: var(--ga-size-font-sm);
+  }
+  &.ga-avatar--large {
+    height: calc(0.25rem * 16);
+    width: calc(0.25rem * 16);
+    font-size: var(--ga-size-font-2xl);
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/dist/components/badge.css

@@ -0,0 +1,116 @@
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+.ga-badge {
+  display: inline-block;
+  border-radius: calc(infinity * 1px);
+  vertical-align: baseline;
+  &.ga-badge--text {
+    min-width: calc(0.25rem * 6);
+    padding: calc(0.25rem * 1);
+    text-align: center;
+    font-size: var(--ga-size-font-sm);
+    --tw-leading: calc(0.25rem * 4);
+    line-height: calc(0.25rem * 4);
+    --tw-font-weight: 500;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  &.ga-badge--dot {
+    height: calc(0.25rem * 2);
+    width: calc(0.25rem * 2);
+  }
+  &.ga-badge--default {
+    background-color: var(--ga-color-cyan-80);
+    color: var(--ga-color-orange-10);
+  }
+  &.ga-badge--default-inverted {
+    background-color: var(--ga-color-orange-20);
+    color: var(--ga-color-cyan-90);
+  }
+  &.ga-badge--information {
+    background-color: var(--ga-color-blue-40);
+    color: var(--ga-color-cyan-90);
+  }
+  &.ga-badge--error {
+    background-color: var(--ga-color-red-40);
+    color: var(--ga-color-cyan-90);
+  }
+  &.ga-badge--warning {
+    background-color: var(--ga-color-orange-40);
+    color: var(--ga-color-cyan-90);
+  }
+  &.ga-badge--success {
+    background-color: var(--ga-color-green-40);
+    color: var(--ga-color-cyan-90);
+  }
+  &.ga-badge--muted {
+    background-color: #fff;
+    color: var(--ga-color-cyan-70);
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--ga-color-grey-40);
+    --tw-ring-inset: inset;
+  }
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}

package/dist/components/button.css

@@ -0,0 +1,115 @@
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+.ga-button {
+  display: inline-flex;
+  height: calc(0.25rem * 10);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: calc(0.25rem * 2);
+  border-radius: var(--ga-radius);
+  padding-inline: calc(0.25rem * 4);
+  vertical-align: middle;
+  font-size: var(--ga-size-font-md);
+  --tw-leading: calc(0.25rem * 1);
+  line-height: calc(0.25rem * 1);
+  --tw-font-weight: 700;
+  font-weight: 700;
+  &:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+    outline-offset: 2px;
+    outline-color: var(--ga-color-border-focus);
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  &.ga-button--primary {
+    background-color: var(--ga-color-surface-action);
+    color: var(--ga-color-text-on-action);
+    &:hover {
+      background-color: var(--ga-color-surface-action-hover);
+    }
+    &:active {
+      background-color: var(--ga-color-primary-70);
+    }
+    &:disabled {
+      background-color: var(--ga-color-surface-disabled);
+      color: var(--ga-color-text-disabled);
+    }
+  }
+  &.ga-button--secondary {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-action);
+    background-color: var(--ga-color-surface-primary);
+    color: var(--ga-color-text-action);
+    &:hover {
+      background-color: var(--ga-color-surface-action-hover-2);
+    }
+    &:active {
+      background-color: var(--ga-color-surface-primary);
+    }
+    &:disabled {
+      border-color: var(--ga-color-border-disabled);
+      background-color: var(--ga-color-surace-page);
+      color: var(--ga-color-text-disabled);
+    }
+  }
+  &.ga-button--ghost {
+    background-color: transparent;
+    color: var(--ga-color-text-action);
+    &:hover {
+      background-color: var(--ga-color-utility-teal-light);
+    }
+    &:active {
+      background-color: transparent;
+    }
+    &:disabled {
+      background-color: transparent;
+      color: var(--ga-color-text-disabled);
+    }
+  }
+  &.ga-button--transparent {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-action);
+    background-color: transparent;
+    color: var(--ga-color-text-action);
+    &:hover {
+      background-color: var(--ga-color-utility-teal-light);
+    }
+    &:focus-visible {
+      border-color: var(--ga-color-border-action);
+    }
+    &:active {
+      background-color: transparent;
+    }
+    &:disabled {
+      border-color: var(--ga-color-border-disabled);
+      background-color: transparent;
+      color: var(--ga-color-text-disabled);
+    }
+  }
+  &.ga-button--icon-only {
+    width: calc(0.25rem * 10);
+    padding-inline: calc(0.25rem * 0);
+  }
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@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;
+}

package/dist/components/card.css

@@ -0,0 +1,38 @@
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+.ga-card {
+  border-radius: var(--ga-radius);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--ga-color-border-primary);
+  background-color: #fff;
+  padding: calc(0.25rem * 4);
+  font-size: var(--ga-size-font-md);
+  &.ga-card--selectable {
+    cursor: pointer;
+    &:hover {
+      border-color: var(--ga-color-border-action-hover);
+      background-color: var(--ga-color-surface-action-hover-2);
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--ga-color-border-focus);
+    }
+  }
+  &.ga-card--disabled {
+    border-color: var(--ga-color-border-disabled);
+    background-color: var(--ga-color-surface-disabled);
+    color: var(--ga-color-text-disabled);
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package/dist/components/checkbox.css

@@ -0,0 +1,89 @@
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+.ga-checkbox {
+  position: relative;
+  display: inline-flex;
+  gap: calc(0.25rem * 2);
+  .ga-checkbox__native {
+    height: calc(0.25rem * 5);
+    width: calc(0.25rem * 5);
+    flex-shrink: 0;
+    opacity: 0%;
+    &:not(:disabled) {
+      cursor: pointer;
+    }
+  }
+  .ga-checkbox__marker {
+    pointer-events: none;
+    position: absolute;
+    top: calc(0.25rem * 0);
+    left: calc(0.25rem * 0);
+    height: calc(0.25rem * 5);
+    width: calc(0.25rem * 5);
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: var(--ga-color-border-action);
+    color: #fff;
+    .ga-checkbox__marker__indicator-checked, .ga-checkbox__marker__indicator-indeterminate {
+      display: none;
+    }
+  }
+  .ga-checkbox__native:focus-visible ~ .ga-checkbox__marker {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+    outline-offset: 2px;
+    outline-color: var(--ga-color-border-focus);
+  }
+  .ga-checkbox__native:not(:disabled):hover ~ .ga-checkbox__marker {
+    border-color: var(--ga-color-border-action-hover);
+    background-color: var(--ga-color-surface-action-hover-2);
+  }
+  .ga-checkbox__native:checked ~ .ga-checkbox__marker {
+    background-color: var(--ga-color-surface-action);
+    .ga-checkbox__marker__indicator-checked {
+      display: block;
+    }
+  }
+  .ga-checkbox__native:indeterminate ~ .ga-checkbox__marker {
+    background-color: var(--ga-color-surface-action);
+    .ga-checkbox__marker__indicator-indeterminate {
+      display: block;
+    }
+  }
+  .ga-checkbox__native:not(:disabled):checked:hover ~ .ga-checkbox__marker, .ga-checkbox__native:not(:disabled):indeterminate:hover ~ .ga-checkbox__marker {
+    background-color: var(--ga-color-surface-action-hover);
+  }
+  .ga-checkbox__native:disabled ~ .ga-checkbox__marker {
+    border-color: var(--ga-color-border-disabled);
+    background-color: var(--ga-color-surface-disabled);
+    color: var(--ga-color-text-disabled);
+  }
+  &.ga-checkbox--invalid .ga-checkbox__marker {
+    border-color: var(--ga-color-border-error);
+    background-color: var(--ga-color-surface-error);
+    color: var(--ga-color-border-error);
+  }
+  .ga-checkbox__label {
+    min-height: calc(0.25rem * 5);
+    font-size: var(--ga-size-font-md);
+    --tw-leading: calc(0.25rem * 5);
+    line-height: calc(0.25rem * 5);
+    &:empty {
+      display: none;
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}

package/dist/components/form-field.css

@@ -0,0 +1,28 @@
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+.ga-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.25rem * 2);
+  .ga-form-field__label {
+    padding-inline: calc(0.25rem * 1);
+    font-size: var(--ga-size-font-md);
+    --tw-leading: calc(0.25rem * 5);
+    line-height: calc(0.25rem * 5);
+    --tw-font-weight: 500;
+    font-weight: 500;
+  }
+  .ga-form-field__info {
+    display: flex;
+    align-items: center;
+    gap: calc(0.25rem * 1);
+    font-size: var(--ga-size-font-xs);
+  }
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/dist/components/input.css

@@ -0,0 +1,71 @@
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+.ga-input {
+  display: flex;
+  height: calc(0.25rem * 10);
+  width: calc(0.25rem * 50);
+  flex-direction: row;
+  align-items: center;
+  gap: calc(0.25rem * 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-bg-primary);
+  padding-inline: calc(0.25rem * 3);
+  padding-block: calc(0.25rem * 2);
+  font-size: var(--ga-size-font-md);
+  &:has(input:hover), &:is(input:hover) {
+    border-color: var(--ga-color-border-action-hover);
+    &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
+      background-color: var(--ga-color-surface-action-hover-2);
+    }
+  }
+  &:has(input:disabled), &:is(input:disabled) {
+    border-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-surface-disabled);
+    color: var(--ga-color-text-disable-selected);
+  }
+  &:has(input:focus), &:is(input:focus) {
+    border-color: var(--ga-color-border-focus);
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+    outline-color: var(--ga-color-border-focus);
+  }
+  &.ga-input--invalid {
+    border-color: var(--ga-color-border-error);
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+    outline-color: var(--ga-color-border-error);
+    &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
+      background-color: var(--ga-color-surface-error);
+    }
+  }
+  input {
+    height: calc(0.25rem * 6);
+    width: 100%;
+    min-width: calc(0.25rem * 0);
+    --tw-leading: calc(0.25rem * 6);
+    line-height: calc(0.25rem * 6);
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  &:is(input) {
+    min-width: calc(0.25rem * 0);
+    --tw-leading: calc(0.25rem * 6);
+    line-height: calc(0.25rem * 6);
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}

package/dist/components/menu.css

@@ -0,0 +1,61 @@
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+.ga-menu {
+  display: flex;
+  min-width: calc(0.25rem * 36);
+  flex-direction: column;
+  align-items: stretch;
+  border-radius: var(--ga-radius);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--ga-color-neutral-30);
+  background-color: #fff;
+  .ga-menu__item {
+    height: calc(0.25rem * 10);
+    cursor: pointer;
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-bottom-color: var(--ga-color-neutral-30);
+    padding-inline: calc(0.25rem * 4);
+    padding-block: calc(0.25rem * 2);
+    text-align: left;
+    font-size: var(--ga-size-font-md);
+    --tw-font-weight: 500;
+    font-weight: 500;
+    color: var(--ga-color-cyan-80);
+    &:first-child {
+      border-top-left-radius: var(--ga-radius);
+      border-top-right-radius: var(--ga-radius);
+    }
+    &:last-child {
+      border-bottom-right-radius: var(--ga-radius);
+      border-bottom-left-radius: var(--ga-radius);
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+    &:hover {
+      background-color: var(--ga-color-teal-10);
+    }
+    &:active {
+      background-color: var(--ga-color-cyan-80);
+      color: var(--ga-color-orange-10);
+    }
+  }
+  .ga-menu__separator {
+    padding-inline: calc(0.25rem * 3);
+    padding-top: calc(0.25rem * 3);
+    padding-bottom: calc(0.25rem * 2);
+    font-size: var(--ga-size-font-sm);
+    --tw-font-weight: 600;
+    font-weight: 600;
+    color: #6F7687;
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}

package/dist/components/radio-button.css

@@ -0,0 +1,107 @@
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+.ga-radio-button {
+  position: relative;
+  display: inline-flex;
+  cursor: pointer;
+  gap: calc(0.25rem * 2);
+  .ga-radio-button__native {
+    height: calc(0.25rem * 5);
+    width: calc(0.25rem * 5);
+    flex-shrink: 0;
+    cursor: pointer;
+    opacity: 0%;
+    &:disabled {
+      cursor: default;
+    }
+  }
+  .ga-radio-button__marker {
+    pointer-events: none;
+    position: absolute;
+    top: calc(0.25rem * 0);
+    left: calc(0.25rem * 0);
+    height: calc(0.25rem * 5);
+    width: calc(0.25rem * 5);
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: var(--ga-color-border-action);
+    color: #fff;
+  }
+  .ga-radio-button__native:focus-visible ~ .ga-radio-button__marker {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+    outline-offset: 2px;
+    outline-color: var(--ga-color-border-focus);
+  }
+  .ga-radio-button__native:not(:disabled):hover ~ .ga-radio-button__marker {
+    border-color: var(--ga-color-border-action-hover);
+    background-color: var(--ga-color-surface-action-hover-2);
+  }
+  .ga-radio-button__native:checked ~ .ga-radio-button__marker {
+    background-color: var(--ga-color-surface-action);
+    &::after {
+      position: absolute;
+      top: calc(1/2 * 100%);
+      left: calc(1/2 * 100%);
+      display: block;
+      height: calc(0.25rem * 2);
+      width: calc(0.25rem * 2);
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+      border-radius: calc(infinity * 1px);
+      background-color: #fff;
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
+  .ga-radio-button__native:not(:disabled):checked:hover ~ .ga-radio-button__marker {
+    background-color: var(--ga-color-surface-action-hover);
+  }
+  .ga-radio-button__native:disabled ~ .ga-radio-button__marker {
+    border-color: var(--ga-color-border-disabled);
+    background-color: var(--ga-color-surface-disabled);
+    color: var(--ga-color-text-disabled);
+  }
+  .ga-radio-button__label {
+    min-height: calc(0.25rem * 4);
+    font-size: var(--ga-size-font-md);
+    --tw-leading: calc(0.25rem * 5);
+    line-height: calc(0.25rem * 5);
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}