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

package/src/styles/components/badge.css

@@ -0,0 +1,39 @@
+.ga-badge {
+  @apply inline-block rounded-full align-baseline;
+
+  &.ga-badge--text {
+    @apply min-w-6 p-1 text-center text-sm leading-4 font-medium whitespace-nowrap;
+  }
+
+  &.ga-badge--dot {
+    @apply h-2 w-2;
+  }
+
+  &.ga-badge--default {
+    @apply bg-cyan-80 text-orange-10;
+  }
+
+  &.ga-badge--default-inverted {
+    @apply bg-orange-20 text-cyan-90;
+  }
+
+  &.ga-badge--information {
+    @apply bg-blue-40 text-cyan-90;
+  }
+
+  &.ga-badge--error {
+    @apply bg-red-40 text-cyan-90;
+  }
+
+  &.ga-badge--warning {
+    @apply bg-orange-40 text-cyan-90;
+  }
+
+  &.ga-badge--success {
+    @apply bg-green-40 text-cyan-90;
+  }
+
+  &.ga-badge--muted {
+    @apply text-cyan-70 ring-grey-40 bg-white ring-1 ring-inset;
+  }
+}

package/src/styles/components/button.css

@@ -0,0 +1,83 @@
+.ga-button {
+  @apply text-md inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded px-4 align-middle leading-1 font-bold;
+
+  &:focus-visible {
+    @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+  }
+
+  &:disabled {
+    @apply cursor-not-allowed;
+  }
+
+  &.ga-button--primary {
+    @apply bg-(--ga-color-surface-action) text-(--ga-color-text-on-action);
+
+    &:hover {
+      @apply bg-(--ga-color-surface-action-hover);
+    }
+
+    &:active {
+      @apply bg-(--ga-color-primary-70);
+    }
+
+    &:disabled {
+      @apply bg-(--ga-color-surface-disabled) text-(--ga-color-text-disabled);
+    }
+  }
+
+  &.ga-button--secondary {
+    @apply border border-(--ga-color-border-action) bg-(--ga-color-surface-primary) text-(--ga-color-text-action);
+
+    &:hover {
+      @apply bg-(--ga-color-surface-action-hover-2);
+    }
+
+    &:active {
+      @apply bg-(--ga-color-surface-primary);
+    }
+
+    &:disabled {
+      @apply border-(--ga-color-border-disabled) bg-(--ga-color-surace-page) text-(--ga-color-text-disabled);
+    }
+  }
+
+  &.ga-button--ghost {
+    @apply bg-transparent text-(--ga-color-text-action);
+
+    &:hover {
+      @apply bg-(--ga-color-utility-teal-light);
+    }
+
+    &:active {
+      @apply bg-transparent;
+    }
+
+    &:disabled {
+      @apply bg-transparent text-(--ga-color-text-disabled);
+    }
+  }
+
+  &.ga-button--transparent {
+    @apply border border-(--ga-color-border-action) bg-transparent text-(--ga-color-text-action);
+
+    &:hover {
+      @apply bg-(--ga-color-utility-teal-light);
+    }
+
+    &:focus-visible {
+      @apply border-(--ga-color-border-action);
+    }
+
+    &:active {
+      @apply bg-transparent;
+    }
+
+    &:disabled {
+      @apply border-(--ga-color-border-disabled) bg-transparent text-(--ga-color-text-disabled);
+    }
+  }
+
+  &.ga-button--icon-only {
+    @apply w-10 px-0;
+  }
+}

package/src/styles/components/card.css

@@ -0,0 +1,19 @@
+.ga-card {
+  @apply text-md rounded border border-(--ga-color-border-primary) bg-white p-4;
+
+  &.ga-card--selectable {
+    @apply cursor-pointer;
+
+    &:hover {
+      @apply border-(--ga-color-border-action-hover) bg-(--ga-color-surface-action-hover-2);
+    }
+
+    &:focus-visible {
+      @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+    }
+  }
+
+  &.ga-card--disabled {
+    @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disabled);
+  }
+}

package/src/styles/components/checkbox.css

