Skip to content

Initialize version two #167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
geoffrey-eisenbarth wants to merge 12 commits into
base: dev
Choose a base branch
from
Open

Initialize version two #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1e9af86
Remove theme utilites, closes #151
geoffrey-eisenbarth Apr 4, 2026
bc68ec1
Rename flex utils, closes #95
geoffrey-eisenbarth Apr 4, 2026
4590c2d
Remove .primary font, closes #90
geoffrey-eisenbarth Apr 4, 2026
8a8aee1
Remove .all:initial, closes #88
geoffrey-eisenbarth Apr 4, 2026
b532a34
Remove --rhythm, closes #83
geoffrey-eisenbarth Apr 4, 2026
65e369b
Remove grid system, closes #99
geoffrey-eisenbarth Apr 4, 2026
c2dbdae
Remove .big, closes #160
geoffrey-eisenbarth Apr 4, 2026
23560ea
Default to .nested-list, closes #30
geoffrey-eisenbarth Apr 4, 2026
cf3fa66
Add border-radius to .border
geoffrey-eisenbarth Apr 29, 2026
14b7f8b
calc typo
geoffrey-eisenbarth Apr 29, 2026
e17a59e
Add new grid helpers, closes #161
geoffrey-eisenbarth Apr 29, 2026
6ed6280
Merge branch 'dev' into two
geoffrey-eisenbarth Apr 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions MIGRATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# Migration guide


The migration guide is a work in progress.


## Removed classes
- `.-dark-theme`: Set `html { color-sheme: dark; }` instead.
- `.-no-light-theme`: Set `html { color-sheme: light; }` instead.
Comment on lines +8 to +9

@dz4k dz4k Sep 19, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor spelling mistake

- `.all:initial`
- `.grid`: Use new helper, **TODO**
- `.nested-list`: This utility class is now the default (nested `<ul>` and `<ol>` do not get extra spacing). To get the old behavior, add `.margin-block` to the nested `<ul>` or `<ol>`.

## Renamed classes
- `.f-row` -> `.flex-row`
- `.f-col` -> `.flex-col`
- `.f-switch` -> `.flex-switch`
- `.primary-font` -> `.main-font`
- `.big` -> `.<big>`

## Removed variables
- `--rhythm`: Set a value for the `line-height`{.token .attr-name} property on the `html` element instead.
- `--grid-row-width`:
- `--grid-col-width`:


## Rename variables
- `--f-switch-threshold` -> `--flex-switch-threshold`
4 changes: 2 additions & 2 deletions src/aria.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
&:is(button) {
/* button-specific resets */
font-size: 1em;
line-height: var(--rhythm, 1.4rem);
line-height: 1rlh;
box-shadow: none;
&:is(:hover, :focus-visible, :active, :disabled) {
filter: none;
Expand Down Expand Up @@ -220,7 +220,7 @@ input[type=checkbox][role=switch] {
margin-block-end: auto;
}
&:not(label > *) {
padding-block: calc(var(--gap) / 4 + (var(--rhythm, 1rlh) - 1em) / 2);
padding-block: calc(var(--gap) / 4 + (1rlh - 1em) / 2);
}

label:has(> &) {
Expand Down
7 changes: 7 additions & 0 deletions src/colorways.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,30 +46,37 @@
border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg);
border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg);
border-radius: var(--border-radius);
}
.border-block\:none { border-block: none }
.border-block {
border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg);
border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
border-radius: var(--border-radius);
}
.border-block-start\:none { border-block-start: none }
.border-block-start {
border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg);
border-radius: var(--border-radius);
}
.border-block-end\:none { border-block-end: none }
.border-block-end {
border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
border-radius: var(--border-radius);
}
.border-inline\:none { border-inline: none }
.border-inline {
border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg);
border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg);
border-radius: var(--border-radius);
}
.border-inline-start\:none { border-inline-start: none }
.border-inline-start {
border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg);
border-radius: var(--border-radius);
}
.border-inline-end\:none { border-inline-end: none }
.border-inline-end {
border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg);
border-radius: var(--border-radius);
}
22 changes: 11 additions & 11 deletions src/components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ details,
--full-width: calc(100vi - var(--sidebar-width));
--eff-line-length:
min(
calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
calc(var(--full-width) - 2rlh),
var(--line-length)
);
padding-block-start: var(--gap);
Expand All @@ -131,7 +131,7 @@ details,
--full-width: calc(100vi - var(--sidebar-width));
--eff-line-length:
min(
calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
calc(var(--full-width) - 2rlh),
var(--line-length)
);
padding-block-start: var(--gap);
Expand Down Expand Up @@ -174,12 +174,12 @@ details,
font-family: var(--secondary-font);
border: var(--chip-border-width) var(--chip-border-style) var(--accent);
background: var(--box-bg);
border-radius: calc(var(--rhythm, 1rlh) / 2);
padding-inline: calc(var(--rhythm, 1rlh) / 2);
border-radius: 0.5rlh;
padding-inline: 0.5rlh;
}

.navbar {
padding: var(--rhythm, 1rlh);
padding: 1rlh;

font-family: var(--secondary-font);

Expand Down Expand Up @@ -223,7 +223,7 @@ details,
& nav ul[role=list] {
display: flex;
flex-flow: row;
gap: var(--rhythm, 1rlh);
gap: 1rlh;
padding-inline-start: 0;

& * { flex-shrink: 0 }
Expand Down Expand Up @@ -277,7 +277,7 @@ details,
color: currentcolor;
padding: 0;
box-shadow: none;
line-height: var(--rhythm, 1rlh);
line-height: 1rlh;
font-size: var(--wcag-target-size-aa);
inline-size: var(--wcag-target-size-aa);
block-size: var(--wcag-target-size-aa);
Expand Down Expand Up @@ -306,7 +306,7 @@ details,
color: var(--accent);
}

&:is(.big, .\<big\>) {
&.\<big\> {
font-size: var(--wcag-target-size-aaa);
inline-size: var(--wcag-target-size-aaa);
block-size: var(--wcag-target-size-aaa);
Expand All @@ -325,9 +325,9 @@ aside[role=note] {
0px,
calc(
0px - min(
var(--gutter-width) - var(--rhythm, 1rlh),
var(--sidenote-width) + var(--rhythm, 1rlh)
) + var(--rhythm, 1rlh) - 1ch
var(--gutter-width) - 1rlh,
var(--sidenote-width) + 1rlh
) + 1rlh - 1ch
)
);
--density: 0.5;
Expand Down
9 changes: 4 additions & 5 deletions src/flex.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@

.flex-row, .f-row {
.flex-row {
display: flex;
flex-direction: row;
gap: var(--gap);
& > * { margin: 0 }
}

.flex-column, .f-col {
.flex-column {
display: flex;
flex-direction: column;
gap: var(--gap);
& > * { margin: 0 }
}

.flex-switch, .f-switch {
.flex-switch {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
--f-switch-threshold: 55ch; /* Deprecated name */
--flex-switch-threshold: var(--f-switch-threshold);
--flex-switch-threshold: 55ch;

& > * {
margin: 0;
Expand Down
Loading