scrumlr.io
scrumlr.io copied to clipboard
inovex
refactor: color palette
Description
Replaces old color palette with new one
Changelog
New Colors
$blue--800: #002366
$blue--700: #003499
$blue--600: #0046cc
$blue--500: #0057ff primary light
$blue--400: #3379ff primary dark
$blue--300: #669aff
$blue--200: #99bcff
$blue--100: #ccddff
$pink--800: #66002a
$pink--700: #99003f
$pink--600: #cc0054
$pink--500: #ff0069 primary light
$pink--400: #ff3387 primary dark
$pink--300: #ff66a5
$pink--200: #ff99c3
$pink--100: #ffcce1
$purple--800: #500e66
$purple--700: #791599
$purple--600: #a11ccc
$purple--500: #c923ff primary light
$purple--400: #d44fff primary dark
$purple--300: #df7bff
$purple--200: #e9a7ff
$purple--100: #f4d3ff
$violet--800: #250062
$violet--700: #380094
$violet--600: #4a00c5
$violet--500: #5d00f6 primary light
$violet--400: #7d33f8 primary dark
$violet--300: #9e66fa
$violet--200: #be99fb
$violet--100: #dfccfd
$green--800: #0b5532
$green--700: #107f4c
$green--600: #16aa65
$green--500: #1bd47e primary light
$green--400: #49dd98 primary dark
$green--300: #76e5b2
$green--200: #a4eecb
$green--100: #d1f6e5
$yellow--800: #666200
$yellow--700: #999300
$yellow--600: #ccc400
$yellow--500: #fff500 primary light
$yellow--400: #fff733 primary dark
$yellow--300: #fff966
$yellow--200: #fffb99
$yellow--100: #fffdcc
$orange--800: #664300
$orange--700: #996500
$orange--600: #cc8600
$orange--500: #ffa800 primary light
$orange--400: #ffb933 primary dark
$orange--300: #ffcb66
$orange--200: #ffdc99
$orange--100: #ffeecc
$gray--900: #111111
$gray--800: #15171e
$gray--700: #232732
$gray--600: #292f3b
$gray--500: #303745
$gray--400: #373e4f
$gray--300: #454e63
$gray--200: #586073
$gray--100: #6a7182
$white--800: #8f95a1
$white--700: #a2a7b1
$white--600: #b5b8c1
$white--500: #dddfe3
$white--400: #e9eaec
$white--300: #eeeff1
$white--200: #f4f4f6
$white--100: #f9fafa
$white--000: #ffffff
Color replacements
$color-white (#FFFFFF) -> $white--000 (#FFFFFF)
$color-white-one (#F9FAFB) -> $white--100 (#F9FAFA)
$color-white-two (#F6F5FB) -> $white--200 (#F4F4F6)
$color-dark-one (#242C3D) -> $gray--600 (#292F3B)
$color-dark-two (#272F41) -> $gray--600 (#292F3B)
$color-lighter-gray (#EDEFF2) -> $white--300 (#EEEFF1)
$color-light-gray (#C3C9D3) -> $white--600 (#B5B8C1)
$color-middle-gray (#A3A6AA) -> $white--700 (#A2A7B1)
$color-dark-gray (#859093) -> $white--800 (#8F95A1)
$color-darker-gray (#4F5253) -> $gray--300 (#454E63)
$color-darkest-gray (#232323) -> $gray--700 (#232732)
$color-black (#111111) -> $gray--900 (#111111)
$color-dark-mode (#272F41) -> $gray--600 (#292F3B)
$color-dark-mode--disabled (#1B202D) -> $gray--700 (#232732)
$color-dark-mode-note (#313949) -> $gray--500 (#303745)
$color-dark-mode-note--hover (#3D4555) -> $gray--400 (#373E4F)
$menu-icon-background-color--dark (#333948) -> $gray--500 (#303745)
$tooltip-background-color--light (#D3DAF0) -> $blue--100 (#CCDDFF)
$tooltip-background-color--dark (#485064) -> $gray--300 (#454E63)
$color-progress-circle (#3C7FFF) -> $blue--400 (#3379FF)
$color-icon-light-blue (#9EBFFF) -> $blue--200 (#99BCFF)
$color-board-reaction-name--dark (#5A647D) -> $gray--200 (#586073)
$color-board-reaction-name-self--light (#0057FF) -> $blue--500 (#0057FF)
$color-board-reaction-name-self--dark (#6096FF) -> $blue--300 (#669AFF)
$color-backlog-blue (#0057FF) -> $blue--500 (#0057FF)
$color-grooming-green (#18D8AB) -> $green--500 (#1BD47E)
$color-goal-green (#70E000) -> $yellow--700 (#999300)
$color-lean-lilac (#C000FF) -> $purple--500 (#C923FF)
$color-online-orange (#FFAA5A) -> $orange--300 (#FFCB66)
$color-planning-pink (#E20360) -> $pink--600 (#CC0054)
$color-poker-purple (#5E00FF) -> $violet--500 (#5D00F6)
$color-retro-red (#EA434B) -> $pink--400 (#FF3387)
$color-warning-red (#EB625B) -> $pink--400 (#FF3387)
Checklist
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] The light- and dark-theme are both supported and tested
- [ ] The design was implemented and is responsive for all devices and screen sizes
- [ ] The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)
