web/settings: add the repository settings screens from the redesign
Completes the desktop half of the Settings Redesign Figma
(TFhrx7FBh2Ue5SGH8CUeBU) that the user-settings pass left out: General,
Access, Pipelines, Hooks and Sites, plus the rename, custom-label,
collaborator, secret and webhook drill-downs.
There was no repository settings surface in the rewrite at all, so this
adds the route tree under [handle]/[repo]/settings and a Settings tab on
RepoTabs. The tab is unconditional for now -- gating it needs the
viewer's push access, which the repo layout load doesn't resolve yet.
The sidebar card, drill-down shell and row primitives are reused from
the user settings. Three of them grew to cover patterns that only appear
on the repo pages: SettingsList's gap is now named in spacing units
because the designs use all of 8/12/16px, SettingsRow takes a muted
description, and SettingsBlock is the new title+description+action
header that Access and Pipelines put above each card. Multi-line copy is
passed as an array of lines rather than a string with escapes, which
reads better and keeps the templates free of useless mustaches.
SettingsEmpty replaces EmptyState inside settings: Figma's empty state
there is a single 52px row, not the tall italic box the rest of the app
uses. SettingsSaveBar factors out the Reset / "Unsaved changes" / Save
trio now that General, Sites and Profile all carry it.
Verified light and dark against the Figma renders; navigation, card and
surface tokens plus nav width and heading size all match.
Refs TAN-575.
Signed-off-by: eti <eti@eti.tf>
web: move the type scale onto typography-* utilities
the scale lived in @theme as --text-heading-*, --text-paragraph-* and
--text-monospace-*, so it generated text-heading-3, text-paragraph-small and so
on. tailwind-merge classes anything shaped like that as a colour, so inside a
tv() whose variants set text colours it dropped the size as soon as a colour
followed — which, in those definitions, is always. $lib/tv.ts existed only to
re-register the twelve names as font sizes, and every tv() in the app had to
import from there rather than from tailwind-variants to pick that up.
naming them typography-* sidesteps the collision instead of patching it: the
classes match no tailwind-merge group at all, so nothing can read them as
colours and the shim is gone. they're @utility blocks rather than theme tokens
now, since --text-* is precisely the namespace that spells its utilities text-*.
font-size comes first in each block on purpose. tailwind sorts a custom utility
into the bucket of its first declared property, which keeps typography-* ahead
of every font-weight, leading-* and tracking-* utility in the sheet, so the call
sites pairing typography-heading-4 with leading-8 font-normal still resolve the
way they did.
this does give up size-against-size merging: two typography-* classes in one
string no longer collapse, so a size passed in through class= sits next to the
component's own and the stylesheet order picks the winner. nothing does that
today — Typography takes a variant prop for it — and one classGroups entry
brings the merging back if it ever comes up.
Signed-off-by: eti <eti@eti.tf>
web: move the type scale onto typography-* utilities
the scale lived in @theme as --text-heading-*, --text-paragraph-* and
--text-monospace-*, so it generated text-heading-3, text-paragraph-small and so
on. tailwind-merge classes anything shaped like that as a colour, so inside a
tv() whose variants set text colours it dropped the size as soon as a colour
followed — which, in those definitions, is always. $lib/tv.ts existed only to
re-register the twelve names as font sizes, and every tv() in the app had to
import from there rather than from tailwind-variants to pick that up.
naming them typography-* sidesteps the collision instead of patching it: the
classes match no tailwind-merge group at all, so nothing can read them as
colours and the shim is gone. they're @utility blocks rather than theme tokens
now, since --text-* is precisely the namespace that spells its utilities text-*.
font-size comes first in each block on purpose. tailwind sorts a custom utility
into the bucket of its first declared property, which keeps typography-* ahead
of every font-weight, leading-* and tracking-* utility in the sheet, so the call
sites pairing typography-heading-4 with leading-8 font-normal still resolve the
way they did.
this does give up size-against-size merging: two typography-* classes in one
string no longer collapse, so a size passed in through class= sits next to the
component's own and the stylesheet order picks the winner. nothing does that
today — Typography takes a variant prop for it — and one classGroups entry
brings the merging back if it ever comes up.
Signed-off-by: eti <eti@eti.tf>
web: move the type scale onto typography-* utilities
the scale lived in @theme as --text-heading-*, --text-paragraph-* and
--text-monospace-*, so it generated text-heading-3, text-paragraph-small and so
on. tailwind-merge classes anything shaped like that as a colour, so inside a
tv() whose variants set text colours it dropped the size as soon as a colour
followed — which, in those definitions, is always. $lib/tv.ts existed only to
re-register the twelve names as font sizes, and every tv() in the app had to
import from there rather than from tailwind-variants to pick that up.
naming them typography-* sidesteps the collision instead of patching it: the
classes match no tailwind-merge group at all, so nothing can read them as
colours and the shim is gone. they're @utility blocks rather than theme tokens
now, since --text-* is precisely the namespace that spells its utilities text-*.
font-size comes first in each block on purpose. tailwind sorts a custom utility
into the bucket of its first declared property, which keeps typography-* ahead
of every font-weight, leading-* and tracking-* utility in the sheet, so the call
sites pairing typography-heading-4 with leading-8 font-normal still resolve the
way they did.
this does give up size-against-size merging: two typography-* classes in one
string no longer collapse, so a size passed in through class= sits next to the
component's own and the stylesheet order picks the winner. nothing does that
today — Typography takes a variant prop for it — and one classGroups entry
brings the merging back if it ever comes up.
Signed-off-by: eti <eti@eti.tf>
web: move the type scale onto typography-* utilities
the scale lived in @theme as --text-heading-*, --text-paragraph-* and
--text-monospace-*, so it generated text-heading-3, text-paragraph-small and so
on. tailwind-merge classes anything shaped like that as a colour, so inside a
tv() whose variants set text colours it dropped the size as soon as a colour
followed — which, in those definitions, is always. $lib/tv.ts existed only to
re-register the twelve names as font sizes, and every tv() in the app had to
import from there rather than from tailwind-variants to pick that up.
naming them typography-* sidesteps the collision instead of patching it: the
classes match no tailwind-merge group at all, so nothing can read them as
colours and the shim is gone. they're @utility blocks rather than theme tokens
now, since --text-* is precisely the namespace that spells its utilities text-*.
font-size comes first in each block on purpose. tailwind sorts a custom utility
into the bucket of its first declared property, which keeps typography-* ahead
of every font-weight, leading-* and tracking-* utility in the sheet, so the call
sites pairing typography-heading-4 with leading-8 font-normal still resolve the
way they did.
this does give up size-against-size merging: two typography-* classes in one
string no longer collapse, so a size passed in through class= sits next to the
component's own and the stylesheet order picks the winner. nothing does that
today — Typography takes a variant prop for it — and one classGroups entry
brings the merging back if it ever comes up.
Signed-off-by: eti <eti@eti.tf>
web/settings: add the repository settings screens from the redesign
Completes the desktop half of the Settings Redesign Figma
(TFhrx7FBh2Ue5SGH8CUeBU) that the user-settings pass left out: General,
Access, Pipelines, Hooks and Sites, plus the rename, custom-label,
collaborator, secret and webhook drill-downs.
There was no repository settings surface in the rewrite at all, so this
adds the route tree under [handle]/[repo]/settings and a Settings tab on
RepoTabs. The tab is unconditional for now -- gating it needs the
viewer's push access, which the repo layout load doesn't resolve yet.
The sidebar card, drill-down shell and row primitives are reused from
the user settings. Three of them grew to cover patterns that only appear
on the repo pages: SettingsList's gap is now named in spacing units
because the designs use all of 8/12/16px, SettingsRow takes a muted
description, and SettingsBlock is the new title+description+action
header that Access and Pipelines put above each card. Multi-line copy is
passed as an array of lines rather than a string with escapes, which
reads better and keeps the templates free of useless mustaches.
SettingsEmpty replaces EmptyState inside settings: Figma's empty state
there is a single 52px row, not the tall italic box the rest of the app
uses. SettingsSaveBar factors out the Reset / "Unsaved changes" / Save
trio now that General, Sites and Profile all carry it.
Verified light and dark against the Figma renders; navigation, card and
surface tokens plus nav width and heading size all match.
Refs TAN-575.
Signed-off-by: eti <eti@eti.tf>
web: move the type scale onto typography-* utilities
the scale lived in @theme as --text-heading-*, --text-paragraph-* and
--text-monospace-*, so it generated text-heading-3, text-paragraph-small and so
on. tailwind-merge classes anything shaped like that as a colour, so inside a
tv() whose variants set text colours it dropped the size as soon as a colour
followed — which, in those definitions, is always. $lib/tv.ts existed only to
re-register the twelve names as font sizes, and every tv() in the app had to
import from there rather than from tailwind-variants to pick that up.
naming them typography-* sidesteps the collision instead of patching it: the
classes match no tailwind-merge group at all, so nothing can read them as
colours and the shim is gone. they're @utility blocks rather than theme tokens
now, since --text-* is precisely the namespace that spells its utilities text-*.
font-size comes first in each block on purpose. tailwind sorts a custom utility
into the bucket of its first declared property, which keeps typography-* ahead
of every font-weight, leading-* and tracking-* utility in the sheet, so the call
sites pairing typography-heading-4 with leading-8 font-normal still resolve the
way they did.
this does give up size-against-size merging: two typography-* classes in one
string no longer collapse, so a size passed in through class= sits next to the
component's own and the stylesheet order picks the winner. nothing does that
today — Typography takes a variant prop for it — and one classGroups entry
brings the merging back if it ever comes up.
Signed-off-by: eti <eti@eti.tf>
alice.pds.demo.boltless.dev