css-zero 3.0.1 → 4.0.0

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/trix.css

@@ -1,210 +0,0 @@
-@import url("https://esm.sh/trix@2.1.15/dist/trix.css");
-
-/* Action Text */
-
-.trix-content .attachment-gallery > action-text-attachment,
-.trix-content .attachment-gallery > .attachment {
-  flex: 1 0 33%;
-  padding: 0 0.5em;
-  max-width: 33%;
-}
-
-.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
-.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
-.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
-  flex-basis: 50%;
-  max-width: 50%;
-}
-
-.trix-content action-text-attachment .attachment {
-  padding: 0 !important;
-  max-width: 100% !important;
-}
-
-/* CSS Zero */
-
-trix-toolbar {
-  inline-size: 100%;
-  inset-block-start: 0;
-  position: sticky;
-
-  .trix-button-row {
-    background-color: white;
-    border-block-width: 1px;
-    column-gap: 1px;
-    padding: var(--size-1_5) var(--size-1);
-  }
-
-  .trix-button-group {
-    border: 0 !important;
-    column-gap: 1px;
-    margin: 0 !important;
-  }
-
-  .trix-button {
-    background-color: transparent;
-    border: 0 !important;
-    border-radius: var(--rounded-md);
-    color: var(--color-text-reversed);
-
-    &.trix-active {
-      background-color: gainsboro;
-    }
-
-    &.trix-button--icon::before {
-      opacity: 1;
-    }
-
-    &.trix-button--icon:disabled::before {
-      opacity: 0.125;
-    }
-  }
-
-  .trix-dialog {
-    background-color: var(--color-bg);
-    border: 1px solid var(--color-border);
-    border-radius: var(--rounded-md);
-    box-shadow: var(--shadow-md);
-    margin: var(--size-1);
-  }
-
-  .trix-input--dialog {
-    background-color: var(--color-surface);
-    border-color: var(--color-border);
-    margin: 0;
-  }
-
-  .trix-button--dialog {
-    background-color: var(--color-primary);
-    color: var(--color-text-reversed);
-    margin-inline-start: var(--size-1_5);
-  }
-
-  [data-trix-dialog] [data-trix-validate]:invalid {
-    background-color: rgb(from var(--color-negative) r g b / .2);
-  }
-
-  @media (max-width: 48rem) {
-    .trix-button-group--history-tools { display: none; }
-  }
-}
-
-trix-editor {
-  border: 0;
-  inline-size: 100%;
-  min-block-size: var(--size-72);
-  padding-block: var(--size-6) var(--size-2);
-
-  &:empty:not(:focus)::before {
-    color: color-mix(in oklab, currentColor 50%, transparent);
-  }
-
-  [data-trix-mutable].attachment img,
-  [data-trix-mutable].attachment--content,
-  [data-trix-mutable].attachment--file {
-    box-shadow: 0 0 0 2px var(--color-selected-dark);
-  }
-
-  .attachment__metadata {
-    background-color: var(--color-border-light);
-    color: var(--color-text);
-  }
-
-  &:focus-visible {
-    outline: 0;
-  }
-}
-
-.trix-content {
-  & {
-    line-height: var(--leading-7);
-  }
-
-  a {
-    color: var(--color-link);
-    text-decoration: underline;
-  }
-
-  h1 {
-    font-size: var(--text-2xl);
-    font-weight: var(--font-semibold);
-    line-height: var(--leading-8);
-    margin-block-end: var(--size-6);
-  }
-
-  blockquote {
-    border-inline-start: 2px solid var(--color-border);
-    font-style: italic;
-    margin: 0;
-    padding-inline-end: 0;
-    padding-inline-start: var(--size-6);
-  }
-
-  pre {
-    background-color: var(--color-border-light);
-    border-radius: var(--rounded-lg);
-    font-family: var(--font-monospace-code);
-    font-size: var(--text-sm);
-    line-height: var(--leading-5);
-    padding: var(--size-4);
-  }
-
-  ul {
-    list-style-type: disc;
-    margin-inline-start: var(--size-6);
-  }
-
-  ol {
-    list-style-type: decimal;
-    margin-inline-start: var(--size-6);
-  }
-
-  li {
-    margin: 0;
-  }
-
-  img {
-    display: inline;
-  }
-
-  action-text-attachment {
-    display: contents;
-  }
-
-  .attachment:not(.attachment--file) {
-    .attachment__caption { display: none; }
-  }
-
-  .attachment--file {
-    border: 1px solid var(--color-border);
-    color: var(--color--text);
-  }
-
-  .attachment__progress {
-    background-color: var(--color-border-light);
-    border-radius: var(--rounded-full);
-    overflow: hidden;
-
-    &::-webkit-progress-bar {
-      background-color: var(--color-border-light);
-    }
-
-    &::-webkit-progress-value {
-      background-color: var(--color-primary);
-    }
-
-    &::-moz-progress-bar {
-      background-color: var(--color-primary);
-    }
-  }
-}
-
-.trix--minimal {
-  .trix-button-group--file-tools {
-    display: none;
-  }
-
-  .trix-button-group--history-tools {
-    display: none;
-  }
-}

data/lib/generators/css_zero/add/templates/app/javascript/controllers/popover_controller.js

@@ -1,55 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-import { computePosition, flip, shift, offset, autoUpdate } from "https://esm.sh/@floating-ui/dom@1.7.4?standalone"
-
-export default class extends Controller {
-  static targets = [ "trigger", "content" ]
-  static values  = { placement: { type: String, default: "bottom" } }
-
-  #showTimer
-  #hideTimer
-
-  initialize() {
-    this.orient = this.orient.bind(this)
-  }
-
-  connect() {
-    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, this.orient)
-  }
-
-  disconnect() {
-    this.cleanup()
-  }
-
-  show() {
-    this.contentTarget.showPopover({ source: this.triggerTarget })
-  }
-
-  hide() {
-    this.contentTarget.hidePopover()
-  }
-
-  toggle() {
-    this.contentTarget.togglePopover({ source: this.triggerTarget })
-  }
-
-  debouncedShow() {
-    clearTimeout(this.#hideTimer)
-    this.#showTimer = setTimeout(() => this.show(), 150)
-  }
-
-  debouncedHide() {
-    clearTimeout(this.#showTimer)
-    this.#hideTimer = setTimeout(() => this.hide(), 150)
-  }
-
-  orient() {
-    computePosition(this.triggerTarget, this.contentTarget, this.#options).then(({x, y}) => {
-      this.contentTarget.style.insetInlineStart = `${x}px`
-      this.contentTarget.style.insetBlockStart  = `${y}px`
-    })
-  }
-
-  get #options() {
-    return { placement: this.placementValue, middleware: [offset(4), flip(), shift({padding: 4})] }
-  }
-}