avo 3.30.4 → 4.0.0.beta.2

data/app/assets/stylesheets/css/components/modal.css

@@ -0,0 +1,228 @@
+/* Modal Component — composes .card for the content shell */
+
+/* Height size variables */
+.modal {
+  --modal-height-sm: 24rem;
+  --modal-height-md: 28rem;
+  --modal-height-lg: 32rem;
+  --modal-height-xl: 36rem;
+  --modal-height-2xl: 42rem;
+  --modal-height-3xl: 48rem;
+  --modal-height-4xl: 56rem;
+}
+
+.modal {
+  @apply fixed inset-0 w-full z-150 flex justify-center items-center;
+}
+
+.modal__overlay {
+  @apply absolute w-full h-full flex justify-center items-center;
+
+  background-color: color-mix(in oklch, var(--color-avo-neutral-950) 25%, transparent);
+
+  .dark & {
+    background-color: color-mix(in oklch, var(--color-avo-neutral-950) 60%, transparent);
+  }
+}
+
+.modal__card-container {
+  @apply flex flex-col items-center justify-center relative shrink-0 w-full;
+}
+
+.modal__card {
+  @apply relative size-full shrink-0;
+
+  box-shadow: var(--shadow-modal);
+}
+
+/* Modal-specific card overrides */
+.modal__card > .card {
+  @apply size-full;
+}
+
+.modal__card > .card > .card__wrapper {
+  @apply size-full flex flex-col;
+}
+
+.modal__card .card__header {
+  @apply py-3 px-4;
+}
+
+.modal__card .card__body {
+  @apply flex flex-col flex-1 gap-4 items-start pt-0 px-0 min-h-64;
+}
+
+.modal__title {
+  @apply font-medium;
+}
+
+.modal__close-button {
+  @apply shrink-0 size-5 cursor-pointer text-content-secondary hover:text-content transition-colors;
+}
+
+.modal__width-selector {
+  @apply shrink-0 size-5 cursor-pointer text-content-secondary hover:text-content transition-colors;
+}
+
+.modal__height-selector {
+  @apply shrink-0 size-5 cursor-pointer text-content-secondary hover:text-content transition-colors;
+}
+
+.modal__body-content {
+  @apply size-full;
+}
+
+.modal__controls {
+  @apply flex items-center justify-between py-2 px-3 w-full;
+}
+
+.modal--width-sm {
+  .modal__card {
+    @apply w-sm;
+  }
+}
+
+.modal--width-md {
+  .modal__card {
+    @apply w-md;
+  }
+}
+
+.modal--width-lg {
+  .modal__card {
+    @apply w-lg;
+  }
+}
+
+.modal--width-xl {
+  .modal__card {
+    @apply w-xl;
+  }
+}
+
+.modal--width-2xl {
+  .modal__card {
+    @apply w-2xl;
+  }
+}
+
+.modal--width-3xl {
+  .modal__card {
+    @apply w-3xl;
+  }
+}
+
+.modal--width-4xl {
+  .modal__card {
+    @apply w-4xl;
+  }
+}
+
+.modal--width-25 {
+  .modal__card {
+    @apply w-[25dvw];
+  }
+}
+
+.modal--width-50 {
+  .modal__card {
+    @apply w-[50dvw];
+  }
+}
+
+.modal--width-75 {
+  .modal__card {
+    @apply w-[75dvw];
+  }
+}
+
+.modal--width-100 {
+  .modal__card {
+    @apply w-full;
+  }
+}
+
+.modal--width-full {
+  .modal__card {
+    @apply w-[calc(100dvw-2rem)];
+  }
+}
+
+.modal--height-auto {
+  .modal__card {
+    @apply min-h-32;
+  }
+}
+
+.modal--height-sm {
+  .modal__card {
+    @apply h-[var(--modal-height-sm)];
+  }
+}
+
+.modal--height-md {
+  .modal__card {
+    @apply h-[var(--modal-height-md)];
+  }
+}
+
+.modal--height-lg {
+  .modal__card {
+    @apply h-[var(--modal-height-lg)];
+  }
+}
+
+.modal--height-xl {
+  .modal__card {
+    @apply h-[var(--modal-height-xl)];
+  }
+}
+
+.modal--height-2xl {
+  .modal__card {
+    @apply h-[var(--modal-height-2xl)];
+  }
+}
+
+.modal--height-3xl {
+  .modal__card {
+    @apply h-[var(--modal-height-3xl)];
+  }
+}
+
+.modal--height-4xl {
+  .modal__card {
+    @apply h-[var(--modal-height-4xl)];
+  }
+}
+
+.modal--height-full {
+  .modal__card {
+    @apply h-[calc(100dvh-2rem)];
+  }
+}
+
+
+.modal--height-25 {
+  .modal__card {
+    @apply h-[25dvh];
+  }
+}
+
+.modal--height-50 {
+  .modal__card {
+    @apply h-[50dvh];
+  }
+}
+
+.modal--height-75 {
+  .modal__card {
+    @apply h-[75dvh];
+  }
+}
+
+.modal--height-100 {
+  .modal__card {
+    @apply h-full;
+  }
+}

