[MD settings] adjust control spacing

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">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/default-theme.html">
 
 <!-- Common css variables for Material Design settings. -->
 <style is="custom-style">

[hcarmona, 2017/05/15 18:24:11]

Is there a name conflict between this and
https://cs.chromium.org/chromium/src/ui/webui/resources/cr_elements/shared_va...
where the --cr-icon-ripple-padding is defined?

[dschuyler, 2017/05/15 19:04:15]

I believe this is okay since it's saying it "is a". More info on custom-style is
at https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style 

[hcarmona, 2017/05/15 19:06:07]

Acknowledged.

   /* We keep our vars in sort order, though some vars must be defined prior to
    * others. The --settings-* vars are defined explicitly prior to the --paper-*
    * and --iron-* vars.
    */
   :root {
     /* Some colors use non-MD colors.  These custom colors are specified by
      * UX design (bettes@). */
 
     --settings-actionable: var(--cr-actionable);
     --settings-button-edge-spacing: 12px;
@@ skipping 66 matching lines @@
 
     --checkbox-margin-start: 2px;
     --checkbox-size: 16px;
     --settings-control-spacing: var(--cr-control-spacing);
     --iron-icon-fill-color: var(--paper-grey-600);
     --iron-icon-height: var(--cr-icon-size);
     --iron-icon-width: var(--cr-icon-size);
     --paper-checkbox-label-color: inherit;
     --paper-dialog-color: inherit;
 
-    --cr-icon-ripple-size: 40px;
     --paper-icon-button: {
       /**
-       * This makes the icons 20px (in combination with "--cr-icon-ripple-size:
-       * 40px"), since paper-icon-button>iron-icon width and height are
-       * hardcoded to 100%.
+       * This makes the icons 20px (in combination with --cr-icon-ripple-size),
+       * since paper-icon-button>iron-icon width and height are hard-coded to
+       * 100%.
        */
-      padding: 10px;
+      padding: var(--cr-icon-ripple-padding);
     };
     --paper-input-container-focus-color: var(--google-blue-500);
     --paper-input-container-input: {
       color: inherit;
       font-size: inherit;
       font-weight: inherit;
       line-height: 154%;
       vertical-align: baseline;
     };
     --paper-input-container-label: {
@@ skipping 28 matching lines @@
     --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size);
     --paper-toggle-button-unchecked-ink: var(--settings-toggle-ink-size);
 
     --settings-input-underline: {
       border-color: var(--paper-grey-300);
     };
 
     --paper-input-container-underline: var(--settings-input-underline);
   }
 </style>