Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add Arial as fallback for fonts #2048

Merged
merged 12 commits into from
Mar 1, 2024
Merged

feat: add Arial as fallback for fonts #2048

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1a95961
feat: add Arial as fallback for fonts
saurabhdaware Feb 28, 2024
9f17b2d
feat: add more accurate overrides
saurabhdaware Feb 28, 2024
6227d94
fix: basic example dependencies
saurabhdaware Feb 29, 2024
0c657cf
feat: update snapshots
saurabhdaware Feb 29, 2024
778a76f
Create mighty-kangaroos-destroy.md
saurabhdaware Feb 29, 2024
914631f
fix: add blade prefix, update fonts.css url
saurabhdaware Mar 1, 2024
03b6de5
Merge branch 'font-fallback' of github.com:razorpay/blade into font-f…
saurabhdaware Mar 1, 2024
6266793
fix: snapshots
saurabhdaware Mar 1, 2024
db36479
Merge branch 'master' of github.com:razorpay/blade into font-fallback
saurabhdaware Mar 1, 2024
ca6acc5
feat: update snapshots again
saurabhdaware Mar 1, 2024
eeea0f9
feat: remove font css variable
saurabhdaware Mar 1, 2024
d191627
fix: snapshots again
saurabhdaware Mar 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/mighty-kangaroos-destroy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@razorpay/blade": patch
---

feat: add adjusted font fallbacks for Inter and TASA
24 changes: 24 additions & 0 deletions packages/blade/fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,3 +80,27 @@
U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20A0-20AF, U+20B0-20BF, U+20C0,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback Fonts */
@font-face {
font-family: 'Inter Fallback Arial';
src: local(Arial);
size-adjust: 105%;
ascent-override: normal;
descent-override: normal;
line-gap-override: 5%;
}

@font-face {
font-family: 'TASA Orbiter Fallback Arial';
src: local(Arial);
size-adjust: 98%;
ascent-override: normal;
descent-override: normal;
line-gap-override: 7%;
}

:root {
--inter-fallback: 'Inter Fallback Arial';
--tasa-orbiter-fallback: 'TASA Orbiter Fallback Arial';
saurabhdaware marked this conversation as resolved.
Show resolved Hide resolved
}
6 changes: 3 additions & 3 deletions packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Accordion /> should render Accordion on server 1`] = `"<div id="root"><div data-blade-component="accordion" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kPjdiT"><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 boALAZ"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">How can I setup Route?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 boALAZ"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">How can I setup QR Codes?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 boALAZ"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO eWWvyY" data-blade-component="text">How can I setup Subscriptions?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO fmkfYs" data-blade-component="text">Just use Razorpay.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div></div></div>"`;
exports[`<Accordion /> should render Accordion on server 1`] = `"<div id="root"><div data-blade-component="accordion" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx kPjdiT"><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 boALAZ"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO kNyGhJ" data-blade-component="text">How can I setup Route?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO EQBDt" data-blade-component="text">You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 boALAZ"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO kNyGhJ" data-blade-component="text">How can I setup QR Codes?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO EQBDt" data-blade-component="text">Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="accordion-item" class="BaseBox-bmPWx"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fOtKhr"><div role="heading" aria-level="3" data-blade-component="base-box" class="BaseBox-bmPWx mhVFF"><button aria-expanded="false" aria-controls="collapsible-body-undefined" data-blade-component="accordion-button" class="StyledAccordionButtonweb__StyledAccordionButton-sc-1qxmqda-0 boALAZ"><div data-blade-component="base-box" class="BaseBox-bmPWx clwwYS"><span class="StyledBaseText-dVBfTO kNyGhJ" data-blade-component="text">How can I setup Subscriptions?</span></div><div direction="bottom" aria-hidden="true" data-blade-component="base-box" class="BaseBox-bmPWx CollapsibleChevronIconweb__StyledCollapsibleChevronIcon-sc-1kwlg5h-0 fQPXYw"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" clip-rule="evenodd" fill="currentColor" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div></button></div><div id="collapsible-body-undefined" role="region" aria-hidden="true" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 jjhSqa"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="base-box" class="BaseBox-bmPWx eZsRMv"><p class="StyledBaseText-dVBfTO EQBDt" data-blade-component="text">Just use Razorpay.</p></div></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div></div></div></div>"`;

exports[`<Accordion /> should render Accordion on server 2`] = `
.c3.c3.c3.c3.c3 {
Expand Down Expand Up @@ -117,7 +117,7 @@ exports[`<Accordion /> should render Accordion on server 2`] = `

.c5.c5.c5.c5.c5 {
color: hsla(212,39%,16%,1);
font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
font-family: "Inter",var(--inter-fallback),Arial;
font-size: 1rem;
font-weight: 600;
font-style: normal;
Expand All @@ -134,7 +134,7 @@ exports[`<Accordion /> should render Accordion on server 2`] = `

.c10.c10.c10.c10.c10 {
color: hsla(211,26%,34%,1);
font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
font-family: "Inter",var(--inter-fallback),Arial;
font-size: 0.875rem;
font-weight: 400;
font-style: normal;
Expand Down
4 changes: 2 additions & 2 deletions packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ exports[`<Accordion /> should render 1`] = `

.c5.c5.c5.c5.c5 {
color: hsla(212,39%,16%,1);
font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
font-family: "Inter",var(--inter-fallback),Arial;
font-size: 1rem;
font-weight: 600;
font-style: normal;
Expand All @@ -132,7 +132,7 @@ exports[`<Accordion /> should render 1`] = `

.c10.c10.c10.c10.c10 {
color: hsla(211,26%,34%,1);
font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
font-family: "Inter",var(--inter-fallback),Arial;
font-size: 0.875rem;
font-weight: 400;
font-style: normal;
Expand Down
Loading
Loading