{ "id": "v1-br-2222-dr", "long_id": "v1.brutalism.blog.s02.p02.t02.u02.dr", "name": "Web brutalism, link list", "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": "pure", "viewport": { "width": 1440, "fluid": true }, "density": "roomy", "summary": "The reader-sorted link list of web brutalism, as kept between 2014 and 2019 by small communities that wanted a front page to be nothing but titles: one filled line of navigation, then numbered two-line rows in small grey Helvetica in a column that keeps a margin of empty window at both sides, with one pale blue line of navigation, dark blue links and a red word here and there. Nothing is rounded, shadowed, graded or animated, there are no pictures and no cards; structure comes from the numbers, from dotted hairlines and from grey 11px meta lines under blue titles. It was the look of link aggregators, bookmark logs and the comment sites built by programmers for themselves.", "url": "https://chrono.skin/s/v1-br-2222-dr", "preview_url": "https://chrono.skin/s/v1-br-2222-dr/specimen.html", "files": { "STYLE.md": "# Web brutalism, link list\n\n## Summary\n\nThe reader-sorted link list of web brutalism, as kept between 2014 and 2019 by small communities that wanted a front page to be nothing but titles: one filled line of navigation, then numbered two-line rows in small grey Helvetica in a column that keeps a margin of empty window at both sides, with one pale blue line of navigation, dark blue links and a red word here and there. Nothing is rounded, shadowed, graded or animated, there are no pictures and no cards; structure comes from the numbers, from dotted hairlines and from grey 11px meta lines under blue titles. It was the look of link aggregators, bookmark logs and the comment sites built by programmers for themselves.\n\n## Layout\n\n- The page is a sheet: `.ds-page__frame` is `--size-page` (85% of the window) wide, centred, filled with `--color-canvas`, and starts `--space-3` (8px) below the top of the window. `--fill-page` is `--color-surface-alt` (#f7f7f7), so the white sheet stands on a faintly grey page and its margins left and right are seen. The sheet has no border and no maximum width.\n- Order inside the sheet: `.ds-nav` (one filled line, closed by a hairline in `--color-border-strong`), `.ds-page__body` (padding `--space-4` 12px), `.ds-footer`. There is no wordmark above the line and no second navigation row: the brand (a small square mark and the bold site name) opens the line and the account links sit at its right end. The header, the sheet's padding and the footer are written once; the views change between them.\n- The home page opens with `.ds-hero` across the sheet (headline and lead at the left, the two buttons stacked in a `--size-sidebar` column at the right, a hairline below). Under it `.ds-page__columns` holds `.ds-page__main` and, `--space-6` (40px) to its right, `.ds-sidebar` at `--size-sidebar` (220px). The sidebar has no rule and no fill; it is told from the list by its smaller type.\n- The main column is the list: `.ds-list` rows numbered down the page and grouped under `.ds-list__day` lines, then `.ds-pagination` indented to the titles. Rows are `--space-3` (8px) apart and have no rules between them; only the day lines and block captions (`.ds-page__label`) carry a hairline.\n- Blocks below the list are `.ds-page__section`, `--space-5` (20px) apart, each under a small bold `.ds-page__label`. Short blocks go side by side in `.ds-page__pair` (two equal columns, 40px apart) so the sheet is never half empty. `.ds-page__rule` is a hairline across the sheet between unrelated parts.\n- Inner pages (one discussion, the sending form, a member's page, the tags, the rules) keep the same line of navigation and the same footer, in one column: no hero and no sidebar. `.ds-page__body` opens with the `.ds-breadcrumb` in 11px, then `.ds-page-header` (18px title, a grey line of description, one button at the right, a hairline below), then the `.ds-stats` line when there is one, then `.ds-tabs` with the table or list in `.ds-tabs__body`. Everything else goes in a `.ds-page__pair`: the main thing (the comments, the form, the running text, a table) in the left half and the short blocks that belong to it (a dialog, a panel, a small list under a `.ds-page__label`) in the right half, so that the halves end near each other.\n- Views. The specimen is one small site with six views, one showing at a time. `front` is the home page: hero, the numbered list by day with the sidebar, pagination. `thread` is one question and its comments, with the confirmation for deleting a comment and the box for adding one. `send` is the form for sending a link, under the two messages it can answer with, beside the boxed advice. `member` is a member's page: figures, tabs over the table of links sent, latest comments. `tags` is the four busiest tags as blocks, all tags as a table, and the empty state of a tag with no links. `rules` is running text with the marks, a boxed list and further links beside it. A view is `
` holding one `.ds-page__body`; links between views are plain `href=\"#id\"`.\n- Spacing scale: `--space-1` 2px is the vertical padding of the navigation line, buttons, inputs and tabs and the gap between a title and its meta line; `--space-2` 4px is the padding of tags, table cells and the gap between tabs; `--space-3` 8px is the page margin, the gap between rows and between buttons, and the side padding of the navigation line; `--space-4` 12px is the padding of the sheet, panels, notices and grid cells, the gap between paragraphs and between navigation links; `--space-5` 20px is the gap between blocks; `--space-6` 40px is the gap between columns.\n- Fixed sizes: `--size-rank` 36px is the number column of the list, `--size-label` 96px the label column of a form, `--size-field` 380px a text input, `--size-num` 96px a numeric table column, `--size-dialog` 400px a dialog.\n- Below 800px the sheet takes the whole window, the columns and pairs stack, the page header puts its button under the text, form labels sit above their fields, the grid is two columns, the figures of `.ds-stats` are set apart by space with no `|` (a wrapped line never opens with one) and table cells marked `.ds-table__extra` are left out.\n\n## Typography and colour roles\n\n- White on white: `--color-page`, `--color-canvas` and `--color-surface` are #ffffff; `--color-surface-alt` #f7f7f7 is alternate table rows, `--color-surface-strong` #efefef the current tab and page number, tags and inline code.\n- `--color-bar` #ddeeff with `--color-bar-text` #333333 is the pale blue line of navigation, table heads and dialog titles. `--color-bar-alt` (footer) is white with #555555 text. `--color-inverse` #1111aa with white text marks the current navigation item.\n- Text is dark grey, not black: `--color-text` #444444, `--color-heading` #333333, `--color-text-muted` #808080 for meta lines, counts and captions. `--color-heading-alt` #ff0000 is the red of sidebar and panel titles.\n- `--color-link` and `--color-link-quiet` are #1111aa, so a list title, a sidebar link and a link in a meta line are all dark blue and always told from the grey text and counts beside them; `--color-link-visited` is #800080; hover and active are #ff0000.\n- Rules are grey: `--color-border` #aaaaaa under day lines, captions and tabs and around panels; `--color-border-muted` #dddddd between table rows. `--color-border-strong` #8899cc is the blue-grey hairline under the navigation, hero and page header, above each grid column and the footer and around notices and dialogs.\n- `--color-accent` #ddffaa with `--color-accent-text` #333333 is the count badge and, as `--color-button`, the pale green primary button; `--color-accent-alt` #ff0000 is only a mark (the asterisk of \"new\").\n- Fills are the three pale tints and a grey: `--color-fill-1` #ddeeff, `--color-fill-2` #ddffaa, `--color-fill-3` #ffffaa, `--color-fill-4` #f7f7f7; `--color-notice` is #ffffaa. `--color-text` is readable on all of them. The secondary button, inputs and `--color-danger-surface` are white.\n- Status: `--color-danger` #cc0000, `--color-success` #2a7a00, `--color-warning` #9a5b00. The references have a red but no green or amber text; these two are derived, dark enough to read on white.\n- One family: `--font-body`, `--font-heading` and `--font-ui` are Helvetica, Arial, sans-serif; `--font-mono` is Monaco, \"Courier New\", monospace, for inline code only.\n- Small and even: `--text-base` and `--text-ui` 13px with `--line-body` 1.4 is titles, running text, navigation and controls; `--text-small` 11px is meta lines, site names, tags, captions, the sidebar, the breadcrumb and the footer; `--text-large` 16px is the hero's lead and the figures of the stats line. Headings are bold and barely larger than the text: `--text-h1` 18px (page header, article title), `--text-h2` 16px, `--text-h3` 13px; `--text-display` 28px at regular weight (`--weight-display` 400) is the hero headline and the largest text on a page.\n- Links in running text are underlined (`--link-decoration` underline) and must stay so, because other palettes of the era give them the colour of the text. List titles, navigation, tabs, sidebar, meta, breadcrumb and footer links are bare (`--link-decoration-quiet` none) and gain the underline on hover. Current navigation items, tabs and page numbers are ``, not links.\n- Nothing is uppercased or tracked; `--weight-ui` is 400, so only the brand name and headings are bold.\n- Hairlines only: `--border-width` and `--border-width-strong` are both 1px and `--border-style` is dotted, so every rule and box is a 1px dotted line and emphasis comes from the colour of the strong border, not its weight. Buttons, inputs and the brand mark follow it too: their edge in `--color-input-border` is `--border-width` in `--border-style`, a dotted hairline here. Their fills, not their edges, tell them from the text around them.\n- All radii are 0, all shadows `none`, every fill is its plain palette colour; `--focus-ring` is a 1px solid outline; `--transition` none.\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 sheet, `--color-text` and the muted and heading colours on the canvas, the surfaces and the four fills. Keep to this so that other palettes work with the same structure.\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page` on ``: page colour, 8px top margin and base type. Each page is one `.ds-page__frame` (the sheet; `--last` drops the gap below it) holding the navigation, `.ds-page__body` and the footer. `.ds-page__columns` with `.ds-page__main` first is the home page's list and sidebar; `.ds-page__pair` sets two blocks side by side; `.ds-page__section` is a block (`--last` drops its bottom gap), `.ds-page__label` its small bold caption on a hairline, `.ds-page__rule` a hairline across the sheet.\n- `.ds-nav`: the one filled line at the top of the sheet. The `.ds-brand` comes first; `.ds-nav__list` holds `.ds-nav__item` entries, each one `.ds-nav__link`, separated by 12px of space and nothing else. `.ds-nav__item--end` pushes itself and the items after it to the right end (account, log out). 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 front page, the first thing on the navigation line. `.ds-brand__mark` is a small plain ruled square (1.2 times `--text-ui`, about 16px, so the line stays one line tall), dressed like the push button: `--fill-button`, the same hairline edge in `--color-input-border`, 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 bold 13px in `--color-bar-text`, because it stands on `--fill-bar`. The name `chronoskin` and the mark are placeholders for the installing project's own name and logo.\n- `.ds-breadcrumb`: an 11px line of `.ds-breadcrumb__link` items with `.ds-breadcrumb__sep` (`/`) between them, ending in `.ds-breadcrumb__current`, the first thing in the body of an inner page.\n- `.ds-hero`: the introduction of the home page. `.ds-hero__copy` holds `.ds-hero__title` (28px, regular weight) and one `.ds-hero__lead` paragraph at 16px; `.ds-hero__actions` at the right stacks one primary and one secondary button, both as wide as the sidebar, over a grey `.ds-hero__note`. No fill, no box, no centring; a hairline closes it.\n- `.ds-page-header`: the head of an inner page, instead of the hero: `.ds-page-header__main` with `.ds-page-header__title` (18px) and one grey `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button. A hairline closes it.\n- `.ds-stat`: one figure: a bold 16px `.ds-stat__value` followed on the same line by a grey `.ds-stat__label`. Three to five sit in a `.ds-stats` line, cut by `|` that the stylesheet draws. A line of text, never boxes.\n- `.ds-prose`: running text, at most 84 characters wide: h1, h2, h3, paragraphs, square-bulleted and numbered lists, `code` in 11px monospace on `--color-surface-strong`, `blockquote` behind a hairline in grey. `.ds-prose__meta` is the grey 11px line under a title.\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`: a flat square push button, 13px, with a hairline edge in `--border-style`; a `\n \n \n
\n

Tags

\n \n
\n
\n

Talking now

\n \n
\n
\n

About

\n

Kept by four volunteers since 2014. One page of markup, one stylesheet, no scripts. The rules

\n
\n \n \n\n \n
\n\n \n
\n
\n\n
    \n
  1. front
    2. \n
  2. /
    3. \n
  3. question
    4. \n
  4. /
    5. \n
  5. which glue survives a dishwasher?
    6. \n
\n
\n
\n

Ask: which glue survives a dishwasher?

\n

54 points, sent by marit 7 hours ago, tagged question. 86 comments.

\n
\n
Send a link
\n
\n\n
\n
\n
\n
\n

The handle of a bread knife, beech, split along the tang. Epoxy lasted a month. The knife goes in the machine every day and nobody in this house is going to start washing it by hand.

\n

What has held for you, for years and not weeks?

\n
\n
\n
\n

86 comments, best first

\n
    \n
  • \n
    \n

    ootje 6 hours ago | reply

    \n

    None of them. The wood moves more than any glue line can follow. Rivet it and oil it.

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

    marit 6 hours ago | reply | delete

    \n

    Rivets through a split handle just make two splits.

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

    ootje 5 hours ago | reply

    \n

    Then it is time for a new handle, which is an afternoon and a nicer knife.

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

    pernille_k 5 hours ago | reply

    \n

    Resorcinol. It is what they use on boat frames. The glue line is dark red, so call it a feature.

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

    halvard 4 hours ago | reply

    \n

    Seconded. My grandmother's ladle has been through forty years of it.

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

    dov 3 hours ago | reply

    \n

    Polyurethane held eighteen months for me and then let go all at once, in the cutlery basket.

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

    ansgar 2 hours ago | reply

    \n

    The real answer is a handle without a joint: one piece, slotted, pinned.

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

Delete your comment?

\n
\n

The comment you posted at 22:05 will be removed, and the two replies under it will stay. This cannot be undone.

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

Add a comment

\n
\n \n

Plain text. A blank line starts a paragraph; addresses become links.

\n
\n \n Back to the front page\n
\n
\n
\n
\n

More questions

\n \n
\n
\n
\n\n
\n
\n\n \n
\n
\n\n
    \n
  1. front
    2. \n
  2. /
    3. \n
  3. send a link
    4. \n
\n
\n
\n

Send a link

\n

One page that other people who mend things would want to read. One a day is plenty.

\n
\n
Read the rules
\n
\n\n
\n
\n

Held. Your last link, the lathe steady, is waiting for a volunteer to read it. You can send another meanwhile.

\n

Not sent. The address below is not one we can fetch. Nothing has been posted.

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

That is not a web address.

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

Plain text. A blank line starts a paragraph; addresses become links.

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

Before you send

\n
\n

Send the page itself, not a page about the page. Keep the title the author gave it. One link a day is plenty, and a shop's own offers are removed without discussion.

\n
\n
\n
\n
\n

Sent by you lately

\n \n
\n
\n
\n\n
\n
\n\n \n
\n
\n\n
    \n
  1. front
    2. \n
  2. /
    3. \n
  3. members
    4. \n
  4. /
    5. \n
  5. marit
    6. \n
\n
\n
\n

Links sent by marit

\n

Everything this member has sent since joining in May 2014, newest first.

\n
\n
Send a link
\n
\n\n \n\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
LinkTagSentStateCommentsPoints
Ask: which glue survives a dishwasher? (text post)question2017-03-14listed8654
Sharpening a card scraper, slowly (greybench.example)sharpening2017-03-02listed2371
A lathe steady from skateboard wheels (tenthou.example)jigs2017-02-19held01
Hide glue in a baby bottle warmer (slowjoinery.example)joinery2017-02-07listed4862
Ten percent off all chisels this week (toolbarn.example)none2017-01-28removed20
\n
\n
\n\n
\n
\n

Latest comments

\n \n
\n
\n

About

\n
\n

Mends kitchen things and the odd bicycle. Joined in May 2014, the week the site opened. Sends about one link a month and argues about glue.

\n

Change this text or go back to the front page.

\n
\n
\n
\n\n
\n
\n\n \n
\n
\n\n
    \n
  1. front
    2. \n
  2. /
    3. \n
  3. tags
    4. \n
\n
\n
\n

Tags

\n

46 tags, chosen by the volunteers. A link carries one tag or none.

\n
\n
Send a link
\n
\n\n
\n

Busiest tags this week

\n
\n
\n

joinery

\n

Joints, jigs and the mistakes that taught them.

\n

63 links, 918 comments

\n
\n
\n

motors

\n

Rewinding, rewiring and the smell of warm varnish.

\n

41 links, 702 comments

\n
\n
\n

finishing

\n

Oil, wax, shellac and how long to really wait.

\n

29 links, 344 comments

\n
\n
\n

question

\n

Text posts that ask instead of link.

\n

22 links, 1,160 comments

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

All tags, by name

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TagNewest linkStateLinksComments
finishingNotes on linseed oilopen6407,118
historyThe bandsaw that a village sharedopen3775,902
jigsA lathe steady from skateboard wheelsopen2141,560
joineryA drawer that closes itselfopen1,20414,377
motorsWhy the old drill press runs backwardsopen8119,046
offersTen percent off all chiselsclosed1231
sharpeningRegrinding a plane iron on a paving slabopen5226,230
upholsterynone yetnew00
\n
\n
\n
\n

Tagged upholstery

\n
\n

No links are tagged “upholstery” yet.

\n Send the first one\n
\n

A tag is opened when three members ask for it and closed when it fills with offers. Ask in the questions.

\n
\n
\n

Asked for, not opened yet

\n \n
\n
\n
\n\n
\n
\n\n \n
\n
\n\n
    \n
  1. front
    2. \n
  2. /
    3. \n
  3. rules
    4. \n
\n
\n
\n

Rules

\n

Short enough to read before you send anything.

\n
\n
Send a link
\n
\n\n
\n
\n

How the front page is sorted

\n

Written by the volunteers, last changed 2017-01-09.

\n

Every link starts with one point from the person who sent it. Readers add points; time takes them away. The whole rule is short enough to read in the source of this page, and nothing else decides the order.

\n

What counts

\n
    \n
  • One point for each reader who found the link useful.
    • \n
  • The age of the link in hours, plus two.
    • \n
  • Nothing else: no names, no tags, no payment.
    • \n
\n

The arithmetic

\n

The score is points / (hours + 2) ^ 1.6, worked out again every five minutes. A link held by a volunteer keeps its points but is left out of the list.

\n
\n
\n
\n

Marks you will see

\n

Unread replies 12, a tag joinery, a fresh link new, and the state of a link: listed held removed

\n
\n
\n
\n

What gets a link removed

\n
\n

A shop's own offers. A page about a page. A title rewritten to argue. The same address twice in thirty days.

\n
\n
\n
\n
\n

Read next

\n \n
\n
\n
\n\n
\n
\n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.brutalism.blog.s02.p02.t02.u02.dr\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"brutalism\",\n \"years\": [\n 2014,\n 2019\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-br-2222-dr\",\n \"short\": \"v1-br-2222-dr\",\n \"density\": \"roomy\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f7f7f7;\n --color-surface-strong: #efefef;\n --color-bar: #ddeeff;\n --color-bar-text: #333333;\n --color-bar-alt: #ffffff;\n --color-bar-alt-text: #555555;\n --color-inverse: #1111aa;\n --color-inverse-text: #ffffff;\n --color-text: #444444;\n --color-text-muted: #808080;\n --color-heading: #333333;\n --color-heading-alt: #ff0000;\n --color-link: #1111aa;\n --color-link-quiet: #1111aa;\n --color-link-visited: #800080;\n --color-link-hover: #ff0000;\n --color-link-active: #ff0000;\n --color-border: #aaaaaa;\n --color-border-strong: #8899cc;\n --color-border-muted: #dddddd;\n --color-accent: #ddffaa;\n --color-accent-text: #333333;\n --color-accent-alt: #ff0000;\n --color-fill-1: #ddeeff;\n --color-fill-2: #ddffaa;\n --color-fill-3: #ffffaa;\n --color-fill-4: #f7f7f7;\n --color-button: #ddffaa;\n --color-button-text: #333333;\n --color-button-hover-text: #000000;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #444444;\n --color-input: #ffffff;\n --color-input-text: #333333;\n --color-input-border: #808080;\n --color-disabled: #efefef;\n --color-disabled-text: #808080;\n --color-danger: #cc0000;\n --color-danger-surface: #ffffff;\n --color-success: #2a7a00;\n --color-warning: #9a5b00;\n --color-notice: #ffffaa;\n --color-notice-text: #333333;\n --color-focus: #1111aa;\n --color-shadow: #aaaaaa;\n --color-overlay: #efefef;\n}\n\n/* @part type */\n:root {\n --font-body: Helvetica, Arial, sans-serif;\n --font-heading: Helvetica, Arial, sans-serif;\n --font-ui: Helvetica, Arial, sans-serif;\n --font-mono: Monaco, \"Courier New\", monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 13px;\n --text-large: 16px;\n --text-display: 28px;\n --text-h1: 18px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: 1.4;\n --line-heading: 1.2;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 400;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: dotted;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: var(--color-surface-alt);\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: transparent;\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: transparent;\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }