welcome-ui 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/types/theme/colors.d.ts

@@ -0,0 +1,346 @@
+declare const palette: {
+    'beige-10': string;
+    'beige-20': string;
+    'beige-30': string;
+    'beige-40': string;
+    'beige-50': string;
+    'beige-60': string;
+    'beige-70': string;
+    'beige-80': string;
+    'beige-90': string;
+    'blue-10': string;
+    'blue-20': string;
+    'blue-30': string;
+    'blue-40': string;
+    'blue-50': string;
+    'blue-60': string;
+    'blue-70': string;
+    'blue-80': string;
+    'blue-90': string;
+    'green-10': string;
+    'green-20': string;
+    'green-30': string;
+    'green-40': string;
+    'green-50': string;
+    'green-60': string;
+    'green-70': string;
+    'green-80': string;
+    'green-90': string;
+    'neutral-10': string;
+    'neutral-20': string;
+    'neutral-30': string;
+    'neutral-40': string;
+    'neutral-50': string;
+    'neutral-60': string;
+    'neutral-70': string;
+    'neutral-80': string;
+    'neutral-90': string;
+    'orange-10': string;
+    'orange-20': string;
+    'orange-30': string;
+    'orange-40': string;
+    'orange-50': string;
+    'orange-60': string;
+    'orange-70': string;
+    'orange-80': string;
+    'orange-90': string;
+    'pink-10': string;
+    'pink-20': string;
+    'pink-30': string;
+    'pink-40': string;
+    'pink-50': string;
+    'pink-60': string;
+    'pink-70': string;
+    'pink-80': string;
+    'pink-90': string;
+    'red-10': string;
+    'red-20': string;
+    'red-30': string;
+    'red-40': string;
+    'red-50': string;
+    'red-60': string;
+    'red-70': string;
+    'red-80': string;
+    'red-90': string;
+    'red-orange-10': string;
+    'red-orange-20': string;
+    'red-orange-30': string;
+    'red-orange-40': string;
+    'red-orange-50': string;
+    'red-orange-60': string;
+    'red-orange-70': string;
+    'red-orange-80': string;
+    'red-orange-90': string;
+    'teal-10': string;
+    'teal-20': string;
+    'teal-30': string;
+    'teal-40': string;
+    'teal-50': string;
+    'teal-60': string;
+    'teal-70': string;
+    'teal-80': string;
+    'teal-90': string;
+    'violet-10': string;
+    'violet-20': string;
+    'violet-30': string;
+    'violet-40': string;
+    'violet-50': string;
+    'violet-60': string;
+    'violet-70': string;
+    'violet-80': string;
+    'violet-90': string;
+    'yellow-10': string;
+    'yellow-20': string;
+    'yellow-30': string;
+    'yellow-40': string;
+    'yellow-50': string;
+    'yellow-60': string;
+    'yellow-70': string;
+    'yellow-80': string;
+    'yellow-90': string;
+};
+export declare const getColors: (systemColors: typeof palette) => {
+    'primary-10': string;
+    'primary-20': string;
+    'primary-30': string;
+    'primary-40': string;
+    'primary-50': string;
+    'primary-60': string;
+    'primary-70': string;
+    'primary-80': string;
+    'primary-90': string;
+    'secondary-blue': string;
+    'secondary-green': string;
+    'secondary-orange': string;
+    'secondary-pink': string;
+    'secondary-teal': string;
+    'secondary-violet': string;
+    overlay: string;
+    'beige-10': string;
+    'beige-20': string;
+    'beige-30': string;
+    'beige-40': string;
+    'beige-50': string;
+    'beige-60': string;
+    'beige-70': string;
+    'beige-80': string;
+    'beige-90': string;
+    'blue-10': string;
+    'blue-20': string;
+    'blue-30': string;
+    'blue-40': string;
+    'blue-50': string;
+    'blue-60': string;
+    'blue-70': string;
+    'blue-80': string;
+    'blue-90': string;
+    'green-10': string;
+    'green-20': string;
+    'green-30': string;
+    'green-40': string;
+    'green-50': string;
+    'green-60': string;
+    'green-70': string;
+    'green-80': string;
+    'green-90': string;
+    'neutral-10': string;
+    'neutral-20': string;
+    'neutral-30': string;
+    'neutral-40': string;
+    'neutral-50': string;
+    'neutral-60': string;
+    'neutral-70': string;
+    'neutral-80': string;
+    'neutral-90': string;
+    'orange-10': string;
+    'orange-20': string;
+    'orange-30': string;
+    'orange-40': string;
+    'orange-50': string;
+    'orange-60': string;
+    'orange-70': string;
+    'orange-80': string;
+    'orange-90': string;
+    'pink-10': string;
+    'pink-20': string;
+    'pink-30': string;
+    'pink-40': string;
+    'pink-50': string;
+    'pink-60': string;
+    'pink-70': string;
+    'pink-80': string;
+    'pink-90': string;
+    'red-10': string;
+    'red-20': string;
+    'red-30': string;
+    'red-40': string;
+    'red-50': string;
+    'red-60': string;
+    'red-70': string;
+    'red-80': string;
+    'red-90': string;
+    'red-orange-10': string;
+    'red-orange-20': string;
+    'red-orange-30': string;
+    'red-orange-40': string;
+    'red-orange-50': string;
+    'red-orange-60': string;
+    'red-orange-70': string;
+    'red-orange-80': string;
+    'red-orange-90': string;
+    'teal-10': string;
+    'teal-20': string;
+    'teal-30': string;
+    'teal-40': string;
+    'teal-50': string;
+    'teal-60': string;
+    'teal-70': string;
+    'teal-80': string;
+    'teal-90': string;
+    'violet-10': string;
+    'violet-20': string;
+    'violet-30': string;
+    'violet-40': string;
+    'violet-50': string;
+    'violet-60': string;
+    'violet-70': string;
+    'violet-80': string;
+    'violet-90': string;
+    'yellow-10': string;
+    'yellow-20': string;
+    'yellow-30': string;
+    'yellow-40': string;
+    'yellow-50': string;
+    'yellow-60': string;
+    'yellow-70': string;
+    'yellow-80': string;
+    'yellow-90': string;
+};
+export declare const colors: {
+    'primary-10': string;
+    'primary-20': string;
+    'primary-30': string;
+    'primary-40': string;
+    'primary-50': string;
+    'primary-60': string;
+    'primary-70': string;
+    'primary-80': string;
+    'primary-90': string;
+    'secondary-blue': string;
+    'secondary-green': string;
+    'secondary-orange': string;
+    'secondary-pink': string;
+    'secondary-teal': string;
+    'secondary-violet': string;
+    overlay: string;
+    'beige-10': string;
+    'beige-20': string;
+    'beige-30': string;
+    'beige-40': string;
+    'beige-50': string;
+    'beige-60': string;
+    'beige-70': string;
+    'beige-80': string;
+    'beige-90': string;
+    'blue-10': string;
+    'blue-20': string;
+    'blue-30': string;
+    'blue-40': string;
+    'blue-50': string;
+    'blue-60': string;
+    'blue-70': string;
+    'blue-80': string;
+    'blue-90': string;
+    'green-10': string;
+    'green-20': string;
+    'green-30': string;
+    'green-40': string;
+    'green-50': string;
+    'green-60': string;
+    'green-70': string;
+    'green-80': string;
+    'green-90': string;
+    'neutral-10': string;
+    'neutral-20': string;
+    'neutral-30': string;
+    'neutral-40': string;
+    'neutral-50': string;
+    'neutral-60': string;
+    'neutral-70': string;
+    'neutral-80': string;
+    'neutral-90': string;
+    'orange-10': string;
+    'orange-20': string;
+    'orange-30': string;
+    'orange-40': string;
+    'orange-50': string;
+    'orange-60': string;
+    'orange-70': string;
+    'orange-80': string;
+    'orange-90': string;
+    'pink-10': string;
+    'pink-20': string;
+    'pink-30': string;
+    'pink-40': string;
+    'pink-50': string;
+    'pink-60': string;
+    'pink-70': string;
+    'pink-80': string;
+    'pink-90': string;
+    'red-10': string;
+    'red-20': string;
+    'red-30': string;
+    'red-40': string;
+    'red-50': string;
+    'red-60': string;
+    'red-70': string;
+    'red-80': string;
+    'red-90': string;
+    'red-orange-10': string;
+    'red-orange-20': string;
+    'red-orange-30': string;
+    'red-orange-40': string;
+    'red-orange-50': string;
+    'red-orange-60': string;
+    'red-orange-70': string;
+    'red-orange-80': string;
+    'red-orange-90': string;
+    'teal-10': string;
+    'teal-20': string;
+    'teal-30': string;
+    'teal-40': string;
+    'teal-50': string;
+    'teal-60': string;
+    'teal-70': string;
+    'teal-80': string;
+    'teal-90': string;
+    'violet-10': string;
+    'violet-20': string;
+    'violet-30': string;
+    'violet-40': string;
+    'violet-50': string;
+    'violet-60': string;
+    'violet-70': string;
+    'violet-80': string;
+    'violet-90': string;
+    'yellow-10': string;
+    'yellow-20': string;
+    'yellow-30': string;
+    'yellow-40': string;
+    'yellow-50': string;
+    'yellow-60': string;
+    'yellow-70': string;
+    'yellow-80': string;
+    'yellow-90': string;
+};
+export type ThemeColors = typeof colors;
+declare const enum SecondaryColors {
+    'blue' = 0,
+    'green' = 1,
+    'orange' = 2,
+    'pink' = 3,
+    'teal' = 4,
+    'violet' = 5
+}
+export type ThemeSecondaryColors = keyof typeof SecondaryColors;
+export {};

