@supersoniks/concorde 5.1.0 → 5.1.1

package/src/docs/tailwind/css/base/theme.css

@@ -0,0 +1,96 @@
+/* Concorde theme tokens for the docs (light / dark), switched by <sonic-docs-header> */
+/*
+ * Retro technical-manual look (IBM / Braun): one grotesk, stone paper, black ink,
+ * Braun signal orange reserved for the one action and the hero stage.
+ */
+:root {
+  --sc-headings-font-family: "Schibsted Grotesk", system-ui, sans-serif;
+  --sc-font-family-base: "Schibsted Grotesk", system-ui, sans-serif;
+  --sc-headings-font-weight: 800;
+  --sc-rounded: 0;
+  --sc-border-width: 2px;
+  /* 70s instrument palette: signal orange for the action, racing green and red for the rest */
+  --docs-signal: #ff6b1f;
+  --docs-signal-ink: #1b1a17;
+  --docs-green: #2f6b4f;
+  --docs-green-deep: #24503c;
+  --docs-green-ink: #1f4a36;
+  --docs-red: #d42a2f;
+  --docs-night: #1b1a17;
+  --docs-night-ink: #ece6da;
+}
+/* <sonic-theme> derives radii on its own host: square them there too */
+sonic-theme {
+  --sc-rounded: 0;
+  --sc-btn-rounded: 0;
+  --sc-input-rounded: 0;
+}
+
+/*duotone*/
+/* :root{
+  --sc-base: yellow;
+  --sc-base-content: red;
+  --sc-primary: blue;
+  --sc-primary-content: white;
+} */
+
+[data-concorde-theme="light"] {
+  --sc-base: #e6e0d4;
+  --sc-base-content: #1b1a17;
+  --sc-primary: #1b1a17;
+  --sc-primary-content: #e6e0d4;
+  --sc-base-50: #ddd6c8;
+  --sc-base-100: #d3cbbb;
+  --sc-base-200: #bdb4a2;
+  --sc-base-300: #a59c8a;
+  --sc-base-400: #877f6f;
+  --sc-base-500: #6c6558;
+  --sc-base-600: #524c42;
+  --sc-base-700: #39352e;
+  --sc-base-800: #26231f;
+  --sc-base-900: #1b1a17;
+  --sc-info: #1f5fd1;
+  --sc-info-content: #ffffff;
+  --sc-success: #2f6b4f;
+  --sc-success-content: #ffffff;
+  --sc-warning: #ff6b1f;
+  --sc-warning-content: #1b1a17;
+  --sc-danger: #d42a2f;
+  --sc-danger-content: #ffffff;
+}
+
+[data-concorde-theme="dark"] {
+  --sc-base: #161513;
+  --sc-base-content: #ece6da;
+  --sc-primary: #ece6da;
+  --sc-primary-content: #161513;
+  --sc-base-50: #1e1d1a;
+  --sc-base-100: #272522;
+  --sc-base-200: #38352f;
+  --sc-base-300: #4b4740;
+  --sc-base-400: #69645a;
+  --sc-base-500: #857f74;
+  --sc-base-600: #a8a196;
+  --sc-base-700: #c7c0b4;
+  --sc-base-800: #ddd6ca;
+  --sc-base-900: #ece6da;
+  --sc-info: #5b8ff0;
+  --sc-info-content: #161513;
+  --sc-success: #4f9b74;
+  --sc-success-content: #161513;
+  --sc-warning: #ff7a33;
+  --sc-warning-content: #161513;
+  --sc-danger: #ef4a4f;
+  --sc-danger-content: #161513;
+  --docs-signal: #ff7a33;
+  --docs-green: #4f9b74;
+  --docs-green-deep: #1f3f31;
+  --docs-green-ink: #79c39b;
+  --docs-red: #ef4a4f;
+  --docs-night: #0b0a09;
+}
+[data-concorde-theme="light"],
+[data-concorde-theme="dark"] {
+  --sc-input-bg: var(--sc-base-100);
+  --sc-input-border-color: var(--sc-base-100);
+}

package/src/docs/tailwind/css/base/typography.css

