diff --git a/.changeset/thin-horses-attack.md b/.changeset/thin-horses-attack.md
new file mode 100644
index 00000000000..4d4f06444c3
--- /dev/null
+++ b/.changeset/thin-horses-attack.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+feat(tokens): change token values to match figma
diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
index 141647131d8..1145c89aa01 100644
--- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
+++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap
@@ -1480,13 +1480,13 @@ exports[` 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}
@@ -1515,7 +1515,7 @@ exports[` 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",
@@ -1536,7 +1536,7 @@ exports[` 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)",
},
]
@@ -1590,7 +1590,7 @@ exports[` 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",
@@ -3416,13 +3416,13 @@ exports[` 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}
@@ -3451,7 +3451,7 @@ exports[` 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",
@@ -3472,7 +3472,7 @@ exports[` 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)",
},
]
@@ -3526,7 +3526,7 @@ exports[` 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",
@@ -3702,7 +3702,7 @@ exports[` 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",
@@ -3768,13 +3768,13 @@ exports[` 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}
@@ -3803,7 +3803,7 @@ exports[` 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",
@@ -3824,7 +3824,7 @@ exports[` should render disabled primary color tertiary button 1`]
"width": "auto",
},
{
- "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+ "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
},
]
}
@@ -4998,13 +4998,13 @@ exports[` 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}
@@ -5033,7 +5033,7 @@ exports[` 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",
@@ -5054,7 +5054,7 @@ exports[` 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)",
},
]
@@ -5275,7 +5275,7 @@ exports[` 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",
diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap
index 10d7352daea..4445e93ec95 100644
--- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap
+++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap
@@ -68,7 +68,7 @@ exports[` 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;
@@ -102,17 +102,17 @@ exports[` 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);
@@ -213,7 +213,7 @@ exports[` 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;
@@ -1393,7 +1393,7 @@ exports[` 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;
@@ -1427,17 +1427,17 @@ exports[` 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);
@@ -1485,7 +1485,7 @@ exports[` 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;
@@ -2999,7 +2999,7 @@ exports[` 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;
@@ -3033,17 +3033,17 @@ exports[` 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);
@@ -3091,7 +3091,7 @@ exports[` 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;
@@ -3237,7 +3237,7 @@ exports[` 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;
@@ -3291,7 +3291,7 @@ exports[` 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;
@@ -3325,15 +3325,15 @@ exports[` 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);
}
diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap
index 5baac5b6bc6..7c374772eb9 100644
--- a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap
+++ b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap
@@ -950,13 +950,13 @@ exports[` 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}
@@ -985,7 +985,7 @@ exports[` 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",
@@ -1006,7 +1006,7 @@ exports[` 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)",
},
]
@@ -1060,7 +1060,7 @@ exports[` 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",
@@ -1830,13 +1830,13 @@ exports[` 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}
@@ -1865,7 +1865,7 @@ exports[` 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",
@@ -1886,7 +1886,7 @@ exports[` 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)",
},
]
@@ -1940,7 +1940,7 @@ exports[` 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",
@@ -2116,7 +2116,7 @@ exports[` 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",
@@ -2182,13 +2182,13 @@ exports[` 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}
@@ -2217,7 +2217,7 @@ exports[` 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",
@@ -2238,7 +2238,7 @@ exports[` should render disabled primary color tertiary button 1`] = `
"width": "auto",
},
{
- "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+ "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
},
]
}
diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap
index 54a9fc310bb..f3e2444e126 100644
--- a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap
+++ b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.web.test.tsx.snap
@@ -681,7 +681,7 @@ exports[` 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;
@@ -715,17 +715,17 @@ exports[` 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);
@@ -773,7 +773,7 @@ exports[` 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;
@@ -1411,7 +1411,7 @@ exports[` 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;
@@ -1445,17 +1445,17 @@ exports[` 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);
@@ -1503,7 +1503,7 @@ exports[` 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;
@@ -1649,7 +1649,7 @@ exports[` 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;
@@ -1703,7 +1703,7 @@ exports[` 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;
@@ -1737,15 +1737,15 @@ exports[` 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);
}
diff --git a/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap b/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap
index 62f6ab4c03a..85746e7ad0e 100644
--- a/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap
+++ b/packages/blade/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.web.test.tsx.snap
@@ -1737,7 +1737,7 @@ exports[` should render disabled ButtonGroup 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;
@@ -1771,17 +1771,17 @@ exports[` should render disabled ButtonGroup 1`] = `
}
.c1.c1.c1.c1.c1: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);
}
.c1.c1.c1.c1.c1: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);
}
.c1.c1.c1.c1.c1: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);
@@ -1807,7 +1807,7 @@ exports[` should render disabled ButtonGroup 1`] = `
}
.c5.c5.c5.c5.c5 {
- 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;
@@ -1839,7 +1839,7 @@ exports[` should render disabled ButtonGroup 1`] = `
border-width: 1px;
border-radius: 4px;
border-style: solid;
- border-color: hsla(227,100%,59%,0.09);
+ border-color: hsla(227,100%,59%,0.18);
}
.c0.c0.c0.c0.c0 button[role="button"] {
@@ -2561,7 +2561,7 @@ exports[` 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;
@@ -2595,17 +2595,17 @@ exports[` 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);
@@ -2631,7 +2631,7 @@ exports[` 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;
@@ -2777,7 +2777,7 @@ exports[` 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;
@@ -2853,7 +2853,7 @@ exports[` 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;
@@ -2887,15 +2887,15 @@ exports[` 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);
}
diff --git a/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.web.test.tsx.snap b/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.web.test.tsx.snap
index 8d05e8c45a7..50044a5c1af 100644
--- a/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.web.test.tsx.snap
+++ b/packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.web.test.tsx.snap
@@ -231,7 +231,7 @@ exports[` should accept data-analytics attribute 1`] = `
}
.c15.c15.c15.c15.c15 {
- 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: 400;
@@ -1834,7 +1834,7 @@ exports[` should set disabled state with isDisabled 1`] = `
}
.c15.c15.c15.c15.c15 {
- 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: 400;
diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap
index ea5dd4c47c9..26ae3bfe802 100644
--- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap
+++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap
@@ -430,7 +430,7 @@ exports[` should render disabled button variant of link 1`] = `
style={
[
{
- "color": "hsla(227, 100%, 59%, 0.18)",
+ "color": "hsla(227, 100%, 59%, 0.32)",
"fontFamily": "Inter",
"fontSize": 14,
"fontStyle": "normal",
diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap
index 4a55db456cf..f20331d8262 100644
--- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap
+++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap
@@ -338,7 +338,7 @@ exports[` should render disabled button variant of link 1`] = `
}
.c2.c2.c2.c2.c2 {
- 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;
diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap
index ed7937485b9..27d16e478da 100644
--- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap
+++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap
@@ -200,7 +200,7 @@ exports[` should render disabled button variant of link 1`] = `
style={
[
{
- "color": "hsla(227, 100%, 59%, 0.18)",
+ "color": "hsla(227, 100%, 59%, 0.32)",
"fontFamily": "Inter",
"fontSize": 14,
"fontStyle": "normal",
diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap
index 7965eae8326..20c150f31cd 100644
--- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap
+++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap
@@ -148,7 +148,7 @@ exports[` should render disabled button variant of link 1`] = `
}
.c2.c2.c2.c2.c2 {
- 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;
diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap
index b4dd141e78d..c29f7573daf 100644
--- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap
+++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap
@@ -299,7 +299,7 @@ exports[` should set disabled state with isDisabled 1`] = `
[
{
"alignItems": "center",
- "backgroundColor": "hsla(211, 20%, 52%, 0.09)",
+ "backgroundColor": "hsla(211, 20%, 52%, 0.18)",
"borderRadius": 9999,
"display": "flex",
"height": 24,
diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap
index 1fb84a64d0a..aa2bbc85dd4 100644
--- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap
+++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap
@@ -273,7 +273,7 @@ exports[` should set disabled state with isDisabled 1`] = `
width: 36px;
height: 20px;
border-radius: 9999px;
- background-color: hsla(211,20%,52%,0.09);
+ background-color: hsla(211,20%,52%,0.18);
-webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
transition-timing-function: cubic-bezier(0.3,0,0.2,1);
-webkit-transition-duration: 80ms;
diff --git a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap
index 9c4dfca9768..a097a680fbd 100644
--- a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.native.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`
should render Code with color 1`] = `
style={
[
{
- "color": "hsla(227, 100%, 59%, 0.18)",
+ "color": "hsla(227, 100%, 59%, 0.32)",
"fontFamily": "Menlo",
"fontSize": 10,
"fontStyle": "normal",
diff --git a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap
index 4aea4de14f1..58417bf239e 100644
--- a/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap
+++ b/packages/blade/src/components/Typography/Code/__tests__/__snapshots__/Code.web.test.tsx.snap
@@ -2,7 +2,7 @@
exports[`
should render Code with color 1`] = `
.c1.c1.c1.c1.c1 {
- color: hsla(227,100%,59%,0.18);
+ color: hsla(227,100%,59%,0.32);
font-family: "Menlo",San Francisco Mono,Courier New,Roboto Mono,monospace;
font-size: 0.625rem;
font-weight: 400;
diff --git a/packages/blade/src/tokens/global/colors.ts b/packages/blade/src/tokens/global/colors.ts
index 89568fb0939..d18a07c2b74 100644
--- a/packages/blade/src/tokens/global/colors.ts
+++ b/packages/blade/src/tokens/global/colors.ts
@@ -16,6 +16,7 @@ export type ColorChromaticScale = Readonly<{
a100: string;
a150: string;
a200: string;
+ a400: string;
}>;
export type ColorNeutralGrayScale = Readonly<{
@@ -64,6 +65,9 @@ export type Color = Readonly<{
sea: ColorChromaticScale;
cloud: ColorChromaticScale;
forest: ColorChromaticScale;
+ orchid: ColorChromaticScale;
+ magenta: ColorChromaticScale;
+ topaz: ColorChromaticScale;
};
neutral: {
blueGrayLight: ColorNeutralGrayScale;
@@ -93,6 +97,7 @@ export const colors: Color = {
a100: `hsla(227, 100%, 59%, ${opacity[300]})`,
a150: `hsla(227, 100%, 59%, ${opacity[400]})`,
a200: `hsla(227, 100%, 59%, ${opacity[500]})`,
+ a400: `hsla(227, 100%, 59%, ${opacity[800]})`,
},
emerald: {
50: `hsla(152, 60%, 95%, ${opacity[1200]})`,
@@ -110,6 +115,7 @@ export const colors: Color = {
a100: `hsla(150, 100%, 32%, ${opacity[300]})`,
a150: `hsla(150, 100%, 32%, ${opacity[400]})`,
a200: `hsla(150, 100%, 32%, ${opacity[500]})`,
+ a400: `hsla(150, 100%, 32%, ${opacity[800]})`,
},
crimson: {
50: `hsla(0, 100%, 98%, ${opacity[1200]})`,
@@ -127,6 +133,7 @@ export const colors: Color = {
a100: `hsla(4, 74%, 49%, ${opacity[300]})`,
a150: `hsla(4, 74%, 49%, ${opacity[400]})`,
a200: `hsla(4, 74%, 49%, ${opacity[500]})`,
+ a400: `hsla(4, 74%, 49%, ${opacity[800]})`,
},
cider: {
50: `hsla(24, 100%, 96%, ${opacity[1200]})`,
@@ -144,6 +151,7 @@ export const colors: Color = {
a100: `hsla(25, 90%, 48%, ${opacity[300]})`,
a150: `hsla(25, 90%, 48%, ${opacity[400]})`,
a200: `hsla(25, 90%, 48%, ${opacity[500]})`,
+ a400: `hsla(25, 90%, 48%, ${opacity[800]})`,
},
sapphire: {
50: `hsla(201, 92%, 95%, ${opacity[1200]})`,
@@ -161,6 +169,7 @@ export const colors: Color = {
a100: `hsla(200, 84%, 44%, ${opacity[300]})`,
a150: `hsla(200, 84%, 44%, ${opacity[400]})`,
a200: `hsla(200, 84%, 44%, ${opacity[500]})`,
+ a400: `hsla(200, 84%, 44%, ${opacity[800]})`,
},
sea: {
50: `hsla(180, 39%, 95%, ${opacity[1200]})`,
@@ -178,6 +187,7 @@ export const colors: Color = {
a100: `hsla(180, 60%, 30%, ${opacity[300]})`,
a150: `hsla(180, 60%, 30%, ${opacity[400]})`,
a200: `hsla(180, 60%, 30%, ${opacity[500]})`,
+ a400: `hsla(180, 60%, 30%, ${opacity[800]})`,
},
cloud: {
50: `hsla(198, 39%, 95%, ${opacity[1200]})`,
@@ -195,6 +205,7 @@ export const colors: Color = {
a100: `hsla(200, 60%, 30%, ${opacity[300]})`,
a150: `hsla(200, 60%, 30%, ${opacity[400]})`,
a200: `hsla(200, 60%, 30%, ${opacity[500]})`,
+ a400: `hsla(200, 60%, 30%, ${opacity[800]})`,
},
forest: {
50: `hsla(152, 60%, 95%, ${opacity[1200]})`,
@@ -212,6 +223,61 @@ export const colors: Color = {
a100: `hsla(155, 100%, 31%, ${opacity[300]})`,
a150: `hsla(155, 100%, 31%, ${opacity[400]})`,
a200: `hsla(155, 100%, 31%, ${opacity[500]})`,
+ a400: `hsla(155, 100%, 31%, ${opacity[800]})`,
+ },
+ orchid: {
+ 50: `hsla(249, 100%, 98%, ${opacity[1200]})`,
+ 100: `hsla(252, 100%, 95%, ${opacity[1200]})`,
+ 200: `hsla(252, 100%, 88%, ${opacity[1200]})`,
+ 300: `hsla(252, 100%, 80%, ${opacity[1200]})`,
+ 400: `hsla(252, 100%, 74%, ${opacity[1200]})`,
+ 500: `hsla(252, 100%, 67%, ${opacity[1200]})`,
+ 600: `hsla(252, 57%, 54%, ${opacity[1200]})`,
+ 700: `hsla(251, 49%, 41%, ${opacity[1200]})`,
+ 800: `hsla(251, 49%, 32%, ${opacity[1200]})`,
+ 900: `hsla(252, 50%, 24%, ${opacity[1200]})`,
+ 1000: `hsla(252, 50%, 17%, ${opacity[1200]})`,
+ a50: `hsla(252, 100%, 67%, ${opacity[100]})`,
+ a100: `hsla(252, 100%, 67%, ${opacity[300]})`,
+ a150: `hsla(252, 100%, 67%, ${opacity[400]})`,
+ a200: `hsla(252, 100%, 67%, ${opacity[500]})`,
+ a400: `hsla(252, 100%, 67%, ${opacity[800]})`,
+ },
+ magenta: {
+ 50: `hsla(330, 78%, 97%, ${opacity[1200]})`,
+ 100: `hsla(331, 83%, 93%, ${opacity[1200]})`,
+ 200: `hsla(330, 83%, 84%, ${opacity[1200]})`,
+ 300: `hsla(331, 82%, 74%, ${opacity[1200]})`,
+ 400: `hsla(331, 82%, 65%, ${opacity[1200]})`,
+ 500: `hsla(331, 82%, 56%, ${opacity[1200]})`,
+ 600: `hsla(331, 64%, 45%, ${opacity[1200]})`,
+ 700: `hsla(331, 64%, 34%, ${opacity[1200]})`,
+ 800: `hsla(331, 65%, 27%, ${opacity[1200]})`,
+ 900: `hsla(331, 65%, 21%, ${opacity[1200]})`,
+ 1000: `hsla(331, 65%, 15%, ${opacity[1200]})`,
+ a50: `hsla(331, 82%, 56%, ${opacity[100]})`,
+ a100: `hsla(331, 82%, 56%, ${opacity[300]})`,
+ a150: `hsla(331, 82%, 56%, ${opacity[400]})`,
+ a200: `hsla(331, 82%, 56%, ${opacity[500]})`,
+ a400: `hsla(331, 82%, 56%, ${opacity[800]})`,
+ },
+ topaz: {
+ 50: `hsla(51, 100%, 92%, ${opacity[1200]})`,
+ 100: `hsla(51, 100%, 80%, ${opacity[1200]})`,
+ 200: `hsla(51, 100%, 68%, ${opacity[1200]})`,
+ 300: `hsla(51, 100%, 60%, ${opacity[1200]})`,
+ 400: `hsla(51, 100%, 50%, ${opacity[1200]})`,
+ 500: `hsla(50, 100%, 46%, ${opacity[1200]})`,
+ 600: `hsla(50, 100%, 40%, ${opacity[1200]})`,
+ 700: `hsla(50, 100%, 32%, ${opacity[1200]})`,
+ 800: `hsla(50, 100%, 28%, ${opacity[1200]})`,
+ 900: `hsla(50, 100%, 24%, ${opacity[1200]})`,
+ 1000: `hsla(50, 97%, 19%, ${opacity[1200]})`,
+ a50: `hsla(50, 100%, 46%, ${opacity[100]})`,
+ a100: `hsla(50, 100%, 46%, ${opacity[300]})`,
+ a150: `hsla(50, 100%, 46%, ${opacity[400]})`,
+ a200: `hsla(50, 100%, 46%, ${opacity[500]})`,
+ a400: `hsla(50, 100%, 46%, ${opacity[800]})`,
},
},
neutral: {
@@ -279,7 +345,7 @@ export const colors: Color = {
1300: `hsla(214, 24%, 6%, ${opacity[1200]})`,
a25: `hsla(214, 6%, 55%, ${opacity[50]})`,
a50: `hsla(214, 6%, 55%, ${opacity[100]})`,
- a75: `hsla(214, 6%, 55%, ${opacity[100]})`,
+ a75: `hsla(214, 6%, 55%, ${opacity[200]})`,
a100: `hsla(214, 6%, 55%, ${opacity[300]})`,
a200: `hsla(214, 6%, 55%, ${opacity[500]})`,
a400: `hsla(214, 6%, 55%, ${opacity[500]})`,
@@ -302,7 +368,7 @@ export const colors: Color = {
1300: `hsla(240, 5%, 4%, ${opacity[1200]})`,
a25: `hsla(228, 4%, 76%, ${opacity[50]})`,
a50: `hsla(228, 4%, 76%, ${opacity[100]})`,
- a75: `hsla(228, 4%, 76%, ${opacity[100]})`,
+ a75: `hsla(228, 4%, 76%, ${opacity[200]})`,
a100: `hsla(228, 4%, 76%, ${opacity[300]})`,
a200: `hsla(228, 4%, 76%, ${opacity[500]})`,
a400: `hsla(228, 4%, 76%, ${opacity[500]})`,
diff --git a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap
index b86a004e5fb..ab66a076a43 100644
--- a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap
+++ b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap
@@ -110,7 +110,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
},
"neutral": {
"intense": "hsla(220, 22%, 92%, 1)",
- "subtle": "hsla(216, 27%, 24%, 1)",
+ "subtle": "hsla(215, 20%, 43%, 1)",
},
"notice": {
"intense": "hsla(25, 100%, 63%, 1)",
@@ -126,7 +126,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
"background": {
"gray": {
"default": "hsla(214, 20%, 84%, 0.12)",
- "disabled": "hsla(214, 20%, 84%, 0.09)",
+ "disabled": "hsla(214, 20%, 84%, 0.18)",
"faded": "hsla(214, 20%, 84%, 0.06)",
"fadedHighlighted": "hsla(214, 20%, 84%, 0.12)",
"highlighted": "hsla(214, 20%, 84%, 0.18)",
@@ -191,7 +191,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
"border": {
"gray": {
"default": "hsla(216, 24%, 31%, 1)",
- "disabled": "hsla(217, 27%, 21%, 1)",
+ "disabled": "hsla(216, 27%, 24%, 1)",
"faded": "hsla(214, 20%, 84%, 0.18)",
"highlighted": "hsla(216, 24%, 31%, 1)",
},
@@ -377,7 +377,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
},
"popup": {
"background": {
- "intense": "hsla(217, 27%, 15%, 1)",
+ "intense": "hsla(216, 27%, 24%, 1)",
"subtle": "hsla(217, 27%, 15%, 1)",
},
"border": {
@@ -479,7 +479,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
},
},
},
- "transparent": "hsla(0, 0%, 100%, 0)",
+ "transparent": "hsla(217, 27%, 15%, 0)",
},
"onLight": {
"feedback": {
@@ -576,7 +576,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
"background": {
"gray": {
"default": "hsla(211, 20%, 52%, 0.12)",
- "disabled": "hsla(211, 20%, 52%, 0.09)",
+ "disabled": "hsla(211, 20%, 52%, 0.18)",
"faded": "hsla(211, 20%, 52%, 0.06)",
"fadedHighlighted": "hsla(211, 20%, 52%, 0.12)",
"highlighted": "hsla(211, 20%, 52%, 0.18)",
@@ -1189,6 +1189,7 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
"a100": "hsla(332, 100%, 26%, 0.12)",
"a150": "hsla(332, 100%, 26%, 0.09)",
"a200": "hsla(332, 100%, 26%, 0.18)",
+ "a400": "hsla(332, 100%, 26%, 0.24)",
"a50": "hsla(332, 100%, 26%, 0.09)",
}
`;
@@ -1479,7 +1480,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
},
"neutral": {
"intense": "hsla(220, 22%, 92%, 1)",
- "subtle": "hsla(216, 27%, 24%, 1)",
+ "subtle": "hsla(215, 20%, 43%, 1)",
},
"notice": {
"intense": "hsla(25, 100%, 63%, 1)",
@@ -1495,7 +1496,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
"background": {
"gray": {
"default": "hsla(214, 20%, 84%, 0.12)",
- "disabled": "hsla(214, 20%, 84%, 0.09)",
+ "disabled": "hsla(214, 20%, 84%, 0.18)",
"faded": "hsla(214, 20%, 84%, 0.06)",
"fadedHighlighted": "hsla(214, 20%, 84%, 0.12)",
"highlighted": "hsla(214, 20%, 84%, 0.18)",
@@ -1560,7 +1561,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
"border": {
"gray": {
"default": "hsla(216, 24%, 31%, 1)",
- "disabled": "hsla(217, 27%, 21%, 1)",
+ "disabled": "hsla(216, 27%, 24%, 1)",
"faded": "hsla(214, 20%, 84%, 0.18)",
"highlighted": "hsla(216, 24%, 31%, 1)",
},
@@ -1746,7 +1747,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
},
"popup": {
"background": {
- "intense": "hsla(217, 27%, 15%, 1)",
+ "intense": "hsla(216, 27%, 24%, 1)",
"subtle": "hsla(217, 27%, 15%, 1)",
},
"border": {
@@ -1848,7 +1849,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
},
},
},
- "transparent": "hsla(0, 0%, 100%, 0)",
+ "transparent": "hsla(217, 27%, 15%, 0)",
},
"onLight": {
"feedback": {
@@ -1945,7 +1946,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
"background": {
"gray": {
"default": "hsla(211, 20%, 52%, 0.12)",
- "disabled": "hsla(211, 20%, 52%, 0.09)",
+ "disabled": "hsla(211, 20%, 52%, 0.18)",
"faded": "hsla(211, 20%, 52%, 0.06)",
"fadedHighlighted": "hsla(211, 20%, 52%, 0.12)",
"highlighted": "hsla(211, 20%, 52%, 0.18)",
@@ -2558,6 +2559,7 @@ exports[`createTheme should create a theme with the correct brand colors 5`] = `
"a100": "hsla(57, 100%, 52%, 0.12)",
"a150": "hsla(57, 100%, 52%, 0.09)",
"a200": "hsla(57, 100%, 52%, 0.18)",
+ "a400": "hsla(57, 100%, 52%, 0.24)",
"a50": "hsla(57, 100%, 52%, 0.09)",
}
`;
diff --git a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap
index df894f49a48..853aa9cfaeb 100644
--- a/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap
+++ b/packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap
@@ -110,7 +110,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
},
"neutral": {
"intense": "hsla(220, 22%, 92%, 1)",
- "subtle": "hsla(216, 27%, 24%, 1)",
+ "subtle": "hsla(215, 20%, 43%, 1)",
},
"notice": {
"intense": "hsla(25, 100%, 63%, 1)",
@@ -126,7 +126,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
"background": {
"gray": {
"default": "hsla(214, 20%, 84%, 0.12)",
- "disabled": "hsla(214, 20%, 84%, 0.09)",
+ "disabled": "hsla(214, 20%, 84%, 0.18)",
"faded": "hsla(214, 20%, 84%, 0.06)",
"fadedHighlighted": "hsla(214, 20%, 84%, 0.12)",
"highlighted": "hsla(214, 20%, 84%, 0.18)",
@@ -191,7 +191,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
"border": {
"gray": {
"default": "hsla(216, 24%, 31%, 1)",
- "disabled": "hsla(217, 27%, 21%, 1)",
+ "disabled": "hsla(216, 27%, 24%, 1)",
"faded": "hsla(214, 20%, 84%, 0.18)",
"highlighted": "hsla(216, 24%, 31%, 1)",
},
@@ -377,7 +377,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
},
"popup": {
"background": {
- "intense": "hsla(217, 27%, 15%, 1)",
+ "intense": "hsla(216, 27%, 24%, 1)",
"subtle": "hsla(217, 27%, 15%, 1)",
},
"border": {
@@ -479,7 +479,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
},
},
},
- "transparent": "hsla(0, 0%, 100%, 0)",
+ "transparent": "hsla(217, 27%, 15%, 0)",
},
"onLight": {
"feedback": {
@@ -576,7 +576,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
"background": {
"gray": {
"default": "hsla(211, 20%, 52%, 0.12)",
- "disabled": "hsla(211, 20%, 52%, 0.09)",
+ "disabled": "hsla(211, 20%, 52%, 0.18)",
"faded": "hsla(211, 20%, 52%, 0.06)",
"fadedHighlighted": "hsla(211, 20%, 52%, 0.12)",
"highlighted": "hsla(211, 20%, 52%, 0.18)",
@@ -1117,6 +1117,7 @@ exports[`createTheme should create a theme with the correct brand colors 2`] = `
"a100": "hsla(332, 100%, 26%, 0.12)",
"a150": "hsla(332, 100%, 26%, 0.09)",
"a200": "hsla(332, 100%, 26%, 0.18)",
+ "a400": "hsla(332, 100%, 26%, 0.24)",
"a50": "hsla(332, 100%, 26%, 0.09)",
}
`;
@@ -1374,7 +1375,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
},
"neutral": {
"intense": "hsla(220, 22%, 92%, 1)",
- "subtle": "hsla(216, 27%, 24%, 1)",
+ "subtle": "hsla(215, 20%, 43%, 1)",
},
"notice": {
"intense": "hsla(25, 100%, 63%, 1)",
@@ -1390,7 +1391,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
"background": {
"gray": {
"default": "hsla(214, 20%, 84%, 0.12)",
- "disabled": "hsla(214, 20%, 84%, 0.09)",
+ "disabled": "hsla(214, 20%, 84%, 0.18)",
"faded": "hsla(214, 20%, 84%, 0.06)",
"fadedHighlighted": "hsla(214, 20%, 84%, 0.12)",
"highlighted": "hsla(214, 20%, 84%, 0.18)",
@@ -1455,7 +1456,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
"border": {
"gray": {
"default": "hsla(216, 24%, 31%, 1)",
- "disabled": "hsla(217, 27%, 21%, 1)",
+ "disabled": "hsla(216, 27%, 24%, 1)",
"faded": "hsla(214, 20%, 84%, 0.18)",
"highlighted": "hsla(216, 24%, 31%, 1)",
},
@@ -1641,7 +1642,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
},
"popup": {
"background": {
- "intense": "hsla(217, 27%, 15%, 1)",
+ "intense": "hsla(216, 27%, 24%, 1)",
"subtle": "hsla(217, 27%, 15%, 1)",
},
"border": {
@@ -1743,7 +1744,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
},
},
},
- "transparent": "hsla(0, 0%, 100%, 0)",
+ "transparent": "hsla(217, 27%, 15%, 0)",
},
"onLight": {
"feedback": {
@@ -1840,7 +1841,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
"background": {
"gray": {
"default": "hsla(211, 20%, 52%, 0.12)",
- "disabled": "hsla(211, 20%, 52%, 0.09)",
+ "disabled": "hsla(211, 20%, 52%, 0.18)",
"faded": "hsla(211, 20%, 52%, 0.06)",
"fadedHighlighted": "hsla(211, 20%, 52%, 0.12)",
"highlighted": "hsla(211, 20%, 52%, 0.18)",
@@ -2381,6 +2382,7 @@ exports[`createTheme should create a theme with the correct brand colors 5`] = `
"a100": "hsla(57, 100%, 52%, 0.12)",
"a150": "hsla(57, 100%, 52%, 0.09)",
"a200": "hsla(57, 100%, 52%, 0.18)",
+ "a400": "hsla(57, 100%, 52%, 0.24)",
"a50": "hsla(57, 100%, 52%, 0.09)",
}
`;
diff --git a/packages/blade/src/tokens/theme/bladeTheme.ts b/packages/blade/src/tokens/theme/bladeTheme.ts
index 25cdac36ad2..2bad55e8349 100644
--- a/packages/blade/src/tokens/theme/bladeTheme.ts
+++ b/packages/blade/src/tokens/theme/bladeTheme.ts
@@ -229,14 +229,14 @@ const colors: ColorsWithModes = {
gray: {
default: globalColors.neutral.blueGrayLight.a75,
highlighted: globalColors.neutral.blueGrayLight.a100,
- disabled: globalColors.neutral.blueGrayLight.a50,
+ disabled: globalColors.neutral.blueGrayLight.a100,
faded: globalColors.neutral.blueGrayLight.a25,
fadedHighlighted: globalColors.neutral.blueGrayLight.a75,
},
primary: {
default: globalColors.chromatic.azure[500],
highlighted: globalColors.chromatic.azure[600],
- disabled: globalColors.chromatic.azure.a50,
+ disabled: globalColors.chromatic.azure.a100,
faded: globalColors.chromatic.azure.a50,
fadedHighlighted: globalColors.chromatic.azure.a100,
},
@@ -352,7 +352,7 @@ const colors: ColorsWithModes = {
normal: globalColors.chromatic.azure[600],
subtle: globalColors.chromatic.azure[500],
muted: globalColors.chromatic.azure[400],
- disabled: globalColors.chromatic.azure.a100,
+ disabled: globalColors.chromatic.azure.a200,
},
onPrimary: {
normal: globalColors.neutral.white[500],
@@ -414,7 +414,7 @@ const colors: ColorsWithModes = {
normal: globalColors.chromatic.azure[600],
subtle: globalColors.chromatic.azure[500],
muted: globalColors.chromatic.azure[400],
- disabled: globalColors.chromatic.azure.a100,
+ disabled: globalColors.chromatic.azure.a200,
},
onPrimary: {
normal: globalColors.neutral.white[500],
@@ -605,7 +605,7 @@ const colors: ColorsWithModes = {
intense: globalColors.chromatic.sapphire[400],
},
neutral: {
- subtle: globalColors.neutral.blueGrayDark[700],
+ subtle: globalColors.neutral.blueGrayDark[400],
intense: globalColors.neutral.blueGrayDark[50],
},
},
@@ -672,14 +672,14 @@ const colors: ColorsWithModes = {
gray: {
default: globalColors.neutral.blueGrayDark.a75,
highlighted: globalColors.neutral.blueGrayDark.a100,
- disabled: globalColors.neutral.blueGrayDark.a50,
+ disabled: globalColors.neutral.blueGrayDark.a100,
faded: globalColors.neutral.blueGrayDark.a25,
fadedHighlighted: globalColors.neutral.blueGrayDark.a75,
},
primary: {
default: globalColors.chromatic.azure[400],
highlighted: globalColors.chromatic.azure[500],
- disabled: globalColors.chromatic.azure.a100,
+ disabled: globalColors.chromatic.azure.a150,
faded: globalColors.chromatic.azure.a150,
fadedHighlighted: globalColors.chromatic.azure.a200,
},
@@ -732,7 +732,7 @@ const colors: ColorsWithModes = {
gray: {
default: globalColors.neutral.blueGrayDark[600],
highlighted: globalColors.neutral.blueGrayDark[600],
- disabled: globalColors.neutral.blueGrayDark[800],
+ disabled: globalColors.neutral.blueGrayDark[700],
faded: globalColors.neutral.blueGrayDark.a100,
},
primary: {
@@ -795,7 +795,7 @@ const colors: ColorsWithModes = {
normal: globalColors.chromatic.azure[300],
subtle: globalColors.chromatic.azure[400],
muted: globalColors.chromatic.azure[600],
- disabled: globalColors.chromatic.azure.a200,
+ disabled: globalColors.chromatic.azure.a400,
},
onPrimary: {
normal: globalColors.neutral.white[500],
@@ -857,7 +857,7 @@ const colors: ColorsWithModes = {
normal: globalColors.chromatic.azure[300],
subtle: globalColors.chromatic.azure[400],
muted: globalColors.chromatic.azure[600],
- disabled: globalColors.chromatic.azure.a200,
+ disabled: globalColors.chromatic.azure.a400,
},
onPrimary: {
normal: globalColors.neutral.white[500],
@@ -888,14 +888,14 @@ const colors: ColorsWithModes = {
popup: {
background: {
subtle: globalColors.neutral.blueGrayDark[1000],
- intense: globalColors.neutral.blueGrayDark[1000],
+ intense: globalColors.neutral.blueGrayDark[700],
},
border: {
subtle: globalColors.neutral.blueGrayDark.a100,
intense: globalColors.neutral.blueGrayDark.a100,
},
},
- transparent: `hsla(0, 0%, 100%, ${opacity[0]})`,
+ transparent: `hsla(217, 27%, 15%, ${opacity[0]})`,
},
};
diff --git a/packages/blade/src/tokens/theme/createTheme.ts b/packages/blade/src/tokens/theme/createTheme.ts
index 99101541814..be8a041ee44 100644
--- a/packages/blade/src/tokens/theme/createTheme.ts
+++ b/packages/blade/src/tokens/theme/createTheme.ts
@@ -88,6 +88,7 @@ const generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromati
a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),
a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),
a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),
+ a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),
};
return brandColors;