UNPKG

@clerk/themes

Version:

Themes for the Clerk auth components

405 lines (401 loc) • 20.6 kB
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 };