@@ -0,0 +1,4 @@
+/* Body copy: one grotesk everywhere (the page and every component that injects this sheet) */
+p {
+  text-wrap: pretty;
+}

package/src/docs/tailwind/css/docs/boarding-pass.css

@@ -0,0 +1,65 @@
+/* <docs-boarding-pass-demo>, rendered in light DOM (home hero and docs demos) */
+.bp-route {
+  position: relative;
+  height: 2rem;
+  border-bottom: 2px dashed currentColor;
+  opacity: 0.8;
+}
+.bp-fly {
+  position: absolute;
+  /* centred on the 2px dashed border, whatever the icon size */
+  top: calc(100% + 1px);
+  transform: translateY(-50%);
+  left: 0;
+  animation: bp-fly 3.2s cubic-bezier(0.45, 0, 0.25, 1) infinite;
+}
+/* taxi, climb, cruise, descend, land — then loop */
+@keyframes bp-fly {
+  0% {
+    left: 0;
+    translate: 0 0;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  30% {
+    translate: 0 -1rem;
+  }
+  70% {
+    translate: 0 -1rem;
+  }
+  90% {
+    opacity: 1;
+    translate: 0 0;
+  }
+  100% {
+    left: calc(100% - 1.5rem);
+    translate: 0 0;
+    opacity: 0;
+  }
+}
+.bp-pop {
+  animation: bp-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
+}
+@keyframes bp-pop {
+  from {
+    transform: scale(0.85);
+    opacity: 0;
+  }
+}
+/* the ticket's printed barcode: stripes from an SVG mask, filled with the text colour */
+.bp-barcode {
+  background-color: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='1'%3E%3Crect width='2' height='1'/%3E%3Crect x='4' width='1' height='1'/%3E%3C/svg%3E")
+    repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='1'%3E%3Crect width='2' height='1'/%3E%3Crect x='4' width='1' height='1'/%3E%3C/svg%3E")
+    repeat;
+  -webkit-mask-size: 8px 100%;
+  mask-size: 8px 100%;
+}
+
+/* paint the card host with its own surface (same box), so the pass reads as one solid object */
+docs-boarding-pass-demo sonic-card {
+  background: var(--sc-_bg);
+}

package/src/docs/tailwind/css/docs/content.css

@@ -0,0 +1,32 @@
+/* Markdown content: inline code pills, anchors under the sticky header, mobile overflow */
+.prose :where(code):not(:where(pre *)) {
+  box-decoration-break: clone;
+  white-space: nowrap;
+  display: inline-block;
+  padding: 0 0.25rem;
+  font-size: 0.75em;
+  border: none;
+  margin-inline: 2px;
+  font-weight: normal !important;
+  background-color: var(--sc-base-50);
+  -webkit-box-decoration-break: clone;
+}
+
+/* DOCS LAYOUT */
+docs-markdown-renderer :is(h1, h2, h3, h4)[id] {
+  scroll-margin-top: 5.5rem;
+}
+docs-page.prose :where(img) {
+  max-width: 100%;
+}
+/* Wide demos (fixed min-width groups…) scroll instead of widening the page on phones */
+@media (max-width: 639px) {
+  docs-page sonic-code > div {
+    overflow-x: auto;
+  }
+  /* tables stay 100% wide on larger screens; on phones they scroll */
+  docs-page.prose :where(table) {
+    display: block;
+    overflow-x: auto;
+  }
+}

package/src/docs/tailwind/css/docs/page.css

@@ -0,0 +1,10 @@
+/* Document-level defaults */
+html {
+  font-family: var(--sc-font-family-base, sans-serif);
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--sc-base);
+  color: var(--sc-base-content);
+}

package/src/docs/tailwind/css/docs.css

@@ -0,0 +1,9 @@
+/* Page sheet of the docs site (linked from index.html) */
+@import "./tailwind.css";
+@import "./base/theme.css";
+@import "./docs/page.css";
+@import "./docs/content.css";
+@import "./docs/boarding-pass.css";
+@import "./home/hero.css";
+@import "./home/sections.css";
+@import "./home/motion.css";

package/src/docs/tailwind/css/home/hero.css

