Weight loss program #787

samanpwbb · 2017-06-02T22:55:45Z

This is ready to go. Decided against drastic conceptual changes.

// mb-pages
CSS: 262 kB (minified) => 29.7 kB (gzipped)
SVG: 50 kB => 15.1 kB (gzipped)

// This branch
CSS: 172 kB (minified) => 21.9 kB (gzipped)
SVG: 50 kB => 15.1 kB (gzipped)

This branch turned into a larger v1 push, beyond just space saving. Changes:

Adds missing --dark modifiers to some typography rules.
Stroked buttons and select elements now have a 1px stroke by default.
Adds new btn--stroked--2 and select--stroked--2 modifier classes to create stroked buttons and select elements that have 2px strokes.
[internal only] Renames neutral variables to more meaningful disabled-{type}-interactive variables.
Darken the gray-faint color to #e5e5e5 so it's legible on a wider range of monitors.
Removes teal color variations.
Removes 600px layout scale value for padding and margin.
Refactors range inputs to use currentColor for coloring, which save space
Removes darken5 and lighten5 color variations to save space and encourage more accessible design.
Removes p{n} and m{n} rules.
Limits the possible colors available for form elements for accessibility reasons and to save size. -faint or -light form elements are no longer available for any element, and darken10 and darken10 are no longer available for any for element except buttons.
Adds distinct hover states for active checkboxes and radio inputs.
Redesigns checkbox according to Reconsider active checkbox style #745.

samanpwbb · 2017-06-04T06:16:50Z

@tristen @davidtheclark this is ready for review.

tristen

Changes look great!

Decided against drastic conceptual changes

By that do you mean reducing color variations on form elements to two states?

tristen · 2017-06-04T13:19:58Z

site/catalog/toggles.js

