{ "id": "v1-br-1b11-dc", "long_id": "v1.brutalism.blog.s01.p11.t01.u01.dc", "name": "Web brutalism, 2017", "era": { "slug": "brutalism", "code": "br", "name": "Web brutalism", "years": [ 2014, 2019 ], "description": "The reaction to polish, 2014 to 2019: raw default-looking pages, system and monospace type, hard black rules, harsh or absent colour, and layouts that show their structure instead of hiding it." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "density": "compact", "summary": "A page that looks undesigned on purpose, as published between 2014 and 2019 by people reacting against polished, template-built sites: the browser's own serif at the browser's own sizes, black on white, blue underlined links that turn purple once visited, and hard black rules where other styles would use cards. Nothing is rounded, tinted or animated, and the only relief is the browser's own 1px bevel on a push button; structure comes from the order of the HTML, from 1px and 2px lines, from ruled tables and bulleted lists, and from one oversized bold headline. It was the common look of personal logs, link lists, manifestos and small tools whose authors wanted the page to load instantly and to say so.", "url": "https://chrono.skin/s/v1-br-1b11-dc", "preview_url": "https://chrono.skin/s/v1-br-1b11-dc/specimen.html", "files": { "STYLE.md": "# Web brutalism, 2017\n\n## Summary\n\nA page that looks undesigned on purpose, as published between 2014 and 2019 by people reacting against polished, template-built sites: the browser's own serif at the browser's own sizes, black on white, blue underlined links that turn purple once visited, and hard black rules where other styles would use cards. Nothing is rounded, tinted or animated, and the only relief is the browser's own 1px bevel on a push button; structure comes from the order of the HTML, from 1px and 2px lines, from ruled tables and bulleted lists, and from one oversized bold headline. It was the common look of personal logs, link lists, manifestos and small tools whose authors wanted the page to load instantly and to say so.\n\n## Layout\n\n- The page is fluid: `.ds-page__frame` is `--size-page` (100%) wide and starts `--space-3` (8px, the browser's body margin) from the window edge on every side. It is never centred in a narrow column and never given a maximum width; text lines run as long as the window allows.\n- Order from the top: `.ds-nav` (the brand, a ruled square mark and the site name, with a one-line tagline beside it, then one line of links cut by `|`, then a 2px rule across the page), `.ds-page__columns`, `.ds-footer`.\n- `.ds-page__columns` holds `.ds-page__main`, which takes all remaining width, and `.ds-sidebar` at `--size-sidebar` (300px) on the right behind a 1px vertical rule. The sidebar is always on the right. A page that needs no sidebar leaves it out and the main column fills the window.\n- The main column is one stack in source order. Blocks are `.ds-page__section`, `--space-5` (24px) apart, with a bold `.ds-page__label` line above when the block needs a name. Blocks are separated by that gap or by a rule (`.ds-page__rule`, or the component's own border), never by cards, tints or large whitespace.\n- Inner pages (an archive, a single entry, a table of readings, an about page) keep the same header, the same line of links, the same two columns and the same footer. The `.ds-breadcrumb` sits directly under the 2px rule of the navigation, above the columns. The hero is not used: the main column opens with `.ds-page-header` (32px title, one line of description, one button at the right, a 2px rule below). Under it, in this order when present: the `.ds-stats` line, `.ds-tabs` with the table or list in `.ds-tabs__body`, `.ds-pagination`, then a `.ds-page__rule` and the form. Tabs are a line of text links under the page header, never part of the navigation. The sidebar carries lists that belong to that page, enough of them that the two columns end near each other.\n- Views. The specimen is one small site with five views, one showing at a time; the header, the line of links and the footer are written once around them. `log` is the home page: hero, the newest entry in full, earlier entries as a list, the sections grid. `archive` is a year of entries: figures, tabs over the table, pagination, and the empty state of a section with nothing in it. `entry` is one entry with its comments, the notice that a comment is held, the confirmation for deleting a comment, and the comment form with its error. `readings` is a month of daily figures in a grouped table. `about` is running text, the one boxed note and the list of other logs. A view is `
`; links between views are plain `href=\"#id\"`.\n- Below 800px the columns stack: the sidebar goes under the main column behind a 1px rule, the hero headline drops to `--text-h1`, figures go two to a line, the grid becomes two columns and form labels sit above their fields.\n- Spacing scale: `--space-1` 2px is the vertical padding of the link bar, buttons and inputs; `--space-2` 4px is the padding of table cells, panel titles and tags and the gap under a title; `--space-3` 8px is the page margin, the padding of panels, notices, grid cells and list rows and the gap between buttons; `--space-4` 16px is the gap between paragraphs, under headings and between the columns; `--space-5` 24px is the gap between blocks and the indent of sidebar lists; `--space-6` 40px is the indent of lists and quotations in running text.\n- Fixed sizes: `--size-label` 140px is the label column of a form, `--size-field` 320px a text input (a textarea is twice that), `--size-num` 120px a numeric table column, `--size-dialog` 420px a dialog.\n- On a phone (560px and below) there is no menu button: `.ds-nav__bar` stays a wrapping line of its links, but each `.ds-nav__item` after the first stretches (`flex: 1 1 auto`) and its `|` separator takes the free space, so the links spread across the full width. The current page stays an inverted block.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- `--font-body` and `--font-heading` are \"Times New Roman\", Times, serif: the browser's default. `--font-ui` is Arial, Helvetica, sans-serif at `--text-ui` 13px, the look of an unstyled form control; it is used for buttons, inputs, the count badge and the line of navigation links. `--font-mono` is \"Courier New\", Courier, monospace, for code and entry dates. All are system fonts; nothing was substituted.\n- `--text-base` 16px with `--line-body` 1.2 is all running text. `--text-small` 13px is meta lines, hints, the tagline, code and the footer. `--text-large` 18px is the hero's lead line and list titles.\n- Headings are the browser's: `--text-h1` 32px, `--text-h2` 24px, `--text-h3` 19px, all bold, `--line-heading` 1.1, never uppercased, never tracked. `--text-display` 48px bold at `--line-display` 1 is the hero headline and the largest text on a page; the name in the brand is 32px.\n- `--color-text` and `--color-heading` are #000000 on `--color-page` #ffffff. `--color-text-muted` #767676 is dates, counts and meta lines. `--color-heading-alt` #000080 (navy) is sidebar titles.\n- `--color-link` #0000ee, `--color-link-visited` #800080, `--color-link-hover` #000080, `--color-link-active` #ff0000: the browser's link colours. Every link is underlined at rest: `--link-decoration`, `--link-decoration-quiet` and `--link-decoration-hover` are all `underline`. `--color-link-quiet` equals the link colour.\n- `--color-bar` is #ffffff with #000000 text: the link bar, table heads and dialog titles are plain bold text on the page, told apart only by rules. `--color-bar-alt` (footer) is the same. Text on a bar is always `--color-bar-text`, on the footer `--color-bar-alt-text`.\n- `--color-inverse` #000000 with `--color-inverse-text` #ffffff is the one inverted block: the current item of the navigation.\n- `--color-border` and `--color-border-strong` are #000000. `--border-width` 1px is table cells, panels, grid cells, list rows and the sidebar rule; `--border-width-strong` 2px is the rule under the navigation, hero and page header, the top of the footer, and the outline of notices and dialogs. `--color-border-muted` #808080 is unused by the specimen and kept for faint dividers.\n- Surfaces: `--color-surface` #ffffff for table cells and panels, `--color-surface-alt` #f7f7f7 for alternate table rows, `--color-surface-strong` #efefef for panel titles and group rows. `--color-fill-1` to `--color-fill-4` repeat these three; grid cells are told apart by their rules, not their fills. Text on any surface or fill is `--color-text`.\n- `--color-accent` #000080 with `--color-accent-text` #ffffff is the count badge. `--color-accent-alt` #ff0000 is only the asterisk in front of a \"new\" marker, never text.\n- Status colours are the sixteen-colour set the links come from: `--color-success` #008000, `--color-warning` #808000, `--color-danger` #ff0000. They colour bold bracketed words and error text; `--color-danger` with `--color-danger-surface` is also the error notice and the destructive button. Green and olive were not measured in a reference; they are the nearest members of the same set.\n- Controls are the browser's, squared: buttons are `--color-button` #efefef with black 13px Arial and a `--border-width` edge in `--color-input-border` #767676 drawn in `--border-style`; inputs are white with the same edge. `--shadow-control` is a 1px bevel, two inset lines mixed from the button colour (lighter at the top and left, darker at the bottom and right) with no blur; `--shadow-control-pressed` turns it over and `--fill-button-hover` darkens the button a little. Another surface set may replace the bevel with nothing, an offset or a heavy underside; the layout only asks for the tokens. A pressed button takes `--color-border-strong`; a disabled one `--color-border-muted`.\n- Each text token is used only on its own fill: `--color-bar-text` on `--fill-bar`, `--color-bar-alt-text` on `--fill-bar-alt`, `--color-inverse-text` on `--fill-inverse`, `--color-accent-text` on `--fill-accent`, `--color-button-text` on `--fill-button`, `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface` or the page. Keep to this so that other palettes work with the same structure.\n- Hover, active and focus were not measurable on static captures; they use the browser's defaults. Focus is a 1px dotted outline. All radii are 0; panels and dialogs have no shadow; every fill is its plain palette colour.\n\n- Black on white with the browser's own blue: `--color-page`, `--color-canvas` and `--color-surface` are #ffffff; `--color-text`, `--color-heading`, `--color-heading-alt` and every border are #000000; `--color-text-muted` is #444444.\n- `--color-link`, `--color-link-quiet`, `--color-link-visited` and `--color-focus` are #0000ee, the default link colour: on a text-only front page nearly everything is a blue underlined link and visited links are not told apart. `--color-link-hover` and `--color-link-active` are #cc0000.\n- `--color-bar` #000000 with white `--color-bar-text` is the black line of navigation, table heads and dialog titles. `--color-bar-alt` (footer) is white with black text. `--color-inverse` #0000ee with white text is the current navigation item.\n- The only tints are the faint blues that a blue link leaves around itself: `--color-surface-alt` #f8f8ff, `--color-surface-strong`, `--color-notice` and `--color-disabled` #f0f0ff, `--color-fill-4` and `--color-overlay` #d8d8ff, `--color-border-muted` #b8b8f8. `--color-fill-1` to `--color-fill-3` repeat white and the two faintest.\n- `--color-accent` #cc0000 with white text is the count badge, the one red on the page; `--color-accent-alt` is the same red, as a mark.\n- Buttons are white with a black edge: the primary has black text, the secondary blue text. Inputs are white with a black edge.\n- Status: `--color-danger` #cc0000 is measured; `--color-success` #006400 and `--color-warning` #8a4b00 are derived, dark enough to read on white.\n\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page` on ``: page colour, 8px margin and base type. Everything goes in `.ds-page__frame`; the columns in `.ds-page__columns` with `.ds-page__main` first. `.ds-page__section` is a block of the main column (`--last` drops its bottom gap), `.ds-page__label` its bold caption, `.ds-page__rule` a 2px rule across the column.\n- `.ds-nav`: site header closed by a 2px rule. `.ds-nav__head` holds the `.ds-brand` and `.ds-nav__tagline`, centred on one line. `.ds-nav__bar` is a list of `.ds-nav__item`, each holding one `.ds-nav__link`; the `|` between items is drawn by the stylesheet. The current page is an inverted block: the stylesheet marks the link whose `href` names the view that is showing (one selector per view, and the home link when the address names none); on a page of its own, give the link `is-current`.\n- `.ds-brand`: the site's mark and name, a link to the home page, first thing in the header. `.ds-brand__mark` is a plain ruled square as tall as the name (1.2 times `--text-h1`), dressed like the push button: `--fill-button`, the same edge in `--color-input-border` and the same bevel, the mark drawn in `--color-button-text` with square line caps; no radius and no shadow beyond what the tokens give. `.ds-brand__name` is 32px bold underlined text in `--color-heading`. The name `chronoskin` and the mark are placeholders for the installing project's own name and logo.\n- `.ds-breadcrumb`: a line of `.ds-breadcrumb__link` items with `.ds-breadcrumb__sep` (`>`) between them, ending in a bold `.ds-breadcrumb__current`.\n- `.ds-hero`: the introduction of the home page: `.ds-hero__title` (48px bold, line height 1), one `.ds-hero__lead` line at 18px and `.ds-hero__actions` with one button and one text link, closed by a 2px rule. No box, no fill, no centring.\n- `.ds-page-header`: the head of an inner page, instead of the hero: `.ds-page-header__main` with `.ds-page-header__title` (32px) and one `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button. A 2px rule closes it.\n- `.ds-stat`: one figure: a bold 24px `.ds-stat__value` followed on the same line by its `.ds-stat__label` in body text. Three to five sit in a `.ds-stats` row between two 1px rules, divided by 1px vertical rules. It is a line of a ruled table, not a set of cards.\n- `.ds-post`: one entry: `.ds-post__date` in monospace above, a `.ds-prose` body, `.ds-post__meta` below with quiet links separated by `|`.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, disc-bulleted and numbered lists indented 40px, `code` in 13px monospace with no background, `blockquote` indented 40px on both sides with no rule.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is for meta and tool links; `.ds-link--strong` is bold. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: the default push button, a `\n \n \n
\n

Sections

\n \n
\n
\n

Recently

\n \n
\n
\n

This month

\n
\n

Rain against a usual March 75%

\n
\n
\n \n
\n
\n

Elsewhere

\n \n
\n
\n

By year

\n \n
\n
\n

How this is made

\n

Typed into a text file and copied to a server. No tracking, no fonts to download, nothing that moves. More

\n
\n \n \n
\n\n \n
\n
    \n
  1. log
    2. \n
  2. >
    3. \n
  3. archive
    4. \n
  4. >
    5. \n
  5. 2017
    6. \n
\n
\n
\n\n
\n
\n

Archive for 2017

\n

Every entry written this year, newest month first.

\n
\n
\n
\n\n
    \n
  • 57 entries
    • \n
  • 483 comments
    • \n
  • 212.6 mm of rain
    • \n
  • 31,400 words
    • \n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
MonthLongest entryDiscussionComments
March 2017The rain gauge finally agrees with the bucketopen43
February 2017The barometer is wrong againopen118
January 2017Fog, four days of itclosing96
December 2016A year of high waterclosed72
November 2016The gauge post goes inclosed154
\n
\n
\n\n
\n \n
\n\n
\n

Filed under snow

\n
\n

Nothing is filed under “snow” yet. It has not snowed.

\n Back to the log\n
\n
\n\n
\n\n \n
\n
\n\n \n
\n
    \n
  1. log
    2. \n
  2. >
    3. \n
  3. instruments
    4. \n
  4. >
    5. \n
  5. A wind vane made from a baking tray
    6. \n
\n
\n
\n\n
\n
\n

A wind vane made from a baking tray

\n

2017-03-09 18:10, filed under instruments. Comments are open until 2017-04-08.

\n
\n
All entries
\n
\n\n
\n
\n

The shop vane lasted one winter. This one is a baking tray cut along the diagonal, a bicycle spoke and the bearing out of a dead hard disk, and it has now pointed the right way for eleven days running.

\n

It turns in less wind than the old one did. That is the bearing, not the tray: the tray is only there because it was flat and already ruined.

\n
If it looks home-made, that is because it is. The wind does not mind.
\n

Readings from it go into the same table as everything else, eight compass points and no more, because that is as well as anyone can read a tray from a kitchen window.

\n
\n
\n\n
\n

4 comments

\n
\n

Received. Your comment is held until someone has read it. That can take a day.

\n
\n
    \n
  • \n jpJonas Pell\n

    What stops it spinning right round in a gust? Mine did, and then it unscrewed itself.

    \n

    2017-03-09 22:05 | reply | delete

    \n
    • \n
  • \n ivInes Varga\n

    Nothing stops it. The spoke is bent over at the top, so it can spin as long as it likes.

    \n

    2017-03-10 07:31 | reply

    \n
    • \n
  • \n maMarit Aas\n

    A tray is steel. Give it a year by the sea and you will be writing this entry again.

    \n

    2017-03-11 12:48 | reply

    \n
    • \n
\n
\n\n
\n
\n
\n

Delete your comment?

\n
\n

The comment you posted at 22:05 will be removed from this entry. This cannot be undone.

\n
\n \n Cancel\n
\n
\n
\n
\n
\n\n
\n\n
\n
\n

Leave a comment

\n

Not posted. One field below needs another look. Nothing has been sent.

\n
\n \n
\n
\n
\n \n
\n \n

That is not an e-mail address.

\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n \n

Plain text. Line breaks are kept; addresses become links.

\n
\n
\n
\n \n \n
\n
\n \n \n \n \n
\n
\n
\n\n
\n\n \n
\n
\n\n \n
\n
    \n
  1. log
    2. \n
  2. >
    3. \n
  3. readings
    4. \n
  4. >
    5. \n
  5. March 2017
    6. \n
\n
\n
\n\n
\n
\n

Readings, March 2017

\n

One line a day, taken at 09:00. Nothing is smoothed or corrected.

\n
\n
\n
\n\n
    \n
  • 61.4 mm of rain
    • \n
  • 71 km/h, strongest gust
    • \n
  • 5.92 m, highest tide
    • \n
  • -2.1 °C, coldest night
    • \n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DayWindStateRain, mmHigh tide, mNight low, °C
Week 11
Tue 14SW, freshread4.25.316.4
Mon 13W, strongread18.65.487.0
Week 10
Sun 12W, galeestimated21.05.925.2
Sat 11NW, lightread0.05.601.8
Fri 10N, lightread0.05.44-2.1
Thu 9not readmissing7.85.710.3
Wed 8S, moderateread2.45.394.9
Tue 7SE, lightread0.25.123.3
\n
\n
\n\n
\n \n
\n\n
\n\n \n
\n
\n\n \n
\n
    \n
  1. log
    2. \n
  2. >
    3. \n
  3. about
    4. \n
\n
\n
\n\n
\n
\n

About this log

\n

Who keeps it, how it is made and what you may do with it.

\n
\n
\n
\n\n
\n
\n

Who writes this

\n
\n

Ines Varga keeps the instruments on a marsh she can see from her kitchen and answers mail slowly. 12 entries this month, filed under instruments tides. Comments on an entry are open for thirty days, closing in the last week and closed after that.

\n
\n
\n
\n\n
\n

How it is made

\n

Every entry is a text file. A script of forty lines turns the files into pages and copies them to a server that costs less than the batteries in the rain gauge. There is no database, so there is nothing to back up except the files, and they are in the archive for anyone to take.

\n
    \n
  1. Write the entry in a text editor.
    2. \n
  2. Run make log.
    3. \n
  3. Read it once on the real page, then leave it alone.
    4. \n
\n

What you may do with it

\n

Copy what you like. The readings are facts and belong to nobody; the entries are mine, and you may quote them at any length if you say where they came from.

\n
\n
\n

What it does not do

\n
\n
\n Does it count me?\n

No. It does not count you, follow you or remember you.

\n
\n
\n What is kept when I comment?\n

Your name beside the comment, and only if you tick the box. The address is read once and thrown away.

\n
\n
\n May I have the readings as a file?\n

Yes. Every month is a plain text file, and so is every year since 2014.

\n
\n
\n
\n\n
\n

Elsewhere

\n \n
\n\n
\n\n \n
\n
\n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.brutalism.blog.s01.p11.t01.u01.dc\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"brutalism\",\n \"years\": [\n 2014,\n 2019\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-br-1b11-dc\",\n \"short\": \"v1-br-1b11-dc\",\n \"density\": \"compact\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f8f8ff;\n --color-surface-strong: #f0f0ff;\n --color-bar: #000000;\n --color-bar-text: #ffffff;\n --color-bar-alt: #ffffff;\n --color-bar-alt-text: #000000;\n --color-inverse: #0000ee;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #444444;\n --color-heading: #000000;\n --color-heading-alt: #000000;\n --color-link: #0000ee;\n --color-link-quiet: #0000ee;\n --color-link-visited: #0000ee;\n --color-link-hover: #cc0000;\n --color-link-active: #cc0000;\n --color-border: #000000;\n --color-border-strong: #000000;\n --color-border-muted: #b8b8f8;\n --color-accent: #cc0000;\n --color-accent-text: #ffffff;\n --color-accent-alt: #cc0000;\n --color-fill-1: #ffffff;\n --color-fill-2: #f8f8ff;\n --color-fill-3: #f0f0ff;\n --color-fill-4: #d8d8ff;\n --color-button: #ffffff;\n --color-button-text: #000000;\n --color-button-hover-text: #0000ee;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #0000ee;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #000000;\n --color-disabled: #f0f0ff;\n --color-disabled-text: #444444;\n --color-danger: #cc0000;\n --color-danger-surface: #ffffff;\n --color-success: #006400;\n --color-warning: #8a4b00;\n --color-notice: #f0f0ff;\n --color-notice-text: #000000;\n --color-focus: #0000ee;\n --color-shadow: #000000;\n --color-overlay: #d8d8ff;\n}\n\n/* @part type */\n:root {\n --font-body: \"Times New Roman\", Times, serif;\n --font-heading: \"Times New Roman\", Times, serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 13px;\n --text-large: 18px;\n --text-display: 48px;\n --text-h1: 32px;\n --text-h2: 24px;\n --text-h3: 19px;\n --line-body: 1.2;\n --line-heading: 1.1;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: inset 1px 1px 0 color-mix(in srgb, var(--color-button) 25%, white), inset -1px -1px 0 color-mix(in srgb, var(--color-button) 60%, black);\n --shadow-control-hover: inset 1px 1px 0 color-mix(in srgb, var(--color-button) 25%, white), inset -1px -1px 0 color-mix(in srgb, var(--color-button) 60%, black), inset 0 0 0 2px color-mix(in srgb, var(--color-button) 25%, white);\n --shadow-control-pressed: inset 1px 1px 0 color-mix(in srgb, var(--color-button) 60%, black), inset -1px -1px 0 color-mix(in srgb, var(--color-button) 25%, white);\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 92%, black);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }