-
Notifications
You must be signed in to change notification settings - Fork 51
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: color palette #4283
refactor: color palette #4283
Conversation
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
# Conflicts: # package.json
🐙 OctomindTest Report: 14/14 successful.
commit sha: dd68f9d |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm
The deployment to the dev cluster was successful. You can find the deployment here: https://4283.development.scrumlr.fra.ics.inovex.io Deployed Images
|
Description
Replaces old color palette with new one. This unifies the general theme of the frontend. Also, some adjustments to the theme colors have been made.
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
$navy--900
:#111111
$navy--800
:#15171e
$navy--700
:#232732
$navy--600
:#292f3b
$navy--500
:#303745
$navy--400
:#373e4f
$navy--300
:#454e63
$navy--200
:#586073
$navy--100
:#6a7182
$gray--800
:#8f95a1
$gray--700
:#a2a7b1
$gray--600
:#b5b8c1
$gray--500
:#dddfe3
$gray--400
:#e9eaec
$gray--300
:#eeeff1
$gray--200
:#f4f4f6
$gray--100
:#f9fafa
$gray--000
:#ffffff
Color replacements
$color-white
(#FFFFFF
) ->$gray--000
(#FFFFFF
)$color-white-one
(#F9FAFB
) ->$gray--100
(#F9FAFA
)$color-white-two
(#F6F5FB
) ->$gray--200
(#F4F4F6
)$color-dark-one
(#242C3D
) ->$navy--600
(#292F3B
)$color-dark-two
(#272F41
) ->$navy--600
(#292F3B
)$color-lighter-gray
(#EDEFF2
) ->$gray--300
(#EEEFF1
)$color-light-gray
(#C3C9D3
) ->$gray--600
(#B5B8C1
)$color-middle-gray
(#A3A6AA
) ->$gray--700
(#A2A7B1
)$color-dark-gray
(#859093
) ->$gray--800
(#8F95A1
)$color-darker-gray
(#4F5253
) ->$navy--300
(#454E63
)$color-darkest-gray
(#232323
) ->$navy--700
(#232732
)$color-black
(#111111
) ->$navy--900
(#111111
)$color-dark-mode
(#272F41
) ->$navy--600
(#292F3B
)$color-dark-mode--disabled
(#1B202D
) ->$navy--700
(#232732
)$color-dark-mode-note
(#313949
) ->$navy--500
(#303745
)$color-dark-mode-note--hover
(#3D4555
) ->$navy--400
(#373E4F
)$menu-icon-background-color--dark
(#333948
) ->$navy--500
(#303745
)$tooltip-background-color--light
(#D3DAF0
) ->$blue--100
(#CCDDFF
)$tooltip-background-color--dark
(#485064
) ->$navy--300
(#454E63
)$color-progress-circle
(#3C7FFF
) ->$blue--400
(#3379FF
)$color-icon-light-blue
(#9EBFFF
) ->$blue--200
(#99BCFF
)$color-board-reaction-name--dark
(#5A647D
) ->$navy--200
(#586073
)$color-board-reaction-name-self--light
(#0057FF
) ->$blue--500
(#0057FF
)$color-board-reaction-name-self--dark
(#6096FF
) ->$blue--300
(#669AFF
)Theme colors
Theme colors like backlog-blue use the new colors with
--500
for light and--400
for dark mode.Changed Colors:
added
renamed
removed
Backend
To accommodate the new theme colors, there have been some backend changes:
color.go
: change color constants(Optional) Visual Changes