@clerk/themes
Version:
Themes for the Clerk auth components
81 lines (80 loc) • 4.73 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.whiteAlpha = exports.neutralAlpha = exports.colors = void 0;
const colors_1 = require("../utils/colors");
const scales_1 = require("../utils/colors/scales");
const cssVariables_1 = require("../utils/cssVariables");
const whiteAlpha = Object.freeze({
whiteAlpha25: 'hsla(0, 0%, 100%, 0.02)',
whiteAlpha50: 'hsla(0, 0%, 100%, 0.03)',
whiteAlpha100: 'hsla(0, 0%, 100%, 0.07)',
whiteAlpha150: 'hsla(0, 0%, 100%, 0.11)',
whiteAlpha200: 'hsla(0, 0%, 100%, 0.15)',
whiteAlpha300: 'hsla(0, 0%, 100%, 0.28)',
whiteAlpha400: 'hsla(0, 0%, 100%, 0.41)',
whiteAlpha500: 'hsla(0, 0%, 100%, 0.53)',
whiteAlpha600: 'hsla(0, 0%, 100%, 0.62)',
whiteAlpha700: 'hsla(0, 0%, 100%, 0.73)',
whiteAlpha750: 'hsla(0, 0%, 100%, 0.78)',
whiteAlpha800: 'hsla(0, 0%, 100%, 0.81)',
whiteAlpha850: 'hsla(0, 0%, 100%, 0.84)',
whiteAlpha900: 'hsla(0, 0%, 100%, 0.87)',
whiteAlpha950: 'hsla(0, 0%, 100%, 0.92)',
});
exports.whiteAlpha = whiteAlpha;
/**
* Color scale generation with clerkCssVar
*
* These functions will never return undefined because:
* 1. clerkCssVar always provides a fallback value (e.g., 'var(--clerk-color-danger, #EF4444)')
* 2. The fallback ensures a valid color string is always passed to the scale generation functions
* 3. Valid color strings always produce complete color scales
*
* Therefore, it's safe to assert these as NonNullable.
*/
const defaultColorNeutral = (0, cssVariables_1.clerkCssVar)('color-neutral', '#000000');
const dangerScale = (0, scales_1.colorOptionToThemedLightnessScale)((0, cssVariables_1.clerkCssVar)('color-danger', '#EF4444'), 'danger');
const primaryScale = (0, scales_1.colorOptionToThemedLightnessScale)((0, cssVariables_1.clerkCssVar)('color-primary', '#2F3037'), 'primary');
const successScale = (0, scales_1.colorOptionToThemedLightnessScale)((0, cssVariables_1.clerkCssVar)('color-success', '#22C543'), 'success');
const warningScale = (0, scales_1.colorOptionToThemedLightnessScale)((0, cssVariables_1.clerkCssVar)('color-warning', '#F36B16'), 'warning');
const dangerAlphaScale = (0, scales_1.colorOptionToThemedAlphaScale)((0, cssVariables_1.clerkCssVar)('color-danger', '#EF4444'), 'dangerAlpha');
const neutralAlphaScale = (0, scales_1.colorOptionToThemedAlphaScale)(defaultColorNeutral, 'neutralAlpha');
exports.neutralAlpha = neutralAlphaScale;
const primaryAlphaScale = (0, scales_1.colorOptionToThemedAlphaScale)((0, cssVariables_1.clerkCssVar)('color-primary', '#2F3037'), 'primaryAlpha');
const successAlphaScale = (0, scales_1.colorOptionToThemedAlphaScale)((0, cssVariables_1.clerkCssVar)('color-success', '#22C543'), 'successAlpha');
const warningAlphaScale = (0, scales_1.colorOptionToThemedAlphaScale)((0, cssVariables_1.clerkCssVar)('color-warning', '#F36B16'), 'warningAlpha');
const borderAlphaScale = (0, scales_1.colorOptionToThemedAlphaScale)((0, cssVariables_1.clerkCssVar)('color-border', defaultColorNeutral), 'borderAlpha');
const colorForeground = (0, cssVariables_1.clerkCssVar)('color-foreground', '#212126');
const colorMutedForeground = (0, cssVariables_1.clerkCssVar)('color-muted-foreground', colors_1.colors.makeTransparent(colorForeground, 0.35) || '#747686');
const colors = Object.freeze({
avatarBorder: neutralAlphaScale.neutralAlpha200,
avatarBackground: neutralAlphaScale.neutralAlpha400,
colorModalBackdrop: colors_1.colors.makeTransparent((0, cssVariables_1.clerkCssVar)('color-modal-backdrop', defaultColorNeutral), 0.27) ||
neutralAlphaScale.neutralAlpha700,
colorBackground: (0, cssVariables_1.clerkCssVar)('color-background', 'white'),
colorInput: (0, cssVariables_1.clerkCssVar)('color-input', 'white'),
colorForeground,
colorMutedForeground,
colorMuted: undefined,
colorRing: colors_1.colors.makeTransparent((0, cssVariables_1.clerkCssVar)('color-ring', defaultColorNeutral), 0.85) ||
neutralAlphaScale.neutralAlpha200,
colorInputForeground: (0, cssVariables_1.clerkCssVar)('color-input-foreground', '#131316'),
colorPrimaryForeground: (0, cssVariables_1.clerkCssVar)('color-primary-foreground', 'white'),
colorShimmer: (0, cssVariables_1.clerkCssVar)('color-shimmer', 'rgba(255, 255, 255, 0.36)'),
transparent: 'transparent',
white: 'white',
black: 'black',
...neutralAlphaScale,
...whiteAlpha,
...primaryScale,
primaryHover: colors_1.colors.adjustForLightness(primaryScale.primary500),
...primaryAlphaScale,
...dangerScale,
...dangerAlphaScale,
...warningScale,
...warningAlphaScale,
...successScale,
...successAlphaScale,
...borderAlphaScale,
});
exports.colors = colors;