studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(react) add a nano button, proper icon sizes

Browse Source 
Previously we had to hack the button in order to display small clickable
icons, like the clear button in the DatePicker. By introducing a new
nano button we can natively achieve that. Also make more homegenous
font size and icon sizes in existing button sizes.
This commit is contained in:
Nathan Vasse
2023-09-01 17:33:15 +02:00
committed by NathanVss
parent 495f7d3731
commit c0028966f1
9 changed files with 86 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/react/src/cunningham-tokens.css
View File

@@ -87,6 +87,15 @@
--c--theme--font--weights--black: 800;
--c--theme--font--families--base: "Roboto Flex Variable", sans-serif;
--c--theme--font--families--accent: "Roboto Flex Variable", sans-serif;
--c--theme--font--letterspacings--h1: normal;
--c--theme--font--letterspacings--h2: normal;
--c--theme--font--letterspacings--h3: normal;
--c--theme--font--letterspacings--h4: normal;
--c--theme--font--letterspacings--h5: 1px;
--c--theme--font--letterspacings--h6: normal;
--c--theme--font--letterspacings--l: normal;
--c--theme--font--letterspacings--m: normal;
--c--theme--font--letterspacings--s: normal;
--c--theme--spacings--xl: 4rem;
--c--theme--spacings--l: 3rem;
--c--theme--spacings--b: 1.625rem;
@@ -200,8 +209,13 @@
--c--components--button--border-radius--focus: 8px;
--c--components--button--medium-height: 48px;
--c--components--button--small-height: 32px;
--c--components--button--nano-height: 24px;
--c--components--button--medium-font-size: var(--c--theme--font--sizes--l);
--c--components--button--medium-icon-font-size: 1.5rem;
--c--components--button--small-font-size: var(--c--theme--font--sizes--m);
--c--components--button--small-icon-font-size: var(--c--theme--font--sizes--l);
--c--components--button--nano-font-size: var(--c--theme--font--sizes--m);
--c--components--button--nano-icon-font-size: var(--c--theme--font--sizes--l);
--c--components--button--font-weight: var(--c--theme--font--weights--regular);
--c--components--button--font-family: var(--c--theme--font--families--base);
}