mirror of
https://github.com/Unleash/unleash.git
synced 2026-11-01 08:31:26 +00:00
Henning A. Sillerud
a9b765de61
## Summary First slice of the design-system improvements work, split out so the lower-risk button changes can land ahead of the input/form changes. This PR covers **buttons + the shared control foundation only** — it does **not** touch input/select styling or tabs (those follow in separate PRs), and **nothing here changes how inputs render**. ## What's included - **`controls.ts`** — the shared control height scale (`24 / 30 / 36`) plus button and icon-button sizing, the secondary (subtle outlined) button treatment, and a global `MuiButtonBase` override that removes the ripple everywhere and restores a focus-visible outline in its place. - **`theme.ts` / `dark-theme.ts`** — wire the button/icon-button sizing and the shared override into both themes. Buttons default to `large` to preserve today's visual weight, drop the contained-button shadow, and use a `600` (semi-bold) label. - **`index.html`** — load the Sen `600` weight the new labels use. - **Components** — `PermissionButton`, `ImportButton`, and the project flags header drop a now-redundant local `disableRipple` and align icon buttons to the icon scale. ## Notes for review - **Ripple removal is global** (via `MuiButtonBase`) — selects, tabs, and menu items lose their ripple too, and gain the focus-visible outline. This is intentional foundation, not button-only. - Buttons and inputs **won't be height-aligned yet** — input sizing lands in the follow-up `ds-inputs` PR. That's expected. - Tabs are intentionally left as-is here; they'll be their own PR. ## Screenshots <img width="904" height="487" alt="image" src="https://github.com/user-attachments/assets/2bddf2c7-8381-459b-9178-501c620aaa47" /> <img width="921" height="474" alt="image" src="https://github.com/user-attachments/assets/32a2ad24-4da2-4a4a-b3ad-a4a55b288ae1" /> <img width="1285" height="723" alt="image" src="https://github.com/user-attachments/assets/45bfd755-2f9c-4d52-a383-e8fd3a3697d9" /> <img width="1307" height="876" alt="image" src="https://github.com/user-attachments/assets/90cc9dbc-3abf-436c-80de-dcfae7ea5764" /> <img width="1043" height="539" alt="image" src="https://github.com/user-attachments/assets/84ba852c-9c25-4aa9-8ec9-f692aed5732e" /> <img width="1056" height="546" alt="image" src="https://github.com/user-attachments/assets/f8136819-3be6-44a8-9e81-b4cae7c13dfb" /> <img width="843" height="512" alt="image" src="https://github.com/user-attachments/assets/e9cdd3b3-b24b-4c9b-a3d0-fc312afecf5d" /> <img width="847" height="516" alt="image" src="https://github.com/user-attachments/assets/6075136f-0115-4271-9ce5-f4903a7aaf5c" /> 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Henning Sillerud <henning.sillerud@getunleash.io> Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Thomas Heartman <thomas@getunleash.io> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Thomas Heartman <thomasheartman+github@gmail.com>
30 lines
1.2 KiB
HTML
30 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" href="::faviconPrefix::/favicon.ico" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="baseUriPath" content="::baseUriPath::" />
|
|
<meta name="cdnPrefix" content="::cdnPrefix::" />
|
|
<meta name="uiFlags" content="::uiFlags::" />
|
|
<meta name="unleashToken" content="::unleashToken::" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="unleash" />
|
|
<title>Unleash</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Sen:wght@400;500;600;700;800&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/index.tsx"></script>
|
|
</body>
|
|
</html>
|