@nukleas/cyberdesign 0.1.0

package/src/css/a11y.css

@@ -0,0 +1,67 @@
+/* ── Accessibility layer (opt-in) ──────────────────────────────────────────
+   Add the class `cd-a11y` to any container you want bumped for readability.
+   It overrides three things, and ONLY inside `.cd-a11y` — defaults are untouched:
+     1. Type scale  — captions/body cross the 12px floor (was 10–12px).
+     2. Muted text  — low-contrast greys lifted toward AAA (defaults already AA).
+     3. Body glow   — text-shadow on small/running text dampened, NOT removed.
+   The art stays: neon hues, uppercase, pixel corners, and the big glowing
+   stat/gauge/HUD readouts are left alone. */
+
+.cd-a11y {
+  /* 1 ── Type scale — same ratios, shifted up ~+2px so nothing sits below 12px */
+  --cd-text-xs:   0.75rem;    /* 10px → 12px */
+  --cd-text-sm:   0.8125rem;  /* 11px → 13px */
+  --cd-text-base: 0.875rem;   /* 12px → 14px */
+  --cd-text-md:   0.9375rem;  /* 13px → 15px */
+  --cd-text-lg:   1rem;       /* 14px → 16px */
+
+  /* 2 ── Muted text lifted toward AAA on --cd-bg, keeping the warm/cool tone */
+  --cd-text-muted:     #b3aaa0;
+  --cd-text-muted-alt: #9aa6bd;
+  --cd-text-dim:       #968d84;
+  --cd-text-secondary: #b6c3dd;
+}
+
+/* 3 ── Dampen glow on running / small text (keep it, just stop the smear).
+        currentColor keeps each glow on its own hue. */
+.cd-a11y .cd-text-glow,
+.cd-a11y .text-glow-orange,
+.cd-a11y .text-glow-amber,
+.cd-a11y .text-glow-magenta,
+.cd-a11y .text-glow-green,
+.cd-a11y .text-glow-red,
+.cd-a11y .text-glow-cyan,
+.cd-a11y .text-glow-blue {
+  text-shadow: 0 0 3px color-mix(in srgb, currentColor 32%, transparent);
+}
+
+/* Interactive running text: tabs, breadcrumbs, terminal lines — soften only */
+.cd-a11y .cd-tabs__trigger:focus-visible,
+.cd-a11y .cd-tabs__trigger.is-active,
+.cd-a11y .cd-breadcrumb__link:hover,
+.cd-a11y .cd-breadcrumb__link:focus-visible {
+  text-shadow: 0 0 3px var(--cd-accent-glow);
+}
+.cd-a11y .cd-terminal__line--error {
+  text-shadow: 0 0 2px rgba(255, 69, 108, 0.4);
+}
+
+/* Note: .cd-stat__value, gauge centre readouts, HUD values and the glitch
+   logo are intentionally left glowing — they're display type, not content. */
+
+/* Stronger, always-on focus ring — an offset halo so it reads against busy
+   neon borders without relying on colour alone. */
+.cd-a11y :focus-visible {
+  outline: 2px solid var(--cd-accent);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cd-accent) 22%, transparent);
+}
+
+/* Respect users who ask for less motion: kill the glitch/scan loops inside
+   the a11y scope as a belt-and-braces over the components' own guards. */
+@media (prefers-reduced-motion: reduce) {
+  .cd-a11y .cd-glitch-text,
+  .cd-a11y [class*="cd-logo-glitch"] {
+    animation: none !important;
+  }
+}

package/src/css/animations.css