data/app/assets/stylesheets/css/components/tooltip.css

@@ -0,0 +1,25 @@
+/* Custom Tippy theme: basic */
+/* Supports both light and dark mode via .dark class */
+
+.tippy-box[data-theme~='basic'] {
+  @apply bg-background border border-neutral-200 rounded-md;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
+}
+
+.tippy-box[data-theme~='basic'] .tippy-content {
+  @apply py-1 px-2 font-sans text-sm font-normal leading-5 text-content;
+}
+
+.tippy-box[data-theme~='basic'] .tippy-arrow {
+  @apply hidden;
+}
+
+/* Dark mode support */
+.dark .tippy-box[data-theme~='basic'] {
+  @apply bg-background border-secondary;
+}
+
+.dark .tippy-box[data-theme~='basic'] .tippy-content {
+  @apply text-content;
+}
+

data/app/assets/stylesheets/css/components/ui/badge.css

@@ -0,0 +1,143 @@
+/* Badge Component - Based on Figma Design System */
+/* BEM Methodology: .badge (block), .badge__icon, .badge__label (elements), .badge--modifier (modifiers) */
+
+.badge {
+  /* Layout */
+  @apply inline-flex items-center justify-center text-center font-medium leading-4 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
+  height: var(--spacing-6, 24px);
+  padding: var(--spacing-05, 2px) var(--spacing-2, 8px);
+  gap: var(--spacing-05, 2px);
+
+  /* Style */
+  border-radius: var(--rounded-md, 6px);
+
+  /* Typography */
+  font-size: var(--text-xs, 12px);
+
+  background: color-mix(in oklab, var(--badge-bg), var(--color-primary) 85%);
+  color: var(--badge-text);
+}
+
+/* Badge elements */
+.badge__icon {
+  @apply shrink-0 size-3;
+}
+
+.badge--subtle {
+}
+
+.badge--solid {
+  color: var(--color-white);
+  /* work with the bg color to make it more saturated and lighter */
+  background: color-mix(in oklab, oklch(from var(--badge-text) l calc(c * 1.2) h) 80%, white);
+}
+
+.badge--success {
+  --badge-bg: var(--color-green-400);
+  --badge-text: var(--color-green-600);
+}
+
+.badge--warning {
+  --badge-bg: var(--color-orange-400);
+  --badge-text: var(--color-orange-600);
+}
+
+.badge--danger {
+  --badge-bg: var(--color-red-400);
+  --badge-text: var(--color-red-600);
+}
+
+.badge--info {
+  --badge-bg: var(--color-blue-400);
+  --badge-text: var(--color-blue-600);
+}
+
+.badge--neutral {
+  --badge-bg: var(--color-gray-400);
+  --badge-text: var(--color-gray-600);
+}
+
+.badge--red {
+  --badge-bg: var(--color-red-400);
+  --badge-text: var(--color-red-600);
+}
+
+.badge--orange {
+  --badge-bg: var(--color-orange-400);
+  --badge-text: var(--color-orange-600);
+}
+
+.badge--amber {
+  --badge-bg: var(--color-amber-400);
+  --badge-text: var(--color-amber-600);
+}
+
+.badge--yellow {
+  --badge-bg: var(--color-yellow-400);
+  --badge-text: var(--color-yellow-600);
+}
+
+.badge--lime {
+  --badge-bg: var(--color-lime-400);
+  --badge-text: var(--color-lime-600);
+}
+
+.badge--green {
+  --badge-bg: var(--color-green-400);
+  --badge-text: var(--color-green-600);
+}
+
+.badge--emerald {
+  --badge-bg: var(--color-emerald-400);
+  --badge-text: var(--color-emerald-600);
+}
+
+.badge--teal {
+  --badge-bg: var(--color-teal-400);
+  --badge-text: var(--color-teal-600);
+}
+
+.badge--cyan {
+  --badge-bg: var(--color-cyan-400);
+  --badge-text: var(--color-cyan-600);
+}
+
+.badge--sky {
+  --badge-bg: var(--color-sky-400);
+  --badge-text: var(--color-sky-600);
+}
+
+.badge--blue {
+  --badge-bg: var(--color-blue-400);
+  --badge-text: var(--color-blue-600);
+}
+
+.badge--indigo {
+  --badge-bg: var(--color-indigo-400);
+  --badge-text: var(--color-indigo-600);
+}
+
+.badge--violet {
+  --badge-bg: var(--color-violet-400);
+  --badge-text: var(--color-violet-600);
+}
+
+.badge--purple {
+  --badge-bg: var(--color-purple-400);
+  --badge-text: var(--color-purple-600);
+}
+
+.badge--fuchsia {
+  --badge-bg: var(--color-fuchsia-400);
+  --badge-text: var(--color-fuchsia-600);
+}
+
+.badge--pink {
+  --badge-bg: var(--color-pink-400);
+  --badge-text: var(--color-pink-600);
+}
+
+.badge--rose {
+  --badge-bg: var(--color-rose-400);
+  --badge-text: var(--color-rose-600);
+}