@@ -0,0 +1,210 @@
+/*
+ * Home, set like an old technical manual (IBM / Braun): one grotesk, five sizes,
+ * flat fields, square corners, no rules or shadows. Signal orange = the action and the stage.
+ */
+.docs-home {
+  --page-margin: 1rem;
+  --step-small: 0.875rem;
+  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
+  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
+  --step-head: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem);
+  --step-display: clamp(2.5rem, 1.2rem + 5.4vw, 6.25rem);
+  --section-gap: clamp(6rem, 3rem + 9vw, 13rem);
+  --sc-rounded-lg: 0;
+  /* runs edge to edge so bleeding fields stay inside it; never scrolls sideways */
+  margin-inline: calc(-1 * var(--page-margin));
+  padding-inline: var(--page-margin);
+  overflow-x: clip;
+  font-family: var(--sc-font-family-base);
+  font-size: var(--step-body);
+  line-height: 1.45;
+  color: var(--sc-base-content);
+}
+@media (min-width: 640px) {
+  .docs-home {
+    --page-margin: 1.5rem;
+  }
+}
+@media (min-width: 1024px) {
+  .docs-home {
+    --page-margin: 2.5rem;
+  }
+}
+@media (min-width: 1536px) {
+  .docs-home {
+    --page-margin: 5rem;
+  }
+}
+
+.section-title {
+  margin: 0;
+  font-family: var(--sc-headings-font-family);
+  font-size: var(--step-head);
+  font-weight: 800;
+  line-height: 0.95;
+  letter-spacing: -0.045em;
+}
+
+.text-link {
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.25em;
+  text-decoration-thickness: 2px;
+}
+
+/* the one accent: Braun signal orange on the primary action */
+.signal-button {
+  --sc-primary: var(--docs-signal);
+  --sc-primary-content: var(--docs-signal-ink);
+}
+
+/* HERO — headline upper left, the live fragment on an orange stage cut like a delta wing */
+.hero {
+  position: relative;
+  padding-top: clamp(3rem, 8vh, 6.5rem);
+}
+.hero-title {
+  margin: 0;
+  font-family: var(--sc-headings-font-family);
+  font-size: var(--step-display);
+  font-weight: 800;
+  line-height: 0.88;
+  letter-spacing: -0.05em;
+}
+.hero-lead {
+  max-width: 40ch;
+  margin: 2.25rem 0 0;
+  font-size: var(--step-body);
+}
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem 1.75rem;
+  margin-top: 2.25rem;
+}
+.hero-install {
+  max-width: 34rem;
+  margin-top: 2rem;
+}
+.hero-install-code {
+  margin: 0 !important;
+}
+.hero-stage {
+  position: relative;
+  height: clamp(24rem, 110vw, 34rem);
+  margin: 3.5rem calc(-1 * var(--page-margin)) 0;
+  background: var(--docs-signal);
+  /* a low bevel cut along the grid: eight cells in, four cells down, corner to heavy line */
+  --bevel-x: calc(var(--mach-cell, 1rem) * 8);
+  --bevel-y: calc(var(--mach-cell, 1rem) * 4);
+  clip-path: polygon(var(--bevel-x) 0, 100% 0, 100% 100%, 0 100%, 0 var(--bevel-y));
+}
+/* the Mach diagram: waves, cone and aircraft on canvas, the speed set large over the field's foot */
+.hero-mach {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  background: var(--docs-signal);
+  color: var(--docs-signal-ink);
+  touch-action: pan-y;
+  cursor: crosshair;
+}
+.mach-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.mach-readout {
+  position: absolute;
+  left: var(--page-margin);
+  bottom: 2.75rem;
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  margin: 0;
+  font-family: var(--sc-headings-font-family);
+  font-weight: 800;
+  line-height: 0.8;
+  letter-spacing: -0.05em;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+.mach-label {
+  font-size: var(--step-lead);
+  letter-spacing: -0.02em;
+}
+.mach-value {
+  position: relative;
+  display: inline-grid;
+  font-size: clamp(4.5rem, 2rem + 12vw, 11rem);
+}
+/* the figure and two echoes stacked; the echoes only show at the boom */
+.mach-layer {
+  grid-area: 1 / 1;
+}
+.mach-layer:first-child {
+  position: relative;
+  z-index: 1;
+}
+.mach-ghost-a,
+.mach-ghost-b {
+  opacity: 0;
+}
+.mach-ghost-a {
+  color: var(--docs-red);
+}
+.mach-ghost-b {
+  color: var(--docs-signal-ink);
+}
+/* the tabular point is as wide as a figure; pull it in */
+.mach-dot {
+  margin-inline: -0.12em;
+}
+.mach-note {
+  position: absolute;
+  left: var(--page-margin);
+  bottom: 1rem;
+  margin: 0;
+  font-size: var(--step-small);
+  font-weight: 600;
+  pointer-events: none;
+}
+@media (min-width: 1024px) {
+  /* two halves of the first screen: the headline on paper, the live pass on a full-height orange field */
+  .hero {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    min-height: max(40rem, calc(100svh - var(--docs-header-h, 4.4rem)));
+    padding-top: 0;
+  }
+  .hero-copy {
+    align-self: center;
+    padding: 3rem 2.5rem 3rem 0;
+  }
+  .hero-title {
+    font-size: clamp(2.75rem, 0.4rem + 4.3vw, 5.5rem);
+  }
+  .hero-install {
+    max-width: 30rem;
+  }
+  .hero-stage {
+    height: auto;
+    margin: 0 calc(-1 * var(--page-margin)) 0 0;
+  }
+  .mach-readout,
+  .mach-note {
+    left: 3rem;
+  }
+  .mach-readout {
+    bottom: 3.75rem;
+  }
+  .mach-note {
+    bottom: 2rem;
+  }
+  .mach-value {
+    font-size: clamp(6rem, 1rem + 9vw, 13rem);
+  }
+}

package/src/docs/tailwind/css/home/motion.css

@@ -0,0 +1,84 @@
+/* Home motion: hero entrance, staggered section reveals, the settling archive photograph */
+.hero-in {
+  animation: hero-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+  animation-delay: var(--d, 0ms);
+}
+@keyframes hero-in {
+  from {
+    opacity: 0;
+    transform: translateY(1.5rem);
+  }
+}
+.hero-stage {
+  animation: stage-in 1.1s cubic-bezier(0.7, 0, 0.2, 1) 0.25s both;
+}
+@keyframes stage-in {
+  from {
+    transform: translateX(12%);
+    opacity: 0;
+  }
+}
+
+[data-reveal] {
+  opacity: 0;
+  transform: translateY(1.5rem);
+  transition:
+    opacity 0.7s ease,
+    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
+  transition-delay: var(--d, 0ms);
+}
+[data-reveal].is-visible {
+  opacity: 1;
+  transform: none;
+}
+
+/* the 1969 photograph settles from a slight zoom as it comes in; it is never hidden */
+/* the sound barrier: the figure splits into a red and a faint ink echo that swing
+   either side of it a few times and settle back in, eased rather than cut */
+docs-mach-stage[data-boom] .mach-ghost-a {
+  animation: mach-split-a 0.9s ease-out both;
+}
+docs-mach-stage[data-boom] .mach-ghost-b {
+  animation: mach-split-b 0.9s ease-out both;
+}
+@keyframes mach-split-a {
+  0% { opacity: 1; transform: translateX(-0.1em); }
+  25% { opacity: 1; transform: translateX(0.07em); }
+  50% { opacity: 0.9; transform: translateX(-0.05em); }
+  75% { opacity: 0.6; transform: translateX(0.02em); }
+  100% { opacity: 0; transform: none; }
+}
+@keyframes mach-split-b {
+  0% { opacity: 0.4; transform: translateX(0.09em); }
+  25% { opacity: 0.4; transform: translateX(-0.06em); }
+  50% { opacity: 0.3; transform: translateX(0.04em); }
+  75% { opacity: 0.15; transform: translateX(-0.02em); }
+  100% { opacity: 0; transform: none; }
+}
+
+.settle {
+  overflow: hidden;
+}
+.settle img {
+  transform: scale(1.08);
+  transition: transform 1.8s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+.settle.is-visible img {
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-in,
+  .hero-stage {
+    animation: none !important;
+  }
+  .host-snippet {
+    transition: none;
+  }
+  [data-reveal],
+  .settle img {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}