@commonpub/layer 0.1.0

package/theme/dark.css

@@ -0,0 +1,87 @@
+@layer commonpub {
+/* ===========================================
+   CommonPub Dark Theme
+   Inverted surfaces with the same offset shadow
+   aesthetic. Shadows use a lighter border color.
+   =========================================== */
+
+[data-theme="dark"] {
+  /* Surfaces */
+  --bg: #111111;
+  --surface: #1a1a1a;
+  --surface2: #222222;
+  --surface3: #2a2a2a;
+
+  --color-surface: var(--surface);
+  --color-surface-alt: var(--surface2);
+  --color-surface-raised: var(--surface2);
+  --color-surface-overlay: rgba(0, 0, 0, 0.7);
+  --color-surface-overlay-light: rgba(0, 0, 0, 0.6);
+  --color-surface-scrim: rgba(17, 17, 17, 0.85);
+  --color-surface-hover: var(--surface3);
+  --color-bg-subtle: var(--bg);
+
+  /* Text */
+  --text: #e5e5e3;
+  --text-dim: #a3a39e;
+  --text-faint: #6b6b66;
+
+  --color-text: var(--text);
+  --color-text-secondary: var(--text-dim);
+  --color-text-muted: var(--text-faint);
+  --color-text-inverse: #1a1a1a;
+  --color-on-accent: #ffffff;
+  --color-on-primary: #ffffff;
+  --color-primary-hover: #4a8be5;
+
+  /* Borders */
+  --border: #444440;
+  --border2: #333330;
+
+  --color-border: var(--border2);
+  --color-border-strong: var(--border);
+
+  /* Shadows — lighter in dark mode */
+  --shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.4);
+  --shadow-md: 4px 4px 0 rgba(0, 0, 0, 0.4);
+  --shadow-lg: 6px 6px 0 rgba(0, 0, 0, 0.4);
+  --shadow-xl: 8px 8px 0 rgba(0, 0, 0, 0.4);
+
+  /* Accent stays the same */
+  --accent: #5b9cf6;
+  --accent-bg: rgba(91, 156, 246, 0.12);
+  --accent-bg-strong: rgba(91, 156, 246, 0.25);
+  --accent-bg-heavy: rgba(91, 156, 246, 0.45);
+  --accent-bg-solid: rgba(91, 156, 246, 0.65);
+  --accent-border: rgba(91, 156, 246, 0.3);
+  --accent-focus-ring: 0 0 0 3px rgba(91, 156, 246, 0.2);
+  --shadow-accent: 4px 4px 0 var(--accent);
+
+  /* Semantic colors slightly brighter for dark bg */
+  --green: #34d399;
+  --green-bg: rgba(52, 211, 153, 0.12);
+  --green-border: rgba(52, 211, 153, 0.3);
+
+  --yellow: #fbbf24;
+  --yellow-bg: rgba(251, 191, 36, 0.12);
+  --yellow-border: rgba(251, 191, 36, 0.3);
+
+  --red: #f87171;
+  --red-bg: rgba(248, 113, 113, 0.12);
+  --red-border: rgba(248, 113, 113, 0.3);
+
+  --purple: #a78bfa;
+  --purple-bg: rgba(167, 139, 250, 0.12);
+  --purple-border: rgba(167, 139, 250, 0.3);
+
+  --teal: #2dd4bf;
+  --teal-bg: rgba(45, 212, 191, 0.12);
+  --teal-border: rgba(45, 212, 191, 0.3);
+
+  --pink: #f472b6;
+  --pink-bg: rgba(244, 114, 182, 0.12);
+  --pink-border: rgba(244, 114, 182, 0.3);
+
+  color-scheme: dark;
+}
+}

package/theme/editor-panels.css