package/dist/types/theme/dark.d.ts

@@ -0,0 +1,7 @@
+import { ThemeValues } from '.';
+type RecursivePartial<T> = {
+    [P in keyof T]?: T[P] | RecursivePartial<T[P]>;
+};
+export declare const colorsDark: ThemeValues['colors'];
+export declare const darkTheme: RecursivePartial<ThemeValues>;
+export {};

package/dist/types/theme/focus.d.ts

@@ -0,0 +1,10 @@
+import { CSSObject } from '@xstyled/styled-components';
+import { ThemeColors } from './colors';
+export type ThemeFocus = (color?: string) => {
+    boxShadow: CSSObject['boxShadow'];
+};
+export declare const getFocus: ({ colors }: {
+    colors: ThemeColors;
+}) => (color?: string) => {
+    boxShadow: string;
+};

package/dist/types/theme/fonts.d.ts

@@ -0,0 +1,18 @@
+import { ThemeValues } from '.';
+type FontFace = {
+    display?: FontDisplay;
+    extensions?: string[];
+    isVariable?: boolean;
+    stretch?: string;
+    style?: string;
+    uniCodeRange?: string;
+    url: string;
+    weight?: string;
+};
+export type ThemeFontFaces = {
+    'welcome-font': FontFace[];
+    'welcome-icon-font': FontFace[];
+    'work-sans': FontFace[];
+};
+export declare const fontFaces: (theme: ThemeValues) => ThemeFontFaces;
+export {};