@@ -0,0 +1,111 @@
+/* ── Keyframes ──────────────────────────────────────────── */
+
+@keyframes cd-pulse-glow {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.5; }
+}
+
+@keyframes cd-flicker {
+  0%, 94%, 96%, 98%, 100% { opacity: 1; }
+  95%, 97%                 { opacity: 0.1; }
+}
+
+@keyframes cd-cursor-blink {
+  0%, 49% { opacity: 1; }
+  50%, 100% { opacity: 0; }
+}
+
+@keyframes cd-logo-glitch {
+  0%, 90%, 100% {
+    text-shadow:
+      2px 0 0 color-mix(in srgb, var(--cd-accent-secondary) 55%, transparent),
+      0 0 8px color-mix(in srgb, var(--cd-accent) 40%, transparent);
+    transform: none;
+  }
+  92% {
+    text-shadow:
+      -3px 0 0 color-mix(in srgb, var(--cd-accent-secondary) 80%, transparent),
+      3px 0 0 color-mix(in srgb, var(--cd-accent) 80%, transparent);
+    transform: translateX(2px);
+  }
+  94% {
+    text-shadow:
+      3px 0 0 color-mix(in srgb, var(--cd-accent-secondary) 80%, transparent),
+      -2px 0 0 color-mix(in srgb, var(--cd-accent) 80%, transparent);
+    transform: translateX(-1px);
+  }
+}
+
+@keyframes cd-neon-pulse {
+  0%, 100% {
+    box-shadow:
+      0 0 6px color-mix(in srgb, var(--cd-accent) 30%, transparent),
+      0 0 12px color-mix(in srgb, var(--cd-accent) 15%, transparent);
+  }
+  50% {
+    box-shadow:
+      0 0 12px color-mix(in srgb, var(--cd-accent) 60%, transparent),
+      0 0 24px color-mix(in srgb, var(--cd-accent) 30%, transparent);
+  }
+}
+
+@keyframes cd-header-sweep {
+  0%   { transform: translateX(-100%); opacity: 0; }
+  10%  { opacity: 1; }
+  90%  { opacity: 1; }
+  100% { transform: translateX(200%); opacity: 0; }
+}
+
+@keyframes cd-skel-shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes cd-crt-boot {
+  0%   { filter: brightness(0); }
+  10%  { filter: brightness(3) blur(2px); }
+  30%  { filter: brightness(1.2) blur(0); }
+  100% { filter: brightness(1); }
+}
+
+/* ── Animation classes ──────────────────────────────────── */
+
+.cd-animate-pulse-glow  { animation: cd-pulse-glow    2s   ease-in-out infinite; }
+.cd-animate-flicker     { animation: cd-flicker        3s   ease-in-out infinite; }
+.cd-animate-cursor-blink{ animation: cd-cursor-blink   1.2s step-end    infinite; }
+.cd-animate-logo-glitch { animation: cd-logo-glitch    9s   ease-in-out infinite; }
+.cd-animate-neon-pulse  { animation: cd-neon-pulse     2.2s ease-in-out infinite; }
+.cd-animate-sweep       { animation: cd-header-sweep   10s  ease-in-out infinite; }
+.cd-animate-crt-boot    { animation: cd-crt-boot       0.6s ease-out    both; }
+
+.cd-skel {
+  background: linear-gradient(
+    90deg,
+    var(--cd-bg-panel) 0%,
+    color-mix(in srgb, var(--cd-accent) 6%, var(--cd-bg-panel)) 50%,
+    var(--cd-bg-panel) 100%
+  );
+  background-size: 200% 100%;
+  animation: cd-skel-shimmer 1.5s linear infinite;
+}
+
+/* Backward-compat aliases for dashboard-app class names */
+.animate-pulse-glow { animation: cd-pulse-glow 2s ease-in-out infinite; }
+.animate-flicker    { animation: cd-flicker 3s ease-in-out infinite; }
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .cd-animate-pulse-glow,
+  .cd-animate-flicker,
+  .cd-animate-cursor-blink,
+  .cd-animate-logo-glitch,
+  .cd-animate-neon-pulse,
+  .cd-animate-sweep,
+  .cd-animate-crt-boot,
+  .cd-skel,
+  .animate-pulse-glow,
+  .animate-flicker {
+    animation-duration: 0.001ms;
+    animation-iteration-count: 1;
+  }
+}

package/src/css/base.css

@@ -0,0 +1,34 @@
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('./fonts/JetBrainsMono-Variable.woff2') format('woff2');
+  font-weight: 100 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+:root {
+  font-family: var(--cd-font-mono);
+  background-color: var(--cd-bg);
+  color: var(--cd-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--cd-accent) 24%, transparent);
+  color: var(--cd-text);
+}
+
+/* Focus indicators (high priority accessibility fix)
+   Visible keyboard focus ring using theme accent. Cyber glow aesthetic.
+   Components that use custom focus (e.g. neon box-shadow on inputs) layer
+   on top of this. outline:none removed from focusables so this applies.
+   See also per-component :focus-visible enhancements. */
+:focus-visible {
+  outline: 2px solid var(--cd-accent);
+  outline-offset: 2px;
+}

package/src/css/components/accordion.css

@@ -0,0 +1,148 @@
+/* ── Accordion ────────────────────────────────────────────────────────────── */
+/* Uses native <details>/<summary> for zero-JS open/close semantics.          */
+/* Smooth animation via grid-template-rows trick (modern browsers).           */
+
+.cd-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* ── Item (<details>) ─────────────────────────────────────────────────────── */
+
+.cd-accordion__item {
+  border: 1px solid var(--cd-border-dim);
+  border-bottom: none;
+  font-family: var(--cd-font-mono);
+  overflow: hidden;
+  transition: border-color 0.15s;
+}
+
+.cd-accordion__item:last-child {
+  border-bottom: 1px solid var(--cd-border-dim);
+}
+
+.cd-accordion__item[open] {
+  border-color: color-mix(in srgb, var(--cd-accent) 25%, transparent);
+}
+
+.cd-accordion__item[open]:last-child {
+  border-bottom-color: color-mix(in srgb, var(--cd-accent) 25%, transparent);
+}
+
+/* ── Trigger (<summary>) ──────────────────────────────────────────────────── */
+
+.cd-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 11px 14px;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  font-size: var(--cd-text-sm);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--cd-text-secondary);
+  background: var(--cd-bg-panel);
+  transition: color 0.15s, background 0.15s;
+}
+
+/* Remove default browser disclosure marker */
+.cd-accordion__trigger::-webkit-details-marker { display: none; }
+.cd-accordion__trigger::marker { display: none; }
+
+.cd-accordion__trigger:hover {
+  background: var(--cd-bg-panel-hover);
+  color: var(--cd-text);
+}
+
+.cd-accordion__trigger:focus-visible {
+  color: var(--cd-accent);
+  background: color-mix(in srgb, var(--cd-accent) 4%, var(--cd-bg-panel));
+}
+
+.cd-accordion__item[open] > .cd-accordion__trigger {
+  color: var(--cd-accent);
+  background: color-mix(in srgb, var(--cd-accent) 4%, var(--cd-bg-panel));
+}
+
+/* Chevron arrow via ::after */
+.cd-accordion__trigger::after {
+  content: '›';
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--cd-text-dim);
+  flex-shrink: 0;
+  transform: rotate(0deg);
+  transition: transform 0.2s ease, color 0.15s;
+  line-height: 1;
+}
+
+.cd-accordion__item[open] > .cd-accordion__trigger::after {
+  transform: rotate(90deg);
+  color: var(--cd-accent);
+}
+
+/* Optional icon slot before the label */
+.cd-accordion__icon {
+  flex-shrink: 0;
+  font-size: 12px;
+  opacity: 0.6;
+}
+
+.cd-accordion__item[open] > .cd-accordion__trigger .cd-accordion__icon {
+  opacity: 1;
+  color: var(--cd-accent);
+}
+
+/* ── Content — smooth height animation ────────────────────────────────────── */
+
+.cd-accordion__body {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.22s ease;
+}
+
+.cd-accordion__item[open] > .cd-accordion__body {
+  grid-template-rows: 1fr;
+}
+
+.cd-accordion__content {
+  overflow: hidden;
+}
+
+.cd-accordion__content-inner {
+  padding: 12px 14px 14px;
+  font-size: var(--cd-text-base);
+  color: var(--cd-text-secondary);
+  line-height: 1.65;
+  border-top: 1px solid var(--cd-border-dim);
+}
+
+/* ── Flush variant — no outer border, full-width separators ───────────────── */
+
+.cd-accordion--flush .cd-accordion__item {
+  border-left: none;
+  border-right: none;
+}
+
+.cd-accordion--flush .cd-accordion__item:first-child {
+  border-top: none;
+}
+
+/* ── Separated variant — gaps between items ───────────────────────────────── */
+
+.cd-accordion--sep {
+  gap: 4px;
+}
+
+.cd-accordion--sep .cd-accordion__item {
+  border-bottom: 1px solid var(--cd-border-dim);
+}
+
+.cd-accordion--sep .cd-accordion__item[open] {
+  border-color: color-mix(in srgb, var(--cd-accent) 25%, transparent);
+}

