mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-22 07:08:44 +00:00
SPRINT-18: fixed to dashboards, removed and moved around all the things
This commit is contained in:
Tim Chamberlain
75
src/qqq/components/legacy/Theme/base/borders.ts
Normal file
75
src/qqq/components/legacy/Theme/base/borders.ts
Normal file
@ -0,0 +1,75 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
/**
|
||||
* The base border styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
|
||||
* You can add new border width, border color or border radius using this file.
|
||||
* You can customized the borders value for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Helper Functions
|
||||
import pxToRem from "qqq/assets/theme/functions/pxToRem";
|
||||
|
||||
const { grey } = colors;
|
||||
|
||||
// types
|
||||
interface Types {
|
||||
borderColor: string;
|
||||
borderWidth: {
|
||||
0: number;
|
||||
1: string;
|
||||
2: string;
|
||||
3: string;
|
||||
4: string;
|
||||
5: string;
|
||||
};
|
||||
borderRadius: {
|
||||
xs: string;
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
xl: string;
|
||||
xxl: string;
|
||||
section: string;
|
||||
};
|
||||
}
|
||||
|
||||
const borders: Types = {
|
||||
borderColor: grey[300],
|
||||
|
||||
borderWidth: {
|
||||
0: 0,
|
||||
1: pxToRem(1),
|
||||
2: pxToRem(2),
|
||||
3: pxToRem(3),
|
||||
4: pxToRem(4),
|
||||
5: pxToRem(5),
|
||||
},
|
||||
|
||||
borderRadius: {
|
||||
xs: pxToRem(1.6),
|
||||
sm: pxToRem(2),
|
||||
md: pxToRem(6),
|
||||
lg: pxToRem(8),
|
||||
xl: pxToRem(12),
|
||||
xxl: pxToRem(16),
|
||||
section: pxToRem(160),
|
||||
},
|
||||
};
|
||||
|
||||
export default borders;
|
||||
148
src/qqq/components/legacy/Theme/base/boxShadows.ts
Normal file
148
src/qqq/components/legacy/Theme/base/boxShadows.ts
Normal file
@ -0,0 +1,148 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
/**
|
||||
* The base box-shadow styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
|
||||
* You can add new box-shadow using this file.
|
||||
* You can customized the box-shadow for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Helper Functions
|
||||
import boxShadow from "qqq/assets/theme/functions/boxShadow";
|
||||
|
||||
const { black, white, tabs, coloredShadows } = colors;
|
||||
|
||||
// types
|
||||
interface Types {
|
||||
xs: string;
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
xl: string;
|
||||
xxl: string;
|
||||
inset: string;
|
||||
colored:
|
||||
| {
|
||||
primary: string;
|
||||
secondary: string;
|
||||
info: string;
|
||||
success: string;
|
||||
warning: string;
|
||||
error: string;
|
||||
light: string;
|
||||
dark: string;
|
||||
}
|
||||
| any;
|
||||
navbarBoxShadow: string;
|
||||
sliderBoxShadow: {
|
||||
thumb: string;
|
||||
};
|
||||
tabsBoxShadow: {
|
||||
indicator: string;
|
||||
};
|
||||
}
|
||||
|
||||
const boxShadows: Types = {
|
||||
xs: boxShadow([0, 2], [9, -5], black.main, 0.15),
|
||||
sm: boxShadow([0, 5], [10, 0], black.main, 0.12),
|
||||
md: `${boxShadow([0, 4], [6, -1], black.main, 0.1)}, ${boxShadow(
|
||||
[0, 2],
|
||||
[4, -1],
|
||||
black.main,
|
||||
0.06
|
||||
)}`,
|
||||
lg: `${boxShadow([0, 10], [15, -3], black.main, 0.1)}, ${boxShadow(
|
||||
[0, 4],
|
||||
[6, -2],
|
||||
black.main,
|
||||
0.05
|
||||
)}`,
|
||||
xl: `${boxShadow([0, 20], [25, -5], black.main, 0.1)}, ${boxShadow(
|
||||
[0, 10],
|
||||
[10, -5],
|
||||
black.main,
|
||||
0.04
|
||||
)}`,
|
||||
xxl: boxShadow([0, 20], [27, 0], black.main, 0.05),
|
||||
inset: boxShadow([0, 1], [2, 0], black.main, 0.075, "inset"),
|
||||
colored: {
|
||||
primary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
|
||||
[0, 7],
|
||||
[10, -5],
|
||||
coloredShadows.primary,
|
||||
0.4
|
||||
)}`,
|
||||
secondary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
|
||||
[0, 7],
|
||||
[10, -5],
|
||||
coloredShadows.secondary,
|
||||
0.4
|
||||
)}`,
|
||||
info: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
|
||||
[0, 7],
|
||||
[10, -5],
|
||||
coloredShadows.info,
|
||||
0.4
|
||||
)}`,
|
||||
success: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
|
||||
[0, 7],
|
||||
[10, -5],
|
||||
coloredShadows.success,
|
||||
0.4
|
||||
)}`,
|
||||
warning: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
|
||||
[0, 7],
|
||||
[10, -5],
|
||||
coloredShadows.warning,
|
||||
0.4
|
||||
)}`,
|
||||
error: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
|
||||
[0, 7],
|
||||
[10, -5],
|
||||
coloredShadows.error,
|
||||
0.4
|
||||
)}`,
|
||||
light: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
|
||||
[0, 7],
|
||||
[10, -5],
|
||||
coloredShadows.light,
|
||||
0.4
|
||||
)}`,
|
||||
dark: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow(
|
||||
[0, 7],
|
||||
[10, -5],
|
||||
coloredShadows.dark,
|
||||
0.4
|
||||
)}`,
|
||||
},
|
||||
|
||||
navbarBoxShadow: `${boxShadow([0, 0], [1, 1], white.main, 0.9, "inset")}, ${boxShadow(
|
||||
[0, 20],
|
||||
[27, 0],
|
||||
black.main,
|
||||
0.05
|
||||
)}`,
|
||||
sliderBoxShadow: {
|
||||
thumb: boxShadow([0, 1], [13, 0], black.main, 0.2),
|
||||
},
|
||||
tabsBoxShadow: {
|
||||
indicator: boxShadow([0, 1], [5, 1], tabs.indicator.boxShadow, 1),
|
||||
},
|
||||
};
|
||||
|
||||
export default boxShadows;
|
||||
33
src/qqq/components/legacy/Theme/base/breakpoints.ts
Normal file
33
src/qqq/components/legacy/Theme/base/breakpoints.ts
Normal file
@ -0,0 +1,33 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
/**
|
||||
* The base breakpoints for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
|
||||
* You can add new breakpoints using this file.
|
||||
* You can customized the breakpoints for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
|
||||
*/
|
||||
|
||||
const breakpoints = {
|
||||
values: {
|
||||
xs: 0,
|
||||
sm: 576,
|
||||
md: 768,
|
||||
lg: 992,
|
||||
xl: 1200,
|
||||
xxl: 1400,
|
||||
},
|
||||
};
|
||||
|
||||
export default breakpoints;
|
||||
389
src/qqq/components/legacy/Theme/base/colors.ts
Normal file
389
src/qqq/components/legacy/Theme/base/colors.ts
Normal file
@ -0,0 +1,389 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
/**
|
||||
* The base colors for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
|
||||
* You can add new color using this file.
|
||||
* You can customized the colors for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
|
||||
*/
|
||||
|
||||
// types
|
||||
interface ColorsTypes {
|
||||
main: string;
|
||||
focus: string;
|
||||
}
|
||||
|
||||
interface GradientsTypes {
|
||||
main: string;
|
||||
state: string;
|
||||
}
|
||||
|
||||
interface SocialMediaColorsTypes {
|
||||
main: string;
|
||||
dark: string;
|
||||
}
|
||||
|
||||
interface BadgeColorsTypes {
|
||||
background: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
interface Types {
|
||||
background:
|
||||
| {
|
||||
default: string;
|
||||
sidenav?: string;
|
||||
card?: string;
|
||||
}
|
||||
| any;
|
||||
white:
|
||||
| {
|
||||
main: string;
|
||||
focus: string;
|
||||
}
|
||||
| any;
|
||||
text:
|
||||
| {
|
||||
main: string;
|
||||
focus: string;
|
||||
primary?: string;
|
||||
secondary?: string;
|
||||
disabled?: string;
|
||||
}
|
||||
| any;
|
||||
transparent:
|
||||
| {
|
||||
main: string;
|
||||
}
|
||||
| any;
|
||||
black:
|
||||
| {
|
||||
light: string;
|
||||
main: string;
|
||||
focus: string;
|
||||
}
|
||||
| any;
|
||||
primary: ColorsTypes | any;
|
||||
secondary: ColorsTypes | any;
|
||||
info: ColorsTypes | any;
|
||||
success: ColorsTypes | any;
|
||||
warning: ColorsTypes | any;
|
||||
error: ColorsTypes | any;
|
||||
light: ColorsTypes | any;
|
||||
dark: ColorsTypes | any;
|
||||
grey:
|
||||
| {
|
||||
[key: string | number]: string;
|
||||
}
|
||||
| any;
|
||||
gradients:
|
||||
| {
|
||||
primary: GradientsTypes;
|
||||
secondary: GradientsTypes;
|
||||
info: GradientsTypes;
|
||||
success: GradientsTypes;
|
||||
warning: GradientsTypes;
|
||||
error: GradientsTypes;
|
||||
light: GradientsTypes;
|
||||
dark: GradientsTypes;
|
||||
}
|
||||
| any;
|
||||
socialMediaColors:
|
||||
| {
|
||||
facebook: SocialMediaColorsTypes;
|
||||
twitter: SocialMediaColorsTypes;
|
||||
instagram: SocialMediaColorsTypes;
|
||||
linkedin: SocialMediaColorsTypes;
|
||||
pinterest: SocialMediaColorsTypes;
|
||||
youtube: SocialMediaColorsTypes;
|
||||
vimeo: SocialMediaColorsTypes;
|
||||
slack: SocialMediaColorsTypes;
|
||||
dribbble: SocialMediaColorsTypes;
|
||||
github: SocialMediaColorsTypes;
|
||||
reddit: SocialMediaColorsTypes;
|
||||
tumblr: SocialMediaColorsTypes;
|
||||
}
|
||||
| any;
|
||||
badgeColors:
|
||||
| {
|
||||
primary: BadgeColorsTypes;
|
||||
secondary: BadgeColorsTypes;
|
||||
info: BadgeColorsTypes;
|
||||
success: BadgeColorsTypes;
|
||||
warning: BadgeColorsTypes;
|
||||
error: BadgeColorsTypes;
|
||||
light: BadgeColorsTypes;
|
||||
dark: BadgeColorsTypes;
|
||||
}
|
||||
| any;
|
||||
coloredShadows:
|
||||
| {
|
||||
[key: string]: string;
|
||||
}
|
||||
| any;
|
||||
inputBorderColor: string;
|
||||
tabs:
|
||||
| {
|
||||
indicator:
|
||||
| {
|
||||
boxShadow: string;
|
||||
}
|
||||
| any;
|
||||
}
|
||||
| any;
|
||||
}
|
||||
|
||||
const colors: Types = {
|
||||
background: {
|
||||
default: "#f0f2f5",
|
||||
},
|
||||
|
||||
text: {
|
||||
main: "#7b809a",
|
||||
focus: "#7b809a",
|
||||
},
|
||||
|
||||
transparent: {
|
||||
main: "transparent",
|
||||
},
|
||||
|
||||
white: {
|
||||
main: "#ffffff",
|
||||
focus: "#ffffff",
|
||||
},
|
||||
|
||||
black: {
|
||||
light: "#000000",
|
||||
main: "#000000",
|
||||
focus: "#000000",
|
||||
},
|
||||
|
||||
primary: {
|
||||
main: "#e91e63",
|
||||
focus: "#e91e63",
|
||||
},
|
||||
|
||||
secondary: {
|
||||
main: "#7b809a",
|
||||
focus: "#8f93a9",
|
||||
},
|
||||
|
||||
info: {
|
||||
main: "#04aaef",
|
||||
focus: "#1662C4",
|
||||
},
|
||||
|
||||
success: {
|
||||
main: "#4CAF50",
|
||||
focus: "#67bb6a",
|
||||
},
|
||||
|
||||
warning: {
|
||||
main: "#fb8c00",
|
||||
focus: "#fc9d26",
|
||||
},
|
||||
|
||||
error: {
|
||||
main: "#F44335",
|
||||
focus: "#f65f53",
|
||||
},
|
||||
|
||||
light: {
|
||||
main: "#f0f2f5",
|
||||
focus: "#f0f2f5",
|
||||
},
|
||||
|
||||
dark: {
|
||||
main: "#344767",
|
||||
focus: "#2c3c58",
|
||||
},
|
||||
|
||||
grey: {
|
||||
100: "#f8f9fa",
|
||||
200: "#f0f2f5",
|
||||
300: "#dee2e6",
|
||||
400: "#ced4da",
|
||||
500: "#adb5bd",
|
||||
600: "#6c757d",
|
||||
700: "#495057",
|
||||
800: "#343a40",
|
||||
900: "#212529",
|
||||
},
|
||||
|
||||
gradients: {
|
||||
primary: {
|
||||
main: "#EC407A",
|
||||
state: "#D81B60",
|
||||
},
|
||||
|
||||
secondary: {
|
||||
main: "#747b8a",
|
||||
state: "#495361",
|
||||
},
|
||||
|
||||
info: {
|
||||
main: "#49a3f1",
|
||||
state: "#04aaef",
|
||||
},
|
||||
|
||||
success: {
|
||||
main: "#66BB6A",
|
||||
state: "#43A047",
|
||||
},
|
||||
|
||||
warning: {
|
||||
main: "#FFA726",
|
||||
state: "#FB8C00",
|
||||
},
|
||||
|
||||
error: {
|
||||
main: "#EF5350",
|
||||
state: "#E53935",
|
||||
},
|
||||
|
||||
light: {
|
||||
main: "#EBEFF4",
|
||||
state: "#CED4DA",
|
||||
},
|
||||
|
||||
dark: {
|
||||
main: "#42424a",
|
||||
state: "#191919",
|
||||
},
|
||||
},
|
||||
|
||||
socialMediaColors: {
|
||||
facebook: {
|
||||
main: "#3b5998",
|
||||
dark: "#344e86",
|
||||
},
|
||||
|
||||
twitter: {
|
||||
main: "#55acee",
|
||||
dark: "#3ea1ec",
|
||||
},
|
||||
|
||||
instagram: {
|
||||
main: "#125688",
|
||||
dark: "#0e456d",
|
||||
},
|
||||
|
||||
linkedin: {
|
||||
main: "#0077b5",
|
||||
dark: "#00669c",
|
||||
},
|
||||
|
||||
pinterest: {
|
||||
main: "#cc2127",
|
||||
dark: "#b21d22",
|
||||
},
|
||||
|
||||
youtube: {
|
||||
main: "#e52d27",
|
||||
dark: "#d41f1a",
|
||||
},
|
||||
|
||||
vimeo: {
|
||||
main: "#1ab7ea",
|
||||
dark: "#13a3d2",
|
||||
},
|
||||
|
||||
slack: {
|
||||
main: "#3aaf85",
|
||||
dark: "#329874",
|
||||
},
|
||||
|
||||
dribbble: {
|
||||
main: "#ea4c89",
|
||||
dark: "#e73177",
|
||||
},
|
||||
|
||||
github: {
|
||||
main: "#24292e",
|
||||
dark: "#171a1d",
|
||||
},
|
||||
|
||||
reddit: {
|
||||
main: "#ff4500",
|
||||
dark: "#e03d00",
|
||||
},
|
||||
|
||||
tumblr: {
|
||||
main: "#35465c",
|
||||
dark: "#2a3749",
|
||||
},
|
||||
},
|
||||
|
||||
badgeColors: {
|
||||
primary: {
|
||||
background: "#f8b3ca",
|
||||
text: "#cc084b",
|
||||
},
|
||||
|
||||
secondary: {
|
||||
background: "#d7d9e1",
|
||||
text: "#6c757d",
|
||||
},
|
||||
|
||||
info: {
|
||||
background: "#aecef7",
|
||||
text: "#095bc6",
|
||||
},
|
||||
|
||||
success: {
|
||||
background: "#bce2be",
|
||||
text: "#339537",
|
||||
},
|
||||
|
||||
warning: {
|
||||
background: "#ffd59f",
|
||||
text: "#c87000",
|
||||
},
|
||||
|
||||
error: {
|
||||
background: "#fcd3d0",
|
||||
text: "#f61200",
|
||||
},
|
||||
|
||||
light: {
|
||||
background: "#ffffff",
|
||||
text: "#c7d3de",
|
||||
},
|
||||
|
||||
dark: {
|
||||
background: "#8097bf",
|
||||
text: "#1e2e4a",
|
||||
},
|
||||
},
|
||||
|
||||
coloredShadows: {
|
||||
primary: "#e91e62",
|
||||
secondary: "#110e0e",
|
||||
info: "#00bbd4",
|
||||
success: "#4caf4f",
|
||||
warning: "#ff9900",
|
||||
error: "#f44336",
|
||||
light: "#adb5bd",
|
||||
dark: "#404040",
|
||||
},
|
||||
|
||||
inputBorderColor: "#d2d6da",
|
||||
|
||||
tabs: {
|
||||
indicator: { boxShadow: "#ddd" },
|
||||
},
|
||||
};
|
||||
|
||||
export default colors;
|
||||
41
src/qqq/components/legacy/Theme/base/globals.ts
Normal file
41
src/qqq/components/legacy/Theme/base/globals.ts
Normal file
@ -0,0 +1,41 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
|
||||
const { info, dark } = colors;
|
||||
|
||||
const globals = {
|
||||
html: {
|
||||
scrollBehavior: "smooth",
|
||||
},
|
||||
"*, *::before, *::after": {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
},
|
||||
"a, a:link, a:visited": {
|
||||
textDecoration: "none !important",
|
||||
},
|
||||
"a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": {
|
||||
color: `${dark.main} !important`,
|
||||
transition: "color 150ms ease-in !important",
|
||||
},
|
||||
"a.link:hover, .link:hover, a.link:focus, .link:focus": {
|
||||
color: `${info.main} !important`,
|
||||
},
|
||||
};
|
||||
|
||||
export default globals;
|
||||
320
src/qqq/components/legacy/Theme/base/typography.ts
Normal file
320
src/qqq/components/legacy/Theme/base/typography.ts
Normal file
@ -0,0 +1,320 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
/**
|
||||
* The base typography styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
|
||||
* You can add new typography style using this file.
|
||||
* You can customized the typography styles for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Helper Functions
|
||||
import pxToRem from "qqq/assets/theme/functions/pxToRem";
|
||||
|
||||
const { dark } = colors;
|
||||
|
||||
// types
|
||||
interface DisplayTypes {
|
||||
fontFamily: string;
|
||||
color: string;
|
||||
fontWeight: number;
|
||||
lineHeight: number;
|
||||
fontSize: string;
|
||||
}
|
||||
|
||||
interface Types {
|
||||
fontFamily: string;
|
||||
fontWeightLighter: number;
|
||||
fontWeightLight: number;
|
||||
fontWeightRegular: number;
|
||||
fontWeightMedium: number;
|
||||
fontWeightBold: number;
|
||||
h1: {
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
fontWeight: number;
|
||||
color: string;
|
||||
lineHeight: number;
|
||||
};
|
||||
h2: {
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
fontWeight: number;
|
||||
color: string;
|
||||
lineHeight: number;
|
||||
};
|
||||
h3: {
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
fontWeight: number;
|
||||
color: string;
|
||||
lineHeight: number;
|
||||
};
|
||||
h4: {
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
fontWeight: number;
|
||||
color: string;
|
||||
lineHeight: number;
|
||||
};
|
||||
h5: {
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
fontWeight: number;
|
||||
color: string;
|
||||
lineHeight: number;
|
||||
};
|
||||
h6: {
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
fontWeight: number;
|
||||
color: string;
|
||||
lineHeight: number;
|
||||
};
|
||||
subtitle1: {
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
fontWeight: number;
|
||||
lineHeight: number;
|
||||
};
|
||||
subtitle2: {
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
fontWeight: number;
|
||||
lineHeight: number;
|
||||
};
|
||||
body1: {
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
fontWeight: number;
|
||||
lineHeight: number;
|
||||
};
|
||||
body2: {
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
fontWeight: number;
|
||||
lineHeight: number;
|
||||
};
|
||||
button: {
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
fontWeight: number;
|
||||
lineHeight: number;
|
||||
textTransform: any;
|
||||
};
|
||||
caption: {
|
||||
fontFamily: string;
|
||||
fontSize: string;
|
||||
fontWeight: number;
|
||||
lineHeight: number;
|
||||
};
|
||||
overline: {
|
||||
fontFamily: string;
|
||||
};
|
||||
d1: DisplayTypes;
|
||||
d2: DisplayTypes;
|
||||
d3: DisplayTypes;
|
||||
d4: DisplayTypes;
|
||||
d5: DisplayTypes;
|
||||
d6: DisplayTypes;
|
||||
size: {
|
||||
xxs: string;
|
||||
xs: string;
|
||||
sm: string;
|
||||
md: string;
|
||||
lg: string;
|
||||
xl: string;
|
||||
"2xl": string;
|
||||
"3xl": string;
|
||||
};
|
||||
lineHeight: {
|
||||
sm: number;
|
||||
md: number;
|
||||
lg: number;
|
||||
};
|
||||
}
|
||||
|
||||
const baseProperties = {
|
||||
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
|
||||
fontWeightLighter: 100,
|
||||
fontWeightLight: 300,
|
||||
fontWeightRegular: 400,
|
||||
fontWeightMedium: 600,
|
||||
fontWeightBold: 700,
|
||||
fontSizeXXS: pxToRem(10.4),
|
||||
fontSizeXS: pxToRem(12),
|
||||
fontSizeSM: pxToRem(14),
|
||||
fontSizeMD: pxToRem(16),
|
||||
fontSizeLG: pxToRem(18),
|
||||
fontSizeXL: pxToRem(20),
|
||||
fontSize2XL: pxToRem(24),
|
||||
fontSize3XL: pxToRem(30),
|
||||
};
|
||||
|
||||
const baseHeadingProperties = {
|
||||
fontFamily: baseProperties.fontFamily,
|
||||
color: dark.main,
|
||||
fontWeight: baseProperties.fontWeightBold,
|
||||
};
|
||||
|
||||
const baseDisplayProperties = {
|
||||
fontFamily: baseProperties.fontFamily,
|
||||
color: dark.main,
|
||||
fontWeight: baseProperties.fontWeightLight,
|
||||
lineHeight: 1.2,
|
||||
};
|
||||
|
||||
const typography: Types = {
|
||||
fontFamily: baseProperties.fontFamily,
|
||||
fontWeightLighter: baseProperties.fontWeightLighter,
|
||||
fontWeightLight: baseProperties.fontWeightLight,
|
||||
fontWeightRegular: baseProperties.fontWeightRegular,
|
||||
fontWeightMedium: baseProperties.fontWeightMedium,
|
||||
fontWeightBold: baseProperties.fontWeightBold,
|
||||
|
||||
h1: {
|
||||
fontSize: pxToRem(48),
|
||||
lineHeight: 1.25,
|
||||
...baseHeadingProperties,
|
||||
},
|
||||
|
||||
h2: {
|
||||
fontSize: pxToRem(36),
|
||||
lineHeight: 1.3,
|
||||
...baseHeadingProperties,
|
||||
},
|
||||
|
||||
h3: {
|
||||
fontSize: pxToRem(30),
|
||||
lineHeight: 1.375,
|
||||
...baseHeadingProperties,
|
||||
},
|
||||
|
||||
h4: {
|
||||
fontSize: pxToRem(24),
|
||||
lineHeight: 1.375,
|
||||
...baseHeadingProperties,
|
||||
},
|
||||
|
||||
h5: {
|
||||
fontSize: pxToRem(20),
|
||||
lineHeight: 1.375,
|
||||
...baseHeadingProperties,
|
||||
},
|
||||
|
||||
h6: {
|
||||
fontSize: pxToRem(16),
|
||||
lineHeight: 1.625,
|
||||
...baseHeadingProperties,
|
||||
},
|
||||
|
||||
subtitle1: {
|
||||
fontFamily: baseProperties.fontFamily,
|
||||
fontSize: baseProperties.fontSizeXL,
|
||||
fontWeight: baseProperties.fontWeightLight,
|
||||
lineHeight: 1.625,
|
||||
},
|
||||
|
||||
subtitle2: {
|
||||
fontFamily: baseProperties.fontFamily,
|
||||
fontSize: baseProperties.fontSizeMD,
|
||||
fontWeight: baseProperties.fontWeightLight,
|
||||
lineHeight: 1.6,
|
||||
},
|
||||
|
||||
body1: {
|
||||
fontFamily: baseProperties.fontFamily,
|
||||
fontSize: baseProperties.fontSizeXL,
|
||||
fontWeight: baseProperties.fontWeightRegular,
|
||||
lineHeight: 1.625,
|
||||
},
|
||||
|
||||
body2: {
|
||||
fontFamily: baseProperties.fontFamily,
|
||||
fontSize: baseProperties.fontSizeMD,
|
||||
fontWeight: baseProperties.fontWeightLight,
|
||||
lineHeight: 1.6,
|
||||
},
|
||||
|
||||
button: {
|
||||
fontFamily: baseProperties.fontFamily,
|
||||
fontSize: baseProperties.fontSizeSM,
|
||||
fontWeight: baseProperties.fontWeightLight,
|
||||
lineHeight: 1.5,
|
||||
textTransform: "uppercase",
|
||||
},
|
||||
|
||||
caption: {
|
||||
fontFamily: baseProperties.fontFamily,
|
||||
fontSize: baseProperties.fontSizeXS,
|
||||
fontWeight: baseProperties.fontWeightLight,
|
||||
lineHeight: 1.25,
|
||||
},
|
||||
|
||||
overline: {
|
||||
fontFamily: baseProperties.fontFamily,
|
||||
},
|
||||
|
||||
d1: {
|
||||
fontSize: pxToRem(80),
|
||||
...baseDisplayProperties,
|
||||
},
|
||||
|
||||
d2: {
|
||||
fontSize: pxToRem(72),
|
||||
...baseDisplayProperties,
|
||||
},
|
||||
|
||||
d3: {
|
||||
fontSize: pxToRem(64),
|
||||
...baseDisplayProperties,
|
||||
},
|
||||
|
||||
d4: {
|
||||
fontSize: pxToRem(56),
|
||||
...baseDisplayProperties,
|
||||
},
|
||||
|
||||
d5: {
|
||||
fontSize: pxToRem(48),
|
||||
...baseDisplayProperties,
|
||||
},
|
||||
|
||||
d6: {
|
||||
fontSize: pxToRem(40),
|
||||
...baseDisplayProperties,
|
||||
},
|
||||
|
||||
size: {
|
||||
xxs: baseProperties.fontSizeXXS,
|
||||
xs: baseProperties.fontSizeXS,
|
||||
sm: baseProperties.fontSizeSM,
|
||||
md: baseProperties.fontSizeMD,
|
||||
lg: baseProperties.fontSizeLG,
|
||||
xl: baseProperties.fontSizeXL,
|
||||
"2xl": baseProperties.fontSize2XL,
|
||||
"3xl": baseProperties.fontSize3XL,
|
||||
},
|
||||
|
||||
lineHeight: {
|
||||
sm: 1.25,
|
||||
md: 1.5,
|
||||
lg: 2,
|
||||
},
|
||||
};
|
||||
|
||||
export default typography;
|
||||
Reference in New Issue
Block a user