pxt-core
Version:
Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors
59 lines (56 loc) • 2.3 kB
text/less
/**************************************************************************
CSS theme variables
These are overridden by targets and used in: react-common, CRA webapps.
To add new theme variable:
1. Add variable to :root and .high-contrast below
2. Set the variable value in each target's theme/themepacks.less
***************************************************************************/
// TODO: Define the complete set of theme variables we want to support
:root {
// Default to a resonable scheme that doesn't closely match any existing target's colors
/// Page
--pxt-page-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--pxt-page-background: white;
--pxt-page-foreground: black;
--pxt-page-foreground-light: #767676;
--pxt-page-foreground-shadow: rgba(0, 0, 0, 0.08);
--pxt-page-dark-shadow: rgba(0, 0, 0, 0.5);
/// Header bar
--pxt-headerbar-background: #475569;
--pxt-headerbar-background-glass: #47556940;
--pxt-headerbar-foreground: white;
--pxt-headerbar-accent: #475569;
--pxt-headerbar-accent-smoke: #334155;
/// Content area
--pxt-content-background: #C7D2FE;
--pxt-content-background-glass: #C7D2FE40;
--pxt-content-foreground: #1E293B;
--pxt-content-accent: #EEF2FF;
--pxt-content-secondary-foreground: #666666;
/// Primary button
--pxt-button-primary-background: #065F46;
--pxt-button-primary-background-glass: #065F4640;
--pxt-button-primary-foreground: white;
--pxt-button-primary-accent: #065F46;
/// Secondary button
--pxt-button-secondary-background: #CBD5E1;
--pxt-button-secondary-background-glass: #CBD5E140;
--pxt-button-secondary-foreground: #1E293B;
--pxt-button-secondary-accent: #334155;
/// Status colors
--pxt-success: #3AFFB3;
--pxt-info: #3ADCFF;
--pxt-warning: #FFD43A;
--pxt-error: #FF3A54;
--pxt-success-background: #81E6D9;
--pxt-info-background: #63B3ED;
--pxt-warning-background: #FBD38D;
--pxt-error-background: #FEB2B2;
--pxt-success-accent: #38A169;
--pxt-info-accent: #3182CE;
--pxt-warning-accent: #DD6B20;
--pxt-error-accent: #E53E3E;
}
.theme-highcontrast {
// TODO: Fill this in
}