[MD settings] "dense" paper toggle buttons

chrome/browser/resources/settings/settings_vars_css.html

 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
 <!-- Common css variables for Material Design settings. -->
 <style is="custom-style">
   :root {
     --checkbox-margin-start: 2px;
     --checkbox-size: 16px;
     --checkbox-spacing: 18px;
     --iron-icon-fill-color: var(--paper-grey-600);
     --iron-icon-height: 20px;
     --iron-icon-spacing: 16px;
     --iron-icon-width: 20px;
     --paper-checkbox-label-color: inherit;
     --paper-dialog-color: inherit;
     --paper-icon-button: {
       width: 36px;
       height: 36px;
     };
     --paper-input-max-width: 264px;
     --paper-item: {
       font-size: inherit;
     };
     --paper-radio-button-label-color: inherit;
     --paper-radio-group-item-padding: 0;
 
+    --paper-toggle-button-checked-bar-color:
+        var(--settings-toggle-button-color);
+    --paper-toggle-button-checked-button-color:
+        var(--settings-toggle-button-color);
+    --paper-toggle-button-checked-bar: {
+      height: var(--settings-toggle-button-bar-height);
+      width: var(--settings-toggle-button-bar-width);
+    };
+    --paper-toggle-button-checked-button: {
+      height: var(--settings-toggle-button-button-size);
+      width: var(--settings-toggle-button-button-size);
+    };
+    --paper-toggle-button-unchecked-bar: {
+      height: var(--settings-toggle-button-bar-height);
+      width: var(--settings-toggle-button-bar-width);

[Dan Beam, 2016/08/29 18:55:18]

additional tip:

--settings-toggle-height-and-width: {
  height: 12px;
  width: 28px;
};

--paper-toggle-button-checked-button: var(--settings-toggle-height-and-width);
--paper-toggle-button-unchecked-button: var(--settings-toggle-height-and-width);

[dschuyler, 2016/08/29 23:48:13]

This works iff the the --settings vars are declared before they are
used. Using the vars within the {} allows the --settings vars to be
sorted. I'm assuming that replacements are something akin to a 
breadth-first traversal (based on the behavior I'm seeing).

I can make the values unsorted and use this method if that's preferred.

+    };
+    --paper-toggle-button-unchecked-button: {
+      height: var(--settings-toggle-button-button-size);
+      width: var(--settings-toggle-button-button-size);
+    };
+
     --settings-actionable: var(--cr-actionable);
 
     /* Custom grey for Alan (bettes@). */
     --settings-background-color: rgb(241, 241, 241);
     --settings-secondary: {
       color: var(--paper-grey-600);
       font-weight: 400;
       margin-top: 4px;
     };
     --settings-disabled-opacity: .65;
@@ skipping 12 matching lines @@
 
     --settings-page-vertical-margin: 21px;
 
     --settings-row-min-height: 44px;
     --settings-row-two-line-min-height: 56px;
     --settings-separator-line: var(--cr-separator-line);
 
     --settings-title-bar-background-color: var(--google-blue-700);
     --settings-title-bar-color: rgb(255, 255, 255);
     --settings-title-search-color: rgb(192, 199, 205);
+
+    --settings-toggle-button-bar-height: 12px;
+    --settings-toggle-button-bar-width: 28px;
+    --settings-toggle-button-button-size: 16px;
+    --settings-toggle-button-color: var(--google-blue-500);

[Dan Beam, 2016/08/29 18:53:43]

why are you declaring these AFTER using them?  does this work with native custom
css props?

[dschuyler, 2016/08/29 23:48:13]

I had defined them above and then got a notice when trying
to submit the CL that they should be alphabetical. I tested
and it seemed to work. I didn't specifically test native
vs. non-native.

   }
 </style>