diff --git a/.storybook/preview.js b/.storybook/preview.js index 05242052cd1..f023834cb4a 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -2,6 +2,12 @@ import {addons} from '@storybook/addons' import {withThemeProvider, withSurroundingElements, toolbarTypes} from '../src/utils/story-helpers' import {PrimerBreakpoints} from '../src/utils/layout' +// primitives v8 +import './primitives-v8.css' +// primitives v7 for fallback, commented out by default +// uncomment it for testing +// import './primitives-v7.css' + export const globalTypes = toolbarTypes export const decorators = [withThemeProvider, withSurroundingElements] diff --git a/.storybook/primitives-v7.css b/.storybook/primitives-v7.css new file mode 100644 index 00000000000..dc20bc48e36 --- /dev/null +++ b/.storybook/primitives-v7.css @@ -0,0 +1,2 @@ +@import '@primer/css/dist/primitives.css'; +@import '@primer/css/dist/color-modes.css'; diff --git a/.storybook/primitives-v8.css b/.storybook/primitives-v8.css new file mode 100644 index 00000000000..391db714f65 --- /dev/null +++ b/.storybook/primitives-v8.css @@ -0,0 +1,21 @@ +/* size/typography */ +@import '@primer/primitives/tokens-next-private/css/base/size/size.css'; +@import '@primer/primitives/tokens-next-private/css/base/typography/typography.css'; +@import '@primer/primitives/tokens-next-private/css/functional/size/border.css'; +@import '@primer/primitives/tokens-next-private/css/functional/size/breakpoints.css'; +@import '@primer/primitives/tokens-next-private/css/functional/size/size-coarse.css'; +@import '@primer/primitives/tokens-next-private/css/functional/size/size-fine.css'; +@import '@primer/primitives/tokens-next-private/css/functional/size/size.css'; +@import '@primer/primitives/tokens-next-private/css/functional/size/viewport.css'; +@import '@primer/primitives/tokens-next-private/css/functional/typography/typography.css'; + +/* color */ +@import '@primer/primitives/tokens-next-private/css/functional/themes/light.css'; +@import '@primer/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css'; +@import '@primer/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css'; +@import '@primer/primitives/tokens-next-private/css/functional/themes/light-colorblind.css'; +@import '@primer/primitives/tokens-next-private/css/functional/themes/dark.css'; +@import '@primer/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css'; +@import '@primer/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css'; +@import '@primer/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css'; +@import '@primer/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css'; diff --git a/package-lock.json b/package-lock.json index 873f2dfa91b..9b64a7cdd5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,6 +49,7 @@ "@github/markdownlint-github": "^0.3.0", "@github/prettier-config": "0.0.6", "@playwright/test": "1.32.0", + "@primer/css": "^21.0.1", "@rollup/plugin-babel": "6.0.3", "@rollup/plugin-commonjs": "24.1.0", "@rollup/plugin-node-resolve": "15.0.2", @@ -3437,17 +3438,65 @@ "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==", "dev": true }, + "node_modules/@github/auto-check-element": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/@github/auto-check-element/-/auto-check-element-5.4.0.tgz", + "integrity": "sha512-yCAnw+3H5eyyzWeaPx8uD0P9fzSQ8SjhQ0dmSvFzPStJC6cG9kbIqu8hBlmC+TRONd9eJj+z0oIwbbeAHKpo6w==", + "dev": true, + "dependencies": { + "@github/mini-throttle": "^2.1.0" + } + }, + "node_modules/@github/auto-complete-element": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@github/auto-complete-element/-/auto-complete-element-3.5.0.tgz", + "integrity": "sha512-ZxGm9hlaK01FUlV7lP8PFxLov3HFdLIbM6zMPSTrPp0RPrub6gWXRplAPShh/MAECVYTwXKGPL9oOWhTt53mMg==", + "dev": true, + "dependencies": { + "@github/combobox-nav": "^2.1.7" + } + }, "node_modules/@github/browserslist-config": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@github/browserslist-config/-/browserslist-config-1.0.0.tgz", "integrity": "sha512-gIhjdJp/c2beaIWWIlsXdqXVRUz3r2BxBCpfz/F3JXHvSAQ1paMYjLH+maEATtENg+k5eLV7gA+9yPp762ieuw==", "dev": true }, + "node_modules/@github/catalyst": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@github/catalyst/-/catalyst-1.6.0.tgz", + "integrity": "sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ==", + "dev": true + }, + "node_modules/@github/clipboard-copy-element": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@github/clipboard-copy-element/-/clipboard-copy-element-1.1.2.tgz", + "integrity": "sha512-L6CMrcA5we0udafvoSuRCE/Ci/3xrLWKYRGup2IlhxF771bQYsQ2EB1of182pI8ZWM4oxgwzu37+igMeoZjN/A==", + "dev": true + }, "node_modules/@github/combobox-nav": { "version": "2.1.7", "resolved": "https://registry.npmjs.org/@github/combobox-nav/-/combobox-nav-2.1.7.tgz", "integrity": "sha512-Webx0W5iTpkk5Chy9dB/1BEUORQ0qrwui8HaaVBiy75W2VOJg96WTuKj1rXENAJ3XTMhdEF53bn0LYfvP0EKvg==" }, + "node_modules/@github/details-menu-element": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@github/details-menu-element/-/details-menu-element-1.0.13.tgz", + "integrity": "sha512-gMkii86w/oUP5dq8yOWZn1sgbgtFj3AYETxxtpsqRggZktgd8te4+npAn4Hm+936c/lxmEzXqfjARL/CzGR4+w==", + "dev": true + }, + "node_modules/@github/image-crop-element": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@github/image-crop-element/-/image-crop-element-5.0.0.tgz", + "integrity": "sha512-Vgm2OwWAs1ESoib/t5sjxsAYo6YTOxxAjWDRxswX7qrqoyCejTZ3hshdo4Ep5e+Mz/GVTZC3rdMtg06dk/eT4g==", + "dev": true + }, + "node_modules/@github/include-fragment-element": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@github/include-fragment-element/-/include-fragment-element-6.1.1.tgz", + "integrity": "sha512-JTRVhMJlgcojYjj/bBuWKaYa2EQL3CvmdIkEiOeZUuu1xjutBaSEhpONL1MBAT77zUOy6VwniKjZGQn1IT7dbg==", + "dev": true + }, "node_modules/@github/markdown-toolbar-element": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@github/markdown-toolbar-element/-/markdown-toolbar-element-2.1.1.tgz", @@ -3462,6 +3511,12 @@ "lodash": "^4.17.15" } }, + "node_modules/@github/mini-throttle": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@github/mini-throttle/-/mini-throttle-2.1.0.tgz", + "integrity": "sha512-iEeR2OdVCPkdIPUszL8gJnKNu4MR8ANh7y0u/LPyaatYezgaWxUZEzhFntloqQq+HE6MZkFy+cl+xzCNuljOdw==", + "dev": true + }, "node_modules/@github/paste-markdown": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/@github/paste-markdown/-/paste-markdown-1.4.2.tgz", @@ -3478,6 +3533,12 @@ "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.2.1.tgz", "integrity": "sha512-XwUfSNwcfBjKRHcUmbh87iFUhzAwO5eDQQ+MNpTFNq5JObFTQv0jmmL45vUsYutwuZCBQHLILXkIgSmHVsa4PA==" }, + "node_modules/@github/tab-container-element": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.2.0.tgz", + "integrity": "sha512-to5ZJuywKK3KX53X1ifOcWjvUTQcBGdQ6Qkhm8L97xQ3ovICag1048M3YMpc+QSdr8xWeCBMnLeMnENqotB0Og==", + "dev": true + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -6782,6 +6843,12 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/@oddbird/popover-polyfill": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.1.1.tgz", + "integrity": "sha512-X9gxiwKtN1ZumOoe9KRLpe37nshLtwHm/IJflIxgjanXz/FqKb0DQ7BlWu+iqUn/O0/jWYgkKnTLtsC9JlgwQg==", + "dev": true + }, "node_modules/@pkgr/utils": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz", @@ -6888,6 +6955,19 @@ "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.3.3.tgz", "integrity": "sha512-iHMRuu8YWDJIdqCi1krx0cyFNeqszNKTOb0dXFu2wQ5BeIqxqPJLD7rjZ2Vjf/+YaPSbWuIQE1H6TaGMMsDfdA==" }, + "node_modules/@primer/css": { + "version": "21.0.1", + "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.1.tgz", + "integrity": "sha512-yHBDYnNQk0W7e3h0Eadh/RCbPl4WEvuO5dwj/qLE/kZodBn7JGhU7xMQKDnj37ck27dS311ngXUuLH42s3wXBw==", + "dev": true, + "dependencies": { + "@primer/primitives": "^7.11.7", + "@primer/view-components": "^0.1.0" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + } + }, "node_modules/@primer/octicons-react": { "version": "18.0.0", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-18.0.0.tgz", @@ -6907,6 +6987,26 @@ "markdown-table-ts": "^1.0.3" } }, + "node_modules/@primer/view-components": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.1.7.tgz", + "integrity": "sha512-OwN/3OFEoq2OmyTlZnaHKlV/iDswZUa1ax0dL2uMJntfykesLbhMVZ/q00+HjKQaSTfCWFRrEswagryphkP81Q==", + "dev": true, + "dependencies": { + "@github/auto-check-element": "^5.2.0", + "@github/auto-complete-element": "^3.3.4", + "@github/catalyst": "^1.6.0", + "@github/clipboard-copy-element": "^1.1.2", + "@github/details-menu-element": "^1.0.12", + "@github/image-crop-element": "^5.0.0", + "@github/include-fragment-element": "^6.1.1", + "@github/mini-throttle": "^2.1.0", + "@github/relative-time-element": "^4.0.0", + "@github/tab-container-element": "^3.1.2", + "@oddbird/popover-polyfill": "^0.1.1", + "@primer/behaviors": "^1.2.0" + } + }, "node_modules/@react-aria/ssr": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.5.0.tgz", @@ -60732,17 +60832,65 @@ "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==", "dev": true }, + "@github/auto-check-element": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/@github/auto-check-element/-/auto-check-element-5.4.0.tgz", + "integrity": "sha512-yCAnw+3H5eyyzWeaPx8uD0P9fzSQ8SjhQ0dmSvFzPStJC6cG9kbIqu8hBlmC+TRONd9eJj+z0oIwbbeAHKpo6w==", + "dev": true, + "requires": { + "@github/mini-throttle": "^2.1.0" + } + }, + "@github/auto-complete-element": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@github/auto-complete-element/-/auto-complete-element-3.5.0.tgz", + "integrity": "sha512-ZxGm9hlaK01FUlV7lP8PFxLov3HFdLIbM6zMPSTrPp0RPrub6gWXRplAPShh/MAECVYTwXKGPL9oOWhTt53mMg==", + "dev": true, + "requires": { + "@github/combobox-nav": "^2.1.7" + } + }, "@github/browserslist-config": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@github/browserslist-config/-/browserslist-config-1.0.0.tgz", "integrity": "sha512-gIhjdJp/c2beaIWWIlsXdqXVRUz3r2BxBCpfz/F3JXHvSAQ1paMYjLH+maEATtENg+k5eLV7gA+9yPp762ieuw==", "dev": true }, + "@github/catalyst": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@github/catalyst/-/catalyst-1.6.0.tgz", + "integrity": "sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ==", + "dev": true + }, + "@github/clipboard-copy-element": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@github/clipboard-copy-element/-/clipboard-copy-element-1.1.2.tgz", + "integrity": "sha512-L6CMrcA5we0udafvoSuRCE/Ci/3xrLWKYRGup2IlhxF771bQYsQ2EB1of182pI8ZWM4oxgwzu37+igMeoZjN/A==", + "dev": true + }, "@github/combobox-nav": { "version": "2.1.7", "resolved": "https://registry.npmjs.org/@github/combobox-nav/-/combobox-nav-2.1.7.tgz", "integrity": "sha512-Webx0W5iTpkk5Chy9dB/1BEUORQ0qrwui8HaaVBiy75W2VOJg96WTuKj1rXENAJ3XTMhdEF53bn0LYfvP0EKvg==" }, + "@github/details-menu-element": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@github/details-menu-element/-/details-menu-element-1.0.13.tgz", + "integrity": "sha512-gMkii86w/oUP5dq8yOWZn1sgbgtFj3AYETxxtpsqRggZktgd8te4+npAn4Hm+936c/lxmEzXqfjARL/CzGR4+w==", + "dev": true + }, + "@github/image-crop-element": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@github/image-crop-element/-/image-crop-element-5.0.0.tgz", + "integrity": "sha512-Vgm2OwWAs1ESoib/t5sjxsAYo6YTOxxAjWDRxswX7qrqoyCejTZ3hshdo4Ep5e+Mz/GVTZC3rdMtg06dk/eT4g==", + "dev": true + }, + "@github/include-fragment-element": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@github/include-fragment-element/-/include-fragment-element-6.1.1.tgz", + "integrity": "sha512-JTRVhMJlgcojYjj/bBuWKaYa2EQL3CvmdIkEiOeZUuu1xjutBaSEhpONL1MBAT77zUOy6VwniKjZGQn1IT7dbg==", + "dev": true + }, "@github/markdown-toolbar-element": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@github/markdown-toolbar-element/-/markdown-toolbar-element-2.1.1.tgz", @@ -60757,6 +60905,12 @@ "lodash": "^4.17.15" } }, + "@github/mini-throttle": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@github/mini-throttle/-/mini-throttle-2.1.0.tgz", + "integrity": "sha512-iEeR2OdVCPkdIPUszL8gJnKNu4MR8ANh7y0u/LPyaatYezgaWxUZEzhFntloqQq+HE6MZkFy+cl+xzCNuljOdw==", + "dev": true + }, "@github/paste-markdown": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/@github/paste-markdown/-/paste-markdown-1.4.2.tgz", @@ -60773,6 +60927,12 @@ "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.2.1.tgz", "integrity": "sha512-XwUfSNwcfBjKRHcUmbh87iFUhzAwO5eDQQ+MNpTFNq5JObFTQv0jmmL45vUsYutwuZCBQHLILXkIgSmHVsa4PA==" }, + "@github/tab-container-element": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.2.0.tgz", + "integrity": "sha512-to5ZJuywKK3KX53X1ifOcWjvUTQcBGdQ6Qkhm8L97xQ3ovICag1048M3YMpc+QSdr8xWeCBMnLeMnENqotB0Og==", + "dev": true + }, "@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -63320,6 +63480,12 @@ } } }, + "@oddbird/popover-polyfill": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.1.1.tgz", + "integrity": "sha512-X9gxiwKtN1ZumOoe9KRLpe37nshLtwHm/IJflIxgjanXz/FqKb0DQ7BlWu+iqUn/O0/jWYgkKnTLtsC9JlgwQg==", + "dev": true + }, "@pkgr/utils": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz", @@ -63395,6 +63561,16 @@ "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.3.3.tgz", "integrity": "sha512-iHMRuu8YWDJIdqCi1krx0cyFNeqszNKTOb0dXFu2wQ5BeIqxqPJLD7rjZ2Vjf/+YaPSbWuIQE1H6TaGMMsDfdA==" }, + "@primer/css": { + "version": "21.0.1", + "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.1.tgz", + "integrity": "sha512-yHBDYnNQk0W7e3h0Eadh/RCbPl4WEvuO5dwj/qLE/kZodBn7JGhU7xMQKDnj37ck27dS311ngXUuLH42s3wXBw==", + "dev": true, + "requires": { + "@primer/primitives": "^7.11.7", + "@primer/view-components": "^0.1.0" + } + }, "@primer/octicons-react": { "version": "18.0.0", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-18.0.0.tgz", @@ -63409,6 +63585,26 @@ "markdown-table-ts": "^1.0.3" } }, + "@primer/view-components": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.1.7.tgz", + "integrity": "sha512-OwN/3OFEoq2OmyTlZnaHKlV/iDswZUa1ax0dL2uMJntfykesLbhMVZ/q00+HjKQaSTfCWFRrEswagryphkP81Q==", + "dev": true, + "requires": { + "@github/auto-check-element": "^5.2.0", + "@github/auto-complete-element": "^3.3.4", + "@github/catalyst": "^1.6.0", + "@github/clipboard-copy-element": "^1.1.2", + "@github/details-menu-element": "^1.0.12", + "@github/image-crop-element": "^5.0.0", + "@github/include-fragment-element": "^6.1.1", + "@github/mini-throttle": "^2.1.0", + "@github/relative-time-element": "^4.0.0", + "@github/tab-container-element": "^3.1.2", + "@oddbird/popover-polyfill": "^0.1.1", + "@primer/behaviors": "^1.2.0" + } + }, "@react-aria/ssr": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.5.0.tgz", diff --git a/package.json b/package.json index 985dfdd07bb..1a0637bbe64 100644 --- a/package.json +++ b/package.json @@ -129,6 +129,7 @@ "@github/markdownlint-github": "^0.3.0", "@github/prettier-config": "0.0.6", "@playwright/test": "1.32.0", + "@primer/css": "^21.0.1", "@rollup/plugin-babel": "6.0.3", "@rollup/plugin-commonjs": "24.1.0", "@rollup/plugin-node-resolve": "15.0.2", diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx index 48796eaf93a..c7f1758f332 100644 --- a/src/BaseStyles.tsx +++ b/src/BaseStyles.tsx @@ -1,7 +1,7 @@ import React from 'react' import styled, {createGlobalStyle} from 'styled-components' import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants' -import {useTheme} from './ThemeProvider' +import {useTheme, defaultColorMode, ColorModeWithAuto} from './ThemeProvider' import {ComponentProps} from './utils/types' // load polyfill for :focus-visible @@ -38,10 +38,33 @@ export type BaseStylesProps = ComponentProps function BaseStyles(props: BaseStylesProps) { const {children, color = 'fg.default', fontFamily = 'normal', lineHeight = 'default', ...rest} = props - const {colorScheme} = useTheme() + const {colorScheme, colorMode, dayScheme, nightScheme} = useTheme() + + /** + * We need to map valid primer/react color modes onto valid color modes for primer/primitives + * valid color modes for primer/primitives: auto | light | dark + * valid color modes for primer/primer: auto | day | night | light | dark + */ + type colorModesForPrimitives = 'auto' | 'light' | 'dark' + const primerColorModeToPrimitiveColorMode: {[key in ColorModeWithAuto]: colorModesForPrimitives} = { + auto: 'auto', + light: 'light', + dark: 'dark', + day: 'light', + night: 'dark', + } return ( - + {children} diff --git a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap index 5548fe2693d..16c8e7f01b1 100644 --- a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap +++ b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap @@ -78,6 +78,9 @@ exports[`SelectPanel renders consistently 1`] = `
diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx index 235e309fe1e..eb6df2e7b8a 100644 --- a/src/ThemeProvider.tsx +++ b/src/ThemeProvider.tsx @@ -4,14 +4,14 @@ import {ThemeProvider as SCThemeProvider} from 'styled-components' import defaultTheme from './theme' import deepmerge from 'deepmerge' -const defaultColorMode = 'day' +export const defaultColorMode = 'day' const defaultDayScheme = 'light' const defaultNightScheme = 'dark' // eslint-disable-next-line @typescript-eslint/no-explicit-any export type Theme = {[key: string]: any} type ColorMode = 'day' | 'night' | 'light' | 'dark' -type ColorModeWithAuto = ColorMode | 'auto' +export type ColorModeWithAuto = ColorMode | 'auto' export type ThemeProviderProps = { theme?: Theme diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap index 203b3082ca3..efbeb0b7aa8 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap @@ -232,6 +232,9 @@ exports[`ActionMenu renders consistently 1`] = `
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap index 5a929d12ade..c01e1a5cfaf 100644 --- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap @@ -74,6 +74,9 @@ exports[`AnchoredOverlay renders consistently 1`] = `
@@ -190,6 +193,9 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
diff --git a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap index 29e001cf9b9..1d33d06ccb4 100644 --- a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +++ b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap @@ -74,6 +74,9 @@ exports[`ConfirmationDialog renders consistently 1`] = `
diff --git a/src/drafts/CSSComponent/component.module.css b/src/drafts/CSSComponent/component.module.css index b9bc99e6d49..6fe6836a6d0 100644 --- a/src/drafts/CSSComponent/component.module.css +++ b/src/drafts/CSSComponent/component.module.css @@ -1,6 +1,7 @@ .component { - background-color: tomato; - color: white; + background-color: var(--bgColor-default, var(--color-canvas-default)); + color: var(--fgColor-muted, var(--color-fg-muted)); + border: 1px solid var(--borderColor-default, var(--color-border-default)); width: fit-content; - padding: 0.625rem 0.75rem; + padding: var(--control-xsmall-paddingBlock) var(--control-xsmall-paddingInline-normal); } diff --git a/src/utils/story-helpers.tsx b/src/utils/story-helpers.tsx index 633949393e6..a48dcea9208 100644 --- a/src/utils/story-helpers.tsx +++ b/src/utils/story-helpers.tsx @@ -72,7 +72,12 @@ export const withThemeProvider = (Story: React.FC {Object.keys(theme.colorSchemes).map(scheme => ( - +