Merge branch '4-dev' into ui4/buttons

Author: adrianthedev

agents.md

@@ -18,12 +18,13 @@ Don't implement a component if the Figma MCP is not available and fails and aler
 - Use clean CSS and convert the variables to Tailwind CSS `@apply` statements where possible.
 - add the new component to the `src/input.css` file.
 - use the BEMCSS methodology for the component classes.
+- when the width and height are the same, use the `size-` class instead of `width-` and `height-`.
+- don't use `left`/`right` modifiers as we need to support RTL. Use `start`/`end` instead. Same for short names like `ml`, `mr`, `pl`, `pr`, `left`, `right`, etc.
 
 #### Figma
 
 - check the components and see if they use other components. If so, use the existing components.
 
-
 #### SVGs
 - use `svg` helper to render the SVGs.
 - use the `helpers.svg` helper to render the SVGs only in view components, never in lookbook previews.
@@ -42,3 +43,15 @@ Don't implement a component if the Figma MCP is not available and fails and aler
 - use `yarn`, not npm
 
 #### Files
+## Javascript
+
+We use StimulusJS for the javascript.
+Aboid writing inline script tags in the HTML unless instructed so or mentioned some kind of "temporary" or "quick" solution .
+
+## HTML Structure
+
+When toggling the visibility of some html elements, use the `hidden` HTML attribute instead of the `hidden` class.
+
+## Ruby on Rails
+
+Whenever possible use the `partial:` keyword when rendering partials unless needed otherwise.

app/assets/stylesheets/application.css

@@ -41,6 +41,9 @@
   --shadow-modal: " 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)";
 
   --breakpoint-xs: 30rem;
+
+  /* Tiny text size originally added for discreet information */
+  --text-tiny: 0.625rem;
 }
 
 @plugin '@tailwindcss/forms';
@@ -103,12 +106,15 @@
   @import "./css/components/ui/badge.css";
   @import "./css/components/ui/radio_button.css";
 
+  @import "./css/components/field-wrapper.css";
   @import "./css/components/avatar.css";
   @import "./css/components/breadcrumbs.css";
   @import "./css/components/button.css";
   @import "./css/components/color_scheme_switcher.css";
   @import "./css/components/discreet_information.css";
   @import "./css/components/tooltip.css";
+  @import "./css/components/modal.css";
+  @import "./css/css-animations.css";
 
   html,
   body {
@@ -164,6 +170,10 @@
     display: none;
   }
 
+  body.modal-open {
+    @apply overflow-hidden;
+  }
+
   trix-editor {
     max-height: 320px !important;
     overflow-y: auto;
@@ -194,6 +204,18 @@
   .selected-row {
     @apply bg-neutral-100!;
   }
+
+  .container-large {
+    @apply 2xl:container 2xl:mx-auto;
+  }
+
+  .container-small {
+    @apply 2xl:px-0 2xl:max-w-196 2xl:mx-auto;
+  }
+
+  .container-full-width {
+    @apply w-full;
+  }
 }
 
 .loading-spinner {

app/assets/stylesheets/css/components/avatar.css

@@ -124,5 +124,5 @@
 }
 
 .cado-avatar--tiny .cado-avatar__initials {
-  @apply text-xs leading-4;
+  @apply text-tiny leading-4;
 }

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

@@ -68,3 +68,37 @@
 .color-scheme-switcher__text {
   @apply text-xs font-medium px-1;
 }
+
+/* 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-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%);
+}

app/assets/stylesheets/css/components/field-wrapper.css

@@ -0,0 +1,52 @@
+.field-wrapper {
+  @apply relative flex flex-col grow leading-tight size-auto w-full md:flex-row md:items-center py-2 min-h-15 w-full grow-0 text-ellipsis overflow-scroll;
+}
+
+.field-wrapper__label {
+  @apply flex self-start items-center shrink-0 w-full px-4 font-medium text-content text-sm md:w-60 pt-3;
+}
+
+.field-wrapper__help {
+  @apply text-content-secondary mt-2 text-sm;
+}
+
+.field-wrapper__label-help {
+  /* pb-3 offsets the pt of the label */
+  @apply text-content-secondary text-xs leading-none font-normal pb-3;
+}
+
+.field-wrapper__error {
+  @apply text-danger mt-2 text-sm;
+}
+
+.field-wrapper__content {
+  @apply flex-1 flex flex-row px-4;
+}
+
+.field-wrapper__content-wrapper {
+  @apply w-full md:w-8/12;
+}
+
+.field-wrapper--full-width {
+  .field-wrapper__content-wrapper {
+    @apply w-full;
+  }
+}
+
+/* Stacked modifier */
+.all-fields-stacked .field-wrapper,
+.field-wrapper.field-wrapper--stacked {
+  @apply md:flex-col md:items-start gap-y-1 py-3;
+
+  .field-wrapper__label {
+    @apply md:w-full min-h-0 pt-0;
+  }
+
+  .field-wrapper__label-help {
+    @apply pb-0;
+  }
+
+  .field-wrapper__content {
+    @apply pt-0 px-4 w-full;
+  }
+}