@clerk/themes
Version:
Themes for the Clerk auth components
405 lines (401 loc) • 20.6 kB
text/typescript
import { Appearance, DeepPartial, Theme, Elements, BaseTheme } from '@clerk/types';
import * as node_modules__clerk_types_dist from 'node_modules/@clerk/types/dist';
declare const defaultInternalThemeFoundations: Readonly<{
readonly colors: Readonly<{
readonly borderAlpha25: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha50: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha100: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha150: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha200: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha300: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha400: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha500: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha600: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha700: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha750: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha800: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha850: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha900: node_modules__clerk_types_dist.HslaColorString;
readonly borderAlpha950: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha25: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha50: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha100: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha150: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha200: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha300: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha400: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha500: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha600: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha700: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha750: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha800: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha850: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha900: node_modules__clerk_types_dist.HslaColorString;
readonly successAlpha950: node_modules__clerk_types_dist.HslaColorString;
readonly success25: node_modules__clerk_types_dist.HslaColorString;
readonly success50: node_modules__clerk_types_dist.HslaColorString;
readonly success100: node_modules__clerk_types_dist.HslaColorString;
readonly success150: node_modules__clerk_types_dist.HslaColorString;
readonly success200: node_modules__clerk_types_dist.HslaColorString;
readonly success300: node_modules__clerk_types_dist.HslaColorString;
readonly success400: node_modules__clerk_types_dist.HslaColorString;
readonly success500: node_modules__clerk_types_dist.HslaColorString;
readonly success600: node_modules__clerk_types_dist.HslaColorString;
readonly success700: node_modules__clerk_types_dist.HslaColorString;
readonly success750: node_modules__clerk_types_dist.HslaColorString;
readonly success800: node_modules__clerk_types_dist.HslaColorString;
readonly success850: node_modules__clerk_types_dist.HslaColorString;
readonly success900: node_modules__clerk_types_dist.HslaColorString;
readonly success950: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha25: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha50: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha100: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha150: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha200: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha300: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha400: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha500: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha600: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha700: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha750: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha800: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha850: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha900: node_modules__clerk_types_dist.HslaColorString;
readonly warningAlpha950: node_modules__clerk_types_dist.HslaColorString;
readonly warning25: node_modules__clerk_types_dist.HslaColorString;
readonly warning50: node_modules__clerk_types_dist.HslaColorString;
readonly warning100: node_modules__clerk_types_dist.HslaColorString;
readonly warning150: node_modules__clerk_types_dist.HslaColorString;
readonly warning200: node_modules__clerk_types_dist.HslaColorString;
readonly warning300: node_modules__clerk_types_dist.HslaColorString;
readonly warning400: node_modules__clerk_types_dist.HslaColorString;
readonly warning500: node_modules__clerk_types_dist.HslaColorString;
readonly warning600: node_modules__clerk_types_dist.HslaColorString;
readonly warning700: node_modules__clerk_types_dist.HslaColorString;
readonly warning750: node_modules__clerk_types_dist.HslaColorString;
readonly warning800: node_modules__clerk_types_dist.HslaColorString;
readonly warning850: node_modules__clerk_types_dist.HslaColorString;
readonly warning900: node_modules__clerk_types_dist.HslaColorString;
readonly warning950: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha25: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha50: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha100: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha150: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha200: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha300: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha400: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha500: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha600: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha700: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha750: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha800: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha850: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha900: node_modules__clerk_types_dist.HslaColorString;
readonly dangerAlpha950: node_modules__clerk_types_dist.HslaColorString;
readonly danger25: node_modules__clerk_types_dist.HslaColorString;
readonly danger50: node_modules__clerk_types_dist.HslaColorString;
readonly danger100: node_modules__clerk_types_dist.HslaColorString;
readonly danger150: node_modules__clerk_types_dist.HslaColorString;
readonly danger200: node_modules__clerk_types_dist.HslaColorString;
readonly danger300: node_modules__clerk_types_dist.HslaColorString;
readonly danger400: node_modules__clerk_types_dist.HslaColorString;
readonly danger500: node_modules__clerk_types_dist.HslaColorString;
readonly danger600: node_modules__clerk_types_dist.HslaColorString;
readonly danger700: node_modules__clerk_types_dist.HslaColorString;
readonly danger750: node_modules__clerk_types_dist.HslaColorString;
readonly danger800: node_modules__clerk_types_dist.HslaColorString;
readonly danger850: node_modules__clerk_types_dist.HslaColorString;
readonly danger900: node_modules__clerk_types_dist.HslaColorString;
readonly danger950: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha25: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha50: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha100: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha150: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha200: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha300: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha400: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha500: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha600: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha700: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha750: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha800: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha850: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha900: node_modules__clerk_types_dist.HslaColorString;
readonly primaryAlpha950: node_modules__clerk_types_dist.HslaColorString;
readonly primaryHover: string | undefined;
readonly primary25: node_modules__clerk_types_dist.HslaColorString;
readonly primary50: node_modules__clerk_types_dist.HslaColorString;
readonly primary100: node_modules__clerk_types_dist.HslaColorString;
readonly primary150: node_modules__clerk_types_dist.HslaColorString;
readonly primary200: node_modules__clerk_types_dist.HslaColorString;
readonly primary300: node_modules__clerk_types_dist.HslaColorString;
readonly primary400: node_modules__clerk_types_dist.HslaColorString;
readonly primary500: node_modules__clerk_types_dist.HslaColorString;
readonly primary600: node_modules__clerk_types_dist.HslaColorString;
readonly primary700: node_modules__clerk_types_dist.HslaColorString;
readonly primary750: node_modules__clerk_types_dist.HslaColorString;
readonly primary800: node_modules__clerk_types_dist.HslaColorString;
readonly primary850: node_modules__clerk_types_dist.HslaColorString;
readonly primary900: node_modules__clerk_types_dist.HslaColorString;
readonly primary950: node_modules__clerk_types_dist.HslaColorString;
readonly whiteAlpha25: "hsla(0, 0%, 100%, 0.02)";
readonly whiteAlpha50: "hsla(0, 0%, 100%, 0.03)";
readonly whiteAlpha100: "hsla(0, 0%, 100%, 0.07)";
readonly whiteAlpha150: "hsla(0, 0%, 100%, 0.11)";
readonly whiteAlpha200: "hsla(0, 0%, 100%, 0.15)";
readonly whiteAlpha300: "hsla(0, 0%, 100%, 0.28)";
readonly whiteAlpha400: "hsla(0, 0%, 100%, 0.41)";
readonly whiteAlpha500: "hsla(0, 0%, 100%, 0.53)";
readonly whiteAlpha600: "hsla(0, 0%, 100%, 0.62)";
readonly whiteAlpha700: "hsla(0, 0%, 100%, 0.73)";
readonly whiteAlpha750: "hsla(0, 0%, 100%, 0.78)";
readonly whiteAlpha800: "hsla(0, 0%, 100%, 0.81)";
readonly whiteAlpha850: "hsla(0, 0%, 100%, 0.84)";
readonly whiteAlpha900: "hsla(0, 0%, 100%, 0.87)";
readonly whiteAlpha950: "hsla(0, 0%, 100%, 0.92)";
readonly neutralAlpha25: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha50: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha100: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha150: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha200: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha300: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha400: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha500: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha600: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha700: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha750: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha800: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha850: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha900: node_modules__clerk_types_dist.HslaColorString;
readonly neutralAlpha950: node_modules__clerk_types_dist.HslaColorString;
readonly avatarBorder: node_modules__clerk_types_dist.HslaColorString;
readonly avatarBackground: node_modules__clerk_types_dist.HslaColorString;
readonly colorModalBackdrop: string;
readonly colorBackground: string;
readonly colorInput: string;
readonly colorForeground: string;
readonly colorMutedForeground: string;
readonly colorMuted: undefined;
readonly colorRing: string;
readonly colorInputForeground: string;
readonly colorPrimaryForeground: string;
readonly colorShimmer: string;
readonly transparent: "transparent";
readonly white: "white";
readonly black: "black";
}>;
readonly fonts: Readonly<{
readonly main: string;
readonly buttons: string;
}>;
readonly fontStyles: Readonly<{
readonly normal: "normal";
}>;
readonly fontSizes: Readonly<{
readonly xs: string;
readonly sm: string;
readonly md: string;
readonly lg: string;
readonly xl: string;
}>;
readonly fontWeights: Readonly<{
readonly normal: string;
readonly medium: string;
readonly semibold: string;
readonly bold: string;
}>;
readonly letterSpacings: Readonly<{
readonly normal: "normal";
}>;
readonly lineHeights: Readonly<{
readonly normal: "normal";
readonly extraSmall: "1.33333";
readonly small: "1.38462";
readonly medium: "1.41176";
readonly large: "1.45455";
}>;
readonly radii: Readonly<{
readonly none: "0px";
readonly circle: "50%";
readonly avatar: string;
readonly sm: string;
readonly md: string;
readonly lg: string;
readonly xl: string;
readonly halfHeight: "99999px";
}>;
readonly sizes: Readonly<{
readonly '0x25': "0.0625rem";
readonly '0x5': "0.125rem";
readonly '1': "0.25rem";
readonly '1x5': "0.375rem";
readonly '2': "0.5rem";
readonly '2x5': "0.625rem";
readonly '3': "0.75rem";
readonly '3x25': "0.8125rem";
readonly '3x5': "0.875rem";
readonly '4': "1rem";
readonly '4x25': "1.0625rem";
readonly '5': "1.25rem";
readonly '5x5': "1.375rem";
readonly '6': "1.5rem";
readonly '7': "1.75rem";
readonly '7x5': "1.875rem";
readonly '8': "2rem";
readonly '8x5': "2.125rem";
readonly '8x75': "2.1875rem";
readonly '9': "2.25rem";
readonly '10': "2.5rem";
readonly '12': "3rem";
readonly '13': "3.5rem";
readonly '16': "4rem";
readonly '17': "4.25rem";
readonly '20': "5rem";
readonly '24': "6rem";
readonly '28': "7rem";
readonly '32': "8rem";
readonly '36': "9rem";
readonly '40': "10rem";
readonly '44': "11rem";
readonly '48': "12rem";
readonly '52': "13rem";
readonly '56': "14rem";
readonly '57': "14.25rem";
readonly '60': "15rem";
readonly '66': "16.5rem";
readonly '94': "23.5rem";
readonly '100': "25rem";
readonly '108': "27rem";
readonly '120': "30rem";
readonly '140': "35rem";
readonly '160': "40rem";
readonly '176': "44rem";
readonly '220': "55rem";
readonly none: "0";
readonly xxs: "0.5px";
readonly px: "1px";
}>;
readonly space: Readonly<{
readonly 100: string;
readonly 1: string;
readonly 2: string;
readonly "0x25": string;
readonly "0x5": string;
readonly "1x5": string;
readonly "2x5": string;
readonly 3: string;
readonly "3x25": string;
readonly "3x5": string;
readonly 4: string;
readonly "4x25": string;
readonly 5: string;
readonly "5x5": string;
readonly 6: string;
readonly 7: string;
readonly "7x5": string;
readonly 8: string;
readonly "8x5": string;
readonly "8x75": string;
readonly 9: string;
readonly 10: string;
readonly 12: string;
readonly 13: string;
readonly 16: string;
readonly 17: string;
readonly 20: string;
readonly 24: string;
readonly 28: string;
readonly 32: string;
readonly 36: string;
readonly 40: string;
readonly 44: string;
readonly 48: string;
readonly 52: string;
readonly 56: string;
readonly 57: string;
readonly 60: string;
readonly 66: string;
readonly 94: string;
readonly 108: string;
readonly 120: string;
readonly 140: string;
readonly 160: string;
readonly 176: string;
readonly 220: string;
readonly none: "0";
readonly xxs: "0.5px";
readonly px: "1px";
}>;
readonly shadows: Readonly<{
menuShadow: string;
fabShadow: string;
buttonShadow: string;
cardBoxShadow: string;
cardContentShadow: string;
actionCardShadow: string;
outlineButtonShadow: string;
input: string;
focusRing: string;
badge: string;
tableBodyShadow: string;
segmentedControl: string;
switchControl: string;
}>;
readonly transitionProperty: Readonly<{
readonly common: "background-color,background,border-color,color,fill,stroke,opacity,box-shadow,transform";
}>;
readonly transitionTiming: Readonly<{
readonly common: "ease";
readonly easeOut: "ease-out";
readonly bezier: "cubic-bezier(0.32, 0.72, 0, 1)";
readonly slowBezier: "cubic-bezier(0.16, 1, 0.3, 1)";
}>;
readonly transitionDuration: Readonly<Record<"focusRing" | "slowest" | "slower" | "slow" | "fast" | "controls" | "textField" | "drawer", string>>;
readonly transitionDurationValues: Readonly<{
readonly slowest: 600;
readonly slower: 280;
readonly slow: 200;
readonly fast: 120;
readonly focusRing: 200;
readonly controls: 100;
readonly textField: 450;
readonly drawer: 500;
}>;
readonly opacity: Readonly<{
readonly sm: "24%";
readonly disabled: "50%";
readonly inactive: "62%";
}>;
readonly borderStyles: Readonly<{
readonly solid: "solid";
readonly dashed: "dashed";
}>;
readonly borderWidths: Readonly<{
normal: "1px";
heavy: "2px";
}>;
readonly zIndices: Readonly<{
readonly card: "10";
readonly navbar: "100";
readonly fab: "9000";
readonly modal: "10000";
readonly dropdown: "11000";
}>;
}>;
type InternalThemeFoundations = typeof defaultInternalThemeFoundations;
type PrefixWith<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`;
type InternalTheme<F = InternalThemeFoundations> = {
[scale in keyof F]: {
[token in keyof F[scale] as PrefixWith<'$', token>]: F[scale][token];
};
};
interface CreateClerkThemeParams extends DeepPartial<Theme> {
/**
* {@link Theme.elements}
*/
elements?: Elements | ((params: {
theme: InternalTheme;
}) => Elements);
}
declare const experimental_createTheme: (appearance: Appearance<CreateClerkThemeParams>) => BaseTheme;
export { experimental_createTheme };