WIP: React Native modal fixes #1

Draft

MikeFaith wants to merge 2 commits from MikeFaith/dt-design-system:main into main

pull from: MikeFaith/dt-design-system:main

merge into: :main

:main

:changeset-release/main

Conversation 0 Commits 2 Files Changed 3

+112 -213

MikeFaith commented 2026-08-01 13:04:47 -07:00

Member

Copy Link

Copy Source

The modal collapsed when used with scroll view.

The modal collapsed when used with scroll view.

MikeFaith added 5 commits 2026-08-01 13:04:48 -07:00

fix(react-native): DTCard uses flexGrow so it renders inside content-sized parents ... ce2cdd3ede

flex: 1 zeroes flexBasis, so inside a parent whose height is content-derived
(e.g. a Paper Modal content container) the card measured 0 and collapsed —
the frame never drew and overflow: hidden clipped the header/body. flexGrow
keeps flexBasis auto so the card fills a parent that has height to give.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

chore: mark showcase apps and workspace root private ... 6a2bb96d79

Keeps changeset publish / npm publish from pushing the Electron and Expo
showcase apps (and the workspace root) to the registry — they're apps, not
consumable libraries.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

docs(changeset): patch @dangerousthings/react-native for DTCard flexGrow fix ... cb8dd16819

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

chore: gitignore local scratch (.claude/, image.png, screenshot-*.mjs) ... cf701d6bb5

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

chore: point package repository metadata at the Gitea org ... 1d8af5bcc6

Update repository.url (and the desktop homepage) from github.com/dangerous-tac0s
to git.dngr.us/DangerousThings/dt-design-system across all packages, and add the
missing repository field to showcase-mobile. Reflects the move off GitHub.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

MikeFaith added 5 commits 2026-09-05 10:51:13 -07:00

fix(forms): centre the checkbox tick instead of leaving it low and right ... ba014e8477

The tick is the bottom+left borders of a 10x6 box, so its ink centroid is at
(3.86, 4.14) in box coords rather than the box centre (5, 3). Rotating -45deg
about the centre therefore drops the visible mass 1.61px below wherever the box
is placed — nobody had compensated for that, so at left:6/top:8 the glyph sat
low and left of centre with its long arm running into the bottom-right bevel
cut.

Offsets derived from that geometry rather than nudged by eye: the box centre
wants to sit at (12, 10.39) for the ink to land dead centre of the 24px box,
giving left:7 and top:7.4.

Verified at 7x zoom against a crosshair on the 24px box, checked, unchecked and
disabled.

fix(checkbox): DTCheckbox works in a plain form ... 790600dacb

It was controlled-only and passed no attributes through to the input, so a
<form> could not use it: no `name` reached the element, meaning the field never
submitted. Consumers were dropping to a bare native input to get a working
form, which is how an unstyled checkbox ended up on the address page.

Now controlled when `checked` is passed and uncontrolled otherwise, with
name/id/required/value and the rest of the native attributes forwarded.

fix(forms): make the unchecked DT checkbox visible ... 56decb094c

The unchecked box was a 10%-opacity fill with no border and a 1px
drop-shadow — on a dark surface that reads as empty space, so on a page
of several checkboxes only the ticked one looked like a control at all.

Outline is an inset shadow rather than a border: clip-path cuts the
bevel out of the border box, which would lose a real border's corners.

Affects every input[type=checkbox] under the dt brand.
Revert with: git revert <this commit>

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

fix(forms): stop host input resets deforming the checkbox ... 82a3d5e307

A generic `input {}` rule in a host app (padding, margin, border-radius)
leaks straight into the checkbox, which the DT rule never zeroed — so the
bevel rendered as a rounded, vertically offset slab.

Revert with: git revert <this commit>

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

fix(web): card styles apply to classic brand, not just dt ... 5dc4403f26

The entire .card ruleset in bevels.css was scoped to [data-brand="dt"] —
layout, header bar, full-bleed body, and the .mode-* colour variables.
Classic-brand cards therefore got nothing but a badge border-radius:

  - .card-title rendered as bare inherited text with no accent bar
  - .card had position: static, so .dt-card-badge (position: absolute,
    from an unscoped rule) anchored to <body> and parked in the page's
    bottom-right corner instead of the card
  - .card-body-flush images were not full-bleed
  - LAB/BUNDLE cards lost their warning/other colour

Unscoped the structural rules and added a [data-brand="classic"] block
that swaps the (already degenerate, --bevel-* is 0) clip-paths for
border-radius, plus symmetric badge padding since there is no bevel to
clear. dt rendering is byte-identical — verified by screenshot.

Revert with: git revert <this commit>

MikeFaith added 1 commit 2026-09-05 11:14:55 -07:00

ci: publish to npm from Gitea Actions a7ee5f8d33

MikeFaith added 1 commit 2026-09-05 11:16:04 -07:00

ci: publish to npm from Gitea Actions 66d69c0ba8

MikeFaith added 1 commit 2026-09-05 13:50:19 -07:00

chore: version packages 97684a9f3c

MikeFaith added 1 commit 2026-09-12 17:22:45 -07:00

feat: colour vision palettes, motion scale, and a standard settings panel ... ed1d3c060b

Migrates the storefront's colourblind palettes into tokens, generated as
[data-cb] CSS blocks (dark mode only) for both brands. The storefront's
ΔE / contrast check now runs in the tokens build and fails on a bad
palette; it caught the deuteranopia error orange at 4.4:1 on classic's
navy, so that value is now #c86000.

Animation speed rides along: animations.css scales durations by
--motion-scale, and both data-motion="0" and the classic brand bypass
animation outright. Brand tokens carry an `animations` flag so React
Native forces motion to 0 for classic too.

DTWebThemeProvider and DTThemeProvider take colorVision and motionScale;
buildThemeFromBrand moves into the react-native package from the
showcase. DTSettingsPanel (react and react-native) renders theme,
animation speed and colour vision as controlled sections.

Changesets: onlyUpdatePeerDependentsWhenOutOfRange, so a minor on tokens
no longer majors react through its `*` peer range. Versions bumped:
tokens 0.4.0, web 0.6.0, react 2.2.0, react-native 0.5.0.

Design: docs/plans/2026-09-12-color-vision-and-settings-design.md

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

MikeFaith marked the pull request as work in progress 2026-09-12 20:52:00 -07:00

MikeFaith added 2 commits 2026-09-13 09:01:10 -07:00

fix(react-native): DTCard frame from Views, SVG only for bevel corners, so tall cards render correctly ... 28937ea673

react-native-svg draws a tall Svg progressively lower the taller it is (~3px at 1200dp,
~10px at 3800dp on a Pixel 7a) while a plain View lands exactly on its layout box, so the
three full-height SVG overlays slid down relative to the header on tall cards and opened a
black notch in the top-left corner. Straight edges and the progress strip are now
layout-driven Views (no measuring, no first-frame gap); only the two beveled bottom corners
stay SVG. The bottom-right corner is split into a background layer under the content and an
accent band over it so content is never painted over; pieces overlap 1dp to avoid seams.
No API change; classic (non-bevel) branch untouched. Verified on device at 60/1200/4000dp.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

chore(react-native): version 0.5.1 for the tall-card frame fix ... 77664498a4

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

You are not authorized to merge this pull request.

This pull request can be merged automatically.

This pull request is marked as a work in progress.

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u https://git.dngr.us/MikeFaith/dt-design-system main:MikeFaith-main

git checkout MikeFaith-main

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No labels

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

MikeFaith amal (Amal Graafstra) drewbug (A. C. Buglione)

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DangerousThings/dt-design-system#1

Allow edits from maintainers