@@ -0,0 +1,63 @@
+@layer commonpub {
+/* Shared editor panel CSS — common styles for all content type editors */
+/* Prefix: cpub-ep- (editor panel) */
+
+/* ---- Section collapse ---- */
+.cpub-ep-section { border-bottom: var(--border-width-default) solid var(--border); }
+.cpub-ep-section-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; width: 100%; background: none; border: none; font-family: inherit; text-align: left; color: inherit; }
+.cpub-ep-section-header:hover { background: var(--surface2); }
+.cpub-ep-sec-icon { font-size: 10px; color: var(--text-faint); }
+.cpub-ep-sec-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); flex: 1; }
+.cpub-ep-sec-arrow { font-size: 9px; color: var(--text-faint); transition: transform .15s; }
+.cpub-ep-section-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
+.cpub-ep-section.collapsed .cpub-ep-section-body { display: none; }
+.cpub-ep-section.collapsed .cpub-ep-sec-arrow { transform: rotate(-90deg); }
+
+/* ---- Form fields ---- */
+.cpub-ep-field { display: flex; flex-direction: column; gap: 4px; }
+.cpub-ep-flabel { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
+.cpub-ep-input, .cpub-ep-textarea, .cpub-ep-select { background: var(--surface); border: var(--border-width-default) solid var(--border); padding: 5px 9px; font-size: 12px; color: var(--text); outline: none; width: 100%; font-family: inherit; }
+.cpub-ep-input:focus, .cpub-ep-textarea:focus, .cpub-ep-select:focus { border-color: var(--accent); }
+.cpub-ep-input::placeholder, .cpub-ep-textarea::placeholder { color: var(--text-faint); }
+.cpub-ep-textarea { resize: vertical; }
+.cpub-ep-select { appearance: none; cursor: pointer; }
+.cpub-ep-hint { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
+
+/* ---- Chip/tag input ---- */
+.cpub-ep-chip-wrap { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: var(--surface); border: var(--border-width-default) solid var(--border); padding: 4px 8px; min-height: 32px; }
+.cpub-ep-chip-wrap:focus-within { border-color: var(--accent); }
+.cpub-ep-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; font-size: 10px; font-family: var(--font-mono); background: var(--surface2); border: var(--border-width-default) solid var(--border2); color: var(--text-dim); }
+.cpub-ep-chip-x { cursor: pointer; color: var(--text-faint); }
+.cpub-ep-chip-x:hover { color: var(--red); }
+.cpub-ep-chip-input { background: transparent; border: none; outline: none; font-size: 11px; color: var(--text); font-family: var(--font-mono); min-width: 60px; flex: 1; }
+.cpub-ep-chip-input::placeholder { color: var(--text-faint); }
+
+/* ---- Visibility radio group ---- */
+.cpub-ep-vis-group { display: flex; flex-direction: column; gap: 4px; }
+.cpub-ep-vis-opt { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: var(--border-width-default) solid var(--border2); cursor: pointer; background: none; font-family: inherit; text-align: left; color: inherit; transition: all .12s; width: 100%; }
+.cpub-ep-vis-opt:hover { background: var(--surface2); }
+.cpub-ep-vis-opt.selected { border-color: var(--accent); background: var(--accent-bg); }
+.cpub-ep-vis-radio { width: 13px; height: 13px; border-radius: 50%; border: var(--border-width-default) solid var(--border2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.cpub-ep-vis-opt.selected .cpub-ep-vis-radio { border-color: var(--accent); }
+.cpub-ep-vis-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: none; }
+.cpub-ep-vis-opt.selected .cpub-ep-vis-dot { display: block; }
+.cpub-ep-vis-info { flex: 1; display: flex; flex-direction: column; }
+.cpub-ep-vis-label { font-size: 12px; color: var(--text); }
+.cpub-ep-vis-desc { font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); }
+.cpub-ep-vis-icon { font-size: 11px; color: var(--text-faint); }
+.cpub-ep-vis-opt.selected .cpub-ep-vis-icon { color: var(--accent); }
+
+/* ---- Block library (left panel) ---- */
+.cpub-ep-lib-header { padding: 10px 12px; border-bottom: var(--border-width-default) solid var(--border); }
+.cpub-ep-search { display: flex; align-items: center; gap: 7px; background: var(--surface2); border: var(--border-width-default) solid var(--border); padding: 5px 9px; }
+.cpub-ep-search i { font-size: 10px; color: var(--text-faint); }
+.cpub-ep-search input { background: transparent; border: none; outline: none; font-size: 12px; color: var(--text); width: 100%; }
+.cpub-ep-search input::placeholder { color: var(--text-faint); }
+.cpub-ep-lib-body { flex: 1; overflow-y: auto; }
+.cpub-ep-group { padding: 10px 0 4px; }
+.cpub-ep-group-label { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); padding: 0 12px 6px; }
+.cpub-ep-block-item { display: flex; align-items: center; gap: 9px; padding: 6px 12px; cursor: pointer; border: var(--border-width-default) solid transparent; background: none; color: var(--text-dim); font-size: 12px; width: 100%; text-align: left; font-family: inherit; transition: background .1s; }
+.cpub-ep-block-item:hover { background: var(--surface2); color: var(--text); }
+.cpub-ep-block-icon { width: 22px; height: 22px; background: var(--surface3); border: var(--border-width-default) solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text-faint); flex-shrink: 0; }
+.cpub-ep-block-item:hover .cpub-ep-block-icon { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }
+}

package/theme/forms.css

