[Summary view] [Print] [Text view]

   1  /**
   2   * SCSS Variables.
   3   *
   4   * Please use variables from this sheet to ensure consistency across the UI.
   5   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
   6   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
   7   */
   8  /**
   9   * Colors
  10   */
  11  /**
  12   * Fonts & basic variables.
  13   */
  14  /**
  15   * Typography
  16   */
  17  /**
  18   * Grid System.
  19   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  20   */
  21  /**
  22   * Radius scale.
  23   */
  24  /**
  25   * Elevation scale.
  26   */
  27  /**
  28   * Dimensions.
  29   */
  30  /**
  31   * Mobile specific styles
  32   */
  33  /**
  34   * Editor styles.
  35   */
  36  /**
  37   * Block & Editor UI.
  38   */
  39  /**
  40   * Block paddings.
  41   */
  42  /**
  43   * React Native specific.
  44   * These variables do not appear to be used anywhere else.
  45   */
  46  /**
  47   * Editor Normalization Styles
  48   *
  49   * These are only output in the editor, but styles here are prefixed .editor-styles-wrapper and affect the theming
  50   * of the editor by themes.
  51   */
  52  html :where(.editor-styles-wrapper) {
  53    font-family: serif;
  54    font-size: initial;
  55    line-height: initial;
  56    color: initial;
  57    background: #fff;
  58  }
  59  :where(.editor-styles-wrapper) .wp-align-wrapper {
  60    max-width: 840px;
  61  }
  62  :where(.editor-styles-wrapper) .wp-align-wrapper > .wp-block, :where(.editor-styles-wrapper) .wp-align-wrapper.wp-align-full {
  63    max-width: none;
  64  }
  65  :where(.editor-styles-wrapper) .wp-align-wrapper.wp-align-wide {
  66    max-width: 840px;
  67  }
  68  :where(.editor-styles-wrapper) a {
  69    transition: none;
  70  }
  71  :where(.editor-styles-wrapper) code,
  72  :where(.editor-styles-wrapper) kbd {
  73    padding: 0;
  74    margin: 0;
  75    background: inherit;
  76    font-size: inherit;
  77    font-family: monospace;
  78  }
  79  :where(.editor-styles-wrapper) p {
  80    font-size: revert;
  81    line-height: revert;
  82    margin: revert;
  83  }
  84  :where(.editor-styles-wrapper) ul,
  85  :where(.editor-styles-wrapper) ol {
  86    margin: revert;
  87    padding: revert;
  88    list-style-type: revert;
  89    box-sizing: border-box;
  90  }
  91  :where(.editor-styles-wrapper) ul ul,
  92  :where(.editor-styles-wrapper) ul ol,
  93  :where(.editor-styles-wrapper) ol ul,
  94  :where(.editor-styles-wrapper) ol ol {
  95    margin: revert;
  96  }
  97  :where(.editor-styles-wrapper) ul li,
  98  :where(.editor-styles-wrapper) ol li {
  99    margin: revert;
 100  }
 101  :where(.editor-styles-wrapper) ul ul,
 102  :where(.editor-styles-wrapper) ol ul {
 103    list-style-type: revert;
 104  }
 105  :where(.editor-styles-wrapper) h1,
 106  :where(.editor-styles-wrapper) h2,
 107  :where(.editor-styles-wrapper) h3,
 108  :where(.editor-styles-wrapper) h4,
 109  :where(.editor-styles-wrapper) h5,
 110  :where(.editor-styles-wrapper) h6 {
 111    font-size: revert;
 112    margin: revert;
 113    color: revert;
 114    line-height: revert;
 115    font-weight: revert;
 116  }
 117  :where(.editor-styles-wrapper) select {
 118    font-family: system-ui;
 119    appearance: revert;
 120    color: revert;
 121    border: revert;
 122    border-radius: revert;
 123    background: revert;
 124    box-shadow: revert;
 125    text-shadow: revert;
 126    outline: revert;
 127    cursor: revert;
 128    transform: revert;
 129    font-size: revert;
 130    line-height: revert;
 131    padding: revert;
 132    margin: revert;
 133    min-height: revert;
 134    max-width: revert;
 135    vertical-align: revert;
 136    font-weight: revert;
 137  }
 138  :where(.editor-styles-wrapper) select:disabled,
 139  :where(.editor-styles-wrapper) select:focus {
 140    color: revert;
 141    border-color: revert;
 142    background-color: revert;
 143    background-image: revert;
 144    box-shadow: revert;
 145    text-shadow: revert;
 146    cursor: revert;
 147    transform: revert;
 148  }