@masmarino/gabarit 1.4.0 → 2.0.0

package/fonts/OFL-ibm-plex.txt

@@ -0,0 +1,93 @@
+Copyright 2019 IBM Corp. All rights reserved. IBMPlexSans-Italic[wdth,wght].ttf: Copyright 2019 IBM Corp. All rights reserved.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/fonts/index.scss

@@ -0,0 +1,28 @@
+// IBM Plex Sans, Sans Condensed and Mono, the faces the tokens name. Subset to Latin-1 plus typographic
+// punctuation: a glyph outside it (an emoji, a non-Latin name) falls back to the next font of the
+// stack. The application serves the files of this folder at $path, for instance with an Angular asset:
+//
+//   { "glob": "*.woff2", "input": "node_modules/@masmarino/gabarit/fonts", "output": "fonts/ibm-plex" }
+//
+// then `@use '@masmarino/gabarit/fonts' with ($path: '/fonts/ibm-plex/');`.
+
+$path: '/fonts/ibm-plex/' !default;
+
+$faces: (
+  ('IBM Plex Sans', 400, 'ibm-plex-sans-400'),
+  ('IBM Plex Sans', 500, 'ibm-plex-sans-500'),
+  ('IBM Plex Sans', 600, 'ibm-plex-sans-600'),
+  ('IBM Plex Sans Condensed', 600, 'ibm-plex-sans-condensed-600'),
+  ('IBM Plex Mono', 400, 'ibm-plex-mono-400'),
+  ('IBM Plex Mono', 500, 'ibm-plex-mono-500')
+);
+
+@each $family, $weight, $file in $faces {
+  @font-face {
+    font-family: $family;
+    font-style: normal;
+    font-weight: $weight;
+    font-display: swap;
+    src: url('#{$path}#{$file}.woff2') format('woff2');
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@masmarino/gabarit",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "Angular design system — UI components and dataviz for self-hosted applications.",
   "license": "MIT",
   "homepage": "https://github.com/Masmarino/Gabarit",
@@ -39,6 +39,12 @@
       "style": "./src/lib/tokens/index.scss",
       "default": "./src/lib/tokens/index.scss"
     },
+    "./fonts": {
+      "sass": "./fonts/index.scss",
+      "style": "./fonts/index.scss",
+      "default": "./fonts/index.scss"
+    },
+    "./fonts/*": "./fonts/*",
     "./package.json": {
       "default": "./package.json"
     },

package/src/lib/tokens/_a11y.scss

@@ -0,0 +1,22 @@
+// Shared by the components' styles, and offered to applications through the tokens.
+
+// Out of sight, still read by assistive technology.
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+// The keyboard focus ring. `--gbt-focus-ring` lets a theme recolour every ring at once.
+@mixin focus-ring($offset: null) {
+  outline: 2px solid var(--gbt-focus-ring, var(--focus-ring));
+  @if $offset != null {
+    outline-offset: $offset;
+  }
+}

package/src/lib/tokens/_base.scss

@@ -0,0 +1,31 @@
+// The document's own elements, for an application that wants them in the family's type: include once,
+// at the root of its global styles (`@include tokens.document-base;`).
+@mixin document-base {
+  body {
+    margin: 0;
+    font-family: var(--font-family);
+    font-feature-settings: 'kern', 'liga';
+    background: var(--bg-panel);
+    color: var(--text-primary);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  // Titles in Plex Condensed: a page and its panels read as a document.
+  h1,
+  h2,
+  h3 {
+    font-family: var(--gbt-font-display, var(--font-display));
+    letter-spacing: -0.005em;
+  }
+
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: var(--gbt-font-mono);
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--accent) 22%, transparent);
+  }
+}

package/src/lib/tokens/_palette.scss

