Fishies 0.8.23

This commit is contained in:
CRTkafa 2026-11-09 08:38:00 +00:00
parent 1d6c8a87c5
commit 911e8a8659
6 changed files with 14 additions and 8 deletions

View file

@ -37,7 +37,7 @@ import '@fishies/ui/kit.css' // the components
import { Button, Panel, configureIcons } from '@fishies/ui' import { Button, Panel, configureIcons } from '@fishies/ui'
// The icons ship in this package under icons/. Serve that folder, or point at a CDN copy: // The icons ship in this package under icons/. Serve that folder, or point at a CDN copy:
configureIcons({ url: icon => `https://cdn.jsdelivr.net/npm/@fishies/ui@0.8.15/icons/${icon.name}.png` }) configureIcons({ url: icon => `https://cdn.jsdelivr.net/npm/@fishies/ui@0.8.23/icons/${icon.name}.png` })
export function Shop() { export function Shop() {
return <Panel title="Shop" icon="shop"> return <Panel title="Shop" icon="shop">
@ -62,4 +62,4 @@ stylesheet that does, and every component animates with them; leave them out and
| `icons/` | the painted icon set, one PNG per name, each twice its largest display size | | `icons/` | the painted icon set, one PNG per name, each twice its largest display size |
| `handbook/` | the Fishies Handbook as Markdown | | `handbook/` | the Fishies Handbook as Markdown |
Version 0.8.15: the minor version follows the Fishies release it was taken from; a patch is a fix to the kit itself. Version 0.8.23: the minor version follows the Fishies release it was taken from; a patch is a fix to the kit itself.

View file

@ -10,8 +10,9 @@ The five colours every store page, capsule, banner, the site and the Reef Journa
| Token | Value | Use | | Token | Value | Use |
| --- | --- | --- | | --- | --- | --- |
| `--fx-ground` | `#071a24` | The night-water ground behind the site, the Reef Journal and every brand picture. | | `--fx-ground` | `#0d4c78` | The ocean-blue ground behind the site, the Reef Journal and every brand picture. |
| `--fx-ground-ink` | `#edf5ed` | Words on the ground: headings and links on the site. | | `--fx-ground-ink` | `#edf5ed` | Words on the ground: headings and links on the site. |
| `--fx-on-gold` | `#06283f` | Dark words on a gold or other light fill: the current news tab, the go button of the installer. |
| `--fx-gold` | `#ffc46b` | The one warm accent: the thing to press, the coin, the playhead, a focus ring. | | `--fx-gold` | `#ffc46b` | The one warm accent: the thing to press, the coin, the playhead, a focus ring. |
| `--fx-sea` | `#83cfbd` | Sea-green for links and quiet highlights on the ground. | | `--fx-sea` | `#83cfbd` | Sea-green for links and quiet highlights on the ground. |
| `--fx-muted` | `#adc3c7` | Body copy on the ground, a step quieter than the headings. | | `--fx-muted` | `#adc3c7` | Body copy on the ground, a step quieter than the headings. |

View file

@ -1,6 +1,6 @@
{ {
"name": "@fishies/ui", "name": "@fishies/ui",
"version": "0.8.15", "version": "0.8.23",
"description": "The Fishies UI kit: reef-toy components, design tokens and the painted system icon set from the social aquarium game Fishies.", "description": "The Fishies UI kit: reef-toy components, design tokens and the painted system icon set from the social aquarium game Fishies.",
"keywords": [ "keywords": [
"fishies", "fishies",

View file

@ -407,7 +407,8 @@ export const ICON_FACTS: Readonly<Record<string, { readonly px: number; readonly
"px": 168, "px": 168,
"sharpTo": 84, "sharpTo": 84,
"usedBy": [ "usedBy": [
"Game" "Game",
"Keeper OS"
] ]
}, },
"reply": { "reply": {
@ -674,7 +675,9 @@ export const ICON_FACTS: Readonly<Record<string, { readonly px: number; readonly
"download": { "download": {
"px": 168, "px": 168,
"sharpTo": 84, "sharpTo": 84,
"usedBy": [] "usedBy": [
"Game"
]
}, },
"mail": { "mail": {
"px": 168, "px": 168,

View file

@ -1,7 +1,8 @@
:root { :root {
--fx-ground: #071a24; --fx-ground: #0d4c78;
--fx-ground-ink: #edf5ed; --fx-ground-ink: #edf5ed;
--fx-on-gold: #06283f;
--fx-gold: #ffc46b; --fx-gold: #ffc46b;
--fx-sea: #83cfbd; --fx-sea: #83cfbd;
--fx-muted: #adc3c7; --fx-muted: #adc3c7;

View file

@ -23,8 +23,9 @@ export const TOKEN_GROUPS: readonly TokenGroup[] = [
id: 'brand', title: 'Brand', swatch: 'colour', id: 'brand', title: 'Brand', swatch: 'colour',
use: 'The five colours every store page, capsule, banner, the site and the Reef Journal sit on.', use: 'The five colours every store page, capsule, banner, the site and the Reef Journal sit on.',
tokens: [ tokens: [
{ name: '--fx-ground', value: '#071a24', use: 'The night-water ground behind the site, the Reef Journal and every brand picture.' }, { name: '--fx-ground', value: '#0d4c78', use: 'The ocean-blue ground behind the site, the Reef Journal and every brand picture.' },
{ name: '--fx-ground-ink', value: '#edf5ed', use: 'Words on the ground: headings and links on the site.' }, { name: '--fx-ground-ink', value: '#edf5ed', use: 'Words on the ground: headings and links on the site.' },
{ name: '--fx-on-gold', value: '#06283f', use: 'Dark words on a gold or other light fill: the current news tab, the go button of the installer.' },
{ name: '--fx-gold', value: '#ffc46b', use: 'The one warm accent: the thing to press, the coin, the playhead, a focus ring.' }, { name: '--fx-gold', value: '#ffc46b', use: 'The one warm accent: the thing to press, the coin, the playhead, a focus ring.' },
{ name: '--fx-sea', value: '#83cfbd', use: 'Sea-green for links and quiet highlights on the ground.' }, { name: '--fx-sea', value: '#83cfbd', use: 'Sea-green for links and quiet highlights on the ground.' },
{ name: '--fx-muted', value: '#adc3c7', use: 'Body copy on the ground, a step quieter than the headings.' }, { name: '--fx-muted', value: '#adc3c7', use: 'Body copy on the ground, a step quieter than the headings.' },