@@ -0,0 +1,216 @@
+@layer commonpub {
+/* ===========================================
+   CommonPub Form Patterns — forms.css
+   Shared form element styles.
+   All values use CSS custom properties from base.css.
+   =========================================== */
+
+/* ─── TEXT INPUTS ─── */
+.cpub-input {
+  display: block;
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  font-family: var(--font-sans);
+  color: var(--text);
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border2);
+  transition: border-color var(--transition-fast);
+}
+
+.cpub-input::placeholder {
+  color: var(--text-faint);
+}
+
+.cpub-input:hover {
+  border-color: var(--border);
+}
+
+.cpub-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: var(--shadow-accent);
+}
+
+/* ─── TEXTAREA ─── */
+.cpub-textarea {
+  display: block;
+  width: 100%;
+  padding: var(--space-3);
+  font-size: var(--text-sm);
+  font-family: var(--font-sans);
+  color: var(--text);
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border2);
+  resize: vertical;
+  min-height: 100px;
+  transition: border-color var(--transition-fast);
+}
+
+.cpub-textarea::placeholder {
+  color: var(--text-faint);
+}
+
+.cpub-textarea:hover {
+  border-color: var(--border);
+}
+
+.cpub-textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: var(--shadow-accent);
+}
+
+/* ─── SELECT ─── */
+.cpub-select {
+  display: block;
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  padding-right: var(--space-8);
+  font-size: var(--text-sm);
+  font-family: var(--font-sans);
+  color: var(--text);
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border2);
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  cursor: pointer;
+  transition: border-color var(--transition-fast);
+}
+
+.cpub-select:hover {
+  border-color: var(--border);
+}
+
+.cpub-select:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: var(--shadow-accent);
+}
+
+/* ─── FORM GROUP ─── */
+.cpub-form-group {
+  margin-bottom: var(--space-4);
+}
+
+.cpub-form-label {
+  display: block;
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-dim);
+  margin-bottom: var(--space-1);
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+}
+
+.cpub-form-hint {
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+  margin-top: var(--space-1);
+}
+
+.cpub-form-error {
+  font-size: var(--text-xs);
+  color: var(--red);
+  margin-top: var(--space-1);
+}
+
+/* ─── CHECKBOX ─── */
+.cpub-checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  color: var(--text);
+}
+
+.cpub-checkbox input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  border: var(--border-width-default) solid var(--border2);
+  background: var(--surface);
+  appearance: none;
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.cpub-checkbox input[type="checkbox"]:checked {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.cpub-checkbox input[type="checkbox"]:checked::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  top: 0px;
+  width: 5px;
+  height: 9px;
+  border: solid var(--color-text-inverse);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.cpub-checkbox input[type="checkbox"]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ─── RADIO ─── */
+.cpub-radio {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  color: var(--text);
+}
+
+.cpub-radio input[type="radio"] {
+  width: 16px;
+  height: 16px;
+  border: var(--border-width-default) solid var(--border2);
+  border-radius: 50%;
+  background: var(--surface);
+  appearance: none;
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.cpub-radio input[type="radio"]:checked {
+  border-color: var(--accent);
+}
+
+.cpub-radio input[type="radio"]:checked::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+.cpub-radio input[type="radio"]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ─── INPUT SIZES ─── */
+.cpub-input-sm {
+  padding: 4px var(--space-2);
+  font-size: var(--text-xs);
+}
+
+.cpub-input-lg {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-base);
+}
+}

package/theme/generics.css

@@ -0,0 +1,68 @@
+/* Generics — Dark Minimal Theme */
+
+[data-theme='generics'] {
+  /* Surface */
+  --color-surface: #0c0c0b;
+  --color-surface-alt: #141413;
+  --color-surface-raised: #1c1c1a;
+  --color-surface-overlay: rgba(12, 12, 11, 0.9);
+  --color-surface-hover: #222220;
+  --color-bg-subtle: #1c1c1a;
+
+  /* Text */
+  --color-text: #d8d5cf;
+  --color-text-secondary: #888884;
+  --color-text-muted: #444440;
+  --color-text-inverse: #0c0c0b;
+
+  /* Brand */
+  --color-primary: #5b9cf6;
+  --color-primary-hover: #4a8be5;
+  --color-primary-text: #0c0c0b;
+  --color-on-primary: #ffffff;
+
+  /* Accent */
+  --color-accent: #5b9cf6;
+  --color-accent-hover: #4a8be5;
+  --color-accent-text: #0c0c0b;
+  --color-on-accent: #ffffff;
+  --color-accent-bg: rgba(91, 156, 246, 0.1);
+  --color-accent-border: rgba(91, 156, 246, 0.22);
+
+  /* Semantic */
+  --color-success: #4ade80;
+  --color-warning: #fbbf24;
+  --color-error: #f87171;
+  --color-info: #5b9cf6;
+
+  /* Semantic Backgrounds */
+  --color-success-bg: rgba(74, 222, 128, 0.1);
+  --color-warning-bg: rgba(251, 191, 36, 0.1);
+  --color-error-bg: rgba(248, 113, 113, 0.1);
+  --color-info-bg: rgba(91, 156, 246, 0.1);
+
+  /* Borders */
+  --color-border: #272725;
+  --color-border-strong: #333330;
+  --color-border-focus: var(--color-primary);
+
+  /* Interactive */
+  --color-link: var(--color-primary);
+  --color-link-hover: var(--color-primary-hover);
+
+  /* Typography */
+  --font-heading: system-ui, -apple-system, sans-serif;
+  --font-body: system-ui, -apple-system, sans-serif;
+  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
+
+  /* Borders */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.25rem;
+  --radius-lg: 0.5rem;
+}