Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Problem/Motivation
For fun, I tried out CSS colorguard on Seven's style.css. These were the results:
Collision: #FFFFFF, #F2F2F0
- #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (2.8685121210852613) to #F2F2F0 [line: 178]
Collision: #FFFFFF, #FAFAF7
- #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (1.8910238114726081) to #FAFAF7 [line: 185, 216]
Collision: #FFFFFF, #F5F5F2
- #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (2.596384214251071) to #F5F5F2 [line: 582]
Collision: #FFFFFF, #F7FCFF
- #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (2.5734572553965034) to #F7FCFF [line: 596]
Collision: #FFFFFF, #F8F8F8
- #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (1.400400548685863) to #F8F8F8 [line: 949, 973]
Collision: #FFFFFF, #F1F1F1
- #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (2.8384025881055353) to #F1F1F1 [line: 1270]
Collision: #FFFFFF, #F7F7F7
- #FFFFFF [line: 51, 208, 301, 427, 830, 1059, 1068, 1417, 1425, 1447] is too close (1.6034878674096535) to #F7F7F7 [line: 1404]
Collision: #E0E0D8, #D9D8D4
- #E0E0D8 [line: 79] is too close (2.711556215737556) to #D9D8D4 [line: 377]
Collision: #E0E0D8, #E6E4DF
- #E0E0D8 [line: 79] is too close (2.2191336773028025) to #E6E4DF [line: 589]
Collision: #BFBFBF, #BFBFBA
- #BFBFBF [line: 177, 270, 462, 1395, 1396, 1405, 1406] is too close (2.6953452935381748) to #BFBFBA [line: 583]
Collision: #F2F2F0, #FAFAF7
- #F2F2F0 [line: 178] is too close (1.6983522733917733) to #FAFAF7 [line: 185, 216]
Collision: #F2F2F0, #F5F5F2
- #F2F2F0 [line: 178] is too close (0.7929269769959084) to #F5F5F2 [line: 582]
Collision: #F2F2F0, #EEEEEE
- #F2F2F0 [line: 178] is too close (1.3415681431344146) to #EEEEEE [line: 781]
Collision: #F2F2F0, #F8F8F8
- #F2F2F0 [line: 178] is too close (1.6547771593670217) to #F8F8F8 [line: 949, 973]
Collision: #F2F2F0, #F3F4EE
- #F2F2F0 [line: 178] is too close (2.1805473824168184) to #F3F4EE [line: 1057]
Collision: #F2F2F0, #F1F1F1
- #F2F2F0 [line: 178] is too close (1.0867824593337747) to #F1F1F1 [line: 1270]
Collision: #F2F2F0, #ECECEC
- #F2F2F0 [line: 178] is too close (1.6314065137235383) to #ECECEC [line: 1393]
Collision: #F2F2F0, #F7F7F7
- #F2F2F0 [line: 178] is too close (1.5058323481535356) to #F7F7F7 [line: 1404]
Collision: #FAFAF7, #F5F5F2
- #FAFAF7 [line: 185, 216] is too close (1.0164250954128329) to #F5F5F2 [line: 582]
Collision: #FAFAF7, #EEEEEE
- #FAFAF7 [line: 185, 216] is too close (2.89561846277564) to #EEEEEE [line: 781]
Collision: #FAFAF7, #F8F8F8
- #FAFAF7 [line: 185, 216] is too close (1.6198693615911717) to #F8F8F8 [line: 949, 973]
Collision: #FAFAF7, #F3F4EE
- #FAFAF7 [line: 185, 216] is too close (2.120064753614388) to #F3F4EE [line: 1057]
Collision: #FAFAF7, #F1F1F1
- #FAFAF7 [line: 185, 216] is too close (2.393557822887608) to #F1F1F1 [line: 1270]
Collision: #FAFAF7, #F7F7F7
- #FAFAF7 [line: 185, 216] is too close (1.6767835664445838) to #F7F7F7 [line: 1404]
Collision: #004F80, #004875
- #004F80 [line: 209, 302, 380, 381, 395, 417] is too close (2.4319131786444412) to #004875 [line: 627, 639]
Collision: #D9D8D4, #E6E4DF
- #D9D8D4 [line: 377] is too close (2.7964531982360676) to #E6E4DF [line: 589]
Collision: #D9D8D4, #DCDCDC
- #D9D8D4 [line: 377] is too close (2.2633838766664445) to #DCDCDC [line: 848]
Collision: #898989, #8C8C8C
- #898989 [line: 506] is too close (1.0544214038978428) to #8C8C8C [line: 519]
Collision: #F5F5F2, #EEEEEE
- #F5F5F2 [line: 582] is too close (2.1219995374086125) to #EEEEEE [line: 781]
Collision: #F5F5F2, #F8F8F8
- #F5F5F2 [line: 582] is too close (1.7154961593407352) to #F8F8F8 [line: 949, 973]
Collision: #F5F5F2, #F3F4EE
- #F5F5F2 [line: 582] is too close (1.6871973355176362) to #F3F4EE [line: 1057]
Collision: #F5F5F2, #F1F1F1
- #F5F5F2 [line: 582] is too close (1.7676049272468808) to #F1F1F1 [line: 1270]
Collision: #F5F5F2, #ECECEC
- #F5F5F2 [line: 582] is too close (2.4240417482007603) to #ECECEC [line: 1393]
Collision: #F5F5F2, #F7F7F7
- #F5F5F2 [line: 582] is too close (1.6485330295892249) to #F7F7F7 [line: 1404]
Collision: #BFBFBA, #BEBFB9
- #BFBFBA [line: 583] is too close (0.7940828671816116) to #BEBFB9 [line: 678, 679, 683, 686]
Collision: #F7FCFF, #F8F8F8
- #F7FCFF [line: 596] is too close (2.5395727270940958) to #F8F8F8 [line: 949, 973]
Collision: #F7FCFF, #F7F7F7
- #F7FCFF [line: 596] is too close (2.598075063107024) to #F7F7F7 [line: 1404]
Collision: #EEEEEE, #F8F8F8
- #EEEEEE [line: 781] is too close (2.066802292060734) to #F8F8F8 [line: 949, 973]
Collision: #EEEEEE, #F1F1F1
- #EEEEEE [line: 781] is too close (0.6285798809399238) to #F1F1F1 [line: 1270]
Collision: #EEEEEE, #ECECEC
- #EEEEEE [line: 781] is too close (0.4232290259340545) to #ECECEC [line: 1393]
Collision: #EEEEEE, #F7F7F7
- #EEEEEE [line: 781] is too close (1.8637337414041408) to #F7F7F7 [line: 1404]
Collision: #F8F8F8, #F1F1F1
- #F8F8F8 [line: 949, 973] is too close (1.4383297013410457) to #F1F1F1 [line: 1270]
Collision: #F8F8F8, #ECECEC
- #F8F8F8 [line: 949, 973] is too close (2.4899061879839244) to #ECECEC [line: 1393]
Collision: #F8F8F8, #F7F7F7
- #F8F8F8 [line: 949, 973] is too close (0.20311344249807908) to #F7F7F7 [line: 1404]
Collision: #F1F1F1, #ECECEC
- #F1F1F1 [line: 1270] is too close (1.0517928172323157) to #ECECEC [line: 1393]
Collision: #F1F1F1, #F7F7F7
- #F1F1F1 [line: 1270] is too close (1.2352369577808568) to #F7F7F7 [line: 1404]
Collision: #ECECEC, #F7F7F7
- #ECECEC [line: 1393] is too close (2.2868591207833133) to #F7F7F7 [line: 1404]
Beta phase evaluation
Issue category | Task because there could be CSS changes to be made once a plan is in place. |
---|---|
Issue priority | Normal because these changes would be cleaning up the CSS color choices. |
Unfrozen changes | Unfrozen because it only changes CSS. |
Proposed resolution
It seems like a lot, it's possible the default similarity threshold (3) is set too high.
As Seven has evolved over D8 with a new colour scheme, it's entirely possible there are some colour inconsistencies and overlaps. We should investigate this.
Remaining tasks
User interface changes
Maybe some colour tweaks
API changes
None
Comments
Comment #1
Bojhan CreditAttribution: Bojhan commentedThis is quite possible. Most of it seems to be in the white/gray color space.
Comment #2
LewisNymanWe love grey :P
Comment #3
Bojhan CreditAttribution: Bojhan as a volunteer commentedIsn't this Novice to fix?
Comment #4
LewisNymanI'm not sure because I'm not sure what we should change yet
Comment #5
wheatpenny CreditAttribution: wheatpenny commentedRemoving the Novice tag as no tasks are yet defined. Added the beta evaluation. Beta evaluation should probably be rewritten once tasks are defined.
Comment #6
Bojhan CreditAttribution: Bojhan as a volunteer commentedHow do I run this now that we don't have a nice style.css anymore?
@Lewis How do you intend to tackle this?
Comment #7
LewisNyman@Bojhan hmm good point, looks like it only accepts one CSS file. Don't call style.css nice though :P
I can probably roll this into a gulp command in the drupal frontend toolkit. Great cleanup task for 8.1 though.
Comment #21
longwaveThe Seven theme has been removed from Drupal 10 core. This issue only appears to affect Seven, so I am moving this to the contributed Seven project.