@@ -1,58 +1,59 @@
+// The raw colours of the Ferris family. Components never read these: they go through the semantic
+// tokens, which pick a step per theme.
 :root {
-  --brand-50: #e8e9fd;
-  --brand-100: #ced1f8;
-  --brand-200: #98a0f0;
-  --brand-300: #5b66e6;
-  --brand-400: #2938db;
-  --brand-500: #0d1ed3;
-  --brand-600: #44476a;
-  --brand-700: #091595;
-  --brand-800: #07106e;
-  --brand-900: #040943;
+  // Light neutrals, from the paper to the ink.
+  --slate-0: #ffffff;
+  --slate-50: #eff2f5;
+  --slate-100: #e9edf1;
+  --slate-200: #dce2e9;
+  --slate-300: #cfd5dc;
+  --slate-400: #a9b3c0;
+  --slate-500: #7d8794;
+  --slate-600: #4a525f;
+  --slate-700: #404954;
+  --slate-900: #10151c;
 
-  --emerald-400: #55b48b;
+  // Dark neutrals: the graphite of the frame and the dark theme.
+  --graphite-1000: #0c1015;
+  --graphite-950: #0b0f14;
+  --graphite-900: #11161c;
+  --graphite-850: #181f27;
+  --graphite-800: #1f2730;
+  --graphite-700: #28323d;
+  --graphite-500: #646c77;
+  --graphite-400: #a1a9b5;
+  --graphite-300: #b8bfca;
+  --graphite-200: #cdd3db;
+  --graphite-100: #e7ebf1;
 
-  --grey-50: #f7f9fb;
-  --grey-100: #edf1f5;
-  --grey-200: #d6e0e8;
-  --grey-300: #b4c6d2;
-  --grey-400: #8aafc5;
-  --grey-500: #62889d;
-  --grey-600: #3f6070;
-  --grey-700: #2a4250;
-  --grey-800: #192a34;
-  --grey-900: #0d1b24;
+  // The crab's rust, kept for the marks that are the brand's own (focus, current page).
+  --rust-300: #ff9469;
+  --rust-400: #f0622a;
+  --rust-500: #c2410c;
+  --rust-600: #a8360a;
 
-  --red-50: #fcf4f4;
-  --red-100: #fbe5e5;
-  --red-200: #f8d0d0;
-  --red-300: #f2afaf;
-  --red-400: #e88181;
-  --red-500: #d95a5a;
-  --red-600: #c04242;
-  --red-700: #a23333;
-  --red-800: #6e2e2e;
-  --red-900: #3c1313;
+  --patina-300: #7ed4b8;
+  --patina-400: #3fbf95;
+  --patina-600: #15805d;
+  --patina-700: #0d5d43;
+  --patina-800: #0c523b;
 
-  --amber-50: #fcf9ed;
-  --amber-100: #f7efce;
-  --amber-200: #eedd99;
-  --amber-300: #e5c764;
-  --amber-400: #dfb340;
-  --amber-500: #d5962b;
-  --amber-600: #bd7522;
-  --amber-700: #9c5621;
-  --amber-800: #673a20;
-  --amber-900: #3c1d0c;
+  --amber-300: #f6b649;
+  --amber-400: #f5b13d;
+  --amber-600: #9a5b04;
+  --amber-700: #774603;
+  --amber-800: #6a3e03;
 
-  --green-50: #effaf5;
-  --green-100: #d7f4e5;
-  --green-200: #b4e6cf;
-  --green-300: #83d2b3;
-  --green-400: #53b491;
-  --green-500: #29a079;
-  --green-600: #188362;
-  --green-700: #146850;
-  --green-800: #114436;
-  --green-900: #08261f;
+  --red-200: #f7aeaa;
+  --red-300: #f38c85;
+  --red-400: #f2857d;
+  --red-600: #c23a32;
+  --red-700: #a1302a;
+  --red-750: #942c26;
+  --red-800: #842822;
+
+  --indigo-200: #b3beff;
+  --indigo-400: #8b9bff;
+  --indigo-600: #2f49c9;
+  --indigo-800: #283da8;
 }

package/src/lib/tokens/_semantic.scss

