Fishies 0.8.25

src/tokens.generated.css

@@ -38,6 +38,61 @@
   --fx-cream: #f3dfb2;
   --fx-plum: #36203f;
   
+  --fx-paper: #fbf1da;
+  --fx-paper-white: #fffaf0;
+  --fx-paper-lift: #fff8e6;
+  --fx-paper-well: #e9d6ad;
+  --fx-paper-hover: #f1e2c0;
+  --fx-paper-edge: #b98d55;
+  --fx-paper-rim: #f6d987;
+  --fx-paper-ink: #3b2414;
+  --fx-paper-ink-2: #6b4a2e;
+  --fx-paper-ink-3: #8a6a4a;
+  --fx-paper-tag: #c0392b;
+  --fx-paper-ready: #5c8a3a;
+  --fx-paper-gold: linear-gradient(#ffe08a, #f2b23c);
+  --fx-paper-gold-edge: #a86f12;
+  --fx-paper-gold-ring: #f2b23c;
+  --fx-paper-alarm: #8a2c17;
+  --fx-paper-teal: #2d9682;
+  --fx-focus-glow: #ffe08a;
+  
+  --fx-wood-face: linear-gradient(#8f5a2b, #6a3f1c);
+  --fx-wood-edge: #43270f;
+  --fx-wood-rail: #6a3f1c;
+  --fx-wood-ink: #fff3d6;
+  --fx-wood-cord: #7a5a33;
+  
+  --fx-medal-bronze: linear-gradient(180deg, #f0b583, #c47a43);
+  --fx-medal-bronze-light: #f0b583;
+  --fx-medal-bronze-foot: #8a5228;
+  --fx-medal-bronze-ink: #3b1d08;
+  --fx-medal-silver: linear-gradient(180deg, #ffffff, #b9c6d4);
+  --fx-medal-silver-foot: #8090a4;
+  --fx-medal-silver-ink: #23304f;
+  --fx-medal-gold: linear-gradient(180deg, #fff0bf, #f3b53f);
+  
+  --fx-quality-bronze: #cf8f52;
+  --fx-quality-silver: #d6dee6;
+  --fx-quality-gold: #f3c453;
+  --fx-quality-diamond: #a8ecff;
+  --fx-quality-purple: #c59bff;
+  --fx-quality-silver-paper: #aab7c4;
+  --fx-quality-gold-paper: #e3ad2f;
+  --fx-quality-diamond-paper: #58c6e8;
+  --fx-quality-purple-paper: #9d68e8;
+  
+  --fx-brass-face: linear-gradient(180deg, #fff0bf 0%, #f0cd78 22%, #c99a45 60%, #a87a2e 100%);
+  --fx-brass-edge: #5a3a12;
+  --fx-brass-foot: #2a170c;
+  --fx-brass-shine: #fff6d8;
+  --fx-brass-ink: #3a2416;
+  --fx-brass-glint: #ffe8b0;
+  --fx-brass-wood: #3b2a1d;
+  --fx-brass-shadow: rgb(20 8 2 / 45%);
+  --fx-brass-plate: 0 3px 0 #2a170c, inset 0 1px #fff6d8, 0 6px 12px rgb(20 8 2 / 45%);
+  --fx-brass-drop: 0 8px 10px rgb(20 8 2 / 50%);
+  
   --fx-glass-top: rgb(22 58 120 / 70%);
   --fx-glass-bottom: rgb(8 26 66 / 88%);
   --fx-glass-quiet-top: rgb(22 58 120 / 62%);

src/tokens.ts

@@ -8,7 +8,7 @@ export type Token = {
 }
 
 export type TokenGroup = {
-  readonly id: 'brand' | 'water' | 'ink' | 'gold' | 'tone' | 'glass' | 'rim' | 'depth' | 'type' | 'radius' | 'space' | 'layer' | 'motion'
+  readonly id: 'brand' | 'water' | 'ink' | 'gold' | 'tone' | 'paper' | 'wood' | 'medal' | 'quality' | 'brass' | 'glass' | 'rim' | 'depth' | 'type' | 'radius' | 'space' | 'layer' | 'motion'
   readonly title: string
   readonly use: string
 
@@ -82,6 +82,86 @@ export const TOKEN_GROUPS: readonly TokenGroup[] = [
       { name: '--fx-plum', value: '#36203f', use: 'Plum: the landing’s deep warm shadow under cream.' },
     ],
   },
+  {
+    id: 'paper', title: 'Paper', swatch: 'colour',
+    use: 'The warm card the game writes on when a room opens a sheet over its painting: paper, three weights of brown ink, and the tan edge that gives it a foot.',
+    tokens: [
+      { name: '--fx-paper', value: '#fbf1da', use: 'The card itself: a room sheet, a close button, a small mark.' },
+      { name: '--fx-paper-white', value: '#fffaf0', use: 'A field written into: the lightest paper.' },
+      { name: '--fx-paper-lift', value: '#fff8e6', use: 'Paper lit from above: a card button under the pointer.' },
+      { name: '--fx-paper-well', value: '#e9d6ad', use: 'A pressed-in place on paper: a button, a mark, a tile.' },
+      { name: '--fx-paper-hover', value: '#f1e2c0', use: 'A well under the pointer.' },
+      { name: '--fx-paper-edge', value: '#b98d55', use: 'The tan foot under a card or button, and its hairlines.' },
+      { name: '--fx-paper-rim', value: '#f6d987', use: 'The pale gold ring round a tag standing off a card.' },
+      { name: '--fx-paper-ink', value: '#3b2414', use: 'Brown ink: titles and values on paper.' },
+      { name: '--fx-paper-ink-2', value: '#6b4a2e', use: 'Sentences on paper.' },
+      { name: '--fx-paper-ink-3', value: '#8a6a4a', use: 'Captions and labels on paper.' },
+      { name: '--fx-paper-tag', value: '#c0392b', use: 'A red tag on a shelf: a count, a warning.' },
+      { name: '--fx-paper-ready', value: '#5c8a3a', use: 'A green tag: ready, on offer.' },
+      { name: '--fx-paper-gold', value: 'linear-gradient(#ffe08a, #f2b23c)', use: 'A gold button or chip on paper: the chosen kind, the way forward.' },
+      { name: '--fx-paper-gold-edge', value: '#a86f12', use: 'The foot under that gold.' },
+      { name: '--fx-paper-gold-ring', value: '#f2b23c', use: 'The ring round a chosen tag or an own listing.' },
+      { name: '--fx-paper-alarm', value: '#8a2c17', use: 'A warning in ink on paper: held back, refused.' },
+      { name: '--fx-paper-teal', value: '#2d9682', use: 'The band of recent sales over a price slider.' },
+      { name: '--fx-focus-glow', value: '#ffe08a', use: 'The pale gold of a focus ring or a lit hover on a painted room.' },
+    ],
+  },
+  {
+    id: 'wood', title: 'Wood', swatch: 'colour',
+    use: 'The stall’s own timber: the plaques and buttons that stand on the counter beside paper and gold.',
+    tokens: [
+      { name: '--fx-wood-face', value: 'linear-gradient(#8f5a2b, #6a3f1c)', use: 'A wooden plaque or button, lit from above.' },
+      { name: '--fx-wood-edge', value: '#43270f', use: 'The dark foot under it.' },
+      { name: '--fx-wood-rail', value: '#6a3f1c', use: 'The frame round a shelf board.' },
+      { name: '--fx-wood-ink', value: '#fff3d6', use: 'Cream lettering on wood.' },
+      { name: '--fx-wood-cord', value: '#7a5a33', use: 'The cord a tag hangs by.' },
+    ],
+  },
+  {
+    id: 'medal', title: 'Medal', swatch: 'colour',
+    use: 'Bronze, silver and gold: a tier’s flag, a rank’s disc, the tint of a tier named in words.',
+    tokens: [
+      { name: '--fx-medal-bronze', value: 'linear-gradient(180deg, #f0b583, #c47a43)', use: 'Bronze, lit from above.' },
+      { name: '--fx-medal-bronze-light', value: '#f0b583', use: 'Bronze as lettering on dark water.' },
+      { name: '--fx-medal-bronze-foot', value: '#8a5228', use: 'The foot under a bronze disc.' },
+      { name: '--fx-medal-bronze-ink', value: '#3b1d08', use: 'Lettering on bronze.' },
+      { name: '--fx-medal-silver', value: 'linear-gradient(180deg, #ffffff, #b9c6d4)', use: 'Silver, lit from above.' },
+      { name: '--fx-medal-silver-foot', value: '#8090a4', use: 'The foot under a silver disc.' },
+      { name: '--fx-medal-silver-ink', value: '#23304f', use: 'Lettering on silver.' },
+      { name: '--fx-medal-gold', value: 'linear-gradient(180deg, #fff0bf, #f3b53f)', use: 'Gold, lit from above.' },
+    ],
+  },
+  {
+    id: 'quality', title: 'Quality', swatch: 'colour',
+    use: 'The stone that marks a fish’s quality, one colour per grade, on dark water and (deeper) on paper.',
+    tokens: [
+      { name: '--fx-quality-bronze', value: '#cf8f52', use: 'Bronze quality, on water and on paper.' },
+      { name: '--fx-quality-silver', value: '#d6dee6', use: 'Silver quality on water.' },
+      { name: '--fx-quality-gold', value: '#f3c453', use: 'Gold quality on water.' },
+      { name: '--fx-quality-diamond', value: '#a8ecff', use: 'Diamond quality on water.' },
+      { name: '--fx-quality-purple', value: '#c59bff', use: 'Purple quality on water.' },
+      { name: '--fx-quality-silver-paper', value: '#aab7c4', use: 'Silver quality on paper.' },
+      { name: '--fx-quality-gold-paper', value: '#e3ad2f', use: 'Gold quality on paper.' },
+      { name: '--fx-quality-diamond-paper', value: '#58c6e8', use: 'Diamond quality on paper.' },
+      { name: '--fx-quality-purple-paper', value: '#9d68e8', use: 'Purple quality on paper.' },
+    ],
+  },
+  {
+    id: 'brass', title: 'Brass', swatch: 'colour',
+    use: 'The plates a painted room hangs on its walls: a name, a door, a thing to open. A brass face with a dark edge, a solid foot and a bright top line.',
+    tokens: [
+      { name: '--fx-brass-face', value: 'linear-gradient(180deg, #fff0bf 0%, #f0cd78 22%, #c99a45 60%, #a87a2e 100%)', use: 'The plate itself, lit from above.' },
+      { name: '--fx-brass-edge', value: '#5a3a12', use: 'The dark border round a plate.' },
+      { name: '--fx-brass-foot', value: '#2a170c', use: 'The solid foot under a plate, and the shade of a painted room.' },
+      { name: '--fx-brass-shine', value: '#fff6d8', use: 'The bright line along a plate’s top edge.' },
+      { name: '--fx-brass-ink', value: '#3a2416', use: 'Lettering on a plate, and the dark dot of a door’s arrow.' },
+      { name: '--fx-brass-glint', value: '#ffe8b0', use: 'The arrow on that dark dot.' },
+      { name: '--fx-brass-wood', value: '#3b2a1d', use: 'The wall colour behind a room’s painting while it loads.' },
+      { name: '--fx-brass-shadow', value: 'rgb(20 8 2 / 45%)', use: 'The soft shadow a plate throws on the painting.' },
+      { name: '--fx-brass-plate', value: '0 3px 0 #2a170c, inset 0 1px #fff6d8, 0 6px 12px rgb(20 8 2 / 45%)', use: 'A plate’s whole lift: foot, top line and shadow.' },
+      { name: '--fx-brass-drop', value: '0 8px 10px rgb(20 8 2 / 50%)', use: 'The shadow under a painted door or object standing in the room.' },
+    ],
+  },
   {
     id: 'glass', title: 'Glass', swatch: 'surface',
     use: 'The one material everything floats on: tinted water glass with a sheen across its top.',