kitchn
Version:
Tonight Pass delicious React styled-components UI kit
162 lines (148 loc) • 3.55 kB
TypeScript
import { DefaultTheme } from 'styled-components';
import React__default from 'react';
type Themes = Record<string, DefaultTheme>;
type Theme = {
name: string;
colors: Colors;
};
type MainTheme = {
breakpoint: Breakpoint;
family: {
primary: string;
monospace: string;
};
gap: Gap;
size: Size;
weight: Weight;
radius: Radius;
};
type Colors = {
layout: LayoutColors;
text: TextColors;
accent: AccentColors;
};
/**
* Layout colors are used for backgrounds, borders, etc.
*/
type LayoutColors = {
darkest: string;
darker: string;
dark: string;
light: string;
lighter: string;
lightest: string;
};
/**
* Text colors are used for text and icons.
*/
type TextColors = {
lightest: string;
lighter: string;
light: string;
dark: string;
darker: string;
darkest: string;
};
/**
* AccentColors are static colors that are used to highlight
*/
type AccentColors = {
primary: string;
secondary: string;
success: string;
warning: string;
danger: string;
info: string;
light: string;
dark: string;
};
/**
* Weight is used for font weights.
*/
type Weight = {
thin: number;
extraLight: number;
light: number;
regular: number;
medium: number;
semiBold: number;
bold: number;
extraBold: number;
black: number;
};
/**
* Size is used for font sizes.
*/
type Size = {
extraTitle: string;
title: string;
large: string;
medium: string;
normal: string;
compact: string;
small: string;
tiny: string;
};
/**
* Breakpoint is used for media queries.
*/
type Breakpoint = {
/**
* Desktops and laptops
*/
desktop: string;
/**
* iPads (landscape)
*/
laptop: string;
/**
* iPads (portrait)
*/
tablet: string;
/**
* Smartphones (landscape)
*/
mobile: string;
};
/**
* Gap is used for spacing.
*/
type Gap = {
extraLarge: string;
large: string;
medium: string;
normal: string;
small: string;
tiny: string;
};
/**
* Radius is used for border radius.
*/
type Radius = {
square: string;
round: string;
};
declare const darkTheme: Theme;
declare const lightTheme: Theme;
declare const tonightpassTheme: Theme;
/**
* Capitalize the first letter of a string.
*/
declare const capitalize: (s: string) => string;
/**
* Converts RGB string to RGBA string
*/
declare const convertRGBToRGBA: (rgb: string, alpha: number) => string;
declare const getId: () => string;
/**
* isNumber is a utility function that checks if a value is a number.
*/
declare const isNumber: (value: any) => boolean;
/**
* isString is a utility function that checks if a value is a string.
*/
declare const isString: (x: any) => boolean;
declare const isDevelopment: () => boolean;
declare const pickChild: (children: React__default.ReactNode | undefined, targetChild: React__default.ElementType) => [React__default.ReactNode | undefined, React__default.ReactNode | undefined];
declare const shortenName: (name: string) => string;
export { type AccentColors as A, type Breakpoint as B, type Colors as C, type Gap as G, type LayoutColors as L, type MainTheme as M, type Radius as R, type Size as S, type Theme as T, type Weight as W, type Themes as a, type TextColors as b, capitalize as c, darkTheme as d, convertRGBToRGBA as e, isString as f, getId as g, isDevelopment as h, isNumber as i, lightTheme as l, pickChild as p, shortenName as s, tonightpassTheme as t };