@mitcsutt/kiln-ui 0.2.2 → 0.4.0

package/skills/setup-and-theming/references/paper.md

@@ -2,11 +2,11 @@
 
 # Paper
 
-> The neutral default. A typeset proof on good uncoated stock, where the ink is the accent.
+> The neutral default. An office that prints for everyone, with white sheets on grey stock, blue-black ink as the accent and Golos Text for type.
 
 Source: https://kiln.mitchellsutton.com/docs/ui/themes/paper
 
-_A typeset proof on good uncoated stock._ Paper is the theme you get when you set none. It's in the base stylesheet, and it's built to sit under any brand without arguing with it: graphite ink on warm-neutral paper, with the ink itself as the accent.
+_An office that prints for everyone._ Paper is the theme you get when you set none. It's in the base stylesheet, and it's built to sit under any brand without arguing with it: white sheets on grey recycled stock, blue-black ink as the accent, and a typeface drawn for public services, so that everyone can read it.
 
 
 ## Use it
@@ -24,12 +24,12 @@ Paper is also declared on the document root at zero specificity, so a preset or
 
 ## The idea, applied
 
-- **Colour.** Warm-neutral paper (hue 85, chroma no more than 0.008) and graphite ink. The primary action, the current item and live state are solid ink, and links are ink told apart by their underline. The one other hue is the editor's non-photo blue, kept for "you", the selected row and text selection. Tones are the only saturated colour on the page.
-- **Type.** Schibsted Grotesk for everything you scan (text, headings, and display at weight 640 with −0.04em tracking), Newsreader for long reading and for figures, whose tabular punctuation sits tighter, and Martian Mono for code. A 16px base on a 1.25 ratio.
-- **Shape.** Square-shouldered: 6px actions, fields and chips, 8px surfaces, round avatars.
-- **Depth.** Hairlines only. Soft graphite shadows for floating layers.
+- **Colour.** Cool grey stock for the canvas and near-white sheets for surfaces, so a surface reads against the page by fill alone. The primary action, the current item and live state are solid blue-black ink, and links are ink told apart by their underline. The one other hue is the proofreader's non-photo blue, kept for "you", the selected row and text selection. Tones are the only saturated colour on the page.
+- **Type.** Golos Text for everything: text, headings, display, prose and figures. Atkinson Hyperlegible Mono for code. Paratype drew Golos for a national public-services website, so it has a plain zero, true tabular figures and distinct I, l and 1, and that is why it is here. The bundle has no italic file, so italics are synthesised. There is no serif. A 16px base on a 1.25 ratio.
+- **Shape.** Square-shouldered actions and fields, slightly rounder surfaces, and pill chips as the one deliberate contrast. Round avatars.
+- **Depth.** A fill change rather than a border: a sheet on stock needs no edge. Soft blue-black shadows for floating layers.
 - **Motion.** A quart ease-out, brisk, with no bounce.
 
-## All four themes
+## All six themes
 
 The same screen in each built-in theme, in the page's current mode:

package/skills/setup-and-theming/references/riso.md

@@ -0,0 +1,32 @@
+<!-- Generated from the Kiln docs by apps/docs/src/skills. Edit the docs pages, then run `pnpm generate:skills`. -->
+
+# Riso
+
+> A two-drum risograph zine. Fluorescent pink and blue on white stock, screen tints instead of borders, and Shantell Sans.
+
+Source: https://kiln.mitchellsutton.com/docs/ui/themes/riso
+
+_A two-drum risograph zine._ A riso print can't do gradients or soft shadows. It does flat spot ink, screen tints and the occasional misregistration, so that is all Riso uses: two inks on bright white stock, set in a typeface drawn from handwriting.
+
+
+## Use it
+
+```tsx
+import '@mitcsutt/kiln-ui/styles.css'
+import '@mitcsutt/kiln-ui/themes/riso.css'
+import { ThemeProvider } from '@mitcsutt/kiln-ui'
+
+;<ThemeProvider theme="riso" defaultMode="light">
+  …
+</ThemeProvider>
+```
+
+Riso's face is declared in its own stylesheet, so it costs nothing unless you import it. It's light-first, and dark mode is the deep-blue-stock edition.
+
+## The idea, applied
+
+- **Colour.** Two drums: fluorescent pink is the accent and blue is the text colour, on bright white stock. Surfaces are screen tints (a percentage of an ink) rather than borders. The highlight is an overprint: a pink tint under blue ink. Night mode is the same two inks printed on deep blue stock, not black.
+- **Type.** Shantell Sans for every role except code, drawn from the artist Shantell Martin's own handwriting. It has no tabular figures, so numerals are not column-aligned. Atkinson Hyperlegible Mono is for code. A 1.25 ratio.
+- **Shape.** Hand-cut and mixed: generous radii on actions and surfaces, smaller radii on fields, and pill chips.
+- **Depth.** A fill change, with no shadow on static surfaces. The one misregistered moment is a hard pink offset on floating layers, as if the second drum printed slightly off.
+- **Motion.** A mild spring: things land with a small overshoot.