data/app/assets/stylesheets/css/components/ui/card.css

@@ -0,0 +1,95 @@
+/* Card Component - Based on Figma Design System */
+.card {
+  @apply flex flex-col items-start self-stretch rounded-xl border border-tertiary bg-secondary;
+}
+
+/* Card variants */
+.card--default {
+  /* Default styling already applied */
+}
+
+.card--compact {
+  /* Compact variant - smaller spacing */
+  .card__wrapper {
+    @apply p-0.5;
+  }
+
+  .card__header {
+    @apply py-2 px-3;
+  }
+}
+
+.card--full-width {
+  /* Full width variant */
+  @apply w-full;
+}
+
+/* Card wrapper */
+.card__wrapper {
+  @apply flex flex-col items-start self-stretch w-full;
+  /* offset 1px from the wrapper to match the design */
+  padding: calc(var(--spacing) - 1px);
+}
+
+/* for pagination we need the padding to be 4px */
+/* TODO: maybe we can make the same padding for all the cases */
+.card:has(.card__footer .pagination) {
+  .card__wrapper {
+    @apply p-1;
+  }
+}
+
+/* Card header */
+.card__header {
+  @apply flex flex-col items-start self-stretch py-3 px-4;
+
+  &:has(select),
+  &:has(.button) {
+    @apply pe-0;
+  }
+
+  /* `sm` size buttons make the header too tall. This will compensate for it. */
+  .button {
+    @apply -my-1;
+  }
+}
+
+.card--compact-header {
+  .card__header {
+    @apply py-1 px-2;
+  }
+}
+
+/* Card title - Copy/14/500 from Figma */
+.card__title {
+  @apply text-content font-medium leading-6 text-sm;
+}
+
+/* Card description - Copy/14/400 from Figma */
+.card__description {
+  @apply text-content-secondary font-normal leading-5 text-sm;
+}
+
+/* Card body */
+.card__body {
+  @apply flex flex-col items-start self-stretch w-full rounded-lg border border-tertiary bg-primary overflow-hidden;
+}
+
+/* Card footer - full width so pagination can span edge to edge */
+.card__footer {
+  @apply w-full;
+    &:has(.pagination) {
+      @apply p-1 pt-0;
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .card__header {
+    @apply py-2 px-3;
+  }
+
+  .card--compact .card__header {
+    @apply py-1 px-2;
+  }
+}

data/app/assets/stylesheets/css/components/ui/checkbox.css

@@ -0,0 +1,50 @@
+@layer base {
+  /* input[type=radio], */
+  input[type=checkbox] {
+    @apply appearance-none size-4 cursor-pointer rounded-sm border border-tertiary bg-primary;
+
+    box-shadow: var(--box-shadow);
+  }
+
+  /* input[type=radio] {
+    @apply rounded-full;
+  } */
+
+  input[type=checkbox]:checked {
+    @apply bg-no-repeat bg-center bg-size-[70%];
+    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M10.1953%200.195262C10.4556%20-0.0650874%2010.8776%20-0.0650874%2011.138%200.195262C11.3983%200.455612%2011.3983%200.877621%2011.138%201.13797L4.4713%207.80464C4.21095%208.06499%203.78895%208.06499%203.5286%207.80464L0.195262%204.4713C-0.0650874%204.21095%20-0.0650874%203.78894%200.195262%203.5286C0.455612%203.26825%200.877621%203.26825%201.13797%203.5286L3.99995%206.39057L10.1953%200.195262Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E);
+  }
+
+  input[type=checkbox]:indeterminate {
+    @apply bg-no-repeat bg-center bg-size-[70%];
+    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%222%22%20viewBox%3D%220%200%2011%202%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M10%200C10.3682%200%2010.6667%200.298477%2010.6667%200.666667C10.6667%201.03486%2010.3682%201.33333%2010%201.33333H0.666667C0.298477%201.33333%200%201.03486%200%200.666667C0%200.298477%200.298477%200%200.666667%200H10Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E);
+  }
+
+  /* input[type=radio]:checked, */
+  input[type=checkbox]:checked,
+  input[type=checkbox]:indeterminate {
+    @apply bg-accent-content border-accent-content;
+  }
+
+  /* input[type=radio]:focus-visible, */
+  input[type=radio]:hover:not(:disabled),
+  input[type=checkbox]:focus-visible,
+  input[type=checkbox]:hover:not(:disabled) {
+    @apply outline-2 outline-offset-2 outline-accent-content;
+  }
+
+  /* input[type=radio]:checked:focus-visible,
+  input[type=radio]:checked:hover:not(:disabled), */
+  input[type=checkbox]:checked:focus-visible,
+  input[type=checkbox]:checked:hover:not(:disabled),
+  input[type=checkbox]:indeterminate:focus-visible,
+  input[type=checkbox]:indeterminate:hover:not(:disabled) {
+    @apply bg-accent-content border-accent-content;
+  }
+
+  /* input[type=radio]:disabled, */
+
+  input[type=checkbox]:disabled {
+    @apply cursor-not-allowed opacity-60;
+  }
+}

