YASBA - branding.css - v0.1

dabblet.css

/* YASBA - branding.css - v0.1 */

/* Tokens + themes + small brand helpers.
   Manual theme override via html[data-theme="light|dark"] wins over system preference. */

/* ---------- Font imports (Google Fonts) ----------
   Recommended:
   - Inter (UI)
   - Source Serif 4 (editorial headings / summaries)
   - JetBrains Mono (optional mono)

   Import these in HTML or your bundler; leaving commented for flexibility.
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:wght@400;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* Typography */
  --font-sans:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-serif: "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;

  /* Type scale (calm + readable) */
  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.875rem; /* 14 */
  --text-md: 1rem; /* 16 */
  --text-lg: 1.125rem; /* 18 */
  --text-xl: 1.25rem; /* 20 */
  --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* 24–32 */
  --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); /* 30–40 */

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Numeric alignment for money */
  --numeric: tabular-nums lining-nums;

  /* Spacing scale (4px base; expose only calm steps) */
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-6: 1.5rem; /* 24 */
  --space-8: 2rem; /* 32 */
  --space-12: 3rem; /* 48 */
  --space-16: 4rem; /* 64 */

  /* Radii */
  --radius-sm: 0.25rem; /* 4 */
  --radius-md: 0.375rem; /* 6 */
  --radius-lg: 0.75rem; /* 12 */
  --radius-xl: 1rem; /* 16 */

  /* Borders */
  --border-1: 1px;
  --border-2: 2px;

  /* Shadows (subtle; mostly for dark-mode separation) */
  --shadow-1: 0 1px 2px color-mix(in oklab, black, transparent 88%);
  --shadow-2: 0 8px 24px color-mix(in oklab, black, transparent 88%);

  /* Z-index scale */
  --z-base: 0;
  --z-header: 10;
  --z-overlay: 40;
  --z-modal: 60;
  --z-toast: 80;

  /* Motion (subtle, optional) */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-med: 180ms;
  --dur-slow: 240ms;

  /* Brand hues (base) — used to derive themes */
  --brand-primary: #3a5a72; /* muted blue-gray */
  --brand-secondary: #4f7f7a; /* desaturated teal */
  --brand-accent: #c28b3c; /* soft amber */
  --brand-danger: #a33a3a; /* deep red */
  --brand-info: #3a5a72;

  /* Focus ring */
  --focus-ring: 2px;
  --focus-offset: 2px;

  /* Default to light if nothing else is applied */
  --color-bg: #ffffff;
  --color-surface: #f9fafb;
  --color-surface-2: #ffffff;
  --color-text: #111827;
  --color-muted: #374151;
  --color-faint: #6b7280;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;

  /* Interactive */
  --color-link: var(--brand-primary);
  --color-link-hover: color-mix(in oklab, var(--brand-primary), black 12%);

  /* Semantics (color is never the only signal; pair with icon + label) */
  --color-success: var(--brand-secondary);
  --color-warning: var(--brand-accent);
  --color-danger: var(--brand-danger);
  --color-info: var(--brand-info);

  /* Semantic surface tints (for callouts/chips; keep low saturation) */
  --tint-success: color-mix(in oklab, var(--color-success), white 88%);
  --tint-warning: color-mix(in oklab, var(--color-warning), white 88%);
  --tint-danger: color-mix(in oklab, var(--color-danger), white 90%);
  --tint-info: color-mix(in oklab, var(--color-info), white 90%);

  /* On-colors */
  --on-solid: #ffffff;
}

/* System preference: dark */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f172a; /* deep blue-slate */
    --color-surface: #111c33;
    --color-surface-2: #0f1a2f;
    --color-text: #e5e7eb;
    --color-muted: #cbd5e1;
    --color-faint: #94a3b8;
    --color-border: color-mix(in oklab, #e5e7eb, transparent 82%);
    --color-border-strong: color-mix(in oklab, #e5e7eb, transparent 72%);

    --color-link: color-mix(in oklab, var(--brand-primary), white 28%);
    --color-link-hover: color-mix(in oklab, var(--color-link), white 10%);

    --tint-success: color-mix(in oklab, var(--color-success), black 78%);
    --tint-warning: color-mix(in oklab, var(--color-warning), black 78%);
    --tint-danger: color-mix(in oklab, var(--color-danger), black 80%);
    --tint-info: color-mix(in oklab, var(--color-info), black 80%);

    --on-solid: #ffffff;
  }
}

