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">
  /* 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-background-color: rgb(241, 241, 241);
    --settings-box-row-padding: 20px;
    --settings-indent-width: 36px;
    --settings-card-max-width: 640px;
    --settings-disabled-opacity: .65;
    --settings-error-color: var(--paper-red-700);

    /* The inner icon is 20px in size. paper-icon-button has 8px padding. */
    --settings-icon-ripple-size: 36px;
    --settings-icon-size: 20px;

    --settings-list-frame-padding: {
      -webkit-padding-end: var(--settings-box-row-padding);
      -webkit-padding-start: calc(
          var(--settings-box-row-padding) + var(--settings-indent-width));
      padding-bottom: 0;
      padding-top: 0;
    }

    --settings-nav-grey: rgb(90, 90, 90);

    --settings-page-vertical-margin: 21px;

    /* These are used for row items such as radio buttons, check boxes, list
     * items etc. */
    --settings-row-min-height: 44px;
    --settings-row-two-line-min-height: 56px;

    /* These are used for the settings-box containers, which may contain one or
     * more "row items". */
    --settings-box-min-height: 48px;
    --settings-box-two-line-min-height: 60px;

    --settings-secondary: {
      color: var(--paper-grey-600);
      font-weight: 400;
      margin-top: 4px;
    };
    --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-bar-size: {
      height: 12px;
      left: 4px;
      width: 24px;
    };
    --settings-toggle-button-size: {
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
      height: 16px;
      top: -2px;
      width: 16px;
    };
    --settings-toggle-color: var(--google-blue-500);

    --checkbox-margin-start: 2px;
    --checkbox-size: 16px;
    --checkbox-spacing: 18px;
    --iron-icon-fill-color: var(--paper-grey-600);
    --iron-icon-height: var(--settings-icon-size);
    --iron-icon-width: var(--settings-icon-size);
    --paper-checkbox-label-color: inherit;
    --paper-dialog-color: inherit;
    --paper-icon-button: {
      height: var(--settings-icon-ripple-size);
      width: var(--settings-icon-ripple-size);
    };
    --paper-input-container-focus-color: var(--google-blue-500);
    --paper-input-container-input: {
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
      vertical-align: baseline;
    };
    --paper-input-max-width: 264px;
    --paper-item: {
      font-size: inherit;
    };
    --paper-radio-button-ink-size: 40px;
    --paper-radio-button-label-color: inherit;
    --paper-radio-button-size: 16px;
    --paper-radio-group-item-padding: 0;

    --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size);
    --paper-toggle-button-checked-bar-color: var(--settings-toggle-color);
    --paper-toggle-button-checked-button: {
      @apply(--settings-toggle-button-size);
      transform: translate(14px, 0);
    };
    --paper-toggle-button-checked-button-color: var(--settings-toggle-color);
    --paper-toggle-button-label-spacing: 0;
    --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size);
    --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size);
  }
</style>