avo 3.30.4 → 4.0.0.beta.2

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

@@ -0,0 +1,78 @@
+/* File Upload Item Component - Based on Figma Design System */
+/* BEM Methodology: .file-upload-item (block), .file-upload-item__* (elements), .file-upload-item--* (modifiers) */
+
+.file-upload-item {
+  @apply relative flex h-14 items-center justify-between overflow-clip rounded-lg border border-tertiary bg-primary px-4 w-full;
+}
+
+/* ==========================================================================
+   Progress Bar (hidden by default, shown via --uploading state)
+   ========================================================================== */
+
+.file-upload-item__progress {
+  @apply absolute inset-y-0 start-0 bg-secondary h-full hidden;
+}
+
+.file-upload-item--uploading .file-upload-item__progress {
+  @apply block;
+}
+
+/* ==========================================================================
+   Body
+   ========================================================================== */
+
+.file-upload-item__body {
+  @apply relative z-10 flex min-w-0 flex-1 flex-col gap-0.5 items-stretch overflow-hidden;
+}
+
+.file-upload-item__title {
+  @apply min-w-0 truncate text-xs font-medium leading-4 text-content;
+}
+
+.file-upload-item__meta {
+  @apply flex items-center gap-1 text-xs font-normal leading-4 text-content-secondary;
+
+}
+
+/* ==========================================================================
+   Status Indicators (all rendered, controlled by state classes)
+   ========================================================================== */
+
+.file-upload-item__status {
+  @apply flex items-center gap-0.5;
+}
+
+.file-upload-item__status-icon {
+  @apply size-3;
+}
+
+/* State: Complete */
+.file-upload-item__status--complete {
+  @apply text-success-content;
+}
+
+/* State: Error */
+.file-upload-item__status--error {
+  @apply text-danger-content;
+}
+
+/* State: Uploading */
+.file-upload-item__status--uploading {
+  @apply text-content-secondary;
+}
+
+/* ==========================================================================
+   Actions
+   ========================================================================== */
+
+.file-upload-item__actions {
+  @apply relative z-10 flex shrink-0 items-center gap-1;
+}
+
+.file-upload-item__action {
+  @apply size-6 flex items-center justify-center rounded-lg text-content-secondary transition;
+}
+
+.file-upload-item__action svg {
+  @apply size-3.5;
+}

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

