mirror of
https://github.com/FlipsideCrypto/DefinitelyTyped.git
synced 2026-02-06 10:56:53 +00:00
🤖 Merge PR #45042 fix(theme-ui): add variants to the Theme interface by @wKovacs64
* fix(theme-ui): add variants to the Theme interface * style(theme-ui): apply same TSDoc comment to all variants * style(theme-ui): remove @param from useColorMode JSDoc comment * style(theme-ui): update doc comments and leverage Record type * style(theme-ui): simplify Omit of multiple properties
This commit is contained in:
Justin Hall
GitHub
parent
145be27145
commit
dff60ccd7d
138
types/theme-ui/index.d.ts
vendored
138
types/theme-ui/index.d.ts
vendored
@ -75,7 +75,7 @@ export type ColorMode = {
|
||||
accent?: CSS.ColorProperty;
|
||||
};
|
||||
|
||||
export interface Theme extends Omit<StyledSystemTheme, 'colors'> {
|
||||
export interface Theme extends Omit<StyledSystemTheme, 'colors' | 'buttons'> {
|
||||
/**
|
||||
* Enable/disable custom CSS properties/variables if lower browser
|
||||
* support is required (for eg. IE 11).
|
||||
@ -112,6 +112,140 @@ export interface Theme extends Omit<StyledSystemTheme, 'colors'> {
|
||||
styles?: {
|
||||
[P in StyledTags]?: SystemStyleObject;
|
||||
};
|
||||
|
||||
/**
|
||||
* You can define additional CSS grid layouts by adding variants to the
|
||||
* `theme.grids` object. These styles can be used to create a wide variety of
|
||||
* different reusable layouts.
|
||||
*
|
||||
* @see https://theme-ui.com/theme-spec#variants
|
||||
* @see https://theme-ui.com/components/variants
|
||||
* @see https://theme-ui.com/components/grid#variants
|
||||
*/
|
||||
grids?: Record<string, SystemStyleObject>;
|
||||
|
||||
/**
|
||||
* Button variants can be defined in the `theme.buttons` object. The `Button`
|
||||
* component uses `theme.buttons.primary` as its default variant style.
|
||||
*
|
||||
* @see https://theme-ui.com/theme-spec#variants
|
||||
* @see https://theme-ui.com/components/variants
|
||||
* @see https://theme-ui.com/components/button#variants
|
||||
*/
|
||||
buttons?: Record<string, SystemStyleObject>;
|
||||
|
||||
/**
|
||||
* Text style variants can be defined in the `theme.text` object. The `Text`
|
||||
* component uses `theme.text.default` as its default variant style.
|
||||
*
|
||||
* @see https://theme-ui.com/theme-spec#variants
|
||||
* @see https://theme-ui.com/components/variants
|
||||
* @see https://theme-ui.com/components/text#variants
|
||||
*/
|
||||
text?: Record<string, SystemStyleObject>;
|
||||
|
||||
/**
|
||||
* Link variants can be defined in the `theme.links` object. By default the
|
||||
* `Link` component will use styles defined in `theme.styles.a`.
|
||||
*
|
||||
* @see https://theme-ui.com/theme-spec#variants
|
||||
* @see https://theme-ui.com/components/variants
|
||||
* @see https://theme-ui.com/components/link#variants
|
||||
*/
|
||||
links?: Record<string, SystemStyleObject>;
|
||||
|
||||
/**
|
||||
* Image style variants can be defined in the `theme.images` object.
|
||||
*
|
||||
* @see https://theme-ui.com/theme-spec#variants
|
||||
* @see https://theme-ui.com/components/variants
|
||||
* @see https://theme-ui.com/components/image#variants
|
||||
*/
|
||||
images?: Record<string, SystemStyleObject>;
|
||||
|
||||
/**
|
||||
* Card style variants can be defined in `the theme.cards` object. By default
|
||||
* the `Card` component uses the `theme.cards.primary` variant.
|
||||
*
|
||||
* @see https://theme-ui.com/theme-spec#variants
|
||||
* @see https://theme-ui.com/components/variants
|
||||
* @see https://theme-ui.com/components/card#variants
|
||||
*/
|
||||
cards?: Record<string, SystemStyleObject>;
|
||||
|
||||
/**
|
||||
* Container variants can be defined in the `theme.layout` object. The
|
||||
* `Container` component uses `theme.layout.container` as its default variant
|
||||
* style.
|
||||
*
|
||||
* @see https://theme-ui.com/theme-spec#variants
|
||||
* @see https://theme-ui.com/components/variants
|
||||
* @see https://theme-ui.com/components/container#variants
|
||||
*/
|
||||
layout?: Record<string, SystemStyleObject>;
|
||||
|
||||
/**
|
||||
* Label variants can be defined in `theme.forms` and the component uses the
|
||||
* `theme.forms.label` variant by default.
|
||||
*
|
||||
* Input variants can be defined in `theme.forms` and the component uses the
|
||||
* `theme.forms.input` variant by default.
|
||||
*
|
||||
* Select variants can be defined in `theme.forms` and the component uses the
|
||||
* `theme.forms.select` variant by default.
|
||||
*
|
||||
* Textarea variants can be defined in `theme.forms` and the component uses
|
||||
* the `theme.forms.textarea` variant by default.
|
||||
*
|
||||
* Radio variants can be defined in `theme.forms` and the component uses the
|
||||
* `theme.forms.radio` variant by default.
|
||||
*
|
||||
* Checkbox variants can be defined in `theme.forms` and the component uses
|
||||
* the `theme.forms.checkbox` variant by default.
|
||||
*
|
||||
* Slider variants can be defined in the `theme.forms` object. The `Slider`
|
||||
* component uses `theme.forms.slider` as its default variant style.
|
||||
*
|
||||
* @see https://theme-ui.com/theme-spec#variants
|
||||
* @see https://theme-ui.com/components/variants
|
||||
* @see https://theme-ui.com/components/label#variants
|
||||
* @see https://theme-ui.com/components/input#variants
|
||||
* @see https://theme-ui.com/components/select#variants
|
||||
* @see https://theme-ui.com/components/textarea#variants
|
||||
* @see https://theme-ui.com/components/radio#variants
|
||||
* @see https://theme-ui.com/components/checkbox#variants
|
||||
* @see https://theme-ui.com/components/slider#variants
|
||||
*/
|
||||
forms?: Record<string, SystemStyleObject>;
|
||||
|
||||
/**
|
||||
* Badge variants can be defined in `theme.badges`. The `Badge` component uses
|
||||
* `theme.badges.primary` as its default variant.
|
||||
*
|
||||
* @see https://theme-ui.com/theme-spec#variants
|
||||
* @see https://theme-ui.com/components/variants
|
||||
* @see https://theme-ui.com/components/badge#variants
|
||||
*/
|
||||
badges?: Record<string, SystemStyleObject>;
|
||||
|
||||
/**
|
||||
* Alert variants can be defined in `theme.alerts`. The `Alert` component uses
|
||||
* `theme.alerts.primary` as its default variant.
|
||||
*
|
||||
* @see https://theme-ui.com/theme-spec#variants
|
||||
* @see https://theme-ui.com/components/variants
|
||||
* @see https://theme-ui.com/components/alert#variants
|
||||
*/
|
||||
alerts?: Record<string, SystemStyleObject>;
|
||||
|
||||
/**
|
||||
* Message variants can be defined in the `theme.messages` object.
|
||||
*
|
||||
* @see https://theme-ui.com/theme-spec#variants
|
||||
* @see https://theme-ui.com/components/variants
|
||||
* @see https://theme-ui.com/components/message#variants
|
||||
*/
|
||||
messages?: Record<string, SystemStyleObject>;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -210,8 +344,6 @@ export function useThemeUI(): ThemeUIContext;
|
||||
/**
|
||||
* A hook retrieving the current color mode and a setter for a new color mode
|
||||
* in the theme.
|
||||
*
|
||||
* @param initialMode - the default color mode to use
|
||||
*/
|
||||
export function useColorMode<Modes extends string>(
|
||||
initialMode?: Modes,
|
||||
|
||||
@ -118,6 +118,38 @@ const themeWithStyles: Theme = {
|
||||
},
|
||||
};
|
||||
|
||||
const themeWithValidVariants: Theme = {
|
||||
colors: {
|
||||
text: '#000',
|
||||
background: '#fff',
|
||||
primary: '#07c',
|
||||
},
|
||||
grids: { main: { color: 'primary' } },
|
||||
buttons: { primary: { color: 'primary' } },
|
||||
text: { heading: { color: 'primary' } },
|
||||
links: { nav: { color: 'primary' } },
|
||||
images: { avatar: { color: 'primary' } },
|
||||
cards: { primary: { color: 'primary' } },
|
||||
layout: { container: { color: 'primary' } },
|
||||
forms: { label: { color: 'primary' } },
|
||||
badges: { primary: { color: 'primary' } },
|
||||
alerts: { primary: { color: 'primary' } },
|
||||
messages: { primary: { color: 'primary' } },
|
||||
};
|
||||
|
||||
// prettier-ignore
|
||||
const themeWithInvalidVariants: Theme = { layouts: { // $ExpectError
|
||||
container: {
|
||||
color: 'primary',
|
||||
},
|
||||
},
|
||||
colors: {
|
||||
text: '#000',
|
||||
background: '#fff',
|
||||
primary: '#07c',
|
||||
},
|
||||
};
|
||||
|
||||
function SpreadingAndMergingInSxProp() {
|
||||
const buttonStyles: SxStyleProp = {
|
||||
font: 'inherit',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user