package/src/css/components/alert.css

@@ -0,0 +1,116 @@
+/* ── Alert / Banner ──────────────────────────────────────────────────────── */
+
+.cd-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  border: 1px solid;
+  font-family: var(--cd-font-mono);
+  line-height: 1.5;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Left accent bar */
+.cd-alert::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: currentColor;
+  opacity: 0.7;
+}
+
+.cd-alert__icon {
+  flex-shrink: 0;
+  font-size: 14px;
+  line-height: 1;
+  margin-top: 1px;
+}
+
+.cd-alert__content { flex: 1; min-width: 0; }
+
+.cd-alert__title {
+  font-size: var(--cd-text-sm);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  margin-bottom: 3px;
+}
+
+.cd-alert__body {
+  font-size: var(--cd-text-base);
+  opacity: 0.8;
+}
+
+/* Dismiss button */
+.cd-alert__dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  padding: 0;
+  opacity: 0.45;
+  font-family: var(--cd-font-mono);
+  transition: opacity 0.15s;
+}
+
+.cd-alert__dismiss:hover { opacity: 0.9; }
+
+/* ── Color variants ───────────────────────────────────────────────────────── */
+
+.cd-alert--info {
+  background: color-mix(in srgb, var(--cd-blue) 8%, transparent);
+  border-color: color-mix(in srgb, var(--cd-blue) 30%, transparent);
+  color: var(--cd-blue);
+}
+.cd-alert--info .cd-alert__body { color: var(--cd-text-secondary); }
+
+.cd-alert--success {
+  background: color-mix(in srgb, var(--cd-green) 7%, transparent);
+  border-color: color-mix(in srgb, var(--cd-green) 28%, transparent);
+  color: var(--cd-green);
+}
+.cd-alert--success .cd-alert__body { color: var(--cd-text-secondary); }
+
+.cd-alert--warning {
+  background: color-mix(in srgb, var(--cd-amber) 8%, transparent);
+  border-color: color-mix(in srgb, var(--cd-amber) 30%, transparent);
+  color: var(--cd-amber);
+}
+.cd-alert--warning .cd-alert__body { color: var(--cd-text-secondary); }
+
+.cd-alert--error {
+  background: color-mix(in srgb, var(--cd-red) 8%, transparent);
+  border-color: color-mix(in srgb, var(--cd-red) 30%, transparent);
+  color: var(--cd-red);
+}
+.cd-alert--error .cd-alert__body { color: var(--cd-text-secondary); }
+
+/* Accent variant — uses the current theme accent */
+.cd-alert--accent {
+  background: var(--cd-accent-subtle);
+  border-color: var(--cd-border-glow);
+  color: var(--cd-accent);
+}
+.cd-alert--accent .cd-alert__body { color: var(--cd-text-secondary); }
+
+/* ── Size variant ─────────────────────────────────────────────────────────── */
+
+.cd-alert--sm {
+  padding: 8px 12px;
+  gap: 8px;
+}
+
+.cd-alert--sm .cd-alert__title { font-size: var(--cd-text-xs); margin-bottom: 2px; }
+.cd-alert--sm .cd-alert__body  { font-size: var(--cd-text-sm); }
+.cd-alert--sm .cd-alert__icon  { font-size: 12px; }
+
+/* Inline (no left bar, more compact) */
+.cd-alert--inline { border-left-width: 0; }
+.cd-alert--inline::before { display: none; }