flip/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/FlipsideCrypto/DefinitelyTyped.git synced 2026-02-06 10:56:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

🤖 Merge PR #45967 (@types/theme-ui): add highlight color by @hasparus

Browse Source 
* (@types/theme-ui): add highlight color

* (@types/theme-ui): test colors
This commit is contained in:
Piotr Monwid-Olechnowicz 2020-07-09 17:22:30 +02:00 committed by GitHub
parent 444d0c1530
commit ef5026e98d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
types/theme-ui/index.d.ts vendored
View File

@ -63,16 +63,21 @@ export type ColorMode = {
*/
secondary?: CSS.ColorProperty;
/**
* A contrast color for emphasizing UI
*/
accent?: CSS.ColorProperty;
/**
* A background color for highlighting text
*/
highlight?: CSS.ColorProperty;
/**
* A faint color for backgrounds, borders, and accents that do not require
* high contrast with the background color
*/
muted?: CSS.ColorProperty;
/**
* A contrast color for emphasizing UI
*/
accent?: CSS.ColorProperty;
};
export interface Theme extends Omit<StyledSystemTheme, 'colors' | 'buttons'> {

24
types/theme-ui/theme-ui-tests.tsx
View File

@ -3,6 +3,7 @@ import { Flex, jsx, css, InitializeColorMode, ColorMode, Styled, SxStyleProp, Th
export const Component = () => {
const { theme, colorMode, setColorMode } = useThemeUI();
return (
<>
<InitializeColorMode />
@ -203,3 +204,26 @@ function cssUtility() {
css(styleObject)(theme);
}
{
const colorMode: ColorMode = {} as any;
// test: text and background are required
// $ExpectType string
colorMode.text;
// $ExpectType string
colorMode.background;
// test: arbitrary keys can hold colors or color scales
const seriousPink = colorMode.seriousPink;
if (typeof seriousPink !== 'string' && Array.isArray(seriousPink)) {
const [light, medium, dark]: string[] = seriousPink;
}
// test: interoperable base colors don't contain nested scales
// $ExpectType (string | undefined)[]
const baseColors = [colorMode.primary, colorMode.secondary, colorMode.muted, colorMode.highlight, colorMode.accent];
}