westfieldlabs / westfield_scally Goto Github PK

Inline links should maintain default styling provided by Scally but the $link-colour needs to be set to WFC $colour-grey-5

https://github.com/westfield/aem_sso/pull/16#issuecomment-64040399

• Create text-input color which should be black: $text-input-and-select-text-color: $colour-black

See SSO form design and:

• https://github.com/westfield/aem_sso/blob/master/content/src/main/content/jcr_root/etc/designs/sso/style/scss/components/_form.scss
• https://github.com/westfield/aem_sso/blob/master/content/src/main/content/jcr_root/etc/designs/sso/style/scss/style.scss#L162

Rather than @extending the Text utility like in Button component.

https://github.com/westfield/aem_sso/pull/16#discussion-diff-20747827

• Create a CTA (call to action) or similar button modifier which needs to be red: $c-btn-background-colour: $colour-brand-1
• Change Secondary button text color and should be black: $c-btn-foreground-colour-secondary: $colour-black

The font weight on the buttons is too heavy, please update to use $font-weight-gotham-book

This is temporary until we get a web site up and running.

Add @demos comments to relevant partials.

h4's are being treated as a global subheading with a visual treatment based on the attached files. Update the h4 headings to use capitalize each word instead of having everything in uppercase.

Should we consider creating a subtitle component that would also handle the common alignment between mobile and desktop? (centered at mobile, left at desktop)

This will provide styling for feedback messages like:

• Warning
• Information
• Error
• Success

This will extend Scally's utility: westfieldlabs/scally#115.

Create a new section called Vendor for 3rd party libraries.

Topic brought up in https://github.com/westfield/aem_sso/pull/8#discussion_r18871067.

https://github.com/westfield/aem_sso/pull/16#discussion-diff-20736368

• Create link color which should be black: $link-colour: $colour-black

https://github.com/westfield/aem_sso/pull/8#discussion-diff-18868851

Input Fields

• Placeholder text is transformed uppercase
• User input is not transformed

We want one canocical .scss-lint.yml file which ideally would live in the CSS Guidelines repo.

@kllevin will speak to design about the light and dark shades.

The colour palette needs to be updated as documented below. Please call out any areas these changes might effect that we may have overlooked.

/**
 * Greys.
 */

// 1
$colour-grey-1:                                      #ddd; --> #fafafa

// 2
$colour-grey-2:                                      #ccc; --> #f2f2f2

// 3
$colour-grey-3:                                      #999; --> #ccc

// 4
$colour-grey-4:                                      #6b6d6f; -->#999

// 5
$colour-grey-5:                                      #29292b; --> doesn't change

To avoid having to inject hooks within the rich-text editor markup.

Need a smart way to handle custom font weights e.g. Gotham.

Allowed markup

• Bold (strong)
• Italic (em)
• Lists (ul / ol)
• Table (table) ?
• Horizontal rule (hr)
• Paragraphs (p)
• Headings (h2-h6)
• Links (a)

Allowed components

How to apply certain styles

• Text alignments: generate a span with relevant class e.g. <span class="u-text-align-center">
• Indentation: generate a div with relevant class e.g. <div class="u-text-indent">

Update secondary buttons to:
$colour-btn-main-background-colour-secondary: $colour-grey-3;
$colour-btn-main-background-colour-secondary-hover: $colour-grey-4;

Please move the btn-menu out of centre-specific code and into WFC.

https://github.com/kllevin/aem_centre_sites/blob/hero-refactor/content/src/main/content/jcr_root/etc/designs/centre-site/style/scss/components/_button-menu.scss

Same as Scally.

https://jira.westfieldlabs.com/secure/attachment/51915/menu_animation.mov
https://jira.westfieldlabs.com/browse/CW-65

We are using details summary for accordions. Please move the styles from centre sites to WFC.

details summary

Based off the icons here: http://styleguide.westfieldlabs.com/web/icons.

We should set it on:

• a
• .btn

And via a class/silent placeholder.

Some possible transitions:

• Fade out via opacity.

See Deals / Filters.

Input placeholders use font family: gotham, font weight: book, color: #999
Input labels use font family: gotham, font weight: medium, color: #999
Input text use font family: Helvetica, font weight: light, color #29292b

https://github.com/westfield/aem_sso/pull/16#discussion-diff-20736213
Change hover colors which should be:

• $colour-btn-main-background-colour-hover: #c32519
• $colour-btn-main-background-colour-secondary-hover: #b8b8b8

Add README's to each section as per Scally.

Main README

• Explain how the icon component works.

Update h1, h2, h3 to more closely match the current US Centre site design pattern.

• headings should be in all caps
• h1 should be approx 24
• h2 should be approx 18
• h3 should be approx 14, change to Gotham-Medium

Need a Westfield specific button component that sits on top of the Scally button component.

After the mixin from scally was fixed westfieldlabs/scally#118 (comment) the headings mixin should be used in westfield_core

Do we need to add colours to all the HTML headings: h1 - h6 based off this: http://styleguide.westfieldlabs.com/web/typography?