/* ========================================================================== Clay (Toy Box): the values of the app shell. The shell sheets (core/css/sidebar_toybox.css, mobile_shell.css, notifications/css/notifications.css) are structure only. They read the --tb-* names below; this file is what Clay answers with: violet, lavender neutrals, soft lift, 12-28px radii, 150-180ms. The --tb- prefix is a historical hook name for "the shell's tokens", not a dependency on Toy Box: every design defines the ones it reads in its own files. Loaded by core/designs/clay/_head.html, so it also rides along on the pages a design renders through its declared Toy Box adapter (a world's or Minimal's page outside its own shell). `:where(html:not([data-ui-theme]))` adds no specificity and leaves out any page that wears a world's or Minimal's own shell, which brings its own values. Clay's admin variant (data-shell="admin") is what a school teacher in Clay sees: pine, line icons, an edge bar. Clay owns this copy; it is not linked to Calm's (core/calm/shell.css), and editing either cannot change the other. ========================================================================== */ /* --- Sidebar, its tooltip, the account menu and the install guide -------- */ :where(html:not([data-ui-theme])) .sidebar, :where(html:not([data-ui-theme])) #global-sidebar-tooltip, :where(html:not([data-ui-theme])) .tb-acct-menu, :where(html:not([data-ui-theme])) .tb-install-guide{ --tb-violet: oklch(58% 0.19 300); --tb-violet-deep: oklch(46% 0.17 300); --tb-rose: oklch(70% 0.16 10); --tb-card: oklch(99.5% 0.002 300); /* raised panel face */ --tb-ink: oklch(23% 0.03 300); /* primary text */ --tb-soft: oklch(45% 0.025 300); /* muted text / rest icons */ --tb-hover: oklch(93% 0.03 300); /* subtle hover wash */ --tb-border: oklch(88% 0.03 300); --tb-r-md: 18px; --tb-r-sm: 12px; --tb-lift: 0 2px 4px rgb(40 20 80 / .06), 0 12px 28px -8px rgb(40 20 80 / .16), 0 32px 64px -24px rgb(40 20 80 / .22); --tb-ring-strong: 0 0 0 3px oklch(58% 0.19 300 / .30); --tb-dur: .15s; --tb-on: #fff; /* ink on a solid accent fill */ --tb-scrim: rgb(20 10 40 / .45); /* the install guide's backdrop */ --tb-exit-wash: oklch(70% 0.16 10 / .14); /* the sign-out row, hovered */ --tb-exit-ink: oklch(48% 0.17 10); --tb-exit-ink-hi: oklch(55% 0.18 10); } :where(html:not([data-ui-theme])) .sidebar{ --tb-notif-face: oklch(97.5% 0.018 10); --tb-notif-hover: oklch(95% 0.03 10); --tb-notif-border: oklch(90% 0.05 10); } /* --- Phone shell: top bar, dock, More sheet ------------------------------ */ :where(html:not([data-ui-theme])) .tb-mshell{ --tb-violet: oklch(58% 0.19 300); --tb-violet-deep: oklch(46% 0.17 300); --tb-violet-wash: oklch(58% 0.19 300 / .14); --tb-rose: oklch(70% 0.16 10); --tb-card: oklch(99.5% 0.002 300); --tb-glass: oklch(99.5% 0.002 300 / .86); --tb-ink: oklch(23% 0.03 300); --tb-soft: oklch(45% 0.025 300); --tb-hover: oklch(93% 0.03 300); --tb-border: oklch(88% 0.03 300); --tb-r-lg: 28px; --tb-r-md: 18px; --tb-r-sm: 12px; --tb-lift: 0 2px 4px rgb(40 20 80 / .06), 0 12px 28px -8px rgb(40 20 80 / .16), 0 32px 64px -24px rgb(40 20 80 / .22); --tb-ring: 0 0 0 3px oklch(58% 0.19 300 / .35); --tb-dur: .18s; --tb-on: #fff; --tb-scrim: rgb(20 10 40 / .42); /* behind the More sheet */ --tb-exit-ink: oklch(52% 0.18 10); } /* --- Notification chrome: bell badge, panel, toasts, push prompt --------- */ :where(html:not([data-ui-theme])) .notif-ui, :where(html:not([data-ui-theme])) .flash-toasts, :where(html:not([data-ui-theme])) .notif-badge{ --tb-violet: oklch(58% 0.19 300); --tb-violet-deep: oklch(46% 0.17 300); --tb-rose: oklch(64% 0.2 10); --tb-tang: oklch(72% 0.17 55); --tb-card: oklch(99.5% 0.002 300); --tb-ink: oklch(23% 0.03 300); --tb-soft: oklch(45% 0.025 300); --tb-hover: oklch(95% 0.02 300); --tb-unread: oklch(97% 0.025 300); --tb-fill-soft: oklch(93% 0.035 300); --tb-border: oklch(90% 0.025 300); --tb-r-md: 18px; --tb-r-sm: 12px; --tb-lift: 0 2px 4px rgb(40 20 80 / .06), 0 12px 28px -8px rgb(40 20 80 / .16), 0 32px 64px -24px rgb(40 20 80 / .22); --tb-ring: 0 0 0 3px oklch(58% 0.19 300 / .30); --tb-dur: .15s; --tb-on: #fff; --tb-art-border: oklch(84% 0.08 300); /* the milestone toast's edge */ --tb-switch-knob: #fff; /* White on the bright rose is about 3.5:1; a deeper rose keeps 11px white digits above 4.5:1. */ --tb-badge-bg: oklch(52% .2 12); } /* ========================================================================== Clay's admin variant: School teachers in Clay (and an admin) wear the calm pine shell. Switched on by `data-shell="admin"` on the