Skip to content

Commit

Permalink
feat(colors.ts): added secondary and tertiary colors
Browse files Browse the repository at this point in the history 
Added regular and dark shades of headstorm's secondary and tertiary colors, as well as updated the
primary and primaryDark. The shadow was also desaturated and darkened slightly.
  • Loading branch information
@aVileBroker
aVileBroker committed Jul 18, 2021
1 parent 62b1f00 commit 778c9a5
Show file tree
Hide file tree
Showing 10 changed files with 207 additions and 202 deletions.
56 changes: 28 additions & 28 deletions src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ exports[`Button keeps the container the same when switching between isLoading an
outline: 0 none;
border: 0 none;
cursor: pointer;
background-color: #7c8186;
background-color: #9FA2A5;
color: #000;
-webkit-align-items: center;
-webkit-box-align: center;
Expand All @@ -47,7 +47,7 @@ exports[`Button keeps the container the same when switching between isLoading an
}
.c0:hover {
background-color: #707479;
background-color: #929599;
}
.c2 {
Expand All @@ -71,7 +71,7 @@ exports[`Button keeps the container the same when switching between isLoading an
<button
class=" c0"
color="#7c8186"
color="#9FA2A5"
data-test-id="hsui-button"
elevation="0"
type="button"
Expand Down Expand Up @@ -119,7 +119,7 @@ exports[`Button keeps the container the same when switching between isLoading an
outline: 0 none;
border: 0 none;
cursor: pointer;
background-color: #7c8186;
background-color: #9FA2A5;
color: #000;
-webkit-align-items: center;
-webkit-box-align: center;
Expand All @@ -128,7 +128,7 @@ exports[`Button keeps the container the same when switching between isLoading an
}
.c0:hover {
background-color: #707479;
background-color: #929599;
}
.c2 {
Expand All @@ -145,7 +145,7 @@ exports[`Button keeps the container the same when switching between isLoading an
<button
class=" c0"
color="#7c8186"
color="#9FA2A5"
data-test-id="hsui-button"
elevation="0"
type="button"
Expand Down Expand Up @@ -191,7 +191,7 @@ exports[`Button shows ButtonContainer ButtonVariant.fill 1`] = `
outline: 0 none;
border: 0 none;
cursor: pointer;
background-color: #7c8186;
background-color: #9FA2A5;
color: #000;
-webkit-align-items: center;
-webkit-box-align: center;
Expand All @@ -200,7 +200,7 @@ exports[`Button shows ButtonContainer ButtonVariant.fill 1`] = `
}
.c0:hover {
background-color: #707479;
background-color: #929599;
}
.c2 {
Expand All @@ -218,7 +218,7 @@ exports[`Button shows ButtonContainer ButtonVariant.fill 1`] = `
<div>
<button
class=" c0"
color="#7c8186"
color="#9FA2A5"
data-test-id="hsui-button"
elevation="0"
type="button"
Expand Down Expand Up @@ -262,10 +262,10 @@ exports[`Button shows ButtonContainer ButtonVariant.outline 1`] = `
transition: background-color .2s, color .5s, outline .5s, filter .5s, box-shadow .5s;
contain: layout;
outline: 0 none;
border: 1px solid #7c8186;
border: 1px solid #9FA2A5;
cursor: pointer;
background-color: transparent;
color: #7c8186;
color: #9FA2A5;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
Expand All @@ -291,7 +291,7 @@ exports[`Button shows ButtonContainer ButtonVariant.outline 1`] = `
<div>
<button
class=" c0"
color="#7c8186"
color="#9FA2A5"
data-test-id="hsui-button"
elevation="0"
type="button"
Expand Down Expand Up @@ -338,7 +338,7 @@ exports[`Button shows ButtonContainer ButtonVariant.text 1`] = `
border: 0 none;
cursor: pointer;
background-color: transparent;
color: #7c8186;
color: #9FA2A5;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
Expand All @@ -364,7 +364,7 @@ exports[`Button shows ButtonContainer ButtonVariant.text 1`] = `
<div>
<button
class=" c0"
color="#7c8186"
color="#9FA2A5"
data-test-id="hsui-button"
elevation="0"
type="button"
Expand Down Expand Up @@ -407,8 +407,8 @@ exports[`Button shows ButtonContainer with nondefault props variant and color 1`
-webkit-transition: background-color .2s, color .5s, outline .5s, filter .5s, box-shadow .5s;
transition: background-color .2s, color .5s, outline .5s, filter .5s, box-shadow .5s;
contain: layout;
-webkit-filter: drop-shadow(0rem 0.07082177831667665rem 0.5rem rgba(39,47,78,0.39738511585523156));
filter: drop-shadow(0rem 0.07082177831667665rem 0.5rem rgba(39,47,78,0.39738511585523156));
-webkit-filter: drop-shadow(0rem 0.07082177831667665rem 0.5rem rgba(20,22,31,0.39738511585523156));
filter: drop-shadow(0rem 0.07082177831667665rem 0.5rem rgba(20,22,31,0.39738511585523156));
outline: 0 none;
border: 1px solid #000;
cursor: pointer;
Expand Down Expand Up @@ -485,7 +485,7 @@ exports[`Button shows LeftIconContainer when isProcessing 1`] = `
outline: 0 none;
border: 0 none;
cursor: pointer;
background-color: #7c8186;
background-color: #9FA2A5;
color: #000;
-webkit-align-items: center;
-webkit-box-align: center;
Expand All @@ -494,7 +494,7 @@ exports[`Button shows LeftIconContainer when isProcessing 1`] = `
}
.c0:hover {
background-color: #707479;
background-color: #929599;
}
.c1 {
Expand All @@ -517,7 +517,7 @@ exports[`Button shows LeftIconContainer when isProcessing 1`] = `
<div>
<button
class=" c0"
color="#7c8186"
color="#9FA2A5"
data-test-id="hsui-button"
elevation="0"
type="button"
Expand Down Expand Up @@ -589,7 +589,7 @@ exports[`Button shows icons 1`] = `
outline: 0 none;
border: 0 none;
cursor: pointer;
background-color: #7c8186;
background-color: #9FA2A5;
color: #000;
-webkit-align-items: center;
-webkit-box-align: center;
Expand All @@ -598,7 +598,7 @@ exports[`Button shows icons 1`] = `
}
.c0:hover {
background-color: #707479;
background-color: #929599;
}
.c1 {
Expand All @@ -621,7 +621,7 @@ exports[`Button shows icons 1`] = `
<div>
<button
class=" c0"
color="#7c8186"
color="#9FA2A5"
data-test-id="hsui-button"
elevation="0"
type="button"
Expand Down Expand Up @@ -693,7 +693,7 @@ exports[`Button shows icons with type string 1`] = `
outline: 0 none;
border: 0 none;
cursor: pointer;
background-color: #7c8186;
background-color: #9FA2A5;
color: #000;
-webkit-align-items: center;
-webkit-box-align: center;
Expand All @@ -702,7 +702,7 @@ exports[`Button shows icons with type string 1`] = `
}
.c0:hover {
background-color: #707479;
background-color: #929599;
}
.c1 {
Expand All @@ -725,7 +725,7 @@ exports[`Button shows icons with type string 1`] = `
<div>
<button
class=" c0"
color="#7c8186"
color="#9FA2A5"
data-test-id="hsui-button"
elevation="0"
type="button"
Expand Down Expand Up @@ -810,7 +810,7 @@ exports[`Button shows loading text when provided 1`] = `
outline: 0 none;
border: 0 none;
cursor: pointer;
background-color: #7c8186;
background-color: #9FA2A5;
color: #000;
-webkit-align-items: center;
-webkit-box-align: center;
Expand All @@ -819,7 +819,7 @@ exports[`Button shows loading text when provided 1`] = `
}
.c0:hover {
background-color: #707479;
background-color: #929599;
}
.c2 {
Expand All @@ -844,7 +844,7 @@ exports[`Button shows loading text when provided 1`] = `
<div>
<button
class=" c0"
color="#7c8186"
color="#9FA2A5"
data-test-id="hsui-button"
elevation="0"
type="button"
Expand Down
50 changes: 25 additions & 25 deletions src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,21 @@ exports[`Card header bottom padding should be 0rem when body is present 1`] = `
-webkit-transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
contain: layout;
-webkit-filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
-webkit-filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
background-color: #fff;
}
.c1 {
padding: 1.5rem 1.5rem 0rem;
border-radius: 0.25rem 0.25rem 0rem 0rem;
font-weight: bold;
color: #252c35;
color: #252D34;
}
.c2 {
padding: 1.5rem 1.5rem;
color: #51575d;
color: #51575D;
}
.c4 {
Expand Down Expand Up @@ -109,16 +109,16 @@ exports[`Card header bottom padding should be 0rem when footer is present 1`] =
-webkit-transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
contain: layout;
-webkit-filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
-webkit-filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
background-color: #fff;
}
.c1 {
padding: 1.5rem 1.5rem 0rem;
border-radius: 0.25rem 0.25rem 0rem 0rem;
font-weight: bold;
color: #252c35;
color: #252D34;
}
.c2 {
Expand All @@ -134,7 +134,7 @@ exports[`Card header bottom padding should be 0rem when footer is present 1`] =
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
color: #7c8186;
color: #9FA2A5;
border-radius: 0rem 0rem 0.25rem 0.25rem;
}
Expand Down Expand Up @@ -203,16 +203,16 @@ exports[`Card header bottom padding should be 1.5rem without body and footer 1`]
-webkit-transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
contain: layout;
-webkit-filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
-webkit-filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
background-color: #fff;
}
.c1 {
padding: 1.5rem 1.5rem;
border-radius: 0.25rem 0.25rem 0rem 0rem;
font-weight: bold;
color: #252c35;
color: #252D34;
}
.c3 {
Expand Down Expand Up @@ -275,8 +275,8 @@ exports[`Card shows Card with default feedback 1`] = `
-webkit-transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
contain: layout;
-webkit-filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
-webkit-filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
background-color: #fff;
}
Expand Down Expand Up @@ -335,8 +335,8 @@ exports[`Card shows Card with default props 1`] = `
-webkit-transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
contain: layout;
-webkit-filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
-webkit-filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
background-color: #fff;
}
Expand Down Expand Up @@ -395,8 +395,8 @@ exports[`Card shows Card with non-default elevation 1`] = `
-webkit-transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
contain: layout;
-webkit-filter: drop-shadow(0rem 0.07538939058881129rem 0.75rem rgba(39,47,78,0.3741399931653331));
filter: drop-shadow(0rem 0.07538939058881129rem 0.75rem rgba(39,47,78,0.3741399931653331));
-webkit-filter: drop-shadow(0rem 0.07538939058881129rem 0.75rem rgba(20,22,31,0.3741399931653331));
filter: drop-shadow(0rem 0.07538939058881129rem 0.75rem rgba(20,22,31,0.3741399931653331));
background-color: #fff;
}
Expand Down Expand Up @@ -443,8 +443,8 @@ exports[`Card shows Card with ripple feedback and no onClick 1`] = `
-webkit-transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
contain: layout;
-webkit-filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
-webkit-filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
background-color: #fff;
}
Expand Down Expand Up @@ -484,8 +484,8 @@ exports[`Card shows Card with ripple feedback with onClick 1`] = `
-webkit-transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
contain: layout;
-webkit-filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
-webkit-filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
background-color: #fff;
}
Expand Down Expand Up @@ -532,8 +532,8 @@ exports[`Card shows Card with simple feedback and no onClick 1`] = `
-webkit-transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
contain: layout;
-webkit-filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
-webkit-filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
background-color: #fff;
}
Expand Down Expand Up @@ -562,8 +562,8 @@ exports[`Card shows Card with simple feedback with onClick 1`] = `
-webkit-transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
transition: filter .5s, box-shadow .5s, border .3s, background-color .3s;
contain: layout;
-webkit-filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236622rem 0.25rem rgba(39,47,78,0.4292196217912265));
-webkit-filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
filter: drop-shadow(0rem 0.06653090368236621rem 0.25rem rgba(20,22,31,0.4292196217912265));
background-color: #fff;
}
Expand Down
Loading

0 comments on commit 778c9a5

Please sign in to comment.