@heymarco/next-auth
Version:
A complete authentication solution for web applications.
337 lines (336 loc) • 10.1 kB
JavaScript
// reusable-ui core:
import {
// a color management system:
colorValues,
// a border (stroke) management system
borderValues, borderRadiusValues,
// a spacer (gap) management system
spacerValues,
// a typography management system:
typoValues, secondaryValues, headingValues, paragraphValues, horzRuleValues, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// reusable-ui components:
import {
// base-components:
basicValues, } from '@reusable-ui/components'; // a set of official Reusable-UI components
// other libs:
import Color from 'color'; // color utilities
export const theme = (themeName, gradient = true) => {
return {
// backgrounds:
...(gradient ? {
background: basicValues.backgGrad?.[0]?.[0],
backgroundBlendMode: `${basicValues.backgroundBlendMode}`,
} : undefined),
backgroundColor: colorValues[themeName].mix(Color('#ffffff'), 0.5).toString().toLowerCase(),
// foregrounds:
color: colorValues[`${themeName}Bold`].toString().toLowerCase(),
};
};
export const textSecondary = {
// appearances:
opacity: `${secondaryValues.opacity}`,
};
export const textSmall = {
// layouts:
...textSecondary,
// positions:
verticalAlign: 'middle', // center to normal_size_text
marginTop: 'auto',
marginBottom: 'auto',
// typos:
fontSize: `calc(0.75 * ${typoValues.fontSizeMd})`,
// fontWeight : 'lighter',
};
export const textNormal = {
// positions:
verticalAlign: 'middle', // center to normal_size_text
marginTop: 'auto',
marginBottom: 'auto',
// typos:
fontSize: `calc(1 * ${typoValues.fontSizeMd})`,
fontWeight: `${typoValues.fontWeightNormal}`,
};
export const textBold = {
// typos:
fontWeight: `${typoValues.fontWeightBold}`,
};
export const textBig = {
// typos:
fontSize: `calc(1.25 * ${typoValues.fontSizeMd})`,
};
const horzRuleStroke = (themeName = 'primary') => (`${borderValues.style} ${borderValues.hair} ${colorValues[`${themeName}Bold`].mix(Color('#ffffff'), 1 - (Number.parseFloat(`${horzRuleValues.opacity ?? 0.25}`))).toString().toLowerCase()}`);
export const horzRule = {
// layouts:
display: 'block',
// borders:
borderLeft: 0, // no left border
borderRight: 0, // no right border
borderTop: horzRuleStroke(), // only top border
borderBottom: 0, // no bottom border
// spacings:
marginLeft: 0, // no space to left
marginRight: 0, // no space to right
marginTop: `${spacerValues.md}`, // extra space to top
marginBottom: `${spacerValues.md}`, // extra space to bottom
};
export const borderAsHorzRule = {
// borders:
borderBottom: horzRuleStroke(), // exploits bottom border as horz rule
};
export const borderStroke = (themeName = 'primary') => (`${borderValues.style} ${borderValues.hair} ${colorValues[`${themeName}Bold`].toString().toLowerCase()}`);
export const borderAllSides = {
// borders:
border: borderStroke(),
};
export const borderTopSide = {
// borders:
borderTop: borderStroke(),
};
export const borderBottomSide = {
// borders:
borderBottom: borderStroke(),
};
export const borderInlineStartSide = {
// borders:
borderLeft: borderStroke(), // fallback for GMail
borderInlineEnd: 0, // kills the fallback above
borderInlineStart: borderStroke(), // ltr/rtl aware
};
export const borderInlineEndSide = {
// borders:
borderRight: borderStroke(), // fallback for GMail
borderInlineStart: 0, // kills the fallback above
borderInlineEnd: borderStroke(), // ltr/rtl aware
};
const borderRadiusBase = `${borderRadiusValues.md}`;
export const borderRadiusTopSide = {
borderTopLeftRadius: borderRadiusBase, // border radius on top_left
borderTopRightRadius: borderRadiusBase, // border radius on top_right
};
export const borderRadiusTopStartSide = {
borderTopLeftRadius: borderRadiusBase, // fallback for GMail
borderStartEndRadius: 0, // kills the fallback above
borderStartStartRadius: borderRadiusBase, // ltr/rtl aware
};
export const borderRadiusTopEndSide = {
borderTopRightRadius: borderRadiusBase, // fallback for GMail
borderStartStartRadius: 0, // kills the fallback above
borderStartEndRadius: borderRadiusBase, // ltr/rtl aware
};
export const borderRadiusBottomStartSide = {
borderBottomLeftRadius: borderRadiusBase, // fallback for GMail
borderEndEndRadius: 0, // kills the fallback above
borderEndStartRadius: borderRadiusBase, // ltr/rtl aware
};
export const borderRadiusBottomEndSide = {
borderBottomRightRadius: borderRadiusBase, // fallback for GMail
borderEndStartRadius: 0, // kills the fallback above
borderEndEndRadius: borderRadiusBase, // ltr/rtl aware
};
export const selfCenterHorz = {
// positions:
// justifySelf : 'center', // not supported in GMail
marginLeft: 'auto', // the another way to center horizontally
marginRight: 'auto', // the another way to center horizontally
};
export const article = {
// backgrounds & foregrounds:
...theme('secondary', false),
// spacings:
padding: 0,
// typos:
fontSize: `${typoValues.fontSizeMd}`,
textAlign: 'center',
};
export const sectionDummy = {
// appearances:
visibility: 'hidden',
// sizes:
height: '0.05px', // ensures the margin works on the hero section
};
export const sectionBase = {
// layouts:
display: 'block', // content friendly layout
// spacings:
padding: `${spacerValues.md}`,
};
export const section = {
// layouts:
...sectionBase,
// borders:
...borderAsHorzRule,
};
export const sectionLast = sectionBase;
export const headingBase = {
// spacings:
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: `${headingValues.marginBlockEnd}`,
// typos:
fontWeight: `${typoValues.fontWeightBold}`,
};
export const heading1 = {
// layouts:
...headingBase,
// typos:
fontSize: `calc(2 * ${typoValues.fontSizeMd})`,
};
export const heading2 = {
// layouts:
...headingBase,
// typos:
fontSize: `calc(1.75 * ${typoValues.fontSizeMd})`,
};
export const paragraphBase = {
// spacings:
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 0,
};
export const paragraph = {
// layouts:
...paragraphBase,
// spacings:
marginTop: `${paragraphValues.marginBlockStart}`,
marginBottom: `${paragraphValues.marginBlockEnd}`,
};
export const paragraphFirst = {
// layouts:
...paragraphBase,
// spacings:
marginBottom: `${paragraphValues.marginBlockEnd}`,
};
export const paragraphLast = {
// layouts:
...paragraphBase,
// spacings:
marginTop: `${paragraphValues.marginBlockStart}`,
};
export const paragraphCurrency = {
// layouts:
...paragraphBase,
display: 'flex', // makes marginInlineStart work
};
export const numberCurrency = {
// spacings:
// place the number to right_most:
marginLeft: 'auto', // fallback for GMail
marginInlineEnd: 0, // kills the fallback above
marginInlineStart: 'auto', // ltr/rtl aware
};
export const tableReset = {
// layouts:
tableLayout: 'auto',
// borders:
borderCollapse: 'separate',
borderSpacing: 0,
// typos:
textAlign: 'start',
};
export const tableInfo = tableReset;
export const tableInfoCenter = {
// layouts:
...tableInfo,
// positions:
// needs to overwrite the paragraph's layout
...selfCenterHorz, // center self horizontally
};
export const tableInfoFill = {
// layouts:
...tableInfo,
// sizes:
width: '100%',
};
export const tableTitleProduct = {
// typos:
fontSize: `calc(1 * ${typoValues.fontSizeMd})`,
fontWeight: `${typoValues.fontWeightBold}`,
textAlign: 'start', // reset the default browser
};
export const tableTitleCenter = {
// backgrounds & foregrounds:
...theme('primary'),
// borders:
...borderAllSides,
...borderRadiusTopSide,
// spacings:
padding: `calc(${spacerValues.md} * 0.75)`,
// typos:
fontSize: `calc(1 * ${typoValues.fontSizeMd})`,
fontWeight: `${typoValues.fontWeightBold}`,
textAlign: 'center', // reset the default browser
};
export const tableTitleSide = {
// positions:
verticalAlign: 'middle', // center vertically
// sizes:
boxSizing: 'content-box',
width: '4em', // wrap for long title
// borders:
...borderInlineStartSide,
...borderBottomSide,
// spacings:
padding: `calc(${spacerValues.md} * 0.75)`,
// typos:
fontSize: `calc(1 * ${typoValues.fontSizeMd})`,
fontWeight: `${typoValues.fontWeightBold}`,
textAlign: 'end', // align to right_most
};
export const tableTitleSideFirst = {
// layouts:
...tableTitleSide,
// borders:
...borderRadiusTopStartSide,
};
export const tableTitleSideLast = {
// layouts:
...tableTitleSide,
// borders:
...borderRadiusBottomStartSide,
};
export const tableLabelSide = {
// positions:
verticalAlign: 'middle', // center vertically
// typos:
...textSecondary,
textAlign: 'end', // align to right_most
};
export const tableContentSide = {
// borders:
...borderInlineEndSide,
...borderBottomSide,
// spacings:
padding: `calc(${spacerValues.md} * 0.75)`,
// typos:
whiteSpace: 'normal',
wordBreak: 'break-all',
};
export const tableContentSideFirst = {
// layouts:
...tableContentSide,
// borders:
...borderRadiusTopEndSide,
};
export const tableContentSideLast = {
// layouts:
...tableContentSide,
// borders:
...borderRadiusBottomEndSide,
};
export const tableColonSeparator = {
// layouts:
...textSecondary,
// spacings:
paddingLeft: `calc(${spacerValues.md} / 2)`,
paddingRight: `calc(${spacerValues.md} / 2)`,
};
export const tableGapSeparator = {
// spacings:
paddingRight: `calc(${spacerValues.md} / 4)`,
};
export const tableColumnAutoSize = {
// sizes:
width: '100%', // fills the rest of table width
};