ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

color-palette.scss (8452B)

      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 }