Skip to content

docs(kit): describe what a token does, not which look uses it #58

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

Merged
Bccorb merged 1 commit into from
Aug 23, 2026
Merged

docs(kit): describe what a token does, not which look uses it #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 10 additions & 8 deletions shared/react-app/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,8 +195,8 @@
Geist, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
Arial, "Liberation Sans", sans-serif;
/* Width and optical size, for the two families that carry an axis beyond
weight. Archivo runs 62% to 125%, which is the whole distance between
Blueprint's condensed capitals and Cinematic's expanded ones. */
weight. Archivo runs 62% to 125%, so one download covers everything from
condensed capitals to expanded ones. */
--app-display-stretch: 100%;
--app-display-optical: auto;
/* The small type carries its own width, because a theme that sets labels in a
Expand Down Expand Up @@ -775,7 +775,8 @@ body {
font-feature-settings: var(--app-numeric-zero);
}

/* Table density is a kit decision: Console is tight, Cinematic is loose. */
/* Table density is a theme decision: a readout wants tight rows, a showy
theme wants loose ones. */
.data-cell {
padding-block: var(--app-row-pad-y);
padding-inline: var(--app-cell-pad-x);
Expand Down Expand Up @@ -947,7 +948,8 @@ body {
border-radius: var(--app-radius-card);
}

/* A section rule. Hairline in most kits, heavy in Editorial, double in Almanac. */
/* A section rule. A hairline by default, and a theme is free to make it heavy,
or double it into a masthead rule. */
.rule {
border-bottom-style: solid;
border-bottom-width: var(--app-rule-width);
Expand Down Expand Up @@ -1052,10 +1054,10 @@ body {
justify-content: space-between;
}

/* Cards. The kit sets the narrowest a column may be and the browser decides how
many fit, so the same grid is two columns in Cinematic and four in Blueprint
without either of them naming a breakpoint. `min()` keeps the last column
from overflowing a phone. */
/* Cards. The theme sets the narrowest a column may be and the browser decides
how many fit, so an airy theme lands on two columns and a dense one on four,
neither of them naming a breakpoint. `min()` keeps the last column from
overflowing a phone. */
.auto-grid {
display: grid;
gap: var(--app-grid-gap);
Expand Down
18 changes: 10 additions & 8 deletions templates/web/react-oauth/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,8 +195,8 @@
Geist, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
Arial, "Liberation Sans", sans-serif;
/* Width and optical size, for the two families that carry an axis beyond
weight. Archivo runs 62% to 125%, which is the whole distance between
Blueprint's condensed capitals and Cinematic's expanded ones. */
weight. Archivo runs 62% to 125%, so one download covers everything from
condensed capitals to expanded ones. */
--app-display-stretch: 100%;
--app-display-optical: auto;
/* The small type carries its own width, because a theme that sets labels in a
Expand Down Expand Up @@ -775,7 +775,8 @@ body {
font-feature-settings: var(--app-numeric-zero);
}

/* Table density is a kit decision: Console is tight, Cinematic is loose. */
/* Table density is a theme decision: a readout wants tight rows, a showy
theme wants loose ones. */
.data-cell {
padding-block: var(--app-row-pad-y);
padding-inline: var(--app-cell-pad-x);
Expand Down Expand Up @@ -947,7 +948,8 @@ body {
border-radius: var(--app-radius-card);
}

/* A section rule. Hairline in most kits, heavy in Editorial, double in Almanac. */
/* A section rule. A hairline by default, and a theme is free to make it heavy,
or double it into a masthead rule. */
.rule {
border-bottom-style: solid;
border-bottom-width: var(--app-rule-width);
Expand Down Expand Up @@ -1052,10 +1054,10 @@ body {
justify-content: space-between;
}

/* Cards. The kit sets the narrowest a column may be and the browser decides how
many fit, so the same grid is two columns in Cinematic and four in Blueprint
without either of them naming a breakpoint. `min()` keeps the last column
from overflowing a phone. */
/* Cards. The theme sets the narrowest a column may be and the browser decides
how many fit, so an airy theme lands on two columns and a dense one on four,
neither of them naming a breakpoint. `min()` keeps the last column from
overflowing a phone. */
.auto-grid {
display: grid;
gap: var(--app-grid-gap);
Expand Down
18 changes: 10 additions & 8 deletions templates/web/react-vite/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,8 +195,8 @@
Geist, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
Arial, "Liberation Sans", sans-serif;
/* Width and optical size, for the two families that carry an axis beyond
weight. Archivo runs 62% to 125%, which is the whole distance between
Blueprint's condensed capitals and Cinematic's expanded ones. */
weight. Archivo runs 62% to 125%, so one download covers everything from
condensed capitals to expanded ones. */
--app-display-stretch: 100%;
--app-display-optical: auto;
/* The small type carries its own width, because a theme that sets labels in a
Expand Down Expand Up @@ -775,7 +775,8 @@ body {
font-feature-settings: var(--app-numeric-zero);
}

/* Table density is a kit decision: Console is tight, Cinematic is loose. */
/* Table density is a theme decision: a readout wants tight rows, a showy
theme wants loose ones. */
.data-cell {
padding-block: var(--app-row-pad-y);
padding-inline: var(--app-cell-pad-x);
Expand Down Expand Up @@ -947,7 +948,8 @@ body {
border-radius: var(--app-radius-card);
}

/* A section rule. Hairline in most kits, heavy in Editorial, double in Almanac. */
/* A section rule. A hairline by default, and a theme is free to make it heavy,
or double it into a masthead rule. */
.rule {
border-bottom-style: solid;
border-bottom-width: var(--app-rule-width);
Expand Down Expand Up @@ -1052,10 +1054,10 @@ body {
justify-content: space-between;
}

/* Cards. The kit sets the narrowest a column may be and the browser decides how
many fit, so the same grid is two columns in Cinematic and four in Blueprint
without either of them naming a breakpoint. `min()` keeps the last column
from overflowing a phone. */
/* Cards. The theme sets the narrowest a column may be and the browser decides
how many fit, so an airy theme lands on two columns and a dense one on four,
neither of them naming a breakpoint. `min()` keeps the last column from
overflowing a phone. */
.auto-grid {
display: grid;
gap: var(--app-grid-gap);
Expand Down
Loading