@geekity/cms 0.21.0 → 0.22.0

package/admin/pages/users/new.njk

@@ -6,13 +6,17 @@
  #}
 {% extends "layouts/shell.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card %}
 
 {% block title %}Add new user{% endblock %}
 
 {% block content %}
-  <h1>Add new user</h1>
+  <h1 class="mb-6 text-2xl font-bold">Add new user</h1>
 
-  <form class="admin-settings" method="post" action="{{ addUserUrl }}">
+  <div class="flex max-w-2xl flex-col gap-6">
+  {% call card() %}
+  <form method="post" action="{{ addUserUrl }}">
     <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
 
     {% if addProblems.username or addProblems.password or addProblems.email %}
@@ -26,7 +30,7 @@
     {{ field.text('add-username', fields.username, 'Username', addForm.username,
          error=addProblems.username, required=true) }}
 
-    {{ field.text('add-email', fields.email, 'Email <span class="admin-status">(optional)</span>',
+    {{ field.text('add-email', fields.email, 'Email <span class="font-normal">(optional)</span>',
          addForm.email, type='email', autocomplete='email', error=addProblems.email) }}
 
     {{ field.password('add-password', fields.password, 'Password',
@@ -36,10 +40,10 @@
          'Generate one instead, and show it to me once', checked=addForm.generate,
          hint='A generated password is shown on the next page and nowhere else. Copy it before you leave.') }}
 
-    <p class="admin-settings-buttons">
-      <button type="submit">Add user</button>
-    </p>
+    <div class="mt-2">{{ button('Add user', type='submit', color='primary') }}</div>
   </form>
+  {% endcall %}
 
-  <p class="admin-hint"><a href="{{ usersUrl }}">Back to all users</a></p>
+  <p class="text-sm"><a class="link" href="{{ usersUrl }}">Back to all users</a></p>
+  </div>
 {% endblock %}

package/admin/src/admin.css

@@ -0,0 +1,174 @@
+@import 'tailwindcss' source(none);
+@source '../layouts';
+@source '../components';
+@source '../pages';
+@source '../../editor/look.ts';
+
+@plugin 'daisyui' {
+  themes:
+    light --default,
+    dark --prefersdark,
+    cupcake,
+    bumblebee,
+    emerald,
+    corporate,
+    synthwave,
+    retro,
+    cyberpunk,
+    valentine,
+    halloween,
+    garden,
+    forest,
+    aqua,
+    lofi,
+    pastel,
+    fantasy,
+    wireframe,
+    black,
+    luxury,
+    dracula,
+    cmyk,
+    autumn,
+    business,
+    acid,
+    lemonade,
+    night,
+    coffee,
+    winter,
+    dim,
+    nord,
+    sunset,
+    caramellatte,
+    abyss,
+    silk;
+  logs: false;
+}
+
+/*
+ * CodeMirror injects its own theme after this sheet, outside any layer, two
+ * classes to a selector; the id on every rule outranks it. `editor/main.ts`
+ * writes the `.cm-md-*` classes.
+ */
+#editor-surface .cm-editor {
+  height: 28rem;
+  border: 1px solid var(--color-base-300);
+  border-radius: var(--radius-field);
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);
+  font-size: 0.95rem;
+}
+
+#editor-surface .cm-editor.cm-focused {
+  outline: 2px solid var(--color-base-content);
+  outline-offset: 2px;
+}
+
+#editor-surface .cm-scroller {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  line-height: 1.5;
+}
+
+#editor-surface .cm-content {
+  caret-color: var(--color-base-content);
+}
+
+#editor-surface .cm-cursor,
+#editor-surface .cm-dropCursor {
+  border-left-color: var(--color-base-content);
+}
+
+#editor-surface .cm-selectionBackground {
+  background: color-mix(in oklab, var(--color-base-content) 15%, transparent);
+}
+
+#editor-surface .cm-focused .cm-selectionBackground {
+  background: color-mix(in oklab, var(--color-primary) 30%, transparent);
+}
+
+#editor-surface .cm-activeLine {
+  background-color: color-mix(in oklab, var(--color-base-content) 5%, transparent);
+}
+
+#editor-surface .cm-gutters {
+  border-color: var(--color-base-300);
+  background-color: var(--color-base-200);
+  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+}
+
+#editor-surface .cm-activeLineGutter {
+  background-color: var(--color-base-300);
+  color: var(--color-base-content);
+}
+
+#editor-surface .cm-selectionMatch {
+  background-color: color-mix(in oklab, var(--color-accent) 25%, transparent);
+}
+
+#editor-surface .cm-searchMatch {
+  background-color: color-mix(in oklab, var(--color-warning) 35%, transparent);
+}
+
+#editor-surface .cm-searchMatch-selected {
+  background-color: color-mix(in oklab, var(--color-warning) 65%, transparent);
+}
+
+#editor-surface .cm-matchingBracket {
+  background-color: color-mix(in oklab, var(--color-success) 30%, transparent);
+}
+
+#editor-surface .cm-nonmatchingBracket {
+  background-color: color-mix(in oklab, var(--color-error) 30%, transparent);
+}
+
+#editor-surface .cm-specialChar {
+  color: var(--color-error);
+}
+
+#editor-surface .cm-panels,
+#editor-surface .cm-tooltip,
+#editor-surface .cm-foldPlaceholder {
+  border-color: var(--color-base-300);
+  background-color: var(--color-base-200);
+  color: var(--color-base-content);
+}
+
+#editor-surface .cm-textfield {
+  border-color: var(--color-base-300);
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);
+}
+
+#editor-surface .cm-button {
+  border-color: var(--color-base-300);
+  background-image: none;
+  background-color: var(--color-base-300);
+  color: var(--color-base-content);
+}
+
+#editor-surface .cm-md-heading,
+#editor-surface .cm-md-strong {
+  font-weight: 700;
+}
+
+#editor-surface .cm-md-emphasis,
+#editor-surface .cm-md-quote {
+  font-style: italic;
+}
+
+#editor-surface .cm-md-strikethrough {
+  text-decoration: line-through;
+}
+
+#editor-surface .cm-md-link {
+  text-decoration: underline;
+  text-decoration-color: var(--color-primary);
+}
+
+#editor-surface .cm-md-code {
+  border-radius: 0.25rem;
+  background-color: var(--color-base-200);
+}
+
+#editor-surface .cm-md-mark {
+  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+}