data/app/assets/stylesheets/css/components/ui/description_list.css

@@ -0,0 +1,3 @@
+.description-list {
+  @apply w-full flex flex-wrap overflow-auto flex-1 divide-y divide-tertiary;
+}

data/app/assets/stylesheets/css/components/ui/dropdown.css

@@ -0,0 +1,68 @@
+.dropdown {
+  @apply relative inline-flex;
+}
+
+/* Closed state - hidden by default */
+.dropdown-popover {
+  @apply absolute z-10 rounded-lg bg-primary top-full end-0 bottom-auto start-auto mt-2;
+  box-shadow: var(--box-shadow-card);
+}
+
+/* Backdrop - transparent for dropdown (no overlay) */
+.dropdown-popover::backdrop {
+  background-color: transparent;
+}
+
+/* Backdrop remains transparent when open */
+.dropdown-popover:open::backdrop {
+  background-color: transparent;
+}
+
+.dropdown-menu {
+  @apply flex flex-col w-full rounded-lg border border-tertiary bg-primary overflow-hidden;
+}
+
+.dropdown-menu--scrollable {
+  @apply overflow-y-auto;
+}
+
+.dropdown-menu--standalone {
+  box-shadow: var(--box-shadow-card);
+}
+
+/* ==========================================================================
+   List & Items
+   ========================================================================== */
+
+.dropdown-menu__group {
+  @apply flex flex-col items-start self-stretch py-1;
+}
+.dropdown-menu__list {
+  @apply flex flex-col items-start self-stretch px-1;
+}
+
+.dropdown-menu__item,
+.dropdown-menu__list > :is(a, button) {
+  @apply flex items-center w-full justify-start focus:outline-none gap-2 px-2 py-1.5 min-h-8 rounded-md border-none bg-transparent overflow-hidden text-ellipsis whitespace-nowrap text-content font-medium text-sm cursor-pointer leading-5;
+
+  &.dropdown-menu__item--disabled {
+    @apply text-content-secondary cursor-not-allowed !bg-transparent;
+  }
+}
+
+.dropdown-menu__item--active,
+.dropdown-menu__item:hover,
+.dropdown-menu__list > :is(a, button):hover {
+  @apply bg-secondary;
+}
+
+.dropdown-menu__item:focus-visible,
+.dropdown-menu__list > :is(a, button):focus-visible {
+  @apply ring-2 ring-inset ring-content bg-primary outline-none;
+}
+
+.dropdown-menu__icon,
+.dropdown-menu__list > :is(a, button) svg {
+  @apply shrink-0 size-4 text-content;
+}
+

