mirror of
https://github.com/wassname/talk.git
synced 2026-07-05 03:57:01 +08:00
Nick Funk
aa8e1e2d7a
* Add solid background to Moderate > Config area headers CORL-560 * Update Config > General section text and font weight CORL-560 * Update ordering of Config > Moderation page items CORL-560 * Update text and font weights in Configure > Moderation page CORL-560 * Update text and font weight on Configure > Organization page CORL-560 * Update text and font weight on Configure > Banned and Suspect Words page CORL-560 * Update text and font weight on Configure > Authentication page CORL-560 * Update text and font weights on Configure > Email page CORL-560 * Update text and font weights on Configure > Advanced page CORL-560 * Repair tests around the styling changes made to the moderation config area CORL-560 * Fix capitalization on the Config > General page CORL-560 * Make email checkbox light themed so its text shows up on new headers CORL-560 * Update Header width to account for padding Prevents it from sticking out over the edge of the page layout CORL-560 * Align "Sort by" text to the drop down in Admin > Config > General > Reactions CORL-560 * Update Admin > Config > General snapshot to adjust for vertical aligned text Vertical flex aligned the "Sort by" text to a combo box in a previous changed CORL-560 * Rename "Perspective Toxic Comment Filter" header to "Toxic Comment Filter" CORL-560 * Use overlay scrolling if available to prevent scroll bar width popping CORL-560 * Remove overflow-y: overlay CORL-560 * Rename Akismet Spam Detection to Spam Detection CORL-560 * Make all non-complex text fields full width in Admin > Config CORL-560 * Remove Authentication Integrations header Area underneath was empty CORL-560 * Re-arrange SSO Key Field layout CORL-560 * Create new typography types for bodyShort and fieldDescription CORL-560 * Update Admin > Config to use bodyShort, fieldDescription typography CORL-560 * Add a slight padding on InputLabel CORL-560 * Add padding on either side of Admin > Config section content CORL-560
158 lines
2.9 KiB
TypeScript
158 lines
2.9 KiB
TypeScript
/**
|
|
* This file is required by node, it should be valid node js code.
|
|
* We keep the `.ts` extension to keep the types.
|
|
*/
|
|
|
|
export type Spacing = keyof typeof variables["spacing"];
|
|
export type Shade = keyof typeof variables["palette"]["primary"];
|
|
|
|
const variables = {
|
|
elevation: {
|
|
main: "1px 0px 4px rgba(0, 0, 0, 0.25)",
|
|
},
|
|
palette: {
|
|
/* Primary colors */
|
|
primary: {
|
|
darkest: "#0D5B8F",
|
|
dark: "#2B7EB5",
|
|
main: "#3498DB",
|
|
light: "#67B2E4",
|
|
lighter: "#8DC5EB",
|
|
lightest: "#EBF5FB",
|
|
},
|
|
/* Secondary colors */
|
|
grey: {
|
|
darkest: "#404345",
|
|
dark: "#65696B",
|
|
main: "#787D80",
|
|
light: "#9A9DA0",
|
|
lighter: "#BBBEBF",
|
|
lightest: "#F5F5F5",
|
|
},
|
|
/* Success colors */
|
|
success: {
|
|
darkest: "#03AB61",
|
|
dark: "#02BD6B",
|
|
main: "#00CD73",
|
|
light: "#40D996",
|
|
lighter: "#83EBBD",
|
|
lightest: "#E6FAF1",
|
|
},
|
|
/* Error colors */
|
|
error: {
|
|
darkest: "#F50F0C",
|
|
dark: "#FF1F1C",
|
|
main: "#FA4643",
|
|
light: "#FB7472",
|
|
lighter: "#FC9795",
|
|
lightest: "#FEF0EF",
|
|
},
|
|
/* Warning colors */
|
|
warning: {
|
|
main: "#DC8400",
|
|
},
|
|
/* Text colors */
|
|
text: {
|
|
primary: "#3B4A53",
|
|
secondary: "#787D80",
|
|
light: "#fff",
|
|
dark: "#14171A",
|
|
},
|
|
/* Background colors */
|
|
background: {
|
|
light: "#F6F6F6",
|
|
},
|
|
/* Common colors */
|
|
common: {
|
|
white: "#FFF",
|
|
black: "#000",
|
|
},
|
|
/* Divider */
|
|
divider: "rgba(0, 0, 0, 0.12)",
|
|
highlight: "#FFD863",
|
|
brand: {
|
|
main: "#f77160",
|
|
light: "#f97f70",
|
|
lighter: "#fc9e92",
|
|
},
|
|
},
|
|
/* gitter and spacing */
|
|
miniUnitSmall: 4,
|
|
miniUnitLarge: 8,
|
|
/* Borders */
|
|
roundCorners: "2px",
|
|
/* Typography */
|
|
remBase: 16,
|
|
fontFamilySansSerif: '"Source Sans Pro"',
|
|
fontFamilySerif: '"Manuale"',
|
|
/** Deprecated */
|
|
fontWeightLight: 300,
|
|
fontWeightRegular: 400,
|
|
fontWeightMedium: 600,
|
|
fontWeightBold: 700,
|
|
/***************/
|
|
fontSize: {
|
|
1: "12px",
|
|
2: "14px",
|
|
3: "16px",
|
|
4: "18px",
|
|
5: "20px",
|
|
6: "24px",
|
|
7: "28px",
|
|
8: "32px",
|
|
rem: {
|
|
1: "0.75rem",
|
|
2: "0.875rem",
|
|
3: "1rem",
|
|
4: "1.125rem",
|
|
5: "1.25rem",
|
|
6: "1.5rem",
|
|
7: "1.75rem",
|
|
8: "2rem",
|
|
},
|
|
},
|
|
fontWeight: {
|
|
sans: {
|
|
regular: 400,
|
|
medium: 600,
|
|
bold: 700,
|
|
},
|
|
serif: {
|
|
regular: 400,
|
|
medium: 600,
|
|
bold: 600,
|
|
},
|
|
},
|
|
lineHeight: {
|
|
1: "1.1em",
|
|
2: "1.2em",
|
|
3: "1.45em",
|
|
bodyShort: 1.142,
|
|
},
|
|
/* Breakpoints */
|
|
breakpoints: {
|
|
xs: 320,
|
|
sm: 640,
|
|
md: 1024,
|
|
lg: 1400,
|
|
xl: 1600,
|
|
},
|
|
zindex: {
|
|
popover: 300,
|
|
modal: 1000,
|
|
},
|
|
spacing: {
|
|
1: "4px",
|
|
2: "8px",
|
|
3: "12px",
|
|
4: "16px",
|
|
5: "24px",
|
|
6: "32px",
|
|
7: "44px",
|
|
8: "60px",
|
|
9: "84px",
|
|
},
|
|
};
|
|
|
|
export default variables;
|