diff --git a/src/lib/assets/colors/index.js b/src/lib/assets/colors/index.js index 05e984fb9908028f3cdd8f52d1c7a9da8f0673b6..c7914933cc504e0ec8c91dfc6a7e150e2456ec3f 100644 --- a/src/lib/assets/colors/index.js +++ b/src/lib/assets/colors/index.js @@ -1,24 +1,66 @@ const green = '#1CB569' +const darkGreen = '#0D8767' +const darkestGreen = '#095D4F' + const blue = '#4A90E2' -const grey = '#9B9B9B' -const red = '#BB2D00' +const darkBlue = '#5E62A3' +const darkestBlue = '#383A61' + +const red = '#E2384D' +const darkRed = '#E2384D' + +const lightGrey = '#A0ADC0' +const grey = '#8494AD' +const darkGrey = '#647490' +const darkestGrey = '#3F495A' + +// old colours +/** + * @deprecated + */ const green10 = '#e8f7f0' -const darkgreen = '#0d8767' +/** + * @deprecated + */ const blue10 = '#ecf3fc' -const darkblue = '#5e62a3' +/** + * @deprecated + */ const darkgrey = '#5A719A' +/** + * @deprecated + */ const white = '#FFFFFF' +/** + * @deprecated + */ const wine = '#862957' +/** + * @deprecated + */ +const darkblue = '#5e62a3' +/** + * @deprecated + */ +const darkgreen = '#0d8767' export { blue, blue10, + darkBlue, + darkGreen, + darkGrey, + darkRed, darkblue, + darkestBlue, + darkestGreen, + darkestGrey, darkgreen, darkgrey, green, green10, grey, + lightGrey, red, white, wine, @@ -27,13 +69,21 @@ export { export default { blue, blue10, - green, - grey, - red, - green10, + darkBlue, + darkGreen, + darkGrey, + darkRed, darkblue, + darkestBlue, + darkestGreen, + darkestGrey, darkgreen, darkgrey, + green, + green10, + grey, + lightGrey, + red, white, wine, } diff --git a/tests/__snapshots__/storyshots.test.js.snap b/tests/__snapshots__/storyshots.test.js.snap index ed272f935594d32683e6cc8a8aef29dfd58b87be..cc1be137999f8c768566dabcd0b438ae23dd610a 100644 --- a/tests/__snapshots__/storyshots.test.js.snap +++ b/tests/__snapshots__/storyshots.test.js.snap @@ -29,7 +29,7 @@ exports[`Storyshots Atoms/Buttons Button Default 1`] = ` .c1:disabled, .c1:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -94,7 +94,7 @@ exports[`Storyshots Atoms/Buttons Button/font size 1`] = ` .c1:disabled, .c1:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -128,7 +128,7 @@ exports[`Storyshots Atoms/Buttons Button/font size 1`] = ` .c2:disabled, .c2:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -194,7 +194,7 @@ exports[`Storyshots Atoms/Buttons Button/nav 1`] = ` .c1:disabled, .c1:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -269,7 +269,7 @@ exports[`Storyshots Atoms/Buttons Button/sizing 1`] = ` .c1:disabled, .c1:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -379,7 +379,7 @@ exports[`Storyshots Atoms/Buttons Button/variants 1`] = ` .c1:disabled, .c1:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -412,7 +412,7 @@ exports[`Storyshots Atoms/Buttons Button/variants 1`] = ` .c2:disabled, .c2:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -426,7 +426,7 @@ exports[`Storyshots Atoms/Buttons Button/variants 1`] = ` -webkit-transition: background 50ms linear,color 50ms linear,box-shadow cubic-bezier(0.4,0,0.2,1) 200ms; transition: background 50ms linear,color 50ms linear,box-shadow cubic-bezier(0.4,0,0.2,1) 200ms; font-weight: semibold; - background: #BB2D00; + background: #E2384D; color: white; } @@ -445,7 +445,7 @@ exports[`Storyshots Atoms/Buttons Button/variants 1`] = ` .c3:disabled, .c3:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -480,7 +480,7 @@ exports[`Storyshots Atoms/Buttons Button/variants 1`] = ` .c4:disabled, .c4:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -555,19 +555,19 @@ exports[`Storyshots Atoms/Color Colorable 1`] = ` .c2 { color: white; - background-color: #9B9B9B; + background-color: #8494AD; -webkit-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } .c2:active, .c2:hover { - background-color: #9B9B9B; + background-color: #8494AD; } .c3 { color: white; - background-color: #BB2D00; + background-color: #E2384D; -webkit-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } @@ -623,7 +623,7 @@ exports[`Storyshots Atoms/Color Colorable 1`] = ` exports[`Storyshots Atoms/Form Elements Multiple Line Input 1`] = ` .c9 { border-radius: 100%; - color: #BB2D00; + color: #E2384D; } .c12 { @@ -632,14 +632,14 @@ exports[`Storyshots Atoms/Form Elements Multiple Line Input 1`] = ` } .c2 { - color: #9B9B9B; + color: #8494AD; font-size: 1rem; margin-bottom: 0.5rem; font-family: Libre Baskerville,Helvetica,Arial,serif; } .c8 { - color: #BB2D00; + color: #E2384D; font-size: 1rem; margin-bottom: 0.5rem; font-family: Libre Baskerville,Helvetica,Arial,serif; @@ -688,7 +688,7 @@ exports[`Storyshots Atoms/Form Elements Multiple Line Input 1`] = ` margin: 0.5rem; border-style: solid; border-width: 3px; - border-color: #BB2D00; + border-color: #E2384D; border-radius: 3rem; display: -webkit-box; display: -webkit-flex; @@ -968,7 +968,7 @@ exports[`Storyshots Atoms/Form Elements Multiple Line Input 1`] = ` exports[`Storyshots Atoms/Form Elements Select 1`] = ` .c7 { border-radius: 100%; - color: #BB2D00; + color: #E2384D; } .c10 { @@ -977,14 +977,14 @@ exports[`Storyshots Atoms/Form Elements Select 1`] = ` } .c2 { - color: #9B9B9B; + color: #8494AD; font-size: 1rem; margin-bottom: 0.5rem; font-family: Libre Baskerville,Helvetica,Arial,serif; } .c6 { - color: #BB2D00; + color: #E2384D; font-size: 1rem; margin-bottom: 0.5rem; font-family: Libre Baskerville,Helvetica,Arial,serif; @@ -1033,7 +1033,7 @@ exports[`Storyshots Atoms/Form Elements Select 1`] = ` margin: 0.5rem; border-style: solid; border-width: 3px; - border-color: #BB2D00; + border-color: #E2384D; border-radius: 3rem; display: -webkit-box; display: -webkit-flex; @@ -1077,7 +1077,7 @@ exports[`Storyshots Atoms/Form Elements Select 1`] = ` outline: none; background: none; border: none; - border-bottom: 3px solid #9B9B9B; + border-bottom: 3px solid #8494AD; font-family: Libre Baskerville,Helvetica,Arial,serif; font-size: 1rem; color: #4A90E2; @@ -1340,12 +1340,12 @@ exports[`Storyshots Atoms/Form Elements Select 1`] = ` exports[`Storyshots Atoms/Form Elements Selector Single Choice 1`] = ` .c7 { border-radius: 100%; - color: #BB2D00; + color: #E2384D; } .c8 { border-radius: 100%; - color: #9B9B9B; + color: #8494AD; } .c9 { @@ -1746,12 +1746,12 @@ exports[`Storyshots Atoms/Form Elements Selector Single Choice 1`] = ` exports[`Storyshots Atoms/Form Elements Selector Single Choice with Background 1`] = ` .c7 { border-radius: 100%; - color: #BB2D00; + color: #E2384D; } .c8 { border-radius: 100%; - color: #9B9B9B; + color: #8494AD; } .c9 { @@ -2145,12 +2145,12 @@ exports[`Storyshots Atoms/Form Elements Selector Single Choice with Background 1 exports[`Storyshots Atoms/Form Elements Selector multiple Choice 1`] = ` .c7 { border-radius: 100%; - color: #BB2D00; + color: #E2384D; } .c8 { border-radius: 100%; - color: #9B9B9B; + color: #8494AD; } .c9 { @@ -2567,12 +2567,12 @@ exports[`Storyshots Atoms/Form Elements Selector multiple Choice 1`] = ` exports[`Storyshots Atoms/Form Elements Selector multiple Choice with Background 1`] = ` .c7 { border-radius: 100%; - color: #BB2D00; + color: #E2384D; } .c8 { border-radius: 100%; - color: #9B9B9B; + color: #8494AD; } .c9 { @@ -2982,7 +2982,7 @@ exports[`Storyshots Atoms/Form Elements Selector multiple Choice with Background exports[`Storyshots Atoms/Form Elements Single Line Input 1`] = ` .c7 { border-radius: 100%; - color: #BB2D00; + color: #E2384D; } .c10 { @@ -2991,14 +2991,14 @@ exports[`Storyshots Atoms/Form Elements Single Line Input 1`] = ` } .c2 { - color: #9B9B9B; + color: #8494AD; font-size: 1rem; margin-bottom: 0.5rem; font-family: Libre Baskerville,Helvetica,Arial,serif; } .c6 { - color: #BB2D00; + color: #E2384D; font-size: 1rem; margin-bottom: 0.5rem; font-family: Libre Baskerville,Helvetica,Arial,serif; @@ -3047,7 +3047,7 @@ exports[`Storyshots Atoms/Form Elements Single Line Input 1`] = ` margin: 0.5rem; border-style: solid; border-width: 3px; - border-color: #BB2D00; + border-color: #E2384D; border-radius: 3rem; display: -webkit-box; display: -webkit-flex; @@ -3082,7 +3082,7 @@ exports[`Storyshots Atoms/Form Elements Single Line Input 1`] = ` .c4 { width: 100%; border: none; - border-bottom: 3px solid #9B9B9B; + border-bottom: 3px solid #8494AD; background: none; font-family: Linguala-Title; font-size: 1rem; @@ -3090,22 +3090,22 @@ exports[`Storyshots Atoms/Form Elements Single Line Input 1`] = ` } .c4::-webkit-input-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c4::-moz-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c4:-ms-input-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c4::placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } @@ -3253,7 +3253,7 @@ exports[`Storyshots Atoms/Form Elements Single Line Input 1`] = ` exports[`Storyshots Atoms/Form Elements Single Line Input Password 1`] = ` .c7 { border-radius: 100%; - color: #BB2D00; + color: #E2384D; } .c10 { @@ -3262,14 +3262,14 @@ exports[`Storyshots Atoms/Form Elements Single Line Input Password 1`] = ` } .c2 { - color: #9B9B9B; + color: #8494AD; font-size: 1rem; margin-bottom: 0.5rem; font-family: Libre Baskerville,Helvetica,Arial,serif; } .c6 { - color: #BB2D00; + color: #E2384D; font-size: 1rem; margin-bottom: 0.5rem; font-family: Libre Baskerville,Helvetica,Arial,serif; @@ -3318,7 +3318,7 @@ exports[`Storyshots Atoms/Form Elements Single Line Input Password 1`] = ` margin: 0.5rem; border-style: solid; border-width: 3px; - border-color: #BB2D00; + border-color: #E2384D; border-radius: 3rem; display: -webkit-box; display: -webkit-flex; @@ -3353,7 +3353,7 @@ exports[`Storyshots Atoms/Form Elements Single Line Input Password 1`] = ` .c4 { width: 100%; border: none; - border-bottom: 3px solid #9B9B9B; + border-bottom: 3px solid #8494AD; background: none; font-family: Linguala-Password; font-size: 1rem; @@ -3361,22 +3361,22 @@ exports[`Storyshots Atoms/Form Elements Single Line Input Password 1`] = ` } .c4::-webkit-input-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c4::-moz-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c4:-ms-input-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c4::placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } @@ -3601,7 +3601,7 @@ exports[`Storyshots Atoms/Form Elements Toggle 1`] = ` width: 57.400000000000006px; border-radius: 20px; border: 1.3333333333333333px solid currentColor; - color: #BB2D00; + color: #E2384D; } .c5 { @@ -3665,7 +3665,7 @@ exports[`Storyshots Atoms/Form Elements Toggle 1`] = ` .c11 { border-radius: 100%; - color: #BB2D00; + color: #E2384D; } .c13 { @@ -3674,14 +3674,14 @@ exports[`Storyshots Atoms/Form Elements Toggle 1`] = ` } .c8 { - color: #9B9B9B; + color: #8494AD; font-size: 1rem; margin-bottom: 0.5rem; font-family: Libre Baskerville,Helvetica,Arial,serif; } .c10 { - color: #BB2D00; + color: #E2384D; font-size: 1rem; margin-bottom: 0.5rem; font-family: Libre Baskerville,Helvetica,Arial,serif; @@ -4045,7 +4045,7 @@ Array [ } .c3 { - color: #9B9B9B; + color: #8494AD; font-size: 1rem; margin-bottom: 0.5rem; font-family: Libre Baskerville,Helvetica,Arial,serif; @@ -4111,7 +4111,7 @@ Array [ .c16:disabled, .c16:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -4119,7 +4119,7 @@ Array [ .c5 { width: 100%; border: none; - border-bottom: 3px solid #9B9B9B; + border-bottom: 3px solid #8494AD; background: none; font-family: Linguala-Title; font-size: 1rem; @@ -4127,29 +4127,29 @@ Array [ } .c5::-webkit-input-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c5::-moz-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c5:-ms-input-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c5::placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c6 { width: 100%; border: none; - border-bottom: 3px solid #9B9B9B; + border-bottom: 3px solid #8494AD; background: none; font-family: Linguala-Password; font-size: 1rem; @@ -4157,22 +4157,22 @@ Array [ } .c6::-webkit-input-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c6::-moz-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c6:-ms-input-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c6::placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } @@ -4241,7 +4241,7 @@ Array [ outline: none; background: none; border: none; - border-bottom: 3px solid #9B9B9B; + border-bottom: 3px solid #8494AD; font-family: Libre Baskerville,Helvetica,Arial,serif; font-size: 1rem; color: #4A90E2; @@ -4502,7 +4502,7 @@ Array [ .c1:disabled, .c1:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -4536,7 +4536,7 @@ Array [ exports[`Storyshots Atoms/Forms Simple Form 1`] = ` Array [ .c3 { - color: #9B9B9B; + color: #8494AD; font-size: 1rem; margin-bottom: 0.5rem; font-family: Libre Baskerville,Helvetica,Arial,serif; @@ -4602,7 +4602,7 @@ Array [ .c10:disabled, .c10:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -4610,7 +4610,7 @@ Array [ .c5 { width: 100%; border: none; - border-bottom: 3px solid #9B9B9B; + border-bottom: 3px solid #8494AD; background: none; font-family: Linguala-Title; font-size: 1rem; @@ -4618,22 +4618,22 @@ Array [ } .c5::-webkit-input-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c5::-moz-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c5:-ms-input-placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } .c5::placeholder { - color: #9B9B9B; + color: #8494AD; opacity: 0.4; } @@ -4822,7 +4822,7 @@ Array [ .c1:disabled, .c1:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -8773,7 +8773,7 @@ exports[`Storyshots Atoms/Spin Button Linear 1`] = ` .c1:disabled, .c1:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -10450,7 +10450,7 @@ exports[`Storyshots documentation/overview atoms/button 1`] = ` .c0:disabled, .c0:invalid { - background: #9B9B9B; + background: #8494AD; color: white; pointer-events: none; } @@ -10825,7 +10825,7 @@ exports[`Storyshots documentation/overview molecules/statelesstoggle 1`] = ` width: 57.400000000000006px; border-radius: 20px; border: 1.3333333333333333px solid currentColor; - color: #BB2D00; + color: #E2384D; } .c1 {