Skip to content

Commit

Permalink
feat(tokens): add new tokens (#2467)
Browse files Browse the repository at this point in the history 
* feat(tokens): add new tokens

* chore: update snap

* chore: update react native snaps

* fix: build errors

* chore: update react native snaps

* chore: update snap web

* Create thin-horses-attack.md

---------

Co-authored-by: tewarig <[email protected]>
Co-authored-by: Saurabh Daware <[email protected]>
  • Loading branch information
@rzpcibot @tewarig @saurabhdaware
3 people authored Jan 16, 2025
1 parent eadeae3 commit 2326fa2
Show file tree
Hide file tree
Showing 20 changed files with 217 additions and 141 deletions.
5 changes: 5 additions & 0 deletions .changeset/thin-horses-attack.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@razorpay/blade": patch
---

feat(tokens): change token values to match figma
48 changes: 24 additions & 24 deletions .../src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1480,13 +1480,13 @@ exports[`<BaseButton /> should render disabled button 1`] = `
buttonPaddingTop="0px"
collapsable={false}
data-blade-component="button"
defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)"
defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
focusBackgroundColor="hsla(227, 100%, 59%, 0.18)"
focusBorderColor="hsla(227, 100%, 59%, 0.18)"
focusRingColor="hsla(227, 100%, 59%, 0.18)"
focusable={true}
hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)"
hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
isFullWidth={false}
isLoading={false}
Expand Down Expand Up @@ -1515,7 +1515,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
{
"alignItems": "center",
"alignSelf": "center",
"backgroundColor": "hsla(227, 100%, 59%, 0.09)",
"backgroundColor": "hsla(227, 100%, 59%, 0.18)",
"borderColor": "hsla(227, 100%, 59%, 0.18)",
"borderRadius": 4,
"borderStyle": "solid",
Expand All @@ -1536,7 +1536,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
"width": "auto",
},
{
"backgroundColor": "hsla(227, 100%, 59%, 0.09)",
"backgroundColor": "hsla(227, 100%, 59%, 0.18)",
"borderColor": "hsla(227, 100%, 59%, 0.18)",
},
]
Expand Down Expand Up @@ -1590,7 +1590,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
style={
[
{
"color": "hsla(227, 100%, 59%, 0.18)",
"color": "hsla(227, 100%, 59%, 0.32)",
"fontFamily": "Inter",
"fontSize": 14,
"fontStyle": "normal",
Expand Down Expand Up @@ -3416,13 +3416,13 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
buttonPaddingTop="0px"
collapsable={false}
data-blade-component="button"
defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)"
defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
focusBackgroundColor="hsla(227, 100%, 59%, 0.18)"
focusBorderColor="hsla(227, 100%, 59%, 0.18)"
focusRingColor="hsla(227, 100%, 59%, 0.18)"
focusable={true}
hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)"
hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
isFullWidth={false}
isLoading={false}
Expand Down Expand Up @@ -3451,7 +3451,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
{
"alignItems": "center",
"alignSelf": "center",
"backgroundColor": "hsla(227, 100%, 59%, 0.09)",
"backgroundColor": "hsla(227, 100%, 59%, 0.18)",
"borderColor": "hsla(227, 100%, 59%, 0.18)",
"borderRadius": 4,
"borderStyle": "solid",
Expand All @@ -3472,7 +3472,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
"width": "auto",
},
{
"backgroundColor": "hsla(227, 100%, 59%, 0.09)",
"backgroundColor": "hsla(227, 100%, 59%, 0.18)",
"borderColor": "hsla(227, 100%, 59%, 0.18)",
},
]
Expand Down Expand Up @@ -3526,7 +3526,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
style={
[
{
"color": "hsla(227, 100%, 59%, 0.18)",
"color": "hsla(227, 100%, 59%, 0.32)",
"fontFamily": "Inter",
"fontSize": 14,
"fontStyle": "normal",
Expand Down Expand Up @@ -3702,7 +3702,7 @@ exports[`<BaseButton /> should render disabled primary color secondary button 1`
style={
[
{
"color": "hsla(227, 100%, 59%, 0.18)",
"color": "hsla(227, 100%, 59%, 0.32)",
"fontFamily": "Inter",
"fontSize": 14,
"fontStyle": "normal",
Expand Down Expand Up @@ -3768,13 +3768,13 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
buttonPaddingTop="0px"
collapsable={false}
data-blade-component="button"
defaultBackgroundColor="hsla(211, 20%, 52%, 0.09)"
defaultBackgroundColor="hsla(211, 20%, 52%, 0.18)"
defaultBorderColor="hsla(214, 40%, 92%, 1)"
focusBackgroundColor="hsla(211, 20%, 52%, 0.09)"
focusBackgroundColor="hsla(211, 20%, 52%, 0.18)"
focusBorderColor="hsla(214, 40%, 92%, 1)"
focusRingColor="hsla(227, 100%, 59%, 0.18)"
focusable={true}
hoverBackgroundColor="hsla(211, 20%, 52%, 0.09)"
hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)"
hoverBorderColor="hsla(214, 40%, 92%, 1)"
isFullWidth={false}
isLoading={false}
Expand Down Expand Up @@ -3803,7 +3803,7 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
{
"alignItems": "center",
"alignSelf": "center",
"backgroundColor": "hsla(211, 20%, 52%, 0.09)",
"backgroundColor": "hsla(211, 20%, 52%, 0.18)",
"borderColor": "hsla(214, 40%, 92%, 1)",
"borderRadius": 4,
"borderStyle": "solid",
Expand All @@ -3824,7 +3824,7 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
"width": "auto",
},
{
"backgroundColor": "hsla(211, 20%, 52%, 0.09)",
"backgroundColor": "hsla(211, 20%, 52%, 0.18)",
},
]
}
Expand Down Expand Up @@ -4998,13 +4998,13 @@ exports[`<BaseButton /> should render loading button 1`] = `
buttonPaddingTop="0px"
collapsable={false}
data-blade-component="button"
defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)"
defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
focusBackgroundColor="hsla(227, 100%, 59%, 0.18)"
focusBorderColor="hsla(227, 100%, 59%, 0.18)"
focusRingColor="hsla(227, 100%, 59%, 0.18)"
focusable={true}
hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)"
hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
isFullWidth={false}
isLoading={true}
Expand Down Expand Up @@ -5033,7 +5033,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
{
"alignItems": "center",
"alignSelf": "center",
"backgroundColor": "hsla(227, 100%, 59%, 0.09)",
"backgroundColor": "hsla(227, 100%, 59%, 0.18)",
"borderColor": "hsla(227, 100%, 59%, 0.18)",
"borderRadius": 4,
"borderStyle": "solid",
Expand All @@ -5054,7 +5054,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
"width": "auto",
},
{
"backgroundColor": "hsla(227, 100%, 59%, 0.09)",
"backgroundColor": "hsla(227, 100%, 59%, 0.18)",
"borderColor": "hsla(227, 100%, 59%, 0.18)",
},
]
Expand Down Expand Up @@ -5275,7 +5275,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
style={
[
{
"color": "hsla(227, 100%, 59%, 0.18)",
"color": "hsla(227, 100%, 59%, 0.32)",
"fontFamily": "Inter",
"fontSize": 14,
"fontStyle": "normal",
Expand Down
40 changes: 20 additions & 20 deletions ...ade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
min-height: 36px;
width: auto;
cursor: not-allowed;
background-color: hsla(227,100%,59%,0.09);
background-color: hsla(227,100%,59%,0.18);
border-color: hsla(227,100%,59%,0.18);
border-width: 0px;
border-radius: 4px;
Expand Down Expand Up @@ -102,17 +102,17 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
}
.c5.c5.c5.c5.c5:hover {
background-color: hsla(227,100%,59%,0.09);
background-color: hsla(227,100%,59%,0.18);
border-color: hsla(227,100%,59%,0.18);
}
.c5.c5.c5.c5.c5:active {
background-color: hsla(227,100%,59%,0.09);
background-color: hsla(227,100%,59%,0.18);
border-color: hsla(227,100%,59%,0.18);
}
.c5.c5.c5.c5.c5:focus-visible {
background-color: hsla(227,100%,59%,0.09);
background-color: hsla(227,100%,59%,0.18);
border-color: hsla(227,100%,59%,0.18);
outline: 1px solid hsla(227,100%,59%,0.09);
box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
Expand Down Expand Up @@ -213,7 +213,7 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
}
.c10.c10.c10.c10.c10 {
color: hsla(227,100%,59%,0.18);
color: hsla(227,100%,59%,0.32);
font-family: "Inter","Inter Fallback Arial",Arial;
font-size: 0.875rem;
font-weight: 500;
Expand Down Expand Up @@ -1393,7 +1393,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
min-height: 36px;
width: auto;
cursor: not-allowed;
background-color: hsla(227,100%,59%,0.09);
background-color: hsla(227,100%,59%,0.18);
border-color: hsla(227,100%,59%,0.18);
border-width: 0px;
border-radius: 4px;
Expand Down Expand Up @@ -1427,17 +1427,17 @@ exports[`<BaseButton /> should render disabled button 1`] = `
}
.c0.c0.c0.c0.c0:hover {
background-color: hsla(227,100%,59%,0.09);
background-color: hsla(227,100%,59%,0.18);
border-color: hsla(227,100%,59%,0.18);
}
.c0.c0.c0.c0.c0:active {
background-color: hsla(227,100%,59%,0.09);
background-color: hsla(227,100%,59%,0.18);
border-color: hsla(227,100%,59%,0.18);
}
.c0.c0.c0.c0.c0:focus-visible {
background-color: hsla(227,100%,59%,0.09);
background-color: hsla(227,100%,59%,0.18);
border-color: hsla(227,100%,59%,0.18);
outline: 1px solid hsla(227,100%,59%,0.09);
box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
Expand Down Expand Up @@ -1485,7 +1485,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
}
.c4.c4.c4.c4.c4 {
color: hsla(227,100%,59%,0.18);
color: hsla(227,100%,59%,0.32);
font-family: "Inter","Inter Fallback Arial",Arial;
font-size: 0.875rem;
font-weight: 500;
Expand Down Expand Up @@ -2999,7 +2999,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
min-height: 36px;
width: auto;
cursor: not-allowed;
background-color: hsla(227,100%,59%,0.09);
background-color: hsla(227,100%,59%,0.18);
border-color: hsla(227,100%,59%,0.18);
border-width: 0px;
border-radius: 4px;
Expand Down Expand Up @@ -3033,17 +3033,17 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
}
.c0.c0.c0.c0.c0:hover {
background-color: hsla(227,100%,59%,0.09);
background-color: hsla(227,100%,59%,0.18);
border-color: hsla(227,100%,59%,0.18);
}
.c0.c0.c0.c0.c0:active {
background-color: hsla(227,100%,59%,0.09);
background-color: hsla(227,100%,59%,0.18);
border-color: hsla(227,100%,59%,0.18);
}
.c0.c0.c0.c0.c0:focus-visible {
background-color: hsla(227,100%,59%,0.09);
background-color: hsla(227,100%,59%,0.18);
border-color: hsla(227,100%,59%,0.18);
outline: 1px solid hsla(227,100%,59%,0.09);
box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
Expand Down Expand Up @@ -3091,7 +3091,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
}
.c4.c4.c4.c4.c4 {
color: hsla(227,100%,59%,0.18);
color: hsla(227,100%,59%,0.32);
font-family: "Inter","Inter Fallback Arial",Arial;
font-size: 0.875rem;
font-weight: 500;
Expand Down Expand Up @@ -3237,7 +3237,7 @@ exports[`<BaseButton /> should render disabled primary color secondary button 1`
}
.c4.c4.c4.c4.c4 {
color: hsla(227,100%,59%,0.18);
color: hsla(227,100%,59%,0.32);
font-family: "Inter","Inter Fallback Arial",Arial;
font-size: 0.875rem;
font-weight: 500;
Expand Down Expand Up @@ -3291,7 +3291,7 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
min-height: 36px;
width: auto;
cursor: not-allowed;
background-color: hsla(211,20%,52%,0.09);
background-color: hsla(211,20%,52%,0.18);
border-color: hsla(214,40%,92%,1);
border-width: 0px;
border-radius: 4px;
Expand Down Expand Up @@ -3325,15 +3325,15 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
}
.c0.c0.c0.c0.c0:hover {
background-color: hsla(211,20%,52%,0.09);
background-color: hsla(211,20%,52%,0.18);
}
.c0.c0.c0.c0.c0:active {
background-color: hsla(211,20%,52%,0.09);
background-color: hsla(211,20%,52%,0.18);
}
.c0.c0.c0.c0.c0:focus-visible {
background-color: hsla(211,20%,52%,0.09);
background-color: hsla(211,20%,52%,0.18);
outline: 1px solid hsla(227,100%,59%,0.09);
box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
}
Expand Down
Loading

0 comments on commit 2326fa2

Please sign in to comment.