/* Manual overrides win (placed after media rule) */
html[data-theme="light"] {
  color-scheme: light;
  --color-bg: #ffffff;
  --color-surface: #f9fafb;
  --color-surface-2: #ffffff;
  --color-text: #111827;
  --color-muted: #374151;
  --color-faint: #6b7280;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;

  --color-link: var(--brand-primary);
  --color-link-hover: color-mix(in oklab, var(--brand-primary), black 12%);

  --tint-success: color-mix(in oklab, var(--color-success), white 88%);
  --tint-warning: color-mix(in oklab, var(--color-warning), white 88%);
  --tint-danger: color-mix(in oklab, var(--color-danger), white 90%);
  --tint-info: color-mix(in oklab, var(--color-info), white 90%);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0f172a;
  --color-surface: #111c33;
  --color-surface-2: #0f1a2f;
  --color-text: #e5e7eb;
  --color-muted: #cbd5e1;
  --color-faint: #94a3b8;
  --color-border: color-mix(in oklab, #e5e7eb, transparent 82%);
  --color-border-strong: color-mix(in oklab, #e5e7eb, transparent 72%);

  --color-link: color-mix(in oklab, var(--brand-primary), white 28%);
  --color-link-hover: color-mix(in oklab, var(--color-link), white 10%);

  --tint-success: color-mix(in oklab, var(--color-success), black 78%);
  --tint-warning: color-mix(in oklab, var(--color-warning), black 78%);
  --tint-danger: color-mix(in oklab, var(--color-danger), black 80%);
  --tint-info: color-mix(in oklab, var(--color-info), black 80%);
}

/* ---------- Base element theming helpers (non-invasive) ---------- */

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

a {
  color: var(--color-link);
}

a:hover {
  color: var(--color-link-hover);
}

/* Make money columns align nicely (apply class in UI where needed) */
.numeric {
  font-variant-numeric: var(--numeric);
}

/* ---------- Brand helper classes (small, intentional set) ---------- */

.surface {
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.surface-raised {
  background: var(--color-surface-2);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.text-muted {
  color: var(--color-muted);
}

.text-faint {
  color: var(--color-faint);
}

.focus-ring:focus-visible {
  outline: var(--focus-ring) solid color-mix(in oklab, var(--brand-primary), white 20%);
  outline-offset: var(--focus-offset);
}

/* Chip: calm label for metadata/status; never color-only meaning */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: var(--border-1) solid var(--color-border);
  background: color-mix(in oklab, var(--color-surface), var(--color-bg) 50%);
  font-size: var(--text-sm);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

.chip[data-tone="success"] {
  background: var(--tint-success);
  border-color: color-mix(in oklab, var(--color-success), transparent 70%);
}

.chip[data-tone="warning"] {
  background: var(--tint-warning);
  border-color: color-mix(in oklab, var(--color-warning), transparent 70%);
}

.chip[data-tone="danger"] {
  background: var(--tint-danger);
  border-color: color-mix(in oklab, var(--color-danger), transparent 70%);
}

.chip[data-tone="info"] {
  background: var(--tint-info);
  border-color: color-mix(in oklab, var(--color-info), transparent 70%);
}

/* SR-only (accessible screen-reader text) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Reduced motion: keep UI calm and respectful */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}

/* Print: force legible, reduce background ink */
@media print {
  :root {
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-2: #ffffff;
    --color-text: #000000;
    --color-muted: #111111;
    --color-faint: #333333;
    --color-border: #cccccc;
    --color-border-strong: #999999;
  }

  .surface,
  .surface-raised,
  .chip {
    box-shadow: none !important;
    background: transparent !important;
  }
}


/***********************************************************************/
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/

.logo {
  /* container queries */
  container-type: size;
  container-name: logo;

  position: relative;
  aspect-ratio: 20 / 5.8;

  /* geometry tokens */
  --pad: 2cqh;              /* outer padding */
  --inner-pad: 8cqh;        /* inset for the rounded square */
  --r: 16cqh;               /* rounded square radius */

  --textX: 105cqh;          /* text offset to the right of icon */
  --titleTop: 5cqh;
  --titleSize: 65cqh;
  --subtitleSize: 11.5cqh;
}

.logo::before,
.logo::after,
.logo .title::before,
.logo .title::after,
.logo .subtitle::after {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
}

/* (optional) outer box, kept for parity with your code */
.logo::before {
  top: var(--pad);
  left: var(--pad);
  width: calc(100cqh - 2 * var(--pad));
  height: calc(100cqh - 2 * var(--pad));
  background: transparent;
}

/* icon background */
.logo::after {
  top: calc(var(--pad) + var(--inner-pad));
  left: calc(var(--pad) + var(--inner-pad));
  width: calc(100cqh - 2 * (var(--pad) + var(--inner-pad)));
  height: calc(100cqh - 2 * (var(--pad) + var(--inner-pad)));
  background: var(--color-text);
  border-radius: var(--r);
}

/* text blocks */
.logo .title,
.logo .subtitle {
  position: absolute;
  left: var(--textX);
  white-space: nowrap;
}

.logo .title {
  top: var(--titleTop);
  font-size: var(--titleSize);
  line-height: 1;
  margin: 0;
}

.logo .subtitle {
  top: calc(var(--titleTop) + var(--titleSize));
  font-size: var(--subtitleSize);
}

/* cutout bars (shared styling) */
.logo .title::before,
.logo .title::after,
.logo .subtitle::after {
  z-index: 100;
  width: 8cqh;
  background: var(--color-bg);
  border-radius: 4cqh;

  /* each pseudo sets these */
  top: var(--barTop);
  left: var(--barLeft);
  height: var(--barH);
}

/* bar 1 */
.logo .title::before {
  --barTop: calc(var(--pad) + 23cqh);   /* = 2 - 5 + 28 */
  --barLeft: calc(var(--pad) - 77cqh);  /* = 2 - 105 + 28 */
  --barH: 40cqh;
}

/* bar 2 */
.logo .title::after {
  --barTop: calc(var(--pad) + 27cqh);   /* = 2 - 5 + 32 */
  --barLeft: calc(var(--pad) - 45cqh);  /* = 2 - 105 + 60 */
  --barH: 36cqh;
}

/* bar 3 */
.logo .subtitle::after {
  --barTop: calc(var(--pad) - 48cqh);   /* = 2 - 65 - 5 + 22 */
  --barLeft: calc(var(--pad) - 61cqh);  /* = 2 - 105 + 44 */
  --barH: 46cqh;
}

dabblet.html

<hgroup class="toolbar__group logo">
	<h1 class="title">YASBA</h1>
	<span class="text-muted subtitle">Yet Another Simple Budgeting Application</span>
</hgroup >

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}