[Summary view] [Print] [Text view]

   1  // Gutenberg text color options
   2  
   3  .has-black-color[class] {
   4      // Localize CSS-variables to limit relationship scope
   5      > [class*="__inner-container"] {
   6          --local--color-primary: var(--global--color-black, #000000);
   7          color: var(--local--color-primary);
   8      }
   9      color: var(--global--color-black);
  10  }
  11  
  12  .has-gray-color[class] {
  13      // Localize CSS-variables to limit relationship scope
  14      > [class*="__inner-container"] {
  15          --local--color-primary: var(--global--color-gray, #000000);
  16          color: var(--local--color-primary);
  17      }
  18      color: var(--global--color-gray);
  19  }
  20  
  21  .has-dark-gray-color[class] {
  22      // Localize CSS-variables to limit relationship scope
  23      > [class*="__inner-container"] {
  24          --local--color-primary: var(--global--color-dark-gray, #000000);
  25          color: var(--local--color-primary);
  26      }
  27      color: var(--global--color-dark-gray);
  28  }
  29  
  30  .has-green-color[class] {
  31      // Localize CSS-variables to limit relationship scope
  32      > [class*="__inner-container"] {
  33          --local--color-primary: var(--global--color-green, #FFFFFF);
  34          color: var(--local--color-primary);
  35      }
  36      color: var(--global--color-green);
  37  }
  38  
  39  .has-blue-color[class] {
  40      // Localize CSS-variables to limit relationship scope
  41      > [class*="__inner-container"] {
  42          --local--color-primary: var(--global--color-blue, #FFFFFF);
  43          color: var(--local--color-primary);
  44      }
  45      color: var(--global--color-blue);
  46  }
  47  
  48  .has-purple-color[class] {
  49      // Localize CSS-variables to limit relationship scope
  50      > [class*="__inner-container"] {
  51          --local--color-primary: var(--global--color-purple, #FFFFFF);
  52          color: var(--local--color-primary);
  53      }
  54      color: var(--global--color-purple);
  55  }
  56  
  57  .has-red-color[class] {
  58      // Localize CSS-variables to limit relationship scope
  59      > [class*="__inner-container"] {
  60          --local--color-primary: var(--global--color-red, #FFFFFF);
  61          color: var(--local--color-primary);
  62      }
  63      color: var(--global--color-red);
  64  }
  65  
  66  .has-orange-color[class] {
  67      // Localize CSS-variables to limit relationship scope
  68      > [class*="__inner-container"] {
  69          --local--color-primary: var(--global--color-orange, #FFFFFF);
  70          color: var(--local--color-primary);
  71      }
  72      color: var(--global--color-orange);
  73  }
  74  
  75  .has-yellow-color[class] {
  76      // Localize CSS-variables to limit relationship scope
  77      > [class*="__inner-container"] {
  78          --local--color-primary: var(--global--color-yellow, #FFFFFF);
  79          color: var(--local--color-primary);
  80      }
  81      color: var(--global--color-yellow);
  82  }
  83  
  84  .has-white-color[class] {
  85      // Localize CSS-variables to limit relationship scope
  86      > [class*="__inner-container"] {
  87          --local--color-primary: var(--global--color-white, #FFFFFF);
  88          color: var(--local--color-primary);
  89      }
  90      color: var(--global--color-white);
  91  }
  92  
  93  // Gutenberg background-color options
  94  .has-background {
  95  
  96      a,
  97      p,
  98      h1,
  99      h2,
 100      h3,
 101      h4,
 102      h5,
 103      h6 {
 104          color: currentColor;
 105      }
 106  }
 107  
 108  .has-black-background-color[class] {
 109      // Localize CSS-variables to limit relationship scope
 110      > [class*="__inner-container"] {
 111          --local--color-background: var(--global--color-black, #000000);
 112          background-color: var(--local--color-background);
 113      }
 114      background-color: var(--global--color-black);
 115  }
 116  
 117  .has-dark-gray-background-color[class] {
 118      // Localize CSS-variables to limit relationship scope
 119      > [class*="__inner-container"] {
 120          --local--color-background: var(--global--color-dark-gray, #000000);
 121          background-color: var(--local--color-background);
 122      }
 123      background-color: var(--global--color-dark-gray);
 124  }
 125  
 126  .has-gray-background-color[class] {
 127      // Localize CSS-variables to limit relationship scope
 128      > [class*="__inner-container"] {
 129          --local--color-background: var(--global--color-gray, #000000);
 130          background-color: var(--local--color-background);
 131      }
 132      background-color: var(--global--color-gray);
 133  }
 134  
 135  .has-light-gray-background-color[class] {
 136      // Localize CSS-variables to limit relationship scope
 137      > [class*="__inner-container"] {
 138          --local--color-background: var(--global--color-light-gray, #FFFFFF);
 139          background-color: var(--local--color-background);
 140      }
 141      background-color: var(--global--color-light-gray);
 142  }
 143  
 144  .has-green-background-color[class] {
 145      // Localize CSS-variables to limit relationship scope
 146      > [class*="__inner-container"] {
 147          --local--color-background: var(--global--color-green, #FFFFFF);
 148          background-color: var(--local--color-background);
 149      }
 150      background-color: var(--global--color-green);
 151  }
 152  
 153  .has-blue-background-color[class] {
 154      // Localize CSS-variables to limit relationship scope
 155      > [class*="__inner-container"] {
 156          --local--color-background: var(--global--color-blue, #FFFFFF);
 157          background-color: var(--local--color-background);
 158      }
 159      background-color: var(--global--color-blue);
 160  }
 161  
 162  .has-purple-background-color[class] {
 163      // Localize CSS-variables to limit relationship scope
 164      > [class*="__inner-container"] {
 165          --local--color-background: var(--global--color-purple, #FFFFFF);
 166          background-color: var(--local--color-background);
 167      }
 168      background-color: var(--global--color-purple);
 169  }
 170  
 171  .has-red-background-color[class] {
 172      // Localize CSS-variables to limit relationship scope
 173      > [class*="__inner-container"] {
 174          --local--color-background: var(--global--color-red, #FFFFFF);
 175          background-color: var(--local--color-background);
 176      }
 177      background-color: var(--global--color-red);
 178  }
 179  
 180  .has-orange-background-color[class] {
 181      // Localize CSS-variables to limit relationship scope
 182      > [class*="__inner-container"] {
 183          --local--color-background: var(--global--color-orange, #FFFFFF);
 184          background-color: var(--local--color-background);
 185      }
 186      background-color: var(--global--color-orange);
 187  }
 188  
 189  .has-yellow-background-color[class] {
 190      // Localize CSS-variables to limit relationship scope
 191      > [class*="__inner-container"] {
 192          --local--color-background: var(--global--color-yellow, #FFFFFF);
 193          background-color: var(--local--color-background);
 194      }
 195      background-color: var(--global--color-yellow);
 196  }
 197  
 198  .has-white-background-color[class] {
 199      // Localize CSS-variables to limit relationship scope
 200      > [class*="__inner-container"] {
 201          --local--color-background: var(--global--color-white, #FFFFFF);
 202          background-color: var(--local--color-background);
 203      }
 204      background-color: var(--global--color-white);
 205  }
 206  
 207  .has-background:not(.has-text-color) {
 208  
 209      &.has-black-background-color[class],
 210      &.has-gray-background-color[class],
 211      &.has-dark-gray-background-color[class] {
 212            color: var(--global--color-white);
 213  
 214          // Localize CSS-variables to limit relationship scope
 215          > [class*="__inner-container"] {
 216              --local--color-primary: var(--global--color-background, #FFFFFF);
 217              // Reverse the local foreground color in darkmode
 218              .is-dark-theme & {
 219                  --local--color-primary: var(--global--color-primary, #000000);
 220              }
 221              color: var(--local--color-primary, var(--global--color-primary));
 222          }
 223      }
 224  
 225      &.has-green-background-color[class],
 226      &.has-blue-background-color[class],
 227      &.has-purple-background-color[class],
 228      &.has-red-background-color[class],
 229      &.has-orange-background-color[class],
 230      &.has-yellow-background-color[class],
 231      &.has-white-background-color[class] {
 232            color: var(--global--color-dark-gray);
 233  
 234          // Localize CSS-variables to limit relationship scope
 235          > [class*="__inner-container"] {
 236              --local--color-primary: var(--global--color-primary, #000000);
 237              // Reverse the local foreground color in darkmode
 238              .is-dark-theme & {
 239                  --local--color-primary: var(--global--color-background, #FFFFFF);
 240              }
 241              color: var(--local--color-primary, var(--global--color-primary));
 242          }
 243      }
 244  }
 245  
 246  // Custom gradients
 247  .has-purple-to-yellow-gradient-background {
 248      background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow));
 249  }
 250  
 251  .has-yellow-to-purple-gradient-background {
 252      background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple));
 253  }
 254  
 255  .has-green-to-yellow-gradient-background {
 256      background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow));
 257  }
 258  
 259  .has-yellow-to-green-gradient-background {
 260      background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green));
 261  }
 262  
 263  .has-red-to-yellow-gradient-background {
 264      background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow));
 265  }
 266  
 267  .has-yellow-to-red-gradient-background {
 268      background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red));
 269  }
 270  
 271  .has-purple-to-red-gradient-background {
 272      background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red));
 273  }
 274  
 275  .has-red-to-purple-gradient-background {
 276      background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple));
 277  }