@nuxt-customer-portal/saas-configuration 0.3.0

package/app/assets/css/themes/brutal.css

@@ -0,0 +1,453 @@
+/* Hallmark · genre: editorial · macrostructure: existing application structures · theme: Brutal
+ * states: default · hover · focus · active · disabled · loading · error · success
+ * contrast: pass (40–41) · nav: N7 · footer: Ft2 · slop: pass (42–45)
+ * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · icons: pass (30)
+ * responsive: pass (49) · mobile: pass (34, 49, 50–57)
+ */
+
+html[data-portal-theme='brutal'] {
+  --ui-primary: var(--color-accent);
+  --ui-secondary: var(--color-secondary-600);
+  --ui-success: var(--color-success-600);
+  --ui-warning: var(--color-warning-600);
+  --ui-error: var(--color-error-600);
+  --ui-info: var(--color-info-600);
+
+  --ui-text-dimmed: var(--color-muted);
+  --ui-text-muted: var(--color-muted);
+  --ui-text-toned: var(--color-ink-2);
+  --ui-text: var(--color-ink);
+  --ui-text-highlighted: var(--color-ink);
+  --ui-text-inverted: var(--color-accent-ink);
+
+  --ui-bg: var(--color-paper);
+  --ui-bg-muted: var(--color-paper-2);
+  --ui-bg-elevated: var(--color-paper-2);
+  --ui-bg-accented: var(--color-paper-3);
+  --ui-bg-inverted: var(--color-ink);
+
+  --ui-border: var(--color-rule-muted);
+  --ui-border-muted: var(--color-rule-muted);
+  --ui-border-accented: var(--color-rule);
+  --ui-border-inverted: var(--color-ink);
+
+  --ui-radius: var(--radius-flat);
+  --ui-header-height: 5rem;
+  --ui-shadow-sm: none;
+  --ui-shadow: none;
+  --ui-shadow-md: var(--shadow-hard-small);
+  --ui-shadow-lg: var(--shadow-hard);
+  --ui-shadow-xl: var(--shadow-hard);
+
+  --radius-xs: var(--radius-flat);
+  --radius-sm: var(--radius-flat);
+  --radius-md: var(--radius-flat);
+  --radius-lg: var(--radius-raised);
+  --radius-xl: var(--radius-raised);
+  --radius-2xl: var(--radius-raised);
+  --radius-3xl: var(--radius-raised);
+  --shadow-sm: none;
+  --shadow-md: var(--shadow-hard-small);
+  --shadow-lg: var(--shadow-hard);
+  --shadow-xl: var(--shadow-hard);
+
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-variant-numeric: tabular-nums;
+}
+
+html.dark[data-portal-theme='brutal'] {
+  --ui-primary: var(--color-accent);
+  --ui-secondary: var(--color-secondary-400);
+  --ui-success: var(--color-success-400);
+  --ui-warning: var(--color-warning-400);
+  --ui-error: var(--color-error-400);
+  --ui-info: var(--color-info-400);
+}
+
+html[data-portal-theme='brutal'] body {
+  overflow-x: clip;
+  background: var(--color-paper);
+  background-image: none;
+  color: var(--color-ink);
+}
+
+html[data-portal-theme='brutal'] :where(h1, h2, h3, .portal-wordmark) {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--color-ink);
+  font-family: var(--font-display);
+  font-style: normal;
+  font-weight: 800;
+  letter-spacing: -0.025em;
+}
+
+html[data-portal-theme='brutal'] :where(button, a, [role='button'], [role='tab']) {
+  text-decoration-thickness: var(--rule-heavy);
+  text-underline-offset: 0.2em;
+}
+
+html[data-portal-theme='brutal'] :where(button, a, input, textarea, select, [tabindex]):focus-visible {
+  outline: 3px solid var(--color-focus);
+  outline-offset: 2px;
+  transition: none;
+}
+
+html[data-portal-theme='brutal'] :where([class*='shadow']) {
+  box-shadow: none;
+}
+
+html[data-portal-theme='brutal'] :where([class*='card'], [data-variant='subtle'], [data-variant='outline']) {
+  border-color: var(--color-rule);
+  border-radius: var(--radius-flat);
+  box-shadow: none;
+  transition:
+    border-color var(--dur-short) var(--ease-out),
+    transform var(--dur-micro) var(--ease-out);
+}
+
+html[data-portal-theme='brutal'] :where([class*='card']):hover {
+  border-color: var(--color-accent);
+  box-shadow: none;
+}
+
+html[data-portal-theme='brutal'] :where([class*='bg-gray-50'], [class*='bg-slate-50'], [class*='dark:bg-gray-900']) {
+  background-color: var(--color-paper-2) !important;
+}
+
+html[data-portal-theme='brutal'] :where([class*='border-gray-200'], [class*='border-slate-200']) {
+  border-color: var(--color-rule-muted) !important;
+}
+
+html[data-portal-theme='brutal']
+  :where([class*='text-gray-600'], [class*='text-slate-600'], [class*='dark:text-gray-400']) {
+  color: var(--color-muted) !important;
+}
+
+html[data-portal-theme='brutal']
+  :where([class*='text-gray-900'], [class*='text-slate-900'], [class*='dark:text-white']) {
+  color: var(--color-ink) !important;
+}
+
+html[data-portal-theme='brutal'] :where(button.bg-primary, .bg-blue-600, .bg-primary-600) {
+  box-shadow: var(--shadow-hard-small);
+  transition:
+    background-color var(--dur-short) var(--ease-out),
+    color var(--dur-short) var(--ease-out),
+    transform var(--dur-micro) var(--ease-out);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html[data-portal-theme='brutal'] :where(button.bg-primary, .bg-blue-600, .bg-primary-600):hover {
+    box-shadow: var(--shadow-hard-small);
+    transform: translate(-1px, -1px);
+  }
+}
+
+html[data-portal-theme='brutal'] :where(button.bg-primary, .bg-blue-600, .bg-primary-600):active {
+  box-shadow: none;
+  transform: translate(1px, 1px);
+}
+
+html[data-portal-theme='brutal'] .brutal-button {
+  min-height: 2.75rem;
+  border: var(--rule-hairline) solid currentColor;
+  border-radius: var(--radius-flat);
+  box-shadow: var(--shadow-hard-small);
+  font-weight: 700;
+  letter-spacing: 0.035em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  transition:
+    background-color var(--dur-short) var(--ease-out),
+    color var(--dur-short) var(--ease-out),
+    transform var(--dur-micro) var(--ease-out);
+}
+
+html[data-portal-theme='brutal'] .brutal-button:active {
+  box-shadow: none;
+  transform: translate(1px, 1px);
+}
+
+html[data-portal-theme='brutal'] .brutal-button:disabled,
+html[data-portal-theme='brutal'] .brutal-button[aria-disabled='true'] {
+  box-shadow: none;
+  cursor: not-allowed;
+  opacity: 0.55;
+  transform: none;
+}
+
+html[data-portal-theme='brutal'] .brutal-input {
+  min-height: 2.75rem;
+  border: var(--rule-hairline) solid var(--color-rule);
+  border-radius: var(--radius-flat);
+  background: var(--color-paper);
+  outline: 2px solid transparent;
+  outline-offset: 1px;
+  transition:
+    background-color var(--dur-short) var(--ease-out),
+    border-color var(--dur-short) var(--ease-out);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html[data-portal-theme='brutal'] .brutal-input:hover {
+    background: var(--color-paper-2);
+  }
+}
+
+html[data-portal-theme='brutal'] .brutal-input:focus-visible,
+html[data-portal-theme='brutal'] .brutal-input[data-state='open'] {
+  border-color: var(--color-rule);
+  outline-color: var(--color-focus);
+}
+
+html[data-portal-theme='brutal'] .brutal-input:disabled,
+html[data-portal-theme='brutal'] .brutal-input[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+html[data-portal-theme='brutal'] .brutal-input[aria-invalid='true'] {
+  border-color: var(--ui-error);
+}
+
+html[data-portal-theme='brutal'] .brutal-card,
+html[data-portal-theme='brutal'] .brutal-auth-form,
+html[data-portal-theme='brutal'] .brutal-dashboard-panel {
+  border: var(--rule-heavy) solid var(--color-rule);
+  border-radius: var(--radius-flat);
+  background: var(--color-paper);
+  box-shadow: none;
+}
+
+html[data-portal-theme='brutal'] :where(.brutal-card-header, .brutal-card-footer, .brutal-dashboard-navbar) {
+  border-color: var(--color-rule);
+  border-width: var(--rule-hairline);
+}
+
+html[data-portal-theme='brutal'] .brutal-badge {
+  border: var(--rule-hairline) solid currentColor;
+  border-radius: var(--radius-flat);
+  font-weight: 700;
+  letter-spacing: 0.035em;
+  text-transform: uppercase;
+}
+
+html[data-portal-theme='brutal'] .brutal-skeleton {
+  border: var(--rule-hairline) solid var(--color-rule-muted);
+  border-radius: var(--radius-flat);
+  background: var(--color-paper-3);
+}
+
+html[data-portal-theme='brutal'] .brutal-alert {
+  border: var(--rule-heavy) solid currentColor;
+  border-radius: var(--radius-flat);
+}
+
+html[data-portal-theme='brutal'] .brutal-overlay {
+  background: var(--color-overlay) !important;
+  backdrop-filter: none !important;
+}
+
+html[data-portal-theme='brutal'] .brutal-overlay-surface,
+html[data-portal-theme='brutal'] .brutal-toast,
+html[data-portal-theme='brutal'] .brutal-tooltip {
+  border: var(--rule-heavy) solid var(--color-rule);
+  border-radius: var(--radius-flat);
+  background: var(--color-paper-2);
+  color: var(--color-ink);
+  box-shadow: var(--shadow-hard);
+}
+
+html[data-portal-theme='brutal'] .brutal-menu-item {
+  min-height: 2.75rem;
+  border-radius: 0;
+  font-weight: 700;
+}
+
+html[data-portal-theme='brutal'] .brutal-menu-item[data-highlighted]:not([data-disabled]) {
+  background: var(--color-ink);
+  color: var(--color-paper);
+}
+
+html[data-portal-theme='brutal'] .brutal-navigation-link {
+  border-radius: 0;
+  font-weight: 700;
+}
+
+html[data-portal-theme='brutal'] .brutal-dashboard-sidebar {
+  border-inline-end: var(--rule-heavy) solid var(--color-rule);
+  border-radius: 0;
+  background: var(--color-paper-2);
+}
+
+html[data-portal-theme='brutal'] :where(.brutal-table, .brutal-table-head, .brutal-table-row, .brutal-table-heading) {
+  border-color: var(--color-rule);
+}
+
+html[data-portal-theme='brutal'] .brutal-table-head {
+  background: var(--color-ink);
+  color: var(--color-paper);
+}
+
+html[data-portal-theme='brutal'] .brutal-table-heading {
+  color: inherit;
+  font-family: var(--font-display);
+  font-weight: 800;
+  letter-spacing: 0.035em;
+  text-transform: uppercase;
+}
+
+html[data-portal-theme='brutal'] .brutal-table-row {
+  border-block-end: var(--rule-hairline) solid var(--color-rule-muted);
+}
+
+html[data-portal-theme='brutal'] .brutal-tabs-list {
+  border-block-end: var(--rule-heavy) solid var(--color-rule);
+  border-radius: 0;
+  background: transparent;
+}
+
+html[data-portal-theme='brutal'] .brutal-tabs-trigger {
+  min-height: 2.75rem;
+  border-radius: 0;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+html[data-portal-theme='brutal'] .brutal-tabs-indicator {
+  height: var(--rule-heavy);
+  border-radius: 0;
+  background: var(--color-accent);
+  box-shadow: none;
+}
+
+html[data-portal-theme='brutal'] .portal-header {
+  border-block-end: var(--rule-heavy) solid var(--color-rule);
+  background: var(--color-paper);
+  backdrop-filter: none;
+  box-shadow: none;
+}
+
+html[data-portal-theme='brutal'] .portal-header nav a {
+  border-radius: 0;
+  font-family: var(--font-display);
+  font-weight: 800;
+  letter-spacing: 0.065em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+html[data-portal-theme='brutal'] .portal-header nav a[aria-current='page'],
+html[data-portal-theme='brutal'] .portal-header nav a.router-link-active {
+  text-decoration: underline;
+  text-decoration-color: var(--color-accent);
+}
+
+html[data-portal-theme='brutal'] .portal-header .-me-1\.5 {
+  margin-inline-end: 0;
+}
+
+html[data-portal-theme='brutal'] .portal-wordmark {
+  font-size: 1.5rem;
+  line-height: 1.25;
+  letter-spacing: -0.035em;
+  text-transform: uppercase;
+}
+
+html[data-portal-theme='brutal'] .portal-footer {
+  border-block-start: var(--rule-heavy) solid var(--color-rule);
+  background: var(--color-paper);
+  font-size: var(--text-sm);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+html[data-portal-theme='brutal'] :where(.portal-layout, .dashboard-layout, .auth-shell) {
+  background: var(--color-paper);
+  color: var(--color-ink);
+}
+
+html[data-portal-theme='brutal'] .auth-shell [class*='rounded-full'] {
+  border-radius: var(--radius-flat);
+}
+
+html[data-portal-theme='brutal'] .public-stars {
+  display: none;
+}
+
+html[data-portal-theme='brutal'] .public-hero-background {
+  top: 0;
+  height: 0.75rem;
+  border-block: var(--rule-heavy) solid var(--color-rule);
+  color: var(--color-accent);
+  opacity: 1;
+}
+
+html[data-portal-theme='brutal'] .public-hero-background svg {
+  display: none;
+}
+
+html[data-portal-theme='brutal'] .public-hero-background::after {
+  display: block;
+  width: min(12rem, 35vw);
+  height: 100%;
+  background: var(--color-accent);
+  content: '';
+}
+
+html[data-portal-theme='brutal'] .public-home-hero-image {
+  border: var(--rule-heavy) solid var(--color-rule);
+  border-radius: var(--radius-flat);
+  box-shadow: var(--shadow-hard);
+}
+
+html[data-portal-theme='brutal'] .main-fade-enter-active::before {
+  background: none;
+}
+
+html[data-portal-theme='brutal']:not(.dark)
+  :where(
+    .fixed.inset-0.z-50:not([role='dialog']),
+    [data-headlessui-state].fixed.inset-0:not([role='dialog']),
+    [role='dialog'] ~ .fixed.inset-0
+  ) {
+  background: var(--color-overlay) !important;
+  backdrop-filter: none !important;
+}
+
+@media (pointer: coarse) {
+  html[data-portal-theme='brutal'] :where(button, a, input, select, textarea, [role='button'], [role='tab']) {
+    min-height: 2.75rem;
+  }
+
+  html[data-portal-theme='brutal'] .portal-header a {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+@media (max-width: 48rem) {
+  html[data-portal-theme='brutal'] .portal-header :where(a, button) {
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+  }
+
+  html[data-portal-theme='brutal'] .portal-header a {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-portal-theme='brutal'] *,
+  html[data-portal-theme='brutal'] *::before,
+  html[data-portal-theme='brutal'] *::after {
+    animation-duration: 150ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 150ms !important;
+    transition-property: opacity, background-color, color, border-color !important;
+  }
+}

package/app/assets/css/tokens.css

@@ -0,0 +1,136 @@
+/* Hallmark · genre: editorial · macrostructure: existing application structures · theme: Brutal
+ * tone: austere industrial · anchor hue: signal red · enrichment: none · nav: N7-derived · footer: Ft2
+ * pre-emit critique: P5 H5 E5 S5 R5 V3 · contrast: pass (40–41) · nav: N7 · footer: Ft2
+ * slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
+ * icons: pass (30) · mobile: pass (34, 49, 50–57)
+ */
+
+html[data-portal-theme='brutal'] {
+  --font-display: 'Bricolage Grotesque', ui-sans-serif, sans-serif;
+  --font-body: 'Geist', ui-sans-serif, sans-serif;
+  --font-sans: var(--font-body);
+
+  --color-paper: oklch(96.5% 0.015 85);
+  --color-paper-2: oklch(92.5% 0.018 85);
+  --color-paper-3: oklch(87% 0.018 80);
+  --color-ink: oklch(18% 0.015 25);
+  --color-ink-2: oklch(27% 0.015 28);
+  --color-muted: oklch(45% 0.018 50);
+  --color-rule: oklch(22% 0.015 25);
+  --color-rule-muted: oklch(62% 0.015 50);
+  --color-accent: oklch(48% 0.22 28);
+  --color-accent-ink: var(--color-paper);
+  --color-focus: oklch(48% 0.22 28);
+  --color-overlay: oklch(18% 0.015 25 / 0.72);
+
+  --color-primary-50: oklch(97% 0.02 28);
+  --color-primary-100: oklch(92% 0.04 28);
+  --color-primary-200: oklch(84% 0.08 28);
+  --color-primary-300: oklch(75% 0.13 28);
+  --color-primary-400: oklch(65% 0.18 28);
+  --color-primary-500: oklch(56% 0.22 28);
+  --color-primary-600: var(--color-accent);
+  --color-primary-700: oklch(41% 0.19 28);
+  --color-primary-800: oklch(34% 0.15 28);
+  --color-primary-900: oklch(28% 0.11 28);
+  --color-primary-950: oklch(20% 0.07 28);
+
+  --color-secondary-50: oklch(97% 0.018 88);
+  --color-secondary-100: oklch(93% 0.035 88);
+  --color-secondary-200: oklch(87% 0.07 88);
+  --color-secondary-300: oklch(81% 0.11 88);
+  --color-secondary-400: oklch(74% 0.14 88);
+  --color-secondary-500: oklch(67% 0.14 88);
+  --color-secondary-600: oklch(58% 0.12 88);
+  --color-secondary-700: oklch(49% 0.1 88);
+  --color-secondary-800: oklch(40% 0.08 88);
+  --color-secondary-900: oklch(31% 0.06 88);
+  --color-secondary-950: oklch(22% 0.04 88);
+
+  --color-neutral-50: var(--color-paper);
+  --color-neutral-100: var(--color-paper-2);
+  --color-neutral-200: oklch(84% 0.017 75);
+  --color-neutral-300: oklch(72% 0.016 65);
+  --color-neutral-400: var(--color-rule-muted);
+  --color-neutral-500: oklch(52% 0.014 45);
+  --color-neutral-600: oklch(42% 0.014 35);
+  --color-neutral-700: oklch(33% 0.014 30);
+  --color-neutral-800: var(--color-ink-2);
+  --color-neutral-900: var(--color-ink);
+  --color-neutral-950: oklch(14.5% 0.014 25);
+
+  --color-success-400: oklch(70% 0.15 145);
+  --color-success-600: oklch(48% 0.14 145);
+  --color-warning-400: oklch(78% 0.16 78);
+  --color-warning-600: oklch(55% 0.15 62);
+  --color-error-400: oklch(67% 0.19 20);
+  --color-error-600: oklch(44% 0.19 20);
+  --color-info-400: oklch(72% 0.13 235);
+  --color-info-600: oklch(47% 0.13 235);
+
+  --space-3xs: 0.125rem;
+  --space-2xs: 0.25rem;
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2.5rem;
+  --space-2xl: 4rem;
+  --space-3xl: 6rem;
+  --space-4xl: 9rem;
+
+  --text-xs: 0.64rem;
+  --text-sm: 0.8rem;
+  --text-base: 1rem;
+  --text-md: 1.25rem;
+  --text-lg: 1.5625rem;
+  --text-xl: 1.9531rem;
+  --text-2xl: 2.4414rem;
+  --text-3xl: 3.0518rem;
+  --text-4xl: 3.8147rem;
+  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
+
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --dur-micro: 90ms;
+  --dur-short: 165ms;
+  --dur-long: 315ms;
+
+  --rule-hairline: 1px;
+  --rule-heavy: 2px;
+  --radius-flat: 0.125rem;
+  --radius-raised: 0.25rem;
+  --shadow-hard: 0.25rem 0.25rem 0 var(--color-rule);
+  --shadow-hard-small: 0.125rem 0.125rem 0 var(--color-rule);
+
+  --z-base: 1;
+  --z-raised: 10;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-modal: 400;
+  --z-toast: 500;
+  --z-tooltip: 600;
+
+  --portal-logo-surface: var(--color-ink);
+  --portal-logo-ink: var(--color-paper);
+}
+
+html.dark[data-portal-theme='brutal'] {
+  --color-paper: oklch(14.5% 0.014 25);
+  --color-paper-2: oklch(19.5% 0.016 25);
+  --color-paper-3: oklch(24% 0.016 28);
+  --color-ink: oklch(94% 0.016 85);
+  --color-ink-2: oklch(86% 0.016 80);
+  --color-muted: oklch(72% 0.014 70);
+  --color-rule: oklch(78% 0.015 80);
+  --color-rule-muted: oklch(55% 0.015 70);
+  --color-accent: oklch(72% 0.16 28);
+  --color-accent-ink: var(--color-paper);
+  --color-focus: oklch(72% 0.16 28);
+  --color-overlay: oklch(8% 0.012 25 / 0.78);
+  --shadow-hard: 0.25rem 0.25rem 0 var(--color-rule);
+  --shadow-hard-small: 0.125rem 0.125rem 0 var(--color-rule);
+  --portal-logo-surface: var(--color-ink);
+  --portal-logo-ink: var(--color-paper);
+}