@clerk/themes
Version:
Themes for the Clerk auth components
49 lines (48 loc) • 2.37 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.fontStyles = exports.fonts = exports.lineHeights = exports.letterSpacings = exports.fontWeights = exports.fontSizes = exports.FONT_SIZE_SCALE_RATIOS = void 0;
const cssVariables_1 = require("../utils/cssVariables");
const fontWeights = Object.freeze({
normal: (0, cssVariables_1.clerkCssVar)('font-weight-normal', (0, cssVariables_1.clerkCssVar)('font-weight', '400')),
medium: (0, cssVariables_1.clerkCssVar)('font-weight-medium', '500'),
semibold: (0, cssVariables_1.clerkCssVar)('font-weight-semibold', '600'),
bold: (0, cssVariables_1.clerkCssVar)('font-weight-bold', '700'),
});
exports.fontWeights = fontWeights;
const lineHeights = Object.freeze({
normal: 'normal',
extraSmall: '1.33333',
small: '1.38462',
medium: '1.41176',
large: '1.45455',
});
exports.lineHeights = lineHeights;
const letterSpacings = Object.freeze({
normal: 'normal',
});
exports.letterSpacings = letterSpacings;
exports.FONT_SIZE_SCALE_RATIOS = Object.freeze({
xs: '11 / 13', // 0.846154
sm: '12 / 13', // 0.923077
md: '1', // 1.0
lg: '17 / 13', // 1.307692
xl: '24 / 13', // 1.846154
});
const fontSizesDefaultVar = (0, cssVariables_1.clerkCssVar)('font-size', '0.8125rem');
const fontSizes = Object.freeze({
xs: (0, cssVariables_1.clerkCssVar)('font-size-xs', `calc(${fontSizesDefaultVar} * ${exports.FONT_SIZE_SCALE_RATIOS.xs})`), // 0.6875rem
sm: (0, cssVariables_1.clerkCssVar)('font-size-sm', `calc(${fontSizesDefaultVar} * ${exports.FONT_SIZE_SCALE_RATIOS.sm})`), // 0.75rem
md: (0, cssVariables_1.clerkCssVar)('font-size-md', fontSizesDefaultVar), // 0.8125rem
lg: (0, cssVariables_1.clerkCssVar)('font-size-lg', `calc(${fontSizesDefaultVar} * ${exports.FONT_SIZE_SCALE_RATIOS.lg})`), // 1.0625rem
xl: (0, cssVariables_1.clerkCssVar)('font-size-xl', `calc(${fontSizesDefaultVar} * ${exports.FONT_SIZE_SCALE_RATIOS.xl})`), // 1.5rem
});
exports.fontSizes = fontSizes;
const fontStyles = Object.freeze({
normal: 'normal',
});
exports.fontStyles = fontStyles;
const fonts = Object.freeze({
main: (0, cssVariables_1.clerkCssVar)('font-family', 'inherit'),
buttons: (0, cssVariables_1.clerkCssVar)('font-family-buttons', (0, cssVariables_1.clerkCssVar)('font-family', 'inherit')),
});
exports.fonts = fonts;