avo 3.30.4 → 4.0.0.beta.2

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

@@ -0,0 +1,343 @@
+@layer base {
+  .button {
+    @apply inline-flex justify-center grow-0 items-center font-medium leading-none fill-current whitespace-nowrap transition-transform duration-50 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60 data-[disabled='true']:opacity-60 gap-1.5 border border-transparent rounded-lg;
+
+    --btn-text-color: color-mix(in oklab, var(--btn-color-accent), var(--color-content) 20%);
+
+    /* Base styles for all button types */
+    &:active:not(:disabled) {
+      @apply translate-y-px;
+    }
+
+    &.button--focus-visible,
+    &:focus-visible {
+      @apply outline-none rounded-lg;
+
+      box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 3px var(--color-info-foreground);
+    }
+
+
+    /* Default colors */
+    --btn-color-accent: var(--color-avo-neutral-50);
+    --btn-color-accent-content: var(--color-avo-neutral-100);
+    --btn-color-accent-foreground: var(--color-avo-neutral-950);
+
+    &&.button--color-primary {
+      --btn-color-accent: var(--color-avo-neutral-800);
+      --btn-color-accent-content: var(--color-avo-neutral-950);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-accent {
+      --btn-color-accent: var(--color-accent);
+      --btn-color-accent-content: var(--color-accent-content);
+      --btn-color-accent-foreground: var(--color-accent-foreground);
+    }
+
+    &&.button--color-teal {
+      --btn-color-accent: var(--color-teal-500);
+      --btn-color-accent-content: var(--color-teal-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-red {
+      --btn-color-accent: var(--color-red-500);
+      --btn-color-accent-content: var(--color-red-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-blue {
+      --btn-color-accent: var(--color-blue-500);
+      --btn-color-accent-content: var(--color-blue-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-gray {
+      --btn-color-accent: var(--color-gray-500);
+      --btn-color-accent-content: var(--color-gray-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-orange {
+      --btn-color-accent: var(--color-orange-500);
+      --btn-color-accent-content: var(--color-orange-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-green {
+      --btn-color-accent: var(--color-green-500);
+      --btn-color-accent-content: var(--color-green-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-amber {
+      --btn-color-accent: var(--color-amber-500);
+      --btn-color-accent-content: var(--color-amber-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-yellow {
+      --btn-color-accent: var(--color-yellow-500);
+      --btn-color-accent-content: var(--color-yellow-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-lime {
+      --btn-color-accent: var(--color-lime-500);
+      --btn-color-accent-content: var(--color-lime-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-emerald {
+      --btn-color-accent: var(--color-emerald-500);
+      --btn-color-accent-content: var(--color-emerald-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-cyan {
+      --btn-color-accent: var(--color-cyan-500);
+      --btn-color-accent-content: var(--color-cyan-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-sky {
+      --btn-color-accent: var(--color-sky-500);
+      --btn-color-accent-content: var(--color-sky-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-indigo {
+      --btn-color-accent: var(--color-indigo-500);
+      --btn-color-accent-content: var(--color-indigo-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-violet {
+      --btn-color-accent: var(--color-violet-500);
+      --btn-color-accent-content: var(--color-violet-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-purple {
+      --btn-color-accent: var(--color-purple-500);
+      --btn-color-accent-content: var(--color-purple-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-fuchsia {
+      --btn-color-accent: var(--color-fuchsia-500);
+      --btn-color-accent-content: var(--color-fuchsia-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-pink {
+      --btn-color-accent: var(--color-pink-500);
+      --btn-color-accent-content: var(--color-pink-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &&.button--color-rose {
+      --btn-color-accent: var(--color-rose-500);
+      --btn-color-accent-content: var(--color-rose-600);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+  }
+
+  .dark {
+    .button--style-primary {
+      &:not([class*="button--color-"]) {
+        --btn-color-accent: var(--color-avo-neutral-800);
+        --btn-color-accent-content: var(--color-avo-neutral-950);
+        --btn-color-accent-foreground: var(--color-white);
+        background: linear-gradient(180deg, var(--btn-color-accent-content) 0%, var(--btn-color-accent) 100%);
+      }
+    }
+
+    .button--style-outline {
+      --btn-color-accent: var(--color-avo-neutral-50);
+      --btn-color-accent-content: var(--color-avo-neutral-100);
+      --btn-color-accent-foreground: var(--color-avo-neutral-950);
+    }
+
+    .button--style-text {
+      &:not([class*="button--color-"]) {
+
+      --btn-text-color: var(--color-avo-neutral-50);
+      }
+    }
+
+    .button.button--color-primary {
+      --btn-color-accent: var(--color-avo-neutral-50);
+      --btn-color-accent-content: var(--color-avo-neutral-100);
+      --btn-color-accent-foreground: var(--color-avo-neutral-950);
+    }
+  }
+
+  /* Primary style */
+  .button--style-primary {
+    @apply text-(--btn-color-accent-foreground) border-(--btn-color-accent-content);
+    background: linear-gradient(180deg, var(--btn-color-accent-content) 0%, var(--btn-color-accent) 100%);
+
+    &:not([class*="button--color-"]) {
+      background: linear-gradient(180deg, var(--color-white) 0%, var(--color-white) 100%);
+
+      &.button--hover,
+      &:hover {
+        background: linear-gradient(180deg, color-mix(in oklab, var(--btn-color-accent-content) 96%, var(--color-black)) 0%, color-mix(in oklab, var(--btn-color-accent) 96%, var(--color-black)) 100%);
+      }
+    }
+
+    box-shadow:
+      0 -0.5px 0 0.1px var(--btn-color-accent-content) inset,
+      0 0.8px 0 0.1px color-mix(in oklab, var(--color-white) 45%, transparent) inset;
+
+    &.button--hover,
+    &:hover {
+      @apply text-(--btn-color-accent-foreground);
+
+      background: linear-gradient(180deg, color-mix(in oklab, var(--btn-color-accent-content) 90%, var(--color-black)) 0%, color-mix(in oklab, var(--btn-color-accent) 90%, var(--color-black)) 100%), var(--color-primary);
+      box-shadow: 0 -0.5px 0 0.1px var(--btn-color-accent-content) inset, 0 0.8px 0 0.1px color-mix(in oklab, var(--color-white) 45%, transparent) inset;
+    }
+
+    &.button--active,
+    &:active {
+      @apply bg-accent;
+      box-shadow: 0 0.5px 2px 0.5px var(--btn-color-accent-content) inset;
+    }
+
+    &.button--disabled,
+    &:disabled,
+    &[disabled],
+    &[data-disabled='true'] {
+      @apply text-(--btn-color-accent-foreground) border-transparent;
+      box-shadow: none;
+    }
+  }
+
+  /* Outline style */
+  .button--style-outline {
+    @apply text-(--btn-text-color);
+
+    /* Special override to make it look more neutral when standlone */
+    &:not([class*="button--color-"]) {
+      @apply text-content border-content-secondary/50;
+
+      --btn-box-shadow-color: color-mix(in oklab, var(--color-content), transparent 65%);
+
+      &.button--hover,
+      &:hover {
+        --btn-box-shadow-color: color-mix(in oklab, var(--color-content), transparent 55%);
+        @apply text-content bg-tertiary;
+      }
+
+      &.button--disabled,
+      &:disabled,
+      &[disabled],
+      &[data-disabled='true'] {
+        @apply text-content-secondary border-content-secondary;
+      }
+    }
+
+    --btn-box-shadow-color: color-mix(in oklab, var(--btn-color-accent), transparent 65%);
+
+    border-color: var(--btn-color-accent);
+    background: var(--color-primary);
+    box-shadow: 0 -1.5px 0 0 var(--btn-box-shadow-color) inset, 0 0.8px 0 0px var(--color-primary) inset;
+
+    &.button--hover,
+    &:hover {
+      @apply text-(--btn-text-color);
+
+      --btn-box-shadow-color: color-mix(in oklab, var(--btn-color-accent), transparent 55%);
+      background: color-mix(in oklab, var(--btn-color-accent), var(--color-primary) 85%);
+    }
+
+    &.button--active:not(:disabled),
+    &:active:not(:disabled) {
+      background-color: color-mix(in oklab, var(--btn-color-accent-content) 10%, transparent);
+
+      box-shadow: 0 4px 4px 0.5px color-mix(in oklab, var(--color-black) 4%, transparent) inset;
+    }
+
+    &.button--disabled,
+    &:disabled,
+    &[disabled],
+    &[data-disabled='true'] {
+      @apply bg-secondary text-(--btn-color-accent-content);
+      box-shadow: none;
+    }
+  }
+
+  /* Tertiary style (outline buttons) */
+  .button--style-text {
+    @apply bg-transparent text-(--btn-text-color) border border-transparent;
+
+    &:not([class*="button--color-"]) {
+      --btn-color-accent: var(--color-avo-neutral-800);
+      --btn-color-accent-content: var(--color-avo-neutral-950);
+      --btn-color-accent-foreground: var(--color-white);
+    }
+
+    &.button--hover,
+    &:hover {
+      @apply bg-secondary text-(--btn-text-color);
+    }
+
+    &.button--active,
+    &:active {
+      @apply bg-secondary;
+    }
+
+    &.button--disabled,
+    &:disabled,
+    &[disabled],
+    &[data-disabled='true'] {
+      @apply text-content;
+    }
+  }
+
+  /* Size variants */
+  .button--size-xs {
+    @apply text-xs px-2 py-1.5;
+  }
+
+  .button--size-sm {
+    @apply text-xs px-2 py-1.5;
+  }
+
+  .button--size-md {
+    @apply text-sm px-3 py-2;
+  }
+
+  .button--size-lg {
+    @apply text-sm px-3 py-3;
+  }
+
+  /* Icon button sizes */
+  .button--size-xs .button__icon,
+  .button--size-sm .button__icon{
+    @apply h-3;
+  }
+  .button--size-md .button__icon,
+  .button--size-lg .button__icon {
+    @apply h-4;
+  }
+
+  /* Icon spacing */
+  .button__icon {
+    @apply pointer-events-none shrink-0 grow-0 w-auto -my-px;
+  }
+
+  .button__icon:not(:last-child) {
+    @apply me-1;
+  }
+
+  /* Loading state */
+  .button--loading {
+    @apply relative;
+  }
+
+  .button__spinner {
+    @apply absolute inset-0 flex items-center justify-center;
+  }
+}

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

@@ -0,0 +1,226 @@
+/* Color Scheme Switcher Component - Based on Design System */
+.color-scheme-switcher {
+  @apply inline-flex items-center gap-1 p-1 rounded-lg bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700;
+}
+
+.color-scheme-switcher__button {
+  @apply inline-flex items-center justify-center p-1.5 rounded-md transition-all duration-150 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-1 active:scale-95;
+  @apply border-0 bg-transparent cursor-pointer;
+}
+
+/* Scheme buttons - active states using scheme selection classes */
+.color-scheme-switcher__button[data-scheme="light"] {
+  @apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
+}
+
+.scheme-light .color-scheme-switcher__button[data-scheme="light"] {
+  @apply bg-white text-primary-600 shadow-sm;
+  @apply dark:bg-transparent dark:text-neutral-400 dark:shadow-none;
+}
+
+.color-scheme-switcher__button[data-scheme="dark"] {
+  @apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
+}
+
+.scheme-dark .color-scheme-switcher__button[data-scheme="dark"] {
+  @apply bg-white dark:bg-neutral-700 text-primary-600 dark:text-primary-400 shadow-sm;
+}
+
+.color-scheme-switcher__button[data-scheme="auto"] {
+  @apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
+}
+
+.scheme-auto .color-scheme-switcher__button[data-scheme="auto"] {
+  @apply bg-white dark:bg-neutral-700 text-primary-600 dark:text-primary-400 shadow-sm;
+}
+
+.color-scheme-switcher__icon {
+  @apply size-4;
+}
+
+.color-scheme-switcher__text {
+  @apply text-xs font-medium px-1;
+}
+
+/* Theme (neutrals) dropdown */
+.color-scheme-switcher__theme-wrapper {
+  @apply relative;
+}
+
+.color-scheme-switcher__button--theme {
+  @apply gap-1;
+}
+
+.color-scheme-switcher__theme-panel {
+  @apply absolute top-full mt-2 start-0 z-40;
+  @apply rounded-lg bg-white dark:bg-neutral-800;
+  @apply border border-neutral-200 dark:border-neutral-700;
+  @apply shadow-lg p-2 min-w-[160px];
+  animation: css-animate-slide-down 0.15s ease-out;
+}
+
+.color-scheme-switcher__theme-options {
+  @apply flex flex-col gap-0.5;
+}
+
+.color-scheme-switcher__theme-option {
+  @apply flex items-center gap-2 w-full px-2 py-1.5;
+  @apply rounded-md transition-all duration-150;
+  @apply hover:bg-neutral-100 dark:hover:bg-neutral-700;
+  @apply focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-1;
+  @apply border-0 bg-transparent cursor-pointer;
+  @apply text-neutral-700 dark:text-neutral-300 text-xs font-medium;
+}
+
+.color-scheme-switcher__theme-option--active {
+  @apply bg-neutral-100 dark:bg-neutral-700;
+}
+
+.color-scheme-switcher__theme-preview {
+  @apply size-4 rounded-full border border-neutral-200 dark:border-neutral-600 shadow-sm;
+}
+
+/* Theme preview swatches - show a representative mid-tone for each neutral */
+.color-scheme-switcher__theme-preview--brand {
+  background: oklch(62.68% 0.0000 89.88);
+}
+
+.color-scheme-switcher__theme-preview--slate {
+  @apply bg-slate-400;
+}
+
+.color-scheme-switcher__theme-preview--stone {
+  @apply bg-stone-400;
+}
+
+.color-scheme-switcher__theme-preview--gray {
+  @apply bg-gray-400;
+}
+
+.color-scheme-switcher__theme-preview--zinc {
+  @apply bg-zinc-400;
+}
+
+.color-scheme-switcher__theme-preview--neutral {
+  @apply bg-neutral-400;
+}
+
+.color-scheme-switcher__theme-preview--taupe {
+  background: oklch(63% 0.012 70);
+}
+
+.color-scheme-switcher__theme-preview--mauve {
+  background: oklch(63% 0.014 310);
+}
+
+.color-scheme-switcher__theme-preview--mist {
+  background: oklch(63% 0.012 240);
+}
+
+.color-scheme-switcher__theme-preview--olive {
+  background: oklch(63% 0.014 140);
+}
+
+.color-scheme-switcher__theme-option-label {
+  @apply leading-none;
+}
+
+/* Accent color dropdown */
+.color-scheme-switcher__accent-wrapper {
+  @apply relative;
+}
+
+.color-scheme-switcher__accent-panel {
+  @apply absolute top-full mt-2 end-0 z-40;
+  @apply rounded-lg bg-white dark:bg-neutral-800;
+  @apply border border-neutral-200 dark:border-neutral-700;
+  @apply shadow-lg p-2 min-w-[160px];
+  animation: css-animate-slide-down 0.15s ease-out;
+}
+
+.color-scheme-switcher__accent-options {
+  @apply grid grid-cols-3 gap-2;
+}
+
+.color-scheme-switcher__accent-option {
+  @apply flex items-center justify-center p-1;
+  @apply rounded-md transition-all duration-150;
+  @apply hover:bg-neutral-100 dark:hover:bg-neutral-700;
+  @apply focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-1;
+  @apply border-0 bg-transparent cursor-pointer;
+}
+
+.color-scheme-switcher__accent-option--active {
+  @apply bg-neutral-100 dark:bg-neutral-700 ring-2 ring-primary-400 ring-offset-1;
+}
+
+.color-scheme-switcher__accent-preview {
+  @apply size-6 rounded-full border-2 border-white dark:border-neutral-600 shadow-sm;
+}
+
+.color-scheme-switcher__accent-preview--neutral {
+  @apply bg-neutral-400 dark:bg-neutral-500;
+  background-image: linear-gradient(135deg, transparent 45%, white 45%, white 55%, transparent 55%);
+}
+
+/* Accent button with badge */
+.color-scheme-switcher__button--accent {
+  @apply relative;
+}
+
+.color-scheme-switcher__accent-badge {
+  @apply absolute top-0 end-0;
+  @apply translate-x-1/2 -translate-y-1/2;
+  @apply hidden;
+}
+
+.color-scheme-switcher__accent-badge-preview {
+  @apply size-2 rounded-full border border-white dark:border-neutral-800 shadow-sm;
+  @apply hidden;
+}
+
+.color-scheme-switcher__accent-badge-preview--neutral {
+  @apply bg-neutral-400 dark:bg-neutral-500;
+  background-image: linear-gradient(135deg, transparent 45%, white 45%, white 55%, transparent 55%);
+}
+
+/* Show accent badge based on body accent class */
+.accent-red .color-scheme-switcher__accent-badge,
+.accent-orange .color-scheme-switcher__accent-badge,
+.accent-amber .color-scheme-switcher__accent-badge,
+.accent-yellow .color-scheme-switcher__accent-badge,
+.accent-lime .color-scheme-switcher__accent-badge,
+.accent-green .color-scheme-switcher__accent-badge,
+.accent-emerald .color-scheme-switcher__accent-badge,
+.accent-teal .color-scheme-switcher__accent-badge,
+.accent-cyan .color-scheme-switcher__accent-badge,
+.accent-sky .color-scheme-switcher__accent-badge,
+.accent-blue .color-scheme-switcher__accent-badge,
+.accent-indigo .color-scheme-switcher__accent-badge,
+.accent-violet .color-scheme-switcher__accent-badge,
+.accent-purple .color-scheme-switcher__accent-badge,
+.accent-fuchsia .color-scheme-switcher__accent-badge,
+.accent-pink .color-scheme-switcher__accent-badge,
+.accent-rose .color-scheme-switcher__accent-badge {
+  @apply inline-block;
+}
+
+.accent-red .color-scheme-switcher__accent-badge-preview--red,
+.accent-orange .color-scheme-switcher__accent-badge-preview--orange,
+.accent-amber .color-scheme-switcher__accent-badge-preview--amber,
+.accent-yellow .color-scheme-switcher__accent-badge-preview--yellow,
+.accent-lime .color-scheme-switcher__accent-badge-preview--lime,
+.accent-green .color-scheme-switcher__accent-badge-preview--green,
+.accent-emerald .color-scheme-switcher__accent-badge-preview--emerald,
+.accent-teal .color-scheme-switcher__accent-badge-preview--teal,
+.accent-cyan .color-scheme-switcher__accent-badge-preview--cyan,
+.accent-sky .color-scheme-switcher__accent-badge-preview--sky,
+.accent-blue .color-scheme-switcher__accent-badge-preview--blue,
+.accent-indigo .color-scheme-switcher__accent-badge-preview--indigo,
+.accent-violet .color-scheme-switcher__accent-badge-preview--violet,
+.accent-purple .color-scheme-switcher__accent-badge-preview--purple,
+.accent-fuchsia .color-scheme-switcher__accent-badge-preview--fuchsia,
+.accent-pink .color-scheme-switcher__accent-badge-preview--pink,
+.accent-rose .color-scheme-switcher__accent-badge-preview--rose {
+  @apply inline-block;
+}

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

@@ -0,0 +1,49 @@
+.discreet-information {
+   @apply inline-flex shrink-0 rounded-md gap-1 items-center py-0.5 text-xs h-6 text-content-secondary;
+}
+
+.discreet-information__icon {
+  @apply inline size-4 text-content-secondary;
+}
+
+.discreet-information__text {
+  @apply inline px-2;
+}
+
+.discreet-information__badge {
+  @apply inline-flex rounded-md items-center font-semibold gap-1 py-1 px-1 bg-linear-to-b from-primary/85 to-primary/85 bg-foreground text-foreground;
+
+  .discreet-information__icon {
+    @apply text-foreground me-1 size-3;
+  }
+}
+
+.discreet-information__key-value {
+  @apply inline-flex items-center;
+}
+
+.discreet-information__key {
+  @apply rounded-sm py-0.5 px-2 font-normal bg-linear-to-b  to-avo-neutral-200 from-foreground/6 to-black/4 bg-secondary;
+}
+
+.discreet-information--as-key-value,
+.discreet-information--as-badge {
+  @apply text-content-secondary font-semibold rounded-md;
+}
+
+.discreet-information--as-text {
+  @apply items-center;
+}
+
+.discreet-information--as-badge {
+  @apply rounded-md;
+
+  .discreet-information__text {
+    @apply px-1;
+  }
+}
+
+.discreet-information--as-key-value {
+  @apply inline-flex items-center bg-secondary px-0.5;
+}
+