diff --git a/.storybook/dark-theme.tsx b/.storybook/dark-theme.tsx new file mode 100644 index 000000000..599fba44f --- /dev/null +++ b/.storybook/dark-theme.tsx @@ -0,0 +1,26 @@ +import '@doist/product-libraries-tokens/css/td-dark.css' + +import * as React from 'react' + +const THEME_CLASS = 'theme_dark' + +function DarkTheme({ children }: { children: React.ReactNode }) { + React.useEffect(function applyDarkTheme() { + const root = document.documentElement + root.classList.add(THEME_CLASS) + return () => root.classList.remove(THEME_CLASS) + }, []) + + return <>{children} +} + +/** + * Renders a story under the product library's dark theme. + */ +export function withDarkTheme(Story: React.ComponentType) { + return ( + + + + ) +} diff --git a/.storybook/preview.ts b/.storybook/preview.ts index a026f414b..62d8ba802 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,3 +1,4 @@ +import '@doist/product-libraries-tokens/css/td-light.css' import '../src/styles/design-tokens.css' import '../stories/components/styles/story.css' diff --git a/README.md b/README.md index 265220781..52d75443f 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,39 @@ If you prefer to include static files grab the [minified build from the dist fol ``` +## Theming + +Reactist bakes a light palette (`@doist/product-libraries-tokens`) into `reactist.css`. To use a dark or accent theme, load one of the theme files Reactist re-exports and toggle its class on the root element: + +```html + +``` + +```js +import '@doist/reactist/styles/tokens/.css' +``` + +Then set the matching class on `:root`. Each theme file sets its own `color-scheme`, so you do not need to declare it yourself ā€” the column below is what you get, not what you set. + +| Theme / file name | color-scheme | class | +| ------------------- | ------------ | ---------------------- | +| `td-light` | `light` | none | +| `td-dark` | `dark` | `theme_dark` | +| `td-blueberry` | `light` | `theme_blueberry` | +| `td-blueberry-dark` | `dark` | `theme_blueberry_dark` | +| `td-gold` | `light` | `theme_gold` | +| `td-gold-dark` | `dark` | `theme_gold_dark` | +| `td-kale` | `light` | `theme_kale` | +| `td-kale-dark` | `dark` | `theme_kale_dark` | +| `td-lavender` | `light` | `theme_lavender` | +| `td-lavender-dark` | `dark` | `theme_lavender_dark` | +| `td-moonstone` | `light` | `theme_moonstone` | +| `td-moonstone-dark` | `dark` | `theme_moonstone_dark` | +| `td-raspberry` | `light` | `theme_raspberry` | +| `td-raspberry-dark` | `dark` | `theme_raspberry_dark` | +| `td-tangerine` | `light` | `theme_tangerine` | +| `td-tangerine-dark` | `dark` | `theme_tangerine_dark` | + # Changelog You can find our changelog [here](./CHANGELOG.md). diff --git a/package-lock.json b/package-lock.json index 9bb6c4447..6b3b4b856 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "@babel/register": "7.29.3", "@doist/eslint-config": "12.0.1", "@doist/prettier-config": "4.0.1", + "@doist/product-libraries-tokens": "1.0.0", "@doist/react-compiler-tracker": "2.3.6", "@doist/tsconfig": "2.0.1", "@rollup/plugin-babel": "6.1.0", @@ -2384,6 +2385,16 @@ "prettier": "^3.0.0" } }, + "node_modules/@doist/product-libraries-tokens": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@doist/product-libraries-tokens/-/product-libraries-tokens-1.0.0.tgz", + "integrity": "sha512-Xx8lOvgkNGQZM5hYHslif9fodElQpB/aFFqnCgE7dgRA0KdGQ5QhBoGk4X9+m0CDVEu851DLz6U+OascBSeXCw==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^22.14.0 || >=24.10.0" + } + }, "node_modules/@doist/react-compiler-tracker": { "version": "2.3.6", "resolved": "https://registry.npmjs.org/@doist/react-compiler-tracker/-/react-compiler-tracker-2.3.6.tgz", diff --git a/package.json b/package.json index b25d5f554..3e1a46f28 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ "@babel/register": "7.29.3", "@doist/eslint-config": "12.0.1", "@doist/prettier-config": "4.0.1", + "@doist/product-libraries-tokens": "1.0.0", "@doist/react-compiler-tracker": "2.3.6", "@doist/tsconfig": "2.0.1", "@rollup/plugin-babel": "6.1.0", diff --git a/scripts/build.sh b/scripts/build.sh index d52ea29af..87d8621c1 100755 --- a/scripts/build.sh +++ b/scripts/build.sh @@ -10,3 +10,5 @@ rimraf dist/assets # We delete duplicate styles in dist/ & lib/ ./scripts/organize-styles.sh +# Copy the product-library theme CSS into styles/tokens/ +./scripts/copy-token-themes.sh diff --git a/scripts/copy-token-themes.sh b/scripts/copy-token-themes.sh new file mode 100755 index 000000000..8f08816e6 --- /dev/null +++ b/scripts/copy-token-themes.sh @@ -0,0 +1,29 @@ +#!/usr/bin/env sh + +# Copy the product library's generated theme CSS into styles/tokens/. As it is a devDependency, +# consumers do not install the token package themselves, Each file is stamped with the token +# package version for record. + +set -e + +SRC="node_modules/@doist/product-libraries-tokens/dist/colors/css" +DEST="styles/tokens" +VERSION=$(node -p "require('@doist/product-libraries-tokens/package.json').version") + +if [ ! -d "$SRC" ]; then + echo "āŒ $SRC not found ā€” is @doist/product-libraries-tokens installed?" >&2 + exit 1 +fi + +mkdir -p "$DEST" +count=0 +for f in "$SRC"/*.css; do + name=$(basename "$f") + { + printf '/* @doist/product-libraries-tokens@%s ā€” generated theme, do not edit. Copied at Reactist build time. */\n' "$VERSION" + cat "$f" + } >"$DEST/$name" + count=$((count + 1)) +done + +printf "\nšŸŽØ Copied %s token theme file(s) into %s (v%s).\n\n" "$count" "$DEST" "$VERSION" diff --git a/src/avatar/avatar.module.css b/src/avatar/avatar.module.css index 90aeb3827..b587a0a32 100644 --- a/src/avatar/avatar.module.css +++ b/src/avatar/avatar.module.css @@ -1,55 +1,55 @@ :root { - --reactist-avatar-initials-color: var(--reactist-actionable-primary-idle-tint); + --reactist-avatar-initials-color: var(--product-library-display-secondary-idle-tint); --reactist-avatar-border-tint: #0000001a; - --reactist-avatar-empty-fill: var(--reactist-framework-fill-crest); - - --reactist-avatar-meta-0-fill: #b8255f; - --reactist-avatar-meta-0-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-1-fill: #dc4c3e; - --reactist-avatar-meta-1-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-2-fill: #f48318; - --reactist-avatar-meta-2-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-3-fill: #fecf05; - --reactist-avatar-meta-3-on-idle-tint: #202020; - --reactist-avatar-meta-4-fill: #aeb83a; - --reactist-avatar-meta-4-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-5-fill: #7ecc48; - --reactist-avatar-meta-5-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-6-fill: #369307; - --reactist-avatar-meta-6-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-7-fill: #52ccb8; - --reactist-avatar-meta-7-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-8-fill: #148fad; - --reactist-avatar-meta-8-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-9-fill: #3ab9e2; - --reactist-avatar-meta-9-on-idle-tint: #202020; - --reactist-avatar-meta-10-fill: #96c3eb; - --reactist-avatar-meta-10-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-11-fill: #2a67e2; - --reactist-avatar-meta-11-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-12-fill: #692ec2; - --reactist-avatar-meta-12-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-13-fill: #ac30cc; - --reactist-avatar-meta-13-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-14-fill: #eb96c8; - --reactist-avatar-meta-14-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-15-fill: #e05095; - --reactist-avatar-meta-15-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-16-fill: #c9766f; - --reactist-avatar-meta-16-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-17-fill: #808080; - --reactist-avatar-meta-17-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-18-fill: #999999; - --reactist-avatar-meta-18-on-idle-tint: var(--reactist-avatar-initials-color); - --reactist-avatar-meta-19-fill: #ccae96; - --reactist-avatar-meta-19-on-idle-tint: var(--reactist-avatar-initials-color); + --reactist-avatar-empty-fill: var(--product-library-display-quaternary-idle-tint); + + --reactist-avatar-meta-0-fill: var(--product-library-meta-berry-fill); + --reactist-avatar-meta-0-on-idle-tint: #fff; + --reactist-avatar-meta-1-fill: var(--product-library-meta-red-fill); + --reactist-avatar-meta-1-on-idle-tint: #fff; + --reactist-avatar-meta-2-fill: var(--product-library-meta-orange-fill); + --reactist-avatar-meta-2-on-idle-tint: #fff; + --reactist-avatar-meta-3-fill: var(--product-library-meta-yellow-fill); + --reactist-avatar-meta-3-on-idle-tint: #1f1f1f; + --reactist-avatar-meta-4-fill: var(--product-library-meta-olive-green-fill); + --reactist-avatar-meta-4-on-idle-tint: #fff; + --reactist-avatar-meta-5-fill: var(--product-library-meta-lime-green-fill); + --reactist-avatar-meta-5-on-idle-tint: #fff; + --reactist-avatar-meta-6-fill: var(--product-library-meta-green-fill); + --reactist-avatar-meta-6-on-idle-tint: #fff; + --reactist-avatar-meta-7-fill: var(--product-library-meta-mint-green-fill); + --reactist-avatar-meta-7-on-idle-tint: #fff; + --reactist-avatar-meta-8-fill: var(--product-library-meta-teal-fill); + --reactist-avatar-meta-8-on-idle-tint: #fff; + --reactist-avatar-meta-9-fill: var(--product-library-meta-sky-blue-fill); + --reactist-avatar-meta-9-on-idle-tint: #1f1f1f; + --reactist-avatar-meta-10-fill: var(--product-library-meta-light-blue-fill); + --reactist-avatar-meta-10-on-idle-tint: #fff; + --reactist-avatar-meta-11-fill: var(--product-library-meta-blue-fill); + --reactist-avatar-meta-11-on-idle-tint: #fff; + --reactist-avatar-meta-12-fill: var(--product-library-meta-grape-fill); + --reactist-avatar-meta-12-on-idle-tint: #fff; + --reactist-avatar-meta-13-fill: var(--product-library-meta-violet-fill); + --reactist-avatar-meta-13-on-idle-tint: #fff; + --reactist-avatar-meta-14-fill: var(--product-library-meta-lavender-fill); + --reactist-avatar-meta-14-on-idle-tint: #fff; + --reactist-avatar-meta-15-fill: var(--product-library-meta-magenta-fill); + --reactist-avatar-meta-15-on-idle-tint: #fff; + --reactist-avatar-meta-16-fill: var(--product-library-meta-salmon-fill); + --reactist-avatar-meta-16-on-idle-tint: #fff; + --reactist-avatar-meta-17-fill: var(--product-library-meta-charcoal-fill); + --reactist-avatar-meta-17-on-idle-tint: #fff; + --reactist-avatar-meta-18-fill: var(--product-library-meta-grey-fill); + --reactist-avatar-meta-18-on-idle-tint: #fff; + --reactist-avatar-meta-19-fill: var(--product-library-meta-taupe-fill); + --reactist-avatar-meta-19-on-idle-tint: #fff; } .avatar { --reactist-avatar-size: 36px; --reactist-avatar-rounded-radius: 5px; --reactist-avatar-outline-width: 1px; - --reactist-avatar-meta-fill: var(--reactist-avatar-meta-0-fill); + --reactist-avatar-meta-fill: var(--product-library-meta-grey-fill); background-color: var(--reactist-avatar-empty-fill); width: var(--reactist-avatar-size); diff --git a/src/badge/badge.mdx b/src/badge/badge.mdx index 7b442654e..cca3062dc 100644 --- a/src/badge/badge.mdx +++ b/src/badge/badge.mdx @@ -57,8 +57,6 @@ The following CSS custom properties are available to customize the badge compone ### Dark mode -Even though Reactist does not yet owns the concept of dark mode, and leaves it for apps to set it -up, here's a demo on how easily you can prepare badges for dark mode by setting CSS custom -properties. +Dark mode colors are applied when the `.theme_dark` class is set on the root element. diff --git a/src/badge/badge.module.css b/src/badge/badge.module.css index 35c56731a..b3193460f 100644 --- a/src/badge/badge.module.css +++ b/src/badge/badge.module.css @@ -1,17 +1,17 @@ :root { --reactist-badge-font-size: 10px; - --reactist-badge-info-tint: #666666; - --reactist-badge-info-fill: #eeeeee; + --reactist-badge-info-tint: var(--product-library-info-neutral-tertiary-on-idle-tint); + --reactist-badge-info-fill: var(--product-library-info-neutral-tertiary-idle-fill); - --reactist-badge-positive-tint: #058527; - --reactist-badge-positive-fill: #e0f0e3; + --reactist-badge-positive-tint: var(--product-library-info-positive-secondary-on-idle-tint); + --reactist-badge-positive-fill: var(--product-library-info-positive-secondary-idle-fill); - --reactist-badge-promote-tint: #8f4700; - --reactist-badge-promote-fill: #faead1; + --reactist-badge-promote-tint: var(--product-library-info-promote-tertiary-on-idle-tint); + --reactist-badge-promote-fill: var(--product-library-info-promote-tertiary-idle-fill); - --reactist-badge-attention-tint: #cf473a; - --reactist-badge-attention-fill: #f9e3e2; + --reactist-badge-attention-tint: var(--product-library-info-attention-secondary-on-idle-tint); + --reactist-badge-attention-fill: var(--product-library-info-attention-secondary-idle-fill); } .badge { diff --git a/src/badge/badge.stories.jsx b/src/badge/badge.stories.jsx index 81363135b..46fdd42b1 100644 --- a/src/badge/badge.stories.jsx +++ b/src/badge/badge.stories.jsx @@ -1,5 +1,6 @@ import * as React from 'react' +import { withDarkTheme } from '../../.storybook/dark-theme' import { Box } from '../box' import { Button } from '../button' import { Column, Columns } from '../columns' @@ -62,25 +63,7 @@ function BadgeExamples() { function DarkModeTemplate() { return ( - + ) @@ -188,6 +171,7 @@ export const InsideOtherElements = { export const DarkMode = { render: DarkModeTemplate.bind({}), + decorators: [withDarkTheme], name: 'Dark mode', parameters: { @@ -195,6 +179,11 @@ export const DarkMode = { source: { type: 'dynamic', }, + // Render as an iframe to scope `theme_dark` to the story + story: { + inline: false, + height: '260px', + }, }, }, } diff --git a/src/banner/banner.mdx b/src/banner/banner.mdx index df71ffb49..8f62a3417 100644 --- a/src/banner/banner.mdx +++ b/src/banner/banner.mdx @@ -79,8 +79,6 @@ The following CSS custom properties are available to customize the banner compon ### Dark mode -Even though Reactist does not yet owns the concept of dark mode, and leaves it for apps to set it -up, here's a demo on how easily you can prepare banners for dark mode by setting CSS custom -properties. +Dark mode colors are applied when the `.theme_dark` class is set on the root element. diff --git a/src/banner/banner.module.css b/src/banner/banner.module.css index 344294ecb..2ed5c2270 100644 --- a/src/banner/banner.module.css +++ b/src/banner/banner.module.css @@ -1,16 +1,16 @@ :root { - --reactist-banner-background-color: #fcfaf8; - --reactist-banner-border-color: #e6e6e6; - --reactist-banner-divider-color: var(--reactist-divider-secondary); + --reactist-banner-background-color: var(--product-library-background-base-secondary); + --reactist-banner-border-color: var(--product-library-border-idle-tint); + --reactist-banner-divider-color: var(--product-library-divider-secondary); --reactist-banner-main-copy-font-size: 14px; --reactist-banner-main-copy-line-height: 21px; --reactist-banner-main-copy-spacing: -0.15px; - --reactist-banner-main-copy-color: #202020; + --reactist-banner-main-copy-color: var(--product-library-display-primary-idle-tint); --reactist-banner-secondary-copy-font-size: 12px; --reactist-banner-secondary-copy-line-height: 20px; - --reactist-banner-secondary-copy-color: #666666; + --reactist-banner-secondary-copy-color: var(--product-library-display-secondary-idle-tint); --reactist-banner-min-width: 0; } diff --git a/src/banner/banner.stories.jsx b/src/banner/banner.stories.jsx index 3883eda69..bb60185a9 100644 --- a/src/banner/banner.stories.jsx +++ b/src/banner/banner.stories.jsx @@ -1,5 +1,6 @@ import * as React from 'react' +import { withDarkTheme } from '../../.storybook/dark-theme' import { Box } from '../box' import { Button } from '../button' import { CheckboxField } from '../checkbox-field' @@ -355,14 +356,7 @@ function DarkModeTemplate() { display="flex" flexDirection="column" padding="xlarge" - style={{ - backgroundColor: '#202020', - '--reactist-banner-background-color': '#282828', - '--reactist-banner-border-color': '#3D3D3D', - '--reactist-banner-divider-color': '#3D3D3D', - '--reactist-banner-main-copy-color': '#FFFFFF', - '--reactist-banner-secondary-copy-color': '#B3B3B3', - }} + background="default" gap="large" > } description="This is a neutral message" /> @@ -539,6 +533,7 @@ export const Content = { export const DarkMode = { render: DarkModeTemplate.bind({}), + decorators: [withDarkTheme], name: 'Dark mode', parameters: { @@ -546,6 +541,11 @@ export const DarkMode = { source: { type: 'dynamic', }, + // Render as an iframe to scope `theme_dark` to the story + story: { + inline: false, + height: '760px', + }, }, chromatic: { diff --git a/src/base-field/base-field.module.css b/src/base-field/base-field.module.css index e50898cf5..8d09b8659 100644 --- a/src/base-field/base-field.module.css +++ b/src/base-field/base-field.module.css @@ -18,7 +18,7 @@ .container.bordered { border-radius: var(--reactist-border-radius-large); - border: 1px solid var(--reactist-inputs-idle); + border: 1px solid var(--product-library-border-idle-tint); padding: var(--reactist-spacing-small); padding-bottom: var(--reactist-spacing-xsmall); overflow: clip; @@ -37,15 +37,15 @@ } .container.bordered:hover { - border-color: var(--reactist-inputs-hover) !important; + border-color: var(--product-library-border-hover-tint) !important; } .container.bordered:focus-within { - border-color: var(--reactist-inputs-focus) !important; + border-color: var(--product-library-border-focus-tint) !important; } .container.bordered.error { - border-color: var(--reactist-inputs-alert) !important; + border-color: var(--product-library-info-attention-primary-idle-tint) !important; } .container.bordered .primaryLabel { diff --git a/src/box/box.module.css b/src/box/box.module.css index 7202e45f6..376e1c784 100644 --- a/src/box/box.module.css +++ b/src/box/box.module.css @@ -339,32 +339,48 @@ pre.box { /* background color */ .bg-default { - background-color: var(--reactist-bg-default); + background-color: var(--product-library-background-base-primary); } .bg-aside { - background-color: var(--reactist-bg-aside); + background-color: var(--product-library-background-base-secondary); } .bg-highlight { - background-color: var(--reactist-bg-highlight); + background-color: var(--product-library-actionable-quaternary-hover-fill); } .bg-selected { - background-color: var(--reactist-bg-selected); + background-color: var(--product-library-selectable-secondary-selected-fill); } /* toasts background-color requires more customization as it features an inverted (dark) background, even in light mode */ .bg-toast { - background-color: var(--reactist-bg-toast); - color: var(--reactist-content-primary); - --reactist-content-primary: var(--reactist-toast-content-primary); - --reactist-content-secondary: var(--reactist-toast-content-secondary); - --reactist-text-link-idle-tint: var(--reactist-content-primary); + background-color: var(--product-library-background-raised-quaternary); + color: var(--product-library-display-primary-idle-tint); + --product-library-display-primary-idle-tint: var( + --product-library-display-primary-on-dark-tint + ); + --product-library-display-secondary-idle-tint: var( + --product-library-display-secondary-on-dark-tint + ); + --reactist-text-link-idle-tint: var(--product-library-display-primary-idle-tint); --reactist-text-link-idle-decoration: var(--reactist-text-link-hover-decoration); - --reactist-actionable-tertiary-idle-tint: var(--reactist-toast-actionable-primary-tint); - --reactist-actionable-tertiary-hover-tint: var(--reactist-toast-actionable-primary-tint); - --reactist-actionable-tertiary-hover-fill: var(--reactist-toast-actionable-hover-fill); - --reactist-actionable-quaternary-idle-tint: var(--reactist-toast-actionable-secondary-tint); - --reactist-actionable-quaternary-hover-tint: var(--reactist-toast-actionable-secondary-tint); - --reactist-actionable-quaternary-hover-fill: var(--reactist-toast-actionable-hover-fill); + --product-library-actionable-tertiary-idle-tint: var( + --product-library-actionable-tertiary-on-dark-idle-tint + ); + --product-library-actionable-tertiary-on-hover-tint: var( + --product-library-actionable-tertiary-on-dark-idle-tint + ); + --product-library-actionable-tertiary-hover-fill: var( + --product-library-actionable-tertiary-on-dark-hover-fill + ); + --product-library-actionable-quaternary-idle-tint: var( + --product-library-actionable-quaternary-on-dark-idle-tint + ); + --product-library-actionable-quaternary-on-hover-tint: var( + --product-library-actionable-quaternary-on-dark-idle-tint + ); + --product-library-actionable-quaternary-hover-fill: var( + --product-library-actionable-tertiary-on-dark-hover-fill + ); } /* border radius */ @@ -377,13 +393,13 @@ pre.box { /* border */ .border-primary { - border: 1px solid var(--reactist-divider-primary); + border: 1px solid var(--product-library-divider-primary); } .border-secondary { - border: 1px solid var(--reactist-divider-secondary); + border: 1px solid var(--product-library-divider-secondary); } .border-tertiary { - border: 1px solid var(--reactist-divider-tertiary); + border: 1px solid var(--product-library-divider-tertiary); } /* text-align */ @@ -454,7 +470,7 @@ pre.box { } .overlayScroll:hover::-webkit-scrollbar-thumb { - background-color: var(--reactist-scrollbar-thumb-idle); + background-color: var(--product-library-display-quaternary-idle-tint); } /* Firefox */ @@ -464,5 +480,5 @@ pre.box { } .overlayScroll:hover { - scrollbar-color: var(--reactist-scrollbar-thumb-idle) transparent; + scrollbar-color: var(--product-library-display-quaternary-idle-tint) transparent; } diff --git a/src/button/button.mdx b/src/button/button.mdx index 1ce233194..f8da6a30e 100644 --- a/src/button/button.mdx +++ b/src/button/button.mdx @@ -74,41 +74,6 @@ Buttons can be set to take the full width of their container by using the `width ## Dark mode -Even though Reactist does not yet owns the concept of dark mode, and leaves it for apps to set it -up, here's a demo on how easily you can set it up by manipulating color variables only. +Dark mode colors are applied when the `.theme_dark` class is set on the root element. - -## Colors - -The following CSS custom properties are available to customize the button-like element appearance. - -``` ---reactist-actionable-primary-idle-tint ---reactist-actionable-primary-idle-fill ---reactist-actionable-primary-hover-tint ---reactist-actionable-primary-hover-fill ---reactist-actionable-primary-disabled-tint ---reactist-actionable-primary-disabled-fill - ---reactist-actionable-secondary-idle-tint ---reactist-actionable-secondary-idle-fill ---reactist-actionable-secondary-hover-tint ---reactist-actionable-secondary-hover-fill ---reactist-actionable-secondary-disabled-tint ---reactist-actionable-secondary-disabled-fill - ---reactist-actionable-tertiary-idle-tint ---reactist-actionable-tertiary-idle-fill ---reactist-actionable-tertiary-hover-tint ---reactist-actionable-tertiary-hover-fill ---reactist-actionable-tertiary-disabled-tint ---reactist-actionable-tertiary-disabled-fill - ---reactist-actionable-destructive-idle-tint ---reactist-actionable-destructive-idle-fill ---reactist-actionable-destructive-hover-tint ---reactist-actionable-destructive-hover-fill ---reactist-actionable-destructive-disabled-tint ---reactist-actionable-destructive-disabled-fill -``` diff --git a/src/button/button.module.css b/src/button/button.module.css index 9cf0c25ed..37f811c88 100644 --- a/src/button/button.module.css +++ b/src/button/button.module.css @@ -13,48 +13,6 @@ --reactist-button-large-font-size: var(--reactist-font-size-body); --reactist-button-large-spacing: var(--reactist-spacing-large); --reactist-button-large-height: 36px; - - /* variant="primary" */ - --reactist-actionable-primary-idle-tint: #ffffff; - --reactist-actionable-primary-idle-fill: #008aa6; - --reactist-actionable-primary-hover-tint: #ffffff; - --reactist-actionable-primary-hover-fill: #007992; - --reactist-actionable-primary-disabled-tint: #ffffff; - --reactist-actionable-primary-disabled-fill: #99d0db; - - /* variant="secondary" */ - --reactist-actionable-secondary-idle-tint: #282f30; - --reactist-actionable-secondary-idle-fill: #f2f6f7; - --reactist-actionable-secondary-hover-tint: #282f30; - --reactist-actionable-secondary-hover-fill: #e3e7e8; - --reactist-actionable-secondary-disabled-tint: #a9acac; - --reactist-actionable-secondary-disabled-fill: #f2f6f7; - - /* variant="tertiary" (only has fill when hovered) */ - --reactist-actionable-tertiary-idle-tint: #006f85; - --reactist-actionable-tertiary-hover-tint: #006f85; - --reactist-actionable-tertiary-hover-fill: #f2f6f7; - --reactist-actionable-tertiary-disabled-tint: #99c5ce; - - /* variant="quaternary" (only has fill when hovered) */ - --reactist-actionable-quaternary-idle-tint: #6c777a; - --reactist-actionable-quaternary-hover-tint: #282f30; - --reactist-actionable-quaternary-hover-fill: #e0e7e8; - --reactist-actionable-quaternary-disabled-tint: #c4c9ca; - - /* variant="primary" tone="destructive" */ - --reactist-actionable-primary-destructive-idle-tint: #ffffff; - --reactist-actionable-primary-destructive-idle-fill: #dc4c3e; - --reactist-actionable-primary-destructive-hover-tint: #ffffff; - --reactist-actionable-primary-destructive-hover-fill: #b03d32; - --reactist-actionable-primary-destructive-disabled-tint: #ffffff; - --reactist-actionable-primary-destructive-disabled-fill: #f1b7b2; - - /* variant="secondary" tone="destructive" (optionally filled only when hovered) */ - --reactist-actionable-secondary-destructive-idle-tint: #dc4c3e; - --reactist-actionable-secondary-destructive-hover-tint: #b03d32; - --reactist-actionable-secondary-destructive-hover-fill: transparent; - --reactist-actionable-secondary-destructive-disabled-tint: #f1b7b2; } /* general styles for all buttons */ @@ -181,58 +139,58 @@ /* variants with normal tone */ .variant-primary { - --reactist-btn-idle-tint: var(--reactist-actionable-primary-idle-tint); - --reactist-btn-idle-fill: var(--reactist-actionable-primary-idle-fill); - --reactist-btn-hover-tint: var(--reactist-actionable-primary-hover-tint); - --reactist-btn-hover-fill: var(--reactist-actionable-primary-hover-fill); - --reactist-btn-disabled-tint: var(--reactist-actionable-primary-disabled-tint); - --reactist-btn-disabled-fill: var(--reactist-actionable-primary-disabled-fill); + --reactist-btn-idle-tint: var(--product-library-actionable-primary-on-idle-tint); + --reactist-btn-idle-fill: var(--product-library-actionable-primary-idle-fill); + --reactist-btn-hover-tint: var(--product-library-actionable-primary-on-hover-tint); + --reactist-btn-hover-fill: var(--product-library-actionable-primary-hover-fill); + --reactist-btn-disabled-tint: var(--product-library-actionable-primary-on-disabled-tint); + --reactist-btn-disabled-fill: var(--product-library-actionable-primary-disabled-fill); } .variant-secondary { - --reactist-btn-idle-tint: var(--reactist-actionable-secondary-idle-tint); - --reactist-btn-idle-fill: var(--reactist-actionable-secondary-idle-fill); - --reactist-btn-hover-tint: var(--reactist-actionable-secondary-hover-tint); - --reactist-btn-hover-fill: var(--reactist-actionable-secondary-hover-fill); - --reactist-btn-disabled-tint: var(--reactist-actionable-secondary-disabled-tint); - --reactist-btn-disabled-fill: var(--reactist-actionable-secondary-disabled-fill); + --reactist-btn-idle-tint: var(--product-library-actionable-secondary-on-idle-tint); + --reactist-btn-idle-fill: var(--product-library-actionable-secondary-idle-fill); + --reactist-btn-hover-tint: var(--product-library-actionable-secondary-on-hover-tint); + --reactist-btn-hover-fill: var(--product-library-actionable-secondary-hover-fill); + --reactist-btn-disabled-tint: var(--product-library-actionable-secondary-on-disabled-tint); + --reactist-btn-disabled-fill: var(--product-library-actionable-secondary-disabled-fill); } .variant-tertiary { - --reactist-btn-idle-tint: var(--reactist-actionable-tertiary-idle-tint); + --reactist-btn-idle-tint: var(--product-library-actionable-tertiary-idle-tint); --reactist-btn-idle-fill: transparent; - --reactist-btn-hover-tint: var(--reactist-actionable-tertiary-hover-tint); - --reactist-btn-hover-fill: var(--reactist-actionable-tertiary-hover-fill); - --reactist-btn-disabled-tint: var(--reactist-actionable-tertiary-disabled-tint); + --reactist-btn-hover-tint: var(--product-library-actionable-tertiary-on-hover-tint); + --reactist-btn-hover-fill: var(--product-library-actionable-tertiary-hover-fill); + --reactist-btn-disabled-tint: var(--product-library-actionable-tertiary-disabled-tint); --reactist-btn-disabled-fill: transparent; } .variant-quaternary { - --reactist-btn-idle-tint: var(--reactist-actionable-quaternary-idle-tint); + --reactist-btn-idle-tint: var(--product-library-actionable-quaternary-idle-tint); --reactist-btn-idle-fill: transparent; - --reactist-btn-hover-tint: var(--reactist-actionable-quaternary-hover-tint); - --reactist-btn-hover-fill: var(--reactist-actionable-quaternary-hover-fill); - --reactist-btn-disabled-tint: var(--reactist-actionable-quaternary-disabled-tint); + --reactist-btn-hover-tint: var(--product-library-actionable-quaternary-on-hover-tint); + --reactist-btn-hover-fill: var(--product-library-actionable-quaternary-hover-fill); + --reactist-btn-disabled-tint: var(--product-library-actionable-quaternary-disabled-tint); --reactist-btn-disabled-fill: transparent; } /* variants with destructive tone */ .variant-primary.tone-destructive { - --reactist-btn-idle-tint: var(--reactist-actionable-primary-destructive-idle-tint); - --reactist-btn-idle-fill: var(--reactist-actionable-primary-destructive-idle-fill); - --reactist-btn-hover-tint: var(--reactist-actionable-primary-destructive-hover-tint); - --reactist-btn-hover-fill: var(--reactist-actionable-primary-destructive-hover-fill); - --reactist-btn-disabled-tint: var(--reactist-actionable-primary-destructive-disabled-tint); - --reactist-btn-disabled-fill: var(--reactist-actionable-primary-destructive-disabled-fill); + --reactist-btn-idle-tint: var(--product-library-actionable-destructive-on-idle-tint); + --reactist-btn-idle-fill: var(--product-library-actionable-destructive-idle-fill); + --reactist-btn-hover-tint: var(--product-library-actionable-destructive-on-hover-tint); + --reactist-btn-hover-fill: var(--product-library-actionable-destructive-hover-fill); + --reactist-btn-disabled-tint: var(--product-library-actionable-destructive-on-disabled-tint); + --reactist-btn-disabled-fill: var(--product-library-actionable-destructive-disabled-fill); } .variant-secondary.tone-destructive { - --reactist-btn-idle-tint: var(--reactist-actionable-secondary-destructive-idle-tint); + --reactist-btn-idle-tint: var(--product-library-actionable-destructive-idle-tint); --reactist-btn-idle-fill: transparent; - --reactist-btn-hover-tint: var(--reactist-actionable-secondary-destructive-hover-tint); - --reactist-btn-hover-fill: var(--reactist-actionable-secondary-destructive-hover-fill); - --reactist-btn-disabled-tint: var(--reactist-actionable-secondary-destructive-disabled-tint); + --reactist-btn-hover-tint: var(--product-library-actionable-destructive-hover-tint); + --reactist-btn-hover-fill: var(--product-library-info-attention-secondary-idle-fill); + --reactist-btn-disabled-tint: var(--product-library-actionable-destructive-disabled-tint); --reactist-btn-disabled-fill: transparent; } @@ -249,7 +207,7 @@ .variant-tertiary.tone-destructive, .variant-quaternary.tone-destructive { - --reactist-btn-idle-tint: var(--reactist-actionable-secondary-destructive-idle-tint); - --reactist-btn-hover-tint: var(--reactist-actionable-secondary-destructive-hover-tint); - --reactist-btn-disabled-tint: var(--reactist-actionable-secondary-destructive-disabled-tint); + --reactist-btn-idle-tint: var(--product-library-actionable-destructive-idle-tint); + --reactist-btn-hover-tint: var(--product-library-actionable-destructive-hover-tint); + --reactist-btn-disabled-tint: var(--product-library-actionable-destructive-disabled-tint); } diff --git a/src/button/button.stories.jsx b/src/button/button.stories.jsx index a8665e488..9597ef6a9 100644 --- a/src/button/button.stories.jsx +++ b/src/button/button.stories.jsx @@ -1,6 +1,7 @@ import * as React from 'react' import { useEffect, useState } from 'react' +import { withDarkTheme } from '../../.storybook/dark-theme' import { Box } from '../box' import { Heading } from '../heading' import { Inline } from '../inline' @@ -135,48 +136,7 @@ function PlaygroundTemplate({ label, ...props }) { function DarkModeTemplate(props) { return ( - + ) @@ -834,6 +794,7 @@ export const Playground = { export const DarkMode = { render: DarkModeTemplate.bind({}), + decorators: [withDarkTheme], name: 'Dark mode', parameters: { @@ -841,6 +802,11 @@ export const DarkMode = { source: { type: 'dynamic', }, + // Render as an iframe to scope `theme_dark` to the story + story: { + inline: false, + height: '320px', + }, }, }, diff --git a/src/button/icon-button.mdx b/src/button/icon-button.mdx index 09bcfe0c2..ffbd23e74 100644 --- a/src/button/icon-button.mdx +++ b/src/button/icon-button.mdx @@ -58,43 +58,10 @@ And here's how that look like: ### Dark mode -Even though Reactist does not yet owns the concept of dark mode, and leaves it for apps to set it -up, here's a demo on how easily you can set it up by manipulating color variables only. +Dark mode colors are applied when the `.theme_dark` class is set on the root element. ## Style customization -### Colors - -The following CSS custom properties are available to customize the button-like element appearance. - -``` ---reactist-actionable-primary-idle-tint ---reactist-actionable-primary-idle-fill ---reactist-actionable-primary-hover-tint ---reactist-actionable-primary-hover-fill ---reactist-actionable-primary-disabled-tint ---reactist-actionable-primary-disabled-fill - ---reactist-actionable-secondary-idle-tint ---reactist-actionable-secondary-idle-fill ---reactist-actionable-secondary-hover-tint ---reactist-actionable-secondary-hover-fill ---reactist-actionable-secondary-disabled-tint ---reactist-actionable-secondary-disabled-fill - ---reactist-actionable-tertiary-idle-tint ---reactist-actionable-tertiary-idle-fill ---reactist-actionable-tertiary-hover-tint ---reactist-actionable-tertiary-hover-fill ---reactist-actionable-tertiary-disabled-tint ---reactist-actionable-tertiary-disabled-fill - ---reactist-actionable-destructive-idle-tint ---reactist-actionable-destructive-idle-fill ---reactist-actionable-destructive-hover-tint ---reactist-actionable-destructive-hover-fill ---reactist-actionable-destructive-disabled-tint ---reactist-actionable-destructive-disabled-fill -``` +# diff --git a/src/button/icon-button.stories.jsx b/src/button/icon-button.stories.jsx index 505db3fcd..0e06cecaf 100644 --- a/src/button/icon-button.stories.jsx +++ b/src/button/icon-button.stories.jsx @@ -1,6 +1,7 @@ import * as React from 'react' import { useEffect, useState } from 'react' +import { withDarkTheme } from '../../.storybook/dark-theme' import { Box } from '../box' import { IconButton } from '../button' import { Heading } from '../heading' @@ -53,48 +54,7 @@ function PlaygroundTemplate({ label, ...props }) { function DarkModeTemplate(props) { return ( - + ) @@ -524,12 +484,18 @@ export const Playground = { export const DarkMode = { render: DarkModeTemplate.bind({}), + decorators: [withDarkTheme], parameters: { docs: { source: { type: 'dynamic', }, + // Render as an iframe to scope `theme_dark` to the story + story: { + inline: false, + height: '320px', + }, }, }, diff --git a/src/checkbox-field/checkbox-field.module.css b/src/checkbox-field/checkbox-field.module.css index 04f4b74ff..40b06127b 100644 --- a/src/checkbox-field/checkbox-field.module.css +++ b/src/checkbox-field/checkbox-field.module.css @@ -18,13 +18,13 @@ } .container svg { - color: var(--reactist-content-secondary); + color: var(--product-library-display-secondary-idle-tint); border-radius: 5px; min-width: 24px; } .container.checked svg { - color: var(--reactist-switch-checked); + color: var(--product-library-actionable-primary-idle-fill); } .container input[type='checkbox'] { @@ -39,7 +39,7 @@ } .container.keyFocused svg { - border: 2px solid var(--reactist-actionable-primary-idle-fill); + border: 2px solid var(--product-library-actionable-primary-idle-fill); } .icon { diff --git a/src/components/progress-bar/progress-bar.module.css b/src/components/progress-bar/progress-bar.module.css index 5109f0ec5..dd16b7492 100644 --- a/src/components/progress-bar/progress-bar.module.css +++ b/src/components/progress-bar/progress-bar.module.css @@ -2,9 +2,9 @@ --reactist-progressbar-height: var(--reactist-spacing-xsmall); --reactist-progressbar-radius-outer: var(--reactist-progressbar-height); --reactist-progressbar-radius-inner: var(--reactist-progressbar-height); - --reactist-progressbar-track: var(--reactist-framework-fill-crest); - --reactist-progressbar-fill: var(--reactist-bg-brand); - --reactist-progressbar-scale-tint: var(--reactist-content-tertiary); + --reactist-progressbar-track: var(--product-library-background-base-tertiary); + --reactist-progressbar-fill: var(--product-library-display-accent-primary-fill); + --reactist-progressbar-scale-tint: var(--product-library-display-tertiary-idle-tint); --reactist-progressbar-scale-tick-height: 8px; --reactist-progressbar-scale-minor-tick-opacity: 0.15; --reactist-progressbar-scale-major-tick-opacity: 0.35; diff --git a/src/divider/divider.module.css b/src/divider/divider.module.css index 4ff47b385..733841bbe 100644 --- a/src/divider/divider.module.css +++ b/src/divider/divider.module.css @@ -1,9 +1,9 @@ .weight-primary { - border-bottom: 1px solid var(--reactist-divider-primary); + border-bottom: 1px solid var(--product-library-divider-primary); } .weight-secondary { - border-bottom: 1px solid var(--reactist-divider-secondary); + border-bottom: 1px solid var(--product-library-divider-secondary); } .weight-tertiary { - border-bottom: 1px solid var(--reactist-divider-tertiary); + border-bottom: 1px solid var(--product-library-divider-tertiary); } diff --git a/src/heading/heading.module.css b/src/heading/heading.module.css index aee2b4605..2ca4387a9 100644 --- a/src/heading/heading.module.css +++ b/src/heading/heading.module.css @@ -1,5 +1,5 @@ .heading { - color: var(--reactist-content-primary); + color: var(--product-library-display-primary-idle-tint); font-weight: var(--reactist-font-weight-strong); font-family: var(--reactist-font-family); } @@ -15,7 +15,7 @@ /* tone */ .tone-secondary { - color: var(--reactist-content-secondary); + color: var(--product-library-display-secondary-idle-tint); } .tone-danger { color: rgb(209, 69, 59); diff --git a/src/icons/banner-icon.module.css b/src/icons/banner-icon.module.css index 216ab0642..27ece6fbb 100644 --- a/src/icons/banner-icon.module.css +++ b/src/icons/banner-icon.module.css @@ -1,10 +1,10 @@ :root { - --reactist-banner-info-icon-color: #316fea; - --reactist-banner-upgrade-icon-color: #f48318; - --reactist-banner-experiment-icon-color: #f48318; - --reactist-banner-warning-icon-color: #eb8909; - --reactist-banner-error-icon-color: #dc4c3e; - --reactist-banner-success-icon-color: #058527; + --reactist-banner-info-icon-color: var(--product-library-info-neutral-primary-idle-fill); + --reactist-banner-upgrade-icon-color: var(--product-library-info-promote-primary-idle-fill); + --reactist-banner-experiment-icon-color: var(--product-library-info-promote-primary-idle-fill); + --reactist-banner-warning-icon-color: var(--product-library-info-warning-primary-on-idle-fill); + --reactist-banner-error-icon-color: var(--product-library-info-attention-primary-idle-fill); + --reactist-banner-success-icon-color: var(--product-library-info-positive-primary-idle-fill); } .info { diff --git a/src/index.ts b/src/index.ts index a27472339..6df216374 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,12 @@ /// /// +// Bundle the product library's light palette. Following package `exports` +// maps requires `eslint-import-resolver-typescript` on a newer version of +// eslint, so we are disabling the rule for now +// eslint-disable-next-line import/no-unresolved +import '@doist/product-libraries-tokens/css/td-light.css' + import './styles/design-tokens.css' // layout components diff --git a/src/menu/menu.module.css b/src/menu/menu.module.css index 1659fd26a..7b3092637 100644 --- a/src/menu/menu.module.css +++ b/src/menu/menu.module.css @@ -10,7 +10,7 @@ font-size: var(--reactist-font-size-copy); padding: 4px 0; min-width: 180px; - border: 1px solid var(--reactist-divider-secondary); + border: 1px solid var(--product-library-divider-secondary); border-radius: 3px; margin: -4px; /* Required to add spacing between the viewport, used in conjunction with unstable_offset */ z-index: var(--reactist-stacking-order-menu); @@ -32,7 +32,7 @@ } :global(.reactist_menulist) :global(.reactist_menugroup__label) { - color: var(--reactist-content-secondary); + color: var(--product-library-display-secondary-idle-tint); font-size: var(--reactist-font-size-copy); } @@ -44,13 +44,13 @@ :global(.reactist_menulist) [role='menuitem']:hover, :global(.reactist_menulist) [role='menuitem']:focus, :global(.reactist_menulist) [role='menuitem'][aria-expanded='true'] { - color: var(--reactist-content-primary); - background-color: var(--reactist-bg-selected); + color: var(--product-library-display-primary-idle-tint); + background-color: var(--product-library-selectable-secondary-selected-fill); } :global(.reactist_menulist) [role='menuitem'][aria-disabled='true'], :global(.reactist_menulist) [role='menuitem']:disabled { - color: var(--reactist-content-secondary); + color: var(--product-library-display-secondary-idle-tint); pointer-events: none; } @@ -65,19 +65,25 @@ /* Link menu items without an icon are styled like a text link */ :global(.reactist_menulist) a[role='menuitem']:not(:has(svg)):not([aria-disabled='true']) { - color: var(--reactist-text-link-idle-tint, var(--reactist-actionable-tertiary-idle-tint)); - --reactist-content-primary: var( + color: var( --reactist-text-link-idle-tint, - var(--reactist-actionable-tertiary-idle-tint) + var(--product-library-actionable-tertiary-idle-tint) + ); + --product-library-display-primary-idle-tint: var( + --reactist-text-link-idle-tint, + var(--product-library-actionable-tertiary-idle-tint) ); } :global(.reactist_menulist) a[role='menuitem']:not(:has(svg)):not([aria-disabled='true']):hover, :global(.reactist_menulist) a[role='menuitem']:not(:has(svg)):not([aria-disabled='true']):focus { - color: var(--reactist-text-link-hover-tint, var(--reactist-actionable-tertiary-hover-tint)); - --reactist-content-primary: var( + color: var( + --reactist-text-link-hover-tint, + var(--product-library-actionable-tertiary-on-hover-tint) + ); + --product-library-display-primary-idle-tint: var( --reactist-text-link-hover-tint, - var(--reactist-actionable-tertiary-hover-tint) + var(--product-library-actionable-tertiary-on-hover-tint) ); } @@ -89,6 +95,6 @@ :global(.reactist_menulist) hr { border: none; height: 1px; - background-color: var(--reactist-bg-selected); + background-color: var(--product-library-selectable-secondary-selected-fill); margin: 4px 0; } diff --git a/src/modal/modal.module.css b/src/modal/modal.module.css index b0f4200ea..77ab393b0 100644 --- a/src/modal/modal.module.css +++ b/src/modal/modal.module.css @@ -8,7 +8,7 @@ } :root { - --reactist-modal-overlay-fill: rgba(0, 0, 0, 0.5); + --reactist-modal-overlay-fill: var(--product-library-background-overlay); --reactist-modal-padding-top: 13vh; } diff --git a/src/modal/modal.stories.tsx b/src/modal/modal.stories.tsx index 9c82f3428..45fab9a5e 100644 --- a/src/modal/modal.stories.tsx +++ b/src/modal/modal.stories.tsx @@ -7,6 +7,7 @@ import { Box } from '../box' import { IconButton } from '../button' import { Column, Columns } from '../columns' import ThreeDotsIcon from '../components/icons/ThreeDotsIcon.svg' +import { Divider } from '../divider' import { Heading } from '../heading' import { Inline } from '../inline' import { Menu, MenuButton, MenuItem, MenuList } from '../menu' @@ -250,18 +251,14 @@ export function ModalWithScrollableTabPanels() { - + Sub-tasks Comments Activity + diff --git a/src/notice/notice.module.css b/src/notice/notice.module.css index a76331fcf..29095f7ea 100644 --- a/src/notice/notice.module.css +++ b/src/notice/notice.module.css @@ -1,5 +1,5 @@ .container { - color: var(--reactist-content-primary); + color: var(--product-library-display-primary-idle-tint); } .content { @@ -11,17 +11,17 @@ } .tone-info .icon { - color: var(--reactist-alert-tone-info-icon); + color: var(--product-library-info-neutral-primary-idle-fill); } .tone-positive .icon { - color: var(--reactist-alert-tone-positive-icon); + color: var(--product-library-info-positive-primary-idle-fill); } .tone-caution .icon { - color: var(--reactist-alert-tone-caution-icon); + color: var(--product-library-info-warning-primary-on-idle-fill); } .tone-critical .icon { - color: var(--reactist-alert-tone-critical-icon); + color: var(--product-library-info-attention-primary-idle-fill); } diff --git a/src/password-field/password-field.mdx b/src/password-field/password-field.mdx index 1aabb76cc..3a8c739b9 100644 --- a/src/password-field/password-field.mdx +++ b/src/password-field/password-field.mdx @@ -17,17 +17,6 @@ A component used to accept password input from the user. -## Colors - -The following CSS custom properties are available so that the `PasswordField`'s border colors can be customized. -Note that these variables are shared with other components such as `Textfield`, `SelectField`, and `TextArea`. - -``` ---reactist-inputs-focus ---reactist-inputs-idle ---reactist-inputs-alert -``` - diff --git a/src/prose/prose.module.css b/src/prose/prose.module.css index a9ba8c2ac..2e4befa58 100644 --- a/src/prose/prose.module.css +++ b/src/prose/prose.module.css @@ -1,17 +1,17 @@ :root { - --reactist-prose-code-fill: rgb(247, 250, 251); - --reactist-prose-code-tint: var(--reactist-content-primary); - --reactist-prose-code-border: var(--reactist-divider-primary); - --reactist-prose-quote-tint: #4a6368; + --reactist-prose-code-fill: var(--product-library-background-base-secondary); + --reactist-prose-code-tint: var(--product-library-display-primary-idle-tint); + --reactist-prose-code-border: var(--product-library-divider-primary); + --reactist-prose-quote-tint: var(--product-library-display-secondary-idle-tint); - --reactist-prose-link-idle-tint: #006f85; - --reactist-prose-link-idle-underline: var(--reactist-divider-primary); - --reactist-prose-link-hover-tint: #006f85; - --reactist-prose-link-hover-underline: #006f85; + --reactist-prose-link-idle-tint: inherit; + --reactist-prose-link-idle-underline: inherit; + --reactist-prose-link-hover-tint: var(--product-library-actionable-tertiary-hover-tint); + --reactist-prose-link-hover-underline: inherit; - --reactist-prose-horizontal-rule-color: var(--reactist-divider-primary); + --reactist-prose-horizontal-rule-color: var(--product-library-divider-primary); - --reactist-prose-table-border: var(--reactist-divider-primary); + --reactist-prose-table-border: var(--product-library-divider-primary); /* `transparent` (the initial value of `background-color`) rather than `initial`, which is special-cased in custom property values to mean "guaranteed invalid", or `inherit`, which @@ -44,7 +44,7 @@ .prose { font-size: var(--reactist-prose-content-font-size); - color: var(--reactist-content-primary); + color: var(--product-library-display-primary-idle-tint); line-height: 1.65; overflow-wrap: break-word; word-wrap: break-word; @@ -179,7 +179,7 @@ .prose blockquote::before { content: ''; - border-left: 2px solid var(--reactist-divider-primary); + border-left: 2px solid var(--product-library-divider-primary); position: absolute; top: 0.25em; bottom: 0.25em; diff --git a/src/prose/prose.stories.tsx b/src/prose/prose.stories.tsx index 81181990c..53e15a0e6 100644 --- a/src/prose/prose.stories.tsx +++ b/src/prose/prose.stories.tsx @@ -31,15 +31,17 @@ export function ProsePlaygroundStory({ darkModeTypography, dangerouslySetInnerHT ? { backgroundColor: '#202020', // @ts-expect-error - '--reactist-content-primary': 'rgba(255, 255, 255, 0.88)', + '--product-library-display-primary-idle-tint': + 'rgba(255, 255, 255, 0.88)', '--reactist-prose-code-tint': 'rgba(255, 255, 255, 0.88)', '--reactist-prose-code-fill': 'rgb(40, 40, 40)', - '--reactist-prose-code-border': 'var(--reactist-divider-secondary)', + '--reactist-prose-code-border': + 'var(--product-library-divider-secondary)', '--reactist-prose-quote-tint': '#9db4b9', // divider colors - '--reactist-divider-primary': '#53595b', - '--reactist-divider-secondary': '#424b4c', - '--reactist-divider-tertiary': '#323839', + '--product-library-divider-primary': '#53595b', + '--product-library-divider-secondary': '#424b4c', + '--product-library-divider-tertiary': '#323839', // link colors '--reactist-prose-link-idle-tint': '#22a5bf', '--reactist-prose-link-idle-underline': '#53595b', diff --git a/src/select-field/select-field.mdx b/src/select-field/select-field.mdx index 842d4ded6..857d11b76 100644 --- a/src/select-field/select-field.mdx +++ b/src/select-field/select-field.mdx @@ -17,17 +17,6 @@ A component that provides a menu of options, similar to the native `