@@ -1,144 +1,37 @@
-:root {
-  --primary: var(--brand-600);
-
-  --primary-hover: #32344e;
-  --bg-principal: #ffffff;
-  --bg-panel: #f5f5f7;
-  --bg-hover: rgba(0, 0, 0, 0.05);
-  --bg-track: var(--grey-200);
-
-  --border-color: #7798b3;
-  --gbt-hairline: color-mix(in srgb, var(--border-color) 45%, transparent);
-  --gbt-card-border: color-mix(in srgb, var(--border-color) 60%, transparent);
-
-  --text-primary: var(--grey-900);
-  --text-secondary: var(--grey-700);
-
-  --text-discret: #425c6b;
-  --text-on-color: #ffffff;
-
-  --text-on-primary: #ffffff;
-  --text-on-error: #ffffff;
-
-  --color-success-base: var(--green-500);
-  --color-success-text: #195e48;
-  --color-success-hover: var(--green-700);
-  --color-success-bg: var(--green-100);
-  --color-success-bg-text: var(--green-800);
+@use 'themes';
 
-  --color-warning-base: #c38927;
-  --color-warning-text: #6f4d16;
-  --color-warning-hover: var(--amber-600);
-  --color-warning-bg: var(--amber-100);
-  --color-warning-bg-text: var(--amber-800);
-
-  --color-error-base: var(--red-500);
-  --color-error-fill: #a82727;
-  --color-error-text: #9e2525;
-  --color-error-hover: #8f2121;
-  --color-error-bg: var(--red-100);
-  --color-error-bg-text: var(--red-800);
-
-  --color-info-bg: #dbeafe;
-  --color-info-bg-text: #1e40af;
-
-  --bg-inverse: var(--grey-900);
-
-  --color-success-vivid-base: var(--green-500);
-  --color-warning-vivid-base: #c38927;
-  --color-error-vivid-base: var(--red-500);
-  --color-info-vivid-base: #2f6feb;
+:root {
+  color-scheme: light;
+  @include themes.light-tokens;
 
-  --chart-series-1-base: #bd8200;
-  --chart-series-2-base: #009e73;
-  --chart-series-3-base: #0072b2;
-  --chart-series-4-base: #a6410f;
-  --chart-series-5-base: #9c3f78;
-  --chart-series-6-base: #5b4fb0;
-  --chart-grid: var(--grey-200);
+  --frame: var(--graphite-950);
 
-  --site-border-radius: 14px;
-  --site-border-radius-sm: 10px;
-  --site-border-radius-lg: 24px;
+  --site-border-radius: 4px;
+  --site-border-radius-sm: 3px;
+  --site-border-radius-lg: 6px;
 
   --gbt-control-height-sm: 2rem;
   --gbt-control-height-md: 2.375rem;
   --gbt-control-height-lg: 2.75rem;
 
-  --site-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.06);
-  --site-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
-  --site-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
-
   --site-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --site-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
 
-  --font-family: 'Inter', sans-serif;
-  --gbt-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
-}
-
-@mixin dark-tokens {
-  --primary: #a7aeff;
-
-  --primary-hover: #c6caff;
-
-  --bg-principal: var(--grey-900);
-  --bg-panel: #0f1c26;
-  --bg-hover: rgba(255, 255, 255, 0.06);
-  --bg-track: var(--grey-800);
-  --border-color: #436a80;
-  --gbt-hairline: color-mix(in srgb, var(--border-color) 45%, transparent);
-  --gbt-card-border: color-mix(in srgb, var(--border-color) 60%, transparent);
-
-  --text-primary: var(--grey-50);
-
-  --text-secondary: #9ebdcf;
-  --text-discret: #86a9bb;
-  --text-on-color: #ffffff;
-
-  --text-on-primary: var(--grey-900);
-  --text-on-error: var(--grey-900);
-
-  --color-success-base: var(--green-400);
-  --color-success-text: #56b693;
-  --color-success-hover: var(--green-500);
-  --color-success-bg: var(--green-900);
-  --color-success-bg-text: var(--green-100);
-
-  --color-warning-base: var(--amber-400);
-  --color-warning-text: var(--amber-400);
-  --color-warning-hover: var(--amber-500);
-  --color-warning-bg: var(--amber-900);
-  --color-warning-bg-text: var(--amber-100);
-
-  --color-error-base: var(--red-400);
-  --color-error-fill: #e98989;
-  --color-error-text: #e98b8b;
-  --color-error-hover: #eea3a3;
-  --color-error-bg: var(--red-900);
-  --color-error-bg-text: var(--red-100);
-
-  --color-info-bg: #1e3a8a;
-  --color-info-bg-text: #dbeafe;
-
-  --chart-series-1-base: #e69f00;
-  --chart-series-2-base: #009e73;
-  --chart-series-3-base: #0072b2;
-  --chart-series-4-base: #e2703a;
-  --chart-series-5-base: #d691bd;
-  --chart-series-6-base: #9d94e0;
-  --chart-grid: var(--grey-800);
-
-  --site-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.3);
-  --site-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
-  --site-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
+  // IBM Plex, served by the application (see `@masmarino/gabarit/fonts`). Without it the stacks fall
+  // back to the system's sans and monospace.
+  --font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  --font-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Arial Narrow', Arial, sans-serif;
+  --gbt-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    @include dark-tokens;
+    color-scheme: dark;
+    @include themes.dark-tokens;
   }
 }
 
 :root[data-theme='dark'] {
-  @include dark-tokens;
+  color-scheme: dark;
+  @include themes.dark-tokens;
 }