@@ -0,0 +1,66 @@
+.ga-checkbox {
+  @apply relative inline-flex gap-2;
+
+  .ga-checkbox__native {
+    @apply h-5 w-5 flex-shrink-0 opacity-0;
+
+    &:not(:disabled) {
+      @apply cursor-pointer;
+    }
+  }
+
+  .ga-checkbox__marker {
+    @apply pointer-events-none absolute top-0 left-0 h-5 w-5 rounded border-2 border-(--ga-color-border-action) text-white;
+
+    .ga-checkbox__marker__indicator-checked,
+    .ga-checkbox__marker__indicator-indeterminate {
+      @apply hidden;
+    }
+  }
+
+  .ga-checkbox__native:focus-visible ~ .ga-checkbox__marker {
+    @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+  }
+
+  .ga-checkbox__native:not(:disabled):hover ~ .ga-checkbox__marker {
+    @apply border-(--ga-color-border-action-hover) bg-(--ga-color-surface-action-hover-2);
+  }
+
+  .ga-checkbox__native:checked ~ .ga-checkbox__marker {
+    @apply bg-(--ga-color-surface-action);
+
+    .ga-checkbox__marker__indicator-checked {
+      @apply block;
+    }
+  }
+
+  .ga-checkbox__native:indeterminate ~ .ga-checkbox__marker {
+    @apply bg-(--ga-color-surface-action);
+
+    .ga-checkbox__marker__indicator-indeterminate {
+      @apply block;
+    }
+  }
+
+  .ga-checkbox__native:not(:disabled):checked:hover ~ .ga-checkbox__marker,
+  .ga-checkbox__native:not(:disabled):indeterminate:hover
+    ~ .ga-checkbox__marker {
+    @apply bg-(--ga-color-surface-action-hover);
+  }
+
+  .ga-checkbox__native:disabled ~ .ga-checkbox__marker {
+    @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disabled);
+  }
+
+  &.ga-checkbox--invalid .ga-checkbox__marker {
+    @apply border-(--ga-color-border-error) bg-(--ga-color-surface-error) text-(--ga-color-border-error);
+  }
+
+  .ga-checkbox__label {
+    @apply text-md min-h-5 leading-5;
+
+    &:empty {
+      @apply hidden;
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+.ga-form-field {
+  @apply flex flex-col gap-2;
+
+  .ga-form-field__label {
+    @apply text-md px-1 leading-5 font-medium;
+  }
+
+  .ga-form-field__info {
+    @apply flex items-center gap-1 text-xs;
+  }
+}

package/src/styles/components/input.css

@@ -0,0 +1,40 @@
+.ga-input {
+  @apply text-md flex h-10 w-50 flex-row items-center gap-2 rounded border border-(--ga-color-border-primary) bg-(--ga-color-bg-primary) px-3 py-2;
+
+  &:has(input:hover),
+  &:is(input:hover) {
+    @apply border-(--ga-color-border-action-hover);
+
+    &:has(input:not(:placeholder-shown)),
+    &:is(input:not(:placeholder-shown)) {
+      @apply bg-(--ga-color-surface-action-hover-2);
+    }
+  }
+
+  &:has(input:disabled),
+  &:is(input:disabled) {
+    @apply border-(--ga-color-border-primary) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
+  }
+
+  &:has(input:focus),
+  &:is(input:focus) {
+    @apply border-(--ga-color-border-focus) outline-1 outline-(--ga-color-border-focus);
+  }
+
+  &.ga-input--invalid {
+    @apply border-(--ga-color-border-error) outline outline-(--ga-color-border-error);
+
+    &:has(input:not(:placeholder-shown)),
+    &:is(input:not(:placeholder-shown)) {
+      @apply bg-(--ga-color-surface-error);
+    }
+  }
+
+  input {
+    @apply h-6 w-full min-w-0 leading-6 outline-none;
+  }
+
+  &:is(input) {
+    @apply min-w-0 leading-6;
+  }
+}

package/src/styles/components/menu.css

@@ -0,0 +1,28 @@
+.ga-menu {
+  @apply border-neutral-30 flex min-w-36 flex-col items-stretch rounded border bg-white;
+
+  .ga-menu__item {
+    @apply text-cyan-80 text-md border-b-neutral-30 h-10 cursor-pointer border-b px-4 py-2 text-left font-medium;
+
+    &:first-child {
+      @apply rounded-t;
+    }
+
+    &:last-child {
+      @apply rounded-b border-b-0;
+    }
+
+    &:hover {
+      @apply bg-teal-10;
+    }
+
+    &:active {
+      @apply bg-cyan-80 text-orange-10;
+    }
+  }
+
+  .ga-menu__separator {
+    /* TODO: fix hard-coded color value into token */
+    @apply px-3 pt-3 pb-2 text-sm font-semibold text-[#6F7687];
+  }
+}

package/src/styles/components/radio-button.css

@@ -0,0 +1,44 @@
+.ga-radio-button {
+  @apply relative inline-flex cursor-pointer gap-2;
+
+  .ga-radio-button__native {
+    @apply h-5 w-5 flex-shrink-0 cursor-pointer opacity-0;
+
+    &:disabled {
+      @apply cursor-default;
+    }
+  }
+
+  .ga-radio-button__marker {
+    @apply pointer-events-none absolute top-0 left-0 h-5 w-5 rounded-full border-2 border-(--ga-color-border-action) text-white;
+  }
+
+  .ga-radio-button__native:focus-visible ~ .ga-radio-button__marker {
+    @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+  }
+
+  .ga-radio-button__native:not(:disabled):hover ~ .ga-radio-button__marker {
+    @apply border-(--ga-color-border-action-hover) bg-(--ga-color-surface-action-hover-2);
+  }
+
+  .ga-radio-button__native:checked ~ .ga-radio-button__marker {
+    @apply bg-(--ga-color-surface-action);
+
+    &::after {
+      @apply absolute top-1/2 left-1/2 block h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white content-[''];
+    }
+  }
+
+  .ga-radio-button__native:not(:disabled):checked:hover
+    ~ .ga-radio-button__marker {
+    @apply bg-(--ga-color-surface-action-hover);
+  }
+
+  .ga-radio-button__native:disabled ~ .ga-radio-button__marker {
+    @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disabled);
+  }
+
+  .ga-radio-button__label {
+    @apply text-md min-h-4 leading-5;
+  }
+}

package/src/styles/components/segmented-control.css

@@ -0,0 +1,40 @@
+.ga-segmented-control {
+  @apply text-md inline-flex h-10 items-center justify-center align-middle;
+
+  .ga-segmented-control__button {
+    @apply text-cyan-80 border-neutral-30 inline-flex h-10 items-center justify-center gap-2 border-t border-b border-l bg-white px-4 align-middle leading-1 font-medium;
+
+    &:first-of-type {
+      @apply rounded-l;
+    }
+
+    &:last-of-type {
+      @apply rounded-r border-r;
+    }
+
+    &.ga-segmented-control__button--selected {
+      @apply bg-cyan-80 text-orange-10 font-semibold;
+    }
+
+    &:not(
+        .ga-segmented-control__button--selected,
+        .ga-segmented-control__button--disabled,
+        :disabled
+      ) {
+      @apply cursor-pointer;
+
+      &:hover {
+        @apply bg-(--ga-color-surface-action-hover-2);
+      }
+
+      &:active {
+        @apply bg-white;
+      }
+    }
+
+    &.ga-segmented-control__button--disabled,
+    &:disabled {
+      @apply bg-neutral-10 border-neutral-30 text-grey-40;
+    }
+  }
+}

package/src/styles/components/text-area.css

@@ -0,0 +1,27 @@
+.ga-text-area {
+  @apply text-md flex w-50 flex-row items-center gap-2 rounded border border-(--ga-color-border-primary) bg-(--ga-color-bg-primary);
+
+  &:has(textarea:hover) {
+    @apply border-(--ga-color-border-action-hover);
+  }
+
+  &:has(textarea:disabled) {
+    @apply border-(--ga-color-border-primary) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
+  }
+
+  &:has(textarea:focus) {
+    @apply border-(--ga-color-border-focus) outline-1 outline-(--ga-color-border-focus);
+  }
+
+  &.ga-text-area--invalid {
+    @apply border-(--ga-color-border-error) outline outline-(--ga-color-border-error);
+
+    &:has(textarea:not(:placeholder-shown)) {
+      @apply bg-(--ga-color-surface-error);
+    }
+  }
+
+  textarea {
+    @apply w-full min-w-0 px-3 py-2 leading-6 outline-none;
+  }
+}

package/src/styles/components/tooltip.css

@@ -0,0 +1,92 @@
+.ga-tooltip {
+  @apply text-md relative max-w-100 rounded bg-(--ga-color-surface-action-hover) p-2 text-(--ga-color-text-on-action);
+
+  &.ga-tooltip--top-start,
+  &.ga-tooltip--top-center,
+  &.ga-tooltip--top-end,
+  &.ga-tooltip--bottom-start,
+  &.ga-tooltip--bottom-center,
+  &.ga-tooltip--bottom-end,
+  &.ga-tooltip--left-start,
+  &.ga-tooltip--left-center,
+  &.ga-tooltip--left-end,
+  &.ga-tooltip--right-start,
+  &.ga-tooltip--right-center,
+  &.ga-tooltip--right-end {
+    @apply before:absolute before:content-[''];
+  }
+
+  &.ga-tooltip--top-start,
+  &.ga-tooltip--top-center,
+  &.ga-tooltip--top-end {
+    @apply mb-2;
+  }
+
+  &.ga-tooltip--bottom-start,
+  &.ga-tooltip--bottom-center,
+  &.ga-tooltip--bottom-end {
+    @apply mt-2;
+  }
+
+  &.ga-tooltip--left-start,
+  &.ga-tooltip--left-center,
+  &.ga-tooltip--left-end {
+    @apply mr-2;
+  }
+
+  &.ga-tooltip--right-start,
+  &.ga-tooltip--right-center,
+  &.ga-tooltip--right-end {
+    @apply ml-2;
+  }
+
+  &.ga-tooltip--top-start::before,
+  &.ga-tooltip--top-center::before,
+  &.ga-tooltip--top-end::before {
+    @apply -bottom-2 border-x-8 border-t-8 border-x-transparent border-t-(--ga-color-surface-action-hover);
+  }
+  &.ga-tooltip--bottom-start::before,
+  &.ga-tooltip--bottom-center::before,
+  &.ga-tooltip--bottom-end::before {
+    @apply -top-2 border-x-8 border-b-8 border-x-transparent border-b-(--ga-color-surface-action-hover);
+  }
+  &.ga-tooltip--top-start::before,
+  &.ga-tooltip--bottom-start::before {
+    @apply left-4;
+  }
+  &.ga-tooltip--top-center::before,
+  &.ga-tooltip--bottom-center::before {
+    @apply left-1/2 -translate-x-1/2;
+  }
+  &.ga-tooltip--top-end::before,
+  &.ga-tooltip--bottom-end::before {
+    @apply right-4;
+  }
+
+  &.ga-tooltip--left-start::before,
+  &.ga-tooltip--left-center::before,
+  &.ga-tooltip--left-end::before {
+    @apply -right-2 border-y-8 border-l-8 border-y-transparent border-l-(--ga-color-surface-action-hover);
+  }
+  &.ga-tooltip--right-start::before,
+  &.ga-tooltip--right-center::before,
+  &.ga-tooltip--right-end::before {
+    @apply -left-2 border-y-8 border-r-8 border-y-transparent border-r-(--ga-color-surface-action-hover);
+  }
+  &.ga-tooltip--left-start::before,
+  &.ga-tooltip--right-start::before {
+    @apply top-4;
+  }
+  &.ga-tooltip--left-center::before,
+  &.ga-tooltip--right-center::before {
+    @apply top-1/2 -translate-y-1/2;
+  }
+  &.ga-tooltip--left-end::before,
+  &.ga-tooltip--right-end::before {
+    @apply bottom-4;
+  }
+
+  .ga-tooltip__title {
+    @apply font-semibold;
+  }
+}

package/src/styles/components.css

@@ -0,0 +1,12 @@
+@import './components/avatar.css';
+@import './components/badge.css';
+@import './components/button.css';
+@import './components/card.css';
+@import './components/checkbox.css';
+@import './components/form-field.css';
+@import './components/input.css';
+@import './components/menu.css';
+@import './components/radio-button.css';
+@import './components/segmented-control.css';
+@import './components/text-area.css';
+@import './components/tooltip.css';

package/src/styles/tailwind.css

@@ -0,0 +1,2 @@
+@import './all.css';
+@import 'tailwindcss/utilities.css' layer(utilities);

package/src/styles/theme.css

@@ -0,0 +1,68 @@
+@theme inline {
+  --color-cyan-60: var(--ga-color-cyan-60);
+  --color-cyan-70: var(--ga-color-cyan-70);
+  --color-cyan-80: var(--ga-color-cyan-80);
+  --color-cyan-90: var(--ga-color-cyan-90);
+  --color-blue-10: var(--ga-color-blue-10);
+  --color-blue-40: var(--ga-color-blue-40);
+  --color-green-10: var(--ga-color-green-10);
+  --color-green-40: var(--ga-color-green-40);
+  --color-grey-10: var(--ga-color-grey-10);
+  --color-grey-40: var(--ga-color-grey-40);
+  --color-indigo-10: var(--ga-color-indigo-10);
+  --color-indigo-40: var(--ga-color-indigo-40);
+  --color-lime-10: var(--ga-color-lime-10);
+  --color-lime-40: var(--ga-color-lime-40);
+  --color-neutral: var(--ga-color-neutral);
+  --color-neutral-10: var(--ga-color-neutral-10);
+  --color-neutral-20: var(--ga-color-neutral-20);
+  --color-neutral-30: var(--ga-color-neutral-30);
+  --color-orange-10: var(--ga-color-orange-10);
+  --color-orange-20: var(--ga-color-orange-20);
+  --color-orange-30: var(--ga-color-orange-30);
+  --color-orange-40: var(--ga-color-orange-40);
+  --color-pink-10: var(--ga-color-pink-10);
+  --color-pink-40: var(--ga-color-pink-40);
+  --color-purple-10: var(--ga-color-purple-10);
+  --color-purple-40: var(--ga-color-purple-40);
+  --color-red-10: var(--ga-color-red-10);
+  --color-red-40: var(--ga-color-red-40);
+  --color-rose-10: var(--ga-color-rose-10);
+  --color-rose-40: var(--ga-color-rose-40);
+  --color-teal-10: var(--ga-color-teal-10);
+  --color-teal-20: var(--ga-color-teal-20);
+  --color-teal-30: var(--ga-color-teal-30);
+  --color-teal-40: var(--ga-color-teal-40);
+  --color-teal-50: var(--ga-color-teal-50);
+  --color-teal-60: var(--ga-color-teal-60);
+  --color-teal-70: var(--ga-color-teal-70);
+  --color-teal-80: var(--ga-color-teal-80);
+  --color-teal-90: var(--ga-color-teal-90);
+  --color-teal-100: var(--ga-color-teal-100);
+  --color-yellow-10: var(--ga-color-yellow-10);
+  --color-yellow-40: var(--ga-color-yellow-40);
+  --color-black: #000;
+  --color-white: #fff;
+
+  --font-inter: Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-inter--font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
+  --default-font-family: var(--font-inter);
+
+  --text-xs: var(--ga-size-font-xs);
+  --text-sm: var(--ga-size-font-sm);
+  --text-md: var(--ga-size-font-md);
+  --text-lg: var(--ga-size-font-lg);
+  --text-xl: var(--ga-size-font-xl);
+  --text-2xl: var(--ga-size-font-2xl);
+  --text-3xl: var(--ga-size-font-3xl);
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --radius: var(--ga-radius);
+  --radius-sharp: var(--ga-radius-sharp);
+
+  --spacing: 0.25rem;
+}