westfieldlabs / westfield_scally Goto Github PK

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

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

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

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

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

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

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

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

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

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

We should set it on:

• a
• .btn

And via a class/silent placeholder.

Some possible transitions:

• Fade out via opacity.

See Deals / Filters.

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

Add README's to each section as per Scally.

Main README

• Explain how the icon component works.

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">

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

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

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

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

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

Add @demos comments to relevant partials.

Input Fields

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

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

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

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

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

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

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

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

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

Same as Scally.

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

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

details summary

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