@@ -84,12 +78,12 @@ class Toggles extends React.Component {
        </div>

        <div className='mb12 txt-bold color-darken50 txt-uppercase txt-s'>Light variations</div>
-        <div className='bg-gray round p12y mt12'>
+        <div className='bg-gray round px12 py12y mt12'>


Should be py12

tristen · 2017-06-04T13:20:24Z

site/catalog/toggles.js

        {lightenColors.map((c) => <ToggleEl key={c} color={c} />)}
        </div>

        <div className='mt24 mb12 txt-bold color-darken50 txt-uppercase txt-s'>Disabled and light</div>
-        <div className='bg-gray round p12y mt12'>
+        <div className='bg-gray round px12 py12y mt12'>


Should be py12

tristen · 2017-06-04T13:21:04Z

site/examples/progress_bars.js

@@ -9,7 +9,7 @@ const playback = `<div class='flex-parent flex-parent--row flex-parent--center-c
    <button class='flex-child py18 pr12 pl18 border-r border--gray-light bg-white bg-green-faint-on-hover cursor-pointer round-l'>
      <div class='triangle--r triangle color-green color-green'></div>
    </button>
-    <div class='flex-child flex-child--grow p18 bg-white'>
+    <div class='flex-child flex-child--grow px18 py18bg-white'>


Missing space between class names

tristen · 2017-06-04T13:21:56Z

site/examples/tooltips.js

  <span class='flex-child triangle triangle--d'></span>
 </div>`;

 const basic_right = `<div class='flex-parent-inline flex-parent--center-cross'>
  <span class='flex-child triangle triangle--l'></span>
-  <div class='flex-child p6 round txt-bold txt-s align-center bg-darken75 color-white'>Hello world!</div>
+  <div class='flex-child px6 py6round txt-bold txt-s align-center bg-darken75 color-white'>Hello world!</div>


Missing space between class names

tristen · 2017-06-04T13:22:13Z

site/examples/tooltips.js

 </div>`;

 const basic_left = `<div class='flex-parent-inline flex-parent--center-cross'>
-  <div class='flex-child p6 round txt-bold txt-s align-center bg-darken75 color-white'>Hello world!</div>
+  <div class='flex-child px6 py6round txt-bold txt-s align-center bg-darken75 color-white'>Hello world!</div>


Missing space between class names

tristen · 2017-06-04T13:22:18Z

site/examples/tooltips.js

  <span class='flex-child triangle triangle--r'></span>
 </div>`;

 const basic_with_closure = `<div class='flex-parent-inline flex-parent--center-cross flex-parent--column'>
-  <div class='flex-child relative p18 round txt-bold txt-s align-center bg-darken75 color-white'>
+  <div class='flex-child relative px18 py18round txt-bold txt-s align-center bg-darken75 color-white'>


Missing space between class names

tristen · 2017-06-04T13:24:11Z

src/typography.css

-  border: 1px solid var(--lighten10);
-  line-height: 18px;
-  border-radius: 3px;
-  padding: 2px 3px;


Was dropping these properties intentional?

Yeah, prose--dark is a modifier for prose so no need to duplicate these rules.

tristen · 2017-06-04T13:32:59Z

src/variables.json

-  "neutral45": "rgba(127, 127, 127, 0.45)",
+  "disabled-primary-interactive-color": "rgba(127, 127, 127, 0.25)",
+  "disabled-secondary-interactive-color": "rgba(127, 127, 127, 0.1)",
+  "disabled-text-color": "rgba(127, 127, 127, 0.45)",


Is disabled accurate? This is used for placeholder too right? And I'm not sure how primary & secondary align with how they are used. How about input-{value}-on-blur?

Ohh that is the one inaccurate use. I can change this to be 'placeholder-text-color'

tristen · 2017-06-04T13:34:29Z

site/catalog/toggles.js

  'gray',
-  'gray-dark',


Curious about all these gray-{varient} omissions? They ... still exist but you're removing them from the catalog?

This was a fix - we never had -dark variants here.

samanpwbb · 2017-06-04T15:17:18Z

Addressed feedback!

davidtheclark · 2017-06-04T15:19:05Z

scripts/build-color-variants.js

  'darken10',
  'darken25',
  'darken50',
  'darken75',

-  'lighten5',


I like these cuts!

davidtheclark · 2017-06-04T15:19:39Z

scripts/build-color-variants.js

+
+function isNotSuitableForButtons(color) {
+  // Filled Buttons should be allowed to have subtle backgrounds within reason.
+  return color === 'black' || /(-faint|-dark)$/.test(color);
 }


davidtheclark · 2017-06-04T15:22:20Z

scripts/build-color-variants.js

+
+        input:checked + .switch--dot-${color}::after {
+          background-color: var(--${color});
+        }
      `);
    }, '');
  };

  variantGenerators.range = function (colors) {


Dark and non-dark ranges seem to look the same:

Good catch - was from an earlier refactor attempt. I removed this class but didn't remove the documentation?

davidtheclark · 2017-06-04T15:24:58Z

scripts/build-color-variants.js

+  // Do not create form elements from values that are too light or too dark,
+  // for accessibility and to save space.
+  return color === 'black' || /^(darken10|lighten10)$/.test(color) || /(-dark|-light|-faint)$/.test(color);
+}


What do you about think -faint for hover and active states? Should we keep those, or also remove them to encourage stronger contrast?

I'd be in favor of cutting them - can add that to this PR

davidtheclark · 2017-06-04T15:28:26Z

Since a lot changes here, might be useful to add a Changelog modifications in this PR.

…tyling

- rename disabled-text-color to more appropriate inactice-text-color, used for both disabled and placeholder text - fix find and replace typos

…essibility

samanpwbb · 2017-06-04T19:12:33Z

@tristen @davidtheclark oookay i think this is ready for a final 👀 then merge

davidtheclark

All these changes seem wonderful to me! Very fine work.

See changes in changelog.md

* adjust icon sizing, add icon-wrapper class, closes #763 * rename icon-wrapper to icon-inliner, other small fixes * force txt-bold to be 1em line height, fixes line height offsets, closes #775 * rework size scale, closes #749 * Add limiter class, consistify scale even more * only single-declaration utility classes should have important (#785) * New copy of Open Sans (#786) Reverts prior line-height change to bold weight. Closes #775. * reset abbr text-decoration, fixes txt-abbr rule (#788) * Weight loss program (#787) See changes in changelog.md * Lighten gray-faint and add a line of caution to color documentation * Reintroduce darken5 and lighten5 for backgrounds only * Add icons option to build script (#794) options.icons is an array of icon names. If this option is used, only icon names that match options.icons will be included in Assembly. Closes #782 * adds color and hover state to prose links (#798) * Make uglify-js a real dependency Closes #800. * add unprose class, closes #793 (#795) * add select--xs class to match btn--xs (#811) * fix spin animation utility (#812) closes #790 * prepare v0.14.0 (#813)

