/* InkBuddy semantic layer — sits on top of any Web Awesome theme. Put on : class="wa-theme-premium wa-palette-inkbuddy wa-inkbuddy" Colour scheme (wa-light / wa-dark) is set by the pre-paint script. */ @layer wa-theme { .wa-inkbuddy { /* Semantic roles → InkBuddy hues */ --wa-color-brand-95: var(--wa-color-cyan-95); --wa-color-brand-90: var(--wa-color-cyan-90); --wa-color-brand-80: var(--wa-color-cyan-80); --wa-color-brand-70: var(--wa-color-cyan-70); --wa-color-brand-60: var(--wa-color-cyan-60); --wa-color-brand-50: var(--wa-color-cyan-50); --wa-color-brand-40: var(--wa-color-cyan-40); --wa-color-brand-30: var(--wa-color-cyan-30); --wa-color-brand-20: var(--wa-color-cyan-20); --wa-color-brand-10: var(--wa-color-cyan-10); --wa-color-brand-05: var(--wa-color-cyan-05); --wa-color-brand: var(--wa-color-cyan); --wa-color-brand-on: var(--wa-color-cyan-on); /* success = mint, warning = amber, danger = signal are the palette defaults; they are remapped here only so the mapping is documented in one place. */ --wa-color-success: var(--wa-color-green); --wa-color-warning: var(--wa-color-yellow); --wa-color-danger: var(--wa-color-red); /* Airy, friendly geometry */ --wa-border-radius-scale: 1.25; --wa-space-scale: 1.125; } /* Brand accent alternatives (one class swap re-brands the whole app) */ .wa-inkbuddy-mint { --wa-color-brand-95: var(--wa-color-green-95); --wa-color-brand-90: var(--wa-color-green-90); --wa-color-brand-80: var(--wa-color-green-80); --wa-color-brand-70: var(--wa-color-green-70); --wa-color-brand-60: var(--wa-color-green-60); --wa-color-brand-50: var(--wa-color-green-50); --wa-color-brand-40: var(--wa-color-green-40); --wa-color-brand-30: var(--wa-color-green-30); --wa-color-brand-20: var(--wa-color-green-20); --wa-color-brand-10: var(--wa-color-green-10); --wa-color-brand-05: var(--wa-color-green-05); --wa-color-brand: var(--wa-color-green); --wa-color-brand-on: var(--wa-color-green-on); } .wa-inkbuddy-signal { --wa-color-brand-95: var(--wa-color-red-95); --wa-color-brand-90: var(--wa-color-red-90); --wa-color-brand-80: var(--wa-color-red-80); --wa-color-brand-70: var(--wa-color-red-70); --wa-color-brand-60: var(--wa-color-red-60); --wa-color-brand-50: var(--wa-color-red-50); --wa-color-brand-40: var(--wa-color-red-40); --wa-color-brand-30: var(--wa-color-red-30); --wa-color-brand-20: var(--wa-color-red-20); --wa-color-brand-10: var(--wa-color-red-10); --wa-color-brand-05: var(--wa-color-red-05); --wa-color-brand: var(--wa-color-red); --wa-color-brand-on: var(--wa-color-red-on); } } @layer wa-theme { /* Loud fills are pinned to the palette's key colour so the brand hue shows in EVERY theme — each theme derives fill-loud from a different tint of the ramp (premium: brand-80 light / brand-70 dark, matter: brand-70, playful: brand-60). The class is doubled to out-specify the themes' own `.wa-theme-x.wa-light` rules. */ .wa-inkbuddy.wa-inkbuddy { --wa-color-brand-fill-loud: var(--wa-color-cyan); --wa-color-brand-border-loud: var(--wa-color-cyan); --wa-color-brand-on-loud: var(--wa-color-cyan-on); } .wa-inkbuddy-mint.wa-inkbuddy-mint { --wa-color-brand-fill-loud: var(--wa-color-green); --wa-color-brand-border-loud: var(--wa-color-green); --wa-color-brand-on-loud: var(--wa-color-green-on); } .wa-inkbuddy-signal.wa-inkbuddy-signal { --wa-color-brand-fill-loud: var(--wa-color-red); --wa-color-brand-border-loud: var(--wa-color-red); --wa-color-brand-on-loud: var(--wa-color-red-on); } } /* Geometry — UNLAYERED on purpose. The Web Awesome themes declare --wa-border-radius-scale inside @layer wa-theme (premium: 0.5), and a layered declaration beats anything we put in the same layer from another file. Unlayered rules win over every layer, so this is the one place InkBuddy's rounding is decided. */ .wa-inkbuddy.wa-inkbuddy { --wa-border-radius-scale: 1.75; --wa-space-scale: 1.125; }