@@ -0,0 +1,59 @@
+.panel {
+  @apply flex flex-col gap-y-4 w-full;
+}
+
+.panel__header {
+  @apply w-full;
+}
+
+.panel__footer {
+  @apply w-full;
+}
+
+.panel__content {
+  --panel-sidebar-width: calc(var(--spacing) * 84);
+  @apply relative grid gap-4 w-full;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.panel__card,
+.panel__body {
+  @apply w-full;
+}
+
+.panel__sidebar {
+  @apply w-full top-0 end-0 flex;
+}
+
+.panel--has-sidebar .panel__content {
+  grid-template-areas:
+    "body"
+    "sidebar";
+
+  @media (width >= 48rem) {
+    grid-template-areas: "body sidebar";
+    grid-template-columns: minmax(0, 1fr) var(--panel-sidebar-width);
+  }
+
+  .panel__card,
+  .panel__body {
+    grid-area: body;
+  }
+
+  .panel__sidebar {
+    grid-area: sidebar;
+  }
+}
+
+.panel__cover-photo {
+  @apply w-full;
+}
+
+.panel--floating-sidebar {
+}
+
+.panel--full-width {
+  .panel__body {
+    @apply w-full;
+  }
+}

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

@@ -0,0 +1,48 @@
+.header {
+  @apply flex flex-col gap-2 items-start justify-center pe-0 py-0;
+}
+
+.header__main {
+  @apply flex flex-col sm:flex-row gap-4 items-center w-full;
+}
+
+.header__content {
+  @apply flex gap-3 items-center grow shrink basis-0;
+}
+
+.header__avatar {
+  @apply shrink-0;
+}
+
+.header__text {
+  @apply flex flex-col gap-0.5 items-start grow shrink basis-0 min-h-px min-w-px not-italic;
+}
+
+.header__title {
+  @apply flex gap-2 font-medium leading-6 overflow-ellipsis w-full text-xl text-content;
+}
+
+.header__description {
+  @apply font-normal leading-5 overflow-ellipsis w-full text-content-secondary;
+  font-size: 14px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.header__controls {
+  @apply flex gap-3 items-center cursor-pointer shrink-0 flex-wrap;
+}
+
+.header__discreet-information {
+  @apply flex justify-center sm:justify-start gap-2 items-start w-full flex-wrap;
+}
+
+/* Size variants */
+.header--size-medium {
+  /* Default styles already applied */
+}
+
+.header--size-small {
+  /* Small variant uses same structure but can have different spacing if needed */
+}

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

@@ -0,0 +1,22 @@
+/* Radio Button - Native input styling (matches checkbox approach) */
+@layer base {
+  input[type="radio"] {
+    @apply relative accent-accent-content;
+
+    &:after {
+      @apply absolute rounded-full size-3 top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 content-[''];
+    }
+  }
+
+  input[type=radio]:hover{
+    @apply outline-none;
+  }
+
+  input[type=radio]:focus-visible {
+    @apply outline-none;
+    &:after {
+      @apply ring ring-offset-2 ring-accent-content rounded-full !outline-none;
+    }
+  }
+}
+

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

@@ -0,0 +1,74 @@
+/* Tabs Component - All Styles */
+@layer components {
+  /* ============================================
+     BASE STYLES (Common to both variants)
+     ============================================ */
+
+  /* Container */
+  .tabs {
+    @apply flex flex-wrap;
+  }
+
+  /* Base Item */
+  .tabs__item {
+    @apply inline-flex items-center mx-1 px-3 py-1 cursor-pointer text-sm font-medium leading-4 bg-transparent gap-2 rounded-md text-content;
+  }
+
+  /* Item Sub-elements */
+  .tabs__item-icon {
+    @apply size-4 text-content;
+  }
+
+  .tabs__item-label {
+    @apply whitespace-nowrap;
+  }
+
+  /* Item States - Shared */
+  .tabs__item--disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .tabs__item:hover:not(.tabs__item--disabled) {
+    @apply bg-secondary;
+  }
+
+  .tabs__item:focus-visible {
+    @apply bg-primary outline-none ring-offset-2 ring-offset-primary ring-2 ring-content;
+  }
+
+  /* Wrapper */
+  .tabs__item-wrapper {
+    @apply inline-block py-2;
+  }
+
+  /* ============================================
+     GROUP VARIANT
+     ============================================ */
+  .tabs__item--group.tabs__item--active:hover,
+  .tabs__item--group.tabs__item--active {
+    background: color-mix(in oklab, var(--color-secondary), var(--color-content) 5%);
+  }
+
+  .tabs__item-wrapper--group {
+    @apply flex items-center justify-center;
+  }
+
+/* ============================================
+    SCOPE VARIANT
+    ============================================ */
+  /* Full-width border on tabs container */
+  .tabs:has(.tabs__item-wrapper--scope) {
+    @apply border-b border-tertiary;
+  }
+
+  /* Remove default border from scope wrappers */
+  .tabs__item-wrapper--scope {
+    @apply border-b-0;
+  }
+
+  /* Active border only on active tab wrapper - positioned to overlay container border */
+  .tabs__item-wrapper--scope.tabs__item--active {
+    @apply border-b-2 border-accent;
+    margin-bottom: -1px; /* Overlap with container border */
+  }
+}

data/app/assets/stylesheets/css/css-animations.css

@@ -0,0 +1,54 @@
+/* Actions Dropdown Animations */
+
+.css-animate-dialog-slide-down[open],
+.css-animate-slide-down {
+  opacity: 1;
+  transform: translateY(0);
+
+  transition:
+    opacity 75ms ease-out,
+    transform 75ms ease-out,
+    display 75ms allow-discrete;
+
+  /* Starting state when transitioning FROM [hidden] */
+  @starting-style {
+    opacity: 0;
+    transform: translateY(-0.25rem);
+  }
+}
+
+/* Hidden state - CSS handles the leave animation */
+.css-animate-dialog-slide-down,
+.css-animate-slide-down[hidden] {
+  opacity: 0;
+  transform: translateY(-0.25rem);
+  transition:
+    opacity 75ms ease-out,
+    transform 75ms ease-out,
+    display 75ms allow-discrete;
+}
+
+/* Sidebar Profile Dropdown Animation (slides up from bottom) */
+.css-animate-slide-up {
+  opacity: 1;
+  transform: translateY(0);
+
+  transition:
+    opacity 100ms ease-in-out,
+    transform 100ms ease-in-out,
+    display 100ms allow-discrete;
+
+  @starting-style {
+    opacity: 0;
+    transform: translateY(0.75rem);
+  }
+}
+
+.css-animate-slide-up[hidden] {
+  opacity: 0;
+  transform: translateY(0.75rem);
+  transition:
+    opacity 75ms ease-in,
+    transform 75ms ease-in,
+    display 75ms allow-discrete;
+}

data/app/assets/stylesheets/css/fields/code.css

@@ -1,17 +1,83 @@
 @import 'codemirror/lib/codemirror.css';
 
-/* themes */
-@import 'codemirror/theme/dracula.css';
-@import 'codemirror/theme/eclipse.css';
-@import 'codemirror/theme/material-darker.css';
-
+/* Base CodeMirror surface */
 .CodeMirror {
+  @apply border border-tertiary rounded-b-lg bg-primary text-content p-0 min-h-auto;
   height: var(--height) !important;
-  min-height: auto;
-  padding: 0;
 }
 
-/* overlay CodeMirror fullscreen & Preview on small screens */
-.CodeMirror-fullscreen, .editor-preview-active-side {
+.CodeMirror-gutters {
+  @apply bg-secondary border-e border-tertiary;
+}
+
+.CodeMirror-linenumber {
+  @apply text-content-secondary;
+}
+
+.CodeMirror-cursor {
+  @apply border-s-content;
+}
+
+.CodeMirror-selected {
+  @apply !bg-tertiary;
+}
+
+.CodeMirror-scrollbar-filler,
+.CodeMirror-gutter-filler {
+  @apply bg-primary;
+}
+
+/* Shared placeholder styling (standalone and EasyMDE) */
+.EasyMDEContainer .CodeMirror .CodeMirror-placeholder,
+[data-controller="code-field"] .CodeMirror .CodeMirror-placeholder {
+  @apply text-content-secondary opacity-100;
+}
+
+/* Standalone code field (CodeMirror without EasyMDE) */
+[data-controller="code-field"] .CodeMirror {
+  @apply border border-tertiary rounded-lg;
+}
+
+/* Overlay CodeMirror fullscreen and side preview */
+.CodeMirror-fullscreen,
+.editor-preview-active-side {
   z-index: 50;
 }
+
+/* EasyMDE shell */
+.editor-toolbar {
+  @apply border border-tertiary rounded-t-lg;
+}
+
+/* Dark mode EasyMDE overrides (tiny_description field) */
+.dark .editor-toolbar {
+  @apply bg-secondary border-tertiary;
+}
+
+.dark .editor-toolbar a,
+.dark .editor-toolbar button {
+  @apply !text-content bg-transparent;
+}
+
+.dark .editor-toolbar a:hover,
+.dark .editor-toolbar a.active,
+.dark .editor-toolbar button:hover,
+.dark .editor-toolbar button.active {
+  @apply !bg-tertiary !border-tertiary;
+}
+
+.dark .editor-toolbar i.separator {
+  @apply border-tertiary;
+}
+
+.dark .editor-statusbar {
+  @apply text-content-secondary;
+}
+
+.dark .editor-preview {
+  @apply bg-primary text-content;
+}
+
+.dark .editor-preview-side {
+  @apply bg-primary text-content border-tertiary;
+}

data/app/assets/stylesheets/css/fields/easy-mde.css

@@ -0,0 +1,7 @@
+.EasyMDEContainer .CodeMirror {
+  @apply border border-tertiary;
+  @apply resource-show-view:rounded-lg;
+  @apply resource-edit-view:rounded-b-lg resource-edit-view:border-t-0;
+  @apply resource-new-view:rounded-b-lg resource-new-view:border-t-0;
+
+}

data/app/assets/stylesheets/css/fields/key_value.css

@@ -0,0 +1,97 @@
+/* ==========================================================================
+  Key Value Field
+  ========================================================================== */
+
+.key-value {
+  @apply w-full;
+}
+
+.key-value__table {
+  @apply w-full rounded-lg border border-tertiary overflow-hidden bg-primary;
+  --key-value-actions-width: 3rem;
+}
+
+.key-value__header,
+.key-value__row {
+  @apply grid items-center min-h-10;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--key-value-actions-width);
+  column-gap: 0;
+}
+
+.key-value[data-editable="false"] .key-value__header,
+.key-value[data-editable="false"] .key-value__row {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.key-value__header {
+  @apply bg-secondary border-b border-tertiary text-content text-xs font-semibold uppercase;
+}
+
+.key-value__header-cell {
+  @apply px-3;
+}
+
+.key-value__header-cell--key {
+  @apply border-e border-tertiary;
+}
+
+.key-value__header-cell--value {
+  @apply border-e border-tertiary;
+}
+
+.key-value__header-cell--actions {
+  @apply flex items-center justify-center px-2;
+}
+
+.key-value__body {
+  @apply bg-primary;
+}
+
+.key-value__row {
+  @apply py-2;
+}
+
+.key-value__row + .key-value__row {
+  @apply border-t border-tertiary;
+}
+
+.key-value__cell {
+  @apply w-full;
+}
+
+.key-value__cell--key {
+  @apply px-3 border-e border-tertiary;
+}
+
+.key-value__cell--value {
+  @apply px-3 border-e border-tertiary;
+}
+
+.key-value__cell--actions {
+  @apply flex items-center justify-center gap-1 px-2;
+}
+
+.key-value__input {
+  @apply w-full;
+}
+
+.key-value__action-button {
+  @apply flex items-center justify-center size-8 text-content-secondary hover:text-content;
+}
+
+.key-value__action-button.cursor-not-allowed,
+.key-value__action-button[disabled] {
+  @apply opacity-50 pointer-events-none;
+}
+
+.key-value__action-button--drag {
+  @apply cursor-grab;
+}
+
+.key-value__action-icon {
+  @apply size-5;
+}
+
+.key-value__action-icon--small {
+  @apply size-4;
+}

data/app/assets/stylesheets/css/fields/progress.css

@@ -1,15 +1,15 @@
 [data-component="avo/fields/common/progress_bar_component"] {
   & progress {
-    @apply h-2 bg-white border border-slate-400 rounded shadow-inner;
+    @apply h-2 bg-white border border-slate-400 rounded-sm shadow-inner;
   }
   & progress[value]::-webkit-progress-bar {
-    @apply bg-white border border-gray-500 rounded shadow-inner;
+    @apply bg-white border border-gray-500 rounded-sm shadow-inner;
   }
   & progress[value]::-webkit-progress-value{
-    @apply bg-primary-500 rounded;
+    @apply bg-primary-500 rounded-sm;
 
   }
   & progress[value]::-moz-progress-bar {
-    @apply bg-primary-500 rounded appearance-none;
+    @apply bg-primary-500 rounded-sm appearance-none;
   }
 }

data/app/assets/stylesheets/css/fields/status.css

@@ -5,12 +5,18 @@
   position: relative;
 }
 
+.spinner .double-bounce1 {
+  background-color: var(--color-content-secondary);
+}
+.spinner .double-bounce2 {
+  background-color: var(--color-content-secondary);
+}
+
 .spinner .double-bounce1,
 .spinner .double-bounce2 {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background-color: #333;
   opacity: 0.6;
   position: absolute;
   top: 0;

data/app/assets/stylesheets/css/fields/tags.css

@@ -1,26 +1,43 @@
+/* Tags Field - Tagify design token overrides.
+   Base styles: input/base.css. Dropdown: dropdown.css (classes via JS).
+   Tagify uses CSS vars for borders/colors; override them for design system. */
+
 tags.tagify {
-  --tag-inset-shadow-size: 3em;
-  --tags-border-color: rgb(var(--color-primary-500));
-  --tags-hover-border-color: rgb(var(--color-primary-500));
-  --tags-hover-border-color: rgb(var(--color-primary-500));
+  --tags-border-color: var(--color-tertiary);
+  --tags-hover-border-color: var(--color-tertiary);
+  --tags-focus-border-color: var(--color-primary);
+  --placeholder-color: var(--color-content-secondary);
+  --placeholder-color-focus: var(--color-content-secondary);
+
+  padding-block: var(--input-py);
+  align-items: center;
 }
 
-.tagify__dropdown {
-  --tagify-dd-color-primary: rgb(var(--color-primary-500));
+/* Align the inner editable area with the design system size tokens */
+tags.tagify .tagify__input {
+  margin: 0;
+  padding-block: 0;
+  line-height: var(--input-leading);
 }
 
-tags.tagify {
-  @apply !ml-0 !gap-1 !border-gray-200;
+tags.tagify.tagify--focus {
+  box-shadow: var(--box-shadow-focus);
+}
 
-  &.tagify--focus {
-    @apply !border-gray-600;
-  }
+.tagify__dropdown {
+  --tagify-dd-color-primary: var(--color-tertiary);
+  --tagify-dd-text-color: var(--color-content);
+  --tagify-dd-bg-color: var(--color-primary);
+}
+
+.tagify__dropdown__item {
+  width: calc(100% - 2px) !important;
+}
 
-  span.tagify__input {
-    @apply !m-0 !pl-1;
-  }
+.tagify__dropdown__item.tagify__dropdown__item--active {
+  @apply bg-secondary text-content;
 }
 
-tag.tagify__tag {
-  @apply text-sm !ml-0;
+.tagify__tag > div {
+  @apply !py-1;
 }