@cap3/capitano-theme
Version:
Extensible and flexible theme system
326 lines • 8.48 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
// tslint:disable:max-file-line-count
exports.defaultLightTheme = {
spacing: {
baseUnit: 8,
borderRadiusFactor: {
sharp: 0,
small: 0.5,
medium: 1,
},
formElementFactor: {
large: 6,
medium: 4,
small: 3,
},
},
colors: {
layout: {
M0: "#000000",
M10: "#333333",
M20: "#5a5a5a",
M30: "#787878",
M40: "#949494",
M50: "#b2b2b2",
M60: "#cecece",
M70: "#e6e6e6",
M80: "#f7f7f7",
M90: "#fcfcfc",
base: "#fefefe",
},
textOnBackground: "#2b2b2b",
textOnBackgroundInverse: "#fafafa",
primary: {
"50": "#e0eef9",
"100": "#b3d5f1",
"200": "#80b9e8",
"300": "#4d9ddf",
"400": "#2688d8",
"500": "#0073d1",
"600": "#006bcc",
"700": "#0060c6",
"800": "#0056c0",
"900": "#0043b5",
A100: "#dee8ff",
A200: "#abc4ff",
A400: "#78a0ff",
A700: "#5e8eff",
},
textOnPrimary: "#fafafa",
secondary: {
"50": "#f6fae0",
"100": "#e8f2b3",
"200": "#d9ea80",
"300": "#cae14d",
"400": "#beda26",
"500": "#b3d400",
"600": "#accf00",
"700": "#a3c900",
"800": "#9ac300",
"900": "#8bb900",
A100: "#f7ffe2",
A200: "#e8ffaf",
A400: "#d9ff7c",
A700: "#d2ff63",
},
textOnSecondary: "#fafafa",
success: {
"50": "#e1f8e9",
"100": "#b5eec9",
"200": "#84e3a5",
"300": "#52d881",
"400": "#2dcf66",
"500": "#08c74b",
"600": "#07c144",
"700": "#06ba3b",
"800": "#04b333",
"900": "#02a623",
A100: "#d0ffd7",
A200: "#9dffab",
A400: "#6aff7f",
A700: "#51ff69",
},
textOnSuccess: "#fafafa",
warning: {
"50": "#fff9ed",
"100": "#fff1d1",
"200": "#ffe8b3",
"300": "#ffdf94",
"400": "#ffd87d",
"500": "#ffd166",
"600": "#ffcc5e",
"700": "#ffc653",
"800": "#ffc049",
"900": "#ffb538",
A100: "#ffffff",
A200: "#ffffff",
A400: "#fff3e1",
A700: "#ffe9c8",
},
danger: {
"50": "#fde3e9",
"100": "#fab8c8",
"200": "#f789a3",
"300": "#f45a7e",
"400": "#f13663",
"500": "#ef1347",
"600": "#ed1140",
"700": "#eb0e37",
"800": "#e80b2f",
"900": "#e40620",
A100: "#ffffff",
A200: "#ffd9dc",
A400: "#ffa6ad",
A700: "#ff8c96",
},
textOnDanger: "#fafafa",
disabled: {
M0: "#000000",
M10: "#111415",
M20: "#23272a",
M30: "#353b40",
M40: "#475056",
M50: "#5a656d",
M60: "#6e7c86",
M70: "#86939b",
M80: "#9fa8b0",
M90: "#b2bac0",
base: "#bbc2c7",
},
textOnDisabled: "#fafafa",
},
statusEffects: {
hover: {
effect: "brighten",
factor: 15,
},
pressed: {
effect: "shade",
factor: 15,
},
focus: {
effect: "tint",
factor: 20,
},
},
typography: {
fontFamily: {
base: "Open Sans, sans-serif",
monospace: '"Dank Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace',
},
fontSize: {
medium: 14,
large: 16,
small: 12,
h1: 32,
h2: 28,
h3: 24,
h4: 20,
h5: 16,
h6: 14,
},
},
};
exports.defaultDarkTheme = {
spacing: {
baseUnit: 8,
borderRadiusFactor: {
sharp: 0,
small: 0.5,
medium: 1,
},
formElementFactor: {
large: 6,
medium: 4,
small: 3,
},
},
colors: {
layout: {
M0: "#ffffff",
M10: "#f6f6f6",
M20: "#eeeeee",
M30: "#dcdcdc",
M40: "#c8c8c8",
M50: "#b4b4b4",
M60: "#9d9d9d",
M70: "#858585",
M80: "#686868",
M90: "#424242",
base: "#252525",
},
textOnBackground: "#dedede",
textOnBackgroundInverse: "#404040",
primary: {
"50": "#e0eef9",
"100": "#b3d5f1",
"200": "#80b9e8",
"300": "#4d9ddf",
"400": "#2688d8",
"500": "#0073d1",
"600": "#006bcc",
"700": "#0060c6",
"800": "#0056c0",
"900": "#0043b5",
A100: "#dee8ff",
A200: "#abc4ff",
A400: "#78a0ff",
A700: "#5e8eff",
},
textOnPrimary: "#ffffff",
secondary: {
"50": "#f6fae0",
"100": "#e8f2b3",
"200": "#d9ea80",
"300": "#cae14d",
"400": "#beda26",
"500": "#b3d400",
"600": "#accf00",
"700": "#a3c900",
"800": "#9ac300",
"900": "#8bb900",
A100: "#f7ffe2",
A200: "#e8ffaf",
A400: "#d9ff7c",
A700: "#d2ff63",
},
textOnSecondary: "#ffffff",
success: {
"50": "#e1f8e9",
"100": "#b5eec9",
"200": "#84e3a5",
"300": "#52d881",
"400": "#2dcf66",
"500": "#08c74b",
"600": "#07c144",
"700": "#06ba3b",
"800": "#04b333",
"900": "#02a623",
A100: "#d0ffd7",
A200: "#9dffab",
A400: "#6aff7f",
A700: "#51ff69",
},
textOnSuccess: "#ffffff",
warning: {
"50": "#fff9ed",
"100": "#fff1d1",
"200": "#ffe8b3",
"300": "#ffdf94",
"400": "#ffd87d",
"500": "#ffd166",
"600": "#ffcc5e",
"700": "#ffc653",
"800": "#ffc049",
"900": "#ffb538",
A100: "#ffffff",
A200: "#ffffff",
A400: "#fff3e1",
A700: "#ffe9c8",
},
danger: {
"50": "#fde3e9",
"100": "#fab8c8",
"200": "#f789a3",
"300": "#f45a7e",
"400": "#f13663",
"500": "#ef1347",
"600": "#ed1140",
"700": "#eb0e37",
"800": "#e80b2f",
"900": "#e40620",
A100: "#ffffff",
A200: "#ffd9dc",
A400: "#ffa6ad",
A700: "#ff8c96",
},
textOnDanger: "#ffffff",
disabled: {
M0: "#000000",
M10: "#111415",
M20: "#23272a",
M30: "#353b40",
M40: "#475056",
M50: "#5a656d",
M60: "#6e7c86",
M70: "#86939b",
M80: "#9fa8b0",
M90: "#b2bac0",
base: "#bbc2c7",
},
textOnDisabled: "#ffffff",
},
statusEffects: {
hover: {
effect: "brighten",
factor: 15,
},
pressed: {
effect: "shade",
factor: 15,
},
focus: {
effect: "tint",
factor: 20,
},
},
typography: {
fontFamily: {
base: "Open Sans, sans-serif",
monospace: '"Dank Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace',
},
fontSize: {
medium: 14,
large: 16,
small: 12,
h1: 32,
h2: 28,
h3: 24,
h4: 20,
h5: 16,
h6: 14,
},
},
};
//# sourceMappingURL=defaultTheme.js.map