welcome-ui/dist/types/theme/index.d.ts

Customizable design system with react • styled-components • styled-system and ariakit.

import { CSSScalar, ITheme as StyledComponentDefaultTheme, DefaultTheme as XStyledDefaultTheme } from '@xstyled/styled-components';
import { ThemeAccordions } from '../components/Accordion/theme';
import { ThemeAlerts } from '../components/Alert/theme';
import { ThemeAvatars } from '../components/Avatar/theme';
import { ThemeBadges } from '../components/Badge/theme';
import { ThemeBreadcrumbs } from '../components/Breadcrumb/theme';
import { ThemeButtons } from '../components/Button/theme';
import { ThemeCards } from '../components/Card/theme';
import { ThemeCheckboxes } from '../components/Checkbox/theme';
import { ThemeDateTimePickerCommon } from '../components/DateTimePickerCommon/theme';
import { ThemeDrawers } from '../components/Drawer/theme';
import { ThemeDropdownMenu } from '../components/DropdownMenu/theme';
import { ThemeFileDrops } from '../components/FileDrop/theme';
import { ThemeHints } from '../components/Hint/theme';
import { ThemeIcons } from '../components/Icon/theme';
import { ThemeLabels } from '../components/Label/theme';
import { ThemeLinks } from '../components/Link/theme';
import { ThemeLoaders } from '../components/Loader/theme';
import { ThemeModals } from '../components/Modal/theme';
import { ThemePagination } from '../components/Pagination/theme';
import { ThemePopovers } from '../components/Popover/theme';
import { ThemeRadios } from '../components/Radio/theme';
import { ThemeRadioTabs } from '../components/RadioTab/theme';
import { ThemeSliders } from '../components/Slider/theme';
import { ThemeSwipers } from '../components/Swiper/theme';
import { ThemeTables } from '../components/Table/theme';
import { ThemeTabs } from '../components/Tabs/theme';
import { ThemeTags } from '../components/Tag/theme';
import { ThemeTextareas } from '../components/Textarea/theme';
import { ThemeToasts } from '../components/Toast/theme';
import { ThemeToggles } from '../components/Toggle/theme';
import { ThemeTooltips } from '../components/Tooltip/theme';
import { ThemeVariantIcon } from '../components/VariantIcon/theme';
import { ThemeBorderWidths } from './borders';
import { ThemeColors } from './colors';
import { darkTheme } from './dark';
import { ThemeDefaultFields } from './defaultFields';
import { ThemeFocus } from './focus';
import { ThemeFontFaces } from './fonts';
import { ThemeRadii } from './radii';
import { ThemeScreens } from './screens';
import { ThemeSelection } from './selection';
import { ThemeShadows } from './shadows';
import { ThemeSpace } from './space';
import { ThemeTimingFunction, ThemeTransitions } from './transitions';
import { ThemeFonts, ThemeFontSizes, ThemeFontWeights, ThemeLetterSpacings, ThemeLineHeights, ThemeTexts, ThemeTextsFontColors, ThemeTextsFontFamily, ThemeTextsFontWeights, ThemeTextsTextTransform } from './typography';
import { ThemeUnderline } from './underline';
export type ThemeColorTokens = keyof ThemeColors;
export type ThemeFontsUrl = 'https://cdn.welcome-ui.com/fonts' | 'https://cdn.welcometothejungle.com/fonts' | string;
export type ThemeProps = {
    [param: string]: unknown;
    defaultFontFamily?: string;
    defaultFontSize?: number;
    defaultLetterSpacing?: string;
    defaultLineHeight?: number;
    fontsUrl?: ThemeFontsUrl;
    headingFontFamily?: string;
    iconFontFamily?: string;
};
export interface ThemeValues extends StyledComponentsTheme, XStyledTheme {
    accordions: ThemeAccordions;
    alerts: ThemeAlerts;
    avatars: ThemeAvatars;
    badges: ThemeBadges;
    borderWidths: ThemeBorderWidths;
    breadcrumbs: ThemeBreadcrumbs;
    buttons: ThemeButtons;
    cards: ThemeCards;
    checkboxes: ThemeCheckboxes;
    colors: ThemeColors;
    dateTimePickerCommon: ThemeDateTimePickerCommon;
    defaultFields: ThemeDefaultFields;
    defaultLetterSpacing: string;
    defaultLineHeight: number;
    drawers: ThemeDrawers;
    dropdownMenu: ThemeDropdownMenu;
    fileDrops: ThemeFileDrops;
    focus: ThemeFocus;
    fontFaces: ThemeFontFaces;
    fonts: ThemeFonts;
    fontSizes: ThemeFontSizes;
    fontsUrl: ThemeFontsUrl;
    fontWeights: ThemeFontWeights;
    hints: ThemeHints;
    icons: ThemeIcons;
    inset: ThemeSpace;
    labels: ThemeLabels;
    letterSpacings: ThemeLetterSpacings;
    lineHeights: ThemeLineHeights;
    links: ThemeLinks;
    loaders: ThemeLoaders;
    modals: ThemeModals;
    pagination: ThemePagination;
    popovers: ThemePopovers;
    radii: ThemeRadii;
    radios: ThemeRadios;
    radiosTab: ThemeRadioTabs;
    screens: ThemeScreens;
    selection: ThemeSelection;
    shadows: ThemeShadows;
    sliders: ThemeSliders;
    space: ThemeSpace;
    swipers: ThemeSwipers;
    tables: ThemeTables;
    tabs: ThemeTabs;
    tags: ThemeTags;
    textareas: ThemeTextareas;
    texts: ThemeTexts;
    textsFontColors: ThemeTextsFontColors;
    textsFontFamily: ThemeTextsFontFamily;
    textsFontWeights: ThemeTextsFontWeights;
    textsTextTransform: ThemeTextsTextTransform;
    timingFunction: ThemeTimingFunction;
    toasts: ThemeToasts;
    toEm: (int: number) => string;
    toggles: ThemeToggles;
    tooltips: ThemeTooltips;
    toPx: (int: number) => string;
    toRem: (int: number) => string;
    transformers: {
        border: (value: CSSScalar) => CSSScalar;
        px: (value: CSSScalar) => CSSScalar;
    };
    transitions: ThemeTransitions;
    underline: ThemeUnderline;
    variantIcon: ThemeVariantIcon;
}
type OverrideKeys = 'borderWidths' | 'colors' | 'fonts' | 'fontSizes' | 'fontWeights' | 'letterSpacings' | 'lineHeights' | 'radii' | 'screens' | 'shadows' | 'sizes' | 'space' | 'texts';
type StyledComponentsTheme = Omit<StyledComponentDefaultTheme, OverrideKeys>;
type XStyledTheme = Omit<XStyledDefaultTheme, OverrideKeys>;
export declare const createTheme: (options?: ThemeProps) => ThemeValues;
export { darkTheme };