package/admin/static/admin-bar.css

@@ -1,21 +1,27 @@
 /*
- * The admin bar: the dark strip across the top of every admin screen, and of
- * every public page a signed-in user reads (TASK-183).
+ * The admin bar's stylesheet (decision-30), inlined into the bar's shadow root
+ * on admin screens and on the public site alike.
  *
- * Self-contained, because on the public site it is inlined into the bar's
- * shadow root, under a host reset to `all: initial`: nothing here may lean on
- * admin.css or on whatever theme the site wears. Sizes are in pixels for the
- * same reason, since a `rem` is the theme's root font size. The colours are
- * declared on `:host` there and on `:root` in the admin, where admin.css
- * reads them too.
+ * Nothing here may lean on another stylesheet, and sizes are in pixels: a
+ * `rem` is the host page's.
  */
 
-:root,
-:host {
-  --admin-bar: #1d2327;
-  --admin-nav: #2c3338;
-  --admin-nav-text: #f0f0f1;
-  --admin-focus-on-dark: #fff;
+.admin-bar {
+  color-scheme: light dark;
+  --admin-bar-surface: light-dark(#f0f0f1, #1d2327);
+  --admin-bar-menu: light-dark(#ffffff, #2c3338);
+  --admin-bar-text: light-dark(#1d2327, #f0f0f1);
+  --admin-bar-hover: light-dark(#135e96, #72aee6);
+  --admin-bar-focus: light-dark(#2271b1, #ffffff);
+  --admin-bar-edge: light-dark(#c3c4c7, #1d2327);
+}
+
+:host([data-scheme='light']) .admin-bar {
+  color-scheme: light;
+}
+
+:host([data-scheme='dark']) .admin-bar {
+  color-scheme: dark;
 }
 
 .admin-bar,
@@ -32,8 +38,9 @@
   gap: 0 16px;
   padding: 0 16px;
   min-height: 40px;
-  background: var(--admin-bar);
-  color: var(--admin-nav-text);
+  background: var(--admin-bar-surface);
+  box-shadow: 0 1px 0 var(--admin-bar-edge);
+  color: var(--admin-bar-text);
   font:
     14px/40px -apple-system,
     BlinkMacSystemFont,
@@ -44,22 +51,18 @@
 }
 
 .admin-bar a {
-  color: var(--admin-nav-text);
+  color: var(--admin-bar-text);
   text-decoration: none;
   white-space: nowrap;
 }
 
 .admin-bar a:hover,
 .admin-bar a:focus {
-  color: #72aee6;
+  color: var(--admin-bar-hover);
 }
 
-/* The ring where the keyboard is, white on the dark bar. Here rather than in
-   admin.css because on the public site this is the only stylesheet the bar
-   has. */
-
 .admin-bar :focus-visible {
-  outline: 2px solid var(--admin-focus-on-dark);
+  outline: 2px solid var(--admin-bar-focus);
   outline-offset: 2px;
 }
 
@@ -75,7 +78,7 @@
   padding: 0;
   border: 0;
   background: none;
-  color: var(--admin-nav-text);
+  color: var(--admin-bar-text);
   font: inherit;
   text-align: right;
   cursor: pointer;
@@ -92,7 +95,7 @@
 .admin-bar-account:hover,
 .admin-bar-account:focus-visible,
 .admin-bar-account:popover-open {
-  color: #72aee6;
+  color: var(--admin-bar-hover);
 }
 
 .admin-bar-account::after {
@@ -109,8 +112,8 @@
   min-width: 160px;
   padding: 4px 0;
   border: 0;
-  background: var(--admin-nav);
-  color: var(--admin-nav-text);
+  background: var(--admin-bar-menu);
+  color: var(--admin-bar-text);
   line-height: 1.6;
   box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
 }
@@ -124,14 +127,13 @@
 .admin-account-menu a,
 .admin-account-menu button[type='submit'] {
   display: block;
-  box-sizing: border-box;
   width: 100%;
   margin: 0;
   padding: 8px 16px;
   border: 0;
   border-radius: 0;
   background: none;
-  color: var(--admin-nav-text);
+  color: var(--admin-bar-text);
   font: inherit;
   text-align: left;
   text-decoration: none;
@@ -148,6 +150,6 @@
 .admin-account-menu a:focus-visible,
 .admin-account-menu button[type='submit']:hover,
 .admin-account-menu button[type='submit']:focus-visible {
-  background: var(--admin-bar);
-  color: #72aee6;
+  background: var(--admin-bar-surface);
+  color: var(--admin-bar-hover);
 }

package/admin/static/admin-bar.js

@@ -0,0 +1,22 @@
+(function () {
+  var host = document.querySelector('geekity-admin-bar');
+  var root = host && host.shadowRoot;
+  if (!root) return;
+
+  new ResizeObserver(function () {
+    var height = host.getBoundingClientRect().height;
+    document.documentElement.style.setProperty('--geekity-admin-bar-height', height + 'px');
+  }).observe(host);
+
+  var menu = root.getElementById('admin-account-menu');
+  if (!menu) return;
+  /* Chrome restores focus when a light-DOM popover closes, not one inside a
+     shadow root. */
+  menu.addEventListener('beforetoggle', function (event) {
+    if (event.newState === 'closed' && menu.contains(root.activeElement)) {
+      setTimeout(function () {
+        root.querySelector('.admin-bar-account').focus();
+      });
+    }
+  });
+})();