avo 3.30.4 → 4.0.0.beta.1

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;
 }

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

@@ -1,7 +1,7 @@
 /* EDIT STYLES */
 
 .tiptap {
-  @apply m-0 p-4 outline-none min-h-44;
+  @apply m-0 p-4 outline-hidden min-h-44;
 
   >*+* {
     @apply mt-4;
@@ -9,7 +9,7 @@
 
   ul,
   ol {
-    @apply pl-6 list-outside;
+    @apply ps-6 list-outside;
   }
 
   ul {
@@ -22,7 +22,7 @@
 }
 
 .tiptap__field {
-  @apply w-full mb-4 border border-gray-200 rounded;
+  @apply w-full mb-4 rounded-lg border border-tertiary;
 }
 
 .tiptap__editor {
@@ -30,11 +30,12 @@
 }
 
 .tiptap__toolbar {
-  @apply flex items-center justify-between px-3 py-2 border-b bg-gray-50;
+  @apply flex items-center justify-between px-3 py-2 rounded-t-lg border border-tertiary bg-secondary;
 }
 
 .tiptap__toolbar-area {
-  @apply flex flex-wrap items-center divide-gray-200 sm:divide-x sm:rtl:divide-x-reverse;
+  @apply flex flex-wrap items-center sm:divide-x sm:rtl:divide-x-reverse divide-tertiary;
+  --tw-divide-opacity: 1;
 }
 
 .tiptap__button-group {
@@ -54,27 +55,28 @@
 }
 
 .tiptap__button {
-  @apply p-1 text-gray-500 rounded cursor-pointer;
+  @apply p-1 rounded-sm cursor-pointer;
 
   &:hover:enabled {
-    @apply bg-gray-100;
+    background-color: var(--color-tertiary);
   }
 
   &:active:enabled {
-    @apply bg-gray-200;
+    @apply bg-tertiary;
   }
 
   &:disabled {
-    @apply text-gray-200 cursor-default;
+    @apply cursor-default text-content-secondary;
   }
 
   svg {
     @apply block h-6;
+    stroke: var(--color-content);
   }
 }
 
 .tiptap__button--selected {
-  @apply bg-gray-900/10;
+  @apply bg-tertiary;
 }
 
 /* LINK STYLES */
@@ -84,8 +86,8 @@
 }
 
 .tiptap__link-field {
-  &:placeholder {
-    @apply italic text-gray-400;
+  &::placeholder {
+    @apply italic text-content-secondary;
   }
 
   &:focus::placeholder {
@@ -94,13 +96,13 @@
 }
 
 .tiptap__link-field {
-  @apply text-sm mr-2 py-1 border border-gray-200 rounded;
+  @apply text-sm me-2 py-1 rounded-lg border border-tertiary bg-primary text-content;
 }
 
 /* SHOW STYLES */
 
 .tiptap__content {
-  @apply py-2 max-w-4xl;
+  @apply py-2 max-w-4xl text-content;
 
   >*+* {
     @apply mt-4;
@@ -108,7 +110,7 @@
 
   ul,
   ol {
-    @apply pl-6 list-outside;
+    @apply ps-6 list-outside;
   }
 
   ul {

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

@@ -26,19 +26,79 @@
   @apply list-decimal;
 }
 
+trix-editor {
+  @apply border border-tertiary rounded-lg bg-primary text-content;
+
+  &:empty::before {
+    @apply !text-content-secondary;
+  }
+}
+
 trix-toolbar {
   .trix-button-row {
     @apply flex-wrap gap-x-5;
   }
 
+  .trix-button-group {
+    @apply border border-tertiary;
+  }
+
   .trix-button-group:not(:first-child) {
-    @apply ml-0;
+    @apply ms-0;
   }
 }
 
 /* Hack to remove border from trix when rendered from ActionText */
 .trix-content {
   & .trix-content {
-    border: none;
+    @apply border-none;
+  }
+}
+
+/* Theme-token based Trix styling */
+.trix-content pre {
+  @apply bg-tertiary text-content;
+}
+
+trix-toolbar {
+  .trix-button-group {
+    @apply bg-secondary border-tertiary;
   }
+
+  .trix-button {
+    @apply text-content border-tertiary;
+
+    &:not(:disabled):hover {
+      @apply bg-tertiary;
+    }
+
+    &.trix-active {
+      @apply bg-tertiary;
+    }
+  }
+
+  .trix-dialog {
+    @apply bg-secondary border-tertiary shadow-none;
+  }
+
+  .trix-input--dialog {
+    @apply bg-primary text-content border-tertiary;
+
+    &::placeholder {
+      @apply text-content-secondary;
+    }
+  }
+
+  .trix-button--dialog {
+    @apply text-content border-tertiary;
+
+    &:hover {
+      @apply bg-tertiary;
+    }
+  }
+}
+
+/* Trix toolbar icons are image-based and need inversion only in dark mode. */
+.dark trix-toolbar .trix-button--icon::before {
+  filter: invert(1);
 }