690991c526
Major refactoring cleanup: - Add new controller architecture (class-controller-*.php) - Add new settings-v2 UI (views/settings-v2/) - Add new CSS architecture (agentic-sidebar.css, tokens) - Add esbuild build pipeline (scripts/build.js, package.json) - Add composer dependencies (vendor/) - Add frontend src directory (assets/js/src/index.jsx) - Add documentation files - Remove old/obsolete files (class-settings.php, old CSS) This commits all pending changes from previous refactoring efforts.
808 lines
20 KiB
CSS
808 lines
20 KiB
CSS
/**
|
||
* Agentic Design System — Tokens & Utilities
|
||
* Source: stitch/wp_agentic_interface/DESIGN.md
|
||
*
|
||
* This is the canonical design token layer for the Stitch design system.
|
||
* Phase 0: Lands alongside existing --wpaw-* tokens (no breakage).
|
||
* All new UI should use --aw-* tokens exclusively.
|
||
*
|
||
* @package WP_Agentic_Writer
|
||
* @since 0.3.0
|
||
*/
|
||
|
||
/* =========================================================================
|
||
1. FONT FACES
|
||
========================================================================= */
|
||
|
||
/* Inter — Variable font (weights 100–900 via font-weight) */
|
||
@font-face {
|
||
font-family: "Inter";
|
||
src: url("../fonts/inter/Inter-Variable.woff2") format("woff2");
|
||
font-weight: 100 900;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Inter";
|
||
src: url("../fonts/inter/Inter-Variable-Italic.woff2") format("woff2");
|
||
font-weight: 100 900;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
/* JetBrains Mono — Monospace for technical data */
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
src: url("../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2")
|
||
format("woff2");
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "JetBrains Mono";
|
||
src: url("../fonts/jetbrains-mono/JetBrainsMono-Bold.woff2") format("woff2");
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
/* =========================================================================
|
||
2. DESIGN TOKENS (Custom Properties)
|
||
========================================================================= */
|
||
|
||
:root {
|
||
/* ---- Surface (tonal depth — NOT shadows) ---- */
|
||
--aw-surface: #f7f9ff;
|
||
--aw-surface-dim: #d3dbe5;
|
||
--aw-surface-bright: #f7f9ff;
|
||
--aw-surface-container-lowest: #ffffff;
|
||
--aw-surface-container-low: #edf4ff;
|
||
--aw-surface-container: #e7eff9;
|
||
--aw-surface-container-high: #e1e9f3;
|
||
--aw-surface-container-highest: #dbe3ed;
|
||
--aw-surface-variant: #dbe3ed;
|
||
--aw-surface-faint: #f7f9ff;
|
||
|
||
/* ---- On-surface (text) ---- */
|
||
--aw-on-surface: #151c24;
|
||
--aw-on-surface-variant: #40474f;
|
||
--aw-inverse-surface: #293139;
|
||
--aw-inverse-on-surface: #eaf1fc;
|
||
|
||
/* ---- Outline ---- */
|
||
--aw-outline: #717880;
|
||
--aw-outline-variant: #c0c7d0;
|
||
--aw-outline-subtle: #bfc7d1;
|
||
|
||
/* ---- Surface tint ---- */
|
||
--aw-surface-tint: #046397;
|
||
|
||
/* ---- Primary ---- */
|
||
--aw-primary: #004971;
|
||
--aw-on-primary: #ffffff;
|
||
--aw-primary-container: #006295;
|
||
--aw-on-primary-container: #b4dbff;
|
||
--aw-inverse-primary: #92ccff;
|
||
--aw-primary-fixed: #cce5ff;
|
||
--aw-primary-fixed-dim: #92ccff;
|
||
--aw-on-primary-fixed: #001d31;
|
||
--aw-on-primary-fixed-variant: #004b73;
|
||
|
||
/* ---- Secondary ---- */
|
||
--aw-secondary: #585f65;
|
||
--aw-on-secondary: #ffffff;
|
||
--aw-secondary-container: #dce3ea;
|
||
--aw-on-secondary-container: #5e656b;
|
||
--aw-secondary-fixed: #dce3ea;
|
||
--aw-secondary-fixed-dim: #c0c7ce;
|
||
--aw-on-secondary-fixed: #161c21;
|
||
--aw-on-secondary-fixed-variant: #41484d;
|
||
|
||
/* ---- Tertiary (Success) ---- */
|
||
--aw-tertiary: #005112;
|
||
--aw-on-tertiary: #ffffff;
|
||
--aw-tertiary-container: #006c1c;
|
||
--aw-on-tertiary-container: #87ec85;
|
||
--aw-tertiary-fixed: #94f990;
|
||
--aw-tertiary-fixed-dim: #78dc77;
|
||
--aw-on-tertiary-fixed: #002204;
|
||
--aw-on-tertiary-fixed-variant: #005313;
|
||
|
||
/* ---- Error ---- */
|
||
--aw-error: #ba1a1a;
|
||
--aw-on-error: #ffffff;
|
||
--aw-error-container: #ffdad6;
|
||
--aw-on-error-container: #93000a;
|
||
|
||
/* ---- WordPress-specific ---- */
|
||
--aw-wp-dark-sidebar: #2c3338;
|
||
--aw-wp-active-blue: #2271b1;
|
||
--aw-wp-hover-dark: #191e23;
|
||
--aw-wp-link-alt: #72aee6;
|
||
|
||
/* ---- Typography ---- */
|
||
--aw-font-sans:
|
||
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||
Helvetica, Arial, sans-serif;
|
||
--aw-font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
|
||
|
||
/* Type scale */
|
||
--aw-text-headline-lg: 600 24px/32px var(--aw-font-sans);
|
||
--aw-text-headline-md: 600 18px/24px var(--aw-font-sans);
|
||
--aw-text-body-md: 400 14px/20px var(--aw-font-sans);
|
||
--aw-text-body-sm: 400 13px/18px var(--aw-font-sans);
|
||
--aw-text-label-caps: 700 11px/16px var(--aw-font-sans);
|
||
--aw-text-code-sm: 400 12px/18px var(--aw-font-mono);
|
||
|
||
/* Letter-spacing */
|
||
--aw-tracking-headline-lg: -0.02em;
|
||
--aw-tracking-headline-md: -0.01em;
|
||
--aw-tracking-label-caps: 0.05em;
|
||
|
||
/* ---- Border Radius ---- */
|
||
--aw-radius-sm: 0.125rem; /* 2px */
|
||
--aw-radius: 0.25rem; /* 4px */
|
||
--aw-radius-md: 0.375rem; /* 6px */
|
||
--aw-radius-lg: 0.5rem; /* 8px */
|
||
--aw-radius-xl: 0.75rem; /* 12px */
|
||
--aw-radius-full: 9999px;
|
||
|
||
/* ---- Spacing ---- */
|
||
--aw-space-sidebar: 192px;
|
||
--aw-space-sidebar-collapsed: 64px;
|
||
--aw-space-page: 32px;
|
||
--aw-space-stack: 12px;
|
||
--aw-space-section: 40px;
|
||
--aw-space-max-content: 840px;
|
||
|
||
/* ---- Transitions ---- */
|
||
--aw-transition-fast: 150ms ease-out;
|
||
--aw-transition-normal: 200ms ease-out;
|
||
--aw-transition-slow: 300ms ease-out;
|
||
|
||
/* ---- Shadows (minimal usage) ---- */
|
||
--aw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
/* =========================================================================
|
||
3. TYPOGRAPHY UTILITY CLASSES
|
||
========================================================================= */
|
||
|
||
.aw-headline-lg {
|
||
font: var(--aw-text-headline-lg);
|
||
letter-spacing: var(--aw-tracking-headline-lg);
|
||
color: var(--aw-on-surface);
|
||
}
|
||
|
||
.aw-headline-md {
|
||
font: var(--aw-text-headline-md);
|
||
letter-spacing: var(--aw-tracking-headline-md);
|
||
color: var(--aw-on-surface);
|
||
}
|
||
|
||
.aw-body-md {
|
||
font: var(--aw-text-body-md);
|
||
color: var(--aw-on-surface);
|
||
}
|
||
|
||
.aw-body-sm {
|
||
font: var(--aw-text-body-sm);
|
||
color: var(--aw-on-surface-variant);
|
||
}
|
||
|
||
.aw-label-caps {
|
||
font: var(--aw-text-label-caps);
|
||
letter-spacing: var(--aw-tracking-label-caps);
|
||
text-transform: uppercase;
|
||
color: var(--aw-on-surface-variant);
|
||
}
|
||
|
||
.aw-code-sm {
|
||
font: var(--aw-text-code-sm);
|
||
color: var(--aw-on-surface);
|
||
}
|
||
|
||
/* =========================================================================
|
||
4. SURFACE UTILITY CLASSES
|
||
========================================================================= */
|
||
|
||
.aw-surface {
|
||
background: var(--aw-surface);
|
||
}
|
||
.aw-surface-dim {
|
||
background: var(--aw-surface-dim);
|
||
}
|
||
.aw-surface-bright {
|
||
background: var(--aw-surface-bright);
|
||
}
|
||
.aw-surface-lowest {
|
||
background: var(--aw-surface-container-lowest);
|
||
}
|
||
.aw-surface-low {
|
||
background: var(--aw-surface-container-low);
|
||
}
|
||
.aw-surface-mid {
|
||
background: var(--aw-surface-container);
|
||
}
|
||
.aw-surface-high {
|
||
background: var(--aw-surface-container-high);
|
||
}
|
||
.aw-surface-highest {
|
||
background: var(--aw-surface-container-highest);
|
||
}
|
||
|
||
/* =========================================================================
|
||
5. CARD CONTAINER
|
||
========================================================================= */
|
||
|
||
.aw-card {
|
||
background: var(--aw-surface-container-lowest);
|
||
border: none;
|
||
border-radius: var(--aw-radius-xl);
|
||
padding: 24px;
|
||
}
|
||
|
||
.aw-card--elevated {
|
||
box-shadow: var(--aw-shadow-sm);
|
||
}
|
||
|
||
.aw-card__header {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.aw-card__title {
|
||
font: var(--aw-text-headline-md);
|
||
letter-spacing: var(--aw-tracking-headline-md);
|
||
color: var(--aw-on-surface);
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.aw-card__title i.bi {
|
||
color: var(--aw-on-surface-variant);
|
||
font-size: 16px;
|
||
}
|
||
|
||
.aw-card__subtitle {
|
||
font: var(--aw-text-body-sm);
|
||
color: var(--aw-on-surface-variant);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* =========================================================================
|
||
6. BUTTONS
|
||
========================================================================= */
|
||
|
||
.aw-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
font: 600 14px/20px var(--aw-font-sans);
|
||
padding: 8px 16px;
|
||
border-radius: var(--aw-radius);
|
||
border: 1px solid transparent;
|
||
cursor: pointer;
|
||
transition: all var(--aw-transition-normal);
|
||
white-space: nowrap;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.aw-btn:focus-visible {
|
||
outline: 2px solid var(--aw-primary);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
/* Primary */
|
||
.aw-btn--primary {
|
||
background: var(--aw-primary);
|
||
color: var(--aw-on-primary);
|
||
}
|
||
|
||
.aw-btn--primary:hover {
|
||
background: var(--aw-primary-container);
|
||
}
|
||
|
||
.aw-btn--primary:active {
|
||
background: var(--aw-on-primary-fixed-variant);
|
||
}
|
||
|
||
/* Secondary */
|
||
.aw-btn--secondary {
|
||
background: transparent;
|
||
color: var(--aw-primary);
|
||
border-color: var(--aw-outline-variant);
|
||
}
|
||
|
||
.aw-btn--secondary:hover {
|
||
background: var(--aw-surface-container-low);
|
||
border-color: var(--aw-primary);
|
||
}
|
||
|
||
.aw-btn--secondary:active {
|
||
background: var(--aw-surface-container);
|
||
}
|
||
|
||
/* Ghost */
|
||
.aw-btn--ghost {
|
||
background: transparent;
|
||
color: var(--aw-on-surface-variant);
|
||
border-color: transparent;
|
||
}
|
||
|
||
.aw-btn--ghost:hover {
|
||
background: var(--aw-surface-container-low);
|
||
color: var(--aw-on-surface);
|
||
}
|
||
|
||
/* Danger */
|
||
.aw-btn--danger {
|
||
background: var(--aw-error);
|
||
color: var(--aw-on-error);
|
||
}
|
||
|
||
.aw-btn--danger:hover {
|
||
background: #9b1515;
|
||
}
|
||
|
||
/* Size variants */
|
||
.aw-btn--sm {
|
||
font-size: 13px;
|
||
padding: 4px 12px;
|
||
}
|
||
|
||
.aw-btn--lg {
|
||
font-size: 15px;
|
||
padding: 12px 24px;
|
||
}
|
||
|
||
/* =========================================================================
|
||
7. INPUTS
|
||
========================================================================= */
|
||
|
||
.aw-input,
|
||
.aw-select,
|
||
.aw-textarea {
|
||
font: var(--aw-text-body-md);
|
||
color: var(--aw-on-surface);
|
||
background: var(--aw-surface-container-lowest);
|
||
border: 1px solid var(--aw-outline-variant);
|
||
border-radius: var(--aw-radius-md);
|
||
padding: 7px 11px;
|
||
transition: all var(--aw-transition-fast);
|
||
width: 100%;
|
||
}
|
||
|
||
.aw-input:hover,
|
||
.aw-select:hover,
|
||
.aw-textarea:hover {
|
||
border-color: var(--aw-outline);
|
||
}
|
||
|
||
.aw-input:focus,
|
||
.aw-select:focus,
|
||
.aw-textarea:focus {
|
||
outline: none;
|
||
border-color: var(--aw-primary);
|
||
box-shadow: 0 0 0 1px var(--aw-primary);
|
||
}
|
||
|
||
.aw-input::placeholder,
|
||
.aw-textarea::placeholder {
|
||
color: var(--aw-outline);
|
||
}
|
||
|
||
.aw-input--code {
|
||
font: var(--aw-text-code-sm);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.aw-textarea {
|
||
resize: vertical;
|
||
min-height: 80px;
|
||
}
|
||
|
||
/* =========================================================================
|
||
8. FORM GROUP
|
||
========================================================================= */
|
||
|
||
.aw-form-group {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.aw-form-group__label {
|
||
display: block;
|
||
font: var(--aw-text-label-caps);
|
||
letter-spacing: var(--aw-tracking-label-caps);
|
||
text-transform: uppercase;
|
||
color: var(--aw-on-surface-variant);
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.aw-form-group__label span[style*="aw-error"] {
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.aw-form-group__hint {
|
||
font: var(--aw-text-body-sm);
|
||
color: var(--aw-outline);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* =========================================================================
|
||
9. STATUS / BANNER
|
||
========================================================================= */
|
||
|
||
.aw-banner {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
padding: 12px 16px;
|
||
border-radius: var(--aw-radius-lg);
|
||
font: var(--aw-text-body-sm);
|
||
}
|
||
|
||
.aw-banner--info {
|
||
background: rgba(0, 98, 149, 0.08);
|
||
border: 1px solid rgba(0, 98, 149, 0.15);
|
||
color: var(--aw-on-surface);
|
||
}
|
||
|
||
.aw-banner--success {
|
||
background: rgba(0, 81, 18, 0.08);
|
||
border: 1px solid rgba(0, 81, 18, 0.15);
|
||
color: var(--aw-on-surface);
|
||
}
|
||
|
||
.aw-banner--warning {
|
||
background: rgba(255, 193, 7, 0.1);
|
||
border: 1px solid rgba(255, 193, 7, 0.2);
|
||
color: var(--aw-on-surface);
|
||
}
|
||
|
||
.aw-banner--error {
|
||
background: rgba(186, 26, 26, 0.08);
|
||
border: 1px solid rgba(186, 26, 26, 0.15);
|
||
color: var(--aw-on-surface);
|
||
}
|
||
|
||
/* =========================================================================
|
||
10. PROGRESS BAR
|
||
========================================================================= */
|
||
|
||
.aw-progress {
|
||
width: 100%;
|
||
height: 8px;
|
||
background: var(--aw-surface-container);
|
||
border-radius: var(--aw-radius-full);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.aw-progress__fill {
|
||
height: 100%;
|
||
background: var(--aw-primary);
|
||
border-radius: var(--aw-radius-full);
|
||
transition: width var(--aw-transition-normal);
|
||
}
|
||
|
||
.aw-progress__fill--success {
|
||
background: var(--aw-tertiary-container);
|
||
}
|
||
|
||
.aw-progress__fill--error {
|
||
background: var(--aw-error);
|
||
}
|
||
|
||
/* =========================================================================
|
||
11. BADGE / TAG
|
||
========================================================================= */
|
||
|
||
.aw-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font: 600 12px/16px var(--aw-font-sans);
|
||
padding: 2px 8px;
|
||
border-radius: var(--aw-radius-full);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.aw-badge--primary {
|
||
background: var(--aw-primary-fixed);
|
||
color: var(--aw-on-primary-fixed);
|
||
}
|
||
|
||
.aw-badge--success {
|
||
background: var(--aw-tertiary-fixed);
|
||
color: var(--aw-on-tertiary-fixed);
|
||
}
|
||
|
||
.aw-badge--error {
|
||
background: var(--aw-error-container);
|
||
color: var(--aw-on-error-container);
|
||
}
|
||
|
||
.aw-badge--neutral {
|
||
background: var(--aw-secondary-fixed);
|
||
color: var(--aw-on-secondary-fixed);
|
||
}
|
||
|
||
/* =========================================================================
|
||
12. TABLE
|
||
========================================================================= */
|
||
|
||
.aw-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font: var(--aw-text-body-sm);
|
||
}
|
||
|
||
.aw-table th {
|
||
font: var(--aw-text-label-caps);
|
||
letter-spacing: var(--aw-tracking-label-caps);
|
||
text-transform: uppercase;
|
||
text-align: left;
|
||
color: var(--aw-on-surface-variant);
|
||
padding: 8px 12px;
|
||
border-bottom: 2px solid var(--aw-outline-subtle);
|
||
}
|
||
|
||
.aw-table td {
|
||
padding: 10px 12px;
|
||
border-bottom: 1px solid var(--aw-outline-subtle);
|
||
color: var(--aw-on-surface);
|
||
}
|
||
|
||
.aw-table tbody tr:nth-child(even) {
|
||
background: var(--aw-surface-container-low);
|
||
}
|
||
|
||
.aw-table tbody tr:hover {
|
||
background: var(--aw-surface-container);
|
||
}
|
||
|
||
/* =========================================================================
|
||
13. SIDEBAR NAV (for admin settings)
|
||
========================================================================= */
|
||
|
||
.aw-nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
font: var(--aw-text-body-md);
|
||
color: var(--aw-on-surface-variant);
|
||
border: none;
|
||
background: transparent;
|
||
border-radius: var(--aw-radius-md);
|
||
cursor: pointer;
|
||
text-align: left;
|
||
transition: all var(--aw-transition-fast);
|
||
}
|
||
|
||
.aw-nav-item:hover {
|
||
background: var(--aw-surface-container-low);
|
||
color: var(--aw-on-surface);
|
||
}
|
||
|
||
.aw-nav-item--active {
|
||
background: var(--aw-wp-active-blue);
|
||
color: var(--aw-on-primary);
|
||
}
|
||
|
||
.aw-nav-item--active:hover {
|
||
background: var(--aw-wp-active-blue);
|
||
color: var(--aw-on-primary);
|
||
}
|
||
|
||
/* =========================================================================
|
||
14. TOGGLE SWITCH
|
||
========================================================================= */
|
||
|
||
.aw-toggle {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 40px;
|
||
height: 22px;
|
||
}
|
||
|
||
.aw-toggle input {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.aw-toggle__track {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
inset: 0;
|
||
background: var(--aw-outline-variant);
|
||
border-radius: var(--aw-radius-full);
|
||
transition: background var(--aw-transition-fast);
|
||
}
|
||
|
||
.aw-toggle__track::after {
|
||
content: "";
|
||
position: absolute;
|
||
width: 16px;
|
||
height: 16px;
|
||
left: 3px;
|
||
top: 3px;
|
||
background: var(--aw-surface-container-lowest);
|
||
border-radius: var(--aw-radius-full);
|
||
transition: transform var(--aw-transition-fast);
|
||
}
|
||
|
||
.aw-toggle input:checked + .aw-toggle__track {
|
||
background: var(--aw-primary);
|
||
}
|
||
|
||
.aw-toggle input:checked + .aw-toggle__track::after {
|
||
transform: translateX(18px);
|
||
}
|
||
|
||
.aw-toggle input:focus-visible + .aw-toggle__track {
|
||
outline: 2px solid var(--aw-primary);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
/* =========================================================================
|
||
15. DIVIDER
|
||
========================================================================= */
|
||
|
||
.aw-divider {
|
||
border: none;
|
||
border-top: 1px solid var(--aw-outline-subtle);
|
||
margin: 0;
|
||
}
|
||
|
||
.aw-divider--strong {
|
||
border-top-color: var(--aw-outline-variant);
|
||
}
|
||
|
||
/* =========================================================================
|
||
16. SKELETON / LOADING
|
||
========================================================================= */
|
||
|
||
.aw-skeleton {
|
||
background: linear-gradient(
|
||
90deg,
|
||
var(--aw-surface-container) 25%,
|
||
var(--aw-surface-container-low) 50%,
|
||
var(--aw-surface-container) 75%
|
||
);
|
||
background-size: 200% 100%;
|
||
animation: aw-shimmer 1.5s ease-in-out infinite;
|
||
border-radius: var(--aw-radius);
|
||
}
|
||
|
||
@keyframes aw-shimmer {
|
||
0% {
|
||
background-position: 200% 0;
|
||
}
|
||
100% {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
|
||
/* =========================================================================
|
||
17. LAYOUT PRIMITIVES
|
||
========================================================================= */
|
||
|
||
.aw-app-shell {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
background: var(--aw-surface);
|
||
}
|
||
|
||
.aw-app-shell__sidebar {
|
||
width: var(--aw-space-sidebar);
|
||
flex-shrink: 0;
|
||
background: var(--aw-wp-dark-sidebar);
|
||
color: var(--aw-inverse-on-surface);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.aw-app-shell__content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
}
|
||
|
||
.aw-content-canvas {
|
||
max-width: var(--aw-space-max-content);
|
||
padding: var(--aw-space-page);
|
||
width: 100%;
|
||
}
|
||
|
||
/* Stack / flex utilities */
|
||
.aw-stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--aw-space-stack);
|
||
}
|
||
|
||
.aw-section-gap {
|
||
margin-bottom: var(--aw-space-section);
|
||
}
|
||
|
||
/* =========================================================================
|
||
18. FOOTER ACTION BAR
|
||
========================================================================= */
|
||
|
||
.aw-footer-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 32px;
|
||
background: var(--aw-surface-container-low);
|
||
border-top: 1px solid var(--aw-outline-subtle);
|
||
}
|
||
|
||
.aw-footer-bar--sticky {
|
||
position: sticky;
|
||
bottom: 0;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* =========================================================================
|
||
19. TAB BAR (horizontal, for Gutenberg sidebar)
|
||
========================================================================= */
|
||
|
||
.aw-tab-bar {
|
||
display: flex;
|
||
border-bottom: 1px solid var(--aw-outline-subtle);
|
||
background: var(--aw-surface-container-lowest);
|
||
}
|
||
|
||
.aw-tab-bar__item {
|
||
flex: 1;
|
||
padding: 10px 12px;
|
||
font: 600 13px/18px var(--aw-font-sans);
|
||
color: var(--aw-on-surface-variant);
|
||
background: transparent;
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
cursor: pointer;
|
||
transition: all var(--aw-transition-fast);
|
||
text-align: center;
|
||
}
|
||
|
||
.aw-tab-bar__item:hover {
|
||
color: var(--aw-on-surface);
|
||
background: var(--aw-surface-container-low);
|
||
}
|
||
|
||
.aw-tab-bar__item--active {
|
||
color: var(--aw-primary);
|
||
border-bottom-color: var(--aw-primary);
|
||
}
|
||
|
||
/* =========================================================================
|
||
20. DARK MODE OVERRIDE (future — scaffold only)
|
||
========================================================================= */
|
||
|
||
[data-aw-theme="dark"] {
|
||
--aw-surface: #1a2332;
|
||
--aw-surface-dim: #111827;
|
||
--aw-surface-bright: #243447;
|
||
--aw-surface-container-lowest: #0f172a;
|
||
--aw-surface-container-low: #1e293b;
|
||
--aw-surface-container: #243447;
|
||
--aw-surface-container-high: #2d3e52;
|
||
--aw-surface-container-highest: #374757;
|
||
--aw-on-surface: #e8eaed;
|
||
--aw-on-surface-variant: #b8bcc4;
|
||
--aw-outline: #5a6a7e;
|
||
--aw-outline-variant: #3a4a5e;
|
||
--aw-outline-subtle: #2d3e52;
|
||
}
|