package/dist/types/theme/index.d.ts

@@ -0,0 +1,76 @@
+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 { ThemeCards } from '../components/Card/theme';
+import { darkTheme } from './dark';
+import { ThemeColors } from './colors';
+import { ThemeFontFaces } from './fonts';
+import { ThemeFonts, ThemeFontSizes, ThemeFontWeights, ThemeLetterSpacings, ThemeLineHeights, ThemeTexts, ThemeTextsFontFamily, ThemeTextsFontWeights, ThemeTextsTextTransform } from './typography';
+import { ThemeTimingFunction, ThemeTransitions } from './transitions';
+import { ThemeUnderline } from './underline';
+import { ThemeRadii } from './radii';
+import { ThemeBorderWidths } from './borders';
+import { ThemeScreens } from './screens';
+import { ThemeShadows } from './shadows';
+import { ThemeSpace } from './space';
+import { ThemeSelection } from './selection';
+import { ThemeFocus } from './focus';
+type OverrideKeys = 'colors' | 'radii' | 'borderWidths' | 'fontSizes' | 'lineHeights' | 'fontWeights' | 'letterSpacings' | 'fonts' | 'sizes' | 'screens' | 'space' | 'shadows' | 'texts';
+type XStyledTheme = Omit<XStyledDefaultTheme, OverrideKeys>;
+type StyledComponentsTheme = Omit<StyledComponentDefaultTheme, OverrideKeys>;
+export interface ThemeValues extends XStyledTheme, StyledComponentsTheme {
+    accordions: ThemeAccordions;
+    alert: ThemeAlerts;
+    avatars: ThemeAvatars;
+    badges: ThemeBadges;
+    borderWidths: ThemeBorderWidths;
+    breadcrumbs: ThemeBreadcrumbs;
+    cards: ThemeCards;
+    colors: ThemeColors;
+    defaultLetterSpacing: string;
+    defaultLineHeight: number;
+    focus: ThemeFocus;
+    fontFaces: ThemeFontFaces;
+    fontSizes: ThemeFontSizes;
+    fontWeights: ThemeFontWeights;
+    fonts: ThemeFonts;
+    fontsUrl: ThemeFontsUrl;
+    inset: ThemeSpace;
+    letterSpacings: ThemeLetterSpacings;
+    lineHeights: ThemeLineHeights;
+    radii: ThemeRadii;
+    screens: ThemeScreens;
+    selection: ThemeSelection;
+    shadows: ThemeShadows;
+    space: ThemeSpace;
+    texts: ThemeTexts;
+    textsFontFamily: ThemeTextsFontFamily;
+    textsFontWeights: ThemeTextsFontWeights;
+    textsTextTransform: ThemeTextsTextTransform;
+    timingFunction: ThemeTimingFunction;
+    toEm: (int: number) => string;
+    toPx: (int: number) => string;
+    toRem: (int: number) => string;
+    transformers: {
+        border: (value: CSSScalar) => CSSScalar;
+        px: (value: CSSScalar) => CSSScalar;
+    };
+    transitions: ThemeTransitions;
+    underline: ThemeUnderline;
+}
+export type ThemeFontsUrl = 'https://cdn.welcome-ui.com/fonts' | 'https://cdn.welcometothejungle.com/fonts' | string;
+export type Options = {
+    [param: string]: unknown;
+    defaultFontFamily?: string;
+    defaultFontSize?: number;
+    defaultLetterSpacing?: string;
+    defaultLineHeight?: number;
+    fontsUrl?: ThemeFontsUrl;
+    headingFontFamily?: string;
+    iconFontFamily?: string;
+};
+export declare const createTheme: (options?: Options) => ThemeValues;
+export { darkTheme };

