style: add inter font and apply #6328
Conversation
✅ Deploy Preview for determined-ui ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
Is there a ticket for this? |
@alexjdetermined, quick go make a ticket! Senior Alex J just wanted to see what this looks like via netlify preview, not something that is going to land. |
hkang1
force-pushed
the
style/inter-font
branch
3 times, most recently
from
e374a00 to
721e2d9
Compare
Added the corresponding ticket. |
| @@ -162,7 +162,7 @@ export const LineChart: React.FC<LineChartProps> = ({ | |||
| return { | |||
| axes: [ | |||
| { | |||
| font: '12px "Objektiv Mk3", Arial, Helvetica, sans-serif', | |||
| font: '12px Inter, Arial, Helvetica, sans-serif', | |||
There was a problem hiding this comment.
nit: not a big deal since this is the only component where it's happening right now, but it would be nice to have font (and any other global styles) configured in one place for use in any canvas component, instead of defining it manually for each case.
There was a problem hiding this comment.
ideally I was hoping to put CSS var directly here, but I don't think it worked properly for me... probably could take another look to make sure I used the right syntax
There was a problem hiding this comment.
oh, wdy know! the css var worked great here...
| @@ -5,7 +5,7 @@ | |||
| } | |||
| } | |||
| .row { | |||
| height: 60px; | |||
| height: 48px; | |||
There was a problem hiding this comment.
nit: I guess we're replacing this table anyway, but I think height value isn't doing anything here.
There was a problem hiding this comment.
the table will be replaced just for exp but yeah probably eventually they will all be replaced?
But doesn't the experiment list table look more compact for you? from 60 to 48
There was a problem hiding this comment.
it is more compact, i just meant that it's at 49px based on content and reducing it to 48px isn't doing anything
hkang1
force-pushed
the
style/inter-font
branch
from
721e2d9 to
22cfc20
Compare
Description
Update Web UI font from
Objektiv Mk3toIntervariable font.BEFORE:
AFTER:
Test Plan
Commentary (optional)
Inter font was developed for Figma use and designed to be highly legible. The font comes in two flavors. One as a suite of fonts with each variation as a separate woff2 file. The second comes in two variable font, regular|roman and italic. The font weights are controlled via CSS @font-face. The browsers that support variable font will use them and as a fallback the family suite is used.
--theme-font-family-varis introduced to provide a reference for CSS to use via the@support { ... }selector. The fallback would still reference--theme-font-familyas before.--theme-font-familyand--font-family). The decision was made to drop the one without the--themeprefix to keep the font family as a part of the theme in case future themes decide to use a different set of fonts.Checklist
docs/release-notes/.See Release Note for details.
Ticket
WEB-1042