diff --git a/app/assets/stylesheets/wigu/active_admin_theme.scss b/app/assets/stylesheets/wigu/active_admin_theme.scss index dd4761d..f9306d8 100644 --- a/app/assets/stylesheets/wigu/active_admin_theme.scss +++ b/app/assets/stylesheets/wigu/active_admin_theme.scss @@ -1959,3 +1959,58 @@ input[type='radio'] { html:not([data-theme="light"]) { @include aa-dark-content; } } html[data-theme="dark"] { @include aa-dark-content; } + +// Trix / ActionText editor. Trix ships with ActionText (a Rails built-in), so +// its chrome is themed here for every consumer; the app still imports Trix's +// own base CSS (trix/dist/trix). All rules key off the --aa-* tokens, so they +// follow the active palette in both light and dark, and are inert when no +// editor is on the page. +trix-toolbar { + .trix-button-group { border-color: var(--aa-border); } + .trix-button { + background: var(--aa-surface); + color: var(--aa-text); + border-bottom-color: var(--aa-border); + &:not(:first-child) { border-left-color: var(--aa-border); } + &:not(:disabled):hover { background: var(--aa-surface-hover); } + &.trix-active { background: var(--aa-selected); } + } + // Trix dims idle icons to opacity 0.6 and disabled ones to 0.125 — both read + // as faint in either palette, the 0.125 so faint the block-format buttons + // (disabled until the editor is focused) look broken. Lift idle to 0.8 and + // disabled to 0.4: still clearly dimmer than idle, but legible. Trix keeps the + // active icon at 1 via a higher-specificity rule. + .trix-button--icon::before { opacity: 0.8; } + .trix-button--icon:disabled::before { opacity: 0.4; } +} + +trix-editor { + background: var(--aa-input-bg); + border-color: var(--aa-input-border); + color: var(--aa-text); + &:empty:not(:focus)::before { color: var(--aa-text-muted); } // placeholder +} + +.trix-content { + pre { background: var(--aa-surface-2); } + blockquote { border-left: 0.3em solid var(--aa-border); } +} + +.trix-dialog { + background: var(--aa-surface); + color: var(--aa-text); + box-shadow: 0 2px 8px var(--aa-shadow); + input[type="text"], input[type="url"] { + background: var(--aa-input-bg); + border-color: var(--aa-input-border); + color: var(--aa-text); + } + .trix-button { background: var(--aa-accent); color: #fff; } +} + +// Trix bakes its toolbar icons into the base CSS as black SVG background images +// on ::before; invert them in dark mode so they read on the dark toolbar (the +// idle/disabled opacity lift above applies in both modes). +@include aa-dark { + trix-toolbar .trix-button--icon::before { filter: invert(1); } +} diff --git a/img/trix-dark.png b/img/trix-dark.png new file mode 100644 index 0000000..d5c82d9 Binary files /dev/null and b/img/trix-dark.png differ diff --git a/img/trix-light.png b/img/trix-light.png new file mode 100644 index 0000000..5c22dc5 Binary files /dev/null and b/img/trix-light.png differ diff --git a/test/dummy/app/admin/editor.rb b/test/dummy/app/admin/editor.rb new file mode 100644 index 0000000..13f9b73 --- /dev/null +++ b/test/dummy/app/admin/editor.rb @@ -0,0 +1,24 @@ +# Demo page with a real Trix (ActionText) editor so the theme's Trix chrome can +# be seen and screenshotted. The hidden input carries sample formatted HTML that +# Trix loads on init, exercising the toolbar states and .trix-content styles. +ActiveAdmin.register_page "Rich text" do + menu priority: 2 + + SAMPLE_HTML = <<~HTML +
code.Quoted text follows the theme border.+
$ bundle exec rake+ HTML + + content do + panel "Trix / ActionText" do + value = ERB::Util.html_escape(SAMPLE_HTML) + html = %() + + %(