154 lines
3.3 KiB
TypeScript
154 lines
3.3 KiB
TypeScript
const colorsGreyscale = {
|
|
"greyscale-000": "#FFFFFF",
|
|
"greyscale-100": "#FAFAFB",
|
|
"greyscale-200": "#F3F4F4",
|
|
"greyscale-300": "#E7E8EA",
|
|
"greyscale-400": "#C2C6CA",
|
|
"greyscale-500": "#9EA3AA",
|
|
"greyscale-600": "#79818A",
|
|
"greyscale-700": "#555F6B",
|
|
"greyscale-800": "#303C4B",
|
|
"greyscale-900": "#0C1A2B",
|
|
};
|
|
|
|
const colorsPrimary = {
|
|
"primary-text": colorsGreyscale["greyscale-000"],
|
|
"primary-100": "#EBF2FC",
|
|
"primary-200": "#8CB5EA",
|
|
"primary-300": "#5894E1",
|
|
"primary-400": "#377FDB",
|
|
"primary-500": "#055FD2",
|
|
"primary-600": "#0556BF",
|
|
"primary-700": "#044395",
|
|
"primary-800": "#033474",
|
|
"primary-900": "#022858",
|
|
};
|
|
|
|
const colorsSecondary = {
|
|
"secondary-text": colorsGreyscale["greyscale-700"],
|
|
"secondary-100": "#F2F7FC",
|
|
"secondary-200": "#EBF3FA",
|
|
"secondary-300": "#E2EEF8",
|
|
"secondary-400": "#DDEAF7",
|
|
"secondary-500": "#D4E5F5",
|
|
"secondary-600": "#C1D0DF",
|
|
"secondary-700": "#97A3AE",
|
|
"secondary-800": "#757E87",
|
|
"secondary-900": "#596067",
|
|
};
|
|
|
|
const colorsSuccess = {
|
|
"success-text": colorsGreyscale["greyscale-000"],
|
|
"success-100": "#EFFCD3",
|
|
"success-200": "#DBFAA9",
|
|
"success-300": "#BEF27C",
|
|
"success-400": "#A0E659",
|
|
"success-500": "#76D628",
|
|
"success-600": "#5AB81D",
|
|
"success-700": "#419A14",
|
|
"success-800": "#2C7C0C",
|
|
"success-900": "#1D6607",
|
|
};
|
|
|
|
const colorsInfo = {
|
|
"info-text": colorsGreyscale["greyscale-000"],
|
|
"info-100": "#EBF2FC",
|
|
"info-200": "#8CB5EA",
|
|
"info-300": "#5894E1",
|
|
"info-400": "#377FDB",
|
|
"info-500": "#055FD2",
|
|
"info-600": "#0556BF",
|
|
"info-700": "#044395",
|
|
"info-800": "#033474",
|
|
"info-900": "#022858",
|
|
};
|
|
|
|
const colorsWarning = {
|
|
"warning-text": colorsGreyscale["greyscale-000"],
|
|
"warning-100": "#FFF8CD",
|
|
"warning-200": "#FFEF9B",
|
|
"warning-300": "#FFE469",
|
|
"warning-400": "#FFDA43",
|
|
"warning-500": "#FFC805",
|
|
"warning-600": "#DBA603",
|
|
"warning-700": "#B78702",
|
|
"warning-800": "#936901",
|
|
"warning-900": "#7A5400",
|
|
};
|
|
|
|
const colorsDanger = {
|
|
"danger-text": colorsGreyscale["greyscale-000"],
|
|
"danger-100": "#F4B0B0",
|
|
"danger-200": "#EE8A8A",
|
|
"danger-300": "#E65454",
|
|
"danger-400": "#E13333",
|
|
"danger-500": "#DA0000",
|
|
"danger-600": "#C60000",
|
|
"danger-700": "#9B0000",
|
|
"danger-800": "#780000",
|
|
"danger-900": "#5C0000",
|
|
};
|
|
|
|
const fontSizes = {
|
|
h1: "1.75rem",
|
|
h2: "1.375rem",
|
|
h3: "1.125rem",
|
|
h4: "0.8125rem",
|
|
h5: "0.625rem",
|
|
h6: "0.5rem",
|
|
l: "1rem",
|
|
m: "0.8125rem",
|
|
s: "0.6875rem",
|
|
};
|
|
|
|
const fontWeights = {
|
|
thin: 100,
|
|
regular: 300,
|
|
medium: 400,
|
|
bold: 500,
|
|
extrabold: 700,
|
|
black: 900,
|
|
};
|
|
|
|
const fontFamilies = {
|
|
base: "Roboto",
|
|
accent: "Roboto",
|
|
};
|
|
|
|
const spacings = {
|
|
xl: "4rem",
|
|
l: "3rem",
|
|
b: "1.625rem",
|
|
s: "1rem",
|
|
t: "0.5rem",
|
|
st: "0.25rem",
|
|
};
|
|
|
|
const transitions = {
|
|
"ease-in": "cubic-bezier(0.32, 0, 0.67, 0)", // Ease in cubic
|
|
"ease-out": "cubic-bezier(0.33, 1, 0.68, 1)", // Ease out cubic
|
|
"ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)", // Ease in out cubic
|
|
duration: "250ms",
|
|
};
|
|
|
|
export default {
|
|
theme: {
|
|
colors: {
|
|
...colorsPrimary,
|
|
...colorsSecondary,
|
|
...colorsGreyscale,
|
|
...colorsSuccess,
|
|
...colorsInfo,
|
|
...colorsWarning,
|
|
...colorsDanger,
|
|
},
|
|
font: {
|
|
sizes: fontSizes,
|
|
weights: fontWeights,
|
|
families: fontFamilies,
|
|
},
|
|
spacings,
|
|
transitions,
|
|
},
|
|
};
|