ahrefs theme

dark-palette.css

:root {
    --white: #fff;
    --white90: #ededed;
    --white80a: rgba(255, 255, 255, 0.6);
    --white70a: rgba(255, 255, 255, 0.5);
    --white60: #848586;
    --white60a: rgba(255, 255, 255, 0.4);
    --white50a: rgba(255, 255, 255, 0.33);
    --white40: #676869;
    --white40a: rgba(255, 255, 255, 0.26);
    --white35a: rgba(255, 255, 255, 0.2);
    --white30: #515253;
    --white30a: rgba(255, 255, 255, 0.15);
    --white20: #474749;
    --white20a: rgba(255, 255, 255, 0.1);
    --white10: #424345;
    --white10a: rgba(255, 255, 255, 0.08);
    --white5: #3a3b3d;
    --white5a: rgba(255, 255, 255, 0.03);
    --gray: #323335;
    --gray70a: rgba(50, 51, 53, 0.7);
    --black90: #0d0d0d;
    --black90a: rgba(0, 0, 0, 0.9);
    --black80a: rgba(0, 0, 0, 0.5);
    --black40: #232426;
    --black40a: rgba(0, 0, 0, 0.3);
    --black30: #262729;
    --black20: #2a2b2d;
    --black20a: rgba(0, 0, 0, 0.16);
    --black10: #232426;
    --black10a: rgba(0, 0, 0, 0.08);
    --black5a: rgba(0, 0, 0, 0.04);
    --navy80: #d0daed;
    --navy60: #5881ad;
    --navy40: #475e77;
    --navy30: #415365;
    --navy25: #3e4c5a;
    --red80: #ff9b9b;
    --red70: #ff7070;
    --red60: #f23d3d;
    --red50: #cc3b3b;
    --red40: #a5393a;
    --red40a: rgba(242, 61, 61, 0.6);
    --red30: #7f3738;
    --red30a: rgba(242, 61, 61, 0.4);
    --red20: #6b3637;
    --red10: #583537;
    --red5: #453436;
    --salmon60: #f65022;
    --salmon30: #763c2d;
    --peach60: #fa6c11;
    --peach30: #7a4421;
    --orange90: #63412e;
    --orange80: #ffc480;
    --orange70: #ffa640;
    --orange60: #ff8800;
    --orange50: #ce740d;
    --orange40: #9f6019;
    --orange40a: rgba(255, 136, 0, 0.53);
    --orange30: #784a15;
    --orange20: #63412e;
    --orange10: #4a3a31;
    --orange10a: rgba(255, 98, 10, 0.12);
    --melon60: #fcab06;
    --melon30: #7b5719;
    --yellow80: #fdefb3;
    --yellow70: #fce892;
    --yellow60: #face0d;
    --yellow40: #a0881f;
    --yellow30: #735e00;
    --yellow10: #544d2e;
    --pear60: #c6c423;
    --pear30: #646927;
    --iris60: #7C69D1;
    --wasabi80: #d6f09e;
    --wasabi60: #92bb39;
    --wasabi40: #667e37;
    --wasabi30: #4a672e;
    --grass60: #5cb14f;
    --grass50: #4d9847;
    --grass30: #306636;
    --green80: #86e8b5;
    --green70: #36d984;
    --green60: #27a765;
    --green50: #2a8a59;
    --green40: #2c734f;
    --green40a: rgba(39, 167, 101, 0.55);
    --green30: #17643d;
    --green20: #22563c;
    --green10: #2e483b;
    --green10a: rgba(39, 167, 101, 0.18);
    --green5: #303d38;
    --blue80: #a6daff;
    --blue70: #80caff;
    --blue60: #3288d7;
    --blue50: #3275b2;
    --blue40: #32628e;
    --blue40a: rgba(50, 136, 215, 0.55);
    --blue30: #315270;
    --blue10: #304251;
    --blue10a: rgba(50, 136, 215, 0.18);
    --blue5: #313a43;
    --violet80: #cca7d1;
    --violet60: #984ea3;
    --violet40: #6a4272;
    --violet30: #5b3e61;
    --pink60: #D95090;
    --pink50: #BB4B80;
    --beige80: #dcbf9e;
    --beige70: #9a7750;
    --beige60: #886031;
    --beige30: #644d33;
    --cobalt90: #d9eaff;
    --cobalt80: #b2d5ff;
    --cobalt70: #87bdff;
    --cobalt60: #5fa3f5;
    --twitter60: #1ba6ff;
    --twitter50: #2a5c7e;
    --facebook60: #1164bb;
    --facebook50: #264465;
    --pinterest60: #bd2435;
    --pinterest50: #642e35;
    --linkedin60: #0077b5;
    --linkedin50: #204c63;
    --text--primary: var(--white90);
    --text--secondary: var(--white80a);
    --text--tertiary: var(--white50a);
    --text--dark: var(--navy80);
    --text--accent: var(--orange60);
    --text--danger: var(--red60);
    --text--dangerContrast: var(--red70);
    --text--success: var(--green60);
    --text--successContrast: var(--green70);
    --text--warning: var(--yellow60);
    --text--warningContrast: var(--yellow70);
    --text--info: var(--blue60);
    --text--debug: var(--violet60);
    --text--link: var(--blue70);
    --text--url: var(--green70);
    --text--badgeBlack: var(--black90);
    --text--twitter: var(--twitter60);
    --text--facebook: var(--facebook60);
    --text--pinterest: var(--pinterest60);
    --text--linkedin: var(--linkedin60);
    --border--line: var(--white20);
    --border--lineAlpha: var(--white20a);
    --border--controlDisabled: var(--white30);
    --border--control: var(--white40);
    --border--controlAlpha: var(--white40a);
    --border--controlHover: var(--white60);
    --border--controlHoverAlpha: var(--white60a);
    --border--selected: var(--beige60);
    --border--selectedHover: var(--beige70);
    --border--selectedActive: var(--beige60);
    --border--selectedMuted: var(--beige30);
    --border--accent: var(--orange60);
    --border--danger: var(--red60);
    --border--dangerMuted: var(--red30a);
    --border--dangerMutedHover: var(--red40a);
    --border--success: var(--green60);
    --border--warning: var(--yellow60);
    --border--info: var(--blue60);
    --border--linkBase: var(--blue40a);
    --border--linkNeutral: var(--white50a);
    --border--linkMuted: var(--white40a);
    --border--linkSuccess: var(--green40a);
    --border--linkDanger: var(--red40a);
    --border--linkWarning: var(--yellow40);
    --border--linkAccent: var(--orange40a);
    --border--linkUrl: var(--green40a);
    --background--page: var(--black40);
    --background--box: var(--gray);
    --background--controlDisabled: var(--white10);
    --background--controlDisabledAlpha: var(--white10a);
    --background--boxDark: var(--black20);
    --background--boxDarkAlpha: var(--black5a);
    --background--boxDarker: var(--black30);
    --background--negative: var(--white);
    --background--overlay: var(--black80a);
    --background--overlayDark: var(--black90a);
    --background--overlayBox: var(--gray70a);
    --background--neutral: var(--white60a);
    --background--controlHover: var(--white10a);
    --background--controlHoverMuted: var(--white5);
    --background--boxHover: var(--white5a);
    --background--sidebarItemHover: var(--white5a);
    --background--controlActive: var(--white40a);
    --background--checkboxHover: var(--black20a);
    --background--checkboxActive: var(--black40a);
    --background--sidebarItemSelected: var(--white10a);
    --background--neutralMidMuted: var(--white30);
    --background--neutralMidMutedAlpha: var(--white30a);
    --background--code: var(--white10);
    --background--codeAlpha: var(--white10a);
    --background--knob: var(--white);
    --background--track: var(--white30a);
    --background--trackHover: var(--white35a);
    --background--accent: var(--orange60);
    --background--accentHover: var(--orange50);
    --background--accentActive: var(--orange40);
    --background--accentMidMuted: var(--orange30);
    --background--accentMuted: var(--orange10);
    --background--accentUnderMuted: var(--orange90);
    --background--selected: var(--orange30);
    --background--selectedActive: var(--orange20);
    --background--selectedMuted: var(--orange10);
    --background--selectedMutedAlpha: var(--orange10a);
    --background--danger: var(--red60);
    --background--dangerHover: var(--red50);
    --background--dangerActive: var(--red40);
    --background--dangerMidMuted: var(--red30);
    --background--dangerMuted: var(--red10);
    --background--dangerHardMuted: var(--red5);
    --background--dangerNofillHover: var(--red10);
    --background--dangerNofillActive: var(--red30);
    --background--success: var(--green60);
    --background--successHover: var(--green50);
    --background--successMidMuted: var(--green30);
    --background--successMuted: var(--green10);
    --background--successHardMuted: var(--green5);
    --background--warning: var(--yellow60);
    --background--warningMidMuted: var(--yellow30);
    --background--warningMuted: var(--yellow10);
    --background--info: var(--blue60);
    --background--infoMidMuted: var(--blue30);
    --background--infoMuted: var(--blue10);
    --background--twitter: var(--twitter60);
    --background--facebook: var(--facebook60);
    --background--pinterest: var(--pinterest60);
    --background--linkedin: var(--linkedin60);
    --background--avatar1: var(--red60);
    --background--avatar2: var(--orange60);
    --background--avatar3: var(--yellow60);
    --background--avatar4: var(--wasabi60);
    --background--avatar5: var(--green60);
    --background--avatar6: var(--blue60);
    --background--avatar7: var(--cobalt60);
    --background--avatar8: var(--violet60);
    --background--avatar9: var(--beige60);
    --background--avatar10: var(--red70);
    --background--avatar11: var(--orange70);
    --background--avatar12: var(--green70);
    --background--avatar13: var(--cobalt70);
    --background--avatar14: var(--red80);
    --background--avatar15: var(--orange80);
    --background--avatar16: var(--yellow80);
    --background--avatar17: var(--wasabi80);
    --background--avatar18: var(--green80);
    --background--avatar19: var(--blue80);
    --background--avatar20: var(--violet80);
    --background--avatar21: var(--beige80);
    --shadow--elevation1: var(--black5a);
    --shadow--elevation1Bottom: var(--black10a);
    --shadow--elevation2: var(--black20a);
    --shadow--elevation3: var(--black40a);
    --shadow--border: var(--white30a);
    --chart--empty: var(--white20);
    --chart--line: var(--white20a);
    --chart--caption: var(--white50a);
    --chart--black: var(--black90);
    --chart--gray: var(--white60);
    --chart--grayMidMuted: var(--white40);
    --chart--grayMuted: var(--white30);
    --chart--grayBg: var(--white10);
    --chart--blue: var(--blue60);
    --chart--blueSoftMuted: var(--blue50);
    --chart--blueMidMuted: var(--blue40);
    --chart--blueMuted: var(--blue30);
    --chart--blueBg: var(--blue10);
    --chart--blueBgAlpha: var(--blue10a);
    --chart--blueMutedBg: var(--blue5);
    --chart--blueContrast: var(--blue80);
    --chart--orange: var(--orange60);
    --chart--orangeSoftMuted: var(--orange50);
    --chart--orangeMidMuted: var(--orange40);
    --chart--orangeMuted: var(--orange30);
    --chart--orangeContrast: var(--orange80);
    --chart--orangeBg: var(--orange10);
    --chart--orangeBgAlpha: var(--orange10a);
    --chart--melon: var(--melon60);
    --chart--pear: var(--pear60);
    --chart--iris: var(--iris60);
    --chart--wasabi: var(--wasabi60);
    --chart--wasabiMidMuted: var(--wasabi40);
    --chart--grass: var(--grass60);
    --chart--grassSoftMuted: var(--grass50);
    --chart--green: var(--green60);
    --chart--greenMidMuted: var(--green40);
    --chart--greenMuted: var(--green30);
    --chart--greenHardMuted: var(--green20);
    --chart--greenBg: var(--green10);
    --chart--greenBgAlpha: var(--green10a);
    --chart--greenMutedBg: var(--green5);
    --chart--greenMidContrast: var(--green70);
    --chart--greenContrast: var(--green80);
    --chart--red: var(--red60);
    --chart--redMidMuted: var(--red40);
    --chart--redMuted: var(--red30);
    --chart--redHardMuted: var(--red20);
    --chart--redBg: var(--red10);
    --chart--redMutedBg: var(--red5);
    --chart--redMidContrast: var(--red70);
    --chart--redContrast: var(--red80);
    --chart--salmon: var(--salmon60);
    --chart--peach: var(--peach60);
    --chart--violet: var(--violet60);
    --chart--violetMidMuted: var(--violet40);
    --chart--violetMuted: var(--violet30);
    --chart--violetContrast: var(--violet80);
    --chart--pink: var(--pink50);
    --chart--yellow: var(--yellow60);
    --chart--yellowMidMuted: var(--yellow40);
    --chart--yellowMuted: var(--yellow30);
    --chart--yellowContrast: var(--yellow80);
    --chart--navy: var(--navy60);
    --chart--navyMidMuted: var(--navy40);
    --chart--navyMuted: var(--navy30);
    --chart--navySemihardMuted: var(--navy25);
    --chart--navyContrast: var(--navy80);
    --chart--cobalt: var(--cobalt60);
    --chart--cobaltMidContrast: var(--cobalt70);
    --chart--cobaltContrast: var(--cobalt80);
    --chart--cobaltHardContrast: var(--cobalt90);
    --chart--kd1: var(--green30);
    --chart--kd2: var(--grass30);
    --chart--kd3: var(--wasabi30);
    --chart--kd4: var(--pear30);
    --chart--kd5: var(--yellow30);
    --chart--kd6: var(--melon30);
    --chart--kd7: var(--orange30);
    --chart--kd8: var(--peach30);
    --chart--kd9: var(--salmon30);
    --chart--kd10: var(--red30);
    --image--gray1: var(--white80a);
    --image--gray2: var(--white70a);
    --image--gray3: var(--white60a);
    --image--gray4: var(--white35a);
    --alt-gray: #323335;
    --alt-black90: #0a0b0d;
    --alt-white: #fff;
    --alt-white90: #ededed;
    --alt-white80a: rgba(255, 255, 255, 0.6);
    --alt-white60a: rgba(255, 255, 255, 0.4);
    --alt-white50a: rgba(255, 255, 255, 0.33);
    --alt-white40a: rgba(255, 255, 255, 0.26);
    --alt-white35a: rgba(255, 255, 255, 0.2);
    --alt-white30a: rgba(255, 255, 255, 0.15);
    --alt-white20a: rgba(255, 255, 255, 0.1);
    --alt-white10: #434F67;
    --alt-white10a: rgba(255, 255, 255, 0.08);
    --alt-yellow: #fce892;
    --alt-green: #36d984;
    --alt-violet: #db95e5;
    --alt-text--primary: var(--alt-white90);
    --alt-text--secondary: var(--alt-white80a);
    --alt-text--tertiary: var(--alt-white50a);
    --alt-text--negative: var(--alt-black90);
    --alt-text--onBrightBg: var(--alt-white);
    --alt-text--operator: var(--alt-yellow);
    --alt-text--combinator: var(--alt-green);
    --alt-text--field: var(--alt-violet);
    --alt-border--line: var(--alt-white20a);
    --alt-border--controlDisabled: var(--alt-white20a);
    --alt-border--control: var(--alt-white40a);
    --alt-border--controlHover: var(--alt-white60a);
    --alt-border--linkMuted: var(--alt-white40a);
    --alt-border--linkAccent: var(--alt-white50a);
    --alt-background--box: var(--alt-gray);
    --alt-background--control: var(--alt-white30a);
    --alt-background--controlHover: var(--alt-white35a);
    --alt-background--controlActive: var(--alt-white40a);
    --alt-background--neutralMuted: var(--alt-white10a);
    --alt-background--controlDisabled: var(--alt-white10);
    --alt-background--controlDisabledAlpha: var(--alt-white10a);
    --alt-background--boxHover: var(--alt-white10a);
    --alt-background--badgeWhite: var(--alt-white);
    --ke-volume-empty--gradient: url(#gradient-dark)
}

light-palette.css

:root {
  --white: #fff;
  --white70a: rgba(255, 255, 255, 0.7);

  --gray90: #333;
  --gray90a: rgba(0, 0, 0, 0.8);
  --gray60: #7b7b7b;
  --gray60a: rgba(0, 0, 0, 0.52);
  --gray50: #adadad;
  --gray50a: rgba(0, 0, 0, 0.32);
  --gray40: #ccc;
  --gray40a: rgba(0, 0, 0, 0.2);
  --gray35a: rgba(0, 0, 0, 0.15);
  --gray30: #ebebee;
  --gray30a: rgba(0, 0, 0, 0.08);
  --gray20: #f5f5f5;
  --gray20a: rgba(0, 0, 0, 0.04);
  --gray5a: rgba(0, 0, 0, 0.01);

  --dark90: #2e3c56;
  --dark50: #b6bbc4;
  --dark35: #dadde1;
  --dark30: #eaecee;
  --dark30a: rgba(46, 60, 86, 0.1);
  --dark20: #f0f1f3;
  --dark20a: rgba(46, 60, 86, 0.07);
  --dark10: #f9f9fa;
  --dark10a: rgba(46, 60, 86, 0.03);

  --navy90: #153b64;
  --navy80: #26496F;
  --navy70: #38587b;
  --navy60: #607995;
  --navy50: #98a8ba;
  --navy40: #c9d2db;
  --navy35: #dae0e7;

  --red80: #a10000;
  --red70: #cf0000;
  --red60: #f13333;
  --red50: #f89999;
  --red50a: rgba(241, 51, 51, 0.5);
  --red40: #facccc;
  --red30: #fddedf;
  --red20: #ffebec;
  --red10: #fff5f5;

  --salmon60: #f65022;
  --salmon50: #fdaa9f;

  --peach60: #fa6c11;
  --peach50: #ffbf99;

  --orange90: #ffe7cc;
  --orange80: #cc6c00;
  --orange70: #e57a00;
  --orange60: #ff8800;
  --orange55: #FFA744;
  --orange50: #ffc788;
  --orange50a: rgba(255, 136, 0, 0.47);
  --orange40: #ffdbb3;
  --orange40a: rgba(255, 136, 0, 0.3);
  --orange20: #fff3e6;
  --orange20a: rgba(255, 136, 0, 0.1);

  --melon60: #fdab06;
  --melon50: #ffda8a;

  --yellow80: #bf9c00;
  --yellow70: #ddb507;
  --yellow60: #face0d;
  --yellow50: #fcdf62;
  --yellow40: #fce892;
  --yellow20: #fdf5cf;

  --pear60: #cbc521;
  --pear50: #e8e699;

  --iris60: #7362BF;

  --wasabi60: #92bb39;
  --wasabi50: #d2e3ab;
  --wasabi80: #577710;

  --grass60: #5cb14f;
  --grass55: #94ce92;
  --grass50: #b2ddb6;

  --green80: #006330;
  --green70: #008a43;
  --green60: #27a765;
  --green50: #8ad0ab;
  --green50a: rgba(39, 167, 101, 0.53);
  --green40: #c1e8d4;
  --green30: #d7f2e4;
  --green20: #e7faf0;
  --green20a: rgba(  11, 203, 104, 0.1);
  --green10: #f3fcf8;

  --blue80: #25659f;
  --blue60: #3288d7;
  --blue55: #6caae2;
  --blue50: #a7ccee;
  --blue50a: rgba(50, 136, 215, 0.43);
  --blue40: #cce1f5;
  --blue20: #e5f2fc;
  --blue20a: rgba(16, 137, 249, 0.11);
  --blue10: #f5fafe;

  --violet80: #6a3772;
  --violet60: #984ea3;
  --violet50: #d1afd6;
  --violet40: #e5d3e8;
  --violet20: #f2eaf4;

  --pink60: #D95090;
  --pink55: #E485B1;

  --beige80: #8b6944;
  --beige70: #ba9369;
  --beige60: #ccaf8f;
  --beige50: #ebcaa5;
  --beige30: #f3dfc9;

  --cobalt90: #001836;
  --cobalt80: #00306a;
  --cobalt70: #00479e;
  --cobalt60: #1968BA;

  --twitter60: #1ba6ff;
  --twitter50: #76caff;

  --facebook60: #1164bb;
  --facebook50: #70a2d6;

  --pinterest60: #bd081c;
  --pinterest50: #d76b77;

  --linkedin60: #0077b5;
  --linkedin50: #4da0cb;

  /* text */
  --text--primary: var(--gray90);
  --text--secondary: var(--gray60a);
  --text--tertiary: var(--gray50a);
  --text--dark: var(--dark90);

  --text--accent: var(--orange60);

  --text--danger: var(--red60);
  --text--dangerContrast: var(--red70);

  --text--success: var(--green60);
  --text--successContrast: var(--green70);

  --text--warning: var(--yellow60);
  --text--warningContrast: var(--yellow80);

  --text--info: var(--blue60);
  --text--debug: var(--violet60);

  --text--link: var(--cobalt70);
  --text--url: var(--green70);

  --text--badgeBlack: var(--gray90);

  --text--twitter: var(--twitter60);
  --text--facebook: var(--facebook60);
  --text--pinterest: var(--pinterest60);
  --text--linkedin: var(--linkedin60);

  /* border */
  --border--line: var(--gray30);
  --border--lineAlpha: var(--gray30a);
  --border--controlDisabled: var(--dark35);

  --border--control: var(--gray40);
  --border--controlAlpha: var(--gray40a);
  --border--controlHover: var(--gray50);
  --border--controlHoverAlpha: var(--gray50a);

  --border--selected: var(--beige50);
  --border--selectedHover: var(--beige60);
  --border--selectedActive: var(--beige70);
  --border--selectedMuted: var(--beige30);

  --border--accent: var(--orange60);

  --border--danger: var(--red60);
  --border--dangerMuted: var(--red40);
  --border--dangerMutedHover: var(--red50);

  --border--success: var(--green60);
  --border--warning: var(--yellow60);
  --border--info: var(--blue60);

  --border--linkBase: var(--blue50a);
  --border--linkNeutral: var(--gray50a);
  --border--linkMuted: var(--gray40a);
  --border--linkSuccess: var(--green50a);
  --border--linkDanger: var(--red50a);
  --border--linkWarning: var(--yellow70);
  --border--linkAccent: var(--orange50a);
  --border--linkUrl: var(--green50a);

  /* background */
  --background--page: var(--dark30);
  --background--box: var(--white);
  --background--controlDisabled: var(--dark20);
  --background--controlDisabledAlpha: var(--dark20a);
  --background--boxDark: var(--dark10);
  --background--boxDarkAlpha: var(--dark10a);
  --background--boxDarker: var(--dark20);
  --background--negative: var(--gray90);

  --background--overlay: var(--gray60a);
  --background--overlayDark: var(--gray90a);
  --background--overlayBox: var(--white70a);

  --background--neutral: var(--gray60);
  --background--controlHover: var(--gray20a);
  --background--controlHoverMuted: var(--dark10);
  --background--boxHover: var(--dark10a);
  --background--sidebarItemHover: var(--dark10a);
  --background--controlActive: var(--gray40a);
  --background--checkboxHover: var(--dark30a);
  --background--checkboxActive: var(--gray40a);
  --background--sidebarItemSelected: var(--dark20a);
  --background--neutralMidMuted: var(--gray30);
  --background--neutralMidMutedAlpha: var(--gray30a);
  --background--code: var(--gray20);
  --background--codeAlpha: var(--gray20a);

  --background--knob: var(--white);
  --background--track: var(--gray40a);
  --background--trackHover: var(--gray50a);

  --background--accent: var(--orange60);
  --background--accentHover: var(--orange70);
  --background--accentActive: var(--orange80);
  --background--accentMidMuted: var(--orange40);
  --background--accentMuted: var(--orange20);
  --background--accentUnderMuted: var(--orange90);

  --background--selected: var(--orange40);
  --background--selectedActive: var(--orange50);
  --background--selectedMuted: var(--orange20);
  --background--selectedMutedAlpha: var(--orange20a);

  --background--danger: var(--red60);
  --background--dangerHover: var(--red70);
  --background--dangerActive: var(--red80);
  --background--dangerMidMuted: var(--red40);
  --background--dangerMuted: var(--red20);
  --background--dangerHardMuted: var(--red10);
  --background--dangerNofillHover: var(--red20);
  --background--dangerNofillActive: var(--red40);

  --background--success: var(--green60);
  --background--successHover: var(--green70);
  --background--successMidMuted: var(--green40);
  --background--successMuted: var(--green20);
  --background--successHardMuted: var(--green10);

  --background--warning: var(--yellow60);
  --background--warningMidMuted: var(--yellow40);
  --background--warningMuted: var(--yellow20);

  --background--info: var(--blue60);
  --background--infoMidMuted: var(--blue40);
  --background--infoMuted: var(--blue20);

  --background--twitter: var(--twitter60);
  --background--facebook: var(--facebook60);
  --background--pinterest: var(--pinterest60);
  --background--linkedin: var(--linkedin60);

  --background--avatar1: var(--red60);
  --background--avatar2: var(--orange60);
  --background--avatar3: var(--yellow60);
  --background--avatar4: var(--wasabi60);
  --background--avatar5: var(--green60);
  --background--avatar6: var(--blue60);
  --background--avatar7: var(--cobalt60);
  --background--avatar8: var(--violet60);
  --background--avatar9: var(--beige60);
  --background--avatar10: var(--red70);
  --background--avatar11: var(--orange70);
  --background--avatar12: var(--green70);
  --background--avatar13: var(--cobalt70);
  --background--avatar14: var(--red80);
  --background--avatar15: var(--orange80);
  --background--avatar16: var(--yellow80);
  --background--avatar17: var(--wasabi80);
  --background--avatar18: var(--green80);
  --background--avatar19: var(--blue80);
  --background--avatar20: var(--violet80);
  --background--avatar21: var(--beige80);

  /* shadow */
  --shadow--elevation1: var(--gray5a);
  --shadow--elevation1Bottom: var(--gray20a);
  --shadow--elevation2: var(--gray30a);
  --shadow--elevation3: var(--gray35a);

  --shadow--border: var(--gray30a);

  /* chart */
  --chart--empty: var(--dark30);
  --chart--line: var(--gray30a);
  --chart--caption: var(--gray50a);

  --chart--black: var(--gray90);

  --chart--gray: var(--gray60);
  --chart--grayMidMuted: var(--gray50);
  --chart--grayMuted: var(--gray40);
  --chart--grayBg: var(--gray20);

  --chart--blue: var(--blue60);
  --chart--blueSoftMuted: var(--blue55);
  --chart--blueMidMuted: var(--blue50);
  --chart--blueMuted: var(--blue40);
  --chart--blueBg: var(--blue20);
  --chart--blueBgAlpha: var(--blue20a);
  --chart--blueMutedBg: var(--blue10);
  --chart--blueContrast: var(--blue80);

  --chart--orange: var(--orange60);
  --chart--orangeSoftMuted: var(--orange55);
  --chart--orangeMidMuted: var(--orange50);
  --chart--orangeMuted: var(--orange40);
  --chart--orangeContrast: var(--orange80);
  --chart--orangeBg: var(--orange20);
  --chart--orangeBgAlpha: var(--orange20a);

  --chart--melon: var(--melon60);

  --chart--pear: var(--pear60);

  --chart--iris: var(--iris60);

  --chart--wasabi: var(--wasabi60);
  --chart--wasabiMidMuted: var(--wasabi50);

  --chart--grass: var(--grass60);
  --chart--grassSoftMuted: var(--grass55);

  --chart--green: var(--green60);
  --chart--greenMidMuted: var(--green50);
  --chart--greenMuted: var(--green40);
  --chart--greenHardMuted: var(--green30);
  --chart--greenBg: var(--green20);
  --chart--greenBgAlpha: var(--green20a);
  --chart--greenMutedBg: var(--green10);
  --chart--greenMidContrast: var(--green70);
  --chart--greenContrast: var(--green80);

  --chart--red: var(--red60);
  --chart--redMidMuted: var(--red50);
  --chart--redMuted: var(--red40);
  --chart--redHardMuted: var(--red30);
  --chart--redBg: var(--red20);
  --chart--redMutedBg: var(--red10);
  --chart--redMidContrast: var(--red70);
  --chart--redContrast: var(--red80);

  --chart--salmon: var(--salmon60);

  --chart--peach: var(--peach60);

  --chart--violet: var(--violet60);
  --chart--violetMidMuted: var(--violet50);
  --chart--violetMuted: var(--violet40);
  --chart--violetContrast: var(--violet80);

  --chart--pink: var(--pink55);

  --chart--yellow: var(--yellow60);
  --chart--yellowMidMuted: var(--yellow50);
  --chart--yellowMuted: var(--yellow40);
  --chart--yellowContrast: var(--yellow80);

  --chart--navy: var(--navy60);
  --chart--navyMidMuted: var(--navy50);
  --chart--navyMuted: var(--navy40);
  --chart--navySemihardMuted: var(--navy35);
  --chart--navyContrast: var(--navy80);

  --chart--cobalt: var(--cobalt60);
  --chart--cobaltMidContrast: var(--cobalt70);
  --chart--cobaltContrast: var(--cobalt80);
  --chart--cobaltHardContrast: var(--cobalt90);

  --chart--kd1: var(--green50);
  --chart--kd2: var(--grass50);
  --chart--kd3: var(--wasabi50);
  --chart--kd4: var(--pear50);
  --chart--kd5: var(--yellow40);
  --chart--kd6: var(--melon50);
  --chart--kd7: var(--orange50);
  --chart--kd8: var(--peach50);
  --chart--kd9: var(--salmon50);
  --chart--kd10: var(--red50);

  --image--gray1: var(--gray30a);
  --image--gray2: var(--gray40a);
  --image--gray3: var(--gray50a);
  --image--gray4: var(--gray60a);

  /* alternative */
  --alt-dark90: #2e3c56;
  --alt-white: #fff;
  --alt-white70a: rgba(255, 255, 255, 0.7);
  --alt-white40a: rgba(255, 255, 255, 0.3);
  --alt-white35a: rgba(255, 255, 255, 0.2);
  --alt-white30a: rgba(255, 255, 255, 0.15);
  --alt-white20a: rgba(255, 255, 255, 0.1);
  --alt-white10: #434F67;
  --alt-white10a: rgba(255, 255, 255, 0.08);
  --alt-yellow: #fce892;
  --alt-green: #36d984;
  --alt-violet: #db95e5;

  /* alternative: text */
  --alt-text--primary: var(--alt-white);
  --alt-text--secondary: var(--alt-white70a);
  --alt-text--tertiary: var(--alt-white40a);
  --alt-text--negative: var(--alt-white);
  --alt-text--onBrightBg: var(--alt-white);

  --alt-text--operator: var(--alt-yellow);
  --alt-text--combinator: var(--alt-green);
  --alt-text--field: var(--alt-violet);

  /* alternative: border */
  --alt-border--line: var(--alt-white20a);
  --alt-border--controlDisabled: var(--alt-white20a);
  --alt-border--control: var(--alt-white40a);
  --alt-border--controlHover: var(--alt-white70a);
  --alt-border--linkMuted: var(--alt-white35a);
  --alt-border--linkAccent: var(--alt-white40a);

  /* alternative: background */
  --alt-background--box: var(--alt-dark90);
  --alt-background--control: var(--alt-white30a);
  --alt-background--controlHover: var(--alt-white35a);
  --alt-background--controlActive: var(--alt-white40a);
  --alt-background--neutralMuted: var(--alt-white10a);
  --alt-background--controlDisabled: var(--alt-white10);
  --alt-background--controlDisabledAlpha: var(--alt-white10a);
  --alt-background--boxHover: var(--alt-white10a);
  --alt-background--badgeWhite: var(--alt-white);

  /* keywords explorer */
  --ke-volume-empty--gradient: url('#gradient-light');
}