/* Copyright 2024 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/*
* This file is roughly a static copy of
* chrome://theme/colors.css?sets=ref,sys&generate_rgb_vars=true with
* color values extracted from the cros-component web catalog.
*
* This is only used in dev server.
*
* TODO(pihsun): Find a way to generate this file with the given seed color,
* but more similar to chrome://theme/colors.css.
*/
/*
* The --cros-ref-* color tokens are extracted from go/cros-jellybean-demo.
*
* (Select a <stories-renderer> and copy-paste the section that contains all
* --cros-ref-* CSS variables.)
*
* TODO(pihsun): Find if there's some way we can get the colors in CLI. These
* colors seems to be generated by TypeScript at runtime.
*/
:root {
--cros-ref-primary0: #000;
--cros-ref-primary0-rgb: 0, 0, 0;
--cros-ref-primary8: #001344;
--cros-ref-primary8-rgb: 0, 19, 68;
--cros-ref-primary10: #00174c;
--cros-ref-primary10-rgb: 0, 23, 76;
--cros-ref-primary12: #001a55;
--cros-ref-primary12-rgb: 0, 26, 85;
--cros-ref-primary15: #002063;
--cros-ref-primary15-rgb: 0, 32, 99;
--cros-ref-primary20: #022978;
--cros-ref-primary20-rgb: 2, 41, 120;
--cros-ref-primary30: #254290;
--cros-ref-primary30-rgb: 37, 66, 144;
--cros-ref-primary40: #3f5aa9;
--cros-ref-primary40-rgb: 63, 90, 169;
--cros-ref-primary50: #5973c4;
--cros-ref-primary50-rgb: 89, 115, 196;
--cros-ref-primary60: #738de0;
--cros-ref-primary60-rgb: 115, 141, 224;
--cros-ref-primary70: #8ea8fd;
--cros-ref-primary70-rgb: 142, 168, 253;
--cros-ref-primary80: #b5c4ff;
--cros-ref-primary80-rgb: 181, 196, 255;
--cros-ref-primary90: #dbe1ff;
--cros-ref-primary90-rgb: 219, 225, 255;
--cros-ref-primary95: #eff0ff;
--cros-ref-primary95-rgb: 239, 240, 255;
--cros-ref-primary99: #fefbff;
--cros-ref-primary99-rgb: 254, 251, 255;
--cros-ref-primary100: #fff;
--cros-ref-primary100-rgb: 255, 255, 255;
--cros-ref-secondary0: #000;
--cros-ref-secondary0-rgb: 0, 0, 0;
--cros-ref-secondary8: #121728;
--cros-ref-secondary8-rgb: 18, 23, 40;
--cros-ref-secondary10: #161b2c;
--cros-ref-secondary10-rgb: 22, 27, 44;
--cros-ref-secondary12: #1a1f30;
--cros-ref-secondary12-rgb: 26, 31, 48;
--cros-ref-secondary15: #202537;
--cros-ref-secondary15-rgb: 32, 37, 55;
--cros-ref-secondary20: #2b3042;
--cros-ref-secondary20-rgb: 43, 48, 66;
--cros-ref-secondary30: #414659;
--cros-ref-secondary30-rgb: 65, 70, 89;
--cros-ref-secondary40: #595e72;
--cros-ref-secondary40-rgb: 89, 94, 114;
--cros-ref-secondary50: #72768b;
--cros-ref-secondary50-rgb: 114, 118, 139;
--cros-ref-secondary60: #8b90a5;
--cros-ref-secondary60-rgb: 139, 144, 165;
--cros-ref-secondary70: #a6aac1;
--cros-ref-secondary70-rgb: 166, 170, 193;
--cros-ref-secondary80: #c1c5dd;
--cros-ref-secondary80-rgb: 193, 197, 221;
--cros-ref-secondary90: #dde1f9;
--cros-ref-secondary90-rgb: 221, 225, 249;
--cros-ref-secondary95: #eff0ff;
--cros-ref-secondary95-rgb: 239, 240, 255;
--cros-ref-secondary99: #fefbff;
--cros-ref-secondary99-rgb: 254, 251, 255;
--cros-ref-secondary100: #fff;
--cros-ref-secondary100-rgb: 255, 255, 255;
--cros-ref-tertiary0: #000;
--cros-ref-tertiary0-rgb: 0, 0, 0;
--cros-ref-tertiary8: #270e26;
--cros-ref-tertiary8-rgb: 39, 14, 38;
--cros-ref-tertiary10: #2b122a;
--cros-ref-tertiary10-rgb: 43, 18, 42;
--cros-ref-tertiary12: #30162f;
--cros-ref-tertiary12-rgb: 48, 22, 47;
--cros-ref-tertiary15: #371c35;
--cros-ref-tertiary15-rgb: 55, 28, 53;
--cros-ref-tertiary20: #422740;
--cros-ref-tertiary20-rgb: 66, 39, 64;
--cros-ref-tertiary30: #5b3d58;
--cros-ref-tertiary30-rgb: 91, 61, 88;
--cros-ref-tertiary40: #745470;
--cros-ref-tertiary40-rgb: 116, 84, 112;
--cros-ref-tertiary50: #8e6c8a;
--cros-ref-tertiary50-rgb: 142, 108, 138;
--cros-ref-tertiary60: #aa86a4;
--cros-ref-tertiary60-rgb: 170, 134, 164;
--cros-ref-tertiary70: #c6a0bf;
--cros-ref-tertiary70-rgb: 198, 160, 191;
--cros-ref-tertiary80: #e2bbdb;
--cros-ref-tertiary80-rgb: 226, 187, 219;
--cros-ref-tertiary90: #ffd6f7;
--cros-ref-tertiary90-rgb: 255, 214, 247;
--cros-ref-tertiary95: #ffebf8;
--cros-ref-tertiary95-rgb: 255, 235, 248;
--cros-ref-tertiary99: #fffbff;
--cros-ref-tertiary99-rgb: 255, 251, 255;
--cros-ref-tertiary100: #fff;
--cros-ref-tertiary100-rgb: 255, 255, 255;
--cros-ref-neutral0: #000;
--cros-ref-neutral0-rgb: 0, 0, 0;
--cros-ref-neutral8: #17171b;
--cros-ref-neutral8-rgb: 23, 23, 27;
--cros-ref-neutral10: #1b1b1f;
--cros-ref-neutral10-rgb: 27, 27, 31;
--cros-ref-neutral12: #1f1f23;
--cros-ref-neutral12-rgb: 31, 31, 35;
--cros-ref-neutral15: #252529;
--cros-ref-neutral15-rgb: 37, 37, 41;
--cros-ref-neutral20: #303034;
--cros-ref-neutral20-rgb: 48, 48, 52;
--cros-ref-neutral30: #46464a;
--cros-ref-neutral30-rgb: 70, 70, 74;
--cros-ref-neutral40: #5e5e62;
--cros-ref-neutral40-rgb: 94, 94, 98;
--cros-ref-neutral50: #77767a;
--cros-ref-neutral50-rgb: 119, 118, 122;
--cros-ref-neutral60: #919094;
--cros-ref-neutral60-rgb: 145, 144, 148;
--cros-ref-neutral70: #acaaaf;
--cros-ref-neutral70-rgb: 172, 170, 175;
--cros-ref-neutral80: #c7c6ca;
--cros-ref-neutral80-rgb: 199, 198, 202;
--cros-ref-neutral90: #e4e2e6;
--cros-ref-neutral90-rgb: 228, 226, 230;
--cros-ref-neutral95: #f2f0f4;
--cros-ref-neutral95-rgb: 242, 240, 244;
--cros-ref-neutral99: #fefbff;
--cros-ref-neutral99-rgb: 254, 251, 255;
--cros-ref-neutral100: #fff;
--cros-ref-neutral100-rgb: 255, 255, 255;
--cros-ref-neutralvariant0: #000;
--cros-ref-neutralvariant0-rgb: 0, 0, 0;
--cros-ref-neutralvariant8: #16171f;
--cros-ref-neutralvariant8-rgb: 22, 23, 31;
--cros-ref-neutralvariant10: #191b23;
--cros-ref-neutralvariant10-rgb: 25, 27, 35;
--cros-ref-neutralvariant12: #1e1f27;
--cros-ref-neutralvariant12-rgb: 30, 31, 39;
--cros-ref-neutralvariant15: #24252d;
--cros-ref-neutralvariant15-rgb: 36, 37, 45;
--cros-ref-neutralvariant20: #2e3038;
--cros-ref-neutralvariant20-rgb: 46, 48, 56;
--cros-ref-neutralvariant30: #45464f;
--cros-ref-neutralvariant30-rgb: 69, 70, 79;
--cros-ref-neutralvariant40: #5d5e67;
--cros-ref-neutralvariant40-rgb: 93, 94, 103;
--cros-ref-neutralvariant50: #757680;
--cros-ref-neutralvariant50-rgb: 117, 118, 128;
--cros-ref-neutralvariant60: #8f909a;
--cros-ref-neutralvariant60-rgb: 143, 144, 154;
--cros-ref-neutralvariant70: #aaaab4;
--cros-ref-neutralvariant70-rgb: 170, 170, 180;
--cros-ref-neutralvariant80: #c6c6d0;
--cros-ref-neutralvariant80-rgb: 198, 198, 208;
--cros-ref-neutralvariant90: #e2e1ec;
--cros-ref-neutralvariant90-rgb: 226, 225, 236;
--cros-ref-neutralvariant95: #f0f0fa;
--cros-ref-neutralvariant95-rgb: 240, 240, 250;
--cros-ref-neutralvariant99: #fefbff;
--cros-ref-neutralvariant99-rgb: 254, 251, 255;
--cros-ref-neutralvariant100: #fff;
--cros-ref-neutralvariant100-rgb: 255, 255, 255;
--cros-ref-error0: #000;
--cros-ref-error0-rgb: 0, 0, 0;
--cros-ref-error8: #390001;
--cros-ref-error8-rgb: 57, 0, 1;
--cros-ref-error10: #410002;
--cros-ref-error10-rgb: 65, 0, 2;
--cros-ref-error12: #490002;
--cros-ref-error12-rgb: 73, 0, 2;
--cros-ref-error15: #540003;
--cros-ref-error15-rgb: 84, 0, 3;
--cros-ref-error20: #690005;
--cros-ref-error20-rgb: 105, 0, 5;
--cros-ref-error30: #93000a;
--cros-ref-error30-rgb: 147, 0, 10;
--cros-ref-error40: #ba1a1a;
--cros-ref-error40-rgb: 186, 26, 26;
--cros-ref-error50: #de3730;
--cros-ref-error50-rgb: 222, 55, 48;
--cros-ref-error60: #ff5449;
--cros-ref-error60-rgb: 255, 84, 73;
--cros-ref-error70: #ff897d;
--cros-ref-error70-rgb: 255, 137, 125;
--cros-ref-error80: #ffb4ab;
--cros-ref-error80-rgb: 255, 180, 171;
--cros-ref-error90: #ffdad6;
--cros-ref-error90-rgb: 255, 218, 214;
--cros-ref-error95: #ffedea;
--cros-ref-error95-rgb: 255, 237, 234;
--cros-ref-error99: #fffbff;
--cros-ref-error99-rgb: 255, 251, 255;
--cros-ref-error100: #fff;
--cros-ref-error100-rgb: 255, 255, 255;
--cros-ref-red0: #000;
--cros-ref-red0-rgb: 0, 0, 0;
--cros-ref-red8: #39000a;
--cros-ref-red8-rgb: 57, 0, 10;
--cros-ref-red10: #40000c;
--cros-ref-red10-rgb: 64, 0, 12;
--cros-ref-red12: #48000f;
--cros-ref-red12-rgb: 72, 0, 15;
--cros-ref-red15: #540013;
--cros-ref-red15-rgb: 84, 0, 19;
--cros-ref-red20: #680019;
--cros-ref-red20-rgb: 104, 0, 25;
--cros-ref-red30: #920027;
--cros-ref-red30-rgb: 146, 0, 39;
--cros-ref-red40: #bd0837;
--cros-ref-red40-rgb: 189, 8, 55;
--cros-ref-red50: #e12e4d;
--cros-ref-red50-rgb: 225, 46, 77;
--cros-ref-red60: #ff5167;
--cros-ref-red60-rgb: 255, 81, 103;
--cros-ref-red70: #ff8890;
--cros-ref-red70-rgb: 255, 136, 144;
--cros-ref-red80: #ffb3b6;
--cros-ref-red80-rgb: 255, 179, 182;
--cros-ref-red90: #ffdada;
--cros-ref-red90-rgb: 255, 218, 218;
--cros-ref-red95: #ffedec;
--cros-ref-red95-rgb: 255, 237, 236;
--cros-ref-red99: #fffbff;
--cros-ref-red99-rgb: 255, 251, 255;
--cros-ref-red100: #fff;
--cros-ref-red100-rgb: 255, 255, 255;
--cros-ref-green0: #000;
--cros-ref-green0-rgb: 0, 0, 0;
--cros-ref-green8: #001c10;
--cros-ref-green8-rgb: 0, 28, 16;
--cros-ref-green10: #002114;
--cros-ref-green10-rgb: 0, 33, 20;
--cros-ref-green12: #002517;
--cros-ref-green12-rgb: 0, 37, 23;
--cros-ref-green15: #002c1c;
--cros-ref-green15-rgb: 0, 44, 28;
--cros-ref-green20: #003825;
--cros-ref-green20-rgb: 0, 56, 37;
--cros-ref-green30: #005237;
--cros-ref-green30-rgb: 0, 82, 55;
--cros-ref-green40: #006c4a;
--cros-ref-green40-rgb: 0, 108, 74;
--cros-ref-green50: #00885e;
--cros-ref-green50-rgb: 0, 136, 94;
--cros-ref-green60: #2ea376;
--cros-ref-green60-rgb: 46, 163, 118;
--cros-ref-green70: #4fbf8f;
--cros-ref-green70-rgb: 79, 191, 143;
--cros-ref-green80: #6cdba9;
--cros-ref-green80-rgb: 108, 219, 169;
--cros-ref-green90: #89f8c4;
--cros-ref-green90-rgb: 137, 248, 196;
--cros-ref-green95: #beffdc;
--cros-ref-green95-rgb: 190, 255, 220;
--cros-ref-green99: #f4fff6;
--cros-ref-green99-rgb: 244, 255, 246;
--cros-ref-green100: #fff;
--cros-ref-green100-rgb: 255, 255, 255;
--cros-ref-blue0: #000;
--cros-ref-blue0-rgb: 0, 0, 0;
--cros-ref-blue8: #001343;
--cros-ref-blue8-rgb: 0, 19, 67;
--cros-ref-blue10: #00174c;
--cros-ref-blue10-rgb: 0, 23, 76;
--cros-ref-blue12: #001a55;
--cros-ref-blue12-rgb: 0, 26, 85;
--cros-ref-blue15: #002062;
--cros-ref-blue15-rgb: 0, 32, 98;
--cros-ref-blue20: #022978;
--cros-ref-blue20-rgb: 2, 41, 120;
--cros-ref-blue30: #244290;
--cros-ref-blue30-rgb: 36, 66, 144;
--cros-ref-blue40: #3f5aa9;
--cros-ref-blue40-rgb: 63, 90, 169;
--cros-ref-blue50: #5973c4;
--cros-ref-blue50-rgb: 89, 115, 196;
--cros-ref-blue60: #738de0;
--cros-ref-blue60-rgb: 115, 141, 224;
--cros-ref-blue70: #8ea8fd;
--cros-ref-blue70-rgb: 142, 168, 253;
--cros-ref-blue80: #b4c5ff;
--cros-ref-blue80-rgb: 180, 197, 255;
--cros-ref-blue90: #dbe1ff;
--cros-ref-blue90-rgb: 219, 225, 255;
--cros-ref-blue95: #eff0ff;
--cros-ref-blue95-rgb: 239, 240, 255;
--cros-ref-blue99: #fefbff;
--cros-ref-blue99-rgb: 254, 251, 255;
--cros-ref-blue100: #fff;
--cros-ref-blue100-rgb: 255, 255, 255;
--cros-ref-yellow0: #000;
--cros-ref-yellow0-rgb: 0, 0, 0;
--cros-ref-yellow8: #241400;
--cros-ref-yellow8-rgb: 36, 20, 0;
--cros-ref-yellow10: #291800;
--cros-ref-yellow10-rgb: 41, 24, 0;
--cros-ref-yellow12: #2e1c00;
--cros-ref-yellow12-rgb: 46, 28, 0;
--cros-ref-yellow15: #372100;
--cros-ref-yellow15-rgb: 55, 33, 0;
--cros-ref-yellow20: #452b00;
--cros-ref-yellow20-rgb: 69, 43, 0;
--cros-ref-yellow30: #624000;
--cros-ref-yellow30-rgb: 98, 64, 0;
--cros-ref-yellow40: #825500;
--cros-ref-yellow40-rgb: 130, 85, 0;
--cros-ref-yellow50: #a26c00;
--cros-ref-yellow50-rgb: 162, 108, 0;
--cros-ref-yellow60: #c58300;
--cros-ref-yellow60-rgb: 197, 131, 0;
--cros-ref-yellow70: #e89c00;
--cros-ref-yellow70-rgb: 232, 156, 0;
--cros-ref-yellow80: #ffb94f;
--cros-ref-yellow80-rgb: 255, 185, 79;
--cros-ref-yellow90: #ffddb3;
--cros-ref-yellow90-rgb: 255, 221, 179;
--cros-ref-yellow95: #ffeedc;
--cros-ref-yellow95-rgb: 255, 238, 220;
--cros-ref-yellow99: #fffbff;
--cros-ref-yellow99-rgb: 255, 251, 255;
--cros-ref-yellow100: #fff;
--cros-ref-yellow100-rgb: 255, 255, 255;
--cros-ref-sparkle_analog0: #000;
--cros-ref-sparkle_analog0-rgb: 0, 0, 0;
--cros-ref-sparkle_analog8: #000062;
--cros-ref-sparkle_analog8-rgb: 0, 0, 98;
--cros-ref-sparkle_analog10: #01006e;
--cros-ref-sparkle_analog10-rgb: 1, 0, 110;
--cros-ref-sparkle_analog12: #01007a;
--cros-ref-sparkle_analog12-rgb: 1, 0, 122;
--cros-ref-sparkle_analog15: #01008c;
--cros-ref-sparkle_analog15-rgb: 1, 0, 140;
--cros-ref-sparkle_analog20: #141995;
--cros-ref-sparkle_analog20-rgb: 20, 25, 149;
--cros-ref-sparkle_analog30: #3037aa;
--cros-ref-sparkle_analog30-rgb: 48, 55, 170;
--cros-ref-sparkle_analog40: #4a51c3;
--cros-ref-sparkle_analog40-rgb: 74, 81, 195;
--cros-ref-sparkle_analog50: #636bde;
--cros-ref-sparkle_analog50-rgb: 99, 107, 222;
--cros-ref-sparkle_analog60: #7d85fa;
--cros-ref-sparkle_analog60-rgb: 125, 133, 250;
--cros-ref-sparkle_analog70: #9da3ff;
--cros-ref-sparkle_analog70-rgb: 157, 163, 255;
--cros-ref-sparkle_analog80: #bfc2ff;
--cros-ref-sparkle_analog80-rgb: 191, 194, 255;
--cros-ref-sparkle_analog90: #e0e0ff;
--cros-ref-sparkle_analog90-rgb: 224, 224, 255;
--cros-ref-sparkle_analog95: #f1efff;
--cros-ref-sparkle_analog95-rgb: 241, 239, 255;
--cros-ref-sparkle_analog99: #fffbff;
--cros-ref-sparkle_analog99-rgb: 255, 251, 255;
--cros-ref-sparkle_analog100: #fff;
--cros-ref-sparkle_analog100-rgb: 255, 255, 255;
--cros-ref-sparkle_muted0: #000;
--cros-ref-sparkle_muted0-rgb: 0, 0, 0;
--cros-ref-sparkle_muted8: #001344;
--cros-ref-sparkle_muted8-rgb: 0, 19, 68;
--cros-ref-sparkle_muted10: #031749;
--cros-ref-sparkle_muted10-rgb: 3, 23, 73;
--cros-ref-sparkle_muted12: #081c4d;
--cros-ref-sparkle_muted12-rgb: 8, 28, 77;
--cros-ref-sparkle_muted15: #102254;
--cros-ref-sparkle_muted15-rgb: 16, 34, 84;
--cros-ref-sparkle_muted20: #1c2d5f;
--cros-ref-sparkle_muted20-rgb: 28, 45, 95;
--cros-ref-sparkle_muted30: #344477;
--cros-ref-sparkle_muted30-rgb: 52, 68, 119;
--cros-ref-sparkle_muted40: #4c5c90;
--cros-ref-sparkle_muted40-rgb: 76, 92, 144;
--cros-ref-sparkle_muted50: #6575ab;
--cros-ref-sparkle_muted50-rgb: 101, 117, 171;
--cros-ref-sparkle_muted60: #7f8fc6;
--cros-ref-sparkle_muted60-rgb: 127, 143, 198;
--cros-ref-sparkle_muted70: #99a9e2;
--cros-ref-sparkle_muted70-rgb: 153, 169, 226;
--cros-ref-sparkle_muted80: #b5c4ff;
--cros-ref-sparkle_muted80-rgb: 181, 196, 255;
--cros-ref-sparkle_muted90: #dbe1ff;
--cros-ref-sparkle_muted90-rgb: 219, 225, 255;
--cros-ref-sparkle_muted95: #eff0ff;
--cros-ref-sparkle_muted95-rgb: 239, 240, 255;
--cros-ref-sparkle_muted99: #fefbff;
--cros-ref-sparkle_muted99-rgb: 254, 251, 255;
--cros-ref-sparkle_muted100: #fff;
--cros-ref-sparkle_muted100-rgb: 255, 255, 255;
--cros-ref-sparkle_complement0: #000;
--cros-ref-sparkle_complement0-rgb: 0, 0, 0;
--cros-ref-sparkle_complement8: #001c13;
--cros-ref-sparkle_complement8-rgb: 0, 28, 19;
--cros-ref-sparkle_complement10: #002116;
--cros-ref-sparkle_complement10-rgb: 0, 33, 22;
--cros-ref-sparkle_complement12: #00251a;
--cros-ref-sparkle_complement12-rgb: 0, 37, 26;
--cros-ref-sparkle_complement15: #002c1f;
--cros-ref-sparkle_complement15-rgb: 0, 44, 31;
--cros-ref-sparkle_complement20: #003828;
--cros-ref-sparkle_complement20-rgb: 0, 56, 40;
--cros-ref-sparkle_complement30: #13503d;
--cros-ref-sparkle_complement30-rgb: 19, 80, 61;
--cros-ref-sparkle_complement40: #306854;
--cros-ref-sparkle_complement40-rgb: 48, 104, 84;
--cros-ref-sparkle_complement50: #49826c;
--cros-ref-sparkle_complement50-rgb: 73, 130, 108;
--cros-ref-sparkle_complement60: #639c85;
--cros-ref-sparkle_complement60-rgb: 99, 156, 133;
--cros-ref-sparkle_complement70: #7db79f;
--cros-ref-sparkle_complement70-rgb: 125, 183, 159;
--cros-ref-sparkle_complement80: #98d3b9;
--cros-ref-sparkle_complement80-rgb: 152, 211, 185;
--cros-ref-sparkle_complement90: #b4efd5;
--cros-ref-sparkle_complement90-rgb: 180, 239, 213;
--cros-ref-sparkle_complement95: #c1fee3;
--cros-ref-sparkle_complement95-rgb: 193, 254, 227;
--cros-ref-sparkle_complement99: #f4fff7;
--cros-ref-sparkle_complement99-rgb: 244, 255, 247;
--cros-ref-sparkle_complement100: #fff;
--cros-ref-sparkle_complement100-rgb: 255, 255, 255;
}
/*
* The --cros-sys-* color tokens are generated from the following command:
* ```
* (in ~/chromium/src/)
* tools/style_variable_generator/main.py --generator CSS \
* ui/chromeos/styles/cros_ref_colors.json5 \
* <(json5 ui/chromeos/styles/cros_sys_colors.json5 | jq 'del(.legacy_mappings)')
* ```
* Manually remove the --cros-ref-* variables, and put the dark mode variables
* into respective section.
*/
body {
--cros-sys-primary-light-rgb: var(--cros-ref-primary40-rgb);
--cros-sys-primary-light: var(--cros-ref-primary40);
--cros-sys-primary-dark-rgb: var(--cros-ref-primary80-rgb);
--cros-sys-primary-dark: var(--cros-ref-primary80);
--cros-sys-primary-rgb: var(--cros-sys-primary-light-rgb);
--cros-sys-primary: var(--cros-sys-primary-light);
--cros-sys-inverse_primary-rgb: var(--cros-ref-primary80-rgb);
--cros-sys-inverse_primary: var(--cros-ref-primary80);
--cros-sys-on_primary-light-rgb: var(--cros-ref-primary100-rgb);
--cros-sys-on_primary-light: var(--cros-ref-primary100);
--cros-sys-on_primary-dark-rgb: var(--cros-ref-primary20-rgb);
--cros-sys-on_primary-dark: var(--cros-ref-primary20);
--cros-sys-on_primary-rgb: var(--cros-sys-on_primary-light-rgb);
--cros-sys-on_primary: var(--cros-sys-on_primary-light);
--cros-sys-inverse_on_primary-rgb: var(--cros-ref-primary20-rgb);
--cros-sys-inverse_on_primary: var(--cros-ref-primary20);
--cros-sys-primary_container-rgb: var(--cros-ref-primary90-rgb);
--cros-sys-primary_container: var(--cros-ref-primary90);
--cros-sys-on_primary_container-rgb: var(--cros-ref-primary10-rgb);
--cros-sys-on_primary_container: var(--cros-ref-primary10);
--cros-sys-secondary-light-rgb: var(--cros-ref-secondary40-rgb);
--cros-sys-secondary-light: var(--cros-ref-secondary40);
--cros-sys-secondary-dark-rgb: var(--cros-ref-secondary80-rgb);
--cros-sys-secondary-dark: var(--cros-ref-secondary80);
--cros-sys-secondary-rgb: var(--cros-sys-secondary-light-rgb);
--cros-sys-secondary: var(--cros-sys-secondary-light);
--cros-sys-on_secondary-rgb: var(--cros-ref-secondary100-rgb);
--cros-sys-on_secondary: var(--cros-ref-secondary100);
--cros-sys-secondary_container-rgb: var(--cros-ref-secondary90-rgb);
--cros-sys-secondary_container: var(--cros-ref-secondary90);
--cros-sys-on_secondary_container-rgb: var(--cros-ref-secondary10-rgb);
--cros-sys-on_secondary_container: var(--cros-ref-secondary10);
--cros-sys-tertiary-rgb: var(--cros-ref-tertiary40-rgb);
--cros-sys-tertiary: var(--cros-ref-tertiary40);
--cros-sys-on_tertiary-rgb: var(--cros-ref-tertiary100-rgb);
--cros-sys-on_tertiary: var(--cros-ref-tertiary100);
--cros-sys-tertiary_container-rgb: var(--cros-ref-tertiary90-rgb);
--cros-sys-tertiary_container: var(--cros-ref-tertiary90);
--cros-sys-on_tertiary_container-rgb: var(--cros-ref-tertiary10-rgb);
--cros-sys-on_tertiary_container: var(--cros-ref-tertiary10);
--cros-sys-error-rgb: var(--cros-ref-red50-rgb);
--cros-sys-error: var(--cros-ref-red50);
--cros-sys-on_error-rgb: var(--cros-ref-error100-rgb);
--cros-sys-on_error: var(--cros-ref-error100);
--cros-sys-error_container-rgb: var(--cros-ref-red90-rgb);
--cros-sys-error_container: var(--cros-ref-red90);
--cros-sys-on_error_container-rgb: var(--cros-ref-red30-rgb);
--cros-sys-on_error_container: var(--cros-ref-red30);
--cros-sys-error_highlight-rgb: var(--cros-ref-error40-rgb);
--cros-sys-error_highlight: rgba(var(--cros-sys-error_highlight-rgb), 0.3);
--cros-sys-inverse_error-rgb: var(--cros-ref-error80-rgb);
--cros-sys-inverse_error: var(--cros-ref-error80);
--cros-sys-inverse_on_error-rgb: var(--cros-ref-error20-rgb);
--cros-sys-inverse_on_error: var(--cros-ref-error20);
--cros-sys-surface_variant-rgb: var(--cros-ref-neutralvariant90-rgb);
--cros-sys-surface_variant: var(--cros-ref-neutralvariant90);
--cros-sys-on_surface_variant-light-rgb: var(--cros-ref-neutralvariant30-rgb);
--cros-sys-on_surface_variant-light: var(--cros-ref-neutralvariant30);
--cros-sys-on_surface_variant-dark-rgb: var(--cros-ref-neutralvariant80-rgb);
--cros-sys-on_surface_variant-dark: var(--cros-ref-neutralvariant80);
--cros-sys-on_surface_variant-rgb: var(
--cros-sys-on_surface_variant-light-rgb
);
--cros-sys-on_surface_variant: var(--cros-sys-on_surface_variant-light);
--cros-sys-outline-rgb: var(--cros-ref-neutralvariant50-rgb);
--cros-sys-outline: var(--cros-ref-neutralvariant50);
--cros-sys-separator-rgb: var(--cros-ref-neutral10-rgb);
--cros-sys-separator: rgba(var(--cros-sys-separator-rgb), 0.14);
--cros-sys-white-rgb: var(--cros-ref-neutral100-rgb);
--cros-sys-white: var(--cros-ref-neutral100);
--cros-sys-black-rgb: var(--cros-ref-neutral0-rgb);
--cros-sys-black: var(--cros-ref-neutral0);
--cros-sys-header-rgb: var(--cros-ref-secondary90-rgb);
--cros-sys-header: var(--cros-ref-secondary90);
--cros-sys-header_unfocused: color-mix(
in srgb,
rgb(var(--cros-ref-secondary90-rgb)) 28.000000000000004%,
var(--cros-ref-neutralvariant90)
);
--cros-sys-app_base_shaded-rgb: var(--cros-ref-neutralvariant95-rgb);
--cros-sys-app_base_shaded: var(--cros-ref-neutralvariant95);
--cros-sys-app_base-rgb: var(--cros-ref-neutral99-rgb);
--cros-sys-app_base: var(--cros-ref-neutral99);
--cros-sys-base_highlight: color-mix(
in srgb,
rgb(var(--cros-ref-primary70-rgb)) 24%,
var(--cros-ref-neutral100)
);
--cros-sys-on_base_highlight-rgb: var(--cros-ref-primary60-rgb);
--cros-sys-on_base_highlight: rgba(
var(--cros-sys-on_base_highlight-rgb),
0.3
);
--cros-sys-base_elevated-light-rgb: var(--cros-ref-neutralvariant100-rgb);
--cros-sys-base_elevated-light: var(--cros-ref-neutralvariant100);
--cros-sys-base_elevated-dark: color-mix(
in srgb,
var(--cros-ref-primary80) 11%,
color-mix(in srgb, var(--cros-ref-neutral80) 2%, var(--cros-ref-neutral10))
);
--cros-sys-base_elevated-rgb: var(--cros-sys-base_elevated-light-rgb);
--cros-sys-base_elevated: var(--cros-sys-base_elevated-light);
--cros-sys-system_base-rgb: var(--cros-ref-neutralvariant90-rgb);
--cros-sys-system_base: var(--cros-ref-neutralvariant90);
--cros-sys-system_base_elevated-rgb: var(--cros-sys-surface3-rgb);
--cros-sys-system_base_elevated: rgba(
var(--cros-sys-system_base_elevated-rgb),
0.9
);
--cros-sys-system_base_elevated_opaque-rgb: var(--cros-sys-surface3-rgb);
--cros-sys-system_base_elevated_opaque: var(--cros-sys-surface3);
--cros-sys-surface-rgb: var(--cros-ref-neutral99-rgb);
--cros-sys-surface: var(--cros-ref-neutral99);
--cros-sys-surface1: color-mix(
in srgb,
rgb(var(--cros-ref-primary40-rgb)) 5%,
var(--cros-ref-neutral99)
);
--cros-sys-surface2: color-mix(
in srgb,
rgb(var(--cros-ref-primary40-rgb)) 8%,
var(--cros-ref-neutral99)
);
--cros-sys-surface3: color-mix(
in srgb,
rgb(var(--cros-ref-primary40-rgb)) 11%,
var(--cros-ref-neutral99)
);
--cros-sys-surface4: color-mix(
in srgb,
rgb(var(--cros-ref-primary40-rgb)) 12%,
var(--cros-ref-neutral99)
);
--cros-sys-surface5: color-mix(
in srgb,
rgb(var(--cros-ref-primary40-rgb)) 14.000000000000002%,
var(--cros-ref-neutral99)
);
--cros-sys-scrim-rgb: var(--cros-ref-neutralvariant60-rgb);
--cros-sys-scrim: rgba(var(--cros-sys-scrim-rgb), 0.6);
--cros-sys-scrim2-rgb: var(--cros-ref-secondary90-rgb);
--cros-sys-scrim2: rgba(var(--cros-sys-scrim2-rgb), 0.6);
--cros-sys-dialog_container-rgb: var(--cros-sys-base_elevated-rgb);
--cros-sys-dialog_container: var(--cros-sys-base_elevated);
--cros-sys-inverse_surface-rgb: var(--cros-ref-neutral20-rgb);
--cros-sys-inverse_surface: var(--cros-ref-neutral20);
--cros-sys-scrollbar-rgb: var(--cros-ref-neutralvariant60-rgb);
--cros-sys-scrollbar: rgba(var(--cros-sys-scrollbar-rgb), 0.6);
--cros-sys-scrollbar_hover-rgb: var(--cros-ref-neutralvariant30-rgb);
--cros-sys-scrollbar_hover: rgba(var(--cros-sys-scrollbar_hover-rgb), 0.6);
--cros-sys-scrollbar_border-rgb: var(--cros-ref-neutralvariant100-rgb);
--cros-sys-scrollbar_border: rgba(var(--cros-sys-scrollbar_border-rgb), 0.14);
--cros-sys-input_field_on_shaded-rgb: var(--cros-ref-neutral99-rgb);
--cros-sys-input_field_on_shaded: var(--cros-ref-neutral99);
--cros-sys-input_field_on_base-rgb: var(--cros-ref-neutral95-rgb);
--cros-sys-input_field_on_base: var(--cros-ref-neutral95);
--cros-sys-system_on_base-rgb: var(--cros-ref-neutralvariant99-rgb);
--cros-sys-system_on_base: rgba(var(--cros-sys-system_on_base-rgb), 0.6);
--cros-sys-system_on_base_opaque-rgb: var(--cros-ref-neutralvariant95-rgb);
--cros-sys-system_on_base_opaque: var(--cros-ref-neutralvariant95);
--cros-sys-system_on_base1-rgb: var(--cros-ref-neutral10-rgb);
--cros-sys-system_on_base1: rgba(var(--cros-sys-system_on_base1-rgb), 0.06);
--cros-sys-system_primary_container-rgb: var(--cros-ref-primary80-rgb);
--cros-sys-system_primary_container: var(--cros-ref-primary80);
--cros-sys-system_on_primary_container-rgb: var(--cros-ref-primary10-rgb);
--cros-sys-system_on_primary_container: var(--cros-ref-primary10);
--cros-sys-system_on_primary_container_disabled-rgb: var(
--cros-sys-system_on_primary_container-rgb
);
--cros-sys-system_on_primary_container_disabled: rgba(
var(--cros-sys-system_on_primary_container_disabled-rgb),
0.38
);
--cros-sys-on_success_container-rgb: var(--cros-ref-green30-rgb);
--cros-sys-on_success_container: var(--cros-ref-green30);
--cros-sys-success_container-rgb: var(--cros-ref-green95-rgb);
--cros-sys-success_container: var(--cros-ref-green95);
--cros-sys-success-rgb: var(--cros-ref-green50-rgb);
--cros-sys-success: var(--cros-ref-green50);
--cros-sys-on_warning_container-rgb: var(--cros-ref-yellow30-rgb);
--cros-sys-on_warning_container: var(--cros-ref-yellow30);
--cros-sys-warning_container-rgb: var(--cros-ref-yellow90-rgb);
--cros-sys-warning_container: var(--cros-ref-yellow90);
--cros-sys-system_on_warning_container-rgb: var(--cros-ref-yellow10-rgb);
--cros-sys-system_on_warning_container: var(--cros-ref-yellow10);
--cros-sys-system_warning_container-rgb: var(--cros-ref-yellow80-rgb);
--cros-sys-system_warning_container: var(--cros-ref-yellow80);
--cros-sys-system_warning_inverse-rgb: var(--cros-ref-yellow10-rgb);
--cros-sys-system_warning_inverse: var(--cros-ref-yellow10);
--cros-sys-warning-rgb: var(--cros-ref-yellow50-rgb);
--cros-sys-warning: var(--cros-ref-yellow50);
--cros-sys-system_on_error_container-rgb: var(--cros-ref-red10-rgb);
--cros-sys-system_on_error_container: var(--cros-ref-red10);
--cros-sys-system_error_container-rgb: var(--cros-ref-red80-rgb);
--cros-sys-system_error_container: var(--cros-ref-red80);
--cros-sys-on_progress_container-rgb: var(--cros-ref-blue30-rgb);
--cros-sys-on_progress_container: var(--cros-ref-blue30);
--cros-sys-progress_container-rgb: var(--cros-ref-blue90-rgb);
--cros-sys-progress_container: var(--cros-ref-blue90);
--cros-sys-progress-rgb: var(--cros-ref-blue50-rgb);
--cros-sys-progress: var(--cros-ref-blue50);
--cros-sys-on_positive_container-rgb: var(
--cros-sys-on_success_container-rgb
);
--cros-sys-on_positive_container: var(--cros-sys-on_success_container);
--cros-sys-positive_container-rgb: var(--cros-sys-success_container-rgb);
--cros-sys-positive_container: var(--cros-sys-success_container);
--cros-sys-positive-rgb: var(--cros-sys-success-rgb);
--cros-sys-positive: var(--cros-sys-success);
--cros-sys-system_on_negative_container-rgb: var(
--cros-sys-system_on_error_container-rgb
);
--cros-sys-system_on_negative_container: var(
--cros-sys-system_on_error_container
);
--cros-sys-system_negative_container-rgb: var(
--cros-sys-system_error_container-rgb
);
--cros-sys-system_negative_container: var(--cros-sys-system_error_container);
--cros-sys-on_surface-light-rgb: var(--cros-ref-neutral10-rgb);
--cros-sys-on_surface-light: var(--cros-ref-neutral10);
--cros-sys-on_surface-dark-rgb: var(--cros-ref-neutral90-rgb);
--cros-sys-on_surface-dark: var(--cros-ref-neutral90);
--cros-sys-on_surface-rgb: var(--cros-sys-on_surface-light-rgb);
--cros-sys-on_surface: var(--cros-sys-on_surface-light);
--cros-sys-inverse_on_surface-rgb: var(--cros-ref-neutral95-rgb);
--cros-sys-inverse_on_surface: var(--cros-ref-neutral95);
--cros-sys-on_surface_bodytext-rgb: var(--cros-ref-neutral40-rgb);
--cros-sys-on_surface_bodytext: var(--cros-ref-neutral40);
--cros-sys-inverse_whiteblack-rgb: var(--cros-ref-neutral0-rgb);
--cros-sys-inverse_whiteblack: var(--cros-ref-neutral0);
--cros-sys-disabled-rgb: var(--cros-sys-on_surface-rgb);
--cros-sys-disabled: rgba(var(--cros-sys-disabled-rgb), 0.38);
--cros-sys-disabled_opaque-rgb: var(--cros-ref-neutralvariant80-rgb);
--cros-sys-disabled_opaque: var(--cros-ref-neutralvariant80);
--cros-sys-disabled_container-rgb: var(--cros-sys-on_surface-rgb);
--cros-sys-disabled_container: rgba(
var(--cros-sys-disabled_container-rgb),
0.12
);
--cros-sys-privacy_indicator-rgb: 20, 108, 46;
--cros-sys-privacy_indicator: rgb(var(--cros-sys-privacy_indicator-rgb));
--cros-sys-hover_on_prominent-rgb: var(--cros-ref-neutral99-rgb);
--cros-sys-hover_on_prominent: rgba(
var(--cros-sys-hover_on_prominent-rgb),
0.1
);
--cros-sys-inverse_hover_on_prominent-rgb: var(--cros-ref-neutral10-rgb);
--cros-sys-inverse_hover_on_prominent: rgba(
var(--cros-sys-inverse_hover_on_prominent-rgb),
0.06
);
--cros-sys-hover_on_subtle-rgb: var(--cros-ref-neutral10-rgb);
--cros-sys-hover_on_subtle: rgba(var(--cros-sys-hover_on_subtle-rgb), 0.06);
--cros-sys-inverse_hover_on_subtle-rgb: var(--cros-ref-neutral99-rgb);
--cros-sys-inverse_hover_on_subtle: rgba(
var(--cros-sys-inverse_hover_on_subtle-rgb),
0.1
);
--cros-sys-ripple_primary-rgb: var(--cros-ref-primary70-rgb);
--cros-sys-ripple_primary: rgba(var(--cros-sys-ripple_primary-rgb), 0.32);
--cros-sys-inverse_ripple_primary-rgb: var(--cros-ref-primary60-rgb);
--cros-sys-inverse_ripple_primary: rgba(
var(--cros-sys-inverse_ripple_primary-rgb),
0.32
);
--cros-sys-ripple_neutral_on_prominent-rgb: var(--cros-ref-neutral99-rgb);
--cros-sys-ripple_neutral_on_prominent: rgba(
var(--cros-sys-ripple_neutral_on_prominent-rgb),
0.16
);
--cros-sys-ripple_neutral_on_subtle-rgb: var(--cros-ref-neutral10-rgb);
--cros-sys-ripple_neutral_on_subtle: rgba(
var(--cros-sys-ripple_neutral_on_subtle-rgb),
0.12
);
--cros-sys-inverse_ripple_neutral_on_subtle-rgb: var(
--cros-ref-neutral90-rgb
);
--cros-sys-inverse_ripple_neutral_on_subtle: rgba(
var(--cros-sys-inverse_ripple_neutral_on_subtle-rgb),
0.16
);
--cros-sys-highlight_shape-rgb: var(--cros-ref-primary70-rgb);
--cros-sys-highlight_shape: rgba(var(--cros-sys-highlight_shape-rgb), 0.3);
--cros-sys-highlight_text-rgb: var(--cros-ref-primary70-rgb);
--cros-sys-highlight_text: rgba(var(--cros-sys-highlight_text-rgb), 0.6);
--cros-sys-system_highlight-rgb: var(--cros-ref-neutral100-rgb);
--cros-sys-system_highlight: rgba(var(--cros-sys-system_highlight-rgb), 0.16);
--cros-sys-system_border-rgb: var(--cros-ref-neutral0-rgb);
--cros-sys-system_border: rgba(var(--cros-sys-system_border-rgb), 0.08);
--cros-sys-system_highlight1-rgb: var(--cros-ref-neutral100-rgb);
--cros-sys-system_highlight1: rgba(
var(--cros-sys-system_highlight1-rgb),
0.16
);
--cros-sys-system_border1-rgb: var(--cros-ref-neutral0-rgb);
--cros-sys-system_border1: rgba(var(--cros-sys-system_border1-rgb), 0.06);
--cros-sys-focus_ring-rgb: var(--cros-ref-primary40-rgb);
--cros-sys-focus_ring: var(--cros-ref-primary40);
--cros-sys-inverse_focus_ring-rgb: var(--cros-ref-primary80-rgb);
--cros-sys-inverse_focus_ring: var(--cros-ref-primary80);
--cros-sys-focus_ring_on_primary_container-rgb: var(--cros-ref-primary40-rgb);
--cros-sys-focus_ring_on_primary_container: var(--cros-ref-primary40);
--cros-sys-shadow-rgb: var(--cros-ref-neutral30-rgb);
--cros-sys-shadow: var(--cros-ref-neutral30);
--cros-sys-shadow_ambient-rgb: var(--cros-sys-shadow-rgb);
--cros-sys-shadow_ambient: rgba(var(--cros-sys-shadow_ambient-rgb), 0.2);
--cros-sys-shadow_key-rgb: var(--cros-sys-shadow-rgb);
--cros-sys-shadow_key: rgba(var(--cros-sys-shadow_key-rgb), 0.1);
--cros-sys-pressed_on_prominent: color-mix(
in srgb,
var(--cros-sys-hover_on_prominent) 10%,
var(--cros-sys-ripple_neutral_on_prominent)
);
--cros-sys-pressed_on_subtle: color-mix(
in srgb,
var(--cros-sys-hover_on_subtle) 6%,
var(--cros-sys-ripple_neutral_on_subtle)
);
--cros-sys-analog-rgb: var(--cros-ref-sparkle_analog70-rgb);
--cros-sys-analog: var(--cros-ref-sparkle_analog70);
--cros-sys-analog_variant-rgb: var(--cros-ref-sparkle_analog80-rgb);
--cros-sys-analog_variant: var(--cros-ref-sparkle_analog80);
--cros-sys-muted-rgb: var(--cros-ref-sparkle_muted80-rgb);
--cros-sys-muted: var(--cros-ref-sparkle_muted80);
--cros-sys-muted_variant-rgb: var(--cros-ref-sparkle_muted90-rgb);
--cros-sys-muted_variant: var(--cros-ref-sparkle_muted90);
--cros-sys-complement-rgb: var(--cros-ref-sparkle_complement90-rgb);
--cros-sys-complement: var(--cros-ref-sparkle_complement90);
--cros-sys-complement_variant-rgb: var(--cros-ref-sparkle_complement95-rgb);
--cros-sys-complement_variant: var(--cros-ref-sparkle_complement95);
--cros-sys-illo-color1-light-rgb: var(--cros-ref-primary40-rgb);
--cros-sys-illo-color1-light: var(--cros-ref-primary40);
--cros-sys-illo-color1-dark-rgb: var(--cros-ref-primary80-rgb);
--cros-sys-illo-color1-dark: var(--cros-ref-primary80);
--cros-sys-illo-color1-rgb: var(--cros-sys-illo-color1-light-rgb);
--cros-sys-illo-color1: var(--cros-sys-illo-color1-light);
--cros-sys-illo-color1-1-light-rgb: var(--cros-ref-primary80-rgb);
--cros-sys-illo-color1-1-light: var(--cros-ref-primary80);
--cros-sys-illo-color1-1-dark-rgb: var(--cros-ref-secondary40-rgb);
--cros-sys-illo-color1-1-dark: var(--cros-ref-secondary40);
--cros-sys-illo-color1-1-rgb: var(--cros-sys-illo-color1-1-light-rgb);
--cros-sys-illo-color1-1: var(--cros-sys-illo-color1-1-light);
--cros-sys-illo-color1-2-light-rgb: var(--cros-ref-primary90-rgb);
--cros-sys-illo-color1-2-light: var(--cros-ref-primary90);
--cros-sys-illo-color1-2-dark-rgb: var(--cros-ref-secondary30-rgb);
--cros-sys-illo-color1-2-dark: var(--cros-ref-secondary30);
--cros-sys-illo-color1-2-rgb: var(--cros-sys-illo-color1-2-light-rgb);
--cros-sys-illo-color1-2: var(--cros-sys-illo-color1-2-light);
--cros-sys-illo-color2-light-rgb: var(--cros-ref-green60-rgb);
--cros-sys-illo-color2-light: var(--cros-ref-green60);
--cros-sys-illo-color2-dark-rgb: var(--cros-ref-green70-rgb);
--cros-sys-illo-color2-dark: var(--cros-ref-green70);
--cros-sys-illo-color2-rgb: var(--cros-sys-illo-color2-light-rgb);
--cros-sys-illo-color2: var(--cros-sys-illo-color2-light);
--cros-sys-illo-color3-light-rgb: var(--cros-ref-yellow70-rgb);
--cros-sys-illo-color3-light: var(--cros-ref-yellow70);
--cros-sys-illo-color3-dark-rgb: var(--cros-ref-yellow80-rgb);
--cros-sys-illo-color3-dark: var(--cros-ref-yellow80);
--cros-sys-illo-color3-rgb: var(--cros-sys-illo-color3-light-rgb);
--cros-sys-illo-color3: var(--cros-sys-illo-color3-light);
--cros-sys-illo-color4-light-rgb: var(--cros-ref-red60-rgb);
--cros-sys-illo-color4-light: var(--cros-ref-red60);
--cros-sys-illo-color4-dark-rgb: var(--cros-ref-red60-rgb);
--cros-sys-illo-color4-dark: var(--cros-ref-red60);
--cros-sys-illo-color4-rgb: var(--cros-sys-illo-color4-light-rgb);
--cros-sys-illo-color4: var(--cros-sys-illo-color4-light);
--cros-sys-illo-color5-light-rgb: var(--cros-ref-tertiary70-rgb);
--cros-sys-illo-color5-light: var(--cros-ref-tertiary70);
--cros-sys-illo-color5-dark-rgb: var(--cros-ref-tertiary40-rgb);
--cros-sys-illo-color5-dark: var(--cros-ref-tertiary40);
--cros-sys-illo-color5-rgb: var(--cros-sys-illo-color5-light-rgb);
--cros-sys-illo-color5: var(--cros-sys-illo-color5-light);
--cros-sys-illo-color6-light-rgb: var(--cros-ref-secondary90-rgb);
--cros-sys-illo-color6-light: var(--cros-ref-secondary90);
--cros-sys-illo-color6-dark-rgb: var(--cros-ref-secondary50-rgb);
--cros-sys-illo-color6-dark: var(--cros-ref-secondary50);
--cros-sys-illo-color6-rgb: var(--cros-sys-illo-color6-light-rgb);
--cros-sys-illo-color6: var(--cros-sys-illo-color6-light);
--cros-sys-illo-base-light-rgb: var(--cros-ref-secondary100-rgb);
--cros-sys-illo-base-light: var(--cros-ref-secondary100);
--cros-sys-illo-base-dark-rgb: var(--cros-ref-secondary0-rgb);
--cros-sys-illo-base-dark: var(--cros-ref-secondary0);
--cros-sys-illo-base-rgb: var(--cros-sys-illo-base-light-rgb);
--cros-sys-illo-base: var(--cros-sys-illo-base-light);
--cros-sys-illo-secondary-light-rgb: var(--cros-ref-neutralvariant90-rgb);
--cros-sys-illo-secondary-light: var(--cros-ref-neutralvariant90);
--cros-sys-illo-secondary-dark-rgb: var(--cros-ref-neutralvariant40-rgb);
--cros-sys-illo-secondary-dark: var(--cros-ref-neutralvariant40);
--cros-sys-illo-secondary-rgb: var(--cros-sys-illo-secondary-light-rgb);
--cros-sys-illo-secondary: var(--cros-sys-illo-secondary-light);
--cros-sys-illo-card-color1-light-rgb: 252, 227, 224;
--cros-sys-illo-card-color1-light: rgb(
var(--cros-sys-illo-card-color1-light-rgb)
);
--cros-sys-illo-card-color1-dark-rgb: 77, 39, 38;
--cros-sys-illo-card-color1-dark: rgb(
var(--cros-sys-illo-card-color1-dark-rgb)
);
--cros-sys-illo-card-color1-rgb: var(--cros-sys-illo-card-color1-light-rgb);
--cros-sys-illo-card-color1: var(--cros-sys-illo-card-color1-light);
--cros-sys-illo-card-on_color1-light-rgb: 165, 14, 14;
--cros-sys-illo-card-on_color1-light: rgb(
var(--cros-sys-illo-card-on_color1-light-rgb)
);
--cros-sys-illo-card-on_color1-dark-rgb: 246, 174, 169;
--cros-sys-illo-card-on_color1-dark: rgb(
var(--cros-sys-illo-card-on_color1-dark-rgb)
);
--cros-sys-illo-card-on_color1-rgb: var(
--cros-sys-illo-card-on_color1-light-rgb
);
--cros-sys-illo-card-on_color1: var(--cros-sys-illo-card-on_color1-light);
--cros-sys-illo-card-color2-light-rgb: 254, 242, 203;
--cros-sys-illo-card-color2-light: rgb(
var(--cros-sys-illo-card-color2-light-rgb)
);
--cros-sys-illo-card-color2-dark-rgb: 68, 49, 23;
--cros-sys-illo-card-color2-dark: rgb(
var(--cros-sys-illo-card-color2-dark-rgb)
);
--cros-sys-illo-card-color2-rgb: var(--cros-sys-illo-card-color2-light-rgb);
--cros-sys-illo-card-color2: var(--cros-sys-illo-card-color2-light);
--cros-sys-illo-card-on_color2-light-rgb: 155, 97, 0;
--cros-sys-illo-card-on_color2-light: rgb(
var(--cros-sys-illo-card-on_color2-light-rgb)
);
--cros-sys-illo-card-on_color2-dark-rgb: 253, 226, 147;
--cros-sys-illo-card-on_color2-dark: rgb(
var(--cros-sys-illo-card-on_color2-dark-rgb)
);
--cros-sys-illo-card-on_color2-rgb: var(
--cros-sys-illo-card-on_color2-light-rgb
);
--cros-sys-illo-card-on_color2: var(--cros-sys-illo-card-on_color2-light);
--cros-sys-illo-card-color3-light-rgb: 220, 244, 227;
--cros-sys-illo-card-color3-light: rgb(
var(--cros-sys-illo-card-color3-light-rgb)
);
--cros-sys-illo-card-color3-dark-rgb: 22, 52, 30;
--cros-sys-illo-card-color3-dark: rgb(
var(--cros-sys-illo-card-color3-dark-rgb)
);
--cros-sys-illo-card-color3-rgb: var(--cros-sys-illo-card-color3-light-rgb);
--cros-sys-illo-card-color3: var(--cros-sys-illo-card-color3-light);
--cros-sys-illo-card-on_color3-light-rgb: 13, 101, 45;
--cros-sys-illo-card-on_color3-light: rgb(
var(--cros-sys-illo-card-on_color3-light-rgb)
);
--cros-sys-illo-card-on_color3-dark-rgb: 168, 218, 181;
--cros-sys-illo-card-on_color3-dark: rgb(
var(--cros-sys-illo-card-on_color3-dark-rgb)
);
--cros-sys-illo-card-on_color3-rgb: var(
--cros-sys-illo-card-on_color3-light-rgb
);
--cros-sys-illo-card-on_color3: var(--cros-sys-illo-card-on_color3-light);
--cros-sys-illo-card-color4-light-rgb: 214, 229, 252;
--cros-sys-illo-card-color4-light: rgb(
var(--cros-sys-illo-card-color4-light-rgb)
);
--cros-sys-illo-card-color4-dark-rgb: 32, 49, 78;
--cros-sys-illo-card-color4-dark: rgb(
var(--cros-sys-illo-card-color4-dark-rgb)
);
--cros-sys-illo-card-color4-rgb: var(--cros-sys-illo-card-color4-light-rgb);
--cros-sys-illo-card-color4: var(--cros-sys-illo-card-color4-light);
--cros-sys-illo-card-on_color4-light-rgb: 24, 90, 188;
--cros-sys-illo-card-on_color4-light: rgb(
var(--cros-sys-illo-card-on_color4-light-rgb)
);
--cros-sys-illo-card-on_color4-dark-rgb: 174, 203, 250;
--cros-sys-illo-card-on_color4-dark: rgb(
var(--cros-sys-illo-card-on_color4-dark-rgb)
);
--cros-sys-illo-card-on_color4-rgb: var(
--cros-sys-illo-card-on_color4-light-rgb
);
--cros-sys-illo-card-on_color4: var(--cros-sys-illo-card-on_color4-light);
--cros-sys-illo-card-color5-light-rgb: 244, 227, 254;
--cros-sys-illo-card-color5-light: rgb(
var(--cros-sys-illo-card-color5-light-rgb)
);
--cros-sys-illo-card-color5-dark-rgb: 67, 51, 85;
--cros-sys-illo-card-color5-dark: rgb(
var(--cros-sys-illo-card-color5-dark-rgb)
);
--cros-sys-illo-card-color5-rgb: var(--cros-sys-illo-card-color5-light-rgb);
--cros-sys-illo-card-color5: var(--cros-sys-illo-card-color5-light);
--cros-sys-illo-card-on_color5-light-rgb: 117, 9, 155;
--cros-sys-illo-card-on_color5-light: rgb(
var(--cros-sys-illo-card-on_color5-light-rgb)
);
--cros-sys-illo-card-on_color5-dark-rgb: 215, 174, 251;
--cros-sys-illo-card-on_color5-dark: rgb(
var(--cros-sys-illo-card-on_color5-dark-rgb)
);
--cros-sys-illo-card-on_color5-rgb: var(
--cros-sys-illo-card-on_color5-light-rgb
);
--cros-sys-illo-card-on_color5: var(--cros-sys-illo-card-on_color5-light);
--cros-sys-illo-analog-rgb: var(--cros-ref-sparkle_analog70-rgb);
--cros-sys-illo-analog: var(--cros-ref-sparkle_analog70);
--cros-sys-illo-muted-rgb: var(--cros-ref-sparkle_muted80-rgb);
--cros-sys-illo-muted: var(--cros-ref-sparkle_muted80);
--cros-sys-illo-complement-rgb: var(--cros-ref-sparkle_complement90-rgb);
--cros-sys-illo-complement: var(--cros-ref-sparkle_complement90);
--cros-sys-illo-on_gradient-rgb: var(--cros-ref-neutral10-rgb);
--cros-sys-illo-on_gradient: var(--cros-ref-neutral10);
--cros-sys-illo-elevated-color1-1-rgb: var(--cros-sys-illo-color1-1-rgb);
--cros-sys-illo-elevated-color1-1: var(--cros-sys-illo-color1-1);
--cros-sys-illo-elevated-color1-2-rgb: var(--cros-sys-illo-color1-2-rgb);
--cros-sys-illo-elevated-color1-2: var(--cros-sys-illo-color1-2);
--cros-sys-illo-elevated-base-rgb: var(--cros-sys-illo-base-rgb);
--cros-sys-illo-elevated-base: var(--cros-sys-illo-base);
--cros-sys-illo-elevated-secondary-rgb: var(--cros-sys-illo-secondary-rgb);
--cros-sys-illo-elevated-secondary: var(--cros-sys-illo-secondary);
--cros-sys-illo-on_primary_container-rgb: var(
--cros-sys-on_primary_container-rgb
);
--cros-sys-illo-on_primary_container: var(--cros-sys-on_primary_container);
--cros-sys-gaming_control_button_default-rgb: 161, 0, 188;
--cros-sys-gaming_control_button_default: rgb(
var(--cros-sys-gaming_control_button_default-rgb)
);
--cros-sys-gaming_control_button_hover-rgb: 201, 0, 235;
--cros-sys-gaming_control_button_hover: rgb(
var(--cros-sys-gaming_control_button_hover-rgb)
);
--cros-sys-gaming_control_button_border_hover-rgb: 249, 172, 255;
--cros-sys-gaming_control_button_border_hover: rgb(
var(--cros-sys-gaming_control_button_border_hover-rgb)
);
--cros-sys-gaming-window_button_border-rgb: var(--cros-sys-black-rgb);
--cros-sys-gaming-window_button_border: rgba(
var(--cros-sys-gaming-window_button_border-rgb),
0.08
);
--cros-sys-file_ms_excel-rgb: 22, 167, 101;
--cros-sys-file_ms_excel: rgb(var(--cros-sys-file_ms_excel-rgb));
--cros-sys-file_ms_word-rgb: 73, 134, 231;
--cros-sys-file_ms_word: rgb(var(--cros-sys-file_ms_word-rgb));
--cros-sys-file_ms_ppt-rgb: 255, 118, 55;
--cros-sys-file_ms_ppt: rgb(var(--cros-sys-file_ms_ppt-rgb));
--cros-sys-file_site-rgb: 71, 88, 181;
--cros-sys-file_site: rgb(var(--cros-sys-file_site-rgb));
--cros-sys-file_form-rgb: 114, 72, 185;
--cros-sys-file_form: rgb(var(--cros-sys-file_form-rgb));
}
@container style(--dark-theme: 1) {
body {
--cros-sys-primary-rgb: var(--cros-sys-primary-dark-rgb);
--cros-sys-primary: var(--cros-sys-primary-dark);
--cros-sys-inverse_primary-rgb: var(--cros-ref-primary40-rgb);
--cros-sys-inverse_primary: var(--cros-ref-primary40);
--cros-sys-on_primary-rgb: var(--cros-sys-on_primary-dark-rgb);
--cros-sys-on_primary: var(--cros-sys-on_primary-dark);
--cros-sys-inverse_on_primary-rgb: var(--cros-ref-primary100-rgb);
--cros-sys-inverse_on_primary: var(--cros-ref-primary100);
--cros-sys-primary_container: color-mix(
in srgb,
rgb(var(--cros-ref-primary30-rgb)) 8%,
var(--cros-ref-secondary30)
);
--cros-sys-on_primary_container-rgb: var(--cros-ref-primary90-rgb);
--cros-sys-on_primary_container: var(--cros-ref-primary90);
--cros-sys-secondary-rgb: var(--cros-sys-secondary-dark-rgb);
--cros-sys-secondary: var(--cros-sys-secondary-dark);
--cros-sys-on_secondary-rgb: var(--cros-ref-secondary20-rgb);
--cros-sys-on_secondary: var(--cros-ref-secondary20);
--cros-sys-secondary_container-rgb: var(--cros-ref-secondary30-rgb);
--cros-sys-secondary_container: var(--cros-ref-secondary30);
--cros-sys-on_secondary_container-rgb: var(--cros-ref-secondary90-rgb);
--cros-sys-on_secondary_container: var(--cros-ref-secondary90);
--cros-sys-tertiary-rgb: var(--cros-ref-tertiary80-rgb);
--cros-sys-tertiary: var(--cros-ref-tertiary80);
--cros-sys-on_tertiary-rgb: var(--cros-ref-tertiary20-rgb);
--cros-sys-on_tertiary: var(--cros-ref-tertiary20);
--cros-sys-tertiary_container-rgb: var(--cros-ref-tertiary30-rgb);
--cros-sys-tertiary_container: var(--cros-ref-tertiary30);
--cros-sys-on_tertiary_container-rgb: var(--cros-ref-tertiary90-rgb);
--cros-sys-on_tertiary_container: var(--cros-ref-tertiary90);
--cros-sys-error-rgb: var(--cros-ref-red80-rgb);
--cros-sys-error: var(--cros-ref-red80);
--cros-sys-on_error-rgb: var(--cros-ref-error20-rgb);
--cros-sys-on_error: var(--cros-ref-error20);
--cros-sys-error_container: color-mix(
in srgb,
rgb(var(--cros-ref-red80-rgb)) 20%,
rgb(0 0 0)
);
--cros-sys-on_error_container-rgb: var(--cros-ref-red80-rgb);
--cros-sys-on_error_container: var(--cros-ref-red80);
--cros-sys-error_highlight-rgb: var(--cros-ref-error80-rgb);
--cros-sys-error_highlight: rgba(var(--cros-sys-error_highlight-rgb), 0.3);
--cros-sys-inverse_error-rgb: var(--cros-ref-error40-rgb);
--cros-sys-inverse_error: var(--cros-ref-error40);
--cros-sys-inverse_on_error-rgb: var(--cros-ref-error100-rgb);
--cros-sys-inverse_on_error: var(--cros-ref-error100);
--cros-sys-surface_variant-rgb: var(--cros-ref-neutralvariant30-rgb);
--cros-sys-surface_variant: var(--cros-ref-neutralvariant30);
--cros-sys-on_surface_variant-rgb: var(
--cros-sys-on_surface_variant-dark-rgb
);
--cros-sys-on_surface_variant: var(--cros-sys-on_surface_variant-dark);
--cros-sys-outline-rgb: var(--cros-ref-neutralvariant60-rgb);
--cros-sys-outline: var(--cros-ref-neutralvariant60);
--cros-sys-separator-rgb: var(--cros-ref-neutral90-rgb);
--cros-sys-separator: rgba(var(--cros-sys-separator-rgb), 0.14);
--cros-sys-white-rgb: var(--cros-ref-neutral100-rgb);
--cros-sys-white: var(--cros-ref-neutral100);
--cros-sys-black-rgb: var(--cros-ref-neutral0-rgb);
--cros-sys-black: var(--cros-ref-neutral0);
--cros-sys-header-rgb: var(--cros-ref-secondary12-rgb);
--cros-sys-header: var(--cros-ref-secondary12);
--cros-sys-header_unfocused: color-mix(
in srgb,
rgb(var(--cros-ref-secondary12-rgb)) 60%,
var(--cros-ref-neutral25)
);
--cros-sys-app_base_shaded-rgb: var(--cros-ref-neutral0-rgb);
--cros-sys-app_base_shaded: var(--cros-ref-neutral0);
--cros-sys-app_base-rgb: var(--cros-ref-neutral8-rgb);
--cros-sys-app_base: var(--cros-ref-neutral8);
--cros-sys-base_highlight: color-mix(
in srgb,
rgb(var(--cros-ref-primary70-rgb)) 28.000000000000004%,
var(--cros-ref-neutral15)
);
--cros-sys-on_base_highlight-rgb: var(--cros-ref-neutral0-rgb);
--cros-sys-on_base_highlight: rgba(
var(--cros-sys-on_base_highlight-rgb),
0.32
);
--cros-sys-base_elevated-rgb: var(--cros-sys-base_elevated-dark-rgb);
--cros-sys-base_elevated: var(--cros-sys-base_elevated-dark);
--cros-sys-system_base-rgb: var(--cros-ref-neutralvariant0-rgb);
--cros-sys-system_base: var(--cros-ref-neutralvariant0);
--cros-sys-system_base_elevated-rgb: var(--cros-sys-surface3-rgb);
--cros-sys-system_base_elevated: rgba(
var(--cros-sys-system_base_elevated-rgb),
0.9
);
--cros-sys-system_base_elevated_opaque-rgb: var(--cros-sys-surface3-rgb);
--cros-sys-system_base_elevated_opaque: var(--cros-sys-surface3);
--cros-sys-surface-rgb: var(--cros-ref-neutral10-rgb);
--cros-sys-surface: var(--cros-ref-neutral10);
--cros-sys-surface1: color-mix(
in srgb,
rgb(var(--cros-ref-primary80-rgb)) 5%,
var(--cros-ref-neutral10)
);
--cros-sys-surface2: color-mix(
in srgb,
rgb(var(--cros-ref-primary80-rgb)) 8%,
var(--cros-ref-neutral10)
);
--cros-sys-surface3: color-mix(
in srgb,
rgb(var(--cros-ref-primary80-rgb)) 11%,
var(--cros-ref-neutral10)
);
--cros-sys-surface4: color-mix(
in srgb,
rgb(var(--cros-ref-primary80-rgb)) 12%,
var(--cros-ref-neutral10)
);
--cros-sys-surface5: color-mix(
in srgb,
rgb(var(--cros-ref-primary80-rgb)) 14.000000000000002%,
var(--cros-ref-neutral10)
);
--cros-sys-scrim-rgb: var(--cros-ref-neutralvariant0-rgb);
--cros-sys-scrim: rgba(var(--cros-sys-scrim-rgb), 0.6);
--cros-sys-scrim2-rgb: var(--cros-ref-secondary30-rgb);
--cros-sys-scrim2: rgba(var(--cros-sys-scrim2-rgb), 0.48);
--cros-sys-inverse_surface-rgb: var(--cros-ref-neutral90-rgb);
--cros-sys-inverse_surface: var(--cros-ref-neutral90);
--cros-sys-scrollbar-rgb: var(--cros-ref-neutralvariant50-rgb);
--cros-sys-scrollbar: rgba(var(--cros-sys-scrollbar-rgb), 0.6);
--cros-sys-scrollbar_hover-rgb: var(--cros-ref-neutralvariant90-rgb);
--cros-sys-scrollbar_hover: rgba(var(--cros-sys-scrollbar_hover-rgb), 0.6);
--cros-sys-scrollbar_border-rgb: var(--cros-ref-neutralvariant0-rgb);
--cros-sys-scrollbar_border: rgba(
var(--cros-sys-scrollbar_border-rgb),
0.14
);
--cros-sys-input_field_on_shaded-rgb: var(--cros-ref-neutral50-rgb);
--cros-sys-input_field_on_shaded: rgba(
var(--cros-sys-input_field_on_shaded-rgb),
0.4
);
--cros-sys-input_field_on_base-rgb: var(--cros-ref-neutral0-rgb);
--cros-sys-input_field_on_base: rgba(
var(--cros-sys-input_field_on_base-rgb),
0.6
);
--cros-sys-system_on_base-rgb: var(--cros-ref-neutralvariant40-rgb);
--cros-sys-system_on_base: rgba(var(--cros-sys-system_on_base-rgb), 0.5);
--cros-sys-system_on_base_opaque-rgb: var(--cros-ref-neutralvariant30-rgb);
--cros-sys-system_on_base_opaque: var(--cros-ref-neutralvariant30);
--cros-sys-system_on_base1-rgb: var(--cros-ref-neutral99-rgb);
--cros-sys-system_on_base1: rgba(var(--cros-sys-system_on_base1-rgb), 0.1);
--cros-sys-system_primary_container-rgb: var(--cros-ref-primary80-rgb);
--cros-sys-system_primary_container: var(--cros-ref-primary80);
--cros-sys-system_on_primary_container-rgb: var(--cros-ref-primary10-rgb);
--cros-sys-system_on_primary_container: var(--cros-ref-primary10);
--cros-sys-on_success_container-rgb: var(--cros-ref-green90-rgb);
--cros-sys-on_success_container: var(--cros-ref-green90);
--cros-sys-success_container: color-mix(
in srgb,
rgb(var(--cros-ref-green95-rgb)) 20%,
rgb(0 0 0)
);
--cros-sys-success-rgb: var(--cros-ref-green80-rgb);
--cros-sys-success: var(--cros-ref-green80);
--cros-sys-on_warning_container-rgb: var(--cros-ref-yellow80-rgb);
--cros-sys-on_warning_container: var(--cros-ref-yellow80);
--cros-sys-warning_container: color-mix(
in srgb,
rgb(var(--cros-ref-yellow90-rgb)) 20%,
rgb(0 0 0)
);
--cros-sys-system_on_warning_container-rgb: var(--cros-ref-yellow10-rgb);
--cros-sys-system_on_warning_container: var(--cros-ref-yellow10);
--cros-sys-system_warning_container-rgb: var(--cros-ref-yellow80-rgb);
--cros-sys-system_warning_container: var(--cros-ref-yellow80);
--cros-sys-system_warning_inverse-rgb: var(--cros-ref-yellow80-rgb);
--cros-sys-system_warning_inverse: var(--cros-ref-yellow80);
--cros-sys-warning-rgb: var(--cros-ref-yellow80-rgb);
--cros-sys-warning: var(--cros-ref-yellow80);
--cros-sys-system_on_error_container-rgb: var(--cros-ref-red10-rgb);
--cros-sys-system_on_error_container: var(--cros-ref-red10);
--cros-sys-system_error_container-rgb: var(--cros-ref-red80-rgb);
--cros-sys-system_error_container: var(--cros-ref-red80);
--cros-sys-on_progress_container-rgb: var(--cros-ref-blue80-rgb);
--cros-sys-on_progress_container: var(--cros-ref-blue80);
--cros-sys-progress_container: color-mix(
in srgb,
rgb(var(--cros-ref-blue80-rgb)) 20%,
rgb(0 0 0)
);
--cros-sys-progress-rgb: var(--cros-ref-blue80-rgb);
--cros-sys-progress: var(--cros-ref-blue80);
--cros-sys-on_surface-rgb: var(--cros-sys-on_surface-dark-rgb);
--cros-sys-on_surface: var(--cros-sys-on_surface-dark);
--cros-sys-inverse_on_surface-rgb: var(--cros-ref-neutral10-rgb);
--cros-sys-inverse_on_surface: var(--cros-ref-neutral10);
--cros-sys-on_surface_bodytext-rgb: var(--cros-ref-neutral70-rgb);
--cros-sys-on_surface_bodytext: var(--cros-ref-neutral70);
--cros-sys-inverse_whiteblack-rgb: var(--cros-ref-neutral100-rgb);
--cros-sys-inverse_whiteblack: var(--cros-ref-neutral100);
--cros-sys-disabled-rgb: var(--cros-sys-on_surface-rgb);
--cros-sys-disabled: rgba(var(--cros-sys-disabled-rgb), 0.38);
--cros-sys-disabled_opaque-rgb: var(--cros-ref-neutralvariant30-rgb);
--cros-sys-disabled_opaque: var(--cros-ref-neutralvariant30);
--cros-sys-privacy_indicator-rgb: 55, 190, 95;
--cros-sys-privacy_indicator: rgb(var(--cros-sys-privacy_indicator-rgb));
--cros-sys-hover_on_prominent-rgb: var(--cros-ref-neutral10-rgb);
--cros-sys-hover_on_prominent: rgba(
var(--cros-sys-hover_on_prominent-rgb),
0.06
);
--cros-sys-inverse_hover_on_prominent-rgb: var(--cros-ref-neutral99-rgb);
--cros-sys-inverse_hover_on_prominent: rgba(
var(--cros-sys-inverse_hover_on_prominent-rgb),
0.1
);
--cros-sys-hover_on_subtle-rgb: var(--cros-ref-neutral99-rgb);
--cros-sys-hover_on_subtle: rgba(var(--cros-sys-hover_on_subtle-rgb), 0.1);
--cros-sys-inverse_hover_on_subtle-rgb: var(--cros-ref-neutral10-rgb);
--cros-sys-inverse_hover_on_subtle: rgba(
var(--cros-sys-inverse_hover_on_subtle-rgb),
0.06
);
--cros-sys-ripple_primary-rgb: var(--cros-ref-primary60-rgb);
--cros-sys-ripple_primary: rgba(var(--cros-sys-ripple_primary-rgb), 0.32);
--cros-sys-inverse_ripple_primary-rgb: var(--cros-ref-primary70-rgb);
--cros-sys-inverse_ripple_primary: rgba(
var(--cros-sys-inverse_ripple_primary-rgb),
0.32
);
--cros-sys-ripple_neutral_on_prominent-rgb: var(--cros-ref-neutral10-rgb);
--cros-sys-ripple_neutral_on_prominent: rgba(
var(--cros-sys-ripple_neutral_on_prominent-rgb),
0.08
);
--cros-sys-ripple_neutral_on_subtle-rgb: var(--cros-ref-neutral90-rgb);
--cros-sys-ripple_neutral_on_subtle: rgba(
var(--cros-sys-ripple_neutral_on_subtle-rgb),
0.16
);
--cros-sys-inverse_ripple_neutral_on_subtle-rgb: var(
--cros-ref-neutral10-rgb
);
--cros-sys-inverse_ripple_neutral_on_subtle: rgba(
var(--cros-sys-inverse_ripple_neutral_on_subtle-rgb),
0.12
);
--cros-sys-highlight_shape-rgb: var(--cros-ref-primary70-rgb);
--cros-sys-highlight_shape: rgba(var(--cros-sys-highlight_shape-rgb), 0.3);
--cros-sys-highlight_text-rgb: var(--cros-ref-primary70-rgb);
--cros-sys-highlight_text: rgba(var(--cros-sys-highlight_text-rgb), 0.6);
--cros-sys-system_highlight-rgb: var(--cros-ref-neutral100-rgb);
--cros-sys-system_highlight: rgba(
var(--cros-sys-system_highlight-rgb),
0.06
);
--cros-sys-system_highlight1-rgb: var(--cros-ref-neutral100-rgb);
--cros-sys-system_highlight1: rgba(
var(--cros-sys-system_highlight1-rgb),
0.06
);
--cros-sys-system_border1-rgb: var(--cros-ref-neutral0-rgb);
--cros-sys-system_border1: rgba(var(--cros-sys-system_border1-rgb), 0.08);
--cros-sys-focus_ring-rgb: var(--cros-ref-primary80-rgb);
--cros-sys-focus_ring: var(--cros-ref-primary80);
--cros-sys-inverse_focus_ring-rgb: var(--cros-ref-primary40-rgb);
--cros-sys-inverse_focus_ring: var(--cros-ref-primary40);
--cros-sys-focus_ring_on_primary_container-rgb: var(
--cros-ref-primary40-rgb
);
--cros-sys-focus_ring_on_primary_container: var(--cros-ref-primary40);
--cros-sys-shadow-rgb: var(--cros-ref-neutral0-rgb);
--cros-sys-shadow: var(--cros-ref-neutral0);
--cros-sys-pressed_on_prominent: color-mix(
in srgb,
var(--cros-sys-hover_on_prominent) 6%,
var(--cros-sys-ripple_neutral_on_prominent)
);
--cros-sys-pressed_on_subtle: color-mix(
in srgb,
var(--cros-sys-hover_on_subtle) 10%,
var(--cros-sys-ripple_neutral_on_subtle)
);
--cros-sys-analog-rgb: var(--cros-ref-sparkle_analog30-rgb);
--cros-sys-analog: var(--cros-ref-sparkle_analog30);
--cros-sys-analog_variant-rgb: var(--cros-ref-sparkle_analog40-rgb);
--cros-sys-analog_variant: var(--cros-ref-sparkle_analog40);
--cros-sys-muted-rgb: var(--cros-ref-sparkle_muted30-rgb);
--cros-sys-muted: var(--cros-ref-sparkle_muted30);
--cros-sys-muted_variant-rgb: var(--cros-ref-sparkle_muted40-rgb);
--cros-sys-muted_variant: var(--cros-ref-sparkle_muted40);
--cros-sys-complement-rgb: var(--cros-ref-sparkle_complement20-rgb);
--cros-sys-complement: var(--cros-ref-sparkle_complement20);
--cros-sys-complement_variant-rgb: var(--cros-ref-sparkle_complement30-rgb);
--cros-sys-complement_variant: var(--cros-ref-sparkle_complement30);
--cros-sys-illo-color1-rgb: var(--cros-sys-illo-color1-dark-rgb);
--cros-sys-illo-color1: var(--cros-sys-illo-color1-dark);
--cros-sys-illo-color1-1-rgb: var(--cros-sys-illo-color1-1-dark-rgb);
--cros-sys-illo-color1-1: var(--cros-sys-illo-color1-1-dark);
--cros-sys-illo-color1-2-rgb: var(--cros-sys-illo-color1-2-dark-rgb);
--cros-sys-illo-color1-2: var(--cros-sys-illo-color1-2-dark);
--cros-sys-illo-color2-rgb: var(--cros-sys-illo-color2-dark-rgb);
--cros-sys-illo-color2: var(--cros-sys-illo-color2-dark);
--cros-sys-illo-color3-rgb: var(--cros-sys-illo-color3-dark-rgb);
--cros-sys-illo-color3: var(--cros-sys-illo-color3-dark);
--cros-sys-illo-color4-rgb: var(--cros-sys-illo-color4-dark-rgb);
--cros-sys-illo-color4: var(--cros-sys-illo-color4-dark);
--cros-sys-illo-color5-rgb: var(--cros-sys-illo-color5-dark-rgb);
--cros-sys-illo-color5: var(--cros-sys-illo-color5-dark);
--cros-sys-illo-color6-rgb: var(--cros-sys-illo-color6-dark-rgb);
--cros-sys-illo-color6: var(--cros-sys-illo-color6-dark);
--cros-sys-illo-base-rgb: var(--cros-sys-illo-base-dark-rgb);
--cros-sys-illo-base: var(--cros-sys-illo-base-dark);
--cros-sys-illo-secondary-rgb: var(--cros-sys-illo-secondary-dark-rgb);
--cros-sys-illo-secondary: var(--cros-sys-illo-secondary-dark);
--cros-sys-illo-card-color1-rgb: var(--cros-sys-illo-card-color1-dark-rgb);
--cros-sys-illo-card-color1: var(--cros-sys-illo-card-color1-dark);
--cros-sys-illo-card-on_color1-rgb: var(
--cros-sys-illo-card-on_color1-dark-rgb
);
--cros-sys-illo-card-on_color1: var(--cros-sys-illo-card-on_color1-dark);
--cros-sys-illo-card-color2-rgb: var(--cros-sys-illo-card-color2-dark-rgb);
--cros-sys-illo-card-color2: var(--cros-sys-illo-card-color2-dark);
--cros-sys-illo-card-on_color2-rgb: var(
--cros-sys-illo-card-on_color2-dark-rgb
);
--cros-sys-illo-card-on_color2: var(--cros-sys-illo-card-on_color2-dark);
--cros-sys-illo-card-color3-rgb: var(--cros-sys-illo-card-color3-dark-rgb);
--cros-sys-illo-card-color3: var(--cros-sys-illo-card-color3-dark);
--cros-sys-illo-card-on_color3-rgb: var(
--cros-sys-illo-card-on_color3-dark-rgb
);
--cros-sys-illo-card-on_color3: var(--cros-sys-illo-card-on_color3-dark);
--cros-sys-illo-card-color4-rgb: var(--cros-sys-illo-card-color4-dark-rgb);
--cros-sys-illo-card-color4: var(--cros-sys-illo-card-color4-dark);
--cros-sys-illo-card-on_color4-rgb: var(
--cros-sys-illo-card-on_color4-dark-rgb
);
--cros-sys-illo-card-on_color4: var(--cros-sys-illo-card-on_color4-dark);
--cros-sys-illo-card-color5-rgb: var(--cros-sys-illo-card-color5-dark-rgb);
--cros-sys-illo-card-color5: var(--cros-sys-illo-card-color5-dark);
--cros-sys-illo-card-on_color5-rgb: var(
--cros-sys-illo-card-on_color5-dark-rgb
);
--cros-sys-illo-card-on_color5: var(--cros-sys-illo-card-on_color5-dark);
--cros-sys-gaming-window_button_border-rgb: var(--cros-sys-white-rgb);
--cros-sys-gaming-window_button_border: rgba(
var(--cros-sys-gaming-window_button_border-rgb),
0.08
);
--cros-sys-file_site-rgb: 140, 158, 255;
--cros-sys-file_site: rgb(var(--cros-sys-file_site-rgb));
--cros-sys-file_form-rgb: 180, 140, 255;
--cros-sys-file_form: rgb(var(--cros-sys-file_form-rgb));
}
}
Codebase Browser
chromium