package/src/lib/tokens/_themes.scss

@@ -0,0 +1,144 @@
+// The themes as mixins, with no output of their own: _semantic puts them on :root, and the parts drawn
+// on the graphite frame (the shell's rail and bar, the sign-in page) take the frame's.
+//
+// Every text token reaches 7:1 on the page and on a panel (contrast.spec.ts), which is why a few of
+// them sit a shade darker (or lighter, in the dark) than the marks of the same colour. The status
+// tints are translucent, so they take the colour of the ground they sit on.
+
+@mixin light-tokens {
+  --primary: var(--slate-900);
+  --primary-hover: #383d43;
+  --bg-principal: var(--slate-0);
+  --bg-panel: var(--slate-50);
+  --bg-hover: rgba(16, 21, 28, 0.07);
+  --bg-track: var(--slate-200);
+  --bg-inverse: var(--slate-900);
+
+  // The edge of a field or a control, 3:1 on the page (WCAG 1.4.11); the hairlines stay lighter.
+  --border-color: var(--slate-500);
+  --gbt-hairline: var(--slate-300);
+  --gbt-card-border: var(--slate-300);
+
+  --text-primary: var(--slate-900);
+  --text-secondary: var(--slate-700);
+  --text-discret: var(--slate-600);
+  --text-on-color: var(--slate-0);
+  --text-on-primary: var(--slate-0);
+  --text-on-error: var(--slate-0);
+
+  --accent: var(--rust-500);
+  --accent-text: var(--rust-600);
+  --focus-ring: var(--rust-500);
+
+  --color-success-base: var(--patina-600);
+  --color-success-text: var(--patina-700);
+  --color-success-hover: #146b50;
+  --color-success-bg: rgba(21, 128, 93, 0.12);
+  --color-success-bg-text: var(--patina-800);
+  --color-success-vivid-base: var(--patina-600);
+
+  --color-warning-base: var(--amber-600);
+  --color-warning-text: var(--amber-700);
+  --color-warning-hover: #7e4d09;
+  --color-warning-bg: rgba(154, 91, 4, 0.1);
+  --color-warning-bg-text: var(--amber-800);
+  --color-warning-vivid-base: var(--amber-600);
+
+  --color-error-base: var(--red-600);
+  --color-error-fill: var(--red-700);
+  --color-error-text: var(--red-750);
+  --color-error-hover: #842b27;
+  --color-error-bg: rgba(194, 58, 50, 0.1);
+  --color-error-bg-text: var(--red-800);
+  --color-error-vivid-base: var(--red-600);
+
+  --color-info-bg: rgba(47, 73, 201, 0.09);
+  --color-info-bg-text: var(--indigo-800);
+  --color-info-vivid-base: var(--indigo-600);
+
+  --chart-series-1-base: #bd8200;
+  --chart-series-2-base: #009e73;
+  --chart-series-3-base: #0072b2;
+  --chart-series-4-base: #a6410f;
+  --chart-series-5-base: #9c3f78;
+  --chart-series-6-base: #5b4fb0;
+  --chart-grid: var(--slate-300);
+
+  --site-shadow-sm: none;
+  --site-shadow-md: 0 0 0 1px var(--slate-400);
+  --site-shadow-lg: 0 0 0 1px var(--slate-400), 0 12px 32px rgba(16, 21, 28, 0.16);
+}
+
+@mixin dark-tokens {
+  --primary: var(--graphite-100);
+  --primary-hover: #c0c5cb;
+  --bg-principal: var(--graphite-850);
+  --bg-panel: var(--graphite-900);
+  --bg-hover: rgba(231, 235, 241, 0.07);
+  --bg-track: var(--graphite-700);
+  --bg-inverse: var(--graphite-100);
+
+  --border-color: var(--graphite-500);
+  --gbt-hairline: rgba(205, 215, 230, 0.12);
+  --gbt-card-border: rgba(205, 215, 230, 0.12);
+
+  --text-primary: var(--graphite-100);
+  --text-secondary: var(--graphite-300);
+  --text-discret: var(--graphite-400);
+  --text-on-color: var(--graphite-1000);
+  --text-on-primary: var(--graphite-1000);
+  --text-on-error: var(--graphite-1000);
+
+  --accent: var(--rust-400);
+  --accent-text: var(--rust-300);
+  --focus-ring: var(--rust-400);
+
+  --color-success-base: var(--patina-400);
+  --color-success-text: var(--patina-400);
+  --color-success-hover: #61c8a7;
+  --color-success-bg: rgba(63, 191, 149, 0.16);
+  --color-success-bg-text: var(--patina-300);
+  --color-success-vivid-base: var(--patina-400);
+
+  --color-warning-base: var(--amber-400);
+  --color-warning-text: var(--amber-400);
+  --color-warning-hover: #f2bd61;
+  --color-warning-bg: rgba(245, 177, 61, 0.14);
+  --color-warning-bg-text: var(--amber-300);
+  --color-warning-vivid-base: var(--amber-400);
+
+  --color-error-base: var(--red-400);
+  --color-error-fill: var(--red-400);
+  --color-error-text: var(--red-300);
+  --color-error-hover: #f09994;
+  --color-error-bg: rgba(242, 133, 125, 0.16);
+  --color-error-bg-text: var(--red-200);
+  --color-error-vivid-base: var(--red-400);
+
+  --color-info-bg: rgba(139, 155, 255, 0.16);
+  --color-info-bg-text: var(--indigo-200);
+  --color-info-vivid-base: var(--indigo-400);
+
+  --chart-series-1-base: #e69f00;
+  --chart-series-2-base: #009e73;
+  --chart-series-3-base: #0072b2;
+  --chart-series-4-base: #e2703a;
+  --chart-series-5-base: #d691bd;
+  --chart-series-6-base: #9d94e0;
+  --chart-grid: rgba(205, 215, 230, 0.12);
+
+  --site-shadow-sm: none;
+  --site-shadow-md: 0 0 0 1px rgba(205, 215, 230, 0.26);
+  --site-shadow-lg: 0 0 0 1px rgba(205, 215, 230, 0.26), 0 12px 32px rgba(0, 0, 0, 0.4);
+}
+
+// The graphite frame, the same in both themes: the dark tokens on a ground a little deeper than the
+// dark theme's own. The rail's links are a step brighter, since light thin text on graphite reads
+// paler than its ratio says.
+@mixin frame-tokens {
+  @include dark-tokens;
+  --bg-panel: var(--graphite-950);
+  --text-secondary: var(--graphite-200);
+  color-scheme: dark;
+  color: var(--text-primary);
+}