data/app/assets/stylesheets/css/components/ui/file_upload_input.css

@@ -0,0 +1,94 @@
+/* File Upload Input Component - Based on Figma Design System */
+/* BEM Methodology: .file-upload-input (block), .file-upload-input__* (elements), .file-upload-input--* (modifiers) */
+
+.file-upload-input {
+  @apply relative flex flex-col justify-center items-center p-4 gap-2 overflow-clip rounded-xl border border-dashed border-tertiary bg-primary text-content-secondary transition cursor-pointer;
+}
+
+.file-upload-input__icon {
+  @apply shrink-0 size-6 text-content-secondary;
+}
+
+.file-upload-input__content {
+  @apply flex flex-col gap-0.5 whitespace-nowrap;
+}
+
+.file-upload-input__title {
+  @apply text-xs font-medium leading-4 text-content;
+}
+
+.file-upload-input__subtitle {
+  @apply text-content-secondary;
+}
+
+.file-upload-input__description {
+  @apply text-xs font-normal leading-4 text-content-secondary;
+}
+
+/* Wrapper fills the drop zone; input must fill wrapper to receive drops anywhere */
+.file-upload-input__native-input {
+  @apply absolute inset-0 h-full w-full cursor-pointer;
+}
+
+.file-upload-input__native-input input[type="file"]::-webkit-file-upload-button,
+.file-upload-input__native-input input {
+  @apply absolute inset-0 size-full cursor-pointer opacity-0;
+}
+
+/* ==========================================================================
+   Size Variants
+   ========================================================================== */
+
+.file-upload-input--lg {
+  @apply flex-col p-4;
+}
+
+.file-upload-input--md {
+  @apply flex-row h-14 py-0;
+}
+
+.file-upload-input--sm {
+  @apply size-14 justify-center p-4;
+}
+
+/* Hide text content in small size */
+.file-upload-input--sm .file-upload-input__content {
+  display: none;
+}
+
+/* ==========================================================================
+   State: Hover
+   ========================================================================== */
+
+.file-upload-input:hover:not(.file-upload-input--disabled) {
+  @apply bg-secondary;
+}
+
+/* ==========================================================================
+   State: Dragging (managed by JS via data-dragging attribute)
+   ========================================================================== */
+
+.file-upload-input[data-dragging="true"] {
+  @apply border-2 border-solid bg-secondary;
+}
+
+/* ==========================================================================
+   State: Focus (via focus-within for native input focus)
+   ========================================================================== */
+
+/* Native input is inside the wrapper div; use :focus-within since the div receives no focus, the input does */
+.file-upload-input:has(.file-upload-input__native-input:focus-within) {
+  box-shadow: var(--box-shadow-focus);
+}
+
+/* ==========================================================================
+   State: Disabled
+   ========================================================================== */
+
+.file-upload-input--disabled {
+  @apply opacity-60 cursor-not-allowed;
+}
+
+.file-upload-input--disabled .file-upload-input__native-input {
+  @apply cursor-not-allowed;
+}