samanpwbb force-pushed the weight-loss-program branch from 490c55b to 2837961 Compare June 4, 2017 02:55

samanpwbb requested review from davidtheclark and tristen June 4, 2017 06:12

samanpwbb mentioned this pull request Jun 4, 2017

What does Assembly v1.0 mean? #789

Closed

tristen requested changes Jun 4, 2017

View reviewed changes

samanpwbb force-pushed the weight-loss-program branch from c3c3e28 to bdec5fa Compare June 4, 2017 15:16

davidtheclark reviewed Jun 4, 2017

View reviewed changes

samanpwbb added 17 commits June 4, 2017 15:09

simplify color variants

95389b5

reduce filesize by trimming color and layout rules, closes #746

b6f5f9d

fix rules based on scale changes

1e81545

remove lighten5 and darken5, to save space and encourage accessible s…

502f1e7

…tyling

minor cleanup

e6a5fad

site adjustments, make faint gray legible

11fc220

fix stroked buttons

cec0169

cleanup select elements

9f4a2aa

add 1px buttons and pills, closes #747

19e2218

refine checkbox and radio styles, closes #745

9c1b2e3

remove unecessary check in isNotSuitableForForms

546e1f3

fix select element across all browsers

a90954b

update jest snapshots

6e5392b

address PR feedback

9eaf268

- rename disabled-text-color to more appropriate inactice-text-color, used for both disabled and placeholder text - fix find and replace typos

remove outdated documentation

765655c

reduce options for on-hover and on-active to save space/encourage acc…

0715319

…essibility

update changelog with to-be-released changes

a9a7242

samanpwbb force-pushed the weight-loss-program branch from 360e1a7 to a9a7242 Compare June 4, 2017 19:12

samanpwbb changed the title ~~[not ready] Weight loss program~~ Weight loss program Jun 4, 2017

davidtheclark approved these changes Jun 4, 2017

View reviewed changes

samanpwbb merged commit 4831ad6 into dev-pages Jun 4, 2017

samanpwbb deleted the weight-loss-program branch June 4, 2017 21:12

This was referenced Jun 4, 2017

Reconsider active checkbox style #745

Closed

Remove/reduce color variations from some form component classes #746

Closed

Redesign select inputs #747

Closed

lshig mentioned this pull request Jun 29, 2017

Margins section on Layout page has typo #796

Closed

davidtheclark pushed a commit that referenced this pull request Jul 2, 2017

Weight loss program (#787)

5e6e0a1

See changes in changelog.md

dasulit mentioned this pull request Aug 24, 2017

Bring back -light form elements? #848

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Weight loss program #787

Weight loss program #787

samanpwbb commented Jun 2, 2017 •

edited

Loading

samanpwbb commented Jun 4, 2017 •

edited

Loading

tristen left a comment

tristen Jun 4, 2017

tristen Jun 4, 2017

tristen Jun 4, 2017

tristen Jun 4, 2017

tristen Jun 4, 2017

tristen Jun 4, 2017

tristen Jun 4, 2017

samanpwbb Jun 4, 2017

tristen Jun 4, 2017

samanpwbb Jun 4, 2017

tristen Jun 4, 2017

samanpwbb Jun 4, 2017

samanpwbb commented Jun 4, 2017

davidtheclark Jun 4, 2017

davidtheclark Jun 4, 2017

davidtheclark Jun 4, 2017

samanpwbb Jun 4, 2017

samanpwbb Jun 4, 2017

davidtheclark Jun 4, 2017

samanpwbb Jun 4, 2017

davidtheclark commented Jun 4, 2017

samanpwbb commented Jun 4, 2017

davidtheclark left a comment

Weight loss program #787

Weight loss program #787

Conversation

samanpwbb commented Jun 2, 2017 • edited Loading

samanpwbb commented Jun 4, 2017 • edited Loading

tristen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samanpwbb commented Jun 4, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davidtheclark commented Jun 4, 2017

samanpwbb commented Jun 4, 2017

davidtheclark left a comment

Choose a reason for hiding this comment

samanpwbb commented Jun 2, 2017 •

edited

Loading

samanpwbb commented Jun 4, 2017 •

edited

Loading