1/* 2 * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 3 * 4 * This file has been auto-generated. Any modifications 5 * you make will be overwritten when the file is regenerated. 6 * 7 * For more information or questions, please go to #design-eng 8 * 9 */ 10 11 12 13:root { 14 /* primitives */ 15 16 /* font families */ 17 --base-font-family-body: UberMoveText, UberMove, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; 18 --base-font-family-display: UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; 19 --base-font-family-mono: UberMoveMono, "Lucida Console", Monaco, monospace; 20 21 /* font weights */ 22 --base-font-weight-bold: 700; 23 --base-font-weight-light: 300; 24 --base-font-weight-medium: 500; 25 --base-font-weight-regular: 400; 26 27 /* font sizes (16px = 1rem) */ 28 --base-font-size-10: calc(10/16*1rem); 29 --base-font-size-12: calc(12/16*1rem); 30 --base-font-size-14: calc(14/16*1rem); 31 --base-font-size-16: 1rem; 32 --base-font-size-18: calc(18/16*1rem); 33 --base-font-size-20: calc(20/16*1rem); 34 --base-font-size-22: calc(22/16*1rem); 35 --base-font-size-24: calc(24/16*1rem); 36 --base-font-size-28: calc(28/16*1rem); 37 --base-font-size-32: calc(32/16*1rem); 38 --base-font-size-36: calc(36/16*1rem); 39 --base-font-size-42: calc(42/16*1rem); 40 41 /* line heights (16px = 1rem) */ 42 --base-line-height-10: calc(12/16*1rem); 43 --base-line-height-12: 1rem; 44 --base-line-height-14: calc(18/16*1rem); 45 --base-line-height-16: calc(20/16*1rem); 46 --base-line-height-18: calc(22/16*1rem); 47 --base-line-height-20: calc(24/16*1rem); 48 --base-line-height-24: calc(28/16*1rem); 49 --base-line-height-28: calc(32/16*1rem); 50 --base-line-height-32: calc(36/16*1rem); 51 --base-line-height-36: calc(40/16*1rem); 52 --base-line-height-42: calc(48/16*1rem); 53 54 /* letter spacings (px) */ 55 --base-letter-spacing-ls-25: 0.25px; 56 --base-letter-spacing-ls-28: 0.28px; 57 --base-letter-spacing-ls-30: 0.3px; 58 --base-letter-spacing-ls-33: 0.33px; 59 --base-letter-spacing-ls-35: 0.35px; 60 --base-letter-spacing-ls-38: 0.38px; 61 --base-letter-spacing-ls-neg-5: -0.05px; 62 63 /* typography ramp composites â values reference primitive vars above */ 64 65 /* Body L/Medium */ 66 --base-typography-body-l-medium-font-family: var(--base-font-family-body); 67 --base-typography-body-l-medium-font-size: var(--base-font-size-16); 68 --base-typography-body-l-medium-line-height: var(--base-line-height-16); 69 --base-typography-body-l-medium-font-weight: var(--base-font-weight-medium); 70 --base-typography-body-l-medium-letter-spacing: var(--base-letter-spacing-ls-neg-5); 71 72 /* Body L/Regular */ 73 --base-typography-body-l-regular-font-family: var(--base-font-family-body); 74 --base-typography-body-l-regular-font-size: var(--base-font-size-16); 75 --base-typography-body-l-regular-line-height: var(--base-line-height-16); 76 --base-typography-body-l-regular-font-weight: var(--base-font-weight-regular); 77 --base-typography-body-l-regular-letter-spacing: var(--base-letter-spacing-ls-neg-5); 78 79 /* Body M/Medium */ 80 --base-typography-body-m-medium-font-family: var(--base-font-family-body); 81 --base-typography-body-m-medium-font-size: var(--base-font-size-14); 82 --base-typography-body-m-medium-line-height: var(--base-line-height-14); 83 --base-typography-body-m-medium-font-weight: var(--base-font-weight-medium); 84 --base-typography-body-m-medium-letter-spacing: var(--base-letter-spacing-ls-neg-5); 85 86 /* Body M/Regular */ 87 --base-typography-body-m-regular-font-family: var(--base-font-family-body); 88 --base-typography-body-m-regular-font-size: var(--base-font-size-14); 89 --base-typography-body-m-regular-line-height: var(--base-line-height-14); 90 --base-typography-body-m-regular-font-weight: var(--base-font-weight-regular); 91 --base-typography-body-m-regular-letter-spacing: var(--base-letter-spacing-ls-neg-5); 92 93 /* Body S/Medium */ 94 --base-typography-body-s-medium-font-family: var(--base-font-family-body); 95 --base-typography-body-s-medium-font-size: var(--base-font-size-12); 96 --base-typography-body-s-medium-line-height: var(--base-line-height-12);
97 --base-typography-body-s-medium-font-weight: var(--base-font-weight-medium); 98 --base-typography-body-s-medium-letter-spacing: var(--base-letter-spacing-ls-neg-5); 99 100 /* Body S/Regular */ 101 --base-typography-body-s-regular-font-family: var(--base-font-family-body); 102 --base-typography-body-s-regular-font-size: var(--base-font-size-12); 103 --base-typography-body-s-regular-line-height: var(--base-line-height-12); 104 --base-typography-body-s-regular-font-weight: var(--base-font-weight-regular); 105 --base-typography-body-s-regular-letter-spacing: var(--base-letter-spacing-ls-neg-5); 106 107 /* Headline L/Bold */ 108 --base-typography-headline-l-bold-font-family: var(--base-font-family-display); 109 --base-typography-headline-l-bold-font-size: var(--base-font-size-20); 110 --base-typography-headline-l-bold-line-height: var(--base-line-height-20); 111 --base-typography-headline-l-bold-font-weight: var(--base-font-weight-bold); 112 --base-typography-headline-l-bold-letter-spacing: var(--base-letter-spacing-ls-35); 113 114 /* Headline L/Medium */ 115 --base-typography-headline-l-medium-font-family: var(--base-font-family-display); 116 --base-typography-headline-l-medium-font-size: var(--base-font-size-20); 117 --base-typography-headline-l-medium-line-height: var(--base-line-height-20); 118 --base-typography-headline-l-medium-font-weight: var(--base-font-weight-medium); 119 --base-typography-headline-l-medium-letter-spacing: var(--base-letter-spacing-ls-30); 120 121 /* Headline L/Regular */ 122 --base-typography-headline-l-regular-font-family: var(--base-font-family-display); 123 --base-typography-headline-l-regular-font-size: var(--base-font-size-20); 124 --base-typography-headline-l-regular-line-height: var(--base-line-height-20); 125 --base-typography-headline-l-regular-font-weight: var(--base-font-weight-regular); 126 --base-typography-headline-l-regular-letter-spacing: var(--base-letter-spacing-ls-25); 127 128 /* Headline M/Bold */ 129 --base-typography-headline-m-bold-font-family: var(--base-font-family-display); 130 --base-typography-headline-m-bold-font-size: var(--base-font-size-18); 131 --base-typography-headline-m-bold-line-height: var(--base-line-height-18); 132 --base-typography-headline-m-bold-font-weight: var(--base-font-weight-bold); 133 --base-typography-headline-m-bold-letter-spacing: var(--base-letter-spacing-ls-35); 134 135 /* Headline M/Medium */ 136 --base-typography-headline-m-medium-font-family: var(--base-font-family-display); 137 --base-typography-headline-m-medium-font-size: var(--base-font-size-18); 138 --base-typography-headline-m-medium-line-height: var(--base-line-height-18); 139 --base-typography-headline-m-medium-font-weight: var(--base-font-weight-medium); 140 --base-typography-headline-m-medium-letter-spacing: var(--base-letter-spacing-ls-30); 141 142 /* Headline M/Regular */ 143 --base-typography-headline-m-regular-font-family: var(--base-font-family-display); 144 --base-typography-headline-m-regular-font-size: var(--base-font-size-18); 145 --base-typography-headline-m-regular-line-height: var(--base-line-height-18); 146 --base-typography-headline-m-regular-font-weight: var(--base-font-weight-regular); 147 --base-typography-headline-m-regular-letter-spacing: var(--base-letter-spacing-ls-25); 148 149 /* Headline S/Bold */ 150 --base-typography-headline-s-bold-font-family: var(--base-font-family-display); 151 --base-typography-headline-s-bold-font-size: var(--base-font-size-16); 152 --base-typography-headline-s-bold-line-height: var(--base-line-height-16); 153 --base-typography-headline-s-bold-font-weight: var(--base-font-weight-bold); 154 --base-typography-headline-s-bold-letter-spacing: var(--base-letter-spacing-ls-35); 155 156 /* Headline S/Medium */ 157 --base-typography-headline-s-medium-font-family: var(--base-font-family-display); 158 --base-typography-headline-s-medium-font-size: var(--base-font-size-16); 159 --base-typography-headline-s-medium-line-height: var(--base-line-height-16); 160 --base-typography-headline-s-medium-font-weight: var(--base-font-weight-medium); 161 --base-typography-headline-s-medium-letter-spacing: var(--base-letter-spacing-ls-30); 162 163 /* Headline S/Regular */ 164 --base-typography-headline-s-regular-font-family: var(--base-font-family-display); 165 --base-typography-headline-s-regular-font-size: var(--base-font-size-16); 166 --base-typography-headline-s-regular-line-height: var(--base-line-height-16);
167 --base-typography-headline-s-regular-font-weight: var(--base-font-weight-regular); 168 --base-typography-headline-s-regular-letter-spacing: var(--base-letter-spacing-ls-25); 169 170 /* Headline XL/Bold */ 171 --base-typography-headline-xl-bold-font-family: var(--base-font-family-display); 172 --base-typography-headline-xl-bold-font-size: var(--base-font-size-24); 173 --base-typography-headline-xl-bold-line-height: var(--base-line-height-24); 174 --base-typography-headline-xl-bold-font-weight: var(--base-font-weight-bold); 175 --base-typography-headline-xl-bold-letter-spacing: var(--base-letter-spacing-ls-35); 176 177 /* Headline XL/Medium */ 178 --base-typography-headline-xl-medium-font-family: var(--base-font-family-display); 179 --base-typography-headline-xl-medium-font-size: var(--base-font-size-24); 180 --base-typography-headline-xl-medium-line-height: var(--base-line-height-24); 181 --base-typography-headline-xl-medium-font-weight: var(--base-font-weight-medium); 182 --base-typography-headline-xl-medium-letter-spacing: var(--base-letter-spacing-ls-30); 183 184 /* Headline XL/Regular */ 185 --base-typography-headline-xl-regular-font-family: var(--base-font-family-display); 186 --base-typography-headline-xl-regular-font-size: var(--base-font-size-24); 187 --base-typography-headline-xl-regular-line-height: var(--base-line-height-24); 188 --base-typography-headline-xl-regular-font-weight: var(--base-font-weight-regular); 189 --base-typography-headline-xl-regular-letter-spacing: var(--base-letter-spacing-ls-25); 190 191 /* Headline XS/Bold */ 192 --base-typography-headline-xs-bold-font-family: var(--base-font-family-display); 193 --base-typography-headline-xs-bold-font-size: var(--base-font-size-14); 194 --base-typography-headline-xs-bold-line-height: var(--base-line-height-14); 195 --base-typography-headline-xs-bold-font-weight: var(--base-font-weight-bold); 196 --base-typography-headline-xs-bold-letter-spacing: var(--base-letter-spacing-ls-38); 197 198 /* Headline XS/Medium */ 199 --base-typography-headline-xs-medium-font-family: var(--base-font-family-display); 200 --base-typography-headline-xs-medium-font-size: var(--base-font-size-14); 201 --base-typography-headline-xs-medium-line-height: var(--base-line-height-14); 202 --base-typography-headline-xs-medium-font-weight: var(--base-font-weight-medium); 203 --base-typography-headline-xs-medium-letter-spacing: var(--base-letter-spacing-ls-33); 204 205 /* Headline XS/Regular */ 206 --base-typography-headline-xs-regular-font-family: var(--base-font-family-display); 207 --base-typography-headline-xs-regular-font-size: var(--base-font-size-14); 208 --base-typography-headline-xs-regular-line-height: var(--base-line-height-14); 209 --base-typography-headline-xs-regular-font-weight: var(--base-font-weight-regular); 210 --base-typography-headline-xs-regular-letter-spacing: var(--base-letter-spacing-ls-28); 211 212 /* Headline XXL/Bold */ 213 --base-typography-headline-xxl-bold-font-family: var(--base-font-family-display); 214 --base-typography-headline-xxl-bold-font-size: var(--base-font-size-28); 215 --base-typography-headline-xxl-bold-line-height: var(--base-line-height-28); 216 --base-typography-headline-xxl-bold-font-weight: var(--base-font-weight-bold); 217 --base-typography-headline-xxl-bold-letter-spacing: var(--base-letter-spacing-ls-35); 218 219 /* Headline XXL/Medium */ 220 --base-typography-headline-xxl-medium-font-family: var(--base-font-family-display); 221 --base-typography-headline-xxl-medium-font-size: var(--base-font-size-28); 222 --base-typography-headline-xxl-medium-line-height: var(--base-line-height-28); 223 --base-typography-headline-xxl-medium-font-weight: var(--base-font-weight-medium); 224 --base-typography-headline-xxl-medium-letter-spacing: var(--base-letter-spacing-ls-30); 225 226 /* Headline XXL/Regular */ 227 --base-typography-headline-xxl-regular-font-family: var(--base-font-family-display); 228 --base-typography-headline-xxl-regular-font-size: var(--base-font-size-28); 229 --base-typography-headline-xxl-regular-line-height: var(--base-line-height-28); 230 --base-typography-headline-xxl-regular-font-weight: var(--base-font-weight-regular); 231 --base-typography-headline-xxl-regular-letter-spacing: var(--base-letter-spacing-ls-25); 232 233 /* Headline XXS/Bold */ 234 --base-typography-headline-xxs-bold-font-family: var(--base-font-family-display); 235 --base-typography-headline-xxs-bold-font-size: var(--base-font-size-12); 236 --base-typography-headline-xxs-bold-line-height: var(--base-line-height-12); 237 --base-typography-headline-xxs-bold-font-weight: var(--base-font-we
237ight-bold); 238 --base-typography-headline-xxs-bold-letter-spacing: var(--base-letter-spacing-ls-38); 239 240 /* Headline XXS/Medium */ 241 --base-typography-headline-xxs-medium-font-family: var(--base-font-family-display); 242 --base-typography-headline-xxs-medium-font-size: var(--base-font-size-12); 243 --base-typography-headline-xxs-medium-line-height: var(--base-line-height-12); 244 --base-typography-headline-xxs-medium-font-weight: var(--base-font-weight-medium); 245 --base-typography-headline-xxs-medium-letter-spacing: var(--base-letter-spacing-ls-33); 246 247 /* Headline XXS/Regular */ 248 --base-typography-headline-xxs-regular-font-family: var(--base-font-family-display); 249 --base-typography-headline-xxs-regular-font-size: var(--base-font-size-12); 250 --base-typography-headline-xxs-regular-line-height: var(--base-line-height-12); 251 --base-typography-headline-xxs-regular-font-weight: var(--base-font-weight-regular); 252 --base-typography-headline-xxs-regular-letter-spacing: var(--base-letter-spacing-ls-28); 253 254 /* mono typography ramp â same scale as standard, UberMoveMono font, zero letter-spacing */ 255 256 /* Mono Body L/Medium */ 257 --base-typography-mono-body-l-medium-font-family: var(--base-font-family-mono); 258 --base-typography-mono-body-l-medium-font-size: var(--base-font-size-16); 259 --base-typography-mono-body-l-medium-line-height: var(--base-line-height-16); 260 --base-typography-mono-body-l-medium-font-weight: var(--base-font-weight-medium); 261 --base-typography-mono-body-l-medium-letter-spacing: 0; 262 263 /* Mono Body L/Regular */ 264 --base-typography-mono-body-l-regular-font-family: var(--base-font-family-mono); 265 --base-typography-mono-body-l-regular-font-size: var(--base-font-size-16); 266 --base-typography-mono-body-l-regular-line-height: var(--base-line-height-16); 267 --base-typography-mono-body-l-regular-font-weight: var(--base-font-weight-regular); 268 --base-typography-mono-body-l-regular-letter-spacing: 0; 269 270 /* Mono Body M/Medium */ 271 --base-typography-mono-body-m-medium-font-family: var(--base-font-family-mono); 272 --base-typography-mono-body-m-medium-font-size: var(--base-font-size-14); 273 --base-typography-mono-body-m-medium-line-height: var(--base-line-height-14); 274 --base-typography-mono-body-m-medium-font-weight: var(--base-font-weight-medium); 275 --base-typography-mono-body-m-medium-letter-spacing: 0; 276 277 /* Mono Body M/Regular */ 278 --base-typography-mono-body-m-regular-font-family: var(--base-font-family-mono); 279 --base-typography-mono-body-m-regular-font-size: var(--base-font-size-14); 280 --base-typography-mono-body-m-regular-line-height: var(--base-line-height-14); 281 --base-typography-mono-body-m-regular-font-weight: var(--base-font-weight-regular); 282 --base-typography-mono-body-m-regular-letter-spacing: 0; 283 284 /* Mono Body S/Medium */ 285 --base-typography-mono-body-s-medium-font-family: var(--base-font-family-mono); 286 --base-typography-mono-body-s-medium-font-size: var(--base-font-size-12); 287 --base-typography-mono-body-s-medium-line-height: var(--base-line-height-12); 288 --base-typography-mono-body-s-medium-font-weight: var(--base-font-weight-medium); 289 --base-typography-mono-body-s-medium-letter-spacing: 0; 290 291 /* Mono Body S/Regular */ 292 --base-typography-mono-body-s-regular-font-family: var(--base-font-family-mono); 293 --base-typography-mono-body-s-regular-font-size: var(--base-font-size-12); 294 --base-typography-mono-body-s-regular-line-height: var(--base-line-height-12); 295 --base-typography-mono-body-s-regular-font-weight: var(--base-font-weight-regular); 296 --base-typography-mono-body-s-regular-letter-spacing: 0; 297 298 /* Mono Headline L/Bold */ 299 --base-typography-mono-headline-l-bold-font-family: var(--base-font-family-mono); 300 --base-typography-mono-headline-l-bold-font-size: var(--base-font-size-20); 301 --base-typography-mono-headline-l-bold-line-height: var(--base-line-height-20); 302 --base-typography-mono-headline-l-bold-font-weight: var(--base-font-weight-bold); 303 --base-typography-mono-headline-l-bold-letter-spacing: 0; 304 305 /* Mono Headline L/Medium */ 306 --base-typography-mono-headline-l-medium-font-family: var(--base-font-family-mono); 307 --base-typography-mono-headline-l-medium-font-size: var(--base-font-size-20); 308 --base-typography-mono-headline-l-medium-line-height: var(--base-line-height-20);
309 --base-typography-mono-headline-l-medium-font-weight: var(--base-font-weight-medium); 310 --base-typography-mono-headline-l-medium-letter-spacing: 0; 311 312 /* Mono Headline L/Regular */ 313 --base-typography-mono-headline-l-regular-font-family: var(--base-font-family-mono); 314 --base-typography-mono-headline-l-regular-font-size: var(--base-font-size-20); 315 --base-typography-mono-headline-l-regular-line-height: var(--base-line-height-20); 316 --base-typography-mono-headline-l-regular-font-weight: var(--base-font-weight-regular); 317 --base-typography-mono-headline-l-regular-letter-spacing: 0; 318 319 /* Mono Headline M/Bold */ 320 --base-typography-mono-headline-m-bold-font-family: var(--base-font-family-mono); 321 --base-typography-mono-headline-m-bold-font-size: var(--base-font-size-18); 322 --base-typography-mono-headline-m-bold-line-height: var(--base-line-height-18); 323 --base-typography-mono-headline-m-bold-font-weight: var(--base-font-weight-bold); 324 --base-typography-mono-headline-m-bold-letter-spacing: 0; 325 326 /* Mono Headline M/Medium */ 327 --base-typography-mono-headline-m-medium-font-family: var(--base-font-family-mono); 328 --base-typography-mono-headline-m-medium-font-size: var(--base-font-size-18); 329 --base-typography-mono-headline-m-medium-line-height: var(--base-line-height-18); 330 --base-typography-mono-headline-m-medium-font-weight: var(--base-font-weight-medium); 331 --base-typography-mono-headline-m-medium-letter-spacing: 0; 332 333 /* Mono Headline M/Regular */ 334 --base-typography-mono-headline-m-regular-font-family: var(--base-font-family-mono); 335 --base-typography-mono-headline-m-regular-font-size: var(--base-font-size-18); 336 --base-typography-mono-headline-m-regular-line-height: var(--base-line-height-18); 337 --base-typography-mono-headline-m-regular-font-weight: var(--base-font-weight-regular); 338 --base-typography-mono-headline-m-regular-letter-spacing: 0; 339 340 /* Mono Headline S/Bold */ 341 --base-typography-mono-headline-s-bold-font-family: var(--base-font-family-mono); 342 --base-typography-mono-headline-s-bold-font-size: var(--base-font-size-16); 343 --base-typography-mono-headline-s-bold-line-height: var(--base-line-height-16); 344 --base-typography-mono-headline-s-bold-font-weight: var(--base-font-weight-bold); 345 --base-typography-mono-headline-s-bold-letter-spacing: 0; 346 347 /* Mono Headline S/Medium */ 348 --base-typography-mono-headline-s-medium-font-family: var(--base-font-family-mono); 349 --base-typography-mono-headline-s-medium-font-size: var(--base-font-size-16); 350 --base-typography-mono-headline-s-medium-line-height: var(--base-line-height-16); 351 --base-typography-mono-headline-s-medium-font-weight: var(--base-font-weight-medium); 352 --base-typography-mono-headline-s-medium-letter-spacing: 0; 353 354 /* Mono Headline S/Regular */ 355 --base-typography-mono-headline-s-regular-font-family: var(--base-font-family-mono); 356 --base-typography-mono-headline-s-regular-font-size: var(--base-font-size-16); 357 --base-typography-mono-headline-s-regular-line-height: var(--base-line-height-16); 358 --base-typography-mono-headline-s-regular-font-weight: var(--base-font-weight-regular); 359 --base-typography-mono-headline-s-regular-letter-spacing: 0; 360 361 /* Mono Headline XL/Bold */ 362 --base-typography-mono-headline-xl-bold-font-family: var(--base-font-family-mono); 363 --base-typography-mono-headline-xl-bold-font-size: var(--base-font-size-24); 364 --base-typography-mono-headline-xl-bold-line-height: var(--base-line-height-24); 365 --base-typography-mono-headline-xl-bold-font-weight: var(--base-font-weight-bold); 366 --base-typography-mono-headline-xl-bold-letter-spacing: 0; 367 368 /* Mono Headline XL/Medium */ 369 --base-typography-mono-headline-xl-medium-font-family: var(--base-font-family-mono); 370 --base-typography-mono-headline-xl-medium-font-size: var(--base-font-size-24); 371 --base-typography-mono-headline-xl-medium-line-height: var(--base-line-height-24); 372 --base-typography-mono-headline-xl-medium-font-weight: var(--base-font-weight-medium); 373 --base-typography-mono-headline-xl-medium-letter-spacing: 0; 374 375 /* Mono Headline XL/Regular */ 376 --base-typography-mono-headline-xl-regular-font-family: var(--base-font-family-mono); 377 --base-typography-mono-headline-xl-regular-font-size: var(--base-font-size-24); 378 --base-typography-mono-headline-xl-regular-line-height: var(--base-line-height-24);
379 --base-typography-mono-headline-xl-regular-font-weight: var(--base-font-weight-regular); 380 --base-typography-mono-headline-xl-regular-letter-spacing: 0; 381 382 /* Mono Headline XS/Bold */ 383 --base-typography-mono-headline-xs-bold-font-family: var(--base-font-family-mono); 384 --base-typography-mono-headline-xs-bold-font-size: var(--base-font-size-14); 385 --base-typography-mono-headline-xs-bold-line-height: var(--base-line-height-14); 386 --base-typography-mono-headline-xs-bold-font-weight: var(--base-font-weight-bold); 387 --base-typography-mono-headline-xs-bold-letter-spacing: 0; 388 389 /* Mono Headline XS/Medium */ 390 --base-typography-mono-headline-xs-medium-font-family: var(--base-font-family-mono); 391 --base-typography-mono-headline-xs-medium-font-size: var(--base-font-size-14); 392 --base-typography-mono-headline-xs-medium-line-height: var(--base-line-height-14); 393 --base-typography-mono-headline-xs-medium-font-weight: var(--base-font-weight-medium); 394 --base-typography-mono-headline-xs-medium-letter-spacing: 0; 395 396 /* Mono Headline XS/Regular */ 397 --base-typography-mono-headline-xs-regular-font-family: var(--base-font-family-mono); 398 --base-typography-mono-headline-xs-regular-font-size: var(--base-font-size-14); 399 --base-typography-mono-headline-xs-regular-line-height: var(--base-line-height-14); 400 --base-typography-mono-headline-xs-regular-font-weight: var(--base-font-weight-regular); 401 --base-typography-mono-headline-xs-regular-letter-spacing: 0; 402 403 /* Mono Headline XXL/Bold */ 404 --base-typography-mono-headline-xxl-bold-font-family: var(--base-font-family-mono); 405 --base-typography-mono-headline-xxl-bold-font-size: var(--base-font-size-28); 406 --base-typography-mono-headline-xxl-bold-line-height: var(--base-line-height-28); 407 --base-typography-mono-headline-xxl-bold-font-weight: var(--base-font-weight-bold); 408 --base-typography-mono-headline-xxl-bold-letter-spacing: 0; 409 410 /* Mono Headline XXL/Medium */ 411 --base-typography-mono-headline-xxl-medium-font-family: var(--base-font-family-mono); 412 --base-typography-mono-headline-xxl-medium-font-size: var(--base-font-size-28); 413 --base-typography-mono-headline-xxl-medium-line-height: var(--base-line-height-28); 414 --base-typography-mono-headline-xxl-medium-font-weight: var(--base-font-weight-medium); 415 --base-typography-mono-headline-xxl-medium-letter-spacing: 0; 416 417 /* Mono Headline XXL/Regular */ 418 --base-typography-mono-headline-xxl-regular-font-family: var(--base-font-family-mono); 419 --base-typography-mono-headline-xxl-regular-font-size: var(--base-font-size-28); 420 --base-typography-mono-headline-xxl-regular-line-height: var(--base-line-height-28); 421 --base-typography-mono-headline-xxl-regular-font-weight: var(--base-font-weight-regular); 422 --base-typography-mono-headline-xxl-regular-letter-spacing: 0; 423 424 /* Mono Headline XXS/Bold */ 425 --base-typography-mono-headline-xxs-bold-font-family: var(--base-font-family-mono); 426 --base-typography-mono-headline-xxs-bold-font-size: var(--base-font-size-12); 427 --base-typography-mono-headline-xxs-bold-line-height: var(--base-line-height-12); 428 --base-typography-mono-headline-xxs-bold-font-weight: var(--base-font-weight-bold); 429 --base-typography-mono-headline-xxs-bold-letter-spacing: 0; 430 431 /* Mono Headline XXS/Medium */ 432 --base-typography-mono-headline-xxs-medium-font-family: var(--base-font-family-mono); 433 --base-typography-mono-headline-xxs-medium-font-size: var(--base-font-size-12); 434 --base-typography-mono-headline-xxs-medium-line-height: var(--base-line-height-12); 435 --base-typography-mono-headline-xxs-medium-font-weight: var(--base-font-weight-medium); 436 --base-typography-mono-headline-xxs-medium-letter-spacing: 0; 437 438 /* Mono Headline XXS/Regular */ 439 --base-typography-mono-headline-xxs-regular-font-family: var(--base-font-family-mono); 440 --base-typography-mono-headline-xxs-regular-font-size: var(--base-font-size-12); 441 --base-typography-mono-headline-xxs-regular-line-height: var(--base-line-height-12); 442 --base-typography-mono-headline-xxs-regular-font-weight: var(--base-font-weight-regular); 443 --base-typography-mono-headline-xxs-regular-letter-spacing: 0; 444} 445 446/* Opt-in to iOS Accessibility "Larger Text" */ 447@supports (font: -apple-system-body) { 448 :root { 449 font: -apple-system-body; 450 } 451} 452 453/* 454 * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 455 * 456 * This file has been auto-generated. Any modifications 457 * you make will be overwritten when the file is regenerated. 458 * 459 * For more information or questions, please go to #design-eng 460 * 461 */ 462 463/* 464 * Base 2.0 Color Token Naming Convention 465 * ======================================= 466 * 467 * Canonical form: [family]-[role]-[context]-[hierarchy]-[variant]-[state] 468 * Components are omitted when implicit (neutral family, default context, etc.) 469 * 470 * Family: accent, error, warning, success, info (neutral is implicit) 471 * Role: background, content, border 472 * Context: inverse (default is implicit) 473 * Hierarchy: primary, secondary, tertiary 474 * Variant: bold, subtle, disabled, onbold, onsubtle, oninverse, 475 * statelayer, decorative, accessible 476 * State: hover, pressed 477 * 478 * Theming attributes (all composable, can be on same or ancestor element): 479 * data-base-version-color="2" â opt in to v2 color tokens 480 * data-theme="dark" â switch to dark mode (light is implicit) 481 * data-elevated="true" â dark-elevated surface (scoped under dark) 482 * data-product="<name>" â product branding overrides (ai, eats, etc.) 483 * 484 * All custom properties are namespaced with --base- to avoid collisions. 485 * 486 * Examples: 487 * --base-background-primary neutral bg, primary hierarchy 488 * --base-accent-content-primary accent family, content role, primary 489 * --base-error-border-accessible error family, border role, accessible variant 490 * --base-background-inverse-primary neutral bg, inverse context, primary 491 */ 492
493/* v2 primitives â always present, new names with no v1 conflict */ 494:root { 495 --base-amber-0: #000000; 496 --base-amber-15: #120800; 497 --base-amber-18: #1d1001; 498 --base-amber-23: #2a1800; 499 --base-amber-27: #372000; 500 --base-amber-31: #442a02; 501 --base-amber-35: #523303; 502 --base-amber-40: #603c02; 503 --base-amber-44: #6f4603; 504 --base-amber-48: #7f5001; 505 --base-amber-53: #8d5c0c; 506 --base-amber-57: #9e6605; 507 --base-amber-61: #af7212; 508 --base-amber-66: #c27e04; 509 --base-amber-70: #d18b07; 510 --base-amber-74: #df9906; 511 --base-amber-79: #eda803; 512 --base-amber-83: #f6b924; 513 --base-amber-87: #fec95d; 514 --base-amber-91: #feda94; 515 --base-amber-96: #fee9c0; 516 --base-amber-98: #fff5e3; 517 --base-amber-99: #fffcf7; 518 --base-amber-100: #ffffff; 519 --base-blue-0: #000000; 520 --base-blue-15: #000a1d; 521 --base-blue-18: #00112a; 522 --base-blue-23: #011c3d; 523 --base-blue-27: #02264f; 524 --base-blue-31: #003062; 525 --base-blue-35: #033a74; 526 --base-blue-40: #074688; 527 --base-blue-44: #08519c; 528 --base-blue-48: #0a5db3; 529 --base-blue-53: #0669c9; 530 --base-blue-57: #1175dd; 531 --base-blue-61: #1185e8; 532 --base-blue-66: #1195f2; 533 --base-blue-70: #33a3fc; 534 --base-blue-74: #59b0fd; 535 --base-blue-79: #79bdfc; 536 --base-blue-83: #93cafe; 537 --base-blue-87: #afd7fd; 538 --base-blue-91: #c8e4fe; 539 --base-blue-96: #dfeffe; 540 --base-blue-98: #f0f7ff; 541 --base-blue-99: #fbfdff; 542 --base-blue-100: #ffffff; 543 --base-gradient-blue-0: #01233f; 544 --base-gradient-blue-15: #012849; 545 --base-gradient-blue-18: #022d52; 546 --base-gradient-blue-23: #03325d; 547 --base-gradient-blue-27: #043768; 548 --base-gradient-blue-31: #043c74; 549 --base-gradient-blue-35: #054181; 550 --base-gradient-blue-40: #06458f; 551 --base-gradient-blue-44: #074a9e; 552 --base-gradient-blue-48: #094ead; 553 --base-gradient-blue-53: #044fc4; 554 --base-gradient-blue-57: #014fdd; 555 --base-gradient-blue-61: #0e4ff2; 556 --base-gradient-blue-66: #2355fa; 557 --base-gradient-blue-70: #355efb; 558 --base-gradient-blue-74: #4466fc; 559 --base-gradient-blue-79: #526efd; 560 --base-gradient-blue-83: #5e75fe; 561 --base-gradient-blue-87: #6c7efa; 562 --base-gradient-blue-91: #7785fc; 563 --base-gradient-blue-96: #828cfe; 564 --base-gradient-blue-98: #8e94fb; 565 --base-gradient-blue-99: #989bfe; 566 --base-gradient-blue-100: #a2a3fd; 567 --base-gradient-indigo-0: #0c088c; 568 --base-gradient-indigo-15: #140696; 569 --base-gradient-indigo-18: #1b02a1; 570 --base-gradient-indigo-23: #220ba5; 571 --base-gradient-indigo-27: #2905b0; 572 --base-gradient-indigo-31: #2f0fb5; 573 --base-gradient-indigo-35: #3608bf; 574 --base-gradient-indigo-40: #3d11c4; 575 --base-gradient-indigo-44: #4509cf; 576 --base-gradient-indigo-48: #4c13d4; 577 --base-gradient-indigo-53: #541bd8; 578 --base-gradient-indigo-57: #5c21dc; 579 --base-gradient-indigo-61: #6427e1; 580 --base-gradient-indigo-66: #6e2ce5; 581 --base-gradient-indigo-70: #7732e9; 582 --base-gradient-indigo-74: #8137ed; 583 --base-gradient-indigo-79: #8c3cf1; 584 --base-gradient-indigo-83: #9740f4; 585 --base-gradient-indigo-87: #a245f7; 586 --base-gradient-indigo-91: #ad4afa; 587 --base-gradient-indigo-96: #b84efc; 588 --base-gradient-indigo-98: #c453fe; 589 --base-gradient-indigo-99: #cc5dfb; 590 --base-gradient-indigo-100: #d761fd; 591 --base-gradient-red-0: #46021a; 592 --base-gradient-red-15: #53031f; 593 --base-gradient-red-18: #600424; 594 --base-gradient-red-23: #6e0428; 595 --base-gradient-red-27: #7d012d; 596 --base-gradient-red-31: #8a0831; 597 --base-gradient-red-35: #9a0134; 598 --base-gradient-red-40: #a80737; 599 --base-gradient-red-44: #b70e37; 600 --base-gradient-red-48: #c61432; 601 --base-gradient-red-53: #d90220; 602 --base-gradient-red-57: #e32112; 603 --base-gradient-red-61: #e83c13; 604 --base-gradient-red-66: #ed4f17; 605 --base-gradient-red-70: #f65b07; 606 --base-gradient-red-74: #fa6b16; 607 --base-gradient-red-79: #fd7924; 608 --base-gradient-red-83: #fd893d; 609 --base-gradient-red-87: #fe9752; 610 --base-gradient-red-91: #fca569; 611 --base-gradient-red-96: #ffb179; 612 --base-gradient-red-98: #ffbd8c; 613 --base-gradient-red-99: #fecaa0; 614 --base-gradient-red-100: #ffd5b2; 615 --base-green-0: #000000; 616 --base-green-15: #000f01; 617 --base-green-18: #001702; 618 --base-green-23: #012406; 619 --base-green-27: #01300c; 620 --base-green-31: #013c14; 621 --base-green-35: #00491c; 622 --base-green-40: #095627; 623 --base-green-44: #05632f; 624 --base-green-48: #10723a; 625 --base-green-53: #098042; 626 --base-green-57: #17904e; 627 --base-green-61: #11a156; 628 --base-green-66: #1db061; 629 --base-green-70: #06c167; 630 --base-green-74: #32ce73;
631 --base-green-79: #55d981; 632 --base-green-83: #75e190; 633 --base-green-87: #94e9a2; 634 --base-green-91: #b3f3b7; 635 --base-green-96: #ccfbcb; 636 --base-green-98: #e6ffe3; 637 --base-green-99: #f8fff7; 638 --base-green-100: #ffffff; 639 --base-indigo-0: #000000; 640 --base-indigo-15: #0a0421; 641 --base-indigo-18: #11082f; 642 --base-indigo-23: #1c1044; 643 --base-indigo-27: #261858; 644 --base-indigo-31: #301f6b; 645 --base-indigo-35: #3b277f; 646 --base-indigo-40: #462f97; 647 --base-indigo-44: #5137ac; 648 --base-indigo-48: #5d44bd; 649 --base-indigo-53: #6852cb; 650 --base-indigo-57: #745fda; 651 --base-indigo-61: #7f6ce8; 652 --base-indigo-66: #8b79f7; 653 --base-indigo-70: #988afc; 654 --base-indigo-74: #a59bfd; 655 --base-indigo-79: #b2acfc; 656 --base-indigo-83: #bfbbfe; 657 --base-indigo-87: #ceccfd; 658 --base-indigo-91: #dddcfe; 659 --base-indigo-96: #ebeafe; 660 --base-indigo-98: #f6f5ff; 661 --base-indigo-99: #fcfcff; 662 --base-indigo-100: #ffffff; 663 --base-lime-0: #000000; 664 --base-lime-15: #040e00; 665 --base-lime-18: #081601; 666 --base-lime-23: #102201; 667 --base-lime-27: #182e02; 668 --base-lime-31: #203900; 669 --base-lime-35: #294502; 670 --base-lime-40: #335203; 671 --base-lime-44: #3d5e00; 672 --base-lime-48: #496b0a; 673 --base-lime-53: #547803; 674 --base-lime-57: #60850b; 675 --base-lime-61: #6b9313; 676 --base-lime-66: #77a019; 677 --base-lime-70: #84b008; 678 --base-lime-74: #91c012; 679 --base-lime-79: #9dcf18; 680 --base-lime-83: #aadd32; 681 --base-lime-87: #b9ea53; 682 --base-lime-91: #ccf484; 683 --base-lime-96: #defbb0; 684 --base-lime-98: #ecffd1; 685 --base-lime-99: #fafff2; 686 --base-lime-100: #ffffff; 687 --base-magenta-0: #000000; 688 --base-magenta-15: #1b000c; 689 --base-magenta-18: #270114; 690 --base-magenta-23: #38021f; 691 --base-magenta-27: #4b012b; 692 --base-magenta-31: #5b0336; 693 --base-magenta-35: #6e0141; 694 --base-magenta-40: #81044e; 695 --base-magenta-44: #940359; 696 --base-magenta-48: #a90267; 697 --base-magenta-53: #ba1073; 698 --base-magenta-57: #c9277f; 699 --base-magenta-61: #d8388c; 700 --base-magenta-66: #e84899; 701 --base-magenta-70: #f757a6; 702 --base-magenta-74: #fc74b3; 703 --base-magenta-79: #fd8dbe; 704 --base-magenta-83: #fda5ca; 705 --base-magenta-87: #febcd6; 706 --base-magenta-91: #fed2e3; 707 --base-magenta-96: #fee4ee; 708 --base-magenta-98: #fff3f7; 709 --base-magenta-99: #fffbfd; 710 --base-magenta-100: #ffffff; 711 --base-membership-0: #000000; 712 --base-membership-15: #100803; 713 --base-membership-18: #1e0f00; 714 --base-membership-23: #2b1701; 715 --base-membership-27: #382001; 716 --base-membership-31: #452902; 717 --base-membership-35: #533204; 718 --base-membership-40: #623c02; 719 --base-membership-44: #704502; 720 --base-membership-48: #7e500b; 721 --base-membership-53: #8e5a09; 722 --base-membership-57: #9f6402; 723 --base-membership-61: #ad711d; 724 --base-membership-66: #bc7f2f; 725 --base-membership-70: #cc8e40; 726 --base-membership-74: #dc9d50; 727 --base-membership-79: #ebab5e; 728 --base-membership-83: #f9b96c; 729 --base-membership-87: #feca87; 730 --base-membership-91: #fedba9; 731 --base-membership-96: #feeac8; 732 --base-membership-98: #fff5e1; 733 --base-membership-99: #fffcf6; 734 --base-membership-100: #ffffff; 735 --base-neutral-0: #000000; 736 --base-neutral-15: #0a0a0a; 737 --base-neutral-18: #111111; 738 --base-neutral-23: #1c1c1c; 739 --base-neutral-27: #272727; 740 --base-neutral-31: #313131; 741 --base-neutral-35: #3b3b3b; 742 --base-neutral-40: #474747; 743 --base-neutral-44: #525252; 744 --base-neutral-48: #5f5f5f; 745 --base-neutral-53: #6b6b6b; 746 --base-neutral-57: #777777; 747 --base-neutral-61: #838383; 748 --base-neutral-66: #909090; 749 --base-neutral-70: #9d9d9d; 750 --base-neutral-74: #aaaaaa; 751 --base-neutral-79: #b7b7b7; 752 --base-neutral-83: #c4c4c4; 753 --base-neutral-87: #d2d2d2; 754 --base-neutral-91: #e0e0e0; 755 --base-neutral-96: #ececec; 756 --base-neutral-98: #f6f6f6; 757 --base-neutral-99: #fcfcfc; 758 --base-neutral-100: #ffffff; 759 --base-orange-0: #000000; 760 --base-orange-15: #180400; 761 --base-orange-18: #260800; 762 --base-orange-23: #340f00; 763 --base-orange-27: #421701; 764 --base-orange-31: #502002; 765 --base-orange-35: #602800; 766 --base-orange-40: #6e3202; 767 --base-orange-44: #7c3c08; 768 --base-orange-48: #8d4603; 769 --base-orange-53: #9c5109; 770 --base-orange-57: #ac5c10; 771 --base-orange-61: #c16808; 772 --base-orange-66: #d47614; 773 --base-orange-70: #ec8102; 774 --base-orange-74: #fc9026; 775 --base-orange-79: #fea65d; 776 --base-orange-83: #ffb984; 777 --base-orange-87: #fecaa4; 778 --base-orange-91: #fed9be; 779 --base-orange-96: #ffe8d6; 780 --base-orange-98: #fff4ec; 781 --base-orange-99: #fffcf9; 782 --base-orange-100: #ffffff; 783 --base-purple-0: #000000; 784 --base-purple-15: #120022; 785 --base-purple-18: #1b0031; 786 --base-purple-23: #290245; 787 --base-purple-27: #370459; 788 --base-purple-31: #45026f; 789 --base-purple-35: #520782; 790 --base-purple-40: #63009c; 791 --base-purple-44: #7010ae; 792 --base-purple-48: #8112c7; 793 --base-purple-53: #8e29d5; 794 --base-purple-57: #9b3ae3; 795 --base-purple-61: #a84af2; 796 --base-purple-66: #b45dfb; 797 --base-purple-70: #bc76fb; 798 --base-purple-74: #c58afc; 799 --base-purple-79: #cd9ffc; 800 --base-purple-83: #d7b1fd; 801 --base-purple-87: #e0c4fd; 802 --base-purple-91: #ead7fe; 803 --base-purple-96: #f2e7fe; 804 --base-purple-98: #f9f4ff; 805 --base-purple-99: #fdfcff; 806 --base-purple-100: #ffffff; 807 --base-red-0: #000000; 808 --base-red-15: #1b0100; 809 --base-red-18: #280200; 810 --base-red-23: #3a0501; 811 --base-red-27: #4e0600; 812 --base-red-31: #5e0c02; 813 --base-red-35: #720d00; 814 --base-red-40: #851402; 815 --base-red-44: #9b1b06; 816 --base-red-48: #b4230b; 817 --base-red-53: #cc2609;
818 --base-red-57: #e42500; 819 --base-red-61: #f3381b; 820 --base-red-66: #fc4f34; 821 --base-red-70: #fc6a52; 822 --base-red-74: #fd8069; 823 --base-red-79: #fe9783; 824 --base-red-83: #feac9c; 825 --base-red-87: #fec1b5; 826 --base-red-91: #fed5cd; 827 --base-red-96: #fee6e1; 828 --base-red-98: #fff4f1; 829 --base-red-99: #fffcfb; 830 --base-red-100: #ffffff; 831 --base-taupe-0: #000000; 832 --base-taupe-15: #0d0905; 833 --base-taupe-18: #15110b; 834 --base-taupe-23: #211b14; 835 --base-taupe-27: #2c261e; 836 --base-taupe-31: #363027; 837 --base-taupe-35: #413a32; 838 --base-taupe-40: #4d463d; 839 --base-taupe-44: #585148; 840 --base-taupe-48: #655e54; 841 --base-taupe-53: #716a60; 842 --base-taupe-57: #7d766c; 843 --base-taupe-61: #8a8278; 844 --base-taupe-66: #978f85; 845 --base-taupe-70: #a49c92; 846 --base-taupe-74: #b2aaa0; 847 --base-taupe-79: #c0b8ae; 848 --base-taupe-83: #cec5bb; 849 --base-taupe-87: #dbd3c8; 850 --base-taupe-91: #e9e0d7; 851 --base-taupe-96: #f3ece4; 852 --base-taupe-98: #fbf6ef; 853 --base-taupe-99: #fffcf9; 854 --base-taupe-100: #ffffff; 855 --base-teal-0: #000000; 856 --base-teal-15: #000d11; 857 --base-teal-18: #00151a; 858 --base-teal-23: #012127; 859 --base-teal-27: #012d33; 860 --base-teal-31: #03383e; 861 --base-teal-35: #00444b; 862 --base-teal-40: #035157; 863 --base-teal-44: #025e63; 864 --base-teal-48: #016c71; 865 --base-teal-53: #0f7a7e; 866 --base-teal-57: #06888c; 867 --base-teal-61: #13959a; 868 --base-teal-66: #1ca3a8; 869 --base-teal-70: #06b2b8; 870 --base-teal-74: #2ac0c5; 871 --base-teal-79: #3fced3; 872 --base-teal-83: #54dbe0; 873 --base-teal-87: #7ae6ea; 874 --base-teal-91: #a5f0f2; 875 --base-teal-96: #c9f7f8; 876 --base-teal-98: #e3fdfd; 877 --base-teal-99: #f6ffff; 878 --base-teal-100: #ffffff; 879 --base-yellow-0: #000000; 880 --base-yellow-15: #0f0900; 881 --base-yellow-18: #1a1200; 882 --base-yellow-23: #251b00; 883 --base-yellow-27: #302502; 884 --base-yellow-31: #3c2e01; 885 --base-yellow-35: #483902; 886 --base-yellow-40: #554301; 887 --base-yellow-44: #614e01; 888 --base-yellow-48: #6e5a0b; 889 --base-yellow-53: #7b6609; 890 --base-yellow-57: #897202; 891 --base-yellow-61: #977f0f; 892 --base-yellow-66: #a78d02; 893 --base-yellow-70: #b79b10; 894 --base-yellow-74: #c6aa1a; 895 --base-yellow-79: #d4b71f; 896 --base-yellow-83: #e3c522; 897 --base-yellow-87: #f1d223; 898 --base-yellow-91: #ffde21; 899 --base-yellow-96: #feeb90; 900 --base-yellow-98: #fff5c6; 901 --base-yellow-99: #fffced; 902 --base-yellow-100: #ffffff; 903} 904 905/* v2 colored material backgrounds (Herocon) â theme-independent gradients */ 906[data-base-version-color="2"] { 907 --base-red-background-material-bold: linear-gradient( 908 to top left, 909 #f43b00 0%, 910 #e42500 100% 911 ); 912 --base-red-background-material-bold-stop-0: #f43b00; 913 --base-red-background-material-bold-stop-100: #e42500; 914 --base-orange-background-material-bold: linear-gradient( 915 to top left, 916 #fc993c 0%, 917 #fb762e 100% 918 ); 919 --base-orange-background-material-bold-stop-0: #fc993c; 920 --base-orange-background-material-bold-stop-100: #fb762e; 921 --base-yellow-background-material-bold: linear-gradient( 922 to top left, 923 #f7e431 0%, 924 #f1d223 100% 925 ); 926 --base-yellow-background-material-bold-stop-0: #f7e431; 927 --base-yellow-background-material-bold-stop-100: #f1d223; 928 --base-green-background-material-bold: linear-gradient( 929 to top left, 930 #0ca555 0%, 931 #098042 100% 932 ); 933 --base-green-background-material-bold-stop-0: #0ca555; 934 --base-green-background-material-bold-stop-100: #098042; 935 --base-blue-background-material-bold: linear-gradient( 936 to top left, 937 #1697e7 0%, 938 #1175dd 100% 939 ); 940 --base-blue-background-material-bold-stop-0: #1697e7; 941 --base-blue-background-material-bold-stop-100: #1175dd; 942 --base-crimson-background-material-bold: linear-gradient( 943 to top left, 944 #e0336c 0%, 945 #d32753 100% 946 ); 947 --base-crimson-background-material-bold-stop-0: #e0336c; 948 --base-crimson-background-material-bold-stop-100: #d32753; 949} 950 951/* v2 light semantics */ 952:root[data-base-version-color="2"], 953[data-base-version-color="2"] { 954 --base-background-base: var(--base-neutral-99); 955 --base-background-primary: var(--base-neutral-100); 956 --base-background-secondary: var(--base-neutral-98); 957 --base-background-tertiary: var(--base-neutral-96); 958 --base-background-disabled: rgba(224, 224, 224, 0.6); 959 --base-background-always-dark: var(--base-neutral-0); 960 --base-background-always-light: var(--base-neutral-100); 961 --base-background-track: rgba(107, 107, 107, 0.06); 962 --base-error-background-bold: var(--base-red-53); 963 --base-error-background-subtle: var(--base-red-96); 964 --base-error-background-disabled: rgba(254, 230, 225, 0.75); 965 --base-error-background-statelayer-hover: rgba(254, 230, 225, 0.25); 966 --base-error-background-statelayer-pressed: rgba(254, 230, 225, 0.5);
967 --base-warning-background-bold: var(--base-orange-74); 968 --base-warning-background-subtle: var(--base-orange-96); 969 --base-warning-background-disabled: rgba(255, 232, 214, 0.75); 970 --base-success-background-bold: var(--base-green-53); 971 --base-success-background-subtle: var(--base-green-98); 972 --base-success-background-disabled: rgba(204, 251, 203, 0.75); 973 --base-info-background-bold: var(--base-neutral-18); 974 --base-info-background-subtle: var(--base-neutral-96); 975 --base-info-background-disabled: rgba(224, 224, 224, 0.75); 976 --base-accent-background-primary-bold: var(--base-blue-57); 977 --base-accent-background-primary-subtle: var(--base-blue-98); 978 --base-accent-background-primary-disabled: rgba(223, 239, 254, 0.75); 979 --base-background-inverse-primary: var(--base-neutral-18); 980 --base-background-inverse-secondary: var(--base-neutral-27); 981 --base-background-inverse-statelayer-hover: rgba(236, 236, 236, 0.15); 982 --base-background-inverse-statelayer-pressed: rgba(236, 236, 236, 0.2); 983 --base-background-material-primary: rgba(255, 255, 255, 0.82); 984 --base-background-material-secondary: rgba(255, 255, 255, 0.96); 985 --base-background-material-tertiary: rgba(252, 252, 252, 0.98); 986 --base-background-overlay-art: rgba(255, 255, 255, 0); 987 --base-background-statelayer-hover: rgba(17, 17, 17, 0.06); 988 --base-background-statelayer-pressed: rgba(17, 17, 17, 0.1); 989 --base-content-primary: var(--base-neutral-18); 990 --base-content-secondary: var(--base-neutral-44); 991 --base-content-tertiary: var(--base-neutral-53); 992 --base-content-disabled: var(--base-neutral-83); 993 --base-content-always-dark: var(--base-neutral-18); 994 --base-content-always-light: var(--base-neutral-96); 995 --base-error-content-primary: var(--base-red-53); 996 --base-error-content-onbold: var(--base-red-99); 997 --base-error-content-onsubtle: var(--base-red-48); 998 --base-error-content-disabled: var(--base-red-79); 999 --base-error-content-oninverse: var(--base-red-83); 1000 --base-warning-content-primary: var(--base-orange-53); 1001 --base-warning-content-onbold: var(--base-orange-15); 1002 --base-warning-content-onsubtle: var(--base-orange-48); 1003 --base-warning-content-disabled: var(--base-orange-79); 1004 --base-warning-content-oninverse: var(--base-orange-83); 1005 --base-success-content-primary: var(--base-green-48); 1006 --base-success-content-onbold: var(--base-green-99); 1007 --base-success-content-onsubtle: var(--base-green-40); 1008 --base-success-content-disabled: var(--base-green-79); 1009 --base-success-content-oninverse: var(--base-green-83); 1010 --base-info-content-primary: var(--base-neutral-53); 1011 --base-info-content-onbold: var(--base-neutral-96); 1012 --base-info-content-onsubtle: var(--base-neutral-40); 1013 --base-info-content-disabled: var(--base-neutral-79); 1014 --base-info-content-oninverse: var(--base-neutral-83); 1015 --base-accent-content-primary: var(--base-blue-53); 1016 --base-accent-content-primary-onbold: var(--base-blue-100); 1017 --base-accent-content-primary-onsubtle: var(--base-blue-40); 1018 --base-accent-content-primary-disabled: var(--base-blue-79); 1019 --base-content-inverse-primary: var(--base-neutral-99); 1020 --base-content-inverse-secondary: var(--base-neutral-87); 1021 --base-content-inverse-tertiary: var(--base-neutral-74); 1022 --base-content-legal: var(--base-blue-53); 1023 --base-accent-content-ongradient: var(--base-neutral-100); 1024 --base-border-accessible: var(--base-neutral-61); 1025 --base-border-bold: var(--base-neutral-18); 1026 --base-border-subtle: rgba(196, 196, 196, 0.65); 1027 --base-accent-border-primary-bold: var(--base-blue-57); 1028 --base-accent-border-primary-subtle: rgba(175, 215, 253, 0.7); 1029 --base-accent-border-primary-accessible: var(--base-blue-57); 1030 --base-error-border-bold: var(--base-red-57); 1031 --base-error-border-subtle: rgba(254, 172, 156, 0.7); 1032 --base-error-border-accessible: var(--base-red-61); 1033 --base-warning-border-bold: var(--base-orange-74); 1034 --base-warning-border-subtle: rgba(255, 185, 132, 0.7); 1035 --base-warning-border-accessible: var(--base-orange-61); 1036 --base-success-border-bold: var(--base-green-70); 1037 --base-success-border-subtle: rgba(117, 225, 144, 0.7); 1038 --base-success-border-accessible: var(--base-green-57); 1039 --base-info-border-bold: var(--base-neutral-18); 1040 --base-info-border-subtle: rgba(196, 196, 196, 0.7); 1041 --base-info-border-accessible: var(--base-neutral-61); 1042 --base-content-green-material-onbold: var(--base-neutral-100); 1043 --base-border-inverse-bold: var(--base-neutral-96); 1044 --base-content-red-material-onbold: var(--base-neutral-100); 1045 --base-border-inverse-subtle: rgba(71, 71, 71, 0.7); 1046 --base-content-orange-material-onbold: var(--base-neutral-0); 1047 --base-border-inverse-accessible: var(--base-neutral-57); 1048 --base-border-material-primary: rgba(255, 255, 255, 0.4); 1049 --base-content-yellow-material-onbold: var(--base-neutral-0); 1050 --base-border-material-secondary: var(--base-neutral-100); 1051 --base-content-blue-material-onbold: var(--base-neutral-100); 1052 --base-border-material-tertiary: var(--base-neutral-100); 1053 --base-accent-gradient-stop-1: var(--base-gradient-blue-35); 1054 --base-content-crimson-material-onbold: var(--base-neutral-100); 1055 --base-accent-gradient-stop-2: var(--base-gradient-blue-48); 1056 --base-accent-gradient-stop-3: var(--base-gradient-blue-66); 1057 --base-gradient-scrim-stop-1: rgba(17, 17, 17, 0.06); 1058 --base-gradient-scrim-stop-2: rgba(17, 17, 17, 0.16); 1059 --base-gradient-scrim-stop-3: rgba(0, 0, 0, 0.54); 1060 --base-background-scrim: linear-gradient( 1061 180deg, 1062 var(--base-gradient-scrim-stop-1) 0%, 1063 var(--base-gradient-scrim-stop-2) 30%, 1064 var(--base-gradient-scrim-stop-3) 65% 1065 ); 1066 color-scheme: light; 1067} 1068 1069/* offers overrides (light) */ 1070:root[data-base-version-color="2"] [data-product="offers"], 1071:root[data-base-version-color="2"][data-product="offers"], 1072[data-base-version-color="2"] [data-product="offers"], 1073[data-base-version-color="2"][data-product="offers"] { 1074 --base-accent-background-primary-bold: var(--base-red-57); 1075 --base-accent-content-primary-onsubtle: var(--base-red-40); 1076 --base-accent-background-primary-subtle: var(--base-red-91); 1077 --base-accent-background-primary-disabled: rgba(254, 230, 225, 0.75); 1078 --base-accent-content-primary: var(--base-red-57); 1079 --base-accent-gradient-stop-3: var(--base-red-66); 1080 --base-accent-content-primary-disabled: var(--base-red-79); 1081 --base-accent-gradient-stop-2: var(--base-red-48); 1082 --base-accent-gradient-stop-1: var(--base-red-35); 1083 --base-accent-border-primary-subtle: rgba(254, 172, 156, 0.7); 1084 --base-accent-border-primary-accessible: var(--base-red-57); 1085 --base-accent-content-primary-onbold: var(--base-red-100); 1086 --base-accent-border-primary-bold: var(--base-red-57); 1087} 1088 1089/* membership overrides (light) */ 1090:root[data-base-version-color="2"] [data-product="membership"], 1091:root[data-base-version-color="2"][data-product="membership"], 1092[data-base-version-color="2"] [data-product="membership"], 1093[data-base-version-color="2"][data-product="membership"] { 1094 --base-accent-border-primary-bold: var(--base-membership-57); 1095 --base-accent-background-primary-bold: var(--base-membership-57); 1096 --base-accent-content-primary-onbold: var(--base-neutral-100); 1097 --base-accent-background-primary-disabled: rgba(254, 234, 200, 0.75); 1098 --base-accent-content-primary: var(--base-membership-57); 1099 --base-accent-gradient-stop-3: var(--base-membership-48); 1100 --base-accent-content-primary-disabled: var(--base-membership-79); 1101 --base-accent-background-primary-subtle: var(--base-membership-98); 1102 --base-accent-content-primary-onsubtle: var(--base-membership-57); 1103 --base-accent-gradient-stop-2: var(--base-membership-57); 1104 --base-accent-gradient-stop-1: var(--base-membership-61); 1105 --base-accent-border-primary-subtle: rgba(254, 202, 135, 0.87); 1106 --base-accent-border-primary-accessible: var(--base-membership-57); 1107} 1108 1109/* ai overrides (light) */ 1110:root[data-base-version-color="2"] [data-product="ai"], 1111:root[data-base-version-color="2"][data-product="ai"], 1112[data-base-version-color="2"] [data-product="ai"], 1113[data-base-version-color="2"][data-product="ai"] { 1114 --base-accent-border-primary-subtle: rgba(191, 187, 254, 0.7); 1115 --base-accent-content-primary-onsubtle: var(--base-indigo-40); 1116 --base-accent-background-primary-subtle: var(--base-indigo-96); 1117 --base-accent-content-primary: var(--base-indigo-48); 1118 --base-accent-background-primary-disabled: rgba(235, 234, 254, 0.75); 1119 --base-accent-content-primary-onbold: var(--base-indigo-100); 1120 --base-accent-border-primary-bold: var(--base-indigo-57); 1121 --base-accent-border-primary-accessible: var(--base-indigo-53); 1122 --base-accent-content-primary-disabled: var(--base-indigo-74); 1123 --base-accent-gradient-stop-3: var(--base-indigo-66); 1124 --base-accent-background-primary-bold: var(--base-indigo-53); 1125 --base-accent-gradient-stop-1: var(--base-indigo-35); 1126 --base-accent-gradient-stop-2: var(--base-indigo-48); 1127} 1128 1129/* eats overrides (light) */ 1130:root[data-base-version-color="2"] [data-product="eats"], 1131:root[data-base-version-color="2"][data-product="eats"], 1132[data-base-version-color="2"] [data-product="eats"], 1133[data-base-version-color="2"][data-product="eats"] { 1134 --base-accent-border-primary-subtle: rgba(117, 225, 144, 0.7); 1135 --base-accent-background-primary-subtle: var(--base-green-98); 1136 --base-accent-content-primary-onsubtle: var(--base-green-40); 1137 --base-accent-gradient-stop-1: var(--base-green-35); 1138 --base-accent-gradient-stop-2: var(--base-green-48); 1139 --base-accent-background-primary-bold: var(--base-green-53); 1140 --base-accent-content-primary-onbold: var(--base-green-100); 1141 --base-accent-border-primary-bold: var(--base-green-57); 1142 --base-accent-border-primary-accessible: var(--base-green-53); 1143 --base-accent-content-primary-disabled: var(--base-green-74); 1144 --base-accent-gradient-stop-3: var(--base-green-66); 1145 --base-accent-background-primary-disabled: var(--base-green-98); 1146 --base-accent-content-primary: var(--base-green-48); 1147} 1148 1149/* v2 dark semantics */ 1150[data-base-version-color="2"][data-theme="dark"], 1151[data-theme="dark"] [data-base-version-color="2"] { 1152 --base-background-base: var(--base-neutral-18); 1153 --base-background-primary: var(--base-neutral-23); 1154 --base-background-secondary: var(--base-neutral-27); 1155 --base-background-tertiary: var(--base-neutral-35); 1156 --base-background-disabled: rgba(71, 71, 71, 0.6); 1157 --base-background-always-dark: var(--base-neutral-27); 1158 --base-background-always-light: var(--base-neutral-91); 1159 --base-background-track: rgba(95, 95, 95, 0.2); 1160 --base-error-background-bold: var(--base-red-53); 1161 --base-error-background-subtle: var(--base-red-23); 1162 --base-error-background-disabled: rgba(78, 6, 0, 0.75); 1163 --base-error-background-statelayer-hover: rgba(58, 5, 1, 0.2); 1164 --base-error-background-statelayer-pressed: rgba(58, 5, 1, 0.35);
1165 --base-warning-background-bold: var(--base-orange-70); 1166 --base-warning-background-subtle: var(--base-orange-27); 1167 --base-warning-background-disabled: rgba(80, 32, 2, 0.8); 1168 --base-success-background-bold: var(--base-green-66); 1169 --base-success-background-subtle: var(--base-green-27); 1170 --base-success-background-disabled: rgba(1, 60, 20, 0.75); 1171 --base-info-background-bold: var(--base-neutral-91); 1172 --base-info-background-subtle: var(--base-neutral-35); 1173 --base-info-background-disabled: rgba(71, 71, 71, 0.75); 1174 --base-accent-background-primary-bold: var(--base-blue-66); 1175 --base-accent-background-primary-subtle: var(--base-blue-23); 1176 --base-accent-background-primary-disabled: rgba(2, 38, 79, 0.75); 1177 --base-background-inverse-primary: var(--base-neutral-91); 1178 --base-background-inverse-secondary: var(--base-neutral-87); 1179 --base-background-inverse-statelayer-hover: rgba(17, 17, 17, 0.15); 1180 --base-background-inverse-statelayer-pressed: rgba(17, 17, 17, 0.2); 1181 --base-background-material-primary: rgba(39, 39, 39, 0.9); 1182 --base-background-material-secondary: rgba(39, 39, 39, 0.96); 1183 --base-background-material-tertiary: rgba(39, 39, 39, 0.98); 1184 --base-background-overlay-art: rgba(0, 0, 0, 0.16); 1185 --base-background-statelayer-hover: rgba(236, 236, 236, 0.1); 1186 --base-background-statelayer-pressed: rgba(236, 236, 236, 0.15); 1187 --base-content-primary: var(--base-neutral-96); 1188 --base-content-secondary: var(--base-neutral-87); 1189 --base-content-tertiary: var(--base-neutral-74); 1190 --base-content-disabled: var(--base-neutral-44); 1191 --base-content-always-dark: var(--base-neutral-18); 1192 --base-content-always-light: var(--base-neutral-96); 1193 --base-error-content-primary: var(--base-red-79); 1194 --base-error-content-onbold: var(--base-red-99); 1195 --base-error-content-onsubtle: var(--base-red-87); 1196 --base-error-content-disabled: var(--base-red-44); 1197 --base-error-content-oninverse: var(--base-red-35); 1198 --base-warning-content-primary: var(--base-orange-74); 1199 --base-warning-content-onbold: var(--base-orange-15); 1200 --base-warning-content-onsubtle: var(--base-orange-91); 1201 --base-warning-content-disabled: var(--base-orange-53); 1202 --base-warning-content-oninverse: var(--base-orange-35); 1203 --base-success-content-primary: var(--base-green-74); 1204 --base-success-content-onbold: var(--base-green-15); 1205 --base-success-content-onsubtle: var(--base-green-91); 1206 --base-success-content-disabled: var(--base-green-48); 1207 --base-success-content-oninverse: var(--base-green-35); 1208 --base-info-content-primary: var(--base-neutral-74); 1209 --base-info-content-onbold: var(--base-neutral-18); 1210 --base-info-content-onsubtle: var(--base-neutral-91); 1211 --base-info-content-disabled: var(--base-neutral-53); 1212 --base-info-content-oninverse: var(--base-neutral-35); 1213 --base-accent-content-primary: var(--base-blue-74); 1214 --base-accent-content-primary-onbold: var(--base-blue-0); 1215 --base-accent-content-primary-onsubtle: var(--base-blue-91); 1216 --base-accent-content-primary-disabled: var(--base-blue-48); 1217 --base-content-inverse-primary: var(--base-neutral-18); 1218 --base-content-inverse-secondary: var(--base-neutral-27); 1219 --base-content-inverse-tertiary: var(--base-neutral-40); 1220 --base-content-legal: var(--base-blue-74); 1221 --base-accent-content-ongradient: var(--base-neutral-100); 1222 --base-border-accessible: var(--base-neutral-66); 1223 --base-border-bold: var(--base-neutral-96); 1224 --base-border-subtle: rgba(107, 107, 107, 0.65); 1225 --base-accent-border-primary-bold: var(--base-blue-74); 1226 --base-accent-border-primary-subtle: rgba(17, 117, 221, 0.3); 1227 --base-accent-border-primary-accessible: var(--base-blue-74); 1228 --base-error-border-bold: var(--base-red-70); 1229 --base-error-border-subtle: rgba(243, 56, 27, 0.3); 1230 --base-error-border-accessible: var(--base-red-66); 1231 --base-warning-border-bold: var(--base-orange-74); 1232 --base-warning-border-subtle: rgba(172, 92, 16, 0.3); 1233 --base-warning-border-accessible: var(--base-orange-66); 1234 --base-success-border-bold: var(--base-green-70); 1235 --base-success-border-subtle: rgba(23, 144, 78, 0.3); 1236 --base-success-border-accessible: var(--base-green-66); 1237 --base-info-border-bold: var(--base-neutral-96); 1238 --base-info-border-subtle: rgba(119, 119, 119, 0.7); 1239 --base-info-border-accessible: var(--base-neutral-66); 1240 --base-content-green-material-onbold: var(--base-neutral-100); 1241 --base-border-inverse-bold: var(--base-neutral-18); 1242 --base-content-red-material-onbold: var(--base-neutral-100); 1243 --base-border-inverse-subtle: rgba(224, 224, 224, 0.7); 1244 --base-content-orange-material-onbold: var(--base-neutral-0); 1245 --base-border-inverse-accessible: var(--base-neutral-53); 1246 --base-border-material-primary: rgba(236, 236, 236, 0); 1247 --base-content-yellow-material-onbold: var(--base-neutral-0); 1248 --base-border-material-secondary: rgba(255, 255, 255, 0); 1249 --base-content-blue-material-onbold: var(--base-neutral-100); 1250 --base-border-material-tertiary: rgba(236, 236, 236, 0); 1251 --base-accent-gradient-stop-1: var(--base-gradient-blue-35); 1252 --base-content-crimson-material-onbold: var(--base-neutral-100); 1253 --base-accent-gradient-stop-2: var(--base-gradient-blue-48); 1254 --base-accent-gradient-stop-3: var(--base-gradient-blue-66); 1255 --base-gradient-scrim-stop-1: rgba(17, 17, 17, 0.72); 1256 --base-gradient-scrim-stop-2: rgba(10, 10, 10, 0.54); 1257 --base-gradient-scrim-stop-3: rgba(10, 10, 10, 0.54); 1258 --base-background-scrim: linear-gradient( 1259 180deg, 1260 var(--base-gradient-scrim-stop-1) 0%, 1261 var(--base-gradient-scrim-stop-2) 30%, 1262 var(--base-gradient-scrim-stop-3) 100% 1263 ); 1264 color-scheme: dark; 1265} 1266
1267/* offers overrides (dark) */ 1268[data-base-version-color="2"][data-theme="dark"] [data-product="offers"], 1269[data-base-version-color="2"][data-theme="dark"][data-product="offers"], 1270[data-theme="dark"] [data-base-version-color="2"] [data-product="offers"], 1271[data-theme="dark"] [data-base-version-color="2"][data-product="offers"] { 1272 --base-accent-background-primary-bold: var(--base-red-57); 1273 --base-accent-content-primary-onsubtle: var(--base-red-91); 1274 --base-accent-background-primary-subtle: var(--base-red-40); 1275 --base-accent-background-primary-disabled: rgba(78, 6, 0, 0.75); 1276 --base-accent-content-primary: var(--base-red-79); 1277 --base-accent-gradient-stop-3: var(--base-red-66); 1278 --base-accent-content-primary-disabled: var(--base-red-44); 1279 --base-accent-gradient-stop-2: var(--base-red-48); 1280 --base-accent-gradient-stop-1: var(--base-red-35); 1281 --base-accent-border-primary-subtle: rgba(228, 37, 0, 0.7); 1282 --base-accent-border-primary-accessible: var(--base-red-79); 1283 --base-accent-content-primary-onbold: var(--base-red-100); 1284 --base-accent-border-primary-bold: var(--base-red-74); 1285} 1286 1287/* membership overrides (dark) */ 1288[data-base-version-color="2"][data-theme="dark"] [data-product="membership"], 1289[data-base-version-color="2"][data-theme="dark"][data-product="membership"], 1290[data-theme="dark"] [data-base-version-color="2"] [data-product="membership"], 1291[data-theme="dark"] [data-base-version-color="2"][data-product="membership"] { 1292 --base-accent-border-primary-bold: var(--base-membership-74); 1293 --base-accent-background-primary-bold: var(--base-membership-74); 1294 --base-accent-content-primary-onbold: var(--base-neutral-0); 1295 --base-accent-background-primary-disabled: rgba(56, 32, 1, 0.75); 1296 --base-accent-content-primary: var(--base-membership-74); 1297 --base-accent-gradient-stop-3: var(--base-membership-48); 1298 --base-accent-content-primary-disabled: var(--base-membership-40); 1299 --base-accent-background-primary-subtle: var(--base-membership-31); 1300 --base-accent-content-primary-onsubtle: var(--base-membership-74); 1301 --base-accent-gradient-stop-2: var(--base-membership-57); 1302 --base-accent-gradient-stop-1: var(--base-membership-61); 1303 --base-accent-border-primary-subtle: rgba(159, 100, 2, 0.3); 1304 --base-accent-border-primary-accessible: var(--base-membership-74); 1305} 1306 1307/* ai overrides (dark) */ 1308[data-base-version-color="2"][data-theme="dark"] [data-product="ai"], 1309[data-base-version-color="2"][data-theme="dark"][data-product="ai"], 1310[data-theme="dark"] [data-base-version-color="2"] [data-product="ai"], 1311[data-theme="dark"] [data-base-version-color="2"][data-product="ai"] { 1312 --base-accent-border-primary-subtle: rgba(116, 95, 218, 0.7); 1313 --base-accent-content-primary-onsubtle: var(--base-indigo-91); 1314 --base-accent-background-primary-subtle: var(--base-indigo-31); 1315 --base-accent-content-primary: var(--base-indigo-74); 1316 --base-accent-background-primary-disabled: rgba(70, 47, 151, 0.75); 1317 --base-accent-content-primary-onbold: var(--base-indigo-0); 1318 --base-accent-border-primary-bold: var(--base-indigo-57); 1319 --base-accent-border-primary-accessible: var(--base-indigo-74); 1320 --base-accent-content-primary-disabled: var(--base-indigo-57); 1321 --base-accent-gradient-stop-3: var(--base-indigo-66); 1322 --base-accent-background-primary-bold: var(--base-indigo-74); 1323 --base-accent-gradient-stop-1: var(--base-indigo-35); 1324 --base-accent-gradient-stop-2: var(--base-indigo-48); 1325} 1326 1327/* eats overrides (dark) */ 1328[data-base-version-color="2"][data-theme="dark"] [data-product="eats"], 1329[data-base-version-color="2"][data-theme="dark"][data-product="eats"], 1330[data-theme="dark"] [data-base-version-color="2"] [data-product="eats"], 1331[data-theme="dark"] [data-base-version-color="2"][data-product="eats"] { 1332 --base-accent-border-primary-subtle: rgba(23, 144, 78, 0.7); 1333 --base-accent-background-primary-subtle: var(--base-green-31); 1334 --base-accent-content-primary-onsubtle: var(--base-green-91); 1335 --base-accent-gradient-stop-1: var(--base-green-35); 1336 --base-accent-gradient-stop-2: var(--base-green-48); 1337 --base-accent-background-primary-bold: var(--base-green-70); 1338 --base-accent-content-primary-onbold: var(--base-green-0); 1339 --base-accent-border-primary-bold: var(--base-green-74); 1340 --base-accent-border-primary-accessible: var(--base-green-74); 1341 --base-accent-content-primary-disabled: var(--base-green-57); 1342 --base-accent-gradient-stop-3: var(--base-green-66); 1343 --base-accent-background-primary-disabled: var(--base-green-35); 1344 --base-accent-content-primary: var(--base-green-74); 1345} 1346 1347/* v2 dark elevated semantics */ 1348[data-base-version-color="2"][data-theme="dark"] [data-elevated="true"], 1349[data-base-version-color="2"][data-theme="dark"][data-elevated="true"], 1350[data-theme="dark"] [data-base-version-color="2"] [data-elevated="true"], 1351[data-theme="dark"] [data-base-version-color="2"][data-elevated="true"] { 1352 --base-background-base: var(--base-neutral-27); 1353 --base-background-primary: var(--base-neutral-31); 1354 --base-background-secondary: var(--base-neutral-35); 1355 --base-background-tertiary: var(--base-neutral-44); 1356 --base-background-disabled: rgba(95, 95, 95, 0.6); 1357 --base-background-always-dark: var(--base-neutral-35); 1358 --base-background-always-light: var(--base-neutral-98); 1359 --base-background-track: rgba(95, 95, 95, 0.2); 1360 --base-error-background-bold: var(--base-red-57); 1361 --base-error-background-subtle: var(--base-red-27); 1362 --base-error-background-disabled: rgba(114, 13, 0, 0.75); 1363 --base-error-background-statelayer-hover: rgba(58, 5, 1, 0.2); 1364 --base-error-background-statelayer-pressed: rgba(58, 5, 1, 0.35);
1365 --base-warning-background-bold: var(--base-orange-79); 1366 --base-warning-background-subtle: var(--base-orange-35); 1367 --base-warning-background-disabled: rgba(110, 50, 2, 0.8); 1368 --base-success-background-bold: var(--base-green-74); 1369 --base-success-background-subtle: var(--base-green-35); 1370 --base-success-background-disabled: rgba(9, 86, 39, 0.75); 1371 --base-info-background-bold: var(--base-neutral-98); 1372 --base-info-background-subtle: var(--base-neutral-44); 1373 --base-info-background-disabled: rgba(95, 95, 95, 0.75); 1374 --base-accent-background-primary-bold: var(--base-blue-74); 1375 --base-accent-background-primary-subtle: var(--base-blue-31); 1376 --base-accent-background-primary-disabled: rgba(3, 58, 116, 0.75); 1377 --base-background-inverse-primary: var(--base-neutral-98); 1378 --base-background-inverse-secondary: var(--base-neutral-96); 1379 --base-background-inverse-statelayer-hover: rgba(17, 17, 17, 0.15); 1380 --base-background-inverse-statelayer-pressed: rgba(17, 17, 17, 0.2); 1381 --base-background-material-primary: rgba(39, 39, 39, 0.9); 1382 --base-background-material-secondary: rgba(39, 39, 39, 0.96); 1383 --base-background-material-tertiary: rgba(39, 39, 39, 0.98); 1384 --base-background-overlay-art: rgba(0, 0, 0, 0.16); 1385 --base-background-statelayer-hover: rgba(236, 236, 236, 0.1); 1386 --base-background-statelayer-pressed: rgba(236, 236, 236, 0.15); 1387 --base-content-primary: var(--base-neutral-99); 1388 --base-content-secondary: var(--base-neutral-96); 1389 --base-content-tertiary: var(--base-neutral-83); 1390 --base-content-disabled: var(--base-neutral-53); 1391 --base-content-always-dark: var(--base-neutral-27); 1392 --base-content-always-light: var(--base-neutral-99); 1393 --base-error-content-primary: var(--base-red-87); 1394 --base-error-content-onbold: var(--base-red-99); 1395 --base-error-content-onsubtle: var(--base-red-96); 1396 --base-error-content-disabled: var(--base-red-53); 1397 --base-error-content-oninverse: var(--base-red-44); 1398 --base-warning-content-primary: var(--base-orange-83); 1399 --base-warning-content-onbold: var(--base-orange-23); 1400 --base-warning-content-onsubtle: var(--base-orange-98); 1401 --base-warning-content-disabled: var(--base-orange-61); 1402 --base-warning-content-oninverse: var(--base-orange-44); 1403 --base-success-content-primary: var(--base-green-83); 1404 --base-success-content-onbold: var(--base-green-23); 1405 --base-success-content-onsubtle: var(--base-green-98); 1406 --base-success-content-disabled: var(--base-green-57); 1407 --base-success-content-oninverse: var(--base-green-44); 1408 --base-info-content-primary: var(--base-neutral-83); 1409 --base-info-content-onbold: var(--base-neutral-27); 1410 --base-info-content-onsubtle: var(--base-neutral-98); 1411 --base-info-content-disabled: var(--base-neutral-61); 1412 --base-info-content-oninverse: var(--base-neutral-44); 1413 --base-accent-content-primary: var(--base-blue-83); 1414 --base-accent-content-primary-onbold: var(--base-blue-18); 1415 --base-accent-content-primary-onsubtle: var(--base-blue-98); 1416 --base-accent-content-primary-disabled: var(--base-blue-57); 1417 --base-content-inverse-primary: var(--base-neutral-27); 1418 --base-content-inverse-secondary: var(--base-neutral-35); 1419 --base-content-inverse-tertiary: var(--base-neutral-48); 1420 --base-content-legal: var(--base-blue-83); 1421 --base-accent-content-ongradient: var(--base-neutral-100); 1422 --base-border-accessible: var(--base-neutral-74); 1423 --base-border-bold: var(--base-neutral-99); 1424 --base-border-subtle: rgba(131, 131, 131, 0.65); 1425 --base-accent-border-primary-bold: var(--base-blue-83); 1426 --base-accent-border-primary-subtle: rgba(51, 163, 252, 0.3); 1427 --base-accent-border-primary-accessible: var(--base-blue-83); 1428 --base-error-border-bold: var(--base-red-79); 1429 --base-error-border-subtle: rgba(252, 79, 52, 0.3); 1430 --base-error-border-accessible: var(--base-red-74); 1431 --base-warning-border-bold: var(--base-orange-83); 1432 --base-warning-border-subtle: rgba(212, 118, 20, 0.3); 1433 --base-warning-border-accessible: var(--base-orange-74); 1434 --base-success-border-bold: var(--base-green-79); 1435 --base-success-border-subtle: rgba(29, 176, 97, 0.3); 1436 --base-success-border-accessible: var(--base-green-74); 1437 --base-info-border-bold: var(--base-neutral-99); 1438 --base-info-border-subtle: rgba(144, 144, 144, 0.7); 1439 --base-info-border-accessible: var(--base-neutral-74); 1440 --base-content-green-material-onbold: var(--base-neutral-100); 1441 --base-border-inverse-bold: var(--base-neutral-27); 1442 --base-content-red-material-onbold: var(--base-neutral-100); 1443 --base-border-inverse-subtle: rgba(252, 252, 252, 0.7); 1444 --base-content-orange-material-onbold: var(--base-neutral-0); 1445 --base-border-inverse-accessible: var(--base-neutral-61); 1446 --base-border-material-primary: rgba(236, 236, 236, 0); 1447 --base-content-yellow-material-onbold: var(--base-neutral-0); 1448 --base-border-material-secondary: rgba(255, 255, 255, 0); 1449 --base-content-blue-material-onbold: var(--base-neutral-100); 1450 --base-border-material-tertiary: rgba(236, 236, 236, 0); 1451 --base-accent-gradient-stop-1: var(--base-gradient-blue-35); 1452 --base-content-crimson-material-onbold: var(--base-neutral-100); 1453 --base-accent-gradient-stop-2: var(--base-gradient-blue-48); 1454 --base-accent-gradient-stop-3: var(--base-gradient-blue-66); 1455 --base-gradient-scrim-stop-1: rgba(17, 17, 17, 0.72); 1456 --base-gradient-scrim-stop-2: rgba(10, 10, 10, 0.54); 1457 --base-gradient-scrim-stop-3: rgba(10, 10, 10, 0.54); 1458 --base-background-scrim: linear-gradient( 1459 180deg, 1460 var(--base-gradient-scrim-stop-1) 0%, 1461 var(--base-gradient-scrim-stop-2) 30%, 1462 var(--base-gradient-scrim-stop-3) 100% 1463 ); 1464} 1465 1466/* 1467 * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 1468 * 1469 * This file has been auto-generated. Any modifications 1470 * you make will be overwritten when the file is regenerated. 1471 * 1472 * For more information or questions, please go to #design-eng 1473 * 1474 */ 1475 1476/* 1477 * Base 2.0 Elevation Tokens 1478 * ========================= 1479 * 1480 * Each elevation level is shipped as 10 individual design tokens â the 1481 * cross-product of: 1482 * 1483 * Hierarchy: lowest, low, mid, high, highest 1484 * Layer: key, ambient 1485 * Property: x, y, blur, spread, color 1486 * 1487 * Naming: --base-elevation-{hierarchy}-{layer}-{property} 1488 * 1489 * Consumers compose the final `box-shadow` value at the component level, 1490 * with key painted on top of ambient per the elevation spec: 1491 * 1492 * box-shadow: 1493 * var(--base-elevation-mid-key-x) var(--base-elevation-mid-key-y) 1494 * var(--base-elevation-mid-key-blur) var(--base-elevation-mid-key-spread) 1495 * var(--base-elevation-mid-key-color), 1496 * var(--base-elevation-mid-ambient-x) var(--base-elevation-mid-ambient-y) 1497 * var(--base-elevation-mid-ambient-blur) var(--base-elevation-mid-ambient-spread) 1498 * var(--base-elevation-mid-ambient-color); 1499 */ 1500 1501/* v2 light elevation */ 1502[data-base-version-color="2"] { 1503 --base-elevation-lowest-key-x: 0; 1504 --base-elevation-lowest-key-y: 0; 1505 --base-elevation-lowest-key-blur: 2px; 1506 --base-elevation-lowest-key-spread: 0; 1507 --base-elevation-lowest-key-color: rgba(0, 0, 0, 0.05); 1508 --base-elevation-lowest-ambient-x: 0; 1509 --base-elevation-lowest-ambient-y: 0.5px; 1510 --base-elevation-lowest-ambient-blur: 10px; 1511 --base-elevation-lowest-ambient-spread: -1px; 1512 --base-elevation-lowest-ambient-color: rgba(107, 107, 107, 0.17); 1513 --base-elevation-low-key-x: 0; 1514 --base-elevation-low-key-y: 0.25px; 1515 --base-elevation-low-key-blur: 3.5px; 1516 --base-elevation-low-key-spread: 0; 1517 --base-elevation-low-key-color: rgba(0, 0, 0, 0.07); 1518 --base-elevation-low-ambient-x: 0; 1519 --base-elevation-low-ambient-y: 0.75px; 1520 --base-elevation-low-ambient-blur: 16px; 1521 --base-elevation-low-ambient-spread: -2px; 1522 --base-elevation-low-ambient-color: rgba(107, 107, 107, 0.2); 1523 --base-elevation-mid-key-x: 0; 1524 --base-elevation-mid-key-y: 0.75px; 1525 --base-elevation-mid-key-blur: 6px; 1526 --base-elevation-mid-key-spread: 0; 1527 --base-elevation-mid-key-color: rgba(0, 0, 0, 0.07); 1528 --base-elevation-mid-ambient-x: 0; 1529 --base-elevation-mid-ambient-y: 1.5px; 1530 --base-elevation-mid-ambient-blur: 28px; 1531 --base-elevation-mid-ambient-spread: -3px; 1532 --base-elevation-mid-ambient-color: rgba(107, 107, 107, 0.24); 1533 --base-elevation-high-key-x: 0; 1534 --base-elevation-high-key-y: 1.25px; 1535 --base-elevation-high-key-blur: 10px; 1536 --base-elevation-high-key-spread: 0; 1537 --base-elevation-high-key-color: rgba(0, 0, 0, 0.07); 1538 --base-elevation-high-ambient-x: 0; 1539 --base-elevation-high-ambient-y: 2.25px; 1540 --base-elevation-high-ambient-blur: 40px; 1541 --base-elevation-high-ambient-spread: -6px; 1542 --base-elevation-high-ambient-color: rgba(107, 107, 107, 0.32); 1543 --base-elevation-highest-key-x: 0; 1544 --base-elevation-highest-key-y: 1.75px; 1545 --base-elevation-highest-key-blur: 16px; 1546 --base-elevation-highest-key-spread: 0; 1547 --base-elevation-highest-key-color: rgba(0, 0, 0, 0.07); 1548 --base-elevation-highest-ambient-x: 0; 1549 --base-elevation-highest-ambient-y: 2.75px; 1550 --base-elevation-highest-ambient-blur: 42px; 1551 --base-elevation-highest-ambient-spread: -7px; 1552 --base-elevation-highest-ambient-color: rgba(107, 107, 107, 0.37); 1553} 1554/* v2 dark elevation */ 1555[data-base-version-color="2"][data-theme="dark"], 1556[data-theme="dark"] [data-base-version-color="2"] { 1557 --base-elevation-lowest-key-x: 0; 1558 --base-elevation-lowest-key-y: -0.5px; 1559 --base-elevation-lowest-key-blur: 1px; 1560 --base-elevation-lowest-key-spread: 0; 1561 --base-elevation-lowest-key-color: rgba(224, 224, 224, 0.1); 1562 --base-elevation-lowest-ambient-x: 0; 1563 --base-elevation-lowest-ambient-y: 2px; 1564 --base-elevation-lowest-ambient-blur: 8px; 1565 --base-elevation-lowest-ambient-spread: -1px; 1566 --base-elevation-lowest-ambient-color: rgba(10, 10, 10, 0.48); 1567 --base-elevation-low-key-x: 0; 1568 --base-elevation-low-key-y: -0.5px; 1569 --base-elevation-low-key-blur: 1.5px; 1570 --base-elevation-low-key-spread: 0; 1571 --base-elevation-low-key-color: rgba(224, 224, 224, 0.12); 1572 --base-elevation-low-ambient-x: 0; 1573 --base-elevation-low-ambient-y: 4px; 1574 --base-elevation-low-ambient-blur: 12px; 1575 --base-elevation-low-ambient-spread: -2px; 1576 --base-elevation-low-ambient-color: rgba(10, 10, 10, 0.56); 1577 --base-elevation-mid-key-x: 0; 1578 --base-elevation-mid-key-y: -1px; 1579 --base-elevation-mid-key-blur: 2px; 1580 --base-elevation-mid-key-spread: 0; 1581 --base-elevation-mid-key-color: rgba(224, 224, 224, 0.16); 1582 --base-elevation-mid-ambient-x: 0; 1583 --base-elevation-mid-ambient-y: 6px; 1584 --base-elevation-mid-ambient-blur: 18px; 1585 --base-elevation-mid-ambient-spread: -3px; 1586 --base-elevation-mid-ambient-color: rgba(10, 10, 10, 0.64); 1587 --base-elevation-high-key-x: 0; 1588 --base-elevation-high-key-y: -1px; 1589 --base-elevation-high-key-blur: 2px; 1590 --base-elevation-high-key-spread: 0; 1591 --base-elevation-high-key-color: rgba(224, 224, 224, 0.18); 1592 --base-elevation-high-ambient-x: 0; 1593 --base-elevation-high-ambient-y: 8px; 1594 --base-elevation-high-ambient-blur: 28px; 1595 --base-elevation-high-ambient-spread: -4px; 1596 --base-elevation-high-ambient-color: rgba(10, 10, 10, 0.72); 1597 --base-elevation-highest-key-x: 0; 1598 --base-elevation-highest-key-y: -1.5px; 1599 --base-elevation-highest-key-blur: 3px; 1600 --base-elevation-highest-key-spread: 0; 1601 --base-elevation-highest-key-color: rgba(224, 224, 224, 0.2); 1602 --base-elevation-highest-ambient-x: 0; 1603 --base-elevation-highest-ambient-y: 8px; 1604 --base-elevation-highest-ambient-blur: 32px; 1605 --base-elevation-highest-ambient-spread: -6px; 1606 --base-elevation-highest-ambient-color: rgba(10, 10, 10, 0.8); 1607} 1608 1609/* v2 dark elevated elevation */ 1610[data-base-version-color="2"][data-theme="dark"] [data-elevated="true"], 1611[data-base-version-color="2"][data-theme="dark"][data-elevated="true"], 1612[data-theme="dark"] [data-base-version-color="2"] [data-elevated="true"], 1613[data-theme="dark"] [data-base-version-color="2"][data-elevated="true"] { 1614 --base-elevation-lowest-key-x: 0; 1615 --base-elevation-lowest-key-y: -0.5px; 1616 --base-elevation-lowest-key-blur: 1px; 1617 --base-elevation-lowest-key-spread: 0; 1618 --base-elevation-lowest-key-color: rgba(224, 224, 224, 0.1); 1619 --base-elevation-lowest-ambient-x: 0; 1620 --base-elevation-lowest-ambient-y: 2px; 1621 --base-elevation-lowest-ambient-blur: 8px; 1622 --base-elevation-lowest-ambient-spread: -1px; 1623 --base-elevation-lowest-ambient-color: rgba(10, 10, 10, 0.48); 1624 --base-elevation-low-key-x: 0; 1625 --base-elevation-low-key-y: -0.5px; 1626 --base-elevation-low-key-blur: 1.5px; 1627 --base-elevation-low-key-spread: 0; 1628 --base-elevation-low-key-color: rgba(224, 224, 224, 0.12); 1629 --base-elevation-low-ambient-x: 0; 1630 --base-elevation-low-ambient-y: 4px; 1631 --base-elevation-low-ambient-blur: 12px; 1632 --base-elevation-low-ambient-spread: -2px; 1633 --base-elevation-low-ambient-color: rgba(10, 10, 10, 0.56); 1634 --base-elevation-mid-key-x: 0; 1635 --base-elevation-mid-key-y: -1px; 1636 --base-elevation-mid-key-blur: 2px; 1637 --base-elevation-mid-key-spread: 0; 1638 --base-elevation-mid-key-color: rgba(224, 224, 224, 0.16); 1639 --base-elevation-mid-ambient-x: 0; 1640 --base-elevation-mid-ambient-y: 6px; 1641 --base-elevation-mid-ambient-blur: 18px; 1642 --base-elevation-mid-ambient-spread: -3px; 1643 --base-elevation-mid-ambient-color: rgba(10, 10, 10, 0.64); 1644 --base-elevation-high-key-x: 0; 1645 --base-elevation-high-key-y: -1px; 1646 --base-elevation-high-key-blur: 2px; 1647 --base-elevation-high-key-spread: 0; 1648 --base-elevation-high-key-color: rgba(224, 224, 224, 0.18); 1649 --base-elevation-high-ambient-x: 0; 1650 --base-elevation-high-ambient-y: 8px; 1651 --base-elevation-high-ambient-blur: 28px; 1652 --base-elevation-high-ambient-spread: -4px; 1653 --base-elevation-high-ambient-color: rgba(10, 10, 10, 0.72); 1654 --base-elevation-highest-key-x: 0; 1655 --base-elevation-highest-key-y: -1.5px; 1656 --base-elevation-highest-key-blur: 3px; 1657 --base-elevation-highest-key-spread: 0; 1658 --base-elevation-highest-key-color: rgba(224, 224, 224, 0.2); 1659 --base-elevation-highest-ambient-x: 0; 1660 --base-elevation-highest-ambient-y: 8px; 1661 --base-elevation-highest-ambient-blur: 32px; 1662 --base-elevation-highest-ambient-spread: -6px; 1663 --base-elevation-highest-ambient-color: rgba(10, 10, 10, 0.8); 1664} 1665 1666/* 1667 * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 1668 * 1669 * This file has been auto-generated. Any modifications 1670 * you make will be overwritten when the file is regenerated. 1671 * 1672 * For more information or questions, please go to #design-eng 1673 * 1674 */ 1675 1676/* 1677 * Base 2.0 Corner Radius Tokens 1678 * ============================= 1679 * 1680 * A single primitive ramp shared across the design system. Corner radius has 1681 * no light/dark modes, so these are emitted as flat :root custom properties. 1682 * 1683 * Naming: --base-corner-{step} (e.g. --base-corner-radius-6) 1684 * 1685 * radius-full is 1000px â the Figma source uses this large value to fake full 1686 * roundness; it is preserved verbatim as the source-of-truth value. 1687 */ 1688 1689:root { 1690 --base-corner-radius-6: 6px; 1691 --base-corner-radius-8: 8px; 1692 --base-corner-radius-12: 12px; 1693 --base-corner-radius-16: 16px; 1694 --base-corner-radius-24: 24px; 1695 --base-corner-radius-32: 32px; 1696 --base-corner-radius-full: 1000px; 1697} 1698 1699 1700
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.