packages-theme/console-base-theme/doc/css/jwc.less (138 lines of code) (raw):
html { // inline style on <html> when theme is light
--color-text: hsl(222, 22%, 5%);
--color-background: hsl(0, 0%, 100%);
--color-blurred-background: hsla(0, 0%, 100%, 0.85);
--color-primary: hsl(245, 100%, 60%);
--color-secondary: hsl(333, 100%, 45%);
--color-tertiary: hsl(255, 85%, 30%);
--color-decorative: hsl(200, 75%, 65%);
--color-muted: hsl(210, 55%, 92%);
--color-muted-background: hsla(210, 55%, 92%, 0.85);
--color-info: hsl(245, 100%, 60%);
--color-success: hsl(160, 100%, 40%);
--color-success-background: hsla(160, 100%, 40%, 0.1);
--color-error: hsl(340, 95%, 50%);
--color-error-background: hsla(340, 95%, 43%, 0.1);
--color-alert: hsl(37, 100%, 50%);
--color-alert-background: hsla(52, 100%, 50%, 0.25);
--color-venn-0: hsl(190, 100%, 65%);
--color-venn-1: hsl(340, 100%, 65%);
--color-gray-100: hsl(225, 25%, 95%);
--color-gray-200: hsl(225, 16%, 90%);
--color-gray-300: hsl(225, 8%, 80%);
--color-gray-400: hsl(225, 8%, 70%);
--color-gray-500: hsl(225, 7%, 60%);
--color-gray-600: hsl(225, 15%, 50%);
--color-gray-700: hsl(225, 12%, 40%);
--color-gray-900: hsl(225, 25%, 20%);
--color-gray-1000: hsl(225, 15%, 15%);
--color-subtle-background: hsl(225, 25%, 95%);
--color-subtle-floating: hsl(0, 0%, 100%);
--color-homepage-light: hsl(204, 67%, 85%);
--color-homepage-dark: hsl(202, 71%, 90%);
--color-homepage-bg: hsl(204, 67%, 85%);
--syntax-bg: hsl(225, 25%, 97%);
--syntax-highlight: hsl(225, 25%, 93%);
--syntax-txt: #2a2a2a;
--syntax-comment: #467790;
--syntax-prop: #da0079;
--syntax-bool: #bf00b8;
--syntax-val: #78909c;
--syntax-str: #651fff;
--syntax-name: #a0f;
--syntax-del: rgb(255, 85, 85);
--syntax-regex: #3600d6;
--syntax-fn: #3d5afe;
--prefers-dark: false;
--scrollbar-width: 0px;
}
html { // inline style on <html> when theme is dark
--color-text: hsl(0, 0%, 100%);
--color-background: hsl(210, 30%, 8%);
--color-blurred-background: hsla(210, 30%, 8%, 0.85);
--color-primary: hsl(333, 100%, 52%);
--color-secondary: hsl(230, 100%, 67%);
--color-tertiary: hsl(53, 100%, 50%);
--color-decorative: hsl(200, 50%, 60%);
--color-muted: hsl(210, 38%, 15%);
--color-muted-background: hsla(210, 38%, 15%, 0.85);
--color-info: hsl(230, 100%, 67%);
--color-success: hsl(160, 100%, 40%);
--color-success-background: hsla(160, 100%, 40%, 0.1);
--color-error: hsl(340, 95%, 60%);
--color-error-background: hsla(340, 95%, 43%, 0.1);
--color-alert: hsl(30, 100%, 50%);
--color-alert-background: hsla(38, 100%, 50%, 0.1);
--color-venn-0: hsl(250, 100%, 50%);
--color-venn-1: hsl(175, 100%, 50%);
--color-gray-100: hsl(210, 15%, 20%);
--color-gray-200: hsl(210, 15%, 25%);
--color-gray-300: hsl(210, 10%, 40%);
--color-gray-400: hsl(210, 9%, 45%);
--color-gray-500: hsl(210, 8%, 50%);
--color-gray-600: hsl(210, 12%, 55%);
--color-gray-700: hsl(210, 14%, 66%);
--color-gray-900: hsl(210, 25%, 88%);
--color-gray-1000: hsl(210, 25%, 96%);
--color-subtle-background: hsl(210, 30%, 8%);
--color-subtle-floating: hsl(210, 22%, 15%);
--color-homepage-light: hsla(200, 100%, 85%, 0);
--color-homepage-dark: hsla(200, 100%, 85%, 0.1);
--color-homepage-bg: hsl(210, 30%, 8%);
--syntax-bg: hsl(210, 30%, 12%);
--syntax-highlight: hsl(210, 30%, 18%);
--syntax-txt: #fff;
--syntax-comment: #6c8998;
--syntax-prop: #ff39a8;
--syntax-bool: #ffd600;
--syntax-val: #61747d;
--syntax-str: rgb(155, 109, 255);
--syntax-name: #c653ff;
--syntax-del: #f55;
--syntax-regex: #ffd700;
--syntax-fn: rgb(0, 190, 255);
--prefers-dark: true;
--scrollbar-width: 0px;
}
:root { // inline style
--font-weight-bold: 500;
--font-weight-medium: 400;
--font-weight-light: 300;
--font-family: 'Wotfard', Futura, -apple-system, sans-serif;
--font-family-mono: 'League Mono', 'Fira Mono', monospace;
--reach-dialog: 1;
}
:root {
--reach-tabs: 1;
}
html { // tag selector
--color-text: hsl(222, 22%, 5%);
--color-background: hsl(0, 0%, 100%);
--color-blurred-background: hsla(0, 0%, 100%, 0.85);
--color-primary: hsl(245, 100%, 60%);
--color-secondary: hsl(333, 100%, 45%);
--color-tertiary: hsl(255, 85%, 30%);
--color-decorative: hsl(200, 75%, 65%);
--color-muted: hsl(210, 55%, 92%);
--color-info: hsl(245, 100%, 60%);
--color-success: hsl(160, 100%, 40%);
--color-success-background: hsla(160, 100%, 40%, 0.1);
--color-error: hsl(340, 95%, 50%);
--color-error-background: hsla(340, 95%, 43%, 0.1);
--color-alert: hsl(37, 100%, 50%);
--color-alert-background: hsla(52, 100%, 50%, 0.25);
--color-subtle-background: hsl(225, 25%, 95%);
--color-subtle-floating: hsl(0, 0%, 100%);
--color-homepage-light: hsl(204, 67%, 85%);
--color-homepage-dark: hsl(202, 71%, 90%);
--color-homepage-bg: hsl(204, 67%, 85%);
--color-gray-100: hsl(225, 25%, 95%);
--color-gray-200: hsl(225, 16%, 90%);
--color-gray-300: hsl(225, 8%, 80%);
--color-gray-400: hsl(225, 8%, 70%);
--color-gray-500: hsl(225, 7%, 60%);
--color-gray-600: hsl(225, 15%, 50%);
--color-gray-700: hsl(225, 12%, 40%);
--color-gray-900: hsl(225, 25%, 20%);
--color-gray-1000: hsl(225, 15%, 15%);
}