理想のカラーパレットをもとめて / color-palette-name-convention-at-wic

WIC meetup（社内イベント） LT

Transcript

1. ໋໊ฤ ΧϥʔύϨοτΛ΋ͱΊͯ ཧ૝ͷ WIC Meetup 2019.05.13
2. UXΤϯδχΞ͔ͩσβΠϯΤϯδχΞ͔ͩ ୩ ୓थ CyberAgent Advanced Technology Studio
3. https://www.winticket.jp/
4. https://ameblo.jp/shiba-mamehiko/
7. 90 ੡඼͕޷͖͔Ͳ͏͔ sec % 90 ৭͚ͩʹجͮ͘
8. Θ͔Γ΍໊͍͢લΛఆٛ͢Δ ίϯτϥετΛߟྀ͢Δ ඞཁͳ৭ΛߜΓࠐΉ
9. Θ͔Γ΍໊͍͢લΛఆٛ͢Δ ίϯτϥετΛߟྀ͢Δ ඞཁͳ৭ΛߜΓࠐΉ
11. blue_500
12. blue_500 blue_400 blue_600
13. azure_500 azure_400 azure_600
14. https://atlassian.design/guidelines/brand/color
15. Snorlax https://atlassian.design/guidelines/brand/color
16. Snorlax https://atlassian.design/guidelines/brand/color ΧϏ̋ϯ
17. primary_base primary_light primary_heavy
18. primary_base primary_light primary_heavy
19. Primary Button LABEL Primary Color
20. Primary Button LABEL Primary Color
21. azure_base azure_light azure_dark
22. azure_base azure_lighter_15 azure_darker_10
23. blue? azure_base? azure_dark_10?
24. $azure-base: #155AEE; $azure-lighter-15: #4D82F3; $azure-darker-10: #114CCA; $silver-lighter-20: #FCFDFD; $button_primary: $azure-base; $button_primary_hover: $azure-lighter-15; $button_primary_active: $azure-darker-10; $button_primary_text: $silver-lighter-20; Sass
25. button-primary-base button-primary-hover button-primary-active button-primary-text button-primary-text button-primary-text ☺
26. button-primary-base button-primary-hover button-primary-active button-primary-text button-primary-text button-primary-text Minimum contrast 3.5 (AA18) 5.5 (AA) 7 (AAA)
27. @mixin button_primary_color { background-color: $button_primary; color: $button_primary_text; &:hover { background-color: $button_primary_hover; } &:active { background-color: $button_primary_active; } } Sass
28. .button { @include button_primary_color; } Sass
29. .button { background-color: #155AEE; color: #FCFDFD; } .button:hover { background-color: #4D82F3; } .button:active { background-color: #114CCA; } CSS
30. ίϯτϥετൺΛอͭ޻෉Λ͢Δ ڞ௨ݴޠͱͯ͠ѻ͍΍໊͍͢લʹ͢Δ ύϨοτͰఆٛͨ͠৭Ҏ֎͸࢖Θͳ͍
31. Thank you @hiloki @shiba_mamehiko