package/dist/types/theme/radii.d.ts

@@ -0,0 +1,12 @@
+import { ThemeValues } from '.';
+export type ThemeRadii = {
+    [key: number]: string;
+    full: string;
+    lg: string;
+    md: string;
+    none: string;
+    sm: string;
+    xl: string;
+    xxl: string;
+};
+export declare const getRadii: (theme: ThemeValues) => ThemeRadii;

package/dist/types/theme/screens.d.ts

@@ -0,0 +1,13 @@
+export type ThemeScreens = {
+    [key: string]: number;
+    [key: number]: number;
+    '3xl': number;
+    '4xl': number;
+    lg: number;
+    md: number;
+    sm: number;
+    xl: number;
+    xs: number;
+    xxl: number;
+};
+export declare const screens: ThemeScreens;

package/dist/types/theme/selection.d.ts

@@ -0,0 +1,4 @@
+import { CSSObject } from '@xstyled/styled-components';
+import { ThemeValues } from '.';
+export type ThemeSelection = CSSObject;
+export declare const getSelection: (theme: ThemeValues) => ThemeSelection;

package/dist/types/theme/shadows.d.ts

@@ -0,0 +1,5 @@
+export type ThemeShadows = {
+    md: string;
+    sm: string;
+};
+export declare const shadows: ThemeShadows;

package/dist/types/theme/space.d.ts

@@ -0,0 +1,18 @@
+import { ThemeValues } from '.';
+export type ThemeSpace = {
+    [key: string]: string;
+    [key: number]: string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl': string;
+    lg: string;
+    md: string;
+    sm: string;
+    xl: string;
+    xs: string;
+    xxl: string;
+    xxs: string;
+};
+export declare const getSpace: (theme: ThemeValues) => ThemeSpace;

package/dist/types/theme/transitions.d.ts

