braid-design-system
Version:
Themeable design system for the SEEK Group
1,520 lines (1,509 loc) • 211 kB
text/typescript
import * as react from 'react';
import react__default, { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, RefObject, KeyboardEvent, MouseEvent, FormEvent, RefCallback } from 'react';
import { FontMetrics } from '@capsizecss/core';
import * as clsx from 'clsx';
import { ClassValue } from 'clsx';
import { Optional } from 'utility-types';
import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
import { ConditionalValue, RequiredConditionalValue } from '@vanilla-extract/sprinkles';
import { StyleRule } from '@vanilla-extract/css';
declare const breakpointNames: readonly ["mobile", "tablet", "desktop", "wide"];
declare const breakpoints: {
readonly mobile: 0;
readonly tablet: 740;
readonly desktop: 992;
readonly wide: 1200;
};
type Breakpoint = keyof typeof breakpoints;
type FontMetricsForTheme = Pick<FontMetrics, 'capHeight' | 'ascent' | 'descent' | 'lineGap' | 'unitsPerEm'>;
type TextBreakpoint = Exclude<Breakpoint, 'desktop' | 'wide'>;
type FontSizeText = {
fontSize: number;
rows: number;
} | {
fontSize: number;
lineGap: number;
};
type TextDefinition = Record<TextBreakpoint, FontSizeText>;
type FontWeight = 'regular' | 'medium' | 'strong';
interface BraidTokens {
name: string;
displayName: string;
/**
* The boundary for making updated design decisions without disturbing
* existing consumers. Updated decisions can be assessed as part of
* migrating between themes.
*
* This token will be removed when the `apac` theme is retired.
*/
legacy: boolean;
typography: {
fontFamily: string;
webFont: string | null;
fontMetrics: FontMetricsForTheme;
fontWeight: Record<FontWeight, 400 | 500 | 600 | 700 | 800>;
heading: {
weight: {
weak: FontWeight;
regular: FontWeight;
};
level: {
'1': TextDefinition;
'2': TextDefinition;
'3': TextDefinition;
'4': TextDefinition;
};
};
text: {
xsmall: TextDefinition;
small: TextDefinition;
standard: TextDefinition;
large: TextDefinition;
};
};
contentWidth: {
xsmall: number;
small: number;
medium: number;
large: number;
};
grid: number;
touchableSize: number;
space: {
gutter: number;
xxsmall: number;
xsmall: number;
small: number;
medium: number;
large: number;
xlarge: number;
xxlarge: number;
xxxlarge: number;
};
transforms: {
touchable: string;
};
transitions: {
fast: string;
touchable: string;
};
border: {
radius: {
small: string;
standard: string;
large: string;
xlarge: string;
};
width: {
standard: number;
large: number;
};
color: {
brandAccent: string;
brandAccentLight: string;
caution: string;
cautionLight: string;
critical: string;
criticalLight: string;
field: string;
focus: string;
formAccent: string;
formAccentLight: string;
info: string;
infoLight: string;
neutral: string;
neutralInverted: string;
neutralLight: string;
positive: string;
positiveLight: string;
promote: string;
promoteLight: string;
};
};
focusRingSize: number;
shadows: {
small: string;
medium: string;
large: string;
};
color: {
foreground: {
brandAccentLight: string;
brandAccent: string;
cautionLight: string;
caution: string;
criticalLight: string;
critical: string;
formAccentLight: string;
formAccent: string;
infoLight: string;
info: string;
linkLight: string;
link: string;
linkHover: string;
linkVisited: string;
linkLightVisited: string;
neutral: string;
neutralInverted: string;
positiveLight: string;
positive: string;
promoteLight: string;
promote: string;
/** @deprecated Recommend using `brandAccent` or `neutral` instead. */
rating: string;
secondary: string;
secondaryInverted: string;
};
background: {
body: string;
bodyDark: string;
brand: string;
brandAccent: string;
brandAccentActive: string;
brandAccentHover: string;
brandAccentSoft: string;
brandAccentSoftActive: string;
brandAccentSoftHover: string;
caution: string;
cautionLight: string;
critical: string;
criticalActive: string;
criticalHover: string;
criticalLight: string;
criticalSoft: string;
criticalSoftActive: string;
criticalSoftHover: string;
formAccent: string;
formAccentActive: string;
formAccentHover: string;
formAccentSoft: string;
formAccentSoftActive: string;
formAccentSoftHover: string;
info: string;
infoLight: string;
neutral: string;
neutralActive: string;
neutralHover: string;
neutralLight: string;
neutralSoft: string;
neutralSoftActive: string;
neutralSoftHover: string;
positive: string;
positiveLight: string;
promote: string;
promoteLight: string;
surface: string;
surfaceDark: string;
};
};
}
declare const makeBraidTheme: (tokens: BraidTokens) => {
vanillaTheme: string;
name: string;
displayName: string;
legacy: boolean;
background: {
lightMode: string;
darkMode: string;
};
webFonts: {
linkTag: string;
href: string;
}[];
space: {
grid: number;
space: {
gutter: number;
xxsmall: number;
xsmall: number;
small: number;
medium: number;
large: number;
xlarge: number;
xxlarge: number;
xxxlarge: number;
};
};
color: {
foreground: {
brandAccentLight: string;
brandAccent: string;
cautionLight: string;
caution: string;
criticalLight: string;
critical: string;
formAccentLight: string;
formAccent: string;
infoLight: string;
info: string;
linkLight: string;
link: string;
linkHover: string;
linkVisited: string;
linkLightVisited: string;
neutral: string;
neutralInverted: string;
positiveLight: string;
positive: string;
promoteLight: string;
promote: string;
rating: string;
secondary: string;
secondaryInverted: string;
};
background: {
body: string;
bodyDark: string;
brand: string;
brandAccent: string;
brandAccentActive: string;
brandAccentHover: string;
brandAccentSoft: string;
brandAccentSoftActive: string;
brandAccentSoftHover: string;
caution: string;
cautionLight: string;
critical: string;
criticalActive: string;
criticalHover: string;
criticalLight: string;
criticalSoft: string;
criticalSoftActive: string;
criticalSoftHover: string;
formAccent: string;
formAccentActive: string;
formAccentHover: string;
formAccentSoft: string;
formAccentSoftActive: string;
formAccentSoftHover: string;
info: string;
infoLight: string;
neutral: string;
neutralActive: string;
neutralHover: string;
neutralLight: string;
neutralSoft: string;
neutralSoftActive: string;
neutralSoftHover: string;
positive: string;
positiveLight: string;
promote: string;
promoteLight: string;
surface: string;
surfaceDark: string;
};
};
backgroundLightness: Record<"brandAccent" | "caution" | "cautionLight" | "critical" | "criticalLight" | "formAccent" | "info" | "infoLight" | "neutral" | "neutralLight" | "positive" | "positiveLight" | "promote" | "promoteLight" | "body" | "bodyDark" | "brand" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "criticalActive" | "criticalHover" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "neutralActive" | "neutralHover" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "surface" | "surfaceDark", "light" | "dark">;
};
type BraidTheme = ReturnType<typeof makeBraidTheme>;
interface LinkComponentProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
href: string;
}
declare const makeLinkComponent: (render: ForwardRefRenderFunction<HTMLAnchorElement, LinkComponentProps>) => {
readonly __forwardRef__: react.ForwardRefExoticComponent<LinkComponentProps & react.RefAttributes<HTMLAnchorElement>>;
};
type LinkComponent$1 = ReturnType<typeof makeLinkComponent> | ComponentType<LinkComponentProps>;
interface BraidProviderProps {
theme: BraidTheme;
styleBody?: boolean;
linkComponent?: LinkComponent$1;
children: ReactNode;
}
declare const BraidProvider: ({ theme, styleBody, linkComponent, children, }: BraidProviderProps) => react.JSX.Element;
interface BraidPortalProps {
children: ReactNode;
container?: Element;
}
declare const BraidPortal: ({ children, container }: BraidPortalProps) => react.ReactPortal;
interface ThemeNameConsumerProps {
children(name: string): ReactElement;
}
declare const ThemeNameConsumer: ({ children }: ThemeNameConsumerProps) => ReactElement<unknown, string | react.JSXElementConstructor<any>>;
declare const useThemeName: () => string;
declare const useSpace: () => {
grid: number;
space: {
gutter: number;
xxsmall: number;
xsmall: number;
small: number;
medium: number;
large: number;
xlarge: number;
xxlarge: number;
xxxlarge: number;
};
};
declare const useColor: () => {
foreground: {
brandAccentLight: string;
brandAccent: string;
cautionLight: string;
caution: string;
criticalLight: string;
critical: string;
formAccentLight: string;
formAccent: string;
infoLight: string;
info: string;
linkLight: string;
link: string;
linkHover: string;
linkVisited: string;
linkLightVisited: string;
neutral: string;
neutralInverted: string;
positiveLight: string;
positive: string;
promoteLight: string;
promote: string;
rating: string;
secondary: string;
secondaryInverted: string;
};
background: {
body: string;
brand: string;
brandAccent: string;
brandAccentActive: string;
brandAccentHover: string;
brandAccentSoft: string;
brandAccentSoftActive: string;
brandAccentSoftHover: string;
caution: string;
cautionLight: string;
critical: string;
criticalActive: string;
criticalHover: string;
criticalLight: string;
criticalSoft: string;
criticalSoftActive: string;
criticalSoftHover: string;
formAccent: string;
formAccentActive: string;
formAccentHover: string;
formAccentSoft: string;
formAccentSoftActive: string;
formAccentSoftHover: string;
info: string;
infoLight: string;
neutral: string;
neutralActive: string;
neutralHover: string;
neutralLight: string;
neutralSoft: string;
neutralSoftActive: string;
neutralSoftHover: string;
positive: string;
positiveLight: string;
promote: string;
promoteLight: string;
surface: string;
};
};
declare const colorAtomicProperties: {
conditions: {
defaultCondition: "lightMode";
conditionNames: ("lightMode" | "darkMode")[];
};
styles: {
readonly background: {
values: {
brandAccent: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
caution: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
cautionLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
critical: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
criticalLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
formAccent: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
info: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
infoLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
neutral: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
neutralLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
positive: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
positiveLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
promote: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
promoteLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
body: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
bodyDark: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
brand: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
brandAccentActive: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
brandAccentHover: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
brandAccentSoft: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
brandAccentSoftActive: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
brandAccentSoftHover: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
criticalActive: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
criticalHover: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
criticalSoft: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
criticalSoftActive: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
criticalSoftHover: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
formAccentActive: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
formAccentHover: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
formAccentSoft: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
formAccentSoftActive: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
formAccentSoftHover: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
neutralActive: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
neutralHover: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
neutralSoft: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
neutralSoftActive: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
neutralSoftHover: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
surface: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
surfaceDark: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
};
};
readonly boxShadow: {
values: {
small: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
medium: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
large: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderBrandAccent: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderBrandAccentLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderBrandAccentLarge: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderBrandAccentLightLarge: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderCaution: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderCautionLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderCritical: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderCriticalLarge: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderCriticalLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderCriticalLightLarge: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderField: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderFormAccent: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderFormAccentLarge: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderFormAccentLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderFormAccentLightLarge: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderInfo: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderInfoLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderNeutral: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderNeutralLarge: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderNeutralInverted: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderNeutralInvertedLarge: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderNeutralLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderPositive: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderPositiveLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderPromote: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
borderPromoteLight: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
outlineFocus: {
defaultClass: string;
conditions: {
lightMode: string;
darkMode: string;
};
};
};
};
};
};
declare const responsiveAtomicProperties: {
conditions: {
defaultCondition: "mobile";
conditionNames: ("mobile" | "tablet" | "desktop" | "wide")[];
responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
length: 4;
};
};
styles: {
readonly display: {
responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
length: 4;
};
values: {
none: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
flex: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
block: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
inline: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
inlineBlock: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
};
};
readonly position: {
responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
length: 4;
};
values: {
sticky: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
relative: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
absolute: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
fixed: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
};
};
readonly borderRadius: {
responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
length: 4;
};
values: {
small: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
large: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xlarge: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
standard: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
none: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
full: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
};
};
readonly gap: {
responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
length: 4;
};
values: {
gutter: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xxsmall: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xsmall: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
small: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
medium: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
large: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xlarge: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xxlarge: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xxxlarge: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
none: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
};
};
readonly paddingTop: {
responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
length: 4;
};
values: {
gutter: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xxsmall: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xsmall: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
small: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
medium: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
large: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xlarge: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xxlarge: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xxxlarge: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
none: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
};
};
readonly paddingBottom: {
responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
length: 4;
};
values: {
gutter: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xxsmall: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xsmall: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
small: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
medium: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
large: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xlarge: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xxlarge: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xxxlarge: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
none: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
};
};
readonly paddingRight: {
responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
length: 4;
};
values: {
gutter: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xxsmall: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xsmall: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
small: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
medium: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
large: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xlarge: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xxlarge: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xxxlarge: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
none: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
};
};
readonly paddingLeft: {
responsiveArray: ("mobile" | "tablet" | "desktop" | "wide")[] & {
length: 4;
};
values: {
gutter: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xxsmall: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
xsmall: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
small: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
medium: {
defaultClass: string;
conditions: {
mobile: string;
tablet: string;
desktop: string;
wide: string;
};
};
large: {
defaultClass: string;
conditions: {
mobile: string;