@@ -0,0 +1,13 @@
+import { CSSObject } from '@xstyled/styled-components';
+export type ThemeTimingFunction = {
+    primary: CSSObject['transition-timing-function'];
+    secondary: CSSObject['transition-timing-function'];
+    tertiary: CSSObject['transition-timing-function'];
+};
+export declare const timingFunction: ThemeTimingFunction;
+export type ThemeTransitions = {
+    fast: CSSObject['transition'];
+    medium: CSSObject['transition'];
+    slow: CSSObject['transition'];
+};
+export declare const transitions: ThemeTransitions;

package/dist/types/theme/typography.d.ts

@@ -0,0 +1,133 @@
+import { CSSObject } from '@xstyled/styled-components';
+import { Options, ThemeValues } from '.';
+export type ThemeFontSizes = {
+    [key: number]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    lg: string;
+    md: string;
+    sm: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+    xs: string;
+};
+export declare const getFontSizes: (unit: string, theme: ThemeValues) => ThemeFontSizes;
+export type ThemeLineHeights = {
+    [key: number]: number | string;
+    h0: number | string;
+    h1: number | string;
+    h2: number | string;
+    h3: number | string;
+    h4: number | string;
+    h5: number | string;
+    h6: number | string;
+    html: number | string;
+    lg: number | string;
+    md: number | string;
+    sm: number | string;
+    'subtitle-md': number | string;
+    'subtitle-sm': number | string;
+    xs: number | string;
+};
+export declare const getLineHeights: ({ defaultLineHeight, toRem, }: {
+    defaultLineHeight: number;
+    toRem: (value: number) => string;
+}) => ThemeLineHeights;
+export type ThemeFontWeights = {
+    [key: string]: number;
+    bold: number;
+    medium: number;
+    regular: number;
+};
+export declare const fontWeights: ThemeFontWeights;
+export type ThemeLetterSpacings = {
+    [key: string]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    html: string;
+    lg: string;
+    md: string;
+    sm: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+    xs: string;
+};
+export declare const getLetterSpacings: ({ defaultLetterSpacing, toRem, }: {
+    defaultLetterSpacing: string;
+    toRem: (value: number) => string;
+}) => ThemeLetterSpacings;
+export type ThemeTextsFontWeights = {
+    [key: string]: number;
+    h0: number;
+    h1: number;
+    h2: number;
+    h3: number;
+    h4: number;
+    h5: number;
+    h6: number;
+    lg: number;
+    md: number;
+    sm: number;
+    'subtitle-md': number;
+    'subtitle-sm': number;
+    xs: number;
+};
+export declare const getTextsFontWeights: (theme: ThemeValues) => ThemeTextsFontWeights;
+export type ThemeTextsFontFamily = {
+    [key: string]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+};
+export declare const getTextsFontFamily: (theme: ThemeValues) => ThemeTextsFontFamily;
+export type ThemeTextsTextTransform = {
+    [key: string]: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+};
+export declare const getTextsTextTransform: () => ThemeTextsTextTransform;
+export type ThemeTextsFontColors = {
+    [key: number]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+};
+export declare const getTextFontColors: (theme: ThemeValues) => ThemeTextsFontColors;
+export type ThemeTexts = {
+    [key: string]: Partial<{
+        color: CSSObject['color'];
+        fontFamily: CSSObject['fontFamily'];
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        letterSpacing: CSSObject['letterSpacing'];
+        lineHeight: CSSObject['lineHeight'];
+        textTransform: CSSObject['textTransform'];
+    }>;
+};
+export declare const getTexts: (theme: ThemeValues) => ThemeTexts;
+export type ThemeFonts = {
+    headings: string;
+    icons: string;
+    texts: string;
+};
+export declare const getFonts: (defaultFontFamily: Options["defaultFontFamily"], headingFontFamily: Options["headingFontFamily"], iconFontFamily: Options["iconFontFamily"]) => ThemeFonts;

package/dist/types/theme/underline.d.ts

@@ -0,0 +1,9 @@
+import { css } from '@xstyled/styled-components';
+import { ThemeColors } from './colors';
+export type ThemeUnderline = {
+    default: ReturnType<typeof css>;
+    hover: ReturnType<typeof css>;
+};
+export declare const getUnderline: ({ colors }: {
+    colors: ThemeColors;
+}) => ThemeUnderline;