From 88d890beff8b4a48f9744174a71ae83250e9c9a1 Mon Sep 17 00:00:00 2001 From: Dima Belyaev Date: Sun, 8 Mar 2026 15:09:24 +0100 Subject: [PATCH 01/75] Theming package (#595) --- .changeset/tangy-papers-occur.md | 13 + .storybook/postcss.config.mjs | 2 +- .storybook/preview.jsx | 12 +- .vscode/settings.json | 6 - package.json | 2 +- packages/reshaped/bin/cli.js | 65 +- packages/reshaped/package.json | 21 +- packages/reshaped/src/config/postcss.cts | 2 +- packages/reshaped/src/config/postcss.ts | 2 +- packages/reshaped/src/config/tailwind.ts | 106 --- .../hooks/_private/useSingletonViewport.tsx | 3 +- packages/reshaped/src/index.ts | 24 +- .../reshaped/src/tests/themes.stories.tsx | 3 +- .../src/tests/themingWithDefinition.ts | 2 +- .../src/tests/themingWithoutDefinition.ts | 2 +- .../themes/_generator/definitions/figma.ts | 212 ----- .../themes/_generator/definitions/reshaped.ts | 220 ----- .../themes/_generator/definitions/slate.ts | 12 - .../tokens/fontFamily/fontFamily.types.ts | 2 - .../tokens/shadow/shadow.transforms.ts | 26 - .../_generator/tokens/shadow/shadow.types.ts | 13 - .../reshaped/src/themes/figma/tailwind.css | 6 + packages/reshaped/src/themes/figma/theme.css | 118 +-- packages/reshaped/src/themes/figma/theme.json | 890 +++++++++++++----- .../src/themes/fragments/twitter/tailwind.css | 6 + packages/reshaped/src/themes/index.ts | 35 - .../reshaped/src/themes/reshaped/media.css | 5 - .../reshaped/src/themes/reshaped/theme.css | 226 ----- .../reshaped/src/themes/reshaped/theme.json | 610 ------------ .../reshaped/src/themes/slate/tailwind.css | 6 + packages/reshaped/src/themes/slate/theme.css | 120 +-- packages/reshaped/src/themes/slate/theme.json | 880 ++++++++++++----- packages/reshaped/v4.md | 10 + packages/theming/package.json | 62 ++ .../cli/theming => theming/src/cli}/index.ts | 12 +- .../src/cli}/reshaped.config.ts | 8 +- bin/cli.js => packages/theming/src/cli/run.ts | 37 +- .../theming => theming/src/cli}/tailwind.ts | 10 +- .../src/generation/definitions/figma.ts | 609 ++++++++++++ .../src/generation/definitions/slate.ts | 565 +++++++++++ .../tokens/color/color.constants.ts} | 2 +- .../tokens/color/color.transforms.ts | 2 +- .../generation}/tokens/color/color.types.ts | 45 +- .../tokens/color/utilities/a11y.ts | 0 .../tokens/color/utilities/convert.ts | 0 .../tokens/color/utilities/generateColors.ts | 85 +- .../color/utilities/generateMetaColors.ts | 2 +- .../tests/__snapshots__/convert.test.ts.snap | 0 .../__snapshots__/generateColors.test.ts.snap | 536 +++++------ .../tokens/color/utilities/tests/a11y.test.ts | 0 .../color/utilities/tests/convert.test.ts | 0 .../utilities/tests/generateColors.test.ts | 0 .../src/generation}/tokens/css.ts | 0 .../tokens/duration/duration.transforms.ts | 0 .../tokens/duration/duration.types.ts | 0 .../tokens/easing/easing.transforms.ts | 0 .../generation}/tokens/easing/easing.types.ts | 0 .../tokens/font/font.transforms.ts | 0 .../src/generation}/tokens/font/font.types.ts | 7 +- .../fontFamily/fontFamily.transforms.ts | 0 .../tokens/fontFamily/fontFamily.types.ts | 2 + .../fontWeight/fontWeight.transforms.ts | 0 .../tokens/fontWeight/fontWeight.types.ts | 0 .../tokens/radius/radius.transforms.ts | 0 .../generation}/tokens/radius/radius.types.ts | 0 .../tokens/shadow/shadow.transforms.ts | 51 + .../generation/tokens/shadow/shadow.types.ts | 28 + .../src/generation}/tokens/transforms.ts | 0 .../src/generation}/tokens/types.ts | 0 .../tokens/unit/unit.transforms.ts | 0 .../src/generation}/tokens/unit/unit.types.ts | 0 .../tokens/unit/utilities/generate.ts | 10 +- .../tokens/viewport/viewport.constants.ts | 5 + .../tokens/viewport/viewport.transforms.ts | 0 .../tokens/viewport/viewport.types.ts | 0 .../tokens/zIndex/zIndex.transforms.ts | 0 .../generation}/tokens/zIndex/zIndex.types.ts | 0 .../src/generation}/transform.ts | 0 .../src/generation}/types.ts | 0 .../generation}/utilities/mergeDefinitions.ts | 0 packages/theming/src/index.ts | 38 + .../{reshaped => theming}/src/types/config.ts | 4 +- packages/theming/src/utilities/string.ts | 12 + packages/theming/tsconfig.json | 21 + pnpm-lock.yaml | 42 +- 85 files changed, 3291 insertions(+), 2566 deletions(-) create mode 100644 .changeset/tangy-papers-occur.md delete mode 100644 .vscode/settings.json mode change 100755 => 100644 packages/reshaped/bin/cli.js delete mode 100644 packages/reshaped/src/config/tailwind.ts delete mode 100644 packages/reshaped/src/themes/_generator/definitions/figma.ts delete mode 100644 packages/reshaped/src/themes/_generator/definitions/reshaped.ts delete mode 100644 packages/reshaped/src/themes/_generator/definitions/slate.ts delete mode 100644 packages/reshaped/src/themes/_generator/tokens/fontFamily/fontFamily.types.ts delete mode 100644 packages/reshaped/src/themes/_generator/tokens/shadow/shadow.transforms.ts delete mode 100644 packages/reshaped/src/themes/_generator/tokens/shadow/shadow.types.ts delete mode 100644 packages/reshaped/src/themes/index.ts delete mode 100644 packages/reshaped/src/themes/reshaped/media.css delete mode 100644 packages/reshaped/src/themes/reshaped/theme.css delete mode 100644 packages/reshaped/src/themes/reshaped/theme.json create mode 100644 packages/reshaped/v4.md create mode 100644 packages/theming/package.json rename packages/{reshaped/src/cli/theming => theming/src/cli}/index.ts (77%) rename packages/{reshaped/src/cli/theming => theming/src/cli}/reshaped.config.ts (61%) rename bin/cli.js => packages/theming/src/cli/run.ts (65%) mode change 100755 => 100644 rename packages/{reshaped/src/cli/theming => theming/src/cli}/tailwind.ts (91%) create mode 100644 packages/theming/src/generation/definitions/figma.ts create mode 100644 packages/theming/src/generation/definitions/slate.ts rename packages/{reshaped/src/themes/_generator/constants.ts => theming/src/generation/tokens/color/color.constants.ts} (70%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/color/color.transforms.ts (96%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/color/color.types.ts (70%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/color/utilities/a11y.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/color/utilities/convert.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/color/utilities/generateColors.ts (71%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/color/utilities/generateMetaColors.ts (97%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/color/utilities/tests/__snapshots__/convert.test.ts.snap (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/color/utilities/tests/__snapshots__/generateColors.test.ts.snap (70%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/color/utilities/tests/a11y.test.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/color/utilities/tests/convert.test.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/color/utilities/tests/generateColors.test.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/css.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/duration/duration.transforms.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/duration/duration.types.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/easing/easing.transforms.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/easing/easing.types.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/font/font.transforms.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/font/font.types.ts (90%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/fontFamily/fontFamily.transforms.ts (100%) create mode 100644 packages/theming/src/generation/tokens/fontFamily/fontFamily.types.ts rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/fontWeight/fontWeight.transforms.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/fontWeight/fontWeight.types.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/radius/radius.transforms.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/radius/radius.types.ts (100%) create mode 100644 packages/theming/src/generation/tokens/shadow/shadow.transforms.ts create mode 100644 packages/theming/src/generation/tokens/shadow/shadow.types.ts rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/transforms.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/types.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/unit/unit.transforms.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/unit/unit.types.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/unit/utilities/generate.ts (61%) create mode 100644 packages/theming/src/generation/tokens/viewport/viewport.constants.ts rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/viewport/viewport.transforms.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/viewport/viewport.types.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/zIndex/zIndex.transforms.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/tokens/zIndex/zIndex.types.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/transform.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/types.ts (100%) rename packages/{reshaped/src/themes/_generator => theming/src/generation}/utilities/mergeDefinitions.ts (100%) create mode 100644 packages/theming/src/index.ts rename packages/{reshaped => theming}/src/types/config.ts (72%) create mode 100644 packages/theming/src/utilities/string.ts create mode 100644 packages/theming/tsconfig.json diff --git a/.changeset/tangy-papers-occur.md b/.changeset/tangy-papers-occur.md new file mode 100644 index 00000000..1d6b561c --- /dev/null +++ b/.changeset/tangy-papers-occur.md @@ -0,0 +1,13 @@ +--- +"@reshaped/theming": major +--- + +Updated theming structure and values + +- Added x0_5 and x1_5 units +- Renamed "faded" to "muted" in color and shadow tokens +- Updated medium radius to 6px by default +- Added new shadow tokens for simulating borders mixed with shadows: `border`, `borderMuted`, `borderRaised`, `borderMutedRaised`, `borderOverlay`, `borderMutedOverlay` +- Updated typography structure. Title 1-6 moved to headline 1-3 for marketing use cases, featured 1-3 are now title 1-6. Body 2 and body 3 are now body 1 and body 2 with body 2 being the default body text style. +- Updated easing and duration values +- Added new backgroundHighlightedMuted color tokens for custom hover effects \ No newline at end of file diff --git a/.storybook/postcss.config.mjs b/.storybook/postcss.config.mjs index c3566daf..85f04016 100644 --- a/.storybook/postcss.config.mjs +++ b/.storybook/postcss.config.mjs @@ -13,7 +13,7 @@ export default { plugins: [ ...baseConfig.plugins, postcssGlobalData({ - files: [path.resolve(__dirname, "../packages/reshaped/src/themes/reshaped/media.css")], + files: [path.resolve(__dirname, "../packages/reshaped/src/themes/slate/media.css")], }), customMediaPlugin(), ], diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index bba0fc33..0505998f 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -9,7 +9,6 @@ import DropdownMenu from "../packages/reshaped/src/components/DropdownMenu"; import Icon from "../packages/reshaped/src/components/Icon"; import { useTheme } from "../packages/reshaped/src/components/Theme"; import IconCheckmark from "../packages/reshaped/src/icons/Checkmark"; -import "../packages/reshaped/src/themes/reshaped/theme.css"; import "../packages/reshaped/src/themes/slate/theme.css"; import "../packages/reshaped/src/themes/figma/theme.css"; import "../packages/reshaped/src/themes/fragments/twitter/theme.css"; @@ -78,16 +77,7 @@ const ThemeSwitch = () => { > Slate - handleThemeChange("reshaped")} - endSlot={ - theme === "reshaped" ? ( - - ) : undefined - } - > - Reshaped - + handleThemeChange("figma")} endSlot={ diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index d90f8ae4..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "editor.codeActionsOnSave": { - "source.fixAll.eslint": "explicit" - }, - "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"] -} diff --git a/package.json b/package.json index 0698b458..7341fe20 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "changeset": "changeset", "build": "pnpm -r run build", "build:stories": "pnpm --filter reshaped run build:stories", - "build:themes": "pnpm --filter reshaped run build:themes", + "build:themes": "pnpm --filter @reshaped/theming run build && pnpm --filter reshaped run build:themes", "build:storybook": "storybook build -o dist/app --disable-telemetry", "build:chromatic": "STORYBOOK_ENV=chromatic storybook build", "release": "bash ./bin/release.sh", diff --git a/packages/reshaped/bin/cli.js b/packages/reshaped/bin/cli.js old mode 100755 new mode 100644 index 4e407cbb..3864ad1e --- a/packages/reshaped/bin/cli.js +++ b/packages/reshaped/bin/cli.js @@ -1,65 +1,2 @@ #!/usr/bin/env node -const fs = require("fs"); -const path = require("path"); -const process = require("process"); -const chalk = require("chalk"); -const { Command } = require("commander"); -const { addTheme, addThemeFragment } = require("../dist/cli/theming"); - -const program = new Command(); - -const importJSConfig = (path) => { - console.log(chalk.yellow(`Using Reshaped config at ${path}`)); - const config = require(path); - return config.default || config; -}; - -program - .description("Create new themes for Reshaped") - .command("theming") - .requiredOption("-o, --output ", "Path to output generated themes") - .option("-c, --config ", "Path to the config file") - .action(async (opts) => { - const { output: outputPath, config: passedConfigPath } = opts; - const originPath = process.cwd(); - let configPath; - - const cjsConfigPath = path.resolve(originPath, "reshaped.config.cjs"); - const jsConfigPath = path.resolve(originPath, "reshaped.config.js"); - const tsConfigPath = path.resolve(originPath, "reshaped.config.ts"); - - if (passedConfigPath) { - const attemptPath = path.resolve(originPath, passedConfigPath); - if (fs.existsSync(attemptPath)) configPath = attemptPath; - } - - [jsConfigPath, cjsConfigPath, tsConfigPath].forEach((p) => { - if (!passedConfigPath && fs.existsSync(p)) configPath = p; - }); - - if (!configPath) { - console.error(chalk.red("Error: Reshaped config not found")); - return; - } - - console.log(chalk.blue("Processing Reshaped themes...")); - const config = importJSConfig(configPath); - const { themes, themeFragments, themeOptions } = config; - - if (themes) { - Object.keys(themes).forEach((themeName) => { - addTheme(themeName, themes[themeName], { outputPath, themeOptions }); - }); - } - - if (themeFragments) { - Object.keys(themeFragments).forEach((fragmentName) => { - addThemeFragment(fragmentName, themeFragments[fragmentName], { - outputPath, - themeOptions, - }); - }); - } - }); - -program.parse(process.argv); +require("@reshaped/theming/cli/run"); diff --git a/packages/reshaped/package.json b/packages/reshaped/package.json index 995147b9..2c9aea09 100644 --- a/packages/reshaped/package.json +++ b/packages/reshaped/package.json @@ -45,31 +45,17 @@ "import": "./dist/index.js", "default": "./dist/index.js" }, - "./themes": { - "types": "./dist/themes/index.d.ts", - "import": "./dist/themes/index.js", - "default": "./dist/themes/index.js" - }, "./config/postcss": { "types": "./dist/config/postcss.d.ts", "import": "./dist/config/postcss.js", "default": "./dist/config/postcss.cjs" }, - "./config/tailwind": { - "types": "./dist/config/tailwind.d.ts", - "import": "./dist/config/tailwind.js", - "default": "./dist/config/tailwind.js" - }, "./bundle": { "types": "./dist/bundle.d.ts", "import": "./dist/bundle.js", "default": "./dist/bundle.js" }, "./bundle.css": "./dist/bundle.css", - "./themes/reshaped/*": "./dist/themes/reshaped/*", - "./themes/slate/*": "./dist/themes/slate/*", - "./themes/figma/*": "./dist/themes/figma/*", - "./themes/fragments/twitter/*": "./dist/themes/fragments/twitter/*", "./package.json": "./package.json" }, "bin": { @@ -79,7 +65,7 @@ "clean": "bash ./bin/clean.sh", "dev": "storybook dev -p 3001 -c ../../.storybook --disable-telemetry", "build": "pnpm clean && pnpm build:stories && pnpm build:esm && pnpm build:css && pnpm build:bundle", - "build:themes": "node bin/cli.js theming --config dist/cli/theming/reshaped.config.js --output src/themes", + "build:themes": "node bin/cli.js theming --output src/themes", "build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json", "build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build", "build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json", @@ -101,12 +87,11 @@ "dependencies": { "@csstools/postcss-global-data": "4.0.0", "@reshaped/headless": "workspace:*", - "@types/culori": "4.0.1", + "@reshaped/theming": "workspace:*", "chalk": "4.1.2", "commander": "14.0.3", - "cssnano": "7.1.2", + "cssnano": "7.1.1", "csstype": "3.2.3", - "culori": "4.0.2", "postcss-custom-media": "12.0.1" } } diff --git a/packages/reshaped/src/config/postcss.cts b/packages/reshaped/src/config/postcss.cts index 71eaafb2..3f72eb53 100644 --- a/packages/reshaped/src/config/postcss.cts +++ b/packages/reshaped/src/config/postcss.cts @@ -1,6 +1,6 @@ import path from "path"; -const defaultThemeMediaCSSPath = path.resolve(__dirname, "../themes/reshaped/media.css"); +const defaultThemeMediaCSSPath = path.resolve(__dirname, "../themes/slate/media.css"); // Using [plugin]: { ...options } format here because it's supported by the most frameworks // - require('plugin') is not supported by Next diff --git a/packages/reshaped/src/config/postcss.ts b/packages/reshaped/src/config/postcss.ts index de25c00b..9ed2354c 100644 --- a/packages/reshaped/src/config/postcss.ts +++ b/packages/reshaped/src/config/postcss.ts @@ -4,7 +4,7 @@ import { fileURLToPath } from "url"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const defaultThemeMediaCSSPath = path.resolve(__dirname, "../themes/reshaped/media.css"); +const defaultThemeMediaCSSPath = path.resolve(__dirname, "../themes/slate/media.css"); // Using [plugin]: { ...options } format here because it's supported by the most frameworks // - require('plugin') is not supported by Next diff --git a/packages/reshaped/src/config/tailwind.ts b/packages/reshaped/src/config/tailwind.ts deleted file mode 100644 index d77546e2..00000000 --- a/packages/reshaped/src/config/tailwind.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { bgWithDynamicForeground } from "@/themes/_generator/constants"; -import reshapedDefinition from "@/themes/_generator/definitions/reshaped"; -import mergeDefinitions from "@/themes/_generator/utilities/mergeDefinitions"; -import { camelToKebab } from "@/utilities/string"; - -import type { Name as ColorName } from "@/themes/_generator/tokens/color/color.types"; -import type { ThemeDefinition } from "@/themes/_generator/tokens/types"; - -export const getTheme = (theme?: ThemeDefinition) => { - const config: Record< - | "backgroundColor" - | "textColor" - | "borderColor" - | "colors" - | "borderRadius" - | "spacing" - | "boxShadow" - | "screens", - Record - > = { - backgroundColor: {}, - textColor: {}, - borderColor: {}, - colors: {}, - borderRadius: {}, - spacing: {}, - boxShadow: {}, - screens: {}, - }; - - const definition = theme - ? (mergeDefinitions(reshapedDefinition, theme) as ThemeDefinition) - : reshapedDefinition; - - Object.keys(definition.color).forEach((tokenName) => { - const cssTokenName = camelToKebab(tokenName); - const cssVariable = ["rs", "color", cssTokenName].join("-"); - const configValue = `var(--${cssVariable})`; - - if (tokenName.startsWith("background")) { - const name = cssTokenName.replace("background-", ""); - config.backgroundColor[name] = configValue; - - if (bgWithDynamicForeground.includes(tokenName as ColorName)) { - const cssVariable = ["rs", "color", "on", cssTokenName].join("-"); - const configValue = `var(--${cssVariable})`; - config.textColor[`on-${name}`] = configValue; - } - - return; - } - - if (tokenName.startsWith("foreground")) { - const name = cssTokenName.replace("foreground-", ""); - config.textColor[name] = configValue; - return; - } - - if (tokenName.startsWith("border")) { - const name = cssTokenName.replace("border-", ""); - config.borderColor[name] = configValue; - return; - } - - config.backgroundColor[cssTokenName] = configValue; - config.borderColor[cssTokenName] = configValue; - config.textColor[cssTokenName] = configValue; - config.colors[cssTokenName] = configValue; - }); - - Object.keys(definition.radius).forEach((tokenName) => { - const cssTokenName = camelToKebab(tokenName); - - config.borderRadius[tokenName] = `var(--rs-radius-${cssTokenName})`; - return; - }); - - Object.keys(definition.unit).forEach((tokenName) => { - if (tokenName.startsWith("base")) { - [...Array(11).keys()].forEach((i) => { - if (i === 0) { - config.spacing["0"] = "0px"; - } else { - config.spacing[`x${i}`] = `var(--rs-unit-x${i})`; - } - }); - } - }); - - Object.keys(definition.shadow).forEach((tokenName) => { - const cssTokenName = camelToKebab(tokenName); - const cssVariable = ["rs", "shadow", cssTokenName].join("-"); - const configValue = `var(--${cssVariable})`; - - const name = cssTokenName.replace("shadow-", ""); - config.boxShadow[name] = configValue; - return; - }); - - Object.entries(definition.viewport).forEach(([tokenName, tokenValue]) => { - if (!tokenValue.minPx) return; - config.screens[tokenName] = `${tokenValue.minPx}px`; - }); - - return config; -}; diff --git a/packages/reshaped/src/hooks/_private/useSingletonViewport.tsx b/packages/reshaped/src/hooks/_private/useSingletonViewport.tsx index 0a9aedfb..b95d4ed3 100644 --- a/packages/reshaped/src/hooks/_private/useSingletonViewport.tsx +++ b/packages/reshaped/src/hooks/_private/useSingletonViewport.tsx @@ -1,10 +1,9 @@ "use client"; import { useIsomorphicLayoutEffect } from "@reshaped/headless"; +import { breakpoints as defaultBreakpoints } from "@reshaped/theming"; import React from "react"; -import defaultBreakpoints from "@/constants/breakpoints"; - import type * as G from "@/types/global"; const SingletonViewportContext = React.createContext<{ diff --git a/packages/reshaped/src/index.ts b/packages/reshaped/src/index.ts index 59b0ccef..c6980515 100644 --- a/packages/reshaped/src/index.ts +++ b/packages/reshaped/src/index.ts @@ -230,10 +230,32 @@ export { TrapFocus, classNames } from "@reshaped/headless"; * Types */ export type { Attributes } from "@reshaped/headless"; -export type { ReshapedConfig } from "@/types/config"; export type { Responsive, ColorMode } from "@/types/global"; /** * Dev utilities */ export { default as Placeholder } from "@/utilities/storybook/Placeholder"; + +/** Theming */ +export type { + ReshapedConfig, + ThemeDefinition, + ColorTokenName, + DurationTokenName, + EasingTokenName, + FontTokenName, + FontFamilyTokenName, + FontWeightTokenName, + RadiusTokenName, + ShadowTokenName, + UnitTokenName, + ViewportTokenName, +} from "@reshaped/theming"; + +export { + baseThemeDefinition, + generateThemeColors, + transform, + getThemeCSS, +} from "@reshaped/theming"; diff --git a/packages/reshaped/src/tests/themes.stories.tsx b/packages/reshaped/src/tests/themes.stories.tsx index 32b67bfe..fe7992ab 100644 --- a/packages/reshaped/src/tests/themes.stories.tsx +++ b/packages/reshaped/src/tests/themes.stories.tsx @@ -1,3 +1,4 @@ +import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "@reshaped/theming"; import { useLayoutEffect, useState } from "react"; import Actionable from "@/components/Actionable"; @@ -16,8 +17,6 @@ import View from "@/components/View"; import IconZap from "@/icons/Mic"; import { Example } from "@/utilities/storybook"; -import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "themes"; - import ThemePlayground from "./ThemesPlayground"; export default { diff --git a/packages/reshaped/src/tests/themingWithDefinition.ts b/packages/reshaped/src/tests/themingWithDefinition.ts index 5a4af7f9..f8a7db26 100644 --- a/packages/reshaped/src/tests/themingWithDefinition.ts +++ b/packages/reshaped/src/tests/themingWithDefinition.ts @@ -1,6 +1,6 @@ /** * File importing theming client to test its bundle size */ -import * as themes from "@/themes/index"; +import * as themes from "@reshaped/theming"; console.log(themes); diff --git a/packages/reshaped/src/tests/themingWithoutDefinition.ts b/packages/reshaped/src/tests/themingWithoutDefinition.ts index 09640e7a..35a6b4e5 100644 --- a/packages/reshaped/src/tests/themingWithoutDefinition.ts +++ b/packages/reshaped/src/tests/themingWithoutDefinition.ts @@ -1,6 +1,6 @@ /** * File importing theming client to test its bundle size */ -import { getThemeCSS, generateThemeColors } from "@/themes/index"; +import { getThemeCSS, generateThemeColors } from "@reshaped/theming"; console.log({ getThemeCSS, generateThemeColors }); diff --git a/packages/reshaped/src/themes/_generator/definitions/figma.ts b/packages/reshaped/src/themes/_generator/definitions/figma.ts deleted file mode 100644 index bdd3ddfd..00000000 --- a/packages/reshaped/src/themes/_generator/definitions/figma.ts +++ /dev/null @@ -1,212 +0,0 @@ -import type { ThemeDefinition } from "../tokens/types"; - -const theme: Partial = { - fontFamily: { - title: { - family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif", - }, - body: { - family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif", - }, - monospace: { - family: "SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace", - }, - }, - - fontWeight: { - regular: { weight: 400 }, - medium: { weight: 500 }, - semibold: { weight: 600 }, - bold: { weight: 700 }, - extrabold: { weight: 800 }, - black: { weight: 900 }, - }, - - font: { - title1: { - fontSize: { px: 80 }, - lineHeight: { px: 84 }, - fontWeightToken: "semibold", - fontFamilyToken: "title", - }, - title2: { - fontSize: { px: 64 }, - lineHeight: { px: 68 }, - fontWeightToken: "semibold", - fontFamilyToken: "title", - }, - title3: { - fontSize: { px: 56 }, - lineHeight: { px: 60 }, - fontWeightToken: "semibold", - fontFamilyToken: "title", - }, - title4: { - fontSize: { px: 40 }, - lineHeight: { px: 44 }, - fontWeightToken: "semibold", - fontFamilyToken: "title", - }, - title5: { - fontSize: { px: 36 }, - lineHeight: { px: 40 }, - fontWeightToken: "semibold", - fontFamilyToken: "title", - }, - title6: { - fontSize: { px: 24 }, - lineHeight: { px: 28 }, - fontWeightToken: "semibold", - fontFamilyToken: "title", - }, - featured1: { - fontSize: { px: 22 }, - lineHeight: { px: 28 }, - fontFamilyToken: "body", - }, - featured2: { - fontSize: { px: 20 }, - lineHeight: { px: 28 }, - fontFamilyToken: "body", - }, - featured3: { - fontSize: { px: 18 }, - lineHeight: { px: 24 }, - fontFamilyToken: "body", - }, - body1: { - fontSize: { px: 14 }, - lineHeight: { px: 20 }, - fontFamilyToken: "body", - }, - body2: { - fontSize: { px: 13 }, - lineHeight: { px: 20 }, - fontFamilyToken: "body", - }, - body3: { - fontSize: { px: 11 }, - lineHeight: { px: 16 }, - fontFamilyToken: "body", - }, - caption1: { - fontSize: { px: 11 }, - lineHeight: { px: 16 }, - fontFamilyToken: "body", - }, - caption2: { - fontSize: { px: 10 }, - lineHeight: { px: 12 }, - fontFamilyToken: "body", - }, - }, - - unit: { - base: { px: 4 }, - radiusSmall: { px: 4 }, - radiusMedium: { px: 4 }, - radiusLarge: { px: 4 }, - }, - - color: { - foregroundNeutral: { hex: "#191919", hexDark: "#FFFFFF" }, - foregroundNeutralFaded: { hex: "#474747", hexDark: "#B2B2B2" }, - foregroundDisabled: { hex: "#B2B2B2", hexDark: "#656565" }, - foregroundPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" }, - foregroundPositive: { hex: "#009951", hexDark: "#79D297" }, - foregroundCritical: { hex: "#DC3412", hexDark: "#FCA397" }, - foregroundWarning: { hex: "#7b6305", hexDark: "#b4920c" }, - - backgroundNeutral: { hex: "#DFE2EA", hexDark: "#444444" }, - backgroundNeutralFaded: { hex: "#F5F5F5", hexDark: "#383838" }, - backgroundDisabled: { hex: "#e4e4e4", hexDark: "#474747" }, - backgroundDisabledFaded: { hex: "#F5F5F5", hexDark: "#3A3A3A" }, - backgroundPrimary: { hex: "#0D99FF", hexDark: "#0C8CE9" }, - backgroundPrimaryFaded: { hex: "#E5F4FF", hexDark: "#394360" }, - backgroundPositive: { hex: "#14AE5C", hexDark: "#198F51" }, - backgroundPositiveFaded: { hex: "#DAECDF", hexDark: "#3d5749" }, - backgroundCritical: { hex: "#F24822", hexDark: "#E03E1A" }, - backgroundCriticalFaded: { hex: "#FFE2E0", hexDark: "#60332A" }, - backgroundWarning: { hex: "#facc15", hexDark: "#f1c512" }, - backgroundWarningFaded: { hex: "#fffae9", hexDark: "#2c271f" }, - - borderNeutral: { hex: "#E6E6E6", hexDark: "#444444" }, - borderNeutralFaded: { hex: "#E6E6E6", hexDark: "#444444" }, - borderDisabled: { hex: "#E6E6E6", hexDark: "#3E3E3E" }, - borderPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" }, - borderPrimaryFaded: { hex: "#BDE3FF", hexDark: "#2A4D72" }, - borderPositive: { hex: "#009951", hexDark: "#79D297" }, - borderPositiveFaded: { hex: "#BBDDC6", hexDark: "#086338" }, - borderCritical: { hex: "#DC3412", hexDark: "#FCA397" }, - borderCriticalFaded: { hex: "#FFC7C2", hexDark: "#803226" }, - borderWarning: { hex: "#cfa90f", hexDark: "#b4920a" }, - borderWarningFaded: { hex: "#ece2c4", hexDark: "#453c1e" }, - - backgroundPage: { hex: "#FFFFFF", hexDark: "#2C2C2C" }, - backgroundPageFaded: { hex: "#FAFAFA", hexDark: "#1E1E1E" }, - backgroundElevationBase: { hex: "#FFFFFF", hexDark: "#2C2C2C" }, - backgroundElevationRaised: { hex: "#FFFFFF", hexDark: "#2C2C2C" }, - backgroundElevationOverlay: { hex: "#FFFFFF", hexDark: "#2C2C2C" }, - - onBackgroundPrimary: { hex: "#FFFFFF" }, - - brand: { hex: "#0D99FF" }, - black: { hex: "#000000" }, - white: { hex: "#FFFFFF" }, - }, - - duration: { - rapid: { ms: 100 }, - fast: { ms: 200 }, - medium: { ms: 300 }, - slow: { ms: 400 }, - }, - - easing: { - standard: { x1: 0.4, y1: 0, x2: 0.2, y2: 1 }, - accelerate: { x1: 0.4, y1: 0, x2: 1, y2: 1 }, - decelerate: { x1: 0, y1: 0, x2: 0.2, y2: 1 }, - }, - - shadow: { - raised: [ - { - offsetX: 0, - offsetY: 1, - blurRadius: 3, - colorToken: "black", - opacity: 0.15, - }, - ], - overlay: [ - { - offsetX: 0, - offsetY: 10, - blurRadius: 24, - colorToken: "black", - opacity: 0.1, - }, - { - offsetX: 0, - offsetY: 2, - blurRadius: 5, - colorToken: "black", - opacity: 0.04, - }, - ], - }, - - viewport: { - m: { minPx: 660 }, - l: { minPx: 900 }, - xl: { minPx: 1280 }, - }, - - zIndex: { - relative: { level: 10 }, - absolute: { level: 100 }, - fixed: { level: 200 }, - }, -}; - -export default theme; diff --git a/packages/reshaped/src/themes/_generator/definitions/reshaped.ts b/packages/reshaped/src/themes/_generator/definitions/reshaped.ts deleted file mode 100644 index ec0b7679..00000000 --- a/packages/reshaped/src/themes/_generator/definitions/reshaped.ts +++ /dev/null @@ -1,220 +0,0 @@ -import breakpoints from "@/constants/breakpoints"; - -import type { ThemeDefinition } from "../tokens/types"; - -const theme: ThemeDefinition = { - fontFamily: { - title: { - family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif", - }, - body: { - family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif", - }, - monospace: { - family: - "Geist Mono, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace", - }, - }, - - fontWeight: { - regular: { weight: 400 }, - medium: { weight: 500 }, - semibold: { weight: 600 }, - bold: { weight: 700 }, - extrabold: { weight: 800 }, - black: { weight: 900 }, - }, - - font: { - title1: { - fontSize: { px: 96 }, - lineHeight: { px: 100 }, - fontWeightToken: "extrabold", - fontFamilyToken: "title", - }, - title2: { - fontSize: { px: 80 }, - lineHeight: { px: 84 }, - fontWeightToken: "extrabold", - fontFamilyToken: "title", - }, - title3: { - fontSize: { px: 64 }, - lineHeight: { px: 68 }, - fontWeightToken: "extrabold", - fontFamilyToken: "title", - }, - title4: { - fontSize: { px: 56 }, - lineHeight: { px: 60 }, - fontWeightToken: "bold", - fontFamilyToken: "title", - }, - title5: { - fontSize: { px: 48 }, - lineHeight: { px: 52 }, - fontWeightToken: "bold", - fontFamilyToken: "title", - }, - title6: { - fontSize: { px: 36 }, - lineHeight: { px: 40 }, - fontWeightToken: "bold", - fontFamilyToken: "title", - }, - featured1: { - fontSize: { px: 32 }, - lineHeight: { px: 40 }, - fontFamilyToken: "body", - }, - featured2: { - fontSize: { px: 24 }, - lineHeight: { px: 32 }, - fontFamilyToken: "body", - }, - featured3: { - fontSize: { px: 20 }, - lineHeight: { px: 28 }, - fontFamilyToken: "body", - }, - body1: { - fontSize: { px: 18 }, - lineHeight: { px: 28 }, - fontFamilyToken: "body", - }, - body2: { - fontSize: { px: 16 }, - lineHeight: { px: 24 }, - fontFamilyToken: "body", - }, - body3: { - fontSize: { px: 14 }, - lineHeight: { px: 20 }, - fontFamilyToken: "body", - }, - caption1: { - fontSize: { px: 12 }, - lineHeight: { px: 16 }, - fontFamilyToken: "body", - }, - caption2: { - fontSize: { px: 10 }, - lineHeight: { px: 12 }, - fontFamilyToken: "body", - }, - }, - - unit: { - base: { px: 4 }, - }, - - radius: { - small: { px: 4 }, - medium: { px: 8 }, - large: { px: 12 }, - }, - - color: { - backgroundPrimary: { hex: "#5a58f2", hexDark: "#524fea" }, - backgroundPrimaryFaded: { hex: "#ecebfe", hexDark: "#252544" }, - borderPrimary: { hex: "#3b38ed", hexDark: "#8c8bf3" }, - borderPrimaryFaded: { hex: "#dedcfb", hexDark: "#323164" }, - foregroundPrimary: { hex: "#4f4cf0", hexDark: "#8b8af7" }, - backgroundCritical: { hex: "#e22c2c", hexDark: "#d02626" }, - backgroundCriticalFaded: { hex: "#fdeded", hexDark: "#3e1f1f" }, - borderCritical: { hex: "#bf2424", hexDark: "#f46969" }, - borderCriticalFaded: { hex: "#f3dad6", hexDark: "#5a2e29" }, - foregroundCritical: { hex: "#c42525", hexDark: "#f36a6a" }, - backgroundWarning: { hex: "#facc15", hexDark: "#f1c512" }, - backgroundWarningFaded: { hex: "#fffae9", hexDark: "#2c271f" }, - borderWarning: { hex: "#cfa90f", hexDark: "#b4920a" }, - borderWarningFaded: { hex: "#ece2c4", hexDark: "#453c1e" }, - foregroundWarning: { hex: "#7b6305", hexDark: "#b4920c" }, - backgroundPositive: { hex: "#118850", hexDark: "#14784a" }, - backgroundPositiveFaded: { hex: "#edfdf5", hexDark: "#1f2a23" }, - borderPositive: { hex: "#0c6e40", hexDark: "#21ab6b" }, - borderPositiveFaded: { hex: "#d2eddb", hexDark: "#264431" }, - foregroundPositive: { hex: "#0d7544", hexDark: "#18ab66" }, - backgroundNeutral: { hex: "#dfe2ea", hexDark: "#494f60" }, - backgroundNeutralFaded: { hex: "#f3f3f5", hexDark: "#222835" }, - borderNeutral: { hex: "#0000001f", hexDark: "#ffffff24" }, - borderNeutralFaded: { hex: "#00000014", hexDark: "#ffffff14" }, - foregroundNeutral: { hex: "#14181f", hexDark: "#eff1f5" }, - foregroundNeutralFaded: { hex: "#5b667e", hexDark: "#c0c6d6" }, - backgroundDisabled: { hex: "#eceef2", hexDark: "#1e212a" }, - backgroundDisabledFaded: { hex: "#f5f6f9", hexDark: "#171921" }, - borderDisabled: { hex: "#dfe2ea", hexDark: "#262a34" }, - foregroundDisabled: { hex: "#c6ccda", hexDark: "#434959" }, - backgroundElevationBase: { hex: "#ffffff", hexDark: "#15171e" }, - backgroundElevationRaised: { hex: "#ffffff", hexDark: "#191b23" }, - backgroundElevationOverlay: { hex: "#ffffff", hexDark: "#1c1f28" }, - backgroundPage: { hex: "#ffffff", hexDark: "#0f1116" }, - backgroundPageFaded: { hex: "#f9f9fb", hexDark: "#111319" }, - brand: { hex: "#5a58f2" }, - white: { hex: "#ffffff" }, - black: { hex: "#000000" }, - }, - - duration: { - rapid: { ms: 100 }, - fast: { ms: 200 }, - medium: { ms: 300 }, - slow: { ms: 400 }, - }, - - easing: { - standard: { x1: 0.4, y1: 0, x2: 0.2, y2: 1 }, - accelerate: { x1: 0.4, y1: 0, x2: 1, y2: 1 }, - decelerate: { x1: 0, y1: 0, x2: 0.2, y2: 1 }, - }, - - shadow: { - raised: [ - { - offsetX: 0, - offsetY: 1, - blurRadius: 5, - spreadRadius: -4, - colorToken: "black", - opacity: 0.5, - }, - { - offsetX: 0, - offsetY: 4, - blurRadius: 8, - colorToken: "black", - opacity: 0.05, - }, - ], - overlay: [ - { - offsetX: 0, - offsetY: 5, - blurRadius: 10, - colorToken: "black", - opacity: 0.05, - }, - { - offsetX: 0, - offsetY: 15, - blurRadius: 25, - colorToken: "black", - opacity: 0.07, - }, - ], - }, - - viewport: { - m: { minPx: breakpoints.m }, - l: { minPx: breakpoints.l }, - xl: { minPx: breakpoints.xl }, - }, - - zIndex: { - relative: { level: 10 }, - absolute: { level: 100 }, - fixed: { level: 200 }, - }, -}; - -export default theme; diff --git a/packages/reshaped/src/themes/_generator/definitions/slate.ts b/packages/reshaped/src/themes/_generator/definitions/slate.ts deleted file mode 100644 index 52e6c570..00000000 --- a/packages/reshaped/src/themes/_generator/definitions/slate.ts +++ /dev/null @@ -1,12 +0,0 @@ -import generateColors from "@/themes/_generator/tokens/color/utilities/generateColors"; - -import reshapedDefinition from "./reshaped"; - -import type { PassedThemeDefinition } from "@/themes/_generator/tokens/types"; - -const theme: PassedThemeDefinition = { - ...reshapedDefinition, - color: generateColors(), -}; - -export default theme; diff --git a/packages/reshaped/src/themes/_generator/tokens/fontFamily/fontFamily.types.ts b/packages/reshaped/src/themes/_generator/tokens/fontFamily/fontFamily.types.ts deleted file mode 100644 index d01e22f0..00000000 --- a/packages/reshaped/src/themes/_generator/tokens/fontFamily/fontFamily.types.ts +++ /dev/null @@ -1,2 +0,0 @@ -export type Name = "title" | "body" | "monospace"; -export type Token = { family: string }; diff --git a/packages/reshaped/src/themes/_generator/tokens/shadow/shadow.transforms.ts b/packages/reshaped/src/themes/_generator/tokens/shadow/shadow.transforms.ts deleted file mode 100644 index d4fe5ed9..00000000 --- a/packages/reshaped/src/themes/_generator/tokens/shadow/shadow.transforms.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { hexToOklch, oklchToRgb } from "../color/utilities/convert"; - -import type { Transformer } from "../types"; -import type * as T from "./shadow.types"; - -const transformToken: Transformer = (name, token, { theme }) => [ - { - name, - tokenType: "shadow", - type: "variable", - value: token - .map((value) => { - const blur = ` ${value.blurRadius || 0}px`; - const spread = ` ${value.spreadRadius || 0}px`; - const colorRef = theme.color[value.colorToken]; - const rgb = oklchToRgb(hexToOklch(colorRef?.hex || "#000000")); - const rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`; - const color = `rgba(${rgbString}, ${value.opacity || 1})`; - - return `${value.offsetX}px ${value.offsetY}px${blur}${spread} ${color}`; - }) - .join(", "), - }, -]; - -export default transformToken; diff --git a/packages/reshaped/src/themes/_generator/tokens/shadow/shadow.types.ts b/packages/reshaped/src/themes/_generator/tokens/shadow/shadow.types.ts deleted file mode 100644 index 0cd4441c..00000000 --- a/packages/reshaped/src/themes/_generator/tokens/shadow/shadow.types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type * as TColor from "../color/color.types"; - -export type Name = "raised" | "overlay"; - -export type Token = Array<{ - offsetX: number; - offsetY: number; - blurRadius?: number; - spreadRadius?: number; - colorToken: TColor.Name; - opacity: number; -}>; -export type ResolvedToken = Array & { color: TColor.Token }>; diff --git a/packages/reshaped/src/themes/figma/tailwind.css b/packages/reshaped/src/themes/figma/tailwind.css index bd950004..93abd3cc 100644 --- a/packages/reshaped/src/themes/figma/tailwind.css +++ b/packages/reshaped/src/themes/figma/tailwind.css @@ -74,6 +74,12 @@ --spacing-x8: var(--rs-unit-x8); --spacing-x9: var(--rs-unit-x9); --spacing-x10: var(--rs-unit-x10); +--shadow-border: var(--rs-shadow-border); +--shadow-border-raised: var(--rs-shadow-border-raised); +--shadow-border-overlay: var(--rs-shadow-border-overlay); +--shadow-border-faded: var(--rs-shadow-border-faded); +--shadow-border-faded-raised: var(--rs-shadow-border-faded-raised); +--shadow-border-faded-overlay: var(--rs-shadow-border-faded-overlay); --shadow-raised: var(--rs-shadow-raised); --shadow-overlay: var(--rs-shadow-overlay); --breakpoint-m: 660px; diff --git a/packages/reshaped/src/themes/figma/theme.css b/packages/reshaped/src/themes/figma/theme.css index 36ffe605..1ed6fd2e 100644 --- a/packages/reshaped/src/themes/figma/theme.css +++ b/packages/reshaped/src/themes/figma/theme.css @@ -1,6 +1,17 @@ [data-rs-theme~="figma"] { - --rs-font-family-title: Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif; + --rs-color-brand: #0D99FF; +--rs-color-white: #FFFFFF; +--rs-color-black: #000000; +--rs-color-on-background-primary: #FFFFFF; +--rs-color-on-background-critical: oklch(0 0 0); +--rs-color-on-background-warning: oklch(0 0 0); +--rs-color-on-background-positive: oklch(0 0 0); +--rs-color-on-brand: oklch(0 0 0); +--rs-color-rgb-white: 255, 255, 255; +--rs-color-rgb-black: 0, 0, 0; +--rs-font-family-headline: Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif; +--rs-font-family-title: Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif; --rs-font-family-body: Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif; --rs-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; --rs-font-weight-regular: 400; @@ -9,60 +20,53 @@ --rs-font-weight-bold: 700; --rs-font-weight-extrabold: 800; --rs-font-weight-black: 900; ---rs-font-size-title-1: 5rem; ---rs-line-height-title-1: 5.25rem; +--rs-font-size-headline-1: 5rem; +--rs-line-height-headline-1: 5.25rem; +--rs-font-family-headline-1: var(--rs-font-family-headline); +--rs-font-weight-headline-1: var(--rs-font-weight-bold); +--rs-letter-spacing-headline-1: normal; +--rs-font-size-headline-2: 4rem; +--rs-line-height-headline-2: 4.25rem; +--rs-font-family-headline-2: var(--rs-font-family-headline); +--rs-font-weight-headline-2: var(--rs-font-weight-bold); +--rs-letter-spacing-headline-2: normal; +--rs-font-size-headline-3: 3rem; +--rs-line-height-headline-3: 3.25rem; +--rs-font-family-headline-3: var(--rs-font-family-headline); +--rs-font-weight-headline-3: var(--rs-font-weight-bold); +--rs-letter-spacing-headline-3: normal; +--rs-font-size-title-1: 2rem; +--rs-line-height-title-1: 2.25rem; --rs-font-family-title-1: var(--rs-font-family-title); ---rs-font-weight-title-1: var(--rs-font-weight-semibold); --rs-letter-spacing-title-1: normal; ---rs-font-size-title-2: 4rem; ---rs-line-height-title-2: 4.25rem; +--rs-font-size-title-2: 1.75rem; +--rs-line-height-title-2: 2rem; --rs-font-family-title-2: var(--rs-font-family-title); ---rs-font-weight-title-2: var(--rs-font-weight-semibold); --rs-letter-spacing-title-2: normal; ---rs-font-size-title-3: 3.5rem; ---rs-line-height-title-3: 3.75rem; +--rs-font-size-title-3: 1.5rem; +--rs-line-height-title-3: 2rem; --rs-font-family-title-3: var(--rs-font-family-title); ---rs-font-weight-title-3: var(--rs-font-weight-semibold); --rs-letter-spacing-title-3: normal; ---rs-font-size-title-4: 2.5rem; ---rs-line-height-title-4: 2.75rem; +--rs-font-size-title-4: 1.375rem; +--rs-line-height-title-4: 1.75rem; --rs-font-family-title-4: var(--rs-font-family-title); ---rs-font-weight-title-4: var(--rs-font-weight-semibold); --rs-letter-spacing-title-4: normal; ---rs-font-size-title-5: 2.25rem; ---rs-line-height-title-5: 2.5rem; +--rs-font-size-title-5: 1.25rem; +--rs-line-height-title-5: 1.75rem; --rs-font-family-title-5: var(--rs-font-family-title); ---rs-font-weight-title-5: var(--rs-font-weight-semibold); --rs-letter-spacing-title-5: normal; ---rs-font-size-title-6: 1.5rem; ---rs-line-height-title-6: 1.75rem; +--rs-font-size-title-6: 1.125rem; +--rs-line-height-title-6: 1.5rem; --rs-font-family-title-6: var(--rs-font-family-title); ---rs-font-weight-title-6: var(--rs-font-weight-semibold); --rs-letter-spacing-title-6: normal; ---rs-font-size-featured-1: 1.375rem; ---rs-line-height-featured-1: 1.75rem; ---rs-font-family-featured-1: var(--rs-font-family-body); ---rs-letter-spacing-featured-1: normal; ---rs-font-size-featured-2: 1.25rem; ---rs-line-height-featured-2: 1.75rem; ---rs-font-family-featured-2: var(--rs-font-family-body); ---rs-letter-spacing-featured-2: normal; ---rs-font-size-featured-3: 1.125rem; ---rs-line-height-featured-3: 1.5rem; ---rs-font-family-featured-3: var(--rs-font-family-body); ---rs-letter-spacing-featured-3: normal; ---rs-font-size-body-1: 0.875rem; +--rs-font-size-body-1: 0.8125rem; --rs-line-height-body-1: 1.25rem; --rs-font-family-body-1: var(--rs-font-family-body); --rs-letter-spacing-body-1: normal; ---rs-font-size-body-2: 0.8125rem; ---rs-line-height-body-2: 1.25rem; +--rs-font-size-body-2: 0.6875rem; +--rs-line-height-body-2: 1rem; --rs-font-family-body-2: var(--rs-font-family-body); --rs-letter-spacing-body-2: normal; ---rs-font-size-body-3: 0.6875rem; ---rs-line-height-body-3: 1rem; ---rs-font-family-body-3: var(--rs-font-family-body); ---rs-letter-spacing-body-3: normal; --rs-font-size-caption-1: 0.6875rem; --rs-line-height-caption-1: 1rem; --rs-font-family-caption-1: var(--rs-font-family-body); @@ -85,28 +89,20 @@ --rs-unit-x8: 32px; --rs-unit-x9: 36px; --rs-unit-x10: 40px; +--rs-unit-x0_5: 2px; +--rs-unit-x1_5: 6px; --rs-radius-small: 4px; ---rs-radius-medium: 8px; +--rs-radius-medium: 6px; --rs-radius-large: 12px; ---rs-color-brand: #0D99FF; ---rs-color-white: #FFFFFF; ---rs-color-black: #000000; ---rs-color-on-background-primary: #FFFFFF; ---rs-color-on-background-critical: oklch(0 0 0); ---rs-color-on-background-warning: oklch(0 0 0); ---rs-color-on-background-positive: oklch(0 0 0); ---rs-color-on-brand: oklch(0 0 0); ---rs-color-rgb-white: 255, 255, 255; ---rs-color-rgb-black: 0, 0, 0; --rs-duration-rapid: 100ms; ---rs-duration-fast: 200ms; ---rs-duration-medium: 300ms; ---rs-duration-slow: 400ms; ---rs-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); +--rs-duration-fast: 150ms; +--rs-duration-medium: 200ms; +--rs-duration-slow: 300ms; +--rs-easing-standard: cubic-bezier(0.2, 0, 0, 1); --rs-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --rs-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); ---rs-shadow-raised: 0px 1px 3px 0px rgba(0, 0, 0, 0.15); ---rs-shadow-overlay: 0px 10px 24px 0px rgba(0, 0, 0, 0.1), 0px 2px 5px 0px rgba(0, 0, 0, 0.04); +--rs-shadow-raised: 0px 10px 12px -4px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.1); +--rs-shadow-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.1), 0px 16px 24px -6px rgba(0, 0, 0, 0.1), 0px 8px 12px -4px rgba(0, 0, 0, 0.1); --rs-viewport-m-min: 660; --rs-viewport-l-min: 900; --rs-viewport-xl-min: 1280; @@ -169,6 +165,12 @@ --rs-color-rgb-background-elevation-overlay: 255, 255, 255; --rs-color-rgb-background-page: 255, 255, 255; --rs-color-rgb-background-page-faded: 250.002, 250.002, 250.002; +--rs-shadow-border: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 6px 0px 1px rgba(0, 0, 0, 0.1); +--rs-shadow-border-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +--rs-shadow-border-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +--rs-shadow-border-faded: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 6px 0px 1px rgba(0, 0, 0, 0.08); +--rs-shadow-border-faded-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); +--rs-shadow-border-faded-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); } [data-rs-theme~="figma"][data-rs-color-mode="dark"] { @@ -225,5 +227,11 @@ --rs-color-rgb-background-elevation-overlay: 43.9875, 43.9875, 43.9875; --rs-color-rgb-background-page: 43.9875, 43.9875, 43.9875; --rs-color-rgb-background-page-faded: 29.988, 29.988, 29.988; +--rs-shadow-border: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 6px 0px 1px rgba(1, 1, 1, 0.1); +--rs-shadow-border-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); +--rs-shadow-border-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); +--rs-shadow-border-faded: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 6px 0px 1px rgba(1, 1, 1, 0.08); +--rs-shadow-border-faded-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); +--rs-shadow-border-faded-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); } \ No newline at end of file diff --git a/packages/reshaped/src/themes/figma/theme.json b/packages/reshaped/src/themes/figma/theme.json index 4c6dea46..285bd582 100644 --- a/packages/reshaped/src/themes/figma/theme.json +++ b/packages/reshaped/src/themes/figma/theme.json @@ -1,224 +1,4 @@ { - "fontFamily": { - "title": { - "family": "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif" - }, - "body": { - "family": "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif" - }, - "monospace": { - "family": "SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" - } - }, - "fontWeight": { - "regular": { - "weight": 400 - }, - "medium": { - "weight": 500 - }, - "semibold": { - "weight": 600 - }, - "bold": { - "weight": 700 - }, - "extrabold": { - "weight": 800 - }, - "black": { - "weight": 900 - } - }, - "font": { - "title1": { - "fontSize": { - "px": 80 - }, - "lineHeight": { - "px": 84 - }, - "fontWeightToken": "semibold", - "fontFamilyToken": "title" - }, - "title2": { - "fontSize": { - "px": 64 - }, - "lineHeight": { - "px": 68 - }, - "fontWeightToken": "semibold", - "fontFamilyToken": "title" - }, - "title3": { - "fontSize": { - "px": 56 - }, - "lineHeight": { - "px": 60 - }, - "fontWeightToken": "semibold", - "fontFamilyToken": "title" - }, - "title4": { - "fontSize": { - "px": 40 - }, - "lineHeight": { - "px": 44 - }, - "fontWeightToken": "semibold", - "fontFamilyToken": "title" - }, - "title5": { - "fontSize": { - "px": 36 - }, - "lineHeight": { - "px": 40 - }, - "fontWeightToken": "semibold", - "fontFamilyToken": "title" - }, - "title6": { - "fontSize": { - "px": 24 - }, - "lineHeight": { - "px": 28 - }, - "fontWeightToken": "semibold", - "fontFamilyToken": "title" - }, - "featured1": { - "fontSize": { - "px": 22 - }, - "lineHeight": { - "px": 28 - }, - "fontFamilyToken": "body" - }, - "featured2": { - "fontSize": { - "px": 20 - }, - "lineHeight": { - "px": 28 - }, - "fontFamilyToken": "body" - }, - "featured3": { - "fontSize": { - "px": 18 - }, - "lineHeight": { - "px": 24 - }, - "fontFamilyToken": "body" - }, - "body1": { - "fontSize": { - "px": 14 - }, - "lineHeight": { - "px": 20 - }, - "fontFamilyToken": "body" - }, - "body2": { - "fontSize": { - "px": 13 - }, - "lineHeight": { - "px": 20 - }, - "fontFamilyToken": "body" - }, - "body3": { - "fontSize": { - "px": 11 - }, - "lineHeight": { - "px": 16 - }, - "fontFamilyToken": "body" - }, - "caption1": { - "fontSize": { - "px": 11 - }, - "lineHeight": { - "px": 16 - }, - "fontFamilyToken": "body" - }, - "caption2": { - "fontSize": { - "px": 10 - }, - "lineHeight": { - "px": 12 - }, - "fontFamilyToken": "body" - } - }, - "unit": { - "base": { - "px": 4 - }, - "radiusSmall": { - "px": 4 - }, - "radiusMedium": { - "px": 4 - }, - "radiusLarge": { - "px": 4 - }, - "x1": { - "px": 4 - }, - "x2": { - "px": 8 - }, - "x3": { - "px": 12 - }, - "x4": { - "px": 16 - }, - "x5": { - "px": 20 - }, - "x6": { - "px": 24 - }, - "x7": { - "px": 28 - }, - "x8": { - "px": 32 - }, - "x9": { - "px": 36 - }, - "x10": { - "px": 40 - } - }, - "radius": { - "small": { - "px": 4 - }, - "medium": { - "px": 8 - }, - "large": { - "px": 12 - } - }, "color": { "backgroundPrimary": { "hex": "#0D99FF", @@ -511,25 +291,242 @@ "hex": "0, 0, 0" } }, + "fontFamily": { + "headline": { + "family": "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif" + }, + "title": { + "family": "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif" + }, + "body": { + "family": "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif" + }, + "monospace": { + "family": "SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" + } + }, + "fontWeight": { + "regular": { + "weight": 400 + }, + "medium": { + "weight": 500 + }, + "semibold": { + "weight": 600 + }, + "bold": { + "weight": 700 + }, + "extrabold": { + "weight": 800 + }, + "black": { + "weight": 900 + } + }, + "font": { + "headline1": { + "fontSize": { + "px": 80 + }, + "lineHeight": { + "px": 84 + }, + "fontWeightToken": "bold", + "fontFamilyToken": "headline" + }, + "headline2": { + "fontSize": { + "px": 64 + }, + "lineHeight": { + "px": 68 + }, + "fontWeightToken": "bold", + "fontFamilyToken": "headline" + }, + "headline3": { + "fontSize": { + "px": 48 + }, + "lineHeight": { + "px": 52 + }, + "fontWeightToken": "bold", + "fontFamilyToken": "headline" + }, + "title1": { + "fontSize": { + "px": 32 + }, + "lineHeight": { + "px": 36 + }, + "fontFamilyToken": "title" + }, + "title2": { + "fontSize": { + "px": 28 + }, + "lineHeight": { + "px": 32 + }, + "fontFamilyToken": "title" + }, + "title3": { + "fontSize": { + "px": 24 + }, + "lineHeight": { + "px": 32 + }, + "fontFamilyToken": "title" + }, + "title4": { + "fontSize": { + "px": 22 + }, + "lineHeight": { + "px": 28 + }, + "fontFamilyToken": "title" + }, + "title5": { + "fontSize": { + "px": 20 + }, + "lineHeight": { + "px": 28 + }, + "fontFamilyToken": "title" + }, + "title6": { + "fontSize": { + "px": 18 + }, + "lineHeight": { + "px": 24 + }, + "fontFamilyToken": "title" + }, + "body1": { + "fontSize": { + "px": 13 + }, + "lineHeight": { + "px": 20 + }, + "fontFamilyToken": "body" + }, + "body2": { + "fontSize": { + "px": 11 + }, + "lineHeight": { + "px": 16 + }, + "fontFamilyToken": "body" + }, + "caption1": { + "fontSize": { + "px": 11 + }, + "lineHeight": { + "px": 16 + }, + "fontFamilyToken": "body" + }, + "caption2": { + "fontSize": { + "px": 10 + }, + "lineHeight": { + "px": 12 + }, + "fontFamilyToken": "body" + } + }, + "unit": { + "base": { + "px": 4 + }, + "radiusSmall": { + "px": 4 + }, + "radiusMedium": { + "px": 4 + }, + "radiusLarge": { + "px": 4 + }, + "x1": { + "px": 4 + }, + "x2": { + "px": 8 + }, + "x3": { + "px": 12 + }, + "x4": { + "px": 16 + }, + "x5": { + "px": 20 + }, + "x6": { + "px": 24 + }, + "x7": { + "px": 28 + }, + "x8": { + "px": 32 + }, + "x9": { + "px": 36 + }, + "x10": { + "px": 40 + }, + "x0_5": { + "px": 2 + }, + "x1_5": { + "px": 6 + } + }, + "radius": { + "small": { + "px": 4 + }, + "medium": { + "px": 6 + }, + "large": { + "px": 12 + } + }, "duration": { "rapid": { "ms": 100 }, "fast": { - "ms": 200 + "ms": 150 }, "medium": { - "ms": 300 + "ms": 200 }, "slow": { - "ms": 400 + "ms": 300 } }, "easing": { "standard": { - "x1": 0.4, + "x1": 0.2, "y1": 0, - "x2": 0.2, + "x2": 0, "y2": 1 }, "accelerate": { @@ -546,31 +543,428 @@ } }, "shadow": { - "raised": [ - { - "offsetX": 0, - "offsetY": 1, - "blurRadius": 3, - "colorToken": "black", - "opacity": 0.15 + "border": { + "parts": [ + { + "offsetX": 0, + "offsetY": 1, + "blurRadius": 2, + "spreadRadius": -0.5, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 2, + "blurRadius": 3, + "spreadRadius": -1, + "colorToken": "black", + "opacity": 0.05 + }, + { + "offsetX": 0, + "offsetY": 6, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "black", + "opacity": 0.1 + } + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": -1, + "blurRadius": 2, + "spreadRadius": -0.5, + "colorToken": "white", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": -1, + "blurRadius": 3, + "spreadRadius": -1, + "colorToken": "white", + "opacity": 0.05 + }, + { + "offsetX": 0, + "offsetY": 6, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "white", + "opacity": 0.1 + } + ] + } + }, + "borderRaised": { + "parts": [ + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": 1, + "blurRadius": 2, + "spreadRadius": 0, + "colorToken": "black", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "black", + "opacity": 0.1 + } + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": -2, + "blurRadius": 2, + "spreadRadius": -1, + "colorToken": "white", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "white", + "opacity": 0.1 + } + ] } - ], - "overlay": [ - { - "offsetX": 0, - "offsetY": 10, - "blurRadius": 24, - "colorToken": "black", - "opacity": 0.1 - }, - { - "offsetX": 0, - "offsetY": 2, - "blurRadius": 5, - "colorToken": "black", - "opacity": 0.04 + }, + "borderOverlay": { + "parts": [ + { + "offsetX": 0, + "offsetY": 32, + "blurRadius": 48, + "spreadRadius": -8, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 16, + "blurRadius": 24, + "spreadRadius": -6, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "black", + "opacity": 0.1 + } + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": 32, + "blurRadius": 48, + "spreadRadius": -8, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 16, + "blurRadius": 24, + "spreadRadius": -6, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "white", + "opacity": 0.1 + } + ] + } + }, + "borderFaded": { + "parts": [ + { + "offsetX": 0, + "offsetY": 1, + "blurRadius": 2, + "spreadRadius": -0.5, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 2, + "blurRadius": 3, + "spreadRadius": -1, + "colorToken": "black", + "opacity": 0.05 + }, + { + "offsetX": 0, + "offsetY": 6, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "black", + "opacity": 0.08 + } + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": -1, + "blurRadius": 2, + "spreadRadius": -0.5, + "colorToken": "white", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": -1, + "blurRadius": 3, + "spreadRadius": -1, + "colorToken": "white", + "opacity": 0.05 + }, + { + "offsetX": 0, + "offsetY": 6, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "white", + "opacity": 0.08 + } + ] } - ] + }, + "borderFadedRaised": { + "parts": [ + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": 1, + "blurRadius": 2, + "spreadRadius": 0, + "colorToken": "black", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "black", + "opacity": 0.08 + } + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": -2, + "blurRadius": 2, + "spreadRadius": -1, + "colorToken": "white", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "white", + "opacity": 0.08 + } + ] + } + }, + "borderFadedOverlay": { + "parts": [ + { + "offsetX": 0, + "offsetY": 32, + "blurRadius": 48, + "spreadRadius": -8, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 16, + "blurRadius": 24, + "spreadRadius": -6, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "black", + "opacity": 0.08 + } + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": 32, + "blurRadius": 48, + "spreadRadius": -8, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 16, + "blurRadius": 24, + "spreadRadius": -6, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "white", + "opacity": 0.08 + } + ] + } + }, + "raised": { + "parts": [ + { + "offsetX": 0, + "offsetY": 10, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": 2, + "blurRadius": 4, + "colorToken": "black", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 1, + "blurRadius": 4, + "colorToken": "black", + "opacity": 0.1 + } + ] + }, + "overlay": { + "parts": [ + { + "offsetX": 0, + "offsetY": 32, + "blurRadius": 48, + "spreadRadius": -8, + "colorToken": "black", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 16, + "blurRadius": 24, + "spreadRadius": -6, + "colorToken": "black", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.1 + } + ] + } }, "viewport": { "m": { diff --git a/packages/reshaped/src/themes/fragments/twitter/tailwind.css b/packages/reshaped/src/themes/fragments/twitter/tailwind.css index c91e587a..83ad44c4 100644 --- a/packages/reshaped/src/themes/fragments/twitter/tailwind.css +++ b/packages/reshaped/src/themes/fragments/twitter/tailwind.css @@ -70,6 +70,12 @@ --spacing-x8: var(--rs-unit-x8); --spacing-x9: var(--rs-unit-x9); --spacing-x10: var(--rs-unit-x10); +--shadow-border: var(--rs-shadow-border); +--shadow-border-raised: var(--rs-shadow-border-raised); +--shadow-border-overlay: var(--rs-shadow-border-overlay); +--shadow-border-faded: var(--rs-shadow-border-faded); +--shadow-border-faded-raised: var(--rs-shadow-border-faded-raised); +--shadow-border-faded-overlay: var(--rs-shadow-border-faded-overlay); --shadow-raised: var(--rs-shadow-raised); --shadow-overlay: var(--rs-shadow-overlay); --breakpoint-m: 660px; diff --git a/packages/reshaped/src/themes/index.ts b/packages/reshaped/src/themes/index.ts deleted file mode 100644 index 308a10a1..00000000 --- a/packages/reshaped/src/themes/index.ts +++ /dev/null @@ -1,35 +0,0 @@ -import transform from "@/themes/_generator/transform"; - -import type { PassedThemeDefinition } from "@/themes/_generator/tokens/types"; -import type * as T from "@/themes/_generator/types"; - -/** - * Exported types - */ -export type { ThemeDefinition } from "@/themes/_generator/tokens/types"; -export type { Name as ColorTokenName } from "@/themes/_generator/tokens/color/color.types"; -export type { Name as DurationTokenName } from "@/themes/_generator/tokens/duration/duration.types"; -export type { Name as EasingTokenName } from "@/themes/_generator/tokens/easing/easing.types"; -export type { Name as FontTokenName } from "@/themes/_generator/tokens/font/font.types"; -export type { Name as FontFamilyTokenName } from "@/themes/_generator/tokens/fontFamily/fontFamily.types"; -export type { Name as FontWeightTokenName } from "@/themes/_generator/tokens/fontWeight/fontWeight.types"; -export type { Name as RadiusTokenName } from "@/themes/_generator/tokens/radius/radius.types"; -export type { Name as ShadowTokenName } from "@/themes/_generator/tokens/shadow/shadow.types"; -export type { GeneratedName as UnitTokenName } from "@/themes/_generator/tokens/unit/unit.types"; -export type { Name as ViewportTokenName } from "@/themes/_generator/tokens/viewport/viewport.types"; - -/** - * Exported runtime code - */ -export { default as baseThemeDefinition } from "@/themes/_generator/definitions/reshaped"; -export { default as generateThemeColors } from "@/themes/_generator/tokens/color/utilities/generateColors"; -export { default as transform } from "@/themes/_generator/transform"; - -export const getThemeCSS = ( - name: string, - definition: PassedThemeDefinition, - options?: T.PublicOptions["themeOptions"] -) => { - const code = transform(name, definition, { themeOptions: options, isFragment: true }); - return code.variables; -}; diff --git a/packages/reshaped/src/themes/reshaped/media.css b/packages/reshaped/src/themes/reshaped/media.css deleted file mode 100644 index 451f418f..00000000 --- a/packages/reshaped/src/themes/reshaped/media.css +++ /dev/null @@ -1,5 +0,0 @@ - - @custom-media --rs-viewport-m (min-width: 660px); -@custom-media --rs-viewport-l (min-width: 900px); -@custom-media --rs-viewport-xl (min-width: 1280px); -@custom-media --rs-viewport-s (max-width: 659px); diff --git a/packages/reshaped/src/themes/reshaped/theme.css b/packages/reshaped/src/themes/reshaped/theme.css deleted file mode 100644 index 0ba75203..00000000 --- a/packages/reshaped/src/themes/reshaped/theme.css +++ /dev/null @@ -1,226 +0,0 @@ - - [data-rs-theme~="reshaped"] { - --rs-font-family-title: Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif; ---rs-font-family-body: Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif; ---rs-font-family-monospace: Geist Mono, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; ---rs-font-weight-regular: 400; ---rs-font-weight-medium: 500; ---rs-font-weight-semibold: 600; ---rs-font-weight-bold: 700; ---rs-font-weight-extrabold: 800; ---rs-font-weight-black: 900; ---rs-font-size-title-1: 6rem; ---rs-line-height-title-1: 6.25rem; ---rs-font-family-title-1: var(--rs-font-family-title); ---rs-font-weight-title-1: var(--rs-font-weight-extrabold); ---rs-letter-spacing-title-1: normal; ---rs-font-size-title-2: 5rem; ---rs-line-height-title-2: 5.25rem; ---rs-font-family-title-2: var(--rs-font-family-title); ---rs-font-weight-title-2: var(--rs-font-weight-extrabold); ---rs-letter-spacing-title-2: normal; ---rs-font-size-title-3: 4rem; ---rs-line-height-title-3: 4.25rem; ---rs-font-family-title-3: var(--rs-font-family-title); ---rs-font-weight-title-3: var(--rs-font-weight-extrabold); ---rs-letter-spacing-title-3: normal; ---rs-font-size-title-4: 3.5rem; ---rs-line-height-title-4: 3.75rem; ---rs-font-family-title-4: var(--rs-font-family-title); ---rs-font-weight-title-4: var(--rs-font-weight-bold); ---rs-letter-spacing-title-4: normal; ---rs-font-size-title-5: 3rem; ---rs-line-height-title-5: 3.25rem; ---rs-font-family-title-5: var(--rs-font-family-title); ---rs-font-weight-title-5: var(--rs-font-weight-bold); ---rs-letter-spacing-title-5: normal; ---rs-font-size-title-6: 2.25rem; ---rs-line-height-title-6: 2.5rem; ---rs-font-family-title-6: var(--rs-font-family-title); ---rs-font-weight-title-6: var(--rs-font-weight-bold); ---rs-letter-spacing-title-6: normal; ---rs-font-size-featured-1: 2rem; ---rs-line-height-featured-1: 2.5rem; ---rs-font-family-featured-1: var(--rs-font-family-body); ---rs-letter-spacing-featured-1: normal; ---rs-font-size-featured-2: 1.5rem; ---rs-line-height-featured-2: 2rem; ---rs-font-family-featured-2: var(--rs-font-family-body); ---rs-letter-spacing-featured-2: normal; ---rs-font-size-featured-3: 1.25rem; ---rs-line-height-featured-3: 1.75rem; ---rs-font-family-featured-3: var(--rs-font-family-body); ---rs-letter-spacing-featured-3: normal; ---rs-font-size-body-1: 1.125rem; ---rs-line-height-body-1: 1.75rem; ---rs-font-family-body-1: var(--rs-font-family-body); ---rs-letter-spacing-body-1: normal; ---rs-font-size-body-2: 1rem; ---rs-line-height-body-2: 1.5rem; ---rs-font-family-body-2: var(--rs-font-family-body); ---rs-letter-spacing-body-2: normal; ---rs-font-size-body-3: 0.875rem; ---rs-line-height-body-3: 1.25rem; ---rs-font-family-body-3: var(--rs-font-family-body); ---rs-letter-spacing-body-3: normal; ---rs-font-size-caption-1: 0.75rem; ---rs-line-height-caption-1: 1rem; ---rs-font-family-caption-1: var(--rs-font-family-body); ---rs-letter-spacing-caption-1: normal; ---rs-font-size-caption-2: 0.625rem; ---rs-line-height-caption-2: 0.75rem; ---rs-font-family-caption-2: var(--rs-font-family-body); ---rs-letter-spacing-caption-2: normal; ---rs-unit-base: 4px; ---rs-unit-x1: 4px; ---rs-unit-x2: 8px; ---rs-unit-x3: 12px; ---rs-unit-x4: 16px; ---rs-unit-x5: 20px; ---rs-unit-x6: 24px; ---rs-unit-x7: 28px; ---rs-unit-x8: 32px; ---rs-unit-x9: 36px; ---rs-unit-x10: 40px; ---rs-radius-small: 4px; ---rs-radius-medium: 8px; ---rs-radius-large: 12px; ---rs-color-brand: #5a58f2; ---rs-color-white: #ffffff; ---rs-color-black: #000000; ---rs-color-on-background-primary: oklch(1 0 0); ---rs-color-on-background-critical: oklch(1 0 0); ---rs-color-on-background-warning: oklch(0 0 0); ---rs-color-on-background-positive: oklch(1 0 0); ---rs-color-on-brand: oklch(1 0 0); ---rs-color-rgb-white: 255, 255, 255; ---rs-color-rgb-black: 0, 0, 0; ---rs-duration-rapid: 100ms; ---rs-duration-fast: 200ms; ---rs-duration-medium: 300ms; ---rs-duration-slow: 400ms; ---rs-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); ---rs-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); ---rs-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); ---rs-shadow-raised: 0px 1px 5px -4px rgba(0, 0, 0, 0.5), 0px 4px 8px 0px rgba(0, 0, 0, 0.05); ---rs-shadow-overlay: 0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 15px 25px 0px rgba(0, 0, 0, 0.07); ---rs-viewport-m-min: 660; ---rs-viewport-l-min: 900; ---rs-viewport-xl-min: 1280; ---rs-z-index-relative: 10; ---rs-z-index-absolute: 100; ---rs-z-index-fixed: 200; - } - - [data-rs-theme~="reshaped"][data-rs-color-mode="light"] { - --rs-color-background-primary: #5a58f2; ---rs-color-background-primary-faded: #ecebfe; ---rs-color-border-primary: #3b38ed; ---rs-color-border-primary-faded: #dedcfb; ---rs-color-foreground-primary: #4f4cf0; ---rs-color-background-critical: #e22c2c; ---rs-color-background-critical-faded: #fdeded; ---rs-color-border-critical: #bf2424; ---rs-color-border-critical-faded: #f3dad6; ---rs-color-foreground-critical: #c42525; ---rs-color-background-warning: #facc15; ---rs-color-background-warning-faded: #fffae9; ---rs-color-border-warning: #cfa90f; ---rs-color-border-warning-faded: #ece2c4; ---rs-color-foreground-warning: #7b6305; ---rs-color-background-positive: #118850; ---rs-color-background-positive-faded: #edfdf5; ---rs-color-border-positive: #0c6e40; ---rs-color-border-positive-faded: #d2eddb; ---rs-color-foreground-positive: #0d7544; ---rs-color-background-neutral: #dfe2ea; ---rs-color-background-neutral-faded: #f3f3f5; ---rs-color-border-neutral: #0000001f; ---rs-color-border-neutral-faded: #00000014; ---rs-color-foreground-neutral: #14181f; ---rs-color-foreground-neutral-faded: #5b667e; ---rs-color-background-disabled: #eceef2; ---rs-color-background-disabled-faded: #f5f6f9; ---rs-color-border-disabled: #dfe2ea; ---rs-color-foreground-disabled: #c6ccda; ---rs-color-background-elevation-base: #ffffff; ---rs-color-background-elevation-raised: #ffffff; ---rs-color-background-elevation-overlay: #ffffff; ---rs-color-background-page: #ffffff; ---rs-color-background-page-faded: #f9f9fb; ---rs-color-rgb-background-primary: 89.98949999999999, 88.0005, 241.99499999999998; ---rs-color-rgb-background-primary-faded: 236.0025, 235.00799999999998, 254.00549999999998; ---rs-color-rgb-background-critical: 226.0065, 43.9875, 43.9875; ---rs-color-rgb-background-critical-faded: 253.011, 236.997, 236.997; ---rs-color-rgb-background-warning: 250.002, 204, 21.012; ---rs-color-rgb-background-warning-faded: 255, 250.002, 232.99349999999998; ---rs-color-rgb-background-positive: 17.008499999999998, 135.9915, 79.9935; ---rs-color-rgb-background-positive-faded: 236.997, 253.011, 245.004; ---rs-color-on-background-neutral: oklch(0 0 0); ---rs-color-rgb-background-neutral: 222.9975, 226.0065, 233.988; ---rs-color-rgb-background-neutral-faded: 242.9895, 242.9895, 245.004; ---rs-color-rgb-background-disabled: 236.0025, 237.9915, 241.99499999999998; ---rs-color-rgb-background-disabled-faded: 245.004, 245.9985, 249.00750000000002; ---rs-color-rgb-background-elevation-base: 255, 255, 255; ---rs-color-rgb-background-elevation-raised: 255, 255, 255; ---rs-color-rgb-background-elevation-overlay: 255, 255, 255; ---rs-color-rgb-background-page: 255, 255, 255; ---rs-color-rgb-background-page-faded: 249.00750000000002, 249.00750000000002, 250.9965; - } - - [data-rs-theme~="reshaped"][data-rs-color-mode="dark"] { - --rs-color-background-primary: #524fea; ---rs-color-background-primary-faded: #252544; ---rs-color-border-primary: #8c8bf3; ---rs-color-border-primary-faded: #323164; ---rs-color-foreground-primary: #8b8af7; ---rs-color-background-critical: #d02626; ---rs-color-background-critical-faded: #3e1f1f; ---rs-color-border-critical: #f46969; ---rs-color-border-critical-faded: #5a2e29; ---rs-color-foreground-critical: #f36a6a; ---rs-color-background-warning: #f1c512; ---rs-color-background-warning-faded: #2c271f; ---rs-color-border-warning: #b4920a; ---rs-color-border-warning-faded: #453c1e; ---rs-color-foreground-warning: #b4920c; ---rs-color-background-positive: #14784a; ---rs-color-background-positive-faded: #1f2a23; ---rs-color-border-positive: #21ab6b; ---rs-color-border-positive-faded: #264431; ---rs-color-foreground-positive: #18ab66; ---rs-color-background-neutral: #494f60; ---rs-color-background-neutral-faded: #222835; ---rs-color-border-neutral: #ffffff24; ---rs-color-border-neutral-faded: #ffffff14; ---rs-color-foreground-neutral: #eff1f5; ---rs-color-foreground-neutral-faded: #c0c6d6; ---rs-color-background-disabled: #1e212a; ---rs-color-background-disabled-faded: #171921; ---rs-color-border-disabled: #262a34; ---rs-color-foreground-disabled: #434959; ---rs-color-background-elevation-base: #15171e; ---rs-color-background-elevation-raised: #191b23; ---rs-color-background-elevation-overlay: #1c1f28; ---rs-color-background-page: #0f1116; ---rs-color-background-page-faded: #111319; ---rs-color-rgb-background-primary: 82.008, 78.99900000000001, 233.988; ---rs-color-rgb-background-primary-faded: 37.0005, 37.0005, 68.0085; ---rs-color-rgb-background-critical: 208.0035, 37.995, 37.995; ---rs-color-rgb-background-critical-faded: 61.990500000000004, 31.008, 31.008; ---rs-color-rgb-background-warning: 241.00050000000002, 196.98749999999998, 18.003; ---rs-color-rgb-background-warning-faded: 43.9875, 38.9895, 31.008; ---rs-color-rgb-background-positive: 19.992, 120.003, 74.001; ---rs-color-rgb-background-positive-faded: 31.008, 41.9985, 35.0115; ---rs-color-on-background-neutral: oklch(1 0 0); ---rs-color-rgb-background-neutral: 73.0065, 78.99900000000001, 96.00750000000001; ---rs-color-rgb-background-neutral-faded: 33.9915, 40.0095, 52.989000000000004; ---rs-color-rgb-background-disabled: 29.988, 32.997, 41.9985; ---rs-color-rgb-background-disabled-faded: 23.001, 24.990000000000002, 32.997; ---rs-color-rgb-background-elevation-base: 21.012, 23.001, 29.988; ---rs-color-rgb-background-elevation-raised: 24.990000000000002, 27.0045, 35.0115; ---rs-color-rgb-background-elevation-overlay: 27.999, 31.008, 40.0095; ---rs-color-rgb-background-page: 14.994, 17.008499999999998, 22.0065; ---rs-color-rgb-background-page-faded: 17.008499999999998, 18.9975, 24.990000000000002; - } - \ No newline at end of file diff --git a/packages/reshaped/src/themes/reshaped/theme.json b/packages/reshaped/src/themes/reshaped/theme.json deleted file mode 100644 index 71c226ae..00000000 --- a/packages/reshaped/src/themes/reshaped/theme.json +++ /dev/null @@ -1,610 +0,0 @@ -{ - "fontFamily": { - "title": { - "family": "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif" - }, - "body": { - "family": "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif" - }, - "monospace": { - "family": "Geist Mono, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" - } - }, - "fontWeight": { - "regular": { - "weight": 400 - }, - "medium": { - "weight": 500 - }, - "semibold": { - "weight": 600 - }, - "bold": { - "weight": 700 - }, - "extrabold": { - "weight": 800 - }, - "black": { - "weight": 900 - } - }, - "font": { - "title1": { - "fontSize": { - "px": 96 - }, - "lineHeight": { - "px": 100 - }, - "fontWeightToken": "extrabold", - "fontFamilyToken": "title" - }, - "title2": { - "fontSize": { - "px": 80 - }, - "lineHeight": { - "px": 84 - }, - "fontWeightToken": "extrabold", - "fontFamilyToken": "title" - }, - "title3": { - "fontSize": { - "px": 64 - }, - "lineHeight": { - "px": 68 - }, - "fontWeightToken": "extrabold", - "fontFamilyToken": "title" - }, - "title4": { - "fontSize": { - "px": 56 - }, - "lineHeight": { - "px": 60 - }, - "fontWeightToken": "bold", - "fontFamilyToken": "title" - }, - "title5": { - "fontSize": { - "px": 48 - }, - "lineHeight": { - "px": 52 - }, - "fontWeightToken": "bold", - "fontFamilyToken": "title" - }, - "title6": { - "fontSize": { - "px": 36 - }, - "lineHeight": { - "px": 40 - }, - "fontWeightToken": "bold", - "fontFamilyToken": "title" - }, - "featured1": { - "fontSize": { - "px": 32 - }, - "lineHeight": { - "px": 40 - }, - "fontFamilyToken": "body" - }, - "featured2": { - "fontSize": { - "px": 24 - }, - "lineHeight": { - "px": 32 - }, - "fontFamilyToken": "body" - }, - "featured3": { - "fontSize": { - "px": 20 - }, - "lineHeight": { - "px": 28 - }, - "fontFamilyToken": "body" - }, - "body1": { - "fontSize": { - "px": 18 - }, - "lineHeight": { - "px": 28 - }, - "fontFamilyToken": "body" - }, - "body2": { - "fontSize": { - "px": 16 - }, - "lineHeight": { - "px": 24 - }, - "fontFamilyToken": "body" - }, - "body3": { - "fontSize": { - "px": 14 - }, - "lineHeight": { - "px": 20 - }, - "fontFamilyToken": "body" - }, - "caption1": { - "fontSize": { - "px": 12 - }, - "lineHeight": { - "px": 16 - }, - "fontFamilyToken": "body" - }, - "caption2": { - "fontSize": { - "px": 10 - }, - "lineHeight": { - "px": 12 - }, - "fontFamilyToken": "body" - } - }, - "unit": { - "base": { - "px": 4 - }, - "x1": { - "px": 4 - }, - "x2": { - "px": 8 - }, - "x3": { - "px": 12 - }, - "x4": { - "px": 16 - }, - "x5": { - "px": 20 - }, - "x6": { - "px": 24 - }, - "x7": { - "px": 28 - }, - "x8": { - "px": 32 - }, - "x9": { - "px": 36 - }, - "x10": { - "px": 40 - } - }, - "radius": { - "small": { - "px": 4 - }, - "medium": { - "px": 8 - }, - "large": { - "px": 12 - } - }, - "color": { - "backgroundPrimary": { - "hex": "#5a58f2", - "hexDark": "#524fea" - }, - "backgroundPrimaryFaded": { - "hex": "#ecebfe", - "hexDark": "#252544" - }, - "borderPrimary": { - "hex": "#3b38ed", - "hexDark": "#8c8bf3" - }, - "borderPrimaryFaded": { - "hex": "#dedcfb", - "hexDark": "#323164" - }, - "foregroundPrimary": { - "hex": "#4f4cf0", - "hexDark": "#8b8af7" - }, - "backgroundCritical": { - "hex": "#e22c2c", - "hexDark": "#d02626" - }, - "backgroundCriticalFaded": { - "hex": "#fdeded", - "hexDark": "#3e1f1f" - }, - "borderCritical": { - "hex": "#bf2424", - "hexDark": "#f46969" - }, - "borderCriticalFaded": { - "hex": "#f3dad6", - "hexDark": "#5a2e29" - }, - "foregroundCritical": { - "hex": "#c42525", - "hexDark": "#f36a6a" - }, - "backgroundWarning": { - "hex": "#facc15", - "hexDark": "#f1c512" - }, - "backgroundWarningFaded": { - "hex": "#fffae9", - "hexDark": "#2c271f" - }, - "borderWarning": { - "hex": "#cfa90f", - "hexDark": "#b4920a" - }, - "borderWarningFaded": { - "hex": "#ece2c4", - "hexDark": "#453c1e" - }, - "foregroundWarning": { - "hex": "#7b6305", - "hexDark": "#b4920c" - }, - "backgroundPositive": { - "hex": "#118850", - "hexDark": "#14784a" - }, - "backgroundPositiveFaded": { - "hex": "#edfdf5", - "hexDark": "#1f2a23" - }, - "borderPositive": { - "hex": "#0c6e40", - "hexDark": "#21ab6b" - }, - "borderPositiveFaded": { - "hex": "#d2eddb", - "hexDark": "#264431" - }, - "foregroundPositive": { - "hex": "#0d7544", - "hexDark": "#18ab66" - }, - "backgroundNeutral": { - "hex": "#dfe2ea", - "hexDark": "#494f60" - }, - "backgroundNeutralFaded": { - "hex": "#f3f3f5", - "hexDark": "#222835" - }, - "borderNeutral": { - "hex": "#0000001f", - "hexDark": "#ffffff24" - }, - "borderNeutralFaded": { - "hex": "#00000014", - "hexDark": "#ffffff14" - }, - "foregroundNeutral": { - "hex": "#14181f", - "hexDark": "#eff1f5" - }, - "foregroundNeutralFaded": { - "hex": "#5b667e", - "hexDark": "#c0c6d6" - }, - "backgroundDisabled": { - "hex": "#eceef2", - "hexDark": "#1e212a" - }, - "backgroundDisabledFaded": { - "hex": "#f5f6f9", - "hexDark": "#171921" - }, - "borderDisabled": { - "hex": "#dfe2ea", - "hexDark": "#262a34" - }, - "foregroundDisabled": { - "hex": "#c6ccda", - "hexDark": "#434959" - }, - "backgroundElevationBase": { - "hex": "#ffffff", - "hexDark": "#15171e" - }, - "backgroundElevationRaised": { - "hex": "#ffffff", - "hexDark": "#191b23" - }, - "backgroundElevationOverlay": { - "hex": "#ffffff", - "hexDark": "#1c1f28" - }, - "backgroundPage": { - "hex": "#ffffff", - "hexDark": "#0f1116" - }, - "backgroundPageFaded": { - "hex": "#f9f9fb", - "hexDark": "#111319" - }, - "brand": { - "hex": "#5a58f2" - }, - "white": { - "hex": "#ffffff" - }, - "black": { - "hex": "#000000" - }, - "onBackgroundPrimary": { - "oklch": { - "mode": "oklch", - "l": 1.0000000000000002, - "c": 0 - }, - "oklchDark": { - "mode": "oklch", - "l": 1.0000000000000002, - "c": 0 - }, - "hex": "#ffffff", - "hexDark": "#ffffff" - }, - "rgbBackgroundPrimary": { - "hex": "89.98949999999999, 88.0005, 241.99499999999998", - "hexDark": "82.008, 78.99900000000001, 233.988" - }, - "rgbBackgroundPrimaryFaded": { - "hex": "236.0025, 235.00799999999998, 254.00549999999998", - "hexDark": "37.0005, 37.0005, 68.0085" - }, - "onBackgroundCritical": { - "oklch": { - "mode": "oklch", - "l": 1.0000000000000002, - "c": 0 - }, - "oklchDark": { - "mode": "oklch", - "l": 1.0000000000000002, - "c": 0 - }, - "hex": "#ffffff", - "hexDark": "#ffffff" - }, - "rgbBackgroundCritical": { - "hex": "226.0065, 43.9875, 43.9875", - "hexDark": "208.0035, 37.995, 37.995" - }, - "rgbBackgroundCriticalFaded": { - "hex": "253.011, 236.997, 236.997", - "hexDark": "61.990500000000004, 31.008, 31.008" - }, - "onBackgroundWarning": { - "oklch": { - "mode": "oklch", - "l": 0, - "c": 0 - }, - "oklchDark": { - "mode": "oklch", - "l": 0, - "c": 0 - }, - "hex": "#000000", - "hexDark": "#000000" - }, - "rgbBackgroundWarning": { - "hex": "250.002, 204, 21.012", - "hexDark": "241.00050000000002, 196.98749999999998, 18.003" - }, - "rgbBackgroundWarningFaded": { - "hex": "255, 250.002, 232.99349999999998", - "hexDark": "43.9875, 38.9895, 31.008" - }, - "onBackgroundPositive": { - "oklch": { - "mode": "oklch", - "l": 1.0000000000000002, - "c": 0 - }, - "oklchDark": { - "mode": "oklch", - "l": 1.0000000000000002, - "c": 0 - }, - "hex": "#ffffff", - "hexDark": "#ffffff" - }, - "rgbBackgroundPositive": { - "hex": "17.008499999999998, 135.9915, 79.9935", - "hexDark": "19.992, 120.003, 74.001" - }, - "rgbBackgroundPositiveFaded": { - "hex": "236.997, 253.011, 245.004", - "hexDark": "31.008, 41.9985, 35.0115" - }, - "onBackgroundNeutral": { - "oklch": { - "mode": "oklch", - "l": 0, - "c": 0 - }, - "oklchDark": { - "mode": "oklch", - "l": 1.0000000000000002, - "c": 0 - }, - "hex": "#000000", - "hexDark": "#ffffff" - }, - "rgbBackgroundNeutral": { - "hex": "222.9975, 226.0065, 233.988", - "hexDark": "73.0065, 78.99900000000001, 96.00750000000001" - }, - "rgbBackgroundNeutralFaded": { - "hex": "242.9895, 242.9895, 245.004", - "hexDark": "33.9915, 40.0095, 52.989000000000004" - }, - "rgbBackgroundDisabled": { - "hex": "236.0025, 237.9915, 241.99499999999998", - "hexDark": "29.988, 32.997, 41.9985" - }, - "rgbBackgroundDisabledFaded": { - "hex": "245.004, 245.9985, 249.00750000000002", - "hexDark": "23.001, 24.990000000000002, 32.997" - }, - "rgbBackgroundElevationBase": { - "hex": "255, 255, 255", - "hexDark": "21.012, 23.001, 29.988" - }, - "rgbBackgroundElevationRaised": { - "hex": "255, 255, 255", - "hexDark": "24.990000000000002, 27.0045, 35.0115" - }, - "rgbBackgroundElevationOverlay": { - "hex": "255, 255, 255", - "hexDark": "27.999, 31.008, 40.0095" - }, - "rgbBackgroundPage": { - "hex": "255, 255, 255", - "hexDark": "14.994, 17.008499999999998, 22.0065" - }, - "rgbBackgroundPageFaded": { - "hex": "249.00750000000002, 249.00750000000002, 250.9965", - "hexDark": "17.008499999999998, 18.9975, 24.990000000000002" - }, - "onBrand": { - "oklch": { - "mode": "oklch", - "l": 1.0000000000000002, - "c": 0 - }, - "hex": "#ffffff" - }, - "rgbWhite": { - "hex": "255, 255, 255" - }, - "rgbBlack": { - "hex": "0, 0, 0" - } - }, - "duration": { - "rapid": { - "ms": 100 - }, - "fast": { - "ms": 200 - }, - "medium": { - "ms": 300 - }, - "slow": { - "ms": 400 - } - }, - "easing": { - "standard": { - "x1": 0.4, - "y1": 0, - "x2": 0.2, - "y2": 1 - }, - "accelerate": { - "x1": 0.4, - "y1": 0, - "x2": 1, - "y2": 1 - }, - "decelerate": { - "x1": 0, - "y1": 0, - "x2": 0.2, - "y2": 1 - } - }, - "shadow": { - "raised": [ - { - "offsetX": 0, - "offsetY": 1, - "blurRadius": 5, - "spreadRadius": -4, - "colorToken": "black", - "opacity": 0.5 - }, - { - "offsetX": 0, - "offsetY": 4, - "blurRadius": 8, - "colorToken": "black", - "opacity": 0.05 - } - ], - "overlay": [ - { - "offsetX": 0, - "offsetY": 5, - "blurRadius": 10, - "colorToken": "black", - "opacity": 0.05 - }, - { - "offsetX": 0, - "offsetY": 15, - "blurRadius": 25, - "colorToken": "black", - "opacity": 0.07 - } - ] - }, - "viewport": { - "m": { - "minPx": 660 - }, - "l": { - "minPx": 900 - }, - "xl": { - "minPx": 1280 - }, - "s": { - "maxPx": 659 - } - }, - "zIndex": { - "relative": { - "level": 10 - }, - "absolute": { - "level": 100 - }, - "fixed": { - "level": 200 - } - } -} \ No newline at end of file diff --git a/packages/reshaped/src/themes/slate/tailwind.css b/packages/reshaped/src/themes/slate/tailwind.css index bd950004..93abd3cc 100644 --- a/packages/reshaped/src/themes/slate/tailwind.css +++ b/packages/reshaped/src/themes/slate/tailwind.css @@ -74,6 +74,12 @@ --spacing-x8: var(--rs-unit-x8); --spacing-x9: var(--rs-unit-x9); --spacing-x10: var(--rs-unit-x10); +--shadow-border: var(--rs-shadow-border); +--shadow-border-raised: var(--rs-shadow-border-raised); +--shadow-border-overlay: var(--rs-shadow-border-overlay); +--shadow-border-faded: var(--rs-shadow-border-faded); +--shadow-border-faded-raised: var(--rs-shadow-border-faded-raised); +--shadow-border-faded-overlay: var(--rs-shadow-border-faded-overlay); --shadow-raised: var(--rs-shadow-raised); --shadow-overlay: var(--rs-shadow-overlay); --breakpoint-m: 660px; diff --git a/packages/reshaped/src/themes/slate/theme.css b/packages/reshaped/src/themes/slate/theme.css index 201b2c37..b4f02cb1 100644 --- a/packages/reshaped/src/themes/slate/theme.css +++ b/packages/reshaped/src/themes/slate/theme.css @@ -1,6 +1,17 @@ [data-rs-theme~="slate"] { - --rs-font-family-title: Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif; + --rs-color-brand: oklch(0.55 0.24 262.67); +--rs-color-white: oklch(1 0 0); +--rs-color-black: oklch(0 0 0); +--rs-color-on-background-primary: oklch(1 0 0); +--rs-color-on-background-critical: oklch(1 0 0); +--rs-color-on-background-warning: oklch(0 0 0); +--rs-color-on-background-positive: oklch(1 0 0); +--rs-color-on-brand: oklch(1 0 0); +--rs-color-rgb-white: 255, 255, 255; +--rs-color-rgb-black: 0, 0, 0; +--rs-font-family-headline: Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif; +--rs-font-family-title: Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif; --rs-font-family-body: Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif; --rs-font-family-monospace: Geist Mono, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; --rs-font-weight-regular: 400; @@ -9,60 +20,53 @@ --rs-font-weight-bold: 700; --rs-font-weight-extrabold: 800; --rs-font-weight-black: 900; ---rs-font-size-title-1: 6rem; ---rs-line-height-title-1: 6.25rem; +--rs-font-size-headline-1: 5rem; +--rs-line-height-headline-1: 5.25rem; +--rs-font-family-headline-1: var(--rs-font-family-headline); +--rs-font-weight-headline-1: var(--rs-font-weight-bold); +--rs-letter-spacing-headline-1: normal; +--rs-font-size-headline-2: 4rem; +--rs-line-height-headline-2: 4.25rem; +--rs-font-family-headline-2: var(--rs-font-family-headline); +--rs-font-weight-headline-2: var(--rs-font-weight-bold); +--rs-letter-spacing-headline-2: normal; +--rs-font-size-headline-3: 3rem; +--rs-line-height-headline-3: 3.25rem; +--rs-font-family-headline-3: var(--rs-font-family-headline); +--rs-font-weight-headline-3: var(--rs-font-weight-bold); +--rs-letter-spacing-headline-3: normal; +--rs-font-size-title-1: 2rem; +--rs-line-height-title-1: 2.25rem; --rs-font-family-title-1: var(--rs-font-family-title); ---rs-font-weight-title-1: var(--rs-font-weight-extrabold); --rs-letter-spacing-title-1: normal; ---rs-font-size-title-2: 5rem; ---rs-line-height-title-2: 5.25rem; +--rs-font-size-title-2: 1.75rem; +--rs-line-height-title-2: 2rem; --rs-font-family-title-2: var(--rs-font-family-title); ---rs-font-weight-title-2: var(--rs-font-weight-extrabold); --rs-letter-spacing-title-2: normal; ---rs-font-size-title-3: 4rem; ---rs-line-height-title-3: 4.25rem; +--rs-font-size-title-3: 1.5rem; +--rs-line-height-title-3: 2rem; --rs-font-family-title-3: var(--rs-font-family-title); ---rs-font-weight-title-3: var(--rs-font-weight-extrabold); --rs-letter-spacing-title-3: normal; ---rs-font-size-title-4: 3.5rem; ---rs-line-height-title-4: 3.75rem; +--rs-font-size-title-4: 1.375rem; +--rs-line-height-title-4: 1.75rem; --rs-font-family-title-4: var(--rs-font-family-title); ---rs-font-weight-title-4: var(--rs-font-weight-bold); --rs-letter-spacing-title-4: normal; ---rs-font-size-title-5: 3rem; ---rs-line-height-title-5: 3.25rem; +--rs-font-size-title-5: 1.25rem; +--rs-line-height-title-5: 1.75rem; --rs-font-family-title-5: var(--rs-font-family-title); ---rs-font-weight-title-5: var(--rs-font-weight-bold); --rs-letter-spacing-title-5: normal; ---rs-font-size-title-6: 2.25rem; ---rs-line-height-title-6: 2.5rem; +--rs-font-size-title-6: 1.125rem; +--rs-line-height-title-6: 1.5rem; --rs-font-family-title-6: var(--rs-font-family-title); ---rs-font-weight-title-6: var(--rs-font-weight-bold); --rs-letter-spacing-title-6: normal; ---rs-font-size-featured-1: 2rem; ---rs-line-height-featured-1: 2.5rem; ---rs-font-family-featured-1: var(--rs-font-family-body); ---rs-letter-spacing-featured-1: normal; ---rs-font-size-featured-2: 1.5rem; ---rs-line-height-featured-2: 2rem; ---rs-font-family-featured-2: var(--rs-font-family-body); ---rs-letter-spacing-featured-2: normal; ---rs-font-size-featured-3: 1.25rem; ---rs-line-height-featured-3: 1.75rem; ---rs-font-family-featured-3: var(--rs-font-family-body); ---rs-letter-spacing-featured-3: normal; ---rs-font-size-body-1: 1.125rem; ---rs-line-height-body-1: 1.75rem; +--rs-font-size-body-1: 1rem; +--rs-line-height-body-1: 1.5rem; --rs-font-family-body-1: var(--rs-font-family-body); --rs-letter-spacing-body-1: normal; ---rs-font-size-body-2: 1rem; ---rs-line-height-body-2: 1.5rem; +--rs-font-size-body-2: 0.875rem; +--rs-line-height-body-2: 1.25rem; --rs-font-family-body-2: var(--rs-font-family-body); --rs-letter-spacing-body-2: normal; ---rs-font-size-body-3: 0.875rem; ---rs-line-height-body-3: 1.25rem; ---rs-font-family-body-3: var(--rs-font-family-body); ---rs-letter-spacing-body-3: normal; --rs-font-size-caption-1: 0.75rem; --rs-line-height-caption-1: 1rem; --rs-font-family-caption-1: var(--rs-font-family-body); @@ -82,28 +86,20 @@ --rs-unit-x8: 32px; --rs-unit-x9: 36px; --rs-unit-x10: 40px; +--rs-unit-x0_5: 2px; +--rs-unit-x1_5: 6px; --rs-radius-small: 4px; ---rs-radius-medium: 8px; +--rs-radius-medium: 6px; --rs-radius-large: 12px; ---rs-color-brand: oklch(0.55 0.24 262.67); ---rs-color-white: oklch(1 0 0); ---rs-color-black: oklch(0 0 0); ---rs-color-on-background-primary: oklch(1 0 0); ---rs-color-on-background-critical: oklch(1 0 0); ---rs-color-on-background-warning: oklch(0 0 0); ---rs-color-on-background-positive: oklch(1 0 0); ---rs-color-on-brand: oklch(1 0 0); ---rs-color-rgb-white: 255, 255, 255; ---rs-color-rgb-black: 0, 0, 0; --rs-duration-rapid: 100ms; ---rs-duration-fast: 200ms; ---rs-duration-medium: 300ms; ---rs-duration-slow: 400ms; ---rs-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); +--rs-duration-fast: 150ms; +--rs-duration-medium: 200ms; +--rs-duration-slow: 300ms; +--rs-easing-standard: cubic-bezier(0.2, 0, 0, 1); --rs-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --rs-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); ---rs-shadow-raised: 0px 1px 5px -4px rgba(0, 0, 0, 0.5), 0px 4px 8px 0px rgba(0, 0, 0, 0.05); ---rs-shadow-overlay: 0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 15px 25px 0px rgba(0, 0, 0, 0.07); +--rs-shadow-raised: 0px 10px 12px -4px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.1); +--rs-shadow-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.1), 0px 16px 24px -6px rgba(0, 0, 0, 0.1), 0px 8px 12px -4px rgba(0, 0, 0, 0.1); --rs-viewport-m-min: 660; --rs-viewport-l-min: 900; --rs-viewport-xl-min: 1280; @@ -166,6 +162,12 @@ --rs-color-rgb-background-elevation-overlay: 255, 255, 255; --rs-color-rgb-background-page: 255, 255, 255; --rs-color-rgb-background-page-faded: 244.953, 244.953, 244.953; +--rs-shadow-border: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 6px 0px 1px rgba(0, 0, 0, 0.1); +--rs-shadow-border-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +--rs-shadow-border-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +--rs-shadow-border-faded: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 6px 0px 1px rgba(0, 0, 0, 0.08); +--rs-shadow-border-faded-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); +--rs-shadow-border-faded-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); } [data-rs-theme~="slate"][data-rs-color-mode="dark"] { @@ -222,5 +224,11 @@ --rs-color-rgb-background-elevation-overlay: 26.52, 26.52, 26.52; --rs-color-rgb-background-page: 13.209, 13.209, 13.209; --rs-color-rgb-background-page-faded: 17.5185, 17.5185, 17.5185; +--rs-shadow-border: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 6px 0px 1px rgba(1, 1, 1, 0.1); +--rs-shadow-border-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); +--rs-shadow-border-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); +--rs-shadow-border-faded: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 6px 0px 1px rgba(1, 1, 1, 0.08); +--rs-shadow-border-faded-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); +--rs-shadow-border-faded-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); } \ No newline at end of file diff --git a/packages/reshaped/src/themes/slate/theme.json b/packages/reshaped/src/themes/slate/theme.json index a052b40d..4e8bcc55 100644 --- a/packages/reshaped/src/themes/slate/theme.json +++ b/packages/reshaped/src/themes/slate/theme.json @@ -1,215 +1,4 @@ { - "fontFamily": { - "title": { - "family": "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif" - }, - "body": { - "family": "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif" - }, - "monospace": { - "family": "Geist Mono, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" - } - }, - "fontWeight": { - "regular": { - "weight": 400 - }, - "medium": { - "weight": 500 - }, - "semibold": { - "weight": 600 - }, - "bold": { - "weight": 700 - }, - "extrabold": { - "weight": 800 - }, - "black": { - "weight": 900 - } - }, - "font": { - "title1": { - "fontSize": { - "px": 96 - }, - "lineHeight": { - "px": 100 - }, - "fontWeightToken": "extrabold", - "fontFamilyToken": "title" - }, - "title2": { - "fontSize": { - "px": 80 - }, - "lineHeight": { - "px": 84 - }, - "fontWeightToken": "extrabold", - "fontFamilyToken": "title" - }, - "title3": { - "fontSize": { - "px": 64 - }, - "lineHeight": { - "px": 68 - }, - "fontWeightToken": "extrabold", - "fontFamilyToken": "title" - }, - "title4": { - "fontSize": { - "px": 56 - }, - "lineHeight": { - "px": 60 - }, - "fontWeightToken": "bold", - "fontFamilyToken": "title" - }, - "title5": { - "fontSize": { - "px": 48 - }, - "lineHeight": { - "px": 52 - }, - "fontWeightToken": "bold", - "fontFamilyToken": "title" - }, - "title6": { - "fontSize": { - "px": 36 - }, - "lineHeight": { - "px": 40 - }, - "fontWeightToken": "bold", - "fontFamilyToken": "title" - }, - "featured1": { - "fontSize": { - "px": 32 - }, - "lineHeight": { - "px": 40 - }, - "fontFamilyToken": "body" - }, - "featured2": { - "fontSize": { - "px": 24 - }, - "lineHeight": { - "px": 32 - }, - "fontFamilyToken": "body" - }, - "featured3": { - "fontSize": { - "px": 20 - }, - "lineHeight": { - "px": 28 - }, - "fontFamilyToken": "body" - }, - "body1": { - "fontSize": { - "px": 18 - }, - "lineHeight": { - "px": 28 - }, - "fontFamilyToken": "body" - }, - "body2": { - "fontSize": { - "px": 16 - }, - "lineHeight": { - "px": 24 - }, - "fontFamilyToken": "body" - }, - "body3": { - "fontSize": { - "px": 14 - }, - "lineHeight": { - "px": 20 - }, - "fontFamilyToken": "body" - }, - "caption1": { - "fontSize": { - "px": 12 - }, - "lineHeight": { - "px": 16 - }, - "fontFamilyToken": "body" - }, - "caption2": { - "fontSize": { - "px": 10 - }, - "lineHeight": { - "px": 12 - }, - "fontFamilyToken": "body" - } - }, - "unit": { - "base": { - "px": 4 - }, - "x1": { - "px": 4 - }, - "x2": { - "px": 8 - }, - "x3": { - "px": 12 - }, - "x4": { - "px": 16 - }, - "x5": { - "px": 20 - }, - "x6": { - "px": 24 - }, - "x7": { - "px": 28 - }, - "x8": { - "px": 32 - }, - "x9": { - "px": 36 - }, - "x10": { - "px": 40 - } - }, - "radius": { - "small": { - "px": 4 - }, - "medium": { - "px": 8 - }, - "large": { - "px": 12 - } - }, "color": { "backgroundPrimary": { "oklch": { @@ -954,25 +743,233 @@ "hex": "0, 0, 0" } }, + "fontFamily": { + "headline": { + "family": "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif" + }, + "title": { + "family": "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif" + }, + "body": { + "family": "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif" + }, + "monospace": { + "family": "Geist Mono, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" + } + }, + "fontWeight": { + "regular": { + "weight": 400 + }, + "medium": { + "weight": 500 + }, + "semibold": { + "weight": 600 + }, + "bold": { + "weight": 700 + }, + "extrabold": { + "weight": 800 + }, + "black": { + "weight": 900 + } + }, + "font": { + "headline1": { + "fontSize": { + "px": 80 + }, + "lineHeight": { + "px": 84 + }, + "fontWeightToken": "bold", + "fontFamilyToken": "headline" + }, + "headline2": { + "fontSize": { + "px": 64 + }, + "lineHeight": { + "px": 68 + }, + "fontWeightToken": "bold", + "fontFamilyToken": "headline" + }, + "headline3": { + "fontSize": { + "px": 48 + }, + "lineHeight": { + "px": 52 + }, + "fontWeightToken": "bold", + "fontFamilyToken": "headline" + }, + "title1": { + "fontSize": { + "px": 32 + }, + "lineHeight": { + "px": 36 + }, + "fontFamilyToken": "title" + }, + "title2": { + "fontSize": { + "px": 28 + }, + "lineHeight": { + "px": 32 + }, + "fontFamilyToken": "title" + }, + "title3": { + "fontSize": { + "px": 24 + }, + "lineHeight": { + "px": 32 + }, + "fontFamilyToken": "title" + }, + "title4": { + "fontSize": { + "px": 22 + }, + "lineHeight": { + "px": 28 + }, + "fontFamilyToken": "title" + }, + "title5": { + "fontSize": { + "px": 20 + }, + "lineHeight": { + "px": 28 + }, + "fontFamilyToken": "title" + }, + "title6": { + "fontSize": { + "px": 18 + }, + "lineHeight": { + "px": 24 + }, + "fontFamilyToken": "title" + }, + "body1": { + "fontSize": { + "px": 16 + }, + "lineHeight": { + "px": 24 + }, + "fontFamilyToken": "body" + }, + "body2": { + "fontSize": { + "px": 14 + }, + "lineHeight": { + "px": 20 + }, + "fontFamilyToken": "body" + }, + "caption1": { + "fontSize": { + "px": 12 + }, + "lineHeight": { + "px": 16 + }, + "fontFamilyToken": "body" + }, + "caption2": { + "fontSize": { + "px": 10 + }, + "lineHeight": { + "px": 12 + }, + "fontFamilyToken": "body" + } + }, + "unit": { + "base": { + "px": 4 + }, + "x1": { + "px": 4 + }, + "x2": { + "px": 8 + }, + "x3": { + "px": 12 + }, + "x4": { + "px": 16 + }, + "x5": { + "px": 20 + }, + "x6": { + "px": 24 + }, + "x7": { + "px": 28 + }, + "x8": { + "px": 32 + }, + "x9": { + "px": 36 + }, + "x10": { + "px": 40 + }, + "x0_5": { + "px": 2 + }, + "x1_5": { + "px": 6 + } + }, + "radius": { + "small": { + "px": 4 + }, + "medium": { + "px": 6 + }, + "large": { + "px": 12 + } + }, "duration": { "rapid": { "ms": 100 }, "fast": { - "ms": 200 + "ms": 150 }, "medium": { - "ms": 300 + "ms": 200 }, "slow": { - "ms": 400 + "ms": 300 } }, "easing": { "standard": { - "x1": 0.4, + "x1": 0.2, "y1": 0, - "x2": 0.2, + "x2": 0, "y2": 1 }, "accelerate": { @@ -989,39 +986,428 @@ } }, "shadow": { - "raised": [ - { - "offsetX": 0, - "offsetY": 1, - "blurRadius": 5, - "spreadRadius": -4, - "colorToken": "black", - "opacity": 0.5 - }, - { - "offsetX": 0, - "offsetY": 4, - "blurRadius": 8, - "colorToken": "black", - "opacity": 0.05 + "border": { + "parts": [ + { + "offsetX": 0, + "offsetY": 1, + "blurRadius": 2, + "spreadRadius": -0.5, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 2, + "blurRadius": 3, + "spreadRadius": -1, + "colorToken": "black", + "opacity": 0.05 + }, + { + "offsetX": 0, + "offsetY": 6, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "black", + "opacity": 0.1 + } + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": -1, + "blurRadius": 2, + "spreadRadius": -0.5, + "colorToken": "white", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": -1, + "blurRadius": 3, + "spreadRadius": -1, + "colorToken": "white", + "opacity": 0.05 + }, + { + "offsetX": 0, + "offsetY": 6, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "white", + "opacity": 0.1 + } + ] + } + }, + "borderRaised": { + "parts": [ + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": 1, + "blurRadius": 2, + "spreadRadius": 0, + "colorToken": "black", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "black", + "opacity": 0.1 + } + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": -2, + "blurRadius": 2, + "spreadRadius": -1, + "colorToken": "white", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "white", + "opacity": 0.1 + } + ] + } + }, + "borderOverlay": { + "parts": [ + { + "offsetX": 0, + "offsetY": 32, + "blurRadius": 48, + "spreadRadius": -8, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 16, + "blurRadius": 24, + "spreadRadius": -6, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "black", + "opacity": 0.1 + } + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": 32, + "blurRadius": 48, + "spreadRadius": -8, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 16, + "blurRadius": 24, + "spreadRadius": -6, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "white", + "opacity": 0.1 + } + ] + } + }, + "borderFaded": { + "parts": [ + { + "offsetX": 0, + "offsetY": 1, + "blurRadius": 2, + "spreadRadius": -0.5, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 2, + "blurRadius": 3, + "spreadRadius": -1, + "colorToken": "black", + "opacity": 0.05 + }, + { + "offsetX": 0, + "offsetY": 6, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "black", + "opacity": 0.08 + } + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": -1, + "blurRadius": 2, + "spreadRadius": -0.5, + "colorToken": "white", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": -1, + "blurRadius": 3, + "spreadRadius": -1, + "colorToken": "white", + "opacity": 0.05 + }, + { + "offsetX": 0, + "offsetY": 6, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "white", + "opacity": 0.08 + } + ] + } + }, + "borderFadedRaised": { + "parts": [ + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": 1, + "blurRadius": 2, + "spreadRadius": 0, + "colorToken": "black", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "black", + "opacity": 0.08 + } + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": -2, + "blurRadius": 2, + "spreadRadius": -1, + "colorToken": "white", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "white", + "opacity": 0.08 + } + ] } - ], - "overlay": [ - { - "offsetX": 0, - "offsetY": 5, - "blurRadius": 10, - "colorToken": "black", - "opacity": 0.05 - }, - { - "offsetX": 0, - "offsetY": 15, - "blurRadius": 25, - "colorToken": "black", - "opacity": 0.07 + }, + "borderFadedOverlay": { + "parts": [ + { + "offsetX": 0, + "offsetY": 32, + "blurRadius": 48, + "spreadRadius": -8, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 16, + "blurRadius": 24, + "spreadRadius": -6, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "black", + "opacity": 0.08 + } + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": 32, + "blurRadius": 48, + "spreadRadius": -8, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 16, + "blurRadius": 24, + "spreadRadius": -6, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.06 + }, + { + "offsetX": 0, + "offsetY": 0, + "blurRadius": 0, + "spreadRadius": 1, + "colorToken": "white", + "opacity": 0.08 + } + ] } - ] + }, + "raised": { + "parts": [ + { + "offsetX": 0, + "offsetY": 10, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": 2, + "blurRadius": 4, + "colorToken": "black", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 1, + "blurRadius": 4, + "colorToken": "black", + "opacity": 0.1 + } + ] + }, + "overlay": { + "parts": [ + { + "offsetX": 0, + "offsetY": 32, + "blurRadius": 48, + "spreadRadius": -8, + "colorToken": "black", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 16, + "blurRadius": 24, + "spreadRadius": -6, + "colorToken": "black", + "opacity": 0.1 + }, + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.1 + } + ] + } }, "viewport": { "m": { diff --git a/packages/reshaped/v4.md b/packages/reshaped/v4.md new file mode 100644 index 00000000..b95c4e7c --- /dev/null +++ b/packages/reshaped/v4.md @@ -0,0 +1,10 @@ +## Planned + +- Keep slate theme available to import from reshaped package +- Update token structure + + +## Done + +- Moved theming to a separate package, package exports +- Drop tailwind v3 support \ No newline at end of file diff --git a/packages/theming/package.json b/packages/theming/package.json new file mode 100644 index 00000000..e8ed0b10 --- /dev/null +++ b/packages/theming/package.json @@ -0,0 +1,62 @@ +{ + "name": "@reshaped/theming", + "description": "Theme generation and theming utilities for Reshaped", + "version": "3.10.0-canary.16", + "license": "MIT", + "homepage": "https://reshaped.so", + "repository": { + "type": "git", + "url": "https://github.com/reshaped-ui/reshaped.git", + "directory": "packages/theming" + }, + "bugs": { + "url": "https://github.com/reshaped-ui/reshaped/issues" + }, + "author": { + "name": "Dmitry Belyaev", + "email": "blv.dmitry@gmail.com", + "url": "https://reshaped.so" + }, + "sideEffects": [ + "*.css" + ], + "files": [ + "bin/cli.js", + "dist/**/*", + "src/themes/**/*.css", + "src/themes/**/*.json" + ], + "types": "./dist/index.d.ts", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.js", + "default": "./dist/index.js" + }, + "./cli": { + "types": "./dist/cli/index.d.ts", + "import": "./dist/cli/index.js", + "default": "./dist/cli/index.js" + }, + "./cli/run": { + "types": "./dist/cli/run.d.ts", + "import": "./dist/cli/run.js", + "default": "./dist/cli/run.js" + }, + "./themes/slate/*": "./src/themes/slate/*", + "./themes/figma/*": "./src/themes/figma/*", + "./themes/fragments/twitter/*": "./src/themes/fragments/twitter/*", + "./package.json": "./package.json" + }, + "scripts": { + "clean": "rm -rf dist", + "dev": "tsc-watch --onSuccess \"resolve-tspaths\"", + "build": "tsc && resolve-tspaths" + }, + "dependencies": { + "@types/culori": "4.0.1", + "chalk": "4.1.2", + "commander": "14.0.2", + "culori": "4.0.2" + } +} diff --git a/packages/reshaped/src/cli/theming/index.ts b/packages/theming/src/cli/index.ts similarity index 77% rename from packages/reshaped/src/cli/theming/index.ts rename to packages/theming/src/cli/index.ts index f44b5869..561aec71 100644 --- a/packages/reshaped/src/cli/theming/index.ts +++ b/packages/theming/src/cli/index.ts @@ -3,14 +3,14 @@ import path from "node:path"; import chalk from "chalk"; -import reshapedDefinition from "@/themes/_generator/definitions/reshaped"; -import transform from "@/themes/_generator/transform"; -import mergeDefinitions from "@/themes/_generator/utilities/mergeDefinitions"; +import baseDefinition from "@/generation/definitions/slate"; +import transform from "@/generation/transform"; +import mergeDefinitions from "@/generation/utilities/mergeDefinitions"; import { transformToTailwind } from "./tailwind"; -import type { PassedThemeDefinition } from "@/themes/_generator/tokens/types"; -import type * as T from "@/themes/_generator/types"; +import type { PassedThemeDefinition } from "@/generation/tokens/types"; +import type * as T from "@/generation/types"; const transformDefinition = ( name: string, @@ -54,5 +54,5 @@ export const addTheme = ( definition: PassedThemeDefinition, options: T.CLIOptions ) => { - transformDefinition(name, mergeDefinitions(reshapedDefinition, definition), options); + transformDefinition(name, mergeDefinitions(baseDefinition, definition), options); }; diff --git a/packages/reshaped/src/cli/theming/reshaped.config.ts b/packages/theming/src/cli/reshaped.config.ts similarity index 61% rename from packages/reshaped/src/cli/theming/reshaped.config.ts rename to packages/theming/src/cli/reshaped.config.ts index d52c705b..ddcaeedb 100644 --- a/packages/reshaped/src/cli/theming/reshaped.config.ts +++ b/packages/theming/src/cli/reshaped.config.ts @@ -1,14 +1,12 @@ -import figmaDefinition from "@/themes/_generator/definitions/figma"; -import reshapedDefinition from "@/themes/_generator/definitions/reshaped"; -import slateDefinition from "@/themes/_generator/definitions/slate"; +import figmaDefinition from "@/generation/definitions/figma"; +import slateDefinition from "@/generation/definitions/slate"; import type { ReshapedConfig } from "@/types/config"; const config: ReshapedConfig = { themes: { - reshaped: reshapedDefinition, - figma: figmaDefinition, slate: slateDefinition, + figma: figmaDefinition, }, themeFragments: { diff --git a/bin/cli.js b/packages/theming/src/cli/run.ts old mode 100755 new mode 100644 similarity index 65% rename from bin/cli.js rename to packages/theming/src/cli/run.ts index 4e407cbb..211b272b --- a/bin/cli.js +++ b/packages/theming/src/cli/run.ts @@ -1,16 +1,21 @@ -#!/usr/bin/env node -const fs = require("fs"); -const path = require("path"); -const process = require("process"); -const chalk = require("chalk"); -const { Command } = require("commander"); -const { addTheme, addThemeFragment } = require("../dist/cli/theming"); +import fs from "node:fs"; +import path from "node:path"; +import process from "node:process"; + +import chalk from "chalk"; +import { Command } from "commander"; + +import defaultConfig from "./reshaped.config"; + +import { addTheme, addThemeFragment } from "./index"; const program = new Command(); -const importJSConfig = (path) => { - console.log(chalk.yellow(`Using Reshaped config at ${path}`)); - const config = require(path); +const importJSConfig = (configPath: string) => { + console.log(chalk.yellow(`Using Reshaped config at ${configPath}`)); + + // eslint-disable-next-line @typescript-eslint/no-require-imports + const config = require(configPath); return config.default || config; }; @@ -22,7 +27,7 @@ program .action(async (opts) => { const { output: outputPath, config: passedConfigPath } = opts; const originPath = process.cwd(); - let configPath; + let config; const cjsConfigPath = path.resolve(originPath, "reshaped.config.cjs"); const jsConfigPath = path.resolve(originPath, "reshaped.config.js"); @@ -30,20 +35,16 @@ program if (passedConfigPath) { const attemptPath = path.resolve(originPath, passedConfigPath); - if (fs.existsSync(attemptPath)) configPath = attemptPath; + if (fs.existsSync(attemptPath)) config = importJSConfig(attemptPath); } [jsConfigPath, cjsConfigPath, tsConfigPath].forEach((p) => { - if (!passedConfigPath && fs.existsSync(p)) configPath = p; + if (!passedConfigPath && fs.existsSync(p)) config = importJSConfig(p); }); - if (!configPath) { - console.error(chalk.red("Error: Reshaped config not found")); - return; - } + if (!config) config = defaultConfig; console.log(chalk.blue("Processing Reshaped themes...")); - const config = importJSConfig(configPath); const { themes, themeFragments, themeOptions } = config; if (themes) { diff --git a/packages/reshaped/src/cli/theming/tailwind.ts b/packages/theming/src/cli/tailwind.ts similarity index 91% rename from packages/reshaped/src/cli/theming/tailwind.ts rename to packages/theming/src/cli/tailwind.ts index bdec7183..22fad453 100644 --- a/packages/reshaped/src/cli/theming/tailwind.ts +++ b/packages/theming/src/cli/tailwind.ts @@ -1,18 +1,18 @@ /** * Transform JS theme defintion to Tailwind 4 CSS definition */ -import reshapedDefinition from "@/themes/_generator/definitions/reshaped"; -import mergeDefinitions from "@/themes/_generator/utilities/mergeDefinitions"; +import baseDefinition from "@/generation/definitions/slate"; +import mergeDefinitions from "@/generation/utilities/mergeDefinitions"; import { camelToKebab } from "@/utilities/string"; -import type { GeneratedThemeDefinition, ThemeDefinition } from "@/themes/_generator/tokens/types"; +import type { GeneratedThemeDefinition, ThemeDefinition } from "@/generation/tokens/types"; export const transformToTailwind = (theme?: GeneratedThemeDefinition) => { const variables: Record = {}; const definition = theme - ? (mergeDefinitions(reshapedDefinition, theme) as ThemeDefinition) - : reshapedDefinition; + ? (mergeDefinitions(baseDefinition, theme) as ThemeDefinition) + : baseDefinition; Object.keys(definition.color).forEach((tokenName) => { const cssTokenName = camelToKebab(tokenName); diff --git a/packages/theming/src/generation/definitions/figma.ts b/packages/theming/src/generation/definitions/figma.ts new file mode 100644 index 00000000..e160278f --- /dev/null +++ b/packages/theming/src/generation/definitions/figma.ts @@ -0,0 +1,609 @@ +import type { ThemeDefinition } from "../tokens/types"; + +const theme: Partial = { + fontFamily: { + headline: { + family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif", + }, + title: { + family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif", + }, + body: { + family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif", + }, + monospace: { + family: "SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace", + }, + }, + + fontWeight: { + regular: { weight: 400 }, + medium: { weight: 500 }, + semibold: { weight: 600 }, + bold: { weight: 700 }, + extrabold: { weight: 800 }, + black: { weight: 900 }, + }, + + font: { + headline1: { + fontSize: { px: 80 }, + lineHeight: { px: 84 }, + fontWeightToken: "bold", + fontFamilyToken: "headline", + }, + headline2: { + fontSize: { px: 64 }, + lineHeight: { px: 68 }, + fontWeightToken: "bold", + fontFamilyToken: "headline", + }, + headline3: { + fontSize: { px: 48 }, + lineHeight: { px: 52 }, + fontWeightToken: "bold", + fontFamilyToken: "headline", + }, + title1: { + fontSize: { px: 32 }, + lineHeight: { px: 36 }, + fontFamilyToken: "title", + }, + title2: { + fontSize: { px: 28 }, + lineHeight: { px: 32 }, + fontFamilyToken: "title", + }, + title3: { + fontSize: { px: 24 }, + lineHeight: { px: 32 }, + fontFamilyToken: "title", + }, + title4: { + fontSize: { px: 22 }, + lineHeight: { px: 28 }, + fontFamilyToken: "title", + }, + title5: { + fontSize: { px: 20 }, + lineHeight: { px: 28 }, + fontFamilyToken: "title", + }, + title6: { + fontSize: { px: 18 }, + lineHeight: { px: 24 }, + fontFamilyToken: "title", + }, + body1: { + fontSize: { px: 13 }, + lineHeight: { px: 20 }, + fontFamilyToken: "body", + }, + body2: { + fontSize: { px: 11 }, + lineHeight: { px: 16 }, + fontFamilyToken: "body", + }, + caption1: { + fontSize: { px: 11 }, + lineHeight: { px: 16 }, + fontFamilyToken: "body", + }, + caption2: { + fontSize: { px: 10 }, + lineHeight: { px: 12 }, + fontFamilyToken: "body", + }, + }, + + unit: { + base: { px: 4 }, + radiusSmall: { px: 4 }, + radiusMedium: { px: 4 }, + radiusLarge: { px: 4 }, + }, + + color: { + foregroundNeutral: { hex: "#191919", hexDark: "#FFFFFF" }, + foregroundNeutralMuted: { hex: "#474747", hexDark: "#B2B2B2" }, + foregroundDisabled: { hex: "#B2B2B2", hexDark: "#656565" }, + foregroundPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" }, + foregroundPositive: { hex: "#009951", hexDark: "#79D297" }, + foregroundCritical: { hex: "#DC3412", hexDark: "#FCA397" }, + foregroundWarning: { hex: "#7b6305", hexDark: "#b4920c" }, + + backgroundNeutral: { hex: "#DFE2EA", hexDark: "#444444" }, + backgroundNeutralMuted: { hex: "#F5F5F5", hexDark: "#383838" }, + backgroundNeutralHighlightedMuted: { hex: "#DFE2EA66", hexDark: "#44444466" }, + backgroundDisabled: { hex: "#e4e4e4", hexDark: "#474747" }, + backgroundDisabledMuted: { hex: "#F5F5F5", hexDark: "#3A3A3A" }, + backgroundPrimary: { hex: "#0D99FF", hexDark: "#0C8CE9" }, + backgroundPrimaryMuted: { hex: "#E5F4FF", hexDark: "#394360" }, + backgroundPrimaryHighlightedMuted: { hex: "#0D99FF0F", hexDark: "#0C8CE90F" }, + backgroundPositive: { hex: "#14AE5C", hexDark: "#198F51" }, + backgroundPositiveMuted: { hex: "#DAECDF", hexDark: "#3d5749" }, + backgroundPositiveHighlightedMuted: { hex: "#14AE5C0F", hexDark: "#198F510F" }, + backgroundCritical: { hex: "#F24822", hexDark: "#E03E1A" }, + backgroundCriticalMuted: { hex: "#FFE2E0", hexDark: "#60332A" }, + backgroundCriticalHighlightedMuted: { hex: "#F248220F", hexDark: "#E03E1A0F" }, + backgroundWarning: { hex: "#facc15", hexDark: "#f1c512" }, + backgroundWarningMuted: { hex: "#fffae9", hexDark: "#2c271f" }, + backgroundWarningHighlightedMuted: { hex: "#facc150F", hexDark: "#f1c5120F" }, + + borderNeutral: { hex: "#E6E6E6", hexDark: "#444444" }, + borderNeutralMuted: { hex: "#E6E6E6", hexDark: "#444444" }, + borderDisabled: { hex: "#E6E6E6", hexDark: "#3E3E3E" }, + borderPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" }, + borderPrimaryMuted: { hex: "#BDE3FF", hexDark: "#2A4D72" }, + borderPositive: { hex: "#009951", hexDark: "#79D297" }, + borderPositiveMuted: { hex: "#BBDDC6", hexDark: "#086338" }, + borderCritical: { hex: "#DC3412", hexDark: "#FCA397" }, + borderCriticalMuted: { hex: "#FFC7C2", hexDark: "#803226" }, + borderWarning: { hex: "#cfa90f", hexDark: "#b4920a" }, + borderWarningMuted: { hex: "#ece2c4", hexDark: "#453c1e" }, + + backgroundPage: { hex: "#FFFFFF", hexDark: "#2C2C2C" }, + backgroundPageMuted: { hex: "#FAFAFA", hexDark: "#1E1E1E" }, + backgroundElevationBase: { hex: "#FFFFFF", hexDark: "#2C2C2C" }, + backgroundElevationRaised: { hex: "#FFFFFF", hexDark: "#2C2C2C" }, + backgroundElevationOverlay: { hex: "#FFFFFF", hexDark: "#2C2C2C" }, + + onBackgroundPrimary: { hex: "#FFFFFF" }, + + brand: { hex: "#0D99FF" }, + black: { hex: "#000000" }, + white: { hex: "#FFFFFF" }, + }, + + duration: { + rapid: { ms: 100 }, + fast: { ms: 150 }, + medium: { ms: 200 }, + slow: { ms: 300 }, + }, + + easing: { + standard: { x1: 0.2, y1: 0, x2: 0, y2: 1 }, // subtle UI transitions + accelerate: { x1: 0.4, y1: 0, x2: 1, y2: 1 }, // exit / moving away + decelerate: { x1: 0, y1: 0, x2: 0.2, y2: 1 }, // enter / appearing + }, + + shadow: { + border: { + parts: [ + { + offsetX: 0, + offsetY: 1, + blurRadius: 2, + spreadRadius: -0.5, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 2, + blurRadius: 3, + spreadRadius: -1, + colorToken: "black", + opacity: 0.05, + }, + { + offsetX: 0, + offsetY: 6, + blurRadius: 0, + spreadRadius: 1, + colorToken: "black", + opacity: 0.1, + }, + ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: -1, + blurRadius: 2, + spreadRadius: -0.5, + colorToken: "white", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: -1, + blurRadius: 3, + spreadRadius: -1, + colorToken: "white", + opacity: 0.05, + }, + { + offsetX: 0, + offsetY: 6, + blurRadius: 0, + spreadRadius: 1, + colorToken: "white", + opacity: 0.1, + }, + ], + }, + }, + borderRaised: { + parts: [ + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: 1, + blurRadius: 2, + spreadRadius: 0, + colorToken: "black", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "black", + opacity: 0.1, + }, + ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: -2, + blurRadius: 2, + spreadRadius: -1, + colorToken: "white", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "white", + opacity: 0.1, + }, + ], + }, + }, + borderOverlay: { + parts: [ + { + offsetX: 0, + offsetY: 32, + blurRadius: 48, + spreadRadius: -8, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 16, + blurRadius: 24, + spreadRadius: -6, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "black", + opacity: 0.1, + }, + ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: 32, + blurRadius: 48, + spreadRadius: -8, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 16, + blurRadius: 24, + spreadRadius: -6, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "white", + opacity: 0.1, + }, + ], + }, + }, + borderMuted: { + parts: [ + { + offsetX: 0, + offsetY: 1, + blurRadius: 2, + spreadRadius: -0.5, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 2, + blurRadius: 3, + spreadRadius: -1, + colorToken: "black", + opacity: 0.05, + }, + { + offsetX: 0, + offsetY: 6, + blurRadius: 0, + spreadRadius: 1, + colorToken: "black", + opacity: 0.08, + }, + ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: -1, + blurRadius: 2, + spreadRadius: -0.5, + colorToken: "white", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: -1, + blurRadius: 3, + spreadRadius: -1, + colorToken: "white", + opacity: 0.05, + }, + { + offsetX: 0, + offsetY: 6, + blurRadius: 0, + spreadRadius: 1, + colorToken: "white", + opacity: 0.08, + }, + ], + }, + }, + borderMutedRaised: { + parts: [ + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: 1, + blurRadius: 2, + spreadRadius: 0, + colorToken: "black", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "black", + opacity: 0.08, + }, + ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: -2, + blurRadius: 2, + spreadRadius: -1, + colorToken: "white", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "white", + opacity: 0.08, + }, + ], + }, + }, + borderMutedOverlay: { + parts: [ + { + offsetX: 0, + offsetY: 32, + blurRadius: 48, + spreadRadius: -8, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 16, + blurRadius: 24, + spreadRadius: -6, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "black", + opacity: 0.08, + }, + ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: 32, + blurRadius: 48, + spreadRadius: -8, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 16, + blurRadius: 24, + spreadRadius: -6, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "white", + opacity: 0.08, + }, + ], + }, + }, + raised: { + parts: [ + { + offsetX: 0, + offsetY: 10, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: 2, + blurRadius: 4, + colorToken: "black", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 1, + blurRadius: 4, + colorToken: "black", + opacity: 0.1, + }, + ], + }, + overlay: { + parts: [ + { + offsetX: 0, + offsetY: 32, + blurRadius: 48, + spreadRadius: -8, + colorToken: "black", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 16, + blurRadius: 24, + spreadRadius: -6, + colorToken: "black", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.1, + }, + ], + }, + }, + + viewport: { + m: { minPx: 660 }, + l: { minPx: 900 }, + xl: { minPx: 1280 }, + }, + + zIndex: { + relative: { level: 10 }, + absolute: { level: 100 }, + fixed: { level: 200 }, + }, +}; + +export default theme; diff --git a/packages/theming/src/generation/definitions/slate.ts b/packages/theming/src/generation/definitions/slate.ts new file mode 100644 index 00000000..c68e5f86 --- /dev/null +++ b/packages/theming/src/generation/definitions/slate.ts @@ -0,0 +1,565 @@ +import generateColors from "@/generation/tokens/color/utilities/generateColors"; +import { breakpoints } from "@/generation/tokens/viewport/viewport.constants"; + +import type { ThemeDefinition } from "@/generation/tokens/types"; + +const theme: ThemeDefinition = { + color: generateColors(), + fontFamily: { + headline: { + family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif", + }, + title: { + family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif", + }, + body: { + family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif", + }, + monospace: { + family: + "Geist Mono, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace", + }, + }, + + fontWeight: { + regular: { weight: 400 }, + medium: { weight: 500 }, + semibold: { weight: 600 }, + bold: { weight: 700 }, + extrabold: { weight: 800 }, + black: { weight: 900 }, + }, + + font: { + headline1: { + fontSize: { px: 80 }, + lineHeight: { px: 84 }, + fontWeightToken: "bold", + fontFamilyToken: "headline", + }, + headline2: { + fontSize: { px: 64 }, + lineHeight: { px: 68 }, + fontWeightToken: "bold", + fontFamilyToken: "headline", + }, + headline3: { + fontSize: { px: 48 }, + lineHeight: { px: 52 }, + fontWeightToken: "bold", + fontFamilyToken: "headline", + }, + title1: { + fontSize: { px: 32 }, + lineHeight: { px: 36 }, + fontFamilyToken: "title", + }, + title2: { + fontSize: { px: 28 }, + lineHeight: { px: 32 }, + fontFamilyToken: "title", + }, + title3: { + fontSize: { px: 24 }, + lineHeight: { px: 32 }, + fontFamilyToken: "title", + }, + title4: { + fontSize: { px: 22 }, + lineHeight: { px: 28 }, + fontFamilyToken: "title", + }, + title5: { + fontSize: { px: 20 }, + lineHeight: { px: 28 }, + fontFamilyToken: "title", + }, + title6: { + fontSize: { px: 18 }, + lineHeight: { px: 24 }, + fontFamilyToken: "title", + }, + body1: { + fontSize: { px: 16 }, + lineHeight: { px: 24 }, + fontFamilyToken: "body", + }, + body2: { + fontSize: { px: 14 }, + lineHeight: { px: 20 }, + fontFamilyToken: "body", + }, + caption1: { + fontSize: { px: 12 }, + lineHeight: { px: 16 }, + fontFamilyToken: "body", + }, + caption2: { + fontSize: { px: 10 }, + lineHeight: { px: 12 }, + fontFamilyToken: "body", + }, + }, + + unit: { + base: { px: 4 }, + }, + + radius: { + small: { px: 4 }, + medium: { px: 6 }, + large: { px: 12 }, + }, + + duration: { + rapid: { ms: 100 }, + fast: { ms: 150 }, + medium: { ms: 200 }, + slow: { ms: 300 }, + }, + + easing: { + standard: { x1: 0.2, y1: 0, x2: 0, y2: 1 }, // subtle UI transitions + accelerate: { x1: 0.4, y1: 0, x2: 1, y2: 1 }, // exit / moving away + decelerate: { x1: 0, y1: 0, x2: 0.2, y2: 1 }, // enter / appearing + }, + + shadow: { + border: { + parts: [ + { + offsetX: 0, + offsetY: 1, + blurRadius: 2, + spreadRadius: -0.5, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 2, + blurRadius: 3, + spreadRadius: -1, + colorToken: "black", + opacity: 0.05, + }, + { + offsetX: 0, + offsetY: 6, + blurRadius: 0, + spreadRadius: 1, + colorToken: "black", + opacity: 0.1, + }, + ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: -1, + blurRadius: 2, + spreadRadius: -0.5, + colorToken: "white", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: -1, + blurRadius: 3, + spreadRadius: -1, + colorToken: "white", + opacity: 0.05, + }, + { + offsetX: 0, + offsetY: 6, + blurRadius: 0, + spreadRadius: 1, + colorToken: "white", + opacity: 0.1, + }, + ], + }, + }, + borderRaised: { + parts: [ + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: 1, + blurRadius: 2, + spreadRadius: 0, + colorToken: "black", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "black", + opacity: 0.1, + }, + ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: -2, + blurRadius: 2, + spreadRadius: -1, + colorToken: "white", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "white", + opacity: 0.1, + }, + ], + }, + }, + borderOverlay: { + parts: [ + { + offsetX: 0, + offsetY: 32, + blurRadius: 48, + spreadRadius: -8, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 16, + blurRadius: 24, + spreadRadius: -6, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "black", + opacity: 0.1, + }, + ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: 32, + blurRadius: 48, + spreadRadius: -8, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 16, + blurRadius: 24, + spreadRadius: -6, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "white", + opacity: 0.1, + }, + ], + }, + }, + borderMuted: { + parts: [ + { + offsetX: 0, + offsetY: 1, + blurRadius: 2, + spreadRadius: -0.5, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 2, + blurRadius: 3, + spreadRadius: -1, + colorToken: "black", + opacity: 0.05, + }, + { + offsetX: 0, + offsetY: 6, + blurRadius: 0, + spreadRadius: 1, + colorToken: "black", + opacity: 0.08, + }, + ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: -1, + blurRadius: 2, + spreadRadius: -0.5, + colorToken: "white", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: -1, + blurRadius: 3, + spreadRadius: -1, + colorToken: "white", + opacity: 0.05, + }, + { + offsetX: 0, + offsetY: 6, + blurRadius: 0, + spreadRadius: 1, + colorToken: "white", + opacity: 0.08, + }, + ], + }, + }, + borderMutedRaised: { + parts: [ + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: 1, + blurRadius: 2, + spreadRadius: 0, + colorToken: "black", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "black", + opacity: 0.08, + }, + ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: -2, + blurRadius: 2, + spreadRadius: -1, + colorToken: "white", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "white", + opacity: 0.08, + }, + ], + }, + }, + borderMutedOverlay: { + parts: [ + { + offsetX: 0, + offsetY: 32, + blurRadius: 48, + spreadRadius: -8, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 16, + blurRadius: 24, + spreadRadius: -6, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "black", + opacity: 0.08, + }, + ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: 32, + blurRadius: 48, + spreadRadius: -8, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 16, + blurRadius: 24, + spreadRadius: -6, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.06, + }, + { + offsetX: 0, + offsetY: 0, + blurRadius: 0, + spreadRadius: 1, + colorToken: "white", + opacity: 0.08, + }, + ], + }, + }, + raised: { + parts: [ + { + offsetX: 0, + offsetY: 10, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: 2, + blurRadius: 4, + colorToken: "black", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 1, + blurRadius: 4, + colorToken: "black", + opacity: 0.1, + }, + ], + }, + overlay: { + parts: [ + { + offsetX: 0, + offsetY: 32, + blurRadius: 48, + spreadRadius: -8, + colorToken: "black", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 16, + blurRadius: 24, + spreadRadius: -6, + colorToken: "black", + opacity: 0.1, + }, + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.1, + }, + ], + }, + }, + + viewport: { + m: { minPx: breakpoints.m }, + l: { minPx: breakpoints.l }, + xl: { minPx: breakpoints.xl }, + }, + + zIndex: { + relative: { level: 10 }, + absolute: { level: 100 }, + fixed: { level: 200 }, + }, +}; + +export default theme; diff --git a/packages/reshaped/src/themes/_generator/constants.ts b/packages/theming/src/generation/tokens/color/color.constants.ts similarity index 70% rename from packages/reshaped/src/themes/_generator/constants.ts rename to packages/theming/src/generation/tokens/color/color.constants.ts index beaac935..8675b42f 100644 --- a/packages/reshaped/src/themes/_generator/constants.ts +++ b/packages/theming/src/generation/tokens/color/color.constants.ts @@ -1,4 +1,4 @@ -import type { Name } from "@/themes/_generator/tokens/color/color.types"; +import type { Name } from "@/generation/tokens/color/color.types"; export const bgWithDynamicForeground: Name[] = [ "backgroundNeutral", diff --git a/packages/reshaped/src/themes/_generator/tokens/color/color.transforms.ts b/packages/theming/src/generation/tokens/color/color.transforms.ts similarity index 96% rename from packages/reshaped/src/themes/_generator/tokens/color/color.transforms.ts rename to packages/theming/src/generation/tokens/color/color.transforms.ts index c02743c3..db5de4bd 100644 --- a/packages/reshaped/src/themes/_generator/tokens/color/color.transforms.ts +++ b/packages/theming/src/generation/tokens/color/color.transforms.ts @@ -1,4 +1,4 @@ -import { PrivateOptions } from "@/themes/_generator/types"; +import { PrivateOptions } from "@/generation/types"; import type * as T from "./color.types"; import type { Transformer, TransformedToken } from "../types"; diff --git a/packages/reshaped/src/themes/_generator/tokens/color/color.types.ts b/packages/theming/src/generation/tokens/color/color.types.ts similarity index 70% rename from packages/reshaped/src/themes/_generator/tokens/color/color.types.ts rename to packages/theming/src/generation/tokens/color/color.types.ts index a9cb8624..eb26ca7b 100644 --- a/packages/reshaped/src/themes/_generator/tokens/color/color.types.ts +++ b/packages/theming/src/generation/tokens/color/color.types.ts @@ -4,37 +4,42 @@ export type Hue = "primary" | "positive" | "critical" | "warning" | "neutral" | export type Name = | "foregroundNeutral" - | "foregroundNeutralFaded" + | "foregroundNeutralMuted" | "foregroundDisabled" | "foregroundPrimary" | "foregroundCritical" | "foregroundWarning" | "foregroundPositive" | "borderNeutral" - | "borderNeutralFaded" + | "borderNeutralMuted" | "borderDisabled" | "borderPrimary" - | "borderPrimaryFaded" + | "borderPrimaryMuted" | "borderCritical" - | "borderCriticalFaded" + | "borderCriticalMuted" | "borderWarning" - | "borderWarningFaded" + | "borderWarningMuted" | "borderPositive" - | "borderPositiveFaded" + | "borderPositiveMuted" | "backgroundNeutral" - | "backgroundNeutralFaded" + | "backgroundNeutralMuted" + | "backgroundNeutralHighlightedMuted" | "backgroundDisabled" - | "backgroundDisabledFaded" + | "backgroundDisabledMuted" | "backgroundPrimary" - | "backgroundPrimaryFaded" + | "backgroundPrimaryMuted" + | "backgroundPrimaryHighlightedMuted" | "backgroundCritical" - | "backgroundCriticalFaded" + | "backgroundCriticalMuted" + | "backgroundCriticalHighlightedMuted" | "backgroundWarning" - | "backgroundWarningFaded" + | "backgroundWarningMuted" + | "backgroundWarningHighlightedMuted" | "backgroundPositive" - | "backgroundPositiveFaded" + | "backgroundPositiveMuted" + | "backgroundPositiveHighlightedMuted" | "backgroundPage" - | "backgroundPageFaded" + | "backgroundPageMuted" | "backgroundElevationBase" | "backgroundElevationRaised" | "backgroundElevationOverlay" @@ -51,19 +56,19 @@ export type GeneratedOnName = export type GeneratedRGBName = | "rgbBackgroundNeutral" - | "rgbBackgroundNeutralFaded" + | "rgbBackgroundNeutralMuted" | "rgbBackgroundDisabled" - | "rgbBackgroundDisabledFaded" + | "rgbBackgroundDisabledMuted" | "rgbBackgroundPrimary" - | "rgbBackgroundPrimaryFaded" + | "rgbBackgroundPrimaryMuted" | "rgbBackgroundCritical" - | "rgbBackgroundCriticalFaded" + | "rgbBackgroundCriticalMuted" | "rgbBackgroundWarning" - | "rgbBackgroundWarningFaded" + | "rgbBackgroundWarningMuted" | "rgbBackgroundPositive" - | "rgbBackgroundPositiveFaded" + | "rgbBackgroundPositiveMuted" | "rgbBackgroundPage" - | "rgbBackgroundPageFaded" + | "rgbBackgroundPageMuted" | "rgbBackgroundElevationBase" | "rgbBackgroundElevationRaised" | "rgbBackgroundElevationOverlay"; diff --git a/packages/reshaped/src/themes/_generator/tokens/color/utilities/a11y.ts b/packages/theming/src/generation/tokens/color/utilities/a11y.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/color/utilities/a11y.ts rename to packages/theming/src/generation/tokens/color/utilities/a11y.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/color/utilities/convert.ts b/packages/theming/src/generation/tokens/color/utilities/convert.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/color/utilities/convert.ts rename to packages/theming/src/generation/tokens/color/utilities/convert.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/color/utilities/generateColors.ts b/packages/theming/src/generation/tokens/color/utilities/generateColors.ts similarity index 71% rename from packages/reshaped/src/themes/_generator/tokens/color/utilities/generateColors.ts rename to packages/theming/src/generation/tokens/color/utilities/generateColors.ts index c48d95ac..d1150b1b 100644 --- a/packages/reshaped/src/themes/_generator/tokens/color/utilities/generateColors.ts +++ b/packages/theming/src/generation/tokens/color/utilities/generateColors.ts @@ -10,7 +10,7 @@ import { import { hexToOklch, tokenToOklchToken } from "./convert"; -import type { PassedThemeDefinition } from "@/themes/_generator/tokens/types"; +import type { ThemeDefinition } from "@/generation/tokens/types"; const parseColor = (color: HexColor | PassedToken) => { const isString = typeof color === "string"; @@ -57,7 +57,7 @@ const getDarkModeColor = (lch: OklchColor) => { const darkL = invertedL + (l - invertedL) * easedVibrancy; // Make sure dark mode value doesn't become too dark and is still visible on dark page background - const clampedDarkL = Math.max(0.36, darkL); + const clampedDarkL = Math.max(0.32, darkL); return { ...lch, c: c * 0.8, l: clampedDarkL }; }; @@ -72,46 +72,49 @@ const generateColorValues = ( const warning = key === "warning"; const bgDark = dark || getDarkModeColor(bg); - const bgFaded = { - ...bg, - l: 0.97, - c: neutral ? 0 : warning ? 0.04 : 0.02, - }; - const bgFadedDark = { - ...bgDark, - l: 0.25, - // For primary color with low chroma, we still have to make sure it stays low - c: neutral ? 0 : bgDark.c / 5, - }; - - const fg = neutral ? { ...bg, l: 0.2 } : { ...bg, l: 0.5 }; + const bgMuted = neutral + ? { ...bg, l: 0, c: 0, alpha: 0.03 } + : { + ...bg, + l: 0.98, + // Keep muted colors subtle but avoid introducing tint for low-chroma inputs. + c: Math.min(warning ? 0.04 : 0.02, bg.c / 5), + }; + const bgMutedDark = neutral + ? { ...bgDark, l: 1, alpha: 0.03 } + : { + ...bgDark, + l: 0.25, + // For primary color with low chroma, we still have to make sure it stays low + c: bgDark.c / 7.5, + }; + + const fg = neutral ? { ...bg, l: 0.24 } : { ...bg, l: 0.52 }; const fgDark = neutral ? { ...bgDark, l: 0.96 } : { ...bgDark, l: 0.75, c: bg.c * 0.85 }; const bd = neutral ? { ...bg, l: 0, alpha: 0.12 } : { ...bg, l: bg.l - 0.08 }; - const bdDark = neutral ? { ...bgDark, l: 1, alpha: 0.16 } : { ...bgDark, l: bgDark.l + 0.1 }; - const bdFaded = neutral - ? { ...bgFaded, l: 0, alpha: 0.08 } - : { ...bgFaded, l: bgFaded.l - 0.05, c: bgFaded.c + 0.01 }; - const bdFadedDark = neutral - ? { ...bgFadedDark, l: 1, alpha: 0.08 } - : { ...bgFadedDark, l: bgFadedDark.l + 0.1 }; + const bdDark = neutral ? { ...bgDark, l: 1, alpha: 0.12 } : { ...bgDark, l: bgDark.l + 0.1 }; + const bdMuted = neutral ? { ...bgMuted, l: 0, alpha: 0.08 } : { ...bgMuted, l: bgMuted.l - 0.03 }; + const bdMutedDark = neutral + ? { ...bgMutedDark, l: 1, alpha: 0.08 } + : { ...bgMutedDark, l: bgMutedDark.l + 0.06 }; const output = { [`background${capitalizedKey}`]: { oklch: bg, oklchDark: bgDark, }, - [`background${capitalizedKey}Faded`]: { - oklch: bgFaded, - oklchDark: bgFadedDark, + [`background${capitalizedKey}Muted`]: { + oklch: bgMuted, + oklchDark: bgMutedDark, }, [`border${capitalizedKey}`]: { oklch: bd, oklchDark: bdDark, }, - [`border${capitalizedKey}Faded`]: { - oklch: bdFaded, - oklchDark: bdFadedDark, + [`border${capitalizedKey}Muted`]: { + oklch: bdMuted, + oklchDark: bdMutedDark, }, [`foreground${capitalizedKey}`]: { oklch: fg, @@ -120,7 +123,7 @@ const generateColorValues = ( }; if (neutral) { - output[`foreground${capitalizedKey}Faded`] = { + output[`foreground${capitalizedKey}Muted`] = { oklch: { ...fg, l: fg.l + 0.25 }, oklchDark: { ...fgDark, l: fgDark.l - 0.15 }, }; @@ -128,13 +131,13 @@ const generateColorValues = ( oklch: { ...bg, l: 0.95, c: 0 }, oklchDark: { ...bgDark, l: 0.28, c: 0 }, }; - output[`backgroundDisabledFaded`] = { + output[`backgroundDisabledMuted`] = { oklch: { ...bg, l: 0.98, c: 0 }, oklchDark: { ...bgDark, l: 0.23, c: 0 }, }; output[`borderDisabled`] = { - oklch: { ...bd, alpha: 0.06 }, - oklchDark: { ...bgDark, l: 0.28, c: 0 }, + oklch: { ...bd, l: 0, c: 0, alpha: 0.06 }, + oklchDark: { ...bgDark, l: 1, c: 0, alpha: 0.04 }, }; output[`foregroundDisabled`] = { oklch: { ...fg, l: 0.84, c: 0 }, @@ -146,18 +149,18 @@ const generateColorValues = ( }; output[`backgroundElevationRaised`] = { oklch: { ...bg, l: 1, c: 0 }, - oklchDark: { ...bgDark, l: 0.21, c: 0 }, + oklchDark: { ...bgDark, l: 0.215, c: 0 }, }; output[`backgroundElevationOverlay`] = { oklch: { ...bg, l: 1, c: 0 }, - oklchDark: { ...bgDark, l: 0.22, c: 0 }, + oklchDark: { ...bgDark, l: 0.23, c: 0 }, }; output[`backgroundPage`] = { oklch: { ...bg, l: 1, c: 0 }, oklchDark: { ...bgDark, l: 0.16, c: 0 }, }; - output[`backgroundPageFaded`] = { - oklch: { ...bg, l: 0.97, c: 0 }, + output[`backgroundPageMuted`] = { + oklch: { ...bg, l: 0.98, c: 0 }, oklchDark: { ...bgDark, l: 0.18, c: 0 }, }; } @@ -173,10 +176,10 @@ const getOklchToken = (color: ColorValue) => { const generateColors = (args: Partial> = {}) => { const { primary = { oklch: { l: 0.55, c: 0.24, h: 262.67 } }, - critical = { oklch: { l: 0.59, c: 0.22, h: 26.97 } }, - warning = { oklch: { l: 0.83, c: 0.2, h: 80 } }, - positive = { oklch: { l: 0.53, c: 0.13, h: 153.78 } }, - neutral = { oklch: { l: 0.92, c: 0.01, h: 262.67 } }, + critical = { oklch: { l: 0.59, c: 0.205, h: 20.28 } }, + warning = { oklch: { l: 0.82, c: 0.22, h: 80 } }, + positive = { oklch: { l: 0.55, c: 0.13, h: 151.8 } }, + neutral = { oklch: { l: 0.94, c: 0, h: 89.88 } }, brand, } = args; @@ -189,7 +192,7 @@ const generateColors = (args: Partial> = {}) => { brand: getOklchToken(brand || primary), white: getOklchToken("#ffffff"), black: getOklchToken("#000000"), - } as NonNullable; + } as NonNullable; }; export default generateColors; diff --git a/packages/reshaped/src/themes/_generator/tokens/color/utilities/generateMetaColors.ts b/packages/theming/src/generation/tokens/color/utilities/generateMetaColors.ts similarity index 97% rename from packages/reshaped/src/themes/_generator/tokens/color/utilities/generateMetaColors.ts rename to packages/theming/src/generation/tokens/color/utilities/generateMetaColors.ts index e46c0011..4c0d5661 100644 --- a/packages/reshaped/src/themes/_generator/tokens/color/utilities/generateMetaColors.ts +++ b/packages/theming/src/generation/tokens/color/utilities/generateMetaColors.ts @@ -1,7 +1,7 @@ import { capitalize } from "@/utilities/string"; -import { bgWithDynamicForeground } from "../../../constants"; import { PassedThemeDefinition } from "../../types"; +import { bgWithDynamicForeground } from "../color.constants"; import { getOnColor } from "./a11y"; import { hexToOklch, oklchToRgb, tokenToOklchToken } from "./convert"; diff --git a/packages/reshaped/src/themes/_generator/tokens/color/utilities/tests/__snapshots__/convert.test.ts.snap b/packages/theming/src/generation/tokens/color/utilities/tests/__snapshots__/convert.test.ts.snap similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/color/utilities/tests/__snapshots__/convert.test.ts.snap rename to packages/theming/src/generation/tokens/color/utilities/tests/__snapshots__/convert.test.ts.snap diff --git a/packages/reshaped/src/themes/_generator/tokens/color/utilities/tests/__snapshots__/generateColors.test.ts.snap b/packages/theming/src/generation/tokens/color/utilities/tests/__snapshots__/generateColors.test.ts.snap similarity index 70% rename from packages/reshaped/src/themes/_generator/tokens/color/utilities/tests/__snapshots__/generateColors.test.ts.snap rename to packages/theming/src/generation/tokens/color/utilities/tests/__snapshots__/generateColors.test.ts.snap index 5e638bcb..5788e61c 100644 --- a/packages/reshaped/src/themes/_generator/tokens/color/utilities/tests/__snapshots__/generateColors.test.ts.snap +++ b/packages/theming/src/generation/tokens/color/utilities/tests/__snapshots__/generateColors.test.ts.snap @@ -4,28 +4,28 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] { "backgroundCritical": { "oklch": { - "c": 0.22, - "h": 26.97, + "c": 0.205, + "h": 20.28, "l": 0.59, "mode": "oklch", }, "oklchDark": { - "c": 0.17600000000000002, - "h": 26.97, - "l": 0.5874079999999999, + "c": 0.164, + "h": 20.28, + "l": 0.584168, "mode": "oklch", }, }, - "backgroundCriticalFaded": { + "backgroundCriticalMuted": { "oklch": { "c": 0.02, - "h": 26.97, - "l": 0.97, + "h": 20.28, + "l": 0.98, "mode": "oklch", }, "oklchDark": { - "c": 0.0352, - "h": 26.97, + "c": 0.021866666666666666, + "h": 20.28, "l": 0.25, "mode": "oklch", }, @@ -33,27 +33,27 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] "backgroundDisabled": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.95, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.28, "mode": "oklch", }, }, - "backgroundDisabledFaded": { + "backgroundDisabledMuted": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.98, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.23, "mode": "oklch", }, @@ -61,13 +61,13 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] "backgroundElevationBase": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 1, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.2, "mode": "oklch", }, @@ -75,83 +75,85 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] "backgroundElevationOverlay": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 1, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, - "l": 0.22, + "h": 89.88, + "l": 0.23, "mode": "oklch", }, }, "backgroundElevationRaised": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 1, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, - "l": 0.21, + "h": 89.88, + "l": 0.215, "mode": "oklch", }, }, "backgroundNeutral": { "oklch": { - "c": 0.01, - "h": 262.67, - "l": 0.92, + "c": 0, + "h": 89.88, + "l": 0.94, "mode": "oklch", }, "oklchDark": { - "c": 0.008, - "h": 262.67, - "l": 0.36, + "c": 0, + "h": 89.88, + "l": 0.32, "mode": "oklch", }, }, - "backgroundNeutralFaded": { + "backgroundNeutralMuted": { "oklch": { + "alpha": 0.03, "c": 0, - "h": 262.67, - "l": 0.97, + "h": 89.88, + "l": 0, "mode": "oklch", }, "oklchDark": { + "alpha": 0.03, "c": 0, - "h": 262.67, - "l": 0.25, + "h": 89.88, + "l": 1, "mode": "oklch", }, }, "backgroundPage": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 1, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.16, "mode": "oklch", }, }, - "backgroundPageFaded": { + "backgroundPageMuted": { "oklch": { "c": 0, - "h": 262.67, - "l": 0.97, + "h": 89.88, + "l": 0.98, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.18, "mode": "oklch", }, @@ -159,27 +161,27 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] "backgroundPositive": { "oklch": { "c": 0.13, - "h": 153.78, - "l": 0.53, + "h": 151.8, + "l": 0.55, "mode": "oklch", }, "oklchDark": { "c": 0.10400000000000001, - "h": 153.78, - "l": 0.516176, + "h": 151.8, + "l": 0.52696, "mode": "oklch", }, }, - "backgroundPositiveFaded": { + "backgroundPositiveMuted": { "oklch": { "c": 0.02, - "h": 153.78, - "l": 0.97, + "h": 151.8, + "l": 0.98, "mode": "oklch", }, "oklchDark": { - "c": 0.020800000000000003, - "h": 153.78, + "c": 0.013866666666666668, + "h": 151.8, "l": 0.25, "mode": "oklch", }, @@ -198,11 +200,11 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] "mode": "oklch", }, }, - "backgroundPrimaryFaded": { + "backgroundPrimaryMuted": { "oklch": { - "c": 0.02, + "c": 0, "h": 0, - "l": 0.97, + "l": 0.98, "mode": "oklch", }, "oklchDark": { @@ -214,27 +216,27 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] }, "backgroundWarning": { "oklch": { - "c": 0.2, + "c": 0.22, "h": 80, - "l": 0.83, + "l": 0.82, "mode": "oklch", }, "oklchDark": { - "c": 0.16000000000000003, + "c": 0.17600000000000002, "h": 80, - "l": 0.8036, + "l": 0.810784, "mode": "oklch", }, }, - "backgroundWarningFaded": { + "backgroundWarningMuted": { "oklch": { "c": 0.04, "h": 80, - "l": 0.97, + "l": 0.98, "mode": "oklch", }, "oklchDark": { - "c": 0.03200000000000001, + "c": 0.02346666666666667, "h": 80, "l": 0.25, "mode": "oklch", @@ -250,75 +252,76 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] }, "borderCritical": { "oklch": { - "c": 0.22, - "h": 26.97, + "c": 0.205, + "h": 20.28, "l": 0.51, "mode": "oklch", }, "oklchDark": { - "c": 0.17600000000000002, - "h": 26.97, - "l": 0.6874079999999999, + "c": 0.164, + "h": 20.28, + "l": 0.684168, "mode": "oklch", }, }, - "borderCriticalFaded": { + "borderCriticalMuted": { "oklch": { - "c": 0.03, - "h": 26.97, - "l": 0.9199999999999999, + "c": 0.02, + "h": 20.28, + "l": 0.95, "mode": "oklch", }, "oklchDark": { - "c": 0.0352, - "h": 26.97, - "l": 0.35, + "c": 0.021866666666666666, + "h": 20.28, + "l": 0.31, "mode": "oklch", }, }, "borderDisabled": { "oklch": { "alpha": 0.06, - "c": 0.01, - "h": 262.67, + "c": 0, + "h": 89.88, "l": 0, "mode": "oklch", }, "oklchDark": { + "alpha": 0.04, "c": 0, - "h": 262.67, - "l": 0.28, + "h": 89.88, + "l": 1, "mode": "oklch", }, }, "borderNeutral": { "oklch": { "alpha": 0.12, - "c": 0.01, - "h": 262.67, + "c": 0, + "h": 89.88, "l": 0, "mode": "oklch", }, "oklchDark": { - "alpha": 0.16, - "c": 0.008, - "h": 262.67, + "alpha": 0.12, + "c": 0, + "h": 89.88, "l": 1, "mode": "oklch", }, }, - "borderNeutralFaded": { + "borderNeutralMuted": { "oklch": { "alpha": 0.08, "c": 0, - "h": 262.67, + "h": 89.88, "l": 0, "mode": "oklch", }, "oklchDark": { "alpha": 0.08, "c": 0, - "h": 262.67, + "h": 89.88, "l": 1, "mode": "oklch", }, @@ -326,28 +329,28 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] "borderPositive": { "oklch": { "c": 0.13, - "h": 153.78, - "l": 0.45, + "h": 151.8, + "l": 0.47000000000000003, "mode": "oklch", }, "oklchDark": { "c": 0.10400000000000001, - "h": 153.78, - "l": 0.616176, + "h": 151.8, + "l": 0.62696, "mode": "oklch", }, }, - "borderPositiveFaded": { + "borderPositiveMuted": { "oklch": { - "c": 0.03, - "h": 153.78, - "l": 0.9199999999999999, + "c": 0.02, + "h": 151.8, + "l": 0.95, "mode": "oklch", }, "oklchDark": { - "c": 0.020800000000000003, - "h": 153.78, - "l": 0.35, + "c": 0.013866666666666668, + "h": 151.8, + "l": 0.31, "mode": "oklch", }, }, @@ -365,45 +368,45 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] "mode": "oklch", }, }, - "borderPrimaryFaded": { + "borderPrimaryMuted": { "oklch": { - "c": 0.03, + "c": 0, "h": 0, - "l": 0.9199999999999999, + "l": 0.95, "mode": "oklch", }, "oklchDark": { "c": 0, "h": 0, - "l": 0.35, + "l": 0.31, "mode": "oklch", }, }, "borderWarning": { "oklch": { - "c": 0.2, + "c": 0.22, "h": 80, - "l": 0.75, + "l": 0.74, "mode": "oklch", }, "oklchDark": { - "c": 0.16000000000000003, + "c": 0.17600000000000002, "h": 80, - "l": 0.9036, + "l": 0.9107839999999999, "mode": "oklch", }, }, - "borderWarningFaded": { + "borderWarningMuted": { "oklch": { - "c": 0.05, + "c": 0.04, "h": 80, - "l": 0.9199999999999999, + "l": 0.95, "mode": "oklch", }, "oklchDark": { - "c": 0.03200000000000001, + "c": 0.02346666666666667, "h": 80, - "l": 0.35, + "l": 0.31, "mode": "oklch", }, }, @@ -418,14 +421,14 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] }, "foregroundCritical": { "oklch": { - "c": 0.22, - "h": 26.97, - "l": 0.5, + "c": 0.205, + "h": 20.28, + "l": 0.52, "mode": "oklch", }, "oklchDark": { - "c": 0.187, - "h": 26.97, + "c": 0.17425, + "h": 20.28, "l": 0.75, "mode": "oklch", }, @@ -433,41 +436,41 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] "foregroundDisabled": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.84, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.4, "mode": "oklch", }, }, "foregroundNeutral": { "oklch": { - "c": 0.01, - "h": 262.67, - "l": 0.2, + "c": 0, + "h": 89.88, + "l": 0.24, "mode": "oklch", }, "oklchDark": { - "c": 0.008, - "h": 262.67, + "c": 0, + "h": 89.88, "l": 0.96, "mode": "oklch", }, }, - "foregroundNeutralFaded": { + "foregroundNeutralMuted": { "oklch": { - "c": 0.01, - "h": 262.67, - "l": 0.45, + "c": 0, + "h": 89.88, + "l": 0.49, "mode": "oklch", }, "oklchDark": { - "c": 0.008, - "h": 262.67, + "c": 0, + "h": 89.88, "l": 0.8099999999999999, "mode": "oklch", }, @@ -475,13 +478,13 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] "foregroundPositive": { "oklch": { "c": 0.13, - "h": 153.78, - "l": 0.5, + "h": 151.8, + "l": 0.52, "mode": "oklch", }, "oklchDark": { "c": 0.1105, - "h": 153.78, + "h": 151.8, "l": 0.75, "mode": "oklch", }, @@ -490,7 +493,7 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] "oklch": { "c": 0, "h": 0, - "l": 0.5, + "l": 0.52, "mode": "oklch", }, "oklchDark": { @@ -502,13 +505,13 @@ exports[`themes/tokens/color/utilities/generateColors > with a passed value 1`] }, "foregroundWarning": { "oklch": { - "c": 0.2, + "c": 0.22, "h": 80, - "l": 0.5, + "l": 0.52, "mode": "oklch", }, "oklchDark": { - "c": 0.17, + "c": 0.187, "h": 80, "l": 0.75, "mode": "oklch", @@ -529,28 +532,28 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] { "backgroundCritical": { "oklch": { - "c": 0.22, - "h": 26.97, + "c": 0.205, + "h": 20.28, "l": 0.59, "mode": "oklch", }, "oklchDark": { - "c": 0.17600000000000002, - "h": 26.97, - "l": 0.5874079999999999, + "c": 0.164, + "h": 20.28, + "l": 0.584168, "mode": "oklch", }, }, - "backgroundCriticalFaded": { + "backgroundCriticalMuted": { "oklch": { "c": 0.02, - "h": 26.97, - "l": 0.97, + "h": 20.28, + "l": 0.98, "mode": "oklch", }, "oklchDark": { - "c": 0.0352, - "h": 26.97, + "c": 0.021866666666666666, + "h": 20.28, "l": 0.25, "mode": "oklch", }, @@ -558,27 +561,27 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] "backgroundDisabled": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.95, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.28, "mode": "oklch", }, }, - "backgroundDisabledFaded": { + "backgroundDisabledMuted": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.98, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.23, "mode": "oklch", }, @@ -586,13 +589,13 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] "backgroundElevationBase": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 1, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.2, "mode": "oklch", }, @@ -600,83 +603,85 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] "backgroundElevationOverlay": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 1, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, - "l": 0.22, + "h": 89.88, + "l": 0.23, "mode": "oklch", }, }, "backgroundElevationRaised": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 1, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, - "l": 0.21, + "h": 89.88, + "l": 0.215, "mode": "oklch", }, }, "backgroundNeutral": { "oklch": { - "c": 0.01, - "h": 262.67, - "l": 0.92, + "c": 0, + "h": 89.88, + "l": 0.94, "mode": "oklch", }, "oklchDark": { - "c": 0.008, - "h": 262.67, - "l": 0.36, + "c": 0, + "h": 89.88, + "l": 0.32, "mode": "oklch", }, }, - "backgroundNeutralFaded": { + "backgroundNeutralMuted": { "oklch": { + "alpha": 0.03, "c": 0, - "h": 262.67, - "l": 0.97, + "h": 89.88, + "l": 0, "mode": "oklch", }, "oklchDark": { + "alpha": 0.03, "c": 0, - "h": 262.67, - "l": 0.25, + "h": 89.88, + "l": 1, "mode": "oklch", }, }, "backgroundPage": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 1, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.16, "mode": "oklch", }, }, - "backgroundPageFaded": { + "backgroundPageMuted": { "oklch": { "c": 0, - "h": 262.67, - "l": 0.97, + "h": 89.88, + "l": 0.98, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.18, "mode": "oklch", }, @@ -684,27 +689,27 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] "backgroundPositive": { "oklch": { "c": 0.13, - "h": 153.78, - "l": 0.53, + "h": 151.8, + "l": 0.55, "mode": "oklch", }, "oklchDark": { "c": 0.10400000000000001, - "h": 153.78, - "l": 0.516176, + "h": 151.8, + "l": 0.52696, "mode": "oklch", }, }, - "backgroundPositiveFaded": { + "backgroundPositiveMuted": { "oklch": { "c": 0.02, - "h": 153.78, - "l": 0.97, + "h": 151.8, + "l": 0.98, "mode": "oklch", }, "oklchDark": { - "c": 0.020800000000000003, - "h": 153.78, + "c": 0.013866666666666668, + "h": 151.8, "l": 0.25, "mode": "oklch", }, @@ -723,15 +728,15 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] "mode": "oklch", }, }, - "backgroundPrimaryFaded": { + "backgroundPrimaryMuted": { "oklch": { "c": 0.02, "h": 262.67, - "l": 0.97, + "l": 0.98, "mode": "oklch", }, "oklchDark": { - "c": 0.038400000000000004, + "c": 0.0256, "h": 262.67, "l": 0.25, "mode": "oklch", @@ -739,27 +744,27 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] }, "backgroundWarning": { "oklch": { - "c": 0.2, + "c": 0.22, "h": 80, - "l": 0.83, + "l": 0.82, "mode": "oklch", }, "oklchDark": { - "c": 0.16000000000000003, + "c": 0.17600000000000002, "h": 80, - "l": 0.8036, + "l": 0.810784, "mode": "oklch", }, }, - "backgroundWarningFaded": { + "backgroundWarningMuted": { "oklch": { "c": 0.04, "h": 80, - "l": 0.97, + "l": 0.98, "mode": "oklch", }, "oklchDark": { - "c": 0.03200000000000001, + "c": 0.02346666666666667, "h": 80, "l": 0.25, "mode": "oklch", @@ -775,75 +780,76 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] }, "borderCritical": { "oklch": { - "c": 0.22, - "h": 26.97, + "c": 0.205, + "h": 20.28, "l": 0.51, "mode": "oklch", }, "oklchDark": { - "c": 0.17600000000000002, - "h": 26.97, - "l": 0.6874079999999999, + "c": 0.164, + "h": 20.28, + "l": 0.684168, "mode": "oklch", }, }, - "borderCriticalFaded": { + "borderCriticalMuted": { "oklch": { - "c": 0.03, - "h": 26.97, - "l": 0.9199999999999999, + "c": 0.02, + "h": 20.28, + "l": 0.95, "mode": "oklch", }, "oklchDark": { - "c": 0.0352, - "h": 26.97, - "l": 0.35, + "c": 0.021866666666666666, + "h": 20.28, + "l": 0.31, "mode": "oklch", }, }, "borderDisabled": { "oklch": { "alpha": 0.06, - "c": 0.01, - "h": 262.67, + "c": 0, + "h": 89.88, "l": 0, "mode": "oklch", }, "oklchDark": { + "alpha": 0.04, "c": 0, - "h": 262.67, - "l": 0.28, + "h": 89.88, + "l": 1, "mode": "oklch", }, }, "borderNeutral": { "oklch": { "alpha": 0.12, - "c": 0.01, - "h": 262.67, + "c": 0, + "h": 89.88, "l": 0, "mode": "oklch", }, "oklchDark": { - "alpha": 0.16, - "c": 0.008, - "h": 262.67, + "alpha": 0.12, + "c": 0, + "h": 89.88, "l": 1, "mode": "oklch", }, }, - "borderNeutralFaded": { + "borderNeutralMuted": { "oklch": { "alpha": 0.08, "c": 0, - "h": 262.67, + "h": 89.88, "l": 0, "mode": "oklch", }, "oklchDark": { "alpha": 0.08, "c": 0, - "h": 262.67, + "h": 89.88, "l": 1, "mode": "oklch", }, @@ -851,28 +857,28 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] "borderPositive": { "oklch": { "c": 0.13, - "h": 153.78, - "l": 0.45, + "h": 151.8, + "l": 0.47000000000000003, "mode": "oklch", }, "oklchDark": { "c": 0.10400000000000001, - "h": 153.78, - "l": 0.616176, + "h": 151.8, + "l": 0.62696, "mode": "oklch", }, }, - "borderPositiveFaded": { + "borderPositiveMuted": { "oklch": { - "c": 0.03, - "h": 153.78, - "l": 0.9199999999999999, + "c": 0.02, + "h": 151.8, + "l": 0.95, "mode": "oklch", }, "oklchDark": { - "c": 0.020800000000000003, - "h": 153.78, - "l": 0.35, + "c": 0.013866666666666668, + "h": 151.8, + "l": 0.31, "mode": "oklch", }, }, @@ -890,45 +896,45 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] "mode": "oklch", }, }, - "borderPrimaryFaded": { + "borderPrimaryMuted": { "oklch": { - "c": 0.03, + "c": 0.02, "h": 262.67, - "l": 0.9199999999999999, + "l": 0.95, "mode": "oklch", }, "oklchDark": { - "c": 0.038400000000000004, + "c": 0.0256, "h": 262.67, - "l": 0.35, + "l": 0.31, "mode": "oklch", }, }, "borderWarning": { "oklch": { - "c": 0.2, + "c": 0.22, "h": 80, - "l": 0.75, + "l": 0.74, "mode": "oklch", }, "oklchDark": { - "c": 0.16000000000000003, + "c": 0.17600000000000002, "h": 80, - "l": 0.9036, + "l": 0.9107839999999999, "mode": "oklch", }, }, - "borderWarningFaded": { + "borderWarningMuted": { "oklch": { - "c": 0.05, + "c": 0.04, "h": 80, - "l": 0.9199999999999999, + "l": 0.95, "mode": "oklch", }, "oklchDark": { - "c": 0.03200000000000001, + "c": 0.02346666666666667, "h": 80, - "l": 0.35, + "l": 0.31, "mode": "oklch", }, }, @@ -943,14 +949,14 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] }, "foregroundCritical": { "oklch": { - "c": 0.22, - "h": 26.97, - "l": 0.5, + "c": 0.205, + "h": 20.28, + "l": 0.52, "mode": "oklch", }, "oklchDark": { - "c": 0.187, - "h": 26.97, + "c": 0.17425, + "h": 20.28, "l": 0.75, "mode": "oklch", }, @@ -958,41 +964,41 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] "foregroundDisabled": { "oklch": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.84, "mode": "oklch", }, "oklchDark": { "c": 0, - "h": 262.67, + "h": 89.88, "l": 0.4, "mode": "oklch", }, }, "foregroundNeutral": { "oklch": { - "c": 0.01, - "h": 262.67, - "l": 0.2, + "c": 0, + "h": 89.88, + "l": 0.24, "mode": "oklch", }, "oklchDark": { - "c": 0.008, - "h": 262.67, + "c": 0, + "h": 89.88, "l": 0.96, "mode": "oklch", }, }, - "foregroundNeutralFaded": { + "foregroundNeutralMuted": { "oklch": { - "c": 0.01, - "h": 262.67, - "l": 0.45, + "c": 0, + "h": 89.88, + "l": 0.49, "mode": "oklch", }, "oklchDark": { - "c": 0.008, - "h": 262.67, + "c": 0, + "h": 89.88, "l": 0.8099999999999999, "mode": "oklch", }, @@ -1000,13 +1006,13 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] "foregroundPositive": { "oklch": { "c": 0.13, - "h": 153.78, - "l": 0.5, + "h": 151.8, + "l": 0.52, "mode": "oklch", }, "oklchDark": { "c": 0.1105, - "h": 153.78, + "h": 151.8, "l": 0.75, "mode": "oklch", }, @@ -1015,7 +1021,7 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] "oklch": { "c": 0.24, "h": 262.67, - "l": 0.5, + "l": 0.52, "mode": "oklch", }, "oklchDark": { @@ -1027,13 +1033,13 @@ exports[`themes/tokens/color/utilities/generateColors > with default values 1`] }, "foregroundWarning": { "oklch": { - "c": 0.2, + "c": 0.22, "h": 80, - "l": 0.5, + "l": 0.52, "mode": "oklch", }, "oklchDark": { - "c": 0.17, + "c": 0.187, "h": 80, "l": 0.75, "mode": "oklch", diff --git a/packages/reshaped/src/themes/_generator/tokens/color/utilities/tests/a11y.test.ts b/packages/theming/src/generation/tokens/color/utilities/tests/a11y.test.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/color/utilities/tests/a11y.test.ts rename to packages/theming/src/generation/tokens/color/utilities/tests/a11y.test.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/color/utilities/tests/convert.test.ts b/packages/theming/src/generation/tokens/color/utilities/tests/convert.test.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/color/utilities/tests/convert.test.ts rename to packages/theming/src/generation/tokens/color/utilities/tests/convert.test.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/color/utilities/tests/generateColors.test.ts b/packages/theming/src/generation/tokens/color/utilities/tests/generateColors.test.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/color/utilities/tests/generateColors.test.ts rename to packages/theming/src/generation/tokens/color/utilities/tests/generateColors.test.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/css.ts b/packages/theming/src/generation/tokens/css.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/css.ts rename to packages/theming/src/generation/tokens/css.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/duration/duration.transforms.ts b/packages/theming/src/generation/tokens/duration/duration.transforms.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/duration/duration.transforms.ts rename to packages/theming/src/generation/tokens/duration/duration.transforms.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/duration/duration.types.ts b/packages/theming/src/generation/tokens/duration/duration.types.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/duration/duration.types.ts rename to packages/theming/src/generation/tokens/duration/duration.types.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/easing/easing.transforms.ts b/packages/theming/src/generation/tokens/easing/easing.transforms.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/easing/easing.transforms.ts rename to packages/theming/src/generation/tokens/easing/easing.transforms.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/easing/easing.types.ts b/packages/theming/src/generation/tokens/easing/easing.types.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/easing/easing.types.ts rename to packages/theming/src/generation/tokens/easing/easing.types.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/font/font.transforms.ts b/packages/theming/src/generation/tokens/font/font.transforms.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/font/font.transforms.ts rename to packages/theming/src/generation/tokens/font/font.transforms.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/font/font.types.ts b/packages/theming/src/generation/tokens/font/font.types.ts similarity index 90% rename from packages/reshaped/src/themes/_generator/tokens/font/font.types.ts rename to packages/theming/src/generation/tokens/font/font.types.ts index 84de7c56..bfe3f224 100644 --- a/packages/reshaped/src/themes/_generator/tokens/font/font.types.ts +++ b/packages/theming/src/generation/tokens/font/font.types.ts @@ -3,18 +3,17 @@ import type * as TFontWeight from "../fontWeight/fontWeight.types"; import type * as TUnit from "../unit/unit.types"; export type Name = + | "headline1" + | "headline2" + | "headline3" | "title1" | "title2" | "title3" | "title4" | "title5" | "title6" - | "featured1" - | "featured2" - | "featured3" | "body1" | "body2" - | "body3" | "caption1" | "caption2"; diff --git a/packages/reshaped/src/themes/_generator/tokens/fontFamily/fontFamily.transforms.ts b/packages/theming/src/generation/tokens/fontFamily/fontFamily.transforms.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/fontFamily/fontFamily.transforms.ts rename to packages/theming/src/generation/tokens/fontFamily/fontFamily.transforms.ts diff --git a/packages/theming/src/generation/tokens/fontFamily/fontFamily.types.ts b/packages/theming/src/generation/tokens/fontFamily/fontFamily.types.ts new file mode 100644 index 00000000..87aa9ba9 --- /dev/null +++ b/packages/theming/src/generation/tokens/fontFamily/fontFamily.types.ts @@ -0,0 +1,2 @@ +export type Name = "headline" | "title" | "body" | "monospace"; +export type Token = { family: string }; diff --git a/packages/reshaped/src/themes/_generator/tokens/fontWeight/fontWeight.transforms.ts b/packages/theming/src/generation/tokens/fontWeight/fontWeight.transforms.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/fontWeight/fontWeight.transforms.ts rename to packages/theming/src/generation/tokens/fontWeight/fontWeight.transforms.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/fontWeight/fontWeight.types.ts b/packages/theming/src/generation/tokens/fontWeight/fontWeight.types.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/fontWeight/fontWeight.types.ts rename to packages/theming/src/generation/tokens/fontWeight/fontWeight.types.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/radius/radius.transforms.ts b/packages/theming/src/generation/tokens/radius/radius.transforms.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/radius/radius.transforms.ts rename to packages/theming/src/generation/tokens/radius/radius.transforms.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/radius/radius.types.ts b/packages/theming/src/generation/tokens/radius/radius.types.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/radius/radius.types.ts rename to packages/theming/src/generation/tokens/radius/radius.types.ts diff --git a/packages/theming/src/generation/tokens/shadow/shadow.transforms.ts b/packages/theming/src/generation/tokens/shadow/shadow.transforms.ts new file mode 100644 index 00000000..dbe11f9e --- /dev/null +++ b/packages/theming/src/generation/tokens/shadow/shadow.transforms.ts @@ -0,0 +1,51 @@ +import { hexToOklch, oklchToRgb } from "../color/utilities/convert"; + +import type { Transformer, TransformedToken } from "../types"; +import type * as T from "./shadow.types"; + +const transformShadowParts = ( + parts: T.Token["parts"], + theme: Parameters>[2]["theme"] +) => + parts + .map((value) => { + const blur = ` ${value.blurRadius || 0}px`; + const spread = ` ${value.spreadRadius || 0}px`; + const colorRef = theme.color[value.colorToken]; + const rgb = oklchToRgb(hexToOklch(colorRef?.hex || "#000000")); + const rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`; + const color = `rgba(${rgbString}, ${value.opacity || 1})`; + + return `${value.offsetX}px ${value.offsetY}px${blur}${spread} ${color}`; + }) + .join(", "); + +const transformToken: Transformer = (name, token, { theme }) => { + const value = transformShadowParts(token.parts, theme); + const darkValue = token.dark ? transformShadowParts(token.dark.parts, theme) : undefined; + const separateModes = !!darkValue && value !== darkValue; + const defaultMode = separateModes ? "light" : undefined; + const result: TransformedToken[] = [ + { + name, + tokenType: "shadow", + type: "variable", + value, + mode: defaultMode, + }, + ]; + + if (darkValue && separateModes) { + result.push({ + name, + tokenType: "shadow", + type: "variable", + value: darkValue, + mode: "dark", + }); + } + + return result; +}; + +export default transformToken; diff --git a/packages/theming/src/generation/tokens/shadow/shadow.types.ts b/packages/theming/src/generation/tokens/shadow/shadow.types.ts new file mode 100644 index 00000000..b4cacbb4 --- /dev/null +++ b/packages/theming/src/generation/tokens/shadow/shadow.types.ts @@ -0,0 +1,28 @@ +import type * as TColor from "../color/color.types"; + +export type Name = + | "raised" + | "overlay" + | "border" + | "borderRaised" + | "borderOverlay" + | "borderMuted" + | "borderMutedRaised" + | "borderMutedOverlay"; + +type Part = { + offsetX: number; + offsetY: number; + blurRadius?: number; + spreadRadius?: number; + colorToken: TColor.Name; + opacity: number; +}; + +export type Token = { + parts: Array; + dark?: { + parts: Array; + }; +}; +export type ResolvedToken = Array & { color: TColor.Token }>; diff --git a/packages/reshaped/src/themes/_generator/tokens/transforms.ts b/packages/theming/src/generation/tokens/transforms.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/transforms.ts rename to packages/theming/src/generation/tokens/transforms.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/types.ts b/packages/theming/src/generation/tokens/types.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/types.ts rename to packages/theming/src/generation/tokens/types.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/unit/unit.transforms.ts b/packages/theming/src/generation/tokens/unit/unit.transforms.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/unit/unit.transforms.ts rename to packages/theming/src/generation/tokens/unit/unit.transforms.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/unit/unit.types.ts b/packages/theming/src/generation/tokens/unit/unit.types.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/unit/unit.types.ts rename to packages/theming/src/generation/tokens/unit/unit.types.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/unit/utilities/generate.ts b/packages/theming/src/generation/tokens/unit/utilities/generate.ts similarity index 61% rename from packages/reshaped/src/themes/_generator/tokens/unit/utilities/generate.ts rename to packages/theming/src/generation/tokens/unit/utilities/generate.ts index d35d5f2d..66522668 100644 --- a/packages/reshaped/src/themes/_generator/tokens/unit/utilities/generate.ts +++ b/packages/theming/src/generation/tokens/unit/utilities/generate.ts @@ -1,8 +1,5 @@ -import type { - GeneratedThemeDefinition, - PassedThemeDefinition, -} from "@/themes/_generator/tokens/types"; -import type { GeneratedName as GeneratedUnitName } from "@/themes/_generator/tokens/unit/unit.types"; +import type { GeneratedThemeDefinition, PassedThemeDefinition } from "@/generation/tokens/types"; +import type { GeneratedName as GeneratedUnitName } from "@/generation/tokens/unit/unit.types"; export const generateUnits = (definition: PassedThemeDefinition) => { const result: Partial = {}; @@ -16,5 +13,8 @@ export const generateUnits = (definition: PassedThemeDefinition) => { result[generatedName] = { px: baseValue * i }; } + result["x0_5"] = { px: baseValue * 0.5 }; + result["x1_5"] = { px: baseValue * 1.5 }; + return result; }; diff --git a/packages/theming/src/generation/tokens/viewport/viewport.constants.ts b/packages/theming/src/generation/tokens/viewport/viewport.constants.ts new file mode 100644 index 00000000..2d096574 --- /dev/null +++ b/packages/theming/src/generation/tokens/viewport/viewport.constants.ts @@ -0,0 +1,5 @@ +export const breakpoints = { + m: 660, + l: 900, + xl: 1280, +}; diff --git a/packages/reshaped/src/themes/_generator/tokens/viewport/viewport.transforms.ts b/packages/theming/src/generation/tokens/viewport/viewport.transforms.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/viewport/viewport.transforms.ts rename to packages/theming/src/generation/tokens/viewport/viewport.transforms.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/viewport/viewport.types.ts b/packages/theming/src/generation/tokens/viewport/viewport.types.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/viewport/viewport.types.ts rename to packages/theming/src/generation/tokens/viewport/viewport.types.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/zIndex/zIndex.transforms.ts b/packages/theming/src/generation/tokens/zIndex/zIndex.transforms.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/zIndex/zIndex.transforms.ts rename to packages/theming/src/generation/tokens/zIndex/zIndex.transforms.ts diff --git a/packages/reshaped/src/themes/_generator/tokens/zIndex/zIndex.types.ts b/packages/theming/src/generation/tokens/zIndex/zIndex.types.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/tokens/zIndex/zIndex.types.ts rename to packages/theming/src/generation/tokens/zIndex/zIndex.types.ts diff --git a/packages/reshaped/src/themes/_generator/transform.ts b/packages/theming/src/generation/transform.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/transform.ts rename to packages/theming/src/generation/transform.ts diff --git a/packages/reshaped/src/themes/_generator/types.ts b/packages/theming/src/generation/types.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/types.ts rename to packages/theming/src/generation/types.ts diff --git a/packages/reshaped/src/themes/_generator/utilities/mergeDefinitions.ts b/packages/theming/src/generation/utilities/mergeDefinitions.ts similarity index 100% rename from packages/reshaped/src/themes/_generator/utilities/mergeDefinitions.ts rename to packages/theming/src/generation/utilities/mergeDefinitions.ts diff --git a/packages/theming/src/index.ts b/packages/theming/src/index.ts new file mode 100644 index 00000000..af567f87 --- /dev/null +++ b/packages/theming/src/index.ts @@ -0,0 +1,38 @@ +import transform from "@/generation/transform"; + +import type { PassedThemeDefinition } from "@/generation/tokens/types"; +import type * as T from "@/generation/types"; + +/** + * Exported types + */ +export type { ReshapedConfig } from "@/types/config"; + +export type { ThemeDefinition } from "@/generation/tokens/types"; +export type { Name as ColorTokenName } from "@/generation/tokens/color/color.types"; +export type { Name as DurationTokenName } from "@/generation/tokens/duration/duration.types"; +export type { Name as EasingTokenName } from "@/generation/tokens/easing/easing.types"; +export type { Name as FontTokenName } from "@/generation/tokens/font/font.types"; +export type { Name as FontFamilyTokenName } from "@/generation/tokens/fontFamily/fontFamily.types"; +export type { Name as FontWeightTokenName } from "@/generation/tokens/fontWeight/fontWeight.types"; +export type { Name as RadiusTokenName } from "@/generation/tokens/radius/radius.types"; +export type { Name as ShadowTokenName } from "@/generation/tokens/shadow/shadow.types"; +export type { GeneratedName as UnitTokenName } from "@/generation/tokens/unit/unit.types"; +export type { Name as ViewportTokenName } from "@/generation/tokens/viewport/viewport.types"; + +/** + * Exported runtime code + */ +export { default as baseThemeDefinition } from "@/generation/definitions/slate"; +export { default as generateThemeColors } from "@/generation/tokens/color/utilities/generateColors"; +export { breakpoints } from "@/generation/tokens/viewport/viewport.constants"; +export { default as transform } from "@/generation/transform"; + +export const getThemeCSS = ( + name: string, + definition: PassedThemeDefinition, + options?: T.PublicOptions["themeOptions"] +) => { + const code = transform(name, definition, { themeOptions: options, isFragment: true }); + return code.variables; +}; diff --git a/packages/reshaped/src/types/config.ts b/packages/theming/src/types/config.ts similarity index 72% rename from packages/reshaped/src/types/config.ts rename to packages/theming/src/types/config.ts index 3c47fe53..6f3066cf 100644 --- a/packages/reshaped/src/types/config.ts +++ b/packages/theming/src/types/config.ts @@ -1,5 +1,5 @@ -import type { HexColor, Hue, OklchColor } from "@/themes/_generator/tokens/color/color.types"; -import type { PassedThemeDefinition } from "@/themes/_generator/tokens/types"; +import type { HexColor, Hue, OklchColor } from "@/generation/tokens/color/color.types"; +import type { PassedThemeDefinition } from "@/generation/tokens/types"; export type ReshapedConfig = { themes?: Record; diff --git a/packages/theming/src/utilities/string.ts b/packages/theming/src/utilities/string.ts new file mode 100644 index 00000000..7b63cda1 --- /dev/null +++ b/packages/theming/src/utilities/string.ts @@ -0,0 +1,12 @@ +export const camelToKebab = (s: string) => { + return s + .replace(/([a-z]+)([A-Z0-9]+)/g, (_, p1, p2) => + // Keep values like x1 - as is + p1.length === 1 && /^[0-9]+$/.test(p2) ? `${p1}${p2}` : `${p1}-${p2}` + ) + .toLowerCase(); +}; + +export const capitalize = (s: string) => { + return s.charAt(0).toUpperCase() + s.slice(1); +}; diff --git a/packages/theming/tsconfig.json b/packages/theming/tsconfig.json new file mode 100644 index 00000000..dd516ba1 --- /dev/null +++ b/packages/theming/tsconfig.json @@ -0,0 +1,21 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "baseUrl": "./src", + "rootDir": "./src", + "target": "ES2022", + "module": "ESNext", + "moduleResolution": "Bundler", + "paths": { + "@/*": ["./*"], + } + }, + "include": ["src/**/*"], + "exclude": [ + "node_modules", + "dist", + "./src/**/*.test.tsx", + "./src/**/*.test.ts" + ] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d1c157e1..00e2fa1d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -200,9 +200,9 @@ importers: '@reshaped/headless': specifier: workspace:* version: link:../headless - '@types/culori': - specifier: 4.0.1 - version: 4.0.1 + '@reshaped/theming': + specifier: workspace:* + version: link:../theming chalk: specifier: 4.1.2 version: 4.1.2 @@ -210,14 +210,11 @@ importers: specifier: 14.0.3 version: 14.0.3 cssnano: - specifier: 7.1.2 - version: 7.1.2(postcss@8.5.6) + specifier: 7.1.1 + version: 7.1.1(postcss@8.5.6) csstype: specifier: 3.2.3 version: 3.2.3 - culori: - specifier: 4.0.2 - version: 4.0.2 postcss: specifier: ^8 version: 8.5.6 @@ -231,6 +228,21 @@ importers: specifier: ^18 || ^19 version: 18.3.1(react@18.3.1) + packages/theming: + dependencies: + '@types/culori': + specifier: 4.0.1 + version: 4.0.1 + chalk: + specifier: 4.1.2 + version: 4.1.2 + commander: + specifier: 14.0.2 + version: 14.0.2 + culori: + specifier: 4.0.2 + version: 4.0.2 + packages/utilities: dependencies: react: @@ -1849,6 +1861,10 @@ packages: resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==} engines: {node: '>=18'} + commander@14.0.2: + resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==} + engines: {node: '>=20'} + commander@14.0.3: resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==} engines: {node: '>=20'} @@ -1924,6 +1940,12 @@ packages: peerDependencies: postcss: ^8.4.32 + cssnano@7.1.1: + resolution: {integrity: sha512-fm4D8ti0dQmFPeF8DXSAA//btEmqCOgAc/9Oa3C1LW94h5usNrJEfrON7b4FkPZgnDEn6OUs5NdxiJZmAtGOpQ==} + engines: {node: ^18.12.0 || ^20.9.0 || >=22.0} + peerDependencies: + postcss: ^8.4.32 + cssnano@7.1.2: resolution: {integrity: sha512-HYOPBsNvoiFeR1eghKD5C3ASm64v9YVyJB4Ivnl2gqKoQYvjjN/G0rztvKQq8OxocUtC6sjqY8jwYngIB4AByA==} engines: {node: ^18.12.0 || ^20.9.0 || >=22.0} @@ -6396,6 +6418,8 @@ snapshots: commander@12.1.0: {} + commander@14.0.2: {} + commander@14.0.3: {} commander@2.20.3: {} @@ -6537,7 +6561,7 @@ snapshots: dependencies: postcss: 8.5.8 - cssnano@7.1.2(postcss@8.5.6): + cssnano@7.1.1(postcss@8.5.6): dependencies: cssnano-preset-default: 7.0.10(postcss@8.5.6) lilconfig: 3.1.3 From a5a26fe68842f4ccfb73f8a67efe1de814f8f668 Mon Sep 17 00:00:00 2001 From: Dmitry Belyaev Date: Sun, 8 Mar 2026 16:47:09 +0100 Subject: [PATCH 02/75] highlighted colors --- .changeset/pink-cloths-brush.md | 5 + .../reshaped/src/themes/figma/tailwind.css | 47 +- packages/reshaped/src/themes/figma/theme.css | 112 ++-- packages/reshaped/src/themes/figma/theme.json | 86 ++- .../src/themes/fragments/twitter/tailwind.css | 47 +- .../reshaped/src/themes/slate/tailwind.css | 47 +- packages/reshaped/src/themes/slate/theme.css | 210 ++++--- packages/reshaped/src/themes/slate/theme.json | 543 +++++++++++------- .../tokens/color/utilities/generateColors.ts | 8 + 9 files changed, 663 insertions(+), 442 deletions(-) create mode 100644 .changeset/pink-cloths-brush.md diff --git a/.changeset/pink-cloths-brush.md b/.changeset/pink-cloths-brush.md new file mode 100644 index 00000000..0fbdfd6a --- /dev/null +++ b/.changeset/pink-cloths-brush.md @@ -0,0 +1,5 @@ +--- +"@reshaped/theming": patch +--- + +Added highlighted muted background colors to theme config diff --git a/packages/reshaped/src/themes/figma/tailwind.css b/packages/reshaped/src/themes/figma/tailwind.css index 93abd3cc..73a228d6 100644 --- a/packages/reshaped/src/themes/figma/tailwind.css +++ b/packages/reshaped/src/themes/figma/tailwind.css @@ -1,42 +1,47 @@ @theme inline { --background-color-primary: var(--rs-color-background-primary); ---background-color-primary-faded: var(--rs-color-background-primary-faded); +--background-color-primary-muted: var(--rs-color-background-primary-muted); +--background-color-primary-highlighted-muted: var(--rs-color-background-primary-highlighted-muted); --border-color-primary: var(--rs-color-border-primary); --outline-color-primary: var(--rs-color-border-primary); ---border-color-primary-faded: var(--rs-color-border-primary-faded); ---outline-color-primary-faded: var(--rs-color-border-primary-faded); +--border-color-primary-muted: var(--rs-color-border-primary-muted); +--outline-color-primary-muted: var(--rs-color-border-primary-muted); --text-color-primary: var(--rs-color-foreground-primary); --background-color-critical: var(--rs-color-background-critical); ---background-color-critical-faded: var(--rs-color-background-critical-faded); +--background-color-critical-muted: var(--rs-color-background-critical-muted); +--background-color-critical-highlighted-muted: var(--rs-color-background-critical-highlighted-muted); --border-color-critical: var(--rs-color-border-critical); --outline-color-critical: var(--rs-color-border-critical); ---border-color-critical-faded: var(--rs-color-border-critical-faded); ---outline-color-critical-faded: var(--rs-color-border-critical-faded); +--border-color-critical-muted: var(--rs-color-border-critical-muted); +--outline-color-critical-muted: var(--rs-color-border-critical-muted); --text-color-critical: var(--rs-color-foreground-critical); --background-color-warning: var(--rs-color-background-warning); ---background-color-warning-faded: var(--rs-color-background-warning-faded); +--background-color-warning-muted: var(--rs-color-background-warning-muted); +--background-color-warning-highlighted-muted: var(--rs-color-background-warning-highlighted-muted); --border-color-warning: var(--rs-color-border-warning); --outline-color-warning: var(--rs-color-border-warning); ---border-color-warning-faded: var(--rs-color-border-warning-faded); ---outline-color-warning-faded: var(--rs-color-border-warning-faded); +--border-color-warning-muted: var(--rs-color-border-warning-muted); +--outline-color-warning-muted: var(--rs-color-border-warning-muted); --text-color-warning: var(--rs-color-foreground-warning); --background-color-positive: var(--rs-color-background-positive); ---background-color-positive-faded: var(--rs-color-background-positive-faded); +--background-color-positive-muted: var(--rs-color-background-positive-muted); +--background-color-positive-highlighted-muted: var(--rs-color-background-positive-highlighted-muted); --border-color-positive: var(--rs-color-border-positive); --outline-color-positive: var(--rs-color-border-positive); ---border-color-positive-faded: var(--rs-color-border-positive-faded); ---outline-color-positive-faded: var(--rs-color-border-positive-faded); +--border-color-positive-muted: var(--rs-color-border-positive-muted); +--outline-color-positive-muted: var(--rs-color-border-positive-muted); --text-color-positive: var(--rs-color-foreground-positive); --background-color-neutral: var(--rs-color-background-neutral); ---background-color-neutral-faded: var(--rs-color-background-neutral-faded); +--background-color-neutral-muted: var(--rs-color-background-neutral-muted); +--background-color-neutral-highlighted-muted: var(--rs-color-background-neutral-highlighted-muted); --border-color-neutral: var(--rs-color-border-neutral); --outline-color-neutral: var(--rs-color-border-neutral); ---border-color-neutral-faded: var(--rs-color-border-neutral-faded); ---outline-color-neutral-faded: var(--rs-color-border-neutral-faded); +--border-color-neutral-muted: var(--rs-color-border-neutral-muted); +--outline-color-neutral-muted: var(--rs-color-border-neutral-muted); --text-color-neutral: var(--rs-color-foreground-neutral); ---text-color-neutral-faded: var(--rs-color-foreground-neutral-faded); +--text-color-neutral-muted: var(--rs-color-foreground-neutral-muted); --background-color-disabled: var(--rs-color-background-disabled); ---background-color-disabled-faded: var(--rs-color-background-disabled-faded); +--background-color-disabled-muted: var(--rs-color-background-disabled-muted); --border-color-disabled: var(--rs-color-border-disabled); --outline-color-disabled: var(--rs-color-border-disabled); --text-color-disabled: var(--rs-color-foreground-disabled); @@ -44,7 +49,7 @@ --background-color-elevation-raised: var(--rs-color-background-elevation-raised); --background-color-elevation-overlay: var(--rs-color-background-elevation-overlay); --background-color-page: var(--rs-color-background-page); ---background-color-page-faded: var(--rs-color-background-page-faded); +--background-color-page-muted: var(--rs-color-background-page-muted); --color-brand: var(--rs-color-brand); --color-white: var(--rs-color-white); --color-black: var(--rs-color-black); @@ -77,9 +82,9 @@ --shadow-border: var(--rs-shadow-border); --shadow-border-raised: var(--rs-shadow-border-raised); --shadow-border-overlay: var(--rs-shadow-border-overlay); ---shadow-border-faded: var(--rs-shadow-border-faded); ---shadow-border-faded-raised: var(--rs-shadow-border-faded-raised); ---shadow-border-faded-overlay: var(--rs-shadow-border-faded-overlay); +--shadow-border-muted: var(--rs-shadow-border-muted); +--shadow-border-muted-raised: var(--rs-shadow-border-muted-raised); +--shadow-border-muted-overlay: var(--rs-shadow-border-muted-overlay); --shadow-raised: var(--rs-shadow-raised); --shadow-overlay: var(--rs-shadow-overlay); --breakpoint-m: 660px; diff --git a/packages/reshaped/src/themes/figma/theme.css b/packages/reshaped/src/themes/figma/theme.css index 1ed6fd2e..239d818a 100644 --- a/packages/reshaped/src/themes/figma/theme.css +++ b/packages/reshaped/src/themes/figma/theme.css @@ -113,125 +113,145 @@ [data-rs-theme~="figma"][data-rs-color-mode="light"] { --rs-color-background-primary: #0D99FF; ---rs-color-background-primary-faded: #E5F4FF; +--rs-color-background-primary-muted: #E5F4FF; +--rs-color-background-primary-highlighted-muted: #0D99FF0F; --rs-color-border-primary: #007BE5; ---rs-color-border-primary-faded: #BDE3FF; +--rs-color-border-primary-muted: #BDE3FF; --rs-color-foreground-primary: #007BE5; --rs-color-background-critical: #F24822; ---rs-color-background-critical-faded: #FFE2E0; +--rs-color-background-critical-muted: #FFE2E0; +--rs-color-background-critical-highlighted-muted: #F248220F; --rs-color-border-critical: #DC3412; ---rs-color-border-critical-faded: #FFC7C2; +--rs-color-border-critical-muted: #FFC7C2; --rs-color-foreground-critical: #DC3412; --rs-color-background-warning: #facc15; ---rs-color-background-warning-faded: #fffae9; +--rs-color-background-warning-muted: #fffae9; +--rs-color-background-warning-highlighted-muted: #facc150F; --rs-color-border-warning: #cfa90f; ---rs-color-border-warning-faded: #ece2c4; +--rs-color-border-warning-muted: #ece2c4; --rs-color-foreground-warning: #7b6305; --rs-color-background-positive: #14AE5C; ---rs-color-background-positive-faded: #DAECDF; +--rs-color-background-positive-muted: #DAECDF; +--rs-color-background-positive-highlighted-muted: #14AE5C0F; --rs-color-border-positive: #009951; ---rs-color-border-positive-faded: #BBDDC6; +--rs-color-border-positive-muted: #BBDDC6; --rs-color-foreground-positive: #009951; --rs-color-background-neutral: #DFE2EA; ---rs-color-background-neutral-faded: #F5F5F5; +--rs-color-background-neutral-muted: #F5F5F5; +--rs-color-background-neutral-highlighted-muted: #DFE2EA66; --rs-color-border-neutral: #E6E6E6; ---rs-color-border-neutral-faded: #E6E6E6; +--rs-color-border-neutral-muted: #E6E6E6; --rs-color-foreground-neutral: #191919; ---rs-color-foreground-neutral-faded: #474747; +--rs-color-foreground-neutral-muted: #474747; --rs-color-background-disabled: #e4e4e4; ---rs-color-background-disabled-faded: #F5F5F5; +--rs-color-background-disabled-muted: #F5F5F5; --rs-color-border-disabled: #E6E6E6; --rs-color-foreground-disabled: #B2B2B2; --rs-color-background-elevation-base: #FFFFFF; --rs-color-background-elevation-raised: #FFFFFF; --rs-color-background-elevation-overlay: #FFFFFF; --rs-color-background-page: #FFFFFF; ---rs-color-background-page-faded: #FAFAFA; +--rs-color-background-page-muted: #FAFAFA; --rs-color-rgb-background-primary: 13.004999999999999, 153, 255; ---rs-color-rgb-background-primary-faded: 228.99, 244.0095, 255; +--rs-color-rgb-background-primary-muted: 228.99, 244.0095, 255; +--rs-color-rgb-background-primary-highlighted-muted: 13.004999999999999, 153, 255; --rs-color-rgb-background-critical: 241.99499999999998, 72.012, 33.9915; ---rs-color-rgb-background-critical-faded: 255, 226.0065, 223.992; +--rs-color-rgb-background-critical-muted: 255, 226.0065, 223.992; +--rs-color-rgb-background-critical-highlighted-muted: 241.99499999999998, 72.012, 33.9915; --rs-color-rgb-background-warning: 250.002, 204, 21.012; ---rs-color-rgb-background-warning-faded: 255, 250.002, 232.99349999999998; +--rs-color-rgb-background-warning-muted: 255, 250.002, 232.99349999999998; +--rs-color-rgb-background-warning-highlighted-muted: 250.002, 204, 21.012; --rs-color-rgb-background-positive: 19.992, 174.012, 92.004; ---rs-color-rgb-background-positive-faded: 217.9995, 236.0025, 222.9975; +--rs-color-rgb-background-positive-muted: 217.9995, 236.0025, 222.9975; +--rs-color-rgb-background-positive-highlighted-muted: 19.992, 174.012, 92.004; --rs-color-on-background-neutral: oklch(0 0 0); --rs-color-rgb-background-neutral: 222.9975, 226.0065, 233.988; ---rs-color-rgb-background-neutral-faded: 245.004, 245.004, 245.004; +--rs-color-rgb-background-neutral-muted: 245.004, 245.004, 245.004; +--rs-color-rgb-background-neutral-highlighted-muted: 222.9975, 226.0065, 233.988; --rs-color-rgb-background-disabled: 227.9955, 227.9955, 227.9955; ---rs-color-rgb-background-disabled-faded: 245.004, 245.004, 245.004; +--rs-color-rgb-background-disabled-muted: 245.004, 245.004, 245.004; --rs-color-rgb-background-elevation-base: 255, 255, 255; --rs-color-rgb-background-elevation-raised: 255, 255, 255; --rs-color-rgb-background-elevation-overlay: 255, 255, 255; --rs-color-rgb-background-page: 255, 255, 255; ---rs-color-rgb-background-page-faded: 250.002, 250.002, 250.002; +--rs-color-rgb-background-page-muted: 250.002, 250.002, 250.002; --rs-shadow-border: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 6px 0px 1px rgba(0, 0, 0, 0.1); --rs-shadow-border-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); --rs-shadow-border-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); ---rs-shadow-border-faded: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 6px 0px 1px rgba(0, 0, 0, 0.08); ---rs-shadow-border-faded-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); ---rs-shadow-border-faded-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); +--rs-shadow-border-muted: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 6px 0px 1px rgba(0, 0, 0, 0.08); +--rs-shadow-border-muted-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); +--rs-shadow-border-muted-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); } [data-rs-theme~="figma"][data-rs-color-mode="dark"] { --rs-color-background-primary: #0C8CE9; ---rs-color-background-primary-faded: #394360; +--rs-color-background-primary-muted: #394360; +--rs-color-background-primary-highlighted-muted: #0C8CE90F; --rs-color-border-primary: #7CC4F8; ---rs-color-border-primary-faded: #2A4D72; +--rs-color-border-primary-muted: #2A4D72; --rs-color-foreground-primary: #7CC4F8; --rs-color-background-critical: #E03E1A; ---rs-color-background-critical-faded: #60332A; +--rs-color-background-critical-muted: #60332A; +--rs-color-background-critical-highlighted-muted: #E03E1A0F; --rs-color-border-critical: #FCA397; ---rs-color-border-critical-faded: #803226; +--rs-color-border-critical-muted: #803226; --rs-color-foreground-critical: #FCA397; --rs-color-background-warning: #f1c512; ---rs-color-background-warning-faded: #2c271f; +--rs-color-background-warning-muted: #2c271f; +--rs-color-background-warning-highlighted-muted: #f1c5120F; --rs-color-border-warning: #b4920a; ---rs-color-border-warning-faded: #453c1e; +--rs-color-border-warning-muted: #453c1e; --rs-color-foreground-warning: #b4920c; --rs-color-background-positive: #198F51; ---rs-color-background-positive-faded: #3d5749; +--rs-color-background-positive-muted: #3d5749; +--rs-color-background-positive-highlighted-muted: #198F510F; --rs-color-border-positive: #79D297; ---rs-color-border-positive-faded: #086338; +--rs-color-border-positive-muted: #086338; --rs-color-foreground-positive: #79D297; --rs-color-background-neutral: #444444; ---rs-color-background-neutral-faded: #383838; +--rs-color-background-neutral-muted: #383838; +--rs-color-background-neutral-highlighted-muted: #44444466; --rs-color-border-neutral: #444444; ---rs-color-border-neutral-faded: #444444; +--rs-color-border-neutral-muted: #444444; --rs-color-foreground-neutral: #FFFFFF; ---rs-color-foreground-neutral-faded: #B2B2B2; +--rs-color-foreground-neutral-muted: #B2B2B2; --rs-color-background-disabled: #474747; ---rs-color-background-disabled-faded: #3A3A3A; +--rs-color-background-disabled-muted: #3A3A3A; --rs-color-border-disabled: #3E3E3E; --rs-color-foreground-disabled: #656565; --rs-color-background-elevation-base: #2C2C2C; --rs-color-background-elevation-raised: #2C2C2C; --rs-color-background-elevation-overlay: #2C2C2C; --rs-color-background-page: #2C2C2C; ---rs-color-background-page-faded: #1E1E1E; +--rs-color-background-page-muted: #1E1E1E; --rs-color-rgb-background-primary: 12.0105, 139.995, 232.99349999999998; ---rs-color-rgb-background-primary-faded: 56.9925, 66.9885, 96.00750000000001; +--rs-color-rgb-background-primary-muted: 56.9925, 66.9885, 96.00750000000001; +--rs-color-rgb-background-primary-highlighted-muted: 12.0105, 139.995, 232.99349999999998; --rs-color-rgb-background-critical: 223.992, 61.990500000000004, 26.009999999999998; ---rs-color-rgb-background-critical-faded: 96.00750000000001, 51, 41.9985; +--rs-color-rgb-background-critical-muted: 96.00750000000001, 51, 41.9985; +--rs-color-rgb-background-critical-highlighted-muted: 223.992, 61.990500000000004, 26.009999999999998; --rs-color-rgb-background-warning: 241.00050000000002, 196.98749999999998, 18.003; ---rs-color-rgb-background-warning-faded: 43.9875, 38.9895, 31.008; +--rs-color-rgb-background-warning-muted: 43.9875, 38.9895, 31.008; +--rs-color-rgb-background-warning-highlighted-muted: 241.00050000000002, 196.98749999999998, 18.003; --rs-color-rgb-background-positive: 24.990000000000002, 143.004, 80.988; ---rs-color-rgb-background-positive-faded: 60.996, 87.006, 73.0065; +--rs-color-rgb-background-positive-muted: 60.996, 87.006, 73.0065; +--rs-color-rgb-background-positive-highlighted-muted: 24.990000000000002, 143.004, 80.988; --rs-color-on-background-neutral: oklch(1 0 0); --rs-color-rgb-background-neutral: 68.0085, 68.0085, 68.0085; ---rs-color-rgb-background-neutral-faded: 55.998, 55.998, 55.998; +--rs-color-rgb-background-neutral-muted: 55.998, 55.998, 55.998; +--rs-color-rgb-background-neutral-highlighted-muted: 68.0085, 68.0085, 68.0085; --rs-color-rgb-background-disabled: 70.99199999999999, 70.99199999999999, 70.99199999999999; ---rs-color-rgb-background-disabled-faded: 58.0125, 58.0125, 58.0125; +--rs-color-rgb-background-disabled-muted: 58.0125, 58.0125, 58.0125; --rs-color-rgb-background-elevation-base: 43.9875, 43.9875, 43.9875; --rs-color-rgb-background-elevation-raised: 43.9875, 43.9875, 43.9875; --rs-color-rgb-background-elevation-overlay: 43.9875, 43.9875, 43.9875; --rs-color-rgb-background-page: 43.9875, 43.9875, 43.9875; ---rs-color-rgb-background-page-faded: 29.988, 29.988, 29.988; +--rs-color-rgb-background-page-muted: 29.988, 29.988, 29.988; --rs-shadow-border: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 6px 0px 1px rgba(1, 1, 1, 0.1); --rs-shadow-border-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); --rs-shadow-border-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); ---rs-shadow-border-faded: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 6px 0px 1px rgba(1, 1, 1, 0.08); ---rs-shadow-border-faded-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); ---rs-shadow-border-faded-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); +--rs-shadow-border-muted: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 6px 0px 1px rgba(1, 1, 1, 0.08); +--rs-shadow-border-muted-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); +--rs-shadow-border-muted-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); } \ No newline at end of file diff --git a/packages/reshaped/src/themes/figma/theme.json b/packages/reshaped/src/themes/figma/theme.json index 285bd582..8f20d51b 100644 --- a/packages/reshaped/src/themes/figma/theme.json +++ b/packages/reshaped/src/themes/figma/theme.json @@ -4,15 +4,19 @@ "hex": "#0D99FF", "hexDark": "#0C8CE9" }, - "backgroundPrimaryFaded": { + "backgroundPrimaryMuted": { "hex": "#E5F4FF", "hexDark": "#394360" }, + "backgroundPrimaryHighlightedMuted": { + "hex": "#0D99FF0F", + "hexDark": "#0C8CE90F" + }, "borderPrimary": { "hex": "#007BE5", "hexDark": "#7CC4F8" }, - "borderPrimaryFaded": { + "borderPrimaryMuted": { "hex": "#BDE3FF", "hexDark": "#2A4D72" }, @@ -24,15 +28,19 @@ "hex": "#F24822", "hexDark": "#E03E1A" }, - "backgroundCriticalFaded": { + "backgroundCriticalMuted": { "hex": "#FFE2E0", "hexDark": "#60332A" }, + "backgroundCriticalHighlightedMuted": { + "hex": "#F248220F", + "hexDark": "#E03E1A0F" + }, "borderCritical": { "hex": "#DC3412", "hexDark": "#FCA397" }, - "borderCriticalFaded": { + "borderCriticalMuted": { "hex": "#FFC7C2", "hexDark": "#803226" }, @@ -44,15 +52,19 @@ "hex": "#facc15", "hexDark": "#f1c512" }, - "backgroundWarningFaded": { + "backgroundWarningMuted": { "hex": "#fffae9", "hexDark": "#2c271f" }, + "backgroundWarningHighlightedMuted": { + "hex": "#facc150F", + "hexDark": "#f1c5120F" + }, "borderWarning": { "hex": "#cfa90f", "hexDark": "#b4920a" }, - "borderWarningFaded": { + "borderWarningMuted": { "hex": "#ece2c4", "hexDark": "#453c1e" }, @@ -64,15 +76,19 @@ "hex": "#14AE5C", "hexDark": "#198F51" }, - "backgroundPositiveFaded": { + "backgroundPositiveMuted": { "hex": "#DAECDF", "hexDark": "#3d5749" }, + "backgroundPositiveHighlightedMuted": { + "hex": "#14AE5C0F", + "hexDark": "#198F510F" + }, "borderPositive": { "hex": "#009951", "hexDark": "#79D297" }, - "borderPositiveFaded": { + "borderPositiveMuted": { "hex": "#BBDDC6", "hexDark": "#086338" }, @@ -84,15 +100,19 @@ "hex": "#DFE2EA", "hexDark": "#444444" }, - "backgroundNeutralFaded": { + "backgroundNeutralMuted": { "hex": "#F5F5F5", "hexDark": "#383838" }, + "backgroundNeutralHighlightedMuted": { + "hex": "#DFE2EA66", + "hexDark": "#44444466" + }, "borderNeutral": { "hex": "#E6E6E6", "hexDark": "#444444" }, - "borderNeutralFaded": { + "borderNeutralMuted": { "hex": "#E6E6E6", "hexDark": "#444444" }, @@ -100,7 +120,7 @@ "hex": "#191919", "hexDark": "#FFFFFF" }, - "foregroundNeutralFaded": { + "foregroundNeutralMuted": { "hex": "#474747", "hexDark": "#B2B2B2" }, @@ -108,7 +128,7 @@ "hex": "#e4e4e4", "hexDark": "#474747" }, - "backgroundDisabledFaded": { + "backgroundDisabledMuted": { "hex": "#F5F5F5", "hexDark": "#3A3A3A" }, @@ -136,7 +156,7 @@ "hex": "#FFFFFF", "hexDark": "#2C2C2C" }, - "backgroundPageFaded": { + "backgroundPageMuted": { "hex": "#FAFAFA", "hexDark": "#1E1E1E" }, @@ -156,10 +176,14 @@ "hex": "13.004999999999999, 153, 255", "hexDark": "12.0105, 139.995, 232.99349999999998" }, - "rgbBackgroundPrimaryFaded": { + "rgbBackgroundPrimaryMuted": { "hex": "228.99, 244.0095, 255", "hexDark": "56.9925, 66.9885, 96.00750000000001" }, + "rgbBackgroundPrimaryHighlightedMuted": { + "hex": "13.004999999999999, 153, 255", + "hexDark": "12.0105, 139.995, 232.99349999999998" + }, "onBackgroundCritical": { "oklch": { "mode": "oklch", @@ -178,10 +202,14 @@ "hex": "241.99499999999998, 72.012, 33.9915", "hexDark": "223.992, 61.990500000000004, 26.009999999999998" }, - "rgbBackgroundCriticalFaded": { + "rgbBackgroundCriticalMuted": { "hex": "255, 226.0065, 223.992", "hexDark": "96.00750000000001, 51, 41.9985" }, + "rgbBackgroundCriticalHighlightedMuted": { + "hex": "241.99499999999998, 72.012, 33.9915", + "hexDark": "223.992, 61.990500000000004, 26.009999999999998" + }, "onBackgroundWarning": { "oklch": { "mode": "oklch", @@ -200,10 +228,14 @@ "hex": "250.002, 204, 21.012", "hexDark": "241.00050000000002, 196.98749999999998, 18.003" }, - "rgbBackgroundWarningFaded": { + "rgbBackgroundWarningMuted": { "hex": "255, 250.002, 232.99349999999998", "hexDark": "43.9875, 38.9895, 31.008" }, + "rgbBackgroundWarningHighlightedMuted": { + "hex": "250.002, 204, 21.012", + "hexDark": "241.00050000000002, 196.98749999999998, 18.003" + }, "onBackgroundPositive": { "oklch": { "mode": "oklch", @@ -222,10 +254,14 @@ "hex": "19.992, 174.012, 92.004", "hexDark": "24.990000000000002, 143.004, 80.988" }, - "rgbBackgroundPositiveFaded": { + "rgbBackgroundPositiveMuted": { "hex": "217.9995, 236.0025, 222.9975", "hexDark": "60.996, 87.006, 73.0065" }, + "rgbBackgroundPositiveHighlightedMuted": { + "hex": "19.992, 174.012, 92.004", + "hexDark": "24.990000000000002, 143.004, 80.988" + }, "onBackgroundNeutral": { "oklch": { "mode": "oklch", @@ -244,15 +280,19 @@ "hex": "222.9975, 226.0065, 233.988", "hexDark": "68.0085, 68.0085, 68.0085" }, - "rgbBackgroundNeutralFaded": { + "rgbBackgroundNeutralMuted": { "hex": "245.004, 245.004, 245.004", "hexDark": "55.998, 55.998, 55.998" }, + "rgbBackgroundNeutralHighlightedMuted": { + "hex": "222.9975, 226.0065, 233.988", + "hexDark": "68.0085, 68.0085, 68.0085" + }, "rgbBackgroundDisabled": { "hex": "227.9955, 227.9955, 227.9955", "hexDark": "70.99199999999999, 70.99199999999999, 70.99199999999999" }, - "rgbBackgroundDisabledFaded": { + "rgbBackgroundDisabledMuted": { "hex": "245.004, 245.004, 245.004", "hexDark": "58.0125, 58.0125, 58.0125" }, @@ -272,7 +312,7 @@ "hex": "255, 255, 255", "hexDark": "43.9875, 43.9875, 43.9875" }, - "rgbBackgroundPageFaded": { + "rgbBackgroundPageMuted": { "hex": "250.002, 250.002, 250.002", "hexDark": "29.988, 29.988, 29.988" }, @@ -727,7 +767,7 @@ ] } }, - "borderFaded": { + "borderMuted": { "parts": [ { "offsetX": 0, @@ -783,7 +823,7 @@ ] } }, - "borderFadedRaised": { + "borderMutedRaised": { "parts": [ { "offsetX": 0, @@ -839,7 +879,7 @@ ] } }, - "borderFadedOverlay": { + "borderMutedOverlay": { "parts": [ { "offsetX": 0, diff --git a/packages/reshaped/src/themes/fragments/twitter/tailwind.css b/packages/reshaped/src/themes/fragments/twitter/tailwind.css index 83ad44c4..7bc42d46 100644 --- a/packages/reshaped/src/themes/fragments/twitter/tailwind.css +++ b/packages/reshaped/src/themes/fragments/twitter/tailwind.css @@ -1,42 +1,47 @@ @theme inline { --background-color-primary: var(--rs-color-background-primary); ---background-color-primary-faded: var(--rs-color-background-primary-faded); +--background-color-primary-muted: var(--rs-color-background-primary-muted); +--background-color-primary-highlighted-muted: var(--rs-color-background-primary-highlighted-muted); --border-color-primary: var(--rs-color-border-primary); --outline-color-primary: var(--rs-color-border-primary); ---border-color-primary-faded: var(--rs-color-border-primary-faded); ---outline-color-primary-faded: var(--rs-color-border-primary-faded); +--border-color-primary-muted: var(--rs-color-border-primary-muted); +--outline-color-primary-muted: var(--rs-color-border-primary-muted); --text-color-primary: var(--rs-color-foreground-primary); --background-color-critical: var(--rs-color-background-critical); ---background-color-critical-faded: var(--rs-color-background-critical-faded); +--background-color-critical-muted: var(--rs-color-background-critical-muted); +--background-color-critical-highlighted-muted: var(--rs-color-background-critical-highlighted-muted); --border-color-critical: var(--rs-color-border-critical); --outline-color-critical: var(--rs-color-border-critical); ---border-color-critical-faded: var(--rs-color-border-critical-faded); ---outline-color-critical-faded: var(--rs-color-border-critical-faded); +--border-color-critical-muted: var(--rs-color-border-critical-muted); +--outline-color-critical-muted: var(--rs-color-border-critical-muted); --text-color-critical: var(--rs-color-foreground-critical); --background-color-warning: var(--rs-color-background-warning); ---background-color-warning-faded: var(--rs-color-background-warning-faded); +--background-color-warning-muted: var(--rs-color-background-warning-muted); +--background-color-warning-highlighted-muted: var(--rs-color-background-warning-highlighted-muted); --border-color-warning: var(--rs-color-border-warning); --outline-color-warning: var(--rs-color-border-warning); ---border-color-warning-faded: var(--rs-color-border-warning-faded); ---outline-color-warning-faded: var(--rs-color-border-warning-faded); +--border-color-warning-muted: var(--rs-color-border-warning-muted); +--outline-color-warning-muted: var(--rs-color-border-warning-muted); --text-color-warning: var(--rs-color-foreground-warning); --background-color-positive: var(--rs-color-background-positive); ---background-color-positive-faded: var(--rs-color-background-positive-faded); +--background-color-positive-muted: var(--rs-color-background-positive-muted); +--background-color-positive-highlighted-muted: var(--rs-color-background-positive-highlighted-muted); --border-color-positive: var(--rs-color-border-positive); --outline-color-positive: var(--rs-color-border-positive); ---border-color-positive-faded: var(--rs-color-border-positive-faded); ---outline-color-positive-faded: var(--rs-color-border-positive-faded); +--border-color-positive-muted: var(--rs-color-border-positive-muted); +--outline-color-positive-muted: var(--rs-color-border-positive-muted); --text-color-positive: var(--rs-color-foreground-positive); --background-color-neutral: var(--rs-color-background-neutral); ---background-color-neutral-faded: var(--rs-color-background-neutral-faded); +--background-color-neutral-muted: var(--rs-color-background-neutral-muted); +--background-color-neutral-highlighted-muted: var(--rs-color-background-neutral-highlighted-muted); --border-color-neutral: var(--rs-color-border-neutral); --outline-color-neutral: var(--rs-color-border-neutral); ---border-color-neutral-faded: var(--rs-color-border-neutral-faded); ---outline-color-neutral-faded: var(--rs-color-border-neutral-faded); +--border-color-neutral-muted: var(--rs-color-border-neutral-muted); +--outline-color-neutral-muted: var(--rs-color-border-neutral-muted); --text-color-neutral: var(--rs-color-foreground-neutral); ---text-color-neutral-faded: var(--rs-color-foreground-neutral-faded); +--text-color-neutral-muted: var(--rs-color-foreground-neutral-muted); --background-color-disabled: var(--rs-color-background-disabled); ---background-color-disabled-faded: var(--rs-color-background-disabled-faded); +--background-color-disabled-muted: var(--rs-color-background-disabled-muted); --border-color-disabled: var(--rs-color-border-disabled); --outline-color-disabled: var(--rs-color-border-disabled); --text-color-disabled: var(--rs-color-foreground-disabled); @@ -44,7 +49,7 @@ --background-color-elevation-raised: var(--rs-color-background-elevation-raised); --background-color-elevation-overlay: var(--rs-color-background-elevation-overlay); --background-color-page: var(--rs-color-background-page); ---background-color-page-faded: var(--rs-color-background-page-faded); +--background-color-page-muted: var(--rs-color-background-page-muted); --color-brand: var(--rs-color-brand); --color-white: var(--rs-color-white); --color-black: var(--rs-color-black); @@ -73,9 +78,9 @@ --shadow-border: var(--rs-shadow-border); --shadow-border-raised: var(--rs-shadow-border-raised); --shadow-border-overlay: var(--rs-shadow-border-overlay); ---shadow-border-faded: var(--rs-shadow-border-faded); ---shadow-border-faded-raised: var(--rs-shadow-border-faded-raised); ---shadow-border-faded-overlay: var(--rs-shadow-border-faded-overlay); +--shadow-border-muted: var(--rs-shadow-border-muted); +--shadow-border-muted-raised: var(--rs-shadow-border-muted-raised); +--shadow-border-muted-overlay: var(--rs-shadow-border-muted-overlay); --shadow-raised: var(--rs-shadow-raised); --shadow-overlay: var(--rs-shadow-overlay); --breakpoint-m: 660px; diff --git a/packages/reshaped/src/themes/slate/tailwind.css b/packages/reshaped/src/themes/slate/tailwind.css index 93abd3cc..73a228d6 100644 --- a/packages/reshaped/src/themes/slate/tailwind.css +++ b/packages/reshaped/src/themes/slate/tailwind.css @@ -1,42 +1,47 @@ @theme inline { --background-color-primary: var(--rs-color-background-primary); ---background-color-primary-faded: var(--rs-color-background-primary-faded); +--background-color-primary-muted: var(--rs-color-background-primary-muted); +--background-color-primary-highlighted-muted: var(--rs-color-background-primary-highlighted-muted); --border-color-primary: var(--rs-color-border-primary); --outline-color-primary: var(--rs-color-border-primary); ---border-color-primary-faded: var(--rs-color-border-primary-faded); ---outline-color-primary-faded: var(--rs-color-border-primary-faded); +--border-color-primary-muted: var(--rs-color-border-primary-muted); +--outline-color-primary-muted: var(--rs-color-border-primary-muted); --text-color-primary: var(--rs-color-foreground-primary); --background-color-critical: var(--rs-color-background-critical); ---background-color-critical-faded: var(--rs-color-background-critical-faded); +--background-color-critical-muted: var(--rs-color-background-critical-muted); +--background-color-critical-highlighted-muted: var(--rs-color-background-critical-highlighted-muted); --border-color-critical: var(--rs-color-border-critical); --outline-color-critical: var(--rs-color-border-critical); ---border-color-critical-faded: var(--rs-color-border-critical-faded); ---outline-color-critical-faded: var(--rs-color-border-critical-faded); +--border-color-critical-muted: var(--rs-color-border-critical-muted); +--outline-color-critical-muted: var(--rs-color-border-critical-muted); --text-color-critical: var(--rs-color-foreground-critical); --background-color-warning: var(--rs-color-background-warning); ---background-color-warning-faded: var(--rs-color-background-warning-faded); +--background-color-warning-muted: var(--rs-color-background-warning-muted); +--background-color-warning-highlighted-muted: var(--rs-color-background-warning-highlighted-muted); --border-color-warning: var(--rs-color-border-warning); --outline-color-warning: var(--rs-color-border-warning); ---border-color-warning-faded: var(--rs-color-border-warning-faded); ---outline-color-warning-faded: var(--rs-color-border-warning-faded); +--border-color-warning-muted: var(--rs-color-border-warning-muted); +--outline-color-warning-muted: var(--rs-color-border-warning-muted); --text-color-warning: var(--rs-color-foreground-warning); --background-color-positive: var(--rs-color-background-positive); ---background-color-positive-faded: var(--rs-color-background-positive-faded); +--background-color-positive-muted: var(--rs-color-background-positive-muted); +--background-color-positive-highlighted-muted: var(--rs-color-background-positive-highlighted-muted); --border-color-positive: var(--rs-color-border-positive); --outline-color-positive: var(--rs-color-border-positive); ---border-color-positive-faded: var(--rs-color-border-positive-faded); ---outline-color-positive-faded: var(--rs-color-border-positive-faded); +--border-color-positive-muted: var(--rs-color-border-positive-muted); +--outline-color-positive-muted: var(--rs-color-border-positive-muted); --text-color-positive: var(--rs-color-foreground-positive); --background-color-neutral: var(--rs-color-background-neutral); ---background-color-neutral-faded: var(--rs-color-background-neutral-faded); +--background-color-neutral-muted: var(--rs-color-background-neutral-muted); +--background-color-neutral-highlighted-muted: var(--rs-color-background-neutral-highlighted-muted); --border-color-neutral: var(--rs-color-border-neutral); --outline-color-neutral: var(--rs-color-border-neutral); ---border-color-neutral-faded: var(--rs-color-border-neutral-faded); ---outline-color-neutral-faded: var(--rs-color-border-neutral-faded); +--border-color-neutral-muted: var(--rs-color-border-neutral-muted); +--outline-color-neutral-muted: var(--rs-color-border-neutral-muted); --text-color-neutral: var(--rs-color-foreground-neutral); ---text-color-neutral-faded: var(--rs-color-foreground-neutral-faded); +--text-color-neutral-muted: var(--rs-color-foreground-neutral-muted); --background-color-disabled: var(--rs-color-background-disabled); ---background-color-disabled-faded: var(--rs-color-background-disabled-faded); +--background-color-disabled-muted: var(--rs-color-background-disabled-muted); --border-color-disabled: var(--rs-color-border-disabled); --outline-color-disabled: var(--rs-color-border-disabled); --text-color-disabled: var(--rs-color-foreground-disabled); @@ -44,7 +49,7 @@ --background-color-elevation-raised: var(--rs-color-background-elevation-raised); --background-color-elevation-overlay: var(--rs-color-background-elevation-overlay); --background-color-page: var(--rs-color-background-page); ---background-color-page-faded: var(--rs-color-background-page-faded); +--background-color-page-muted: var(--rs-color-background-page-muted); --color-brand: var(--rs-color-brand); --color-white: var(--rs-color-white); --color-black: var(--rs-color-black); @@ -77,9 +82,9 @@ --shadow-border: var(--rs-shadow-border); --shadow-border-raised: var(--rs-shadow-border-raised); --shadow-border-overlay: var(--rs-shadow-border-overlay); ---shadow-border-faded: var(--rs-shadow-border-faded); ---shadow-border-faded-raised: var(--rs-shadow-border-faded-raised); ---shadow-border-faded-overlay: var(--rs-shadow-border-faded-overlay); +--shadow-border-muted: var(--rs-shadow-border-muted); +--shadow-border-muted-raised: var(--rs-shadow-border-muted-raised); +--shadow-border-muted-overlay: var(--rs-shadow-border-muted-overlay); --shadow-raised: var(--rs-shadow-raised); --shadow-overlay: var(--rs-shadow-overlay); --breakpoint-m: 660px; diff --git a/packages/reshaped/src/themes/slate/theme.css b/packages/reshaped/src/themes/slate/theme.css index b4f02cb1..a84db315 100644 --- a/packages/reshaped/src/themes/slate/theme.css +++ b/packages/reshaped/src/themes/slate/theme.css @@ -110,125 +110,145 @@ [data-rs-theme~="slate"][data-rs-color-mode="light"] { --rs-color-background-primary: oklch(0.55 0.24 262.67); ---rs-color-background-primary-faded: oklch(0.97 0.02 262.67); +--rs-color-background-primary-muted: oklch(0.98 0.02 262.67); +--rs-color-background-primary-highlighted-muted: oklch(0.55 0.24 262.67 / 0.06); --rs-color-border-primary: oklch(0.47 0.24 262.67); ---rs-color-border-primary-faded: oklch(0.92 0.03 262.67); ---rs-color-foreground-primary: oklch(0.5 0.24 262.67); ---rs-color-background-critical: oklch(0.59 0.22 26.97); ---rs-color-background-critical-faded: oklch(0.97 0.02 26.97); ---rs-color-border-critical: oklch(0.51 0.22 26.97); ---rs-color-border-critical-faded: oklch(0.92 0.03 26.97); ---rs-color-foreground-critical: oklch(0.5 0.22 26.97); ---rs-color-background-warning: oklch(0.83 0.2 80); ---rs-color-background-warning-faded: oklch(0.97 0.04 80); ---rs-color-border-warning: oklch(0.75 0.2 80); ---rs-color-border-warning-faded: oklch(0.92 0.05 80); ---rs-color-foreground-warning: oklch(0.5 0.2 80); ---rs-color-background-positive: oklch(0.53 0.13 153.78); ---rs-color-background-positive-faded: oklch(0.97 0.02 153.78); ---rs-color-border-positive: oklch(0.45 0.13 153.78); ---rs-color-border-positive-faded: oklch(0.92 0.03 153.78); ---rs-color-foreground-positive: oklch(0.5 0.13 153.78); ---rs-color-background-neutral: oklch(0.92 0.01 262.67); ---rs-color-background-neutral-faded: oklch(0.97 0 262.67); ---rs-color-border-neutral: oklch(0 0.01 262.67 / 0.12); ---rs-color-border-neutral-faded: oklch(0 0 262.67 / 0.08); ---rs-color-foreground-neutral: oklch(0.2 0.01 262.67); ---rs-color-foreground-neutral-faded: oklch(0.45 0.01 262.67); ---rs-color-background-disabled: oklch(0.95 0 262.67); ---rs-color-background-disabled-faded: oklch(0.98 0 262.67); ---rs-color-border-disabled: oklch(0 0.01 262.67 / 0.06); ---rs-color-foreground-disabled: oklch(0.84 0 262.67); ---rs-color-background-elevation-base: oklch(1 0 262.67); ---rs-color-background-elevation-raised: oklch(1 0 262.67); ---rs-color-background-elevation-overlay: oklch(1 0 262.67); ---rs-color-background-page: oklch(1 0 262.67); ---rs-color-background-page-faded: oklch(0.97 0 262.67); +--rs-color-border-primary-muted: oklch(0.95 0.02 262.67); +--rs-color-foreground-primary: oklch(0.52 0.24 262.67); +--rs-color-background-critical: oklch(0.59 0.205 20.28); +--rs-color-background-critical-muted: oklch(0.98 0.02 20.28); +--rs-color-background-critical-highlighted-muted: oklch(0.59 0.205 20.28 / 0.06); +--rs-color-border-critical: oklch(0.51 0.205 20.28); +--rs-color-border-critical-muted: oklch(0.95 0.02 20.28); +--rs-color-foreground-critical: oklch(0.52 0.205 20.28); +--rs-color-background-warning: oklch(0.82 0.22 80); +--rs-color-background-warning-muted: oklch(0.98 0.04 80); +--rs-color-background-warning-highlighted-muted: oklch(0.82 0.22 80 / 0.06); +--rs-color-border-warning: oklch(0.74 0.22 80); +--rs-color-border-warning-muted: oklch(0.95 0.04 80); +--rs-color-foreground-warning: oklch(0.52 0.22 80); +--rs-color-background-positive: oklch(0.55 0.13 151.8); +--rs-color-background-positive-muted: oklch(0.98 0.02 151.8); +--rs-color-background-positive-highlighted-muted: oklch(0.55 0.13 151.8 / 0.06); +--rs-color-border-positive: oklch(0.47 0.13 151.8); +--rs-color-border-positive-muted: oklch(0.95 0.02 151.8); +--rs-color-foreground-positive: oklch(0.52 0.13 151.8); +--rs-color-background-neutral: oklch(0.94 0 89.88); +--rs-color-background-neutral-muted: oklch(0 0 89.88 / 0.03); +--rs-color-background-neutral-highlighted-muted: oklch(0.94 0 89.88 / 0.4); +--rs-color-border-neutral: oklch(0 0 89.88 / 0.12); +--rs-color-border-neutral-muted: oklch(0 0 89.88 / 0.08); +--rs-color-foreground-neutral: oklch(0.24 0 89.88); +--rs-color-foreground-neutral-muted: oklch(0.49 0 89.88); +--rs-color-background-disabled: oklch(0.95 0 89.88); +--rs-color-background-disabled-muted: oklch(0.98 0 89.88); +--rs-color-border-disabled: oklch(0 0 89.88 / 0.06); +--rs-color-foreground-disabled: oklch(0.84 0 89.88); +--rs-color-background-elevation-base: oklch(1 0 89.88); +--rs-color-background-elevation-raised: oklch(1 0 89.88); +--rs-color-background-elevation-overlay: oklch(1 0 89.88); +--rs-color-background-page: oklch(1 0 89.88); +--rs-color-background-page-muted: oklch(0.98 0 89.88); --rs-color-rgb-background-primary: 23.536499999999997, 95.6505, 250.1295; ---rs-color-rgb-background-primary-faded: 238.017, 245.4885, 259.182; ---rs-color-rgb-background-critical: 226.593, 39.168, 41.0295; ---rs-color-rgb-background-critical-faded: 258.5445, 240.3885, 237.8895; ---rs-color-rgb-background-warning: 265.7865, 180.5145, -70.15050000000001; ---rs-color-rgb-background-warning-faded: 259.6665, 242.862, 215.577; ---rs-color-rgb-background-positive: 14.177999999999999, 128.673, 70.788; ---rs-color-rgb-background-positive-faded: 235.4415, 249.3645, 239.0115; +--rs-color-rgb-background-primary-muted: 241.332, 248.829, 262.548; +--rs-color-rgb-background-primary-highlighted-muted: 23.536499999999997, 95.6505, 250.1295; +--rs-color-rgb-background-critical: 220.473, 49.725, 70.278; +--rs-color-rgb-background-critical-muted: 261.936, 243.49949999999998, 242.76; +--rs-color-rgb-background-critical-highlighted-muted: 220.473, 49.725, 70.278; +--rs-color-rgb-background-warning: 268.515, 174.16500000000002, -89.811; +--rs-color-rgb-background-warning-muted: 263.0325, 246.20250000000001, 218.86649999999997; +--rs-color-rgb-background-warning-highlighted-muted: 268.515, 174.16500000000002, -89.811; +--rs-color-rgb-background-positive: 34.7565, 134.334, 73.21050000000001; +--rs-color-rgb-background-positive-muted: 239.13899999999998, 252.6285, 241.893; +--rs-color-rgb-background-positive-highlighted-muted: 34.7565, 134.334, 73.21050000000001; --rs-color-on-background-neutral: oklch(0 0 0); ---rs-color-rgb-background-neutral: 224.96099999999998, 228.6585, 235.416; ---rs-color-rgb-background-neutral-faded: 244.953, 244.953, 244.953; +--rs-color-rgb-background-neutral: 234.9825, 234.9825, 234.9825; +--rs-color-rgb-background-neutral-muted: 0, 0, 0; +--rs-color-rgb-background-neutral-highlighted-muted: 234.9825, 234.9825, 234.9825; --rs-color-rgb-background-disabled: 238.29749999999999, 238.29749999999999, 238.29749999999999; ---rs-color-rgb-background-disabled-faded: 248.2935, 248.2935, 248.2935; +--rs-color-rgb-background-disabled-muted: 248.2935, 248.2935, 248.2935; --rs-color-rgb-background-elevation-base: 255, 255, 255; --rs-color-rgb-background-elevation-raised: 255, 255, 255; --rs-color-rgb-background-elevation-overlay: 255, 255, 255; --rs-color-rgb-background-page: 255, 255, 255; ---rs-color-rgb-background-page-faded: 244.953, 244.953, 244.953; +--rs-color-rgb-background-page-muted: 248.2935, 248.2935, 248.2935; --rs-shadow-border: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 6px 0px 1px rgba(0, 0, 0, 0.1); --rs-shadow-border-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); --rs-shadow-border-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); ---rs-shadow-border-faded: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 6px 0px 1px rgba(0, 0, 0, 0.08); ---rs-shadow-border-faded-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); ---rs-shadow-border-faded-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); +--rs-shadow-border-muted: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 6px 0px 1px rgba(0, 0, 0, 0.08); +--rs-shadow-border-muted-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); +--rs-shadow-border-muted-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); } [data-rs-theme~="slate"][data-rs-color-mode="dark"] { --rs-color-background-primary: oklch(0.5498 0.192 262.67); ---rs-color-background-primary-faded: oklch(0.25 0.0384 262.67); +--rs-color-background-primary-muted: oklch(0.25 0.0256 262.67); +--rs-color-background-primary-highlighted-muted: oklch(0.5498 0.192 262.67 / 0.06); --rs-color-border-primary: oklch(0.6498 0.192 262.67); ---rs-color-border-primary-faded: oklch(0.35 0.0384 262.67); +--rs-color-border-primary-muted: oklch(0.31 0.0256 262.67); --rs-color-foreground-primary: oklch(0.75 0.204 262.67); ---rs-color-background-critical: oklch(0.5874 0.176 26.97); ---rs-color-background-critical-faded: oklch(0.25 0.0352 26.97); ---rs-color-border-critical: oklch(0.6874 0.176 26.97); ---rs-color-border-critical-faded: oklch(0.35 0.0352 26.97); ---rs-color-foreground-critical: oklch(0.75 0.187 26.97); ---rs-color-background-warning: oklch(0.8036 0.16 80); ---rs-color-background-warning-faded: oklch(0.25 0.032 80); ---rs-color-border-warning: oklch(0.9036 0.16 80); ---rs-color-border-warning-faded: oklch(0.35 0.032 80); ---rs-color-foreground-warning: oklch(0.75 0.17 80); ---rs-color-background-positive: oklch(0.5162 0.104 153.78); ---rs-color-background-positive-faded: oklch(0.25 0.0208 153.78); ---rs-color-border-positive: oklch(0.6162 0.104 153.78); ---rs-color-border-positive-faded: oklch(0.35 0.0208 153.78); ---rs-color-foreground-positive: oklch(0.75 0.1105 153.78); ---rs-color-background-neutral: oklch(0.36 0.008 262.67); ---rs-color-background-neutral-faded: oklch(0.25 0 262.67); ---rs-color-border-neutral: oklch(1 0.008 262.67 / 0.16); ---rs-color-border-neutral-faded: oklch(1 0 262.67 / 0.08); ---rs-color-foreground-neutral: oklch(0.96 0.008 262.67); ---rs-color-foreground-neutral-faded: oklch(0.81 0.008 262.67); ---rs-color-background-disabled: oklch(0.28 0 262.67); ---rs-color-background-disabled-faded: oklch(0.23 0 262.67); ---rs-color-border-disabled: oklch(0.28 0 262.67); ---rs-color-foreground-disabled: oklch(0.4 0 262.67); ---rs-color-background-elevation-base: oklch(0.2 0 262.67); ---rs-color-background-elevation-raised: oklch(0.21 0 262.67); ---rs-color-background-elevation-overlay: oklch(0.22 0 262.67); ---rs-color-background-page: oklch(0.16 0 262.67); ---rs-color-background-page-faded: oklch(0.18 0 262.67); +--rs-color-background-critical: oklch(0.5842 0.164 20.28); +--rs-color-background-critical-muted: oklch(0.25 0.0219 20.28); +--rs-color-background-critical-highlighted-muted: oklch(0.5842 0.164 20.28 / 0.06); +--rs-color-border-critical: oklch(0.6842 0.164 20.28); +--rs-color-border-critical-muted: oklch(0.31 0.0219 20.28); +--rs-color-foreground-critical: oklch(0.75 0.1742 20.28); +--rs-color-background-warning: oklch(0.8108 0.176 80); +--rs-color-background-warning-muted: oklch(0.25 0.0235 80); +--rs-color-background-warning-highlighted-muted: oklch(0.8108 0.176 80 / 0.06); +--rs-color-border-warning: oklch(0.9108 0.176 80); +--rs-color-border-warning-muted: oklch(0.31 0.0235 80); +--rs-color-foreground-warning: oklch(0.75 0.187 80); +--rs-color-background-positive: oklch(0.527 0.104 151.8); +--rs-color-background-positive-muted: oklch(0.25 0.0139 151.8); +--rs-color-background-positive-highlighted-muted: oklch(0.527 0.104 151.8 / 0.06); +--rs-color-border-positive: oklch(0.627 0.104 151.8); +--rs-color-border-positive-muted: oklch(0.31 0.0139 151.8); +--rs-color-foreground-positive: oklch(0.75 0.1105 151.8); +--rs-color-background-neutral: oklch(0.32 0 89.88); +--rs-color-background-neutral-muted: oklch(1 0 89.88 / 0.03); +--rs-color-background-neutral-highlighted-muted: oklch(0.32 0 89.88 / 0.48); +--rs-color-border-neutral: oklch(1 0 89.88 / 0.12); +--rs-color-border-neutral-muted: oklch(1 0 89.88 / 0.08); +--rs-color-foreground-neutral: oklch(0.96 0 89.88); +--rs-color-foreground-neutral-muted: oklch(0.81 0 89.88); +--rs-color-background-disabled: oklch(0.28 0 89.88); +--rs-color-background-disabled-muted: oklch(0.23 0 89.88); +--rs-color-border-disabled: oklch(1 0 89.88 / 0.04); +--rs-color-foreground-disabled: oklch(0.4 0 89.88); +--rs-color-background-elevation-base: oklch(0.2 0 89.88); +--rs-color-background-elevation-raised: oklch(0.215 0 89.88); +--rs-color-background-elevation-overlay: oklch(0.23 0 89.88); +--rs-color-background-page: oklch(0.16 0 89.88); +--rs-color-background-page-muted: oklch(0.18 0 89.88); --rs-color-rgb-background-primary: 47.277, 104.0655, 223.3545; ---rs-color-rgb-background-primary-faded: 23.6385, 33.456, 52.122; ---rs-color-rgb-background-critical: 208.437, 69.87, 62.526; ---rs-color-rgb-background-critical-faded: 48.6285, 26.877, 24.378; ---rs-color-rgb-background-warning: 244.1625, 177.3525, 31.7985; ---rs-color-rgb-background-warning-faded: 41.6925, 31.900499999999997, 15.1215; ---rs-color-rgb-background-positive: 45.5685, 120.86999999999999, 75.1995; ---rs-color-rgb-background-positive-faded: 25.9335, 36.643499999999996, 29.0445; +--rs-color-rgb-background-primary-muted: 27.0555, 33.6855, 46.104; +--rs-color-rgb-background-primary-highlighted-muted: 47.277, 104.0655, 223.3545; +--rs-color-rgb-background-critical: 202.2405, 73.032, 80.886; +--rs-color-rgb-background-critical-muted: 43.3755, 29.5035, 29.172; +--rs-color-rgb-background-critical-highlighted-muted: 202.2405, 73.032, 80.886; +--rs-color-rgb-background-warning: 251.6595, 177.60750000000002, -35.9805; +--rs-color-rgb-background-warning-muted: 39.576, 32.4615, 20.655; +--rs-color-rgb-background-warning-highlighted-muted: 251.6595, 177.60750000000002, -35.9805; +--rs-color-rgb-background-positive: 52.810500000000005, 123.75150000000001, 75.786; +--rs-color-rgb-background-positive-muted: 28.866, 35.6235, 30.345; +--rs-color-rgb-background-positive-highlighted-muted: 52.810500000000005, 123.75150000000001, 75.786; --rs-color-on-background-neutral: oklch(1 0 0); ---rs-color-rgb-background-neutral: 58.8285, 61.149, 65.43299999999999; ---rs-color-rgb-background-neutral-faded: 33.5325, 33.5325, 33.5325; +--rs-color-rgb-background-neutral: 50.7195, 50.7195, 50.7195; +--rs-color-rgb-background-neutral-muted: 255, 255, 255; +--rs-color-rgb-background-neutral-highlighted-muted: 50.7195, 50.7195, 50.7195; --rs-color-rgb-background-disabled: 40.774499999999996, 40.774499999999996, 40.774499999999996; ---rs-color-rgb-background-disabled-faded: 28.815, 28.815, 28.815; +--rs-color-rgb-background-disabled-muted: 28.815, 28.815, 28.815; --rs-color-rgb-background-elevation-base: 21.9555, 21.9555, 21.9555; ---rs-color-rgb-background-elevation-raised: 24.225, 24.225, 24.225; ---rs-color-rgb-background-elevation-overlay: 26.52, 26.52, 26.52; +--rs-color-rgb-background-elevation-raised: 25.372500000000002, 25.372500000000002, 25.372500000000002; +--rs-color-rgb-background-elevation-overlay: 28.815, 28.815, 28.815; --rs-color-rgb-background-page: 13.209, 13.209, 13.209; ---rs-color-rgb-background-page-faded: 17.5185, 17.5185, 17.5185; +--rs-color-rgb-background-page-muted: 17.5185, 17.5185, 17.5185; --rs-shadow-border: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 6px 0px 1px rgba(1, 1, 1, 0.1); --rs-shadow-border-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); --rs-shadow-border-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); ---rs-shadow-border-faded: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 6px 0px 1px rgba(1, 1, 1, 0.08); ---rs-shadow-border-faded-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); ---rs-shadow-border-faded-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); +--rs-shadow-border-muted: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 6px 0px 1px rgba(1, 1, 1, 0.08); +--rs-shadow-border-muted-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); +--rs-shadow-border-muted-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); } \ No newline at end of file diff --git a/packages/reshaped/src/themes/slate/theme.json b/packages/reshaped/src/themes/slate/theme.json index 4e8bcc55..388ffc67 100644 --- a/packages/reshaped/src/themes/slate/theme.json +++ b/packages/reshaped/src/themes/slate/theme.json @@ -16,21 +16,39 @@ "hex": "#1860fa", "hexDark": "#2f68df" }, - "backgroundPrimaryFaded": { + "backgroundPrimaryMuted": { "oklch": { - "l": 0.97, + "l": 0.98, "c": 0.02, "h": 262.67, "mode": "oklch" }, "oklchDark": { "l": 0.25, - "c": 0.038400000000000004, + "c": 0.0256, "h": 262.67, "mode": "oklch" }, - "hex": "#eef5ff", - "hexDark": "#182134" + "hex": "#f1f9ff", + "hexDark": "#1b222e" + }, + "backgroundPrimaryHighlightedMuted": { + "oklch": { + "l": 0.55, + "c": 0.24, + "h": 262.67, + "mode": "oklch", + "alpha": 0.06 + }, + "oklchDark": { + "l": 0.54984, + "c": 0.192, + "h": 262.67, + "mode": "oklch", + "alpha": 0.06 + }, + "hex": "#1860fa0f", + "hexDark": "#2f68df0f" }, "borderPrimary": { "oklch": { @@ -48,25 +66,25 @@ "hex": "#0043de", "hexDark": "#4c88ff" }, - "borderPrimaryFaded": { + "borderPrimaryMuted": { "oklch": { - "l": 0.9199999999999999, - "c": 0.03, + "l": 0.95, + "c": 0.02, "h": 262.67, "mode": "oklch" }, "oklchDark": { - "l": 0.35, - "c": 0.038400000000000004, + "l": 0.31, + "c": 0.0256, "h": 262.67, "mode": "oklch" }, - "hex": "#dae5f9", - "hexDark": "#303b4f" + "hex": "#e7effc", + "hexDark": "#29303e" }, "foregroundPrimary": { "oklch": { - "l": 0.5, + "l": 0.52, "c": 0.24, "h": 262.67, "mode": "oklch" @@ -77,311 +95,385 @@ "h": 262.67, "mode": "oklch" }, - "hex": "#034ee8", + "hex": "#0c55ef", "hexDark": "#65a7ff" }, "backgroundCritical": { "oklch": { "l": 0.59, - "c": 0.22, - "h": 26.97, + "c": 0.205, + "h": 20.28, "mode": "oklch" }, "oklchDark": { - "l": 0.5874079999999999, - "c": 0.17600000000000002, - "h": 26.97, + "l": 0.584168, + "c": 0.164, + "h": 20.28, "mode": "oklch" }, - "hex": "#e32729", - "hexDark": "#d0463f" + "hex": "#dc3246", + "hexDark": "#ca4951" }, - "backgroundCriticalFaded": { + "backgroundCriticalMuted": { "oklch": { - "l": 0.97, + "l": 0.98, "c": 0.02, - "h": 26.97, + "h": 20.28, "mode": "oklch" }, "oklchDark": { "l": 0.25, - "c": 0.0352, - "h": 26.97, + "c": 0.021866666666666666, + "h": 20.28, "mode": "oklch" }, - "hex": "#fff0ee", - "hexDark": "#311b18" + "hex": "#fff3f3", + "hexDark": "#2b1e1d" + }, + "backgroundCriticalHighlightedMuted": { + "oklch": { + "l": 0.59, + "c": 0.205, + "h": 20.28, + "mode": "oklch", + "alpha": 0.06 + }, + "oklchDark": { + "l": 0.584168, + "c": 0.164, + "h": 20.28, + "mode": "oklch", + "alpha": 0.06 + }, + "hex": "#dc32460f", + "hexDark": "#ca49510f" }, "borderCritical": { "oklch": { "l": 0.51, - "c": 0.22, - "h": 26.97, + "c": 0.205, + "h": 20.28, "mode": "oklch" }, "oklchDark": { - "l": 0.6874079999999999, - "c": 0.17600000000000002, - "h": 26.97, + "l": 0.684168, + "c": 0.164, + "h": 20.28, "mode": "oklch" }, - "hex": "#c50006", - "hexDark": "#f4675c" + "hex": "#c0002f", + "hexDark": "#ed696e" }, - "borderCriticalFaded": { + "borderCriticalMuted": { "oklch": { - "l": 0.9199999999999999, - "c": 0.03, - "h": 26.97, + "l": 0.95, + "c": 0.02, + "h": 20.28, "mode": "oklch" }, "oklchDark": { - "l": 0.35, - "c": 0.0352, - "h": 26.97, + "l": 0.31, + "c": 0.021866666666666666, + "h": 20.28, "mode": "oklch" }, - "hex": "#f8deda", - "hexDark": "#4b3431" + "hex": "#fceae9", + "hexDark": "#3b2c2c" }, "foregroundCritical": { "oklch": { - "l": 0.5, - "c": 0.22, - "h": 26.97, + "l": 0.52, + "c": 0.205, + "h": 20.28, "mode": "oklch" }, "oklchDark": { "l": 0.75, - "c": 0.187, - "h": 26.97, + "c": 0.17425, + "h": 20.28, "mode": "oklch" }, - "hex": "#c20001", - "hexDark": "#ff766a" + "hex": "#c30a32", + "hexDark": "#ff7a7e" }, "backgroundWarning": { "oklch": { - "l": 0.83, - "c": 0.2, + "l": 0.82, + "c": 0.22, "h": 80, "mode": "oklch" }, "oklchDark": { - "l": 0.8036, - "c": 0.16000000000000003, + "l": 0.810784, + "c": 0.17600000000000002, "h": 80, "mode": "oklch" }, - "hex": "#ffb500", - "hexDark": "#f4b120" + "hex": "#ffae00", + "hexDark": "#fcb200" }, - "backgroundWarningFaded": { + "backgroundWarningMuted": { "oklch": { - "l": 0.97, + "l": 0.98, "c": 0.04, "h": 80, "mode": "oklch" }, "oklchDark": { "l": 0.25, - "c": 0.03200000000000001, + "c": 0.02346666666666667, "h": 80, "mode": "oklch" }, - "hex": "#fff3d8", - "hexDark": "#2a200f" + "hex": "#fff6db", + "hexDark": "#282015" + }, + "backgroundWarningHighlightedMuted": { + "oklch": { + "l": 0.82, + "c": 0.22, + "h": 80, + "mode": "oklch", + "alpha": 0.06 + }, + "oklchDark": { + "l": 0.810784, + "c": 0.17600000000000002, + "h": 80, + "mode": "oklch", + "alpha": 0.06 + }, + "hex": "#ffae000f", + "hexDark": "#fcb2000f" }, "borderWarning": { "oklch": { - "l": 0.75, - "c": 0.2, + "l": 0.74, + "c": 0.22, "h": 80, "mode": "oklch" }, "oklchDark": { - "l": 0.9036, - "c": 0.16000000000000003, + "l": 0.9107839999999999, + "c": 0.17600000000000002, "h": 80, "mode": "oklch" }, - "hex": "#ee9a00", - "hexDark": "#ffd250" + "hex": "#f19400", + "hexDark": "#ffd236" }, - "borderWarningFaded": { + "borderWarningMuted": { "oklch": { - "l": 0.9199999999999999, - "c": 0.05, + "l": 0.95, + "c": 0.04, "h": 80, "mode": "oklch" }, "oklchDark": { - "l": 0.35, - "c": 0.03200000000000001, + "l": 0.31, + "c": 0.02346666666666667, "h": 80, "mode": "oklch" }, - "hex": "#f6e2c0", - "hexDark": "#433927" + "hex": "#fdecd1", + "hexDark": "#372f23" }, "foregroundWarning": { "oklch": { - "l": 0.5, - "c": 0.2, + "l": 0.52, + "c": 0.22, "h": 80, "mode": "oklch" }, "oklchDark": { "l": 0.75, - "c": 0.17, + "c": 0.187, "h": 80, "mode": "oklch" }, - "hex": "#9c4c00", - "hexDark": "#e59f00" + "hex": "#a74e00", + "hexDark": "#ea9c00" }, "backgroundPositive": { "oklch": { - "l": 0.53, + "l": 0.55, "c": 0.13, - "h": 153.78, + "h": 151.8, "mode": "oklch" }, "oklchDark": { - "l": 0.516176, + "l": 0.52696, "c": 0.10400000000000001, - "h": 153.78, + "h": 151.8, "mode": "oklch" }, - "hex": "#0e8147", - "hexDark": "#2e794b" + "hex": "#238649", + "hexDark": "#357c4c" }, - "backgroundPositiveFaded": { + "backgroundPositiveMuted": { "oklch": { - "l": 0.97, + "l": 0.98, "c": 0.02, - "h": 153.78, + "h": 151.8, "mode": "oklch" }, "oklchDark": { "l": 0.25, - "c": 0.020800000000000003, - "h": 153.78, + "c": 0.013866666666666668, + "h": 151.8, "mode": "oklch" }, - "hex": "#ebf9ef", - "hexDark": "#1a251d" + "hex": "#effdf2", + "hexDark": "#1d241e" + }, + "backgroundPositiveHighlightedMuted": { + "oklch": { + "l": 0.55, + "c": 0.13, + "h": 151.8, + "mode": "oklch", + "alpha": 0.06 + }, + "oklchDark": { + "l": 0.52696, + "c": 0.10400000000000001, + "h": 151.8, + "mode": "oklch", + "alpha": 0.06 + }, + "hex": "#2386490f", + "hexDark": "#357c4c0f" }, "borderPositive": { "oklch": { - "l": 0.45, + "l": 0.47000000000000003, "c": 0.13, - "h": 153.78, + "h": 151.8, "mode": "oklch" }, "oklchDark": { - "l": 0.616176, + "l": 0.62696, "c": 0.10400000000000001, - "h": 153.78, + "h": 151.8, "mode": "oklch" }, - "hex": "#006931", - "hexDark": "#4d9768" + "hex": "#006e33", + "hexDark": "#549a68" }, - "borderPositiveFaded": { + "borderPositiveMuted": { "oklch": { - "l": 0.9199999999999999, - "c": 0.03, - "h": 153.78, + "l": 0.95, + "c": 0.02, + "h": 151.8, "mode": "oklch" }, "oklchDark": { - "l": 0.35, - "c": 0.020800000000000003, - "h": 153.78, + "l": 0.31, + "c": 0.013866666666666668, + "h": 151.8, "mode": "oklch" }, - "hex": "#d6ebdc", - "hexDark": "#323e36" + "hex": "#e5f3e8", + "hexDark": "#2b322d" }, "foregroundPositive": { "oklch": { - "l": 0.5, + "l": 0.52, "c": 0.13, - "h": 153.78, + "h": 151.8, "mode": "oklch" }, "oklchDark": { "l": 0.75, "c": 0.1105, - "h": 153.78, + "h": 151.8, "mode": "oklch" }, - "hex": "#00783e", - "hexDark": "#73c38d" + "hex": "#147d41", + "hexDark": "#76c28b" }, "backgroundNeutral": { "oklch": { - "l": 0.92, - "c": 0.01, - "h": 262.67, + "l": 0.94, + "c": 0, + "h": 89.88, "mode": "oklch" }, "oklchDark": { - "l": 0.36, - "c": 0.008, - "h": 262.67, + "l": 0.32, + "c": 0, + "h": 89.88, "mode": "oklch" }, - "hex": "#e1e5eb", - "hexDark": "#3b3d41" + "hex": "#ebebeb", + "hexDark": "#333333" }, - "backgroundNeutralFaded": { + "backgroundNeutralMuted": { "oklch": { - "l": 0.97, + "l": 0, "c": 0, - "h": 262.67, - "mode": "oklch" + "h": 89.88, + "mode": "oklch", + "alpha": 0.03 }, "oklchDark": { - "l": 0.25, + "l": 1, "c": 0, - "h": 262.67, - "mode": "oklch" + "h": 89.88, + "mode": "oklch", + "alpha": 0.03 + }, + "hex": "#00000008", + "hexDark": "#ffffff08" + }, + "backgroundNeutralHighlightedMuted": { + "oklch": { + "l": 0.94, + "c": 0, + "h": 89.88, + "mode": "oklch", + "alpha": 0.4 }, - "hex": "#f5f5f5", - "hexDark": "#222222" + "oklchDark": { + "l": 0.32, + "c": 0, + "h": 89.88, + "mode": "oklch", + "alpha": 0.48 + }, + "hex": "#ebebeb66", + "hexDark": "#3333337a" }, "borderNeutral": { "oklch": { "l": 0, - "c": 0.01, - "h": 262.67, + "c": 0, + "h": 89.88, "mode": "oklch", "alpha": 0.12 }, "oklchDark": { "l": 1, - "c": 0.008, - "h": 262.67, + "c": 0, + "h": 89.88, "mode": "oklch", - "alpha": 0.16 + "alpha": 0.12 }, "hex": "#0000001f", - "hexDark": "#fcffff29" + "hexDark": "#ffffff1f" }, - "borderNeutralFaded": { + "borderNeutralMuted": { "oklch": { "l": 0, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch", "alpha": 0.08 }, "oklchDark": { "l": 1, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch", "alpha": 0.08 }, @@ -390,63 +482,63 @@ }, "foregroundNeutral": { "oklch": { - "l": 0.2, - "c": 0.01, - "h": 262.67, + "l": 0.24, + "c": 0, + "h": 89.88, "mode": "oklch" }, "oklchDark": { "l": 0.96, - "c": 0.008, - "h": 262.67, + "c": 0, + "h": 89.88, "mode": "oklch" }, - "hex": "#14161b", - "hexDark": "#eff2f7" + "hex": "#1f1f1f", + "hexDark": "#f2f2f2" }, - "foregroundNeutralFaded": { + "foregroundNeutralMuted": { "oklch": { - "l": 0.45, - "c": 0.01, - "h": 262.67, + "l": 0.49, + "c": 0, + "h": 89.88, "mode": "oklch" }, "oklchDark": { "l": 0.8099999999999999, - "c": 0.008, - "h": 262.67, + "c": 0, + "h": 89.88, "mode": "oklch" }, - "hex": "#52555b", - "hexDark": "#bec1c6" + "hex": "#606060", + "hexDark": "#c1c1c1" }, "backgroundDisabled": { "oklch": { "l": 0.95, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "oklchDark": { "l": 0.28, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "hex": "#eeeeee", "hexDark": "#292929" }, - "backgroundDisabledFaded": { + "backgroundDisabledMuted": { "oklch": { "l": 0.98, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "oklchDark": { "l": 0.23, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "hex": "#f8f8f8", @@ -455,31 +547,32 @@ "borderDisabled": { "oklch": { "l": 0, - "c": 0.01, - "h": 262.67, + "c": 0, + "h": 89.88, "mode": "oklch", "alpha": 0.06 }, "oklchDark": { - "l": 0.28, + "l": 1, "c": 0, - "h": 262.67, - "mode": "oklch" + "h": 89.88, + "mode": "oklch", + "alpha": 0.04 }, "hex": "#0000000f", - "hexDark": "#292929" + "hexDark": "#ffffff0a" }, "foregroundDisabled": { "oklch": { "l": 0.84, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "oklchDark": { "l": 0.4, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "hex": "#cacaca", @@ -489,13 +582,13 @@ "oklch": { "l": 1, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "oklchDark": { "l": 0.2, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "hex": "#ffffff", @@ -505,64 +598,64 @@ "oklch": { "l": 1, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "oklchDark": { - "l": 0.21, + "l": 0.215, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "hex": "#ffffff", - "hexDark": "#181818" + "hexDark": "#191919" }, "backgroundElevationOverlay": { "oklch": { "l": 1, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "oklchDark": { - "l": 0.22, + "l": 0.23, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "hex": "#ffffff", - "hexDark": "#1b1b1b" + "hexDark": "#1d1d1d" }, "backgroundPage": { "oklch": { "l": 1, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "oklchDark": { "l": 0.16, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "hex": "#ffffff", "hexDark": "#0d0d0d" }, - "backgroundPageFaded": { + "backgroundPageMuted": { "oklch": { - "l": 0.97, + "l": 0.98, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, "oklchDark": { "l": 0.18, "c": 0, - "h": 262.67, + "h": 89.88, "mode": "oklch" }, - "hex": "#f5f5f5", + "hex": "#f8f8f8", "hexDark": "#121212" }, "brand": { @@ -608,9 +701,13 @@ "hex": "23.536499999999997, 95.6505, 250.1295", "hexDark": "47.277, 104.0655, 223.3545" }, - "rgbBackgroundPrimaryFaded": { - "hex": "238.017, 245.4885, 259.182", - "hexDark": "23.6385, 33.456, 52.122" + "rgbBackgroundPrimaryMuted": { + "hex": "241.332, 248.829, 262.548", + "hexDark": "27.0555, 33.6855, 46.104" + }, + "rgbBackgroundPrimaryHighlightedMuted": { + "hex": "23.536499999999997, 95.6505, 250.1295", + "hexDark": "47.277, 104.0655, 223.3545" }, "onBackgroundCritical": { "oklch": { @@ -627,12 +724,16 @@ "hexDark": "#ffffff" }, "rgbBackgroundCritical": { - "hex": "226.593, 39.168, 41.0295", - "hexDark": "208.437, 69.87, 62.526" + "hex": "220.473, 49.725, 70.278", + "hexDark": "202.2405, 73.032, 80.886" }, - "rgbBackgroundCriticalFaded": { - "hex": "258.5445, 240.3885, 237.8895", - "hexDark": "48.6285, 26.877, 24.378" + "rgbBackgroundCriticalMuted": { + "hex": "261.936, 243.49949999999998, 242.76", + "hexDark": "43.3755, 29.5035, 29.172" + }, + "rgbBackgroundCriticalHighlightedMuted": { + "hex": "220.473, 49.725, 70.278", + "hexDark": "202.2405, 73.032, 80.886" }, "onBackgroundWarning": { "oklch": { @@ -649,12 +750,16 @@ "hexDark": "#000000" }, "rgbBackgroundWarning": { - "hex": "265.7865, 180.5145, -70.15050000000001", - "hexDark": "244.1625, 177.3525, 31.7985" + "hex": "268.515, 174.16500000000002, -89.811", + "hexDark": "251.6595, 177.60750000000002, -35.9805" + }, + "rgbBackgroundWarningMuted": { + "hex": "263.0325, 246.20250000000001, 218.86649999999997", + "hexDark": "39.576, 32.4615, 20.655" }, - "rgbBackgroundWarningFaded": { - "hex": "259.6665, 242.862, 215.577", - "hexDark": "41.6925, 31.900499999999997, 15.1215" + "rgbBackgroundWarningHighlightedMuted": { + "hex": "268.515, 174.16500000000002, -89.811", + "hexDark": "251.6595, 177.60750000000002, -35.9805" }, "onBackgroundPositive": { "oklch": { @@ -671,12 +776,16 @@ "hexDark": "#ffffff" }, "rgbBackgroundPositive": { - "hex": "14.177999999999999, 128.673, 70.788", - "hexDark": "45.5685, 120.86999999999999, 75.1995" + "hex": "34.7565, 134.334, 73.21050000000001", + "hexDark": "52.810500000000005, 123.75150000000001, 75.786" }, - "rgbBackgroundPositiveFaded": { - "hex": "235.4415, 249.3645, 239.0115", - "hexDark": "25.9335, 36.643499999999996, 29.0445" + "rgbBackgroundPositiveMuted": { + "hex": "239.13899999999998, 252.6285, 241.893", + "hexDark": "28.866, 35.6235, 30.345" + }, + "rgbBackgroundPositiveHighlightedMuted": { + "hex": "34.7565, 134.334, 73.21050000000001", + "hexDark": "52.810500000000005, 123.75150000000001, 75.786" }, "onBackgroundNeutral": { "oklch": { @@ -693,18 +802,22 @@ "hexDark": "#ffffff" }, "rgbBackgroundNeutral": { - "hex": "224.96099999999998, 228.6585, 235.416", - "hexDark": "58.8285, 61.149, 65.43299999999999" + "hex": "234.9825, 234.9825, 234.9825", + "hexDark": "50.7195, 50.7195, 50.7195" + }, + "rgbBackgroundNeutralMuted": { + "hex": "0, 0, 0", + "hexDark": "255, 255, 255" }, - "rgbBackgroundNeutralFaded": { - "hex": "244.953, 244.953, 244.953", - "hexDark": "33.5325, 33.5325, 33.5325" + "rgbBackgroundNeutralHighlightedMuted": { + "hex": "234.9825, 234.9825, 234.9825", + "hexDark": "50.7195, 50.7195, 50.7195" }, "rgbBackgroundDisabled": { "hex": "238.29749999999999, 238.29749999999999, 238.29749999999999", "hexDark": "40.774499999999996, 40.774499999999996, 40.774499999999996" }, - "rgbBackgroundDisabledFaded": { + "rgbBackgroundDisabledMuted": { "hex": "248.2935, 248.2935, 248.2935", "hexDark": "28.815, 28.815, 28.815" }, @@ -714,18 +827,18 @@ }, "rgbBackgroundElevationRaised": { "hex": "255, 255, 255", - "hexDark": "24.225, 24.225, 24.225" + "hexDark": "25.372500000000002, 25.372500000000002, 25.372500000000002" }, "rgbBackgroundElevationOverlay": { "hex": "255, 255, 255", - "hexDark": "26.52, 26.52, 26.52" + "hexDark": "28.815, 28.815, 28.815" }, "rgbBackgroundPage": { "hex": "255, 255, 255", "hexDark": "13.209, 13.209, 13.209" }, - "rgbBackgroundPageFaded": { - "hex": "244.953, 244.953, 244.953", + "rgbBackgroundPageMuted": { + "hex": "248.2935, 248.2935, 248.2935", "hexDark": "17.5185, 17.5185, 17.5185" }, "onBrand": { @@ -1170,7 +1283,7 @@ ] } }, - "borderFaded": { + "borderMuted": { "parts": [ { "offsetX": 0, @@ -1226,7 +1339,7 @@ ] } }, - "borderFadedRaised": { + "borderMutedRaised": { "parts": [ { "offsetX": 0, @@ -1282,7 +1395,7 @@ ] } }, - "borderFadedOverlay": { + "borderMutedOverlay": { "parts": [ { "offsetX": 0, diff --git a/packages/theming/src/generation/tokens/color/utilities/generateColors.ts b/packages/theming/src/generation/tokens/color/utilities/generateColors.ts index d1150b1b..da5a3d50 100644 --- a/packages/theming/src/generation/tokens/color/utilities/generateColors.ts +++ b/packages/theming/src/generation/tokens/color/utilities/generateColors.ts @@ -72,6 +72,7 @@ const generateColorValues = ( const warning = key === "warning"; const bgDark = dark || getDarkModeColor(bg); + const bgMuted = neutral ? { ...bg, l: 0, c: 0, alpha: 0.03 } : { @@ -89,6 +90,9 @@ const generateColorValues = ( c: bgDark.c / 7.5, }; + const bgHighlightedMuted = neutral ? { ...bg, alpha: 0.4 } : { ...bg, alpha: 0.06 }; + const bgHighlightedMutedDark = neutral ? { ...bgDark, alpha: 0.48 } : { ...bgDark, alpha: 0.06 }; + const fg = neutral ? { ...bg, l: 0.24 } : { ...bg, l: 0.52 }; const fgDark = neutral ? { ...bgDark, l: 0.96 } : { ...bgDark, l: 0.75, c: bg.c * 0.85 }; @@ -108,6 +112,10 @@ const generateColorValues = ( oklch: bgMuted, oklchDark: bgMutedDark, }, + [`background${capitalizedKey}HighlightedMuted`]: { + oklch: bgHighlightedMuted, + oklchDark: bgHighlightedMutedDark, + }, [`border${capitalizedKey}`]: { oklch: bd, oklchDark: bdDark, From c438698014c3c74c8025a0767c4698fd9f74e4d8 Mon Sep 17 00:00:00 2001 From: Dmitry Belyaev Date: Sun, 8 Mar 2026 21:13:51 +0100 Subject: [PATCH 03/75] lint update --- package.json | 6 +- .../src/components/Reshaped/Reshaped.tsx | 4 +- .../src/components/Reshaped/Reshaped.types.ts | 2 + .../hooks/tests/useOnClickOutside.stories.tsx | 2 +- packages/headless/src/hooks/useHotkeys.ts | 2 +- packages/headless/src/index.ts | 8 +- packages/headless/src/internal.ts | 11 +- .../Accordion/tests/Accordion.stories.tsx | 2 +- .../ActionBar/tests/ActionBar.stories.tsx | 2 +- .../Actionable/Actionable.module.css | 4 +- .../src/components/Actionable/index.ts | 1 - .../Actionable/tests/Actionable.stories.tsx | 2 +- .../components/Autocomplete/Autocomplete.tsx | 2 +- .../Autocomplete/Autocomplete.types.ts | 2 +- .../src/components/Autocomplete/index.ts | 2 +- .../tests/Autocomplete.stories.tsx | 2 +- .../reshaped/src/components/Button/index.ts | 2 +- .../Calendar/CalendarControlled.tsx | 6 +- .../src/components/Calendar/CalendarMonth.tsx | 2 +- .../Calendar/tests/Calendar.stories.tsx | 2 +- .../src/components/Carousel/Carousel.tsx | 2 +- .../reshaped/src/components/Carousel/index.ts | 4 +- .../src/components/CheckboxGroup/index.ts | 2 +- .../src/components/Dismissible/index.ts | 2 +- .../Dismissible/tests/Dismissible.stories.tsx | 2 +- .../DropdownMenu/DropdownMenu.types.ts | 2 +- .../src/components/DropdownMenu/index.ts | 4 +- .../FileUpload/tests/FileUpload.stories.tsx | 2 +- .../src/components/Flyout/Flyout.context.ts | 4 +- .../src/components/Flyout/Flyout.types.ts | 2 +- .../src/components/Flyout/FlyoutContent.tsx | 2 +- .../components/Flyout/FlyoutControlled.tsx | 8 +- .../src/components/Flyout/FlyoutTrigger.tsx | 2 +- .../reshaped/src/components/Flyout/index.ts | 8 +- .../Flyout/tests/Flyout.stories.tsx | 2 +- .../src/components/Flyout/useFlyout.ts | 2 +- .../reshaped/src/components/Grid/Grid.tsx | 2 +- .../reshaped/src/components/Grid/index.ts | 2 +- .../reshaped/src/components/Modal/Modal.tsx | 4 +- .../src/components/Modal/Modal.types.ts | 2 +- .../reshaped/src/components/Modal/index.ts | 2 +- .../NumberField/NumberFieldControlled.tsx | 2 +- .../src/components/Overlay/Overlay.tsx | 2 +- .../reshaped/src/components/Overlay/index.tsx | 2 +- .../PinField/PinFieldControlled.tsx | 2 +- .../src/components/Popover/Popover.tsx | 2 +- .../src/components/Popover/Popover.types.ts | 2 +- .../reshaped/src/components/Popover/index.ts | 2 +- .../Popover/tests/Popover.stories.tsx | 4 +- .../src/components/Reshaped/Reshaped.css | 22 +- .../src/components/Reshaped/Reshaped.tsx | 8 +- .../Reshaped/tests/Reshaped.stories.tsx | 26 +- .../src/components/Resizable/index.ts | 4 +- .../src/components/ScrollArea/ScrollArea.tsx | 2 +- .../ScrollArea/tests/ScrollArea.stories.tsx | 2 +- .../components/Slider/SliderControlled.tsx | 2 +- .../reshaped/src/components/Table/index.ts | 8 +- .../reshaped/src/components/Tabs/TabsList.tsx | 2 +- .../reshaped/src/components/Tabs/index.ts | 2 +- .../src/components/TextField/index.ts | 2 +- .../src/components/Theme/GlobalColorMode.tsx | 2 +- .../reshaped/src/components/Theme/Theme.tsx | 2 +- .../reshaped/src/components/Theme/index.ts | 4 +- .../reshaped/src/components/Theme/useTheme.ts | 2 +- .../reshaped/src/components/Timeline/index.ts | 2 +- .../src/components/Toast/ToastContainer.tsx | 2 +- .../src/components/Toast/ToastProvider.tsx | 2 +- .../reshaped/src/components/Toast/index.ts | 4 +- .../components/Toast/tests/Toast.stories.tsx | 2 +- .../tests/ToggleButton.stories.tsx | 2 +- .../src/components/ToggleButtonGroup/index.ts | 2 +- .../reshaped/src/components/View/index.ts | 2 +- .../components/View/tests/View.stories.tsx | 2 +- .../_private/Aligner/Aligner.types.ts | 2 +- .../reshaped/src/hooks/_private/useDrag.ts | 2 +- .../src/hooks/tests/useDrag.stories.tsx | 2 +- packages/reshaped/src/index.ts | 222 +++++--------- packages/reshaped/src/styles/mixin.ts | 20 +- .../src/styles/resolvers/align/index.test.ts | 2 +- .../src/styles/resolvers/align/index.ts | 1 + .../resolvers/aspectRatio/index.test.ts | 2 +- .../src/styles/resolvers/aspectRatio/index.ts | 1 + .../src/styles/resolvers/bleed/index.test.ts | 2 +- .../src/styles/resolvers/bleed/index.ts | 2 +- .../styles/resolvers/border/border.module.css | 20 +- .../src/styles/resolvers/border/index.test.ts | 10 +- .../src/styles/resolvers/border/index.ts | 2 +- .../src/styles/resolvers/height/index.test.ts | 2 +- .../src/styles/resolvers/inset/index.test.ts | 8 +- .../src/styles/resolvers/inset/index.ts | 1 + .../styles/resolvers/justify/index.test.ts | 2 +- .../src/styles/resolvers/justify/index.ts | 1 + .../src/styles/resolvers/margin/index.test.ts | 2 +- .../src/styles/resolvers/margin/index.ts | 1 + .../styles/resolvers/maxHeight/index.test.ts | 2 +- .../styles/resolvers/maxWidth/index.test.ts | 2 +- .../styles/resolvers/minHeight/index.test.ts | 2 +- .../styles/resolvers/minWidth/index.test.ts | 2 +- .../styles/resolvers/padding/index.test.ts | 2 +- .../src/styles/resolvers/padding/index.ts | 1 + .../styles/resolvers/position/index.test.ts | 2 +- .../src/styles/resolvers/position/index.ts | 1 + .../src/styles/resolvers/radius/index.test.ts | 2 +- .../styles/resolvers/radius/radius.module.css | 2 +- .../styles/resolvers/textAlign/index.test.ts | 2 +- .../src/styles/resolvers/textAlign/index.ts | 1 + .../src/styles/resolvers/width/index.test.ts | 2 +- .../reshaped/src/tests/ShadowDOM.stories.tsx | 2 +- .../reshaped/src/tests/themes.stories.tsx | 2 +- .../src/tests/themingWithoutDefinition.ts | 2 +- .../reshaped/src/utilities/storybook/index.ts | 2 +- .../src/utilities/tests/props.test.ts | 2 +- .../tokens/color/color.transforms.ts | 2 +- .../tokens/color/utilities/convert.ts | 2 +- .../tokens/color/utilities/generateColors.ts | 8 +- .../tokens/color/utilities/tests/a11y.test.ts | 2 +- .../color/utilities/tests/convert.test.ts | 2 +- .../utilities/tests/generateColors.test.ts | 2 +- .../tokens/duration/duration.transforms.ts | 2 +- .../tokens/easing/easing.transforms.ts | 2 +- .../generation/tokens/font/font.transforms.ts | 2 +- .../fontFamily/fontFamily.transforms.ts | 2 +- .../fontWeight/fontWeight.transforms.ts | 2 +- .../tokens/radius/radius.transforms.ts | 2 +- .../tokens/shadow/shadow.transforms.ts | 2 +- .../generation/tokens/unit/unit.transforms.ts | 2 +- .../tokens/viewport/viewport.transforms.ts | 2 +- .../tokens/zIndex/zIndex.transforms.ts | 2 +- packages/theming/src/generation/transform.ts | 6 +- packages/theming/src/index.ts | 5 +- packages/utilities/src/a11y/TrapFocus.ts | 2 +- packages/utilities/src/a11y/index.ts | 12 +- .../utilities/src/a11y/tests/Chain.test.ts | 2 +- .../src/a11y/tests/TrapFocus.test.ts | 2 +- .../src/a11y/tests/TrapScreenReader.test.ts | 2 +- .../utilities/src/a11y/tests/focus.test.ts | 12 +- .../src/a11y/tests/keyboardMode.test.ts | 4 +- packages/utilities/src/css/index.ts | 2 +- .../src/css/tests/StyleCache.test.ts | 2 +- .../src/css/tests/classNames.test.ts | 2 +- .../findClosestScrollableContainer.test.ts | 2 +- .../src/dom/tests/findParent.test.ts | 2 +- packages/utilities/src/flyout/Flyout.ts | 2 +- .../utilities/src/flyout/tests/Flyout.test.ts | 2 +- .../src/flyout/utilities/applyPosition.ts | 4 +- .../utilities/calculateLayoutAdjustment.ts | 2 +- .../flyout/utilities/getPositionFallbacks.ts | 2 +- .../utilities/tests/applyPosition.test.ts | 2 +- .../tests/calculateLayoutAdjustment.test.ts | 2 +- .../utilities/tests/calculatePosition.test.ts | 2 +- .../utilities/tests/centerBySize.test.ts | 2 +- .../tests/getPositionFallbacks.test.ts | 2 +- .../utilities/tests/getRTLPosition.test.ts | 2 +- .../utilities/tests/isFullyVisible.test.ts | 2 +- .../src/helpers/tests/rafThrottle.test.ts | 2 +- .../utilities/src/i18n/tests/isRTL.test.ts | 2 +- packages/utilities/src/index.ts | 9 +- packages/utilities/src/internal.ts | 24 +- .../utilities/src/scroll/tests/lock.test.ts | 2 +- pnpm-lock.yaml | 289 +++++++++++------- 160 files changed, 527 insertions(+), 518 deletions(-) diff --git a/package.json b/package.json index 7341fe20..59d9215e 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "@changesets/changelog-github": "0.6.0", "@changesets/cli": "2.30.0", "@csstools/postcss-global-data": "4.0.0", - "@eslint/js": "10.0.1", + "@eslint/js": "9.39.4", "@size-limit/preset-big-lib": "12.0.0", "@storybook/addon-a11y": "10.1.10", "@storybook/addon-docs": "10.1.10", @@ -51,7 +51,7 @@ "@vitest/coverage-v8": "4.0.18", "chromatic": "15.2.0", "cssnano": "7.1.2", - "eslint": "10.0.2", + "eslint": "9.39.4", "eslint-config-prettier": "10.1.8", "eslint-import-resolver-typescript": "4.4.4", "eslint-plugin-import": "2.32.0", @@ -59,6 +59,7 @@ "eslint-plugin-prettier": "5.5.5", "eslint-plugin-react": "7.37.5", "eslint-plugin-react-hooks": "7.0.1", + "eslint-plugin-simple-import-sort": "12.1.1", "lefthook": "2.1.2", "playwright": "1.58.2", "postcss": "8.5.8", @@ -78,6 +79,7 @@ "stylelint": "17.4.0", "stylelint-browser-compat": "1.0.0-beta.180", "stylelint-config-prettier": "9.0.5", + "stylelint-config-recommended": "^18.0.0", "stylelint-config-standard": "40.0.0", "tsc-watch": "7.2.0", "typescript": "5.9.3", diff --git a/packages/headless/src/components/Reshaped/Reshaped.tsx b/packages/headless/src/components/Reshaped/Reshaped.tsx index 396a20fc..c3a6e9e5 100644 --- a/packages/headless/src/components/Reshaped/Reshaped.tsx +++ b/packages/headless/src/components/Reshaped/Reshaped.tsx @@ -9,10 +9,10 @@ import { SingletonRTLProvider } from "@/hooks/_internal/useSingletonRTL"; import type * as T from "./Reshaped.types"; const Reshaped: React.FC = (props) => { - const { children } = props; + const { children, defaultRTL } = props; return ( - + {children} diff --git a/packages/headless/src/components/Reshaped/Reshaped.types.ts b/packages/headless/src/components/Reshaped/Reshaped.types.ts index 34cf4d83..e11fbe12 100644 --- a/packages/headless/src/components/Reshaped/Reshaped.types.ts +++ b/packages/headless/src/components/Reshaped/Reshaped.types.ts @@ -3,4 +3,6 @@ import type React from "react"; export type Props = { /** Node for inserting children */ children?: React.ReactNode; + /** Default content direction of the application */ + defaultRTL?: boolean; }; diff --git a/packages/headless/src/hooks/tests/useOnClickOutside.stories.tsx b/packages/headless/src/hooks/tests/useOnClickOutside.stories.tsx index 7a90fc9f..5cfcb909 100644 --- a/packages/headless/src/hooks/tests/useOnClickOutside.stories.tsx +++ b/packages/headless/src/hooks/tests/useOnClickOutside.stories.tsx @@ -1,6 +1,6 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; -import { expect, fn, userEvent, type Mock } from "storybook/test"; +import { expect, fn, type Mock, userEvent } from "storybook/test"; import useOnClickOutside from "../useOnClickOutside"; diff --git a/packages/headless/src/hooks/useHotkeys.ts b/packages/headless/src/hooks/useHotkeys.ts index 8f52b547..53f6165f 100644 --- a/packages/headless/src/hooks/useHotkeys.ts +++ b/packages/headless/src/hooks/useHotkeys.ts @@ -2,7 +2,7 @@ import React from "react"; -import { useSingletonHotkeys, type Hotkeys } from "./_internal/useSingletonHotkeys"; +import { type Hotkeys, useSingletonHotkeys } from "./_internal/useSingletonHotkeys"; const useHotkeys = ( hotkeys: Hotkeys, diff --git a/packages/headless/src/index.ts b/packages/headless/src/index.ts index 80e73765..bcd3ffc1 100644 --- a/packages/headless/src/index.ts +++ b/packages/headless/src/index.ts @@ -4,22 +4,22 @@ export { classNames, TrapFocus } from "@reshaped/utilities"; // Components export { default as Actionable, - type ActionableRef, type ActionableProps, + type ActionableRef, } from "./components/Actionable"; export { default as Reshaped, type ReshapedProps } from "./components/Reshaped"; // Hooks export { default as useHandlerRef } from "./hooks/useHandlerRef"; export { default as useHotkeys } from "./hooks/useHotkeys"; +export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect"; export { default as useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation"; export { default as useKeyboardMode } from "./hooks/useKeyboardMode"; -export { default as useRTL } from "./hooks/useRTL"; -export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect"; export { default as useOnClickOutside } from "./hooks/useOnClickOutside"; +export { default as useRTL } from "./hooks/useRTL"; export { default as useScrollLock } from "./hooks/useScrollLock"; export { default as useToggle } from "./hooks/useToggle"; // Types -export type { ClassName } from "@reshaped/utilities"; export type { Attributes, CSSVariable, StyleAttribute } from "@/types/global"; +export type { ClassName } from "@reshaped/utilities"; diff --git a/packages/headless/src/internal.ts b/packages/headless/src/internal.ts index 7aaf4a15..d42670ac 100644 --- a/packages/headless/src/internal.ts +++ b/packages/headless/src/internal.ts @@ -6,16 +6,15 @@ */ export { Flyout } from "@reshaped/utilities"; - export { + checkKeyboardMode, + type Coordinates, disableScroll, enableScroll, - rafThrottle, - checkKeyboardMode, findParent, - getFocusableElements, - focusableSelector, type FocusableElement, + focusableSelector, + getFocusableElements, + rafThrottle, type TrapMode, - type Coordinates, } from "@reshaped/utilities/internal"; diff --git a/packages/reshaped/src/components/Accordion/tests/Accordion.stories.tsx b/packages/reshaped/src/components/Accordion/tests/Accordion.stories.tsx index e6dbe0ae..6652bd7b 100644 --- a/packages/reshaped/src/components/Accordion/tests/Accordion.stories.tsx +++ b/packages/reshaped/src/components/Accordion/tests/Accordion.stories.tsx @@ -1,5 +1,5 @@ import { StoryObj } from "@storybook/react-vite"; -import { userEvent, expect, fn, Mock } from "storybook/test"; +import { expect, fn, Mock, userEvent } from "storybook/test"; import Accordion from "@/components/Accordion"; import Button from "@/components/Button"; diff --git a/packages/reshaped/src/components/ActionBar/tests/ActionBar.stories.tsx b/packages/reshaped/src/components/ActionBar/tests/ActionBar.stories.tsx index dee8c7de..3fec2937 100644 --- a/packages/reshaped/src/components/ActionBar/tests/ActionBar.stories.tsx +++ b/packages/reshaped/src/components/ActionBar/tests/ActionBar.stories.tsx @@ -5,7 +5,7 @@ import { expect } from "storybook/test"; import ActionBar from "@/components/ActionBar"; import Button from "@/components/Button"; import View from "@/components/View"; -import { Placeholder, Example } from "@/utilities/storybook"; +import { Example, Placeholder } from "@/utilities/storybook"; export default { title: "Components/ActionBar", diff --git a/packages/reshaped/src/components/Actionable/Actionable.module.css b/packages/reshaped/src/components/Actionable/Actionable.module.css index ad116764..b679dcab 100644 --- a/packages/reshaped/src/components/Actionable/Actionable.module.css +++ b/packages/reshaped/src/components/Actionable/Actionable.module.css @@ -36,9 +36,9 @@ [data-rs-keyboard] .root { &:focus { - outline: none; + outline: var(--rs-outline); + outline-offset: var(--rs-outline-width); z-index: var(--rs-z-index-relative); - box-shadow: var(--rs-shadow-focus); } &.--inset:focus { diff --git a/packages/reshaped/src/components/Actionable/index.ts b/packages/reshaped/src/components/Actionable/index.ts index 4e2973eb..7ec98ca0 100644 --- a/packages/reshaped/src/components/Actionable/index.ts +++ b/packages/reshaped/src/components/Actionable/index.ts @@ -1,4 +1,3 @@ export { default } from "./Actionable"; export type { Props as ActionableProps } from "./Actionable.types"; - export type { ActionableRef } from "@reshaped/headless"; diff --git a/packages/reshaped/src/components/Actionable/tests/Actionable.stories.tsx b/packages/reshaped/src/components/Actionable/tests/Actionable.stories.tsx index 5028e42b..0e3c95c0 100644 --- a/packages/reshaped/src/components/Actionable/tests/Actionable.stories.tsx +++ b/packages/reshaped/src/components/Actionable/tests/Actionable.stories.tsx @@ -1,5 +1,5 @@ import { StoryObj } from "@storybook/react-vite"; -import { userEvent, expect, fn } from "storybook/test"; +import { expect, fn, userEvent } from "storybook/test"; import Actionable from "@/components/Actionable"; import View from "@/components/View"; diff --git a/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx b/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx index a16ef582..1ac8118b 100644 --- a/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/reshaped/src/components/Autocomplete/Autocomplete.tsx @@ -1,6 +1,6 @@ "use client"; -import { useIsomorphicLayoutEffect, useHotkeys, useHandlerRef } from "@reshaped/headless"; +import { useHandlerRef, useHotkeys, useIsomorphicLayoutEffect } from "@reshaped/headless"; import React from "react"; import DropdownMenu from "@/components/DropdownMenu"; diff --git a/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts b/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts index 8b68cfc9..bee586d7 100644 --- a/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts +++ b/packages/reshaped/src/components/Autocomplete/Autocomplete.types.ts @@ -1,4 +1,4 @@ -import type { DropdownMenuProps, DropdownMenuInstance } from "@/components/DropdownMenu"; +import type { DropdownMenuInstance, DropdownMenuProps } from "@/components/DropdownMenu"; import type { MenuItemProps } from "@/components/MenuItem"; import type { TextFieldProps } from "@/components/TextField"; import type * as G from "@/types/global"; diff --git a/packages/reshaped/src/components/Autocomplete/index.ts b/packages/reshaped/src/components/Autocomplete/index.ts index ecf417df..cdad7df2 100644 --- a/packages/reshaped/src/components/Autocomplete/index.ts +++ b/packages/reshaped/src/components/Autocomplete/index.ts @@ -8,6 +8,6 @@ AutocompleteRoot.Item = AutocompleteItem; export default AutocompleteRoot; export type { - Props as AutocompleteProps, Instance as AutocompleteInstance, + Props as AutocompleteProps, } from "./Autocomplete.types"; diff --git a/packages/reshaped/src/components/Autocomplete/tests/Autocomplete.stories.tsx b/packages/reshaped/src/components/Autocomplete/tests/Autocomplete.stories.tsx index 7068f94e..60800df6 100644 --- a/packages/reshaped/src/components/Autocomplete/tests/Autocomplete.stories.tsx +++ b/packages/reshaped/src/components/Autocomplete/tests/Autocomplete.stories.tsx @@ -1,7 +1,7 @@ import { useToggle } from "@reshaped/headless"; import { StoryObj } from "@storybook/react-vite"; import React from "react"; -import { fn, expect, Mock, within, waitFor, userEvent, fireEvent } from "storybook/test"; +import { expect, fireEvent, fn, Mock, userEvent, waitFor, within } from "storybook/test"; import Autocomplete from "@/components/Autocomplete"; import Badge from "@/components/Badge"; diff --git a/packages/reshaped/src/components/Button/index.ts b/packages/reshaped/src/components/Button/index.ts index 75e8defc..00d9a20d 100644 --- a/packages/reshaped/src/components/Button/index.ts +++ b/packages/reshaped/src/components/Button/index.ts @@ -12,7 +12,7 @@ ButtonRoot.Group = ButtonGroup; export default ButtonRoot; export type { - Props as ButtonProps, AlignerProps as ButtonAlignerProps, GroupProps as ButtonGroupProps, + Props as ButtonProps, } from "./Button.types"; diff --git a/packages/reshaped/src/components/Calendar/CalendarControlled.tsx b/packages/reshaped/src/components/Calendar/CalendarControlled.tsx index 0247d8cd..eaa2eff7 100644 --- a/packages/reshaped/src/components/Calendar/CalendarControlled.tsx +++ b/packages/reshaped/src/components/Calendar/CalendarControlled.tsx @@ -6,12 +6,12 @@ import View from "@/components/View"; import { onNextFrame } from "@/utilities/animation"; import { - setMonthToPrevious, - setMonthToNext, + applyNavigationBounds, setMonthTo, + setMonthToNext, + setMonthToPrevious, setYearToNext, setYearToPrevious, - applyNavigationBounds, } from "./Calendar.utils"; import CalendarControls from "./CalendarControls"; import CalendarMonth from "./CalendarMonth"; diff --git a/packages/reshaped/src/components/Calendar/CalendarMonth.tsx b/packages/reshaped/src/components/Calendar/CalendarMonth.tsx index d75b5308..36486a82 100644 --- a/packages/reshaped/src/components/Calendar/CalendarMonth.tsx +++ b/packages/reshaped/src/components/Calendar/CalendarMonth.tsx @@ -3,7 +3,7 @@ import { useState } from "react"; import s from "./Calendar.module.css"; -import { getMonthWeeks, getWeekdayNames, getLocalISODate, isDateFocusable } from "./Calendar.utils"; +import { getLocalISODate, getMonthWeeks, getWeekdayNames, isDateFocusable } from "./Calendar.utils"; import CalendarDate from "./CalendarDate"; import type * as T from "./Calendar.types"; diff --git a/packages/reshaped/src/components/Calendar/tests/Calendar.stories.tsx b/packages/reshaped/src/components/Calendar/tests/Calendar.stories.tsx index f6c10e71..ea917b04 100644 --- a/packages/reshaped/src/components/Calendar/tests/Calendar.stories.tsx +++ b/packages/reshaped/src/components/Calendar/tests/Calendar.stories.tsx @@ -1,5 +1,5 @@ import { StoryObj } from "@storybook/react-vite"; -import { fn, expect, userEvent, within, type Mock, waitFor } from "storybook/test"; +import { expect, fn, type Mock, userEvent, waitFor, within } from "storybook/test"; import Calendar from "@/components/Calendar"; import Text from "@/components/Text"; diff --git a/packages/reshaped/src/components/Carousel/Carousel.tsx b/packages/reshaped/src/components/Carousel/Carousel.tsx index 209151b7..4a64dd7d 100644 --- a/packages/reshaped/src/components/Carousel/Carousel.tsx +++ b/packages/reshaped/src/components/Carousel/Carousel.tsx @@ -5,7 +5,7 @@ import { rafThrottle } from "@reshaped/headless/internal"; import React from "react"; import View from "@/components/View"; -import { responsiveVariables, responsiveClassNames } from "@/utilities/props"; +import { responsiveClassNames, responsiveVariables } from "@/utilities/props"; import s from "./Carousel.module.css"; import * as T from "./Carousel.types"; diff --git a/packages/reshaped/src/components/Carousel/index.ts b/packages/reshaped/src/components/Carousel/index.ts index 86dee091..519913ef 100644 --- a/packages/reshaped/src/components/Carousel/index.ts +++ b/packages/reshaped/src/components/Carousel/index.ts @@ -1,6 +1,6 @@ export { default } from "./Carousel"; export type { - Props as CarouselProps, - Instance as CarouselInstanceRef, Instance as CarouselInstance, + Instance as CarouselInstanceRef, + Props as CarouselProps, } from "./Carousel.types"; diff --git a/packages/reshaped/src/components/CheckboxGroup/index.ts b/packages/reshaped/src/components/CheckboxGroup/index.ts index 64484ffa..076dae9c 100644 --- a/packages/reshaped/src/components/CheckboxGroup/index.ts +++ b/packages/reshaped/src/components/CheckboxGroup/index.ts @@ -1,3 +1,3 @@ export { default } from "./CheckboxGroup"; -export type { Props as CheckboxGroupProps } from "./CheckboxGroup.types"; export { useCheckboxGroup } from "./CheckboxGroup.context"; +export type { Props as CheckboxGroupProps } from "./CheckboxGroup.types"; diff --git a/packages/reshaped/src/components/Dismissible/index.ts b/packages/reshaped/src/components/Dismissible/index.ts index a396bbc3..2a5be267 100644 --- a/packages/reshaped/src/components/Dismissible/index.ts +++ b/packages/reshaped/src/components/Dismissible/index.ts @@ -1,5 +1,5 @@ export { default } from "./Dismissible"; export type { - Props as DismissibleProps, CloseProps as DismissibleCloseProps, + Props as DismissibleProps, } from "./Dismissible.types"; diff --git a/packages/reshaped/src/components/Dismissible/tests/Dismissible.stories.tsx b/packages/reshaped/src/components/Dismissible/tests/Dismissible.stories.tsx index 85e72686..52ff0447 100644 --- a/packages/reshaped/src/components/Dismissible/tests/Dismissible.stories.tsx +++ b/packages/reshaped/src/components/Dismissible/tests/Dismissible.stories.tsx @@ -1,5 +1,5 @@ import { StoryObj } from "@storybook/react-vite"; -import { within, expect, userEvent, fn } from "storybook/test"; +import { expect, fn, userEvent, within } from "storybook/test"; import Dismissible from "@/components/Dismissible"; import Image from "@/components/Image"; diff --git a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts index 2883633e..ba3d933c 100644 --- a/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts +++ b/packages/reshaped/src/components/DropdownMenu/DropdownMenu.types.ts @@ -1,6 +1,6 @@ import type { FlyoutContentProps } from "@/components/Flyout"; import type { MenuItemProps } from "@/components/MenuItem"; -import type { PopoverProps, PopoverInstance } from "@/components/Popover"; +import type { PopoverInstance, PopoverProps } from "@/components/Popover"; import type React from "react"; export type Instance = PopoverInstance; diff --git a/packages/reshaped/src/components/DropdownMenu/index.ts b/packages/reshaped/src/components/DropdownMenu/index.ts index ac7e526f..31c25e8b 100644 --- a/packages/reshaped/src/components/DropdownMenu/index.ts +++ b/packages/reshaped/src/components/DropdownMenu/index.ts @@ -2,8 +2,8 @@ import Popover from "@/components/Popover"; import DropdownMenu, { DropdownMenuContent, - DropdownMenuSection, DropdownMenuItem, + DropdownMenuSection, DropdownMenuSubMenu, DropdownMenuSubTrigger, } from "./DropdownMenu"; @@ -28,6 +28,6 @@ DropdownMenuRoot.SubTrigger = DropdownMenuSubTrigger; export default DropdownMenuRoot; export type { - Props as DropdownMenuProps, Instance as DropdownMenuInstance, + Props as DropdownMenuProps, } from "./DropdownMenu.types"; diff --git a/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx b/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx index ad509e19..1010e7e9 100644 --- a/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx +++ b/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx @@ -1,6 +1,6 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; -import { expect, userEvent, fn } from "storybook/test"; +import { expect, fn, userEvent } from "storybook/test"; import Button from "@/components/Button"; import FileUpload from "@/components/FileUpload"; diff --git a/packages/reshaped/src/components/Flyout/Flyout.context.ts b/packages/reshaped/src/components/Flyout/Flyout.context.ts index f6522943..fcc9d0d0 100644 --- a/packages/reshaped/src/components/Flyout/Flyout.context.ts +++ b/packages/reshaped/src/components/Flyout/Flyout.context.ts @@ -16,11 +16,11 @@ const TriggerProvider = FlyoutTriggerContext.Provider; const ContentProvider = FlyoutContentContext.Provider; export { + ContentProvider, Provider, TriggerProvider, - ContentProvider, + useFlyoutContentContext, useFlyoutContext, useFlyoutTriggerContext, - useFlyoutContentContext, }; export default FlyoutContext; diff --git a/packages/reshaped/src/components/Flyout/Flyout.types.ts b/packages/reshaped/src/components/Flyout/Flyout.types.ts index 1e68088b..233213ca 100644 --- a/packages/reshaped/src/components/Flyout/Flyout.types.ts +++ b/packages/reshaped/src/components/Flyout/Flyout.types.ts @@ -1,7 +1,7 @@ import React from "react"; import type { Attributes, ClassName } from "@reshaped/headless"; -import type { TrapMode, Coordinates } from "@reshaped/headless/internal"; +import type { Coordinates, TrapMode } from "@reshaped/headless/internal"; /** * Utility diff --git a/packages/reshaped/src/components/Flyout/FlyoutContent.tsx b/packages/reshaped/src/components/Flyout/FlyoutContent.tsx index 8b451e66..7d6dcfe6 100644 --- a/packages/reshaped/src/components/Flyout/FlyoutContent.tsx +++ b/packages/reshaped/src/components/Flyout/FlyoutContent.tsx @@ -5,7 +5,7 @@ import React from "react"; import Portal from "@/components/_private/Portal"; -import { useFlyoutContext, ContentProvider } from "./Flyout.context"; +import { ContentProvider, useFlyoutContext } from "./Flyout.context"; import s from "./Flyout.module.css"; import cooldown from "./utilities/cooldown"; diff --git a/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx b/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx index 0ca7ee5e..5d191c5e 100644 --- a/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx +++ b/packages/reshaped/src/components/Flyout/FlyoutControlled.tsx @@ -2,15 +2,15 @@ import { TrapFocus, + useHandlerRef, useHotkeys, useIsomorphicLayoutEffect, - useHandlerRef, useOnClickOutside, } from "@reshaped/headless"; import { checkKeyboardMode, - type FocusableElement, type Coordinates, + type FocusableElement, } from "@reshaped/headless/internal"; import React from "react"; @@ -22,9 +22,9 @@ import { checkTransitions } from "@/utilities/animation"; import * as timeouts from "./Flyout.constants"; import { Provider, - useFlyoutTriggerContext, - useFlyoutContext, useFlyoutContentContext, + useFlyoutContext, + useFlyoutTriggerContext, } from "./Flyout.context"; import useFlyout from "./useFlyout"; import cooldown from "./utilities/cooldown"; diff --git a/packages/reshaped/src/components/Flyout/FlyoutTrigger.tsx b/packages/reshaped/src/components/Flyout/FlyoutTrigger.tsx index 0eed8e20..3a03bdf4 100644 --- a/packages/reshaped/src/components/Flyout/FlyoutTrigger.tsx +++ b/packages/reshaped/src/components/Flyout/FlyoutTrigger.tsx @@ -1,6 +1,6 @@ "use client"; -import { useFlyoutContext, TriggerProvider } from "./Flyout.context"; +import { TriggerProvider, useFlyoutContext } from "./Flyout.context"; import type * as T from "./Flyout.types"; diff --git a/packages/reshaped/src/components/Flyout/index.ts b/packages/reshaped/src/components/Flyout/index.ts index bde3ce2a..27f7c8e2 100644 --- a/packages/reshaped/src/components/Flyout/index.ts +++ b/packages/reshaped/src/components/Flyout/index.ts @@ -13,10 +13,10 @@ FlyoutRoot.Content = FlyoutContent; export default FlyoutRoot; export { useFlyoutContext } from "./Flyout.context"; export type { - Props as FlyoutProps, - Instance as FlyoutInstance, - TriggerProps as FlyoutTriggerProps, - ContentProps as FlyoutContentProps, CloseReason as FlyoutCloseReason, + ContentProps as FlyoutContentProps, + Instance as FlyoutInstance, + Props as FlyoutProps, TriggerAttributes as FlyoutTriggerAttributes, + TriggerProps as FlyoutTriggerProps, } from "./Flyout.types"; diff --git a/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx b/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx index 80d28802..023dfbcd 100644 --- a/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx +++ b/packages/reshaped/src/components/Flyout/tests/Flyout.stories.tsx @@ -1,7 +1,7 @@ import { StoryObj } from "@storybook/react-vite"; import React from "react"; import { createRoot } from "react-dom/client"; -import { userEvent, waitFor, within, expect, fn } from "storybook/test"; +import { expect, fn, userEvent, waitFor, within } from "storybook/test"; import Button from "@/components/Button"; import Flyout, { FlyoutInstance, FlyoutProps } from "@/components/Flyout"; diff --git a/packages/reshaped/src/components/Flyout/useFlyout.ts b/packages/reshaped/src/components/Flyout/useFlyout.ts index 083e7fea..d1009e2e 100644 --- a/packages/reshaped/src/components/Flyout/useFlyout.ts +++ b/packages/reshaped/src/components/Flyout/useFlyout.ts @@ -1,5 +1,5 @@ import { useIsomorphicLayoutEffect } from "@reshaped/headless"; -import { Flyout, type Coordinates } from "@reshaped/headless/internal"; +import { type Coordinates, Flyout } from "@reshaped/headless/internal"; import { useCallback, useMemo, useRef, useState } from "react"; import type * as T from "./Flyout.types"; diff --git a/packages/reshaped/src/components/Grid/Grid.tsx b/packages/reshaped/src/components/Grid/Grid.tsx index dd49eb7f..51488eaa 100644 --- a/packages/reshaped/src/components/Grid/Grid.tsx +++ b/packages/reshaped/src/components/Grid/Grid.tsx @@ -1,7 +1,7 @@ import { classNames } from "@reshaped/headless"; import { resolveMixin } from "@/styles/mixin"; -import { responsiveVariables, responsivePropDependency } from "@/utilities/props"; +import { responsivePropDependency, responsiveVariables } from "@/utilities/props"; import s from "./Grid.module.css"; diff --git a/packages/reshaped/src/components/Grid/index.ts b/packages/reshaped/src/components/Grid/index.ts index ff659740..c65905cd 100644 --- a/packages/reshaped/src/components/Grid/index.ts +++ b/packages/reshaped/src/components/Grid/index.ts @@ -7,4 +7,4 @@ const GridRoot = Grid as typeof Grid & { GridRoot.Item = GridItem; export default GridRoot; -export type { Props as GridProps, ItemProps as GridItemProps } from "./Grid.types"; +export type { ItemProps as GridItemProps, Props as GridProps } from "./Grid.types"; diff --git a/packages/reshaped/src/components/Modal/Modal.tsx b/packages/reshaped/src/components/Modal/Modal.tsx index 4d6d3a5c..2a1698ff 100644 --- a/packages/reshaped/src/components/Modal/Modal.tsx +++ b/packages/reshaped/src/components/Modal/Modal.tsx @@ -1,7 +1,7 @@ "use client"; import { classNames, useHandlerRef } from "@reshaped/headless"; -import { enableScroll, disableScroll } from "@reshaped/headless/internal"; +import { disableScroll, enableScroll } from "@reshaped/headless/internal"; import React from "react"; import Overlay from "@/components/Overlay"; @@ -9,7 +9,7 @@ import Text from "@/components/Text"; import useElementId from "@/hooks/useElementId"; import useResponsiveClientValue from "@/hooks/useResponsiveClientValue"; import { resolveMixin } from "@/styles/mixin"; -import { responsiveVariables, responsiveClassNames } from "@/utilities/props"; +import { responsiveClassNames, responsiveVariables } from "@/utilities/props"; import s from "./Modal.module.css"; diff --git a/packages/reshaped/src/components/Modal/Modal.types.ts b/packages/reshaped/src/components/Modal/Modal.types.ts index f2882231..55fdf798 100644 --- a/packages/reshaped/src/components/Modal/Modal.types.ts +++ b/packages/reshaped/src/components/Modal/Modal.types.ts @@ -1,4 +1,4 @@ -import type { OverlayProps, OverlayCloseReason } from "@/components/Overlay"; +import type { OverlayCloseReason, OverlayProps } from "@/components/Overlay"; import type * as G from "@/types/global"; import type { Attributes, ClassName } from "@reshaped/headless"; import type React from "react"; diff --git a/packages/reshaped/src/components/Modal/index.ts b/packages/reshaped/src/components/Modal/index.ts index f931d85e..90f4990f 100644 --- a/packages/reshaped/src/components/Modal/index.ts +++ b/packages/reshaped/src/components/Modal/index.ts @@ -1,4 +1,4 @@ -import Modal, { ModalTitle, ModalSubtitle } from "./Modal"; +import Modal, { ModalSubtitle, ModalTitle } from "./Modal"; const ModalRoot = Modal as typeof Modal & { Title: typeof ModalTitle; diff --git a/packages/reshaped/src/components/NumberField/NumberFieldControlled.tsx b/packages/reshaped/src/components/NumberField/NumberFieldControlled.tsx index 5c1a8a10..07968937 100644 --- a/packages/reshaped/src/components/NumberField/NumberFieldControlled.tsx +++ b/packages/reshaped/src/components/NumberField/NumberFieldControlled.tsx @@ -1,6 +1,6 @@ "use client"; -import { useHotkeys, useHandlerRef } from "@reshaped/headless"; +import { useHandlerRef, useHotkeys } from "@reshaped/headless"; import React from "react"; import Actionable from "@/components/Actionable"; diff --git a/packages/reshaped/src/components/Overlay/Overlay.tsx b/packages/reshaped/src/components/Overlay/Overlay.tsx index 2ec63b5d..39d62a76 100644 --- a/packages/reshaped/src/components/Overlay/Overlay.tsx +++ b/packages/reshaped/src/components/Overlay/Overlay.tsx @@ -2,9 +2,9 @@ import { TrapFocus, + useHandlerRef, useHotkeys, useIsomorphicLayoutEffect, - useHandlerRef, useScrollLock, useToggle, } from "@reshaped/headless"; diff --git a/packages/reshaped/src/components/Overlay/index.tsx b/packages/reshaped/src/components/Overlay/index.tsx index 9e0d1df3..300eb34f 100644 --- a/packages/reshaped/src/components/Overlay/index.tsx +++ b/packages/reshaped/src/components/Overlay/index.tsx @@ -1,2 +1,2 @@ export { default } from "./Overlay"; -export type { Props as OverlayProps, CloseReason as OverlayCloseReason } from "./Overlay.types"; +export type { CloseReason as OverlayCloseReason, Props as OverlayProps } from "./Overlay.types"; diff --git a/packages/reshaped/src/components/PinField/PinFieldControlled.tsx b/packages/reshaped/src/components/PinField/PinFieldControlled.tsx index 2b96eeec..fbe6182b 100644 --- a/packages/reshaped/src/components/PinField/PinFieldControlled.tsx +++ b/packages/reshaped/src/components/PinField/PinFieldControlled.tsx @@ -11,9 +11,9 @@ import { onNextFrame } from "@/utilities/animation"; import { responsivePropDependency } from "@/utilities/props"; import { - regExpNumericChar, regExpAlphabeticChar, regExpAlphaNumericChar, + regExpNumericChar, } from "./PinField.constants"; import s from "./PinField.module.css"; diff --git a/packages/reshaped/src/components/Popover/Popover.tsx b/packages/reshaped/src/components/Popover/Popover.tsx index 4453561e..31f9ba3d 100644 --- a/packages/reshaped/src/components/Popover/Popover.tsx +++ b/packages/reshaped/src/components/Popover/Popover.tsx @@ -1,7 +1,7 @@ import { classNames } from "@reshaped/headless"; import Dismissible, { type DismissibleProps } from "@/components/Dismissible"; -import Flyout, { useFlyoutContext, type FlyoutProps } from "@/components/Flyout"; +import Flyout, { type FlyoutProps, useFlyoutContext } from "@/components/Flyout"; import { resolveMixin } from "@/styles/mixin"; import s from "./Popover.module.css"; diff --git a/packages/reshaped/src/components/Popover/Popover.types.ts b/packages/reshaped/src/components/Popover/Popover.types.ts index a4bc73db..efe82e1b 100644 --- a/packages/reshaped/src/components/Popover/Popover.types.ts +++ b/packages/reshaped/src/components/Popover/Popover.types.ts @@ -1,4 +1,4 @@ -import type { FlyoutProps, FlyoutInstance } from "@/components/Flyout"; +import type { FlyoutInstance, FlyoutProps } from "@/components/Flyout"; import type React from "react"; export type Instance = FlyoutInstance; diff --git a/packages/reshaped/src/components/Popover/index.ts b/packages/reshaped/src/components/Popover/index.ts index 81595667..868049f2 100644 --- a/packages/reshaped/src/components/Popover/index.ts +++ b/packages/reshaped/src/components/Popover/index.ts @@ -13,4 +13,4 @@ PopoverRoot.Trigger = Flyout.Trigger; PopoverRoot.Content = Flyout.Content; export default PopoverRoot; -export type { Props as PopoverProps, Instance as PopoverInstance } from "./Popover.types"; +export type { Instance as PopoverInstance, Props as PopoverProps } from "./Popover.types"; diff --git a/packages/reshaped/src/components/Popover/tests/Popover.stories.tsx b/packages/reshaped/src/components/Popover/tests/Popover.stories.tsx index 37e598b0..eaa2a625 100644 --- a/packages/reshaped/src/components/Popover/tests/Popover.stories.tsx +++ b/packages/reshaped/src/components/Popover/tests/Popover.stories.tsx @@ -1,6 +1,6 @@ import { StoryObj } from "@storybook/react-vite"; -import { useState, useId } from "react"; -import { expect, fn, userEvent, within, waitFor } from "storybook/test"; +import { useId, useState } from "react"; +import { expect, fn, userEvent, waitFor, within } from "storybook/test"; import Button from "@/components/Button"; import MenuItem from "@/components/MenuItem"; diff --git a/packages/reshaped/src/components/Reshaped/Reshaped.css b/packages/reshaped/src/components/Reshaped/Reshaped.css index b992f9c9..67b8e906 100644 --- a/packages/reshaped/src/components/Reshaped/Reshaped.css +++ b/packages/reshaped/src/components/Reshaped/Reshaped.css @@ -1,11 +1,8 @@ @layer rs.reset { [data-rs-theme] { + --rs-outline-width: 1.5px; + --rs-outline: 1.5px solid var(--rs-color-border-primary); --rs-radius-circular: 9999px; - --rs-shadow-focus: - 0 0 0 2px var(--rs-color-background-elevation-base), 0 0 0 4px var(--rs-color-border-primary); - --rs-shadow-focus-inset: - inset 0 0 0 2px var(--rs-color-border-primary), - inset 0 0 0 4px var(--rs-color-background-elevation-base); } [data-rs-theme] body, @@ -106,14 +103,23 @@ [data-rs-theme] body, [data-rs-theme]:not(html) { - font-size: var(--rs-font-size-body-3); - line-height: var(--rs-line-height-body-3); - letter-spacing: var(--rs-letter-spacing-body-3); + font-size: var(--rs-font-size-body-2); + line-height: var(--rs-line-height-body-2); + letter-spacing: var(--rs-letter-spacing-body-2); font-family: var(--rs-font-family-body); font-weight: var(--rs-font-weight-regular); } } +[data-rs-theme] { + /* Reset for scoped themes */ + color: var(--rs-color-foreground-neutral); +} + + + + + [data-rs-color-mode="light"] { color-scheme: light; } diff --git a/packages/reshaped/src/components/Reshaped/Reshaped.tsx b/packages/reshaped/src/components/Reshaped/Reshaped.tsx index 1c836e7c..a819447e 100644 --- a/packages/reshaped/src/components/Reshaped/Reshaped.tsx +++ b/packages/reshaped/src/components/Reshaped/Reshaped.tsx @@ -1,6 +1,6 @@ "use client"; -import { Reshaped as HeadlessReshaped, classNames } from "@reshaped/headless"; +import { classNames, Reshaped as HeadlessReshaped } from "@reshaped/headless"; import React from "react"; import { GlobalColorMode, PrivateTheme } from "@/components/Theme"; @@ -8,12 +8,11 @@ import { useGlobalColorMode } from "@/components/Theme/useTheme"; import { ToastProvider } from "@/components/Toast"; import { SingletonViewportProvider } from "@/hooks/_private/useSingletonViewport"; +import "./Reshaped.css"; import s from "./Reshaped.module.css"; import type * as T from "./Reshaped.types"; -import "./Reshaped.css"; - const Reshaped: React.FC = (props) => { const { theme, @@ -21,6 +20,7 @@ const Reshaped: React.FC = (props) => { colorMode, defaultColorMode, defaultViewport, + defaultRTL, toastOptions, scoped, className, @@ -30,7 +30,7 @@ const Reshaped: React.FC = (props) => { const parentGlobalColorMode = useGlobalColorMode(); return ( - + ( - + Hello ), @@ -31,7 +31,7 @@ export const controlledMode: StoryObj = { const [mode, setMode] = useState("dark"); return ( - + - - - ), -}; - -export const positionRelative = { - name: "position, positionType: relative", - render: () => ( - - - - - - - - - - - - - - ), -}; - -export const positionAbsolute = { - name: "position, positionType: absolute", - render: () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ), -}; - -export const positionFixed = { - name: "position, positionType: fixed", - render: () => ( - <> - - - - - - - - - - - - - - - - - - - - - - - - -
- - ), -}; - -export const elevated = { - name: "elevated", - render: () => ( - - - - - - - - - - - - - - - - - - - - - - ), -}; - -export const offset = { - name: "offset", - render: () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - ), -}; - -export const active = { - name: "active", - render: () => { - const barToggle = useToggle(); - - return ( - <> - - - - - - ); - }, -}; - -export const padding = { - name: "padding, paddingBlock, paddingInline", - render: () => ( - - - - - - - - - - - - - - - - - - - - ), -}; - -export const className: StoryObj = { - name: "className, attributes", - render: () => ( -
- - - -
- ), - play: async ({ canvas }) => { - const root = canvas.getByTestId("root").firstChild; - - expect(root).toHaveClass("test-classname"); - expect(root).toHaveAttribute("id", "test-id"); - }, -}; diff --git a/packages/reshaped/src/components/Actionable/Actionable.module.css b/packages/reshaped/src/components/Actionable/Actionable.module.css index b679dcab..8d6f94fb 100644 --- a/packages/reshaped/src/components/Actionable/Actionable.module.css +++ b/packages/reshaped/src/components/Actionable/Actionable.module.css @@ -42,24 +42,25 @@ } &.--inset:focus { - box-shadow: var(--rs-shadow-focus-inset); + outline-offset: calc(var(--rs-outline-width) * -1); } &.--disabled-focus-ring:focus { - box-shadow: none; + outline: none; } &.--radius-inherit { &:focus { - box-shadow: none; + outline: none; } &:focus > * { - box-shadow: var(--rs-shadow-focus); + outline: var(--rs-outline); + outline-offset: var(--rs-outline-width); } &.--inset:focus > * { - box-shadow: var(--rs-shadow-focus-inset); + outline-offset: calc(var(--rs-outline-width) * -1); } } } diff --git a/packages/reshaped/src/components/Loader/Loader.module.css b/packages/reshaped/src/components/Loader/Loader.module.css index 5e37e96c..743481e7 100644 --- a/packages/reshaped/src/components/Loader/Loader.module.css +++ b/packages/reshaped/src/components/Loader/Loader.module.css @@ -1,21 +1,7 @@ -@keyframes rs-reshaped-loader { - 0% { - transform: rotate(0deg); - } - - 50% { - transform: rotate(540deg); - } - - 100% { - transform: rotate(1080deg); - } -} - .root { position: relative; display: block; - animation: rs-reshaped-loader 2.2s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); + animation: rs-reshaped-loader 2.2s infinite cubic-bezier(0.6,0.3,0.3,0.9); width: var(--rs-loader-size); height: var(--rs-loader-size); } @@ -92,3 +78,17 @@ --rs-loader-stroke: 5px; } } + +@keyframes rs-reshaped-loader { + 0% { + transform: rotate(0deg); + } + + 50% { + transform: rotate(540deg); + } + + 100% { + transform: rotate(1080deg); + } +} \ No newline at end of file diff --git a/packages/reshaped/src/components/Loader/tests/Loader.stories.tsx b/packages/reshaped/src/components/Loader/tests/Loader.stories.tsx index f14ee377..b284d9ad 100644 --- a/packages/reshaped/src/components/Loader/tests/Loader.stories.tsx +++ b/packages/reshaped/src/components/Loader/tests/Loader.stories.tsx @@ -19,12 +19,12 @@ export const size = { render: () => { return ( - - - + + + diff --git a/packages/reshaped/src/components/View/View.types.ts b/packages/reshaped/src/components/View/View.types.ts index 18903583..4766efe8 100644 --- a/packages/reshaped/src/components/View/View.types.ts +++ b/packages/reshaped/src/components/View/View.types.ts @@ -64,9 +64,9 @@ export type Props = { color: { foregroundNeutral: { hex: "#191919", hexDark: "#FFFFFF" }, - foregroundNeutralMuted: { hex: "#474747", hexDark: "#B2B2B2" }, + foregroundNeutralFaded: { hex: "#474747", hexDark: "#B2B2B2" }, foregroundDisabled: { hex: "#B2B2B2", hexDark: "#656565" }, foregroundPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" }, foregroundPositive: { hex: "#009951", hexDark: "#79D297" }, @@ -113,37 +113,37 @@ const theme: Partial = { foregroundWarning: { hex: "#7b6305", hexDark: "#b4920c" }, backgroundNeutral: { hex: "#DFE2EA", hexDark: "#444444" }, - backgroundNeutralMuted: { hex: "#F5F5F5", hexDark: "#383838" }, - backgroundNeutralHighlightedMuted: { hex: "#DFE2EA66", hexDark: "#44444466" }, + backgroundNeutralFaded: { hex: "#F5F5F5", hexDark: "#383838" }, + backgroundNeutralHighlightedFaded: { hex: "#DFE2EA66", hexDark: "#44444466" }, backgroundDisabled: { hex: "#e4e4e4", hexDark: "#474747" }, - backgroundDisabledMuted: { hex: "#F5F5F5", hexDark: "#3A3A3A" }, + backgroundDisabledFaded: { hex: "#F5F5F5", hexDark: "#3A3A3A" }, backgroundPrimary: { hex: "#0D99FF", hexDark: "#0C8CE9" }, - backgroundPrimaryMuted: { hex: "#E5F4FF", hexDark: "#394360" }, - backgroundPrimaryHighlightedMuted: { hex: "#0D99FF0F", hexDark: "#0C8CE90F" }, + backgroundPrimaryFaded: { hex: "#E5F4FF", hexDark: "#394360" }, + backgroundPrimaryHighlightedFaded: { hex: "#0D99FF0F", hexDark: "#0C8CE90F" }, backgroundPositive: { hex: "#14AE5C", hexDark: "#198F51" }, - backgroundPositiveMuted: { hex: "#DAECDF", hexDark: "#3d5749" }, - backgroundPositiveHighlightedMuted: { hex: "#14AE5C0F", hexDark: "#198F510F" }, + backgroundPositiveFaded: { hex: "#DAECDF", hexDark: "#3d5749" }, + backgroundPositiveHighlightedFaded: { hex: "#14AE5C0F", hexDark: "#198F510F" }, backgroundCritical: { hex: "#F24822", hexDark: "#E03E1A" }, - backgroundCriticalMuted: { hex: "#FFE2E0", hexDark: "#60332A" }, - backgroundCriticalHighlightedMuted: { hex: "#F248220F", hexDark: "#E03E1A0F" }, + backgroundCriticalFaded: { hex: "#FFE2E0", hexDark: "#60332A" }, + backgroundCriticalHighlightedFaded: { hex: "#F248220F", hexDark: "#E03E1A0F" }, backgroundWarning: { hex: "#facc15", hexDark: "#f1c512" }, - backgroundWarningMuted: { hex: "#fffae9", hexDark: "#2c271f" }, - backgroundWarningHighlightedMuted: { hex: "#facc150F", hexDark: "#f1c5120F" }, + backgroundWarningFaded: { hex: "#fffae9", hexDark: "#2c271f" }, + backgroundWarningHighlightedFaded: { hex: "#facc150F", hexDark: "#f1c5120F" }, borderNeutral: { hex: "#E6E6E6", hexDark: "#444444" }, - borderNeutralMuted: { hex: "#E6E6E6", hexDark: "#444444" }, + borderNeutralFaded: { hex: "#E6E6E6", hexDark: "#444444" }, borderDisabled: { hex: "#E6E6E6", hexDark: "#3E3E3E" }, borderPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" }, - borderPrimaryMuted: { hex: "#BDE3FF", hexDark: "#2A4D72" }, + borderPrimaryFaded: { hex: "#BDE3FF", hexDark: "#2A4D72" }, borderPositive: { hex: "#009951", hexDark: "#79D297" }, - borderPositiveMuted: { hex: "#BBDDC6", hexDark: "#086338" }, + borderPositiveFaded: { hex: "#BBDDC6", hexDark: "#086338" }, borderCritical: { hex: "#DC3412", hexDark: "#FCA397" }, - borderCriticalMuted: { hex: "#FFC7C2", hexDark: "#803226" }, + borderCriticalFaded: { hex: "#FFC7C2", hexDark: "#803226" }, borderWarning: { hex: "#cfa90f", hexDark: "#b4920a" }, - borderWarningMuted: { hex: "#ece2c4", hexDark: "#453c1e" }, + borderWarningFaded: { hex: "#ece2c4", hexDark: "#453c1e" }, backgroundPage: { hex: "#FFFFFF", hexDark: "#2C2C2C" }, - backgroundPageMuted: { hex: "#FAFAFA", hexDark: "#1E1E1E" }, + backgroundPageFaded: { hex: "#FAFAFA", hexDark: "#1E1E1E" }, backgroundElevationBase: { hex: "#FFFFFF", hexDark: "#2C2C2C" }, backgroundElevationRaised: { hex: "#FFFFFF", hexDark: "#2C2C2C" }, backgroundElevationOverlay: { hex: "#FFFFFF", hexDark: "#2C2C2C" }, @@ -353,7 +353,7 @@ const theme: Partial = { ], }, }, - borderMuted: { + borderFaded: { parts: [ { offsetX: 0, @@ -409,7 +409,7 @@ const theme: Partial = { ], }, }, - borderMutedRaised: { + borderFadedRaised: { parts: [ { offsetX: 0, @@ -465,7 +465,7 @@ const theme: Partial = { ], }, }, - borderMutedOverlay: { + borderFadedOverlay: { parts: [ { offsetX: 0, diff --git a/packages/theming/src/generation/definitions/slate.ts b/packages/theming/src/generation/definitions/slate.ts index c68e5f86..b0c51cf4 100644 --- a/packages/theming/src/generation/definitions/slate.ts +++ b/packages/theming/src/generation/definitions/slate.ts @@ -119,7 +119,7 @@ const theme: ThemeDefinition = { }, easing: { - standard: { x1: 0.2, y1: 0, x2: 0, y2: 1 }, // subtle UI transitions + standard: { x1: 0.4, y1: 0, x2: 0.2, y2: 1 }, // subtle UI transitions accelerate: { x1: 0.4, y1: 0, x2: 1, y2: 1 }, // exit / moving away decelerate: { x1: 0, y1: 0, x2: 0.2, y2: 1 }, // enter / appearing }, @@ -309,7 +309,7 @@ const theme: ThemeDefinition = { ], }, }, - borderMuted: { + borderFaded: { parts: [ { offsetX: 0, @@ -365,7 +365,7 @@ const theme: ThemeDefinition = { ], }, }, - borderMutedRaised: { + borderFadedRaised: { parts: [ { offsetX: 0, @@ -421,7 +421,7 @@ const theme: ThemeDefinition = { ], }, }, - borderMutedOverlay: { + borderFadedOverlay: { parts: [ { offsetX: 0, diff --git a/packages/theming/src/generation/tokens/color/color.types.ts b/packages/theming/src/generation/tokens/color/color.types.ts index eb26ca7b..765af178 100644 --- a/packages/theming/src/generation/tokens/color/color.types.ts +++ b/packages/theming/src/generation/tokens/color/color.types.ts @@ -4,42 +4,42 @@ export type Hue = "primary" | "positive" | "critical" | "warning" | "neutral" | export type Name = | "foregroundNeutral" - | "foregroundNeutralMuted" + | "foregroundNeutralFaded" | "foregroundDisabled" | "foregroundPrimary" | "foregroundCritical" | "foregroundWarning" | "foregroundPositive" | "borderNeutral" - | "borderNeutralMuted" + | "borderNeutralFaded" | "borderDisabled" | "borderPrimary" - | "borderPrimaryMuted" + | "borderPrimaryFaded" | "borderCritical" - | "borderCriticalMuted" + | "borderCriticalFaded" | "borderWarning" - | "borderWarningMuted" + | "borderWarningFaded" | "borderPositive" - | "borderPositiveMuted" + | "borderPositiveFaded" | "backgroundNeutral" - | "backgroundNeutralMuted" - | "backgroundNeutralHighlightedMuted" + | "backgroundNeutralFaded" + | "backgroundNeutralHighlightedFaded" | "backgroundDisabled" - | "backgroundDisabledMuted" + | "backgroundDisabledFaded" | "backgroundPrimary" - | "backgroundPrimaryMuted" - | "backgroundPrimaryHighlightedMuted" + | "backgroundPrimaryFaded" + | "backgroundPrimaryHighlightedFaded" | "backgroundCritical" - | "backgroundCriticalMuted" - | "backgroundCriticalHighlightedMuted" + | "backgroundCriticalFaded" + | "backgroundCriticalHighlightedFaded" | "backgroundWarning" - | "backgroundWarningMuted" - | "backgroundWarningHighlightedMuted" + | "backgroundWarningFaded" + | "backgroundWarningHighlightedFaded" | "backgroundPositive" - | "backgroundPositiveMuted" - | "backgroundPositiveHighlightedMuted" + | "backgroundPositiveFaded" + | "backgroundPositiveHighlightedFaded" | "backgroundPage" - | "backgroundPageMuted" + | "backgroundPageFaded" | "backgroundElevationBase" | "backgroundElevationRaised" | "backgroundElevationOverlay" @@ -56,19 +56,19 @@ export type GeneratedOnName = export type GeneratedRGBName = | "rgbBackgroundNeutral" - | "rgbBackgroundNeutralMuted" + | "rgbBackgroundNeutralFaded" | "rgbBackgroundDisabled" - | "rgbBackgroundDisabledMuted" + | "rgbBackgroundDisabledFaded" | "rgbBackgroundPrimary" - | "rgbBackgroundPrimaryMuted" + | "rgbBackgroundPrimaryFaded" | "rgbBackgroundCritical" - | "rgbBackgroundCriticalMuted" + | "rgbBackgroundCriticalFaded" | "rgbBackgroundWarning" - | "rgbBackgroundWarningMuted" + | "rgbBackgroundWarningFaded" | "rgbBackgroundPositive" - | "rgbBackgroundPositiveMuted" + | "rgbBackgroundPositiveFaded" | "rgbBackgroundPage" - | "rgbBackgroundPageMuted" + | "rgbBackgroundPageFaded" | "rgbBackgroundElevationBase" | "rgbBackgroundElevationRaised" | "rgbBackgroundElevationOverlay"; diff --git a/packages/theming/src/generation/tokens/color/utilities/generateColors.ts b/packages/theming/src/generation/tokens/color/utilities/generateColors.ts index 23900090..df216b7a 100644 --- a/packages/theming/src/generation/tokens/color/utilities/generateColors.ts +++ b/packages/theming/src/generation/tokens/color/utilities/generateColors.ts @@ -73,7 +73,7 @@ const generateColorValues = ( const bgDark = dark || getDarkModeColor(bg); - const bgMuted = neutral + const bgFaded = neutral ? { ...bg, l: 0, c: 0, alpha: 0.03 } : { ...bg, @@ -81,48 +81,48 @@ const generateColorValues = ( // Keep muted colors subtle but avoid introducing tint for low-chroma inputs. c: Math.min(warning ? 0.04 : 0.02, bg.c / 5), }; - const bgMutedDark = neutral + const bgFadedDark = neutral ? { ...bgDark, l: 1, alpha: 0.03 } : { ...bgDark, - l: 0.25, + l: 0.24, // For primary color with low chroma, we still have to make sure it stays low - c: bgDark.c / 7.5, + c: bgDark.c / 9.8, }; - const bgHighlightedMuted = neutral ? { ...bg, alpha: 0.4 } : { ...bg, alpha: 0.06 }; - const bgHighlightedMutedDark = neutral ? { ...bgDark, alpha: 0.48 } : { ...bgDark, alpha: 0.06 }; + const bgHighlightedFaded = neutral ? { ...bg, alpha: 0.4 } : { ...bg, alpha: 0.06 }; + const bgHighlightedFadedDark = neutral ? { ...bgDark, alpha: 0.48 } : { ...bgDark, alpha: 0.06 }; const fg = neutral ? { ...bg, l: 0.24 } : { ...bg, l: 0.52 }; const fgDark = neutral ? { ...bgDark, l: 0.96 } : { ...bgDark, l: 0.75, c: bg.c * 0.85 }; const bd = neutral ? { ...bg, l: 0, alpha: 0.12 } : { ...bg, l: bg.l - 0.08 }; const bdDark = neutral ? { ...bgDark, l: 1, alpha: 0.12 } : { ...bgDark, l: bgDark.l + 0.1 }; - const bdMuted = neutral ? { ...bgMuted, l: 0, alpha: 0.08 } : { ...bgMuted, l: bgMuted.l - 0.03 }; - const bdMutedDark = neutral - ? { ...bgMutedDark, l: 1, alpha: 0.08 } - : { ...bgMutedDark, l: bgMutedDark.l + 0.06 }; + const bdFaded = neutral ? { ...bgFaded, l: 0, alpha: 0.08 } : { ...bgFaded, l: bgFaded.l - 0.04 }; + const bdFadedDark = neutral + ? { ...bgFadedDark, l: 1, alpha: 0.08 } + : { ...bgFadedDark, l: bgFadedDark.l + 0.06 }; const output = { [`background${capitalizedKey}`]: { oklch: bg, oklchDark: bgDark, }, - [`background${capitalizedKey}Muted`]: { - oklch: bgMuted, - oklchDark: bgMutedDark, + [`background${capitalizedKey}Faded`]: { + oklch: bgFaded, + oklchDark: bgFadedDark, }, - [`background${capitalizedKey}HighlightedMuted`]: { - oklch: bgHighlightedMuted, - oklchDark: bgHighlightedMutedDark, + [`background${capitalizedKey}HighlightedFaded`]: { + oklch: bgHighlightedFaded, + oklchDark: bgHighlightedFadedDark, }, [`border${capitalizedKey}`]: { oklch: bd, oklchDark: bdDark, }, - [`border${capitalizedKey}Muted`]: { - oklch: bdMuted, - oklchDark: bdMutedDark, + [`border${capitalizedKey}Faded`]: { + oklch: bdFaded, + oklchDark: bdFadedDark, }, [`foreground${capitalizedKey}`]: { oklch: fg, @@ -131,7 +131,7 @@ const generateColorValues = ( }; if (neutral) { - output[`foreground${capitalizedKey}Muted`] = { + output[`foreground${capitalizedKey}Faded`] = { oklch: { ...fg, l: fg.l + 0.25 }, oklchDark: { ...fgDark, l: fgDark.l - 0.15 }, }; @@ -139,7 +139,7 @@ const generateColorValues = ( oklch: { ...bg, l: 0.95, c: 0 }, oklchDark: { ...bgDark, l: 0.28, c: 0 }, }; - output[`backgroundDisabledMuted`] = { + output[`backgroundDisabledFaded`] = { oklch: { ...bg, l: 0.98, c: 0 }, oklchDark: { ...bgDark, l: 0.23, c: 0 }, }; @@ -167,7 +167,7 @@ const generateColorValues = ( oklch: { ...bg, l: 1, c: 0 }, oklchDark: { ...bgDark, l: 0.16, c: 0 }, }; - output[`backgroundPageMuted`] = { + output[`backgroundPageFaded`] = { oklch: { ...bg, l: 0.98, c: 0 }, oklchDark: { ...bgDark, l: 0.18, c: 0 }, }; diff --git a/packages/theming/src/generation/tokens/shadow/shadow.types.ts b/packages/theming/src/generation/tokens/shadow/shadow.types.ts index b4cacbb4..df2bb6c0 100644 --- a/packages/theming/src/generation/tokens/shadow/shadow.types.ts +++ b/packages/theming/src/generation/tokens/shadow/shadow.types.ts @@ -6,9 +6,9 @@ export type Name = | "border" | "borderRaised" | "borderOverlay" - | "borderMuted" - | "borderMutedRaised" - | "borderMutedOverlay"; + | "borderFaded" + | "borderFadedRaised" + | "borderFadedOverlay"; type Part = { offsetX: number; From 8d5904f2c70a1706455581bbfb47645efc2271e4 Mon Sep 17 00:00:00 2001 From: Dmitry Belyaev Date: Thu, 12 Mar 2026 00:08:58 +0100 Subject: [PATCH 06/75] v4: Flyout, Hotkey --- .changeset/little-mangos-attack.md | 5 +++++ .storybook/preview.jsx | 2 +- .../reshaped/src/components/Autocomplete/Autocomplete.tsx | 2 -- .../src/components/Autocomplete/Autocomplete.types.ts | 1 - .../src/components/DropdownMenu/DropdownMenu.types.ts | 4 ---- packages/reshaped/src/components/Flyout/Flyout.types.ts | 6 ------ .../reshaped/src/components/Flyout/FlyoutControlled.tsx | 6 ++---- packages/reshaped/src/components/Hotkey/Hotkey.module.css | 5 ++--- packages/reshaped/src/components/Popover/Popover.types.ts | 2 -- 9 files changed, 10 insertions(+), 23 deletions(-) create mode 100644 .changeset/little-mangos-attack.md diff --git a/.changeset/little-mangos-attack.md b/.changeset/little-mangos-attack.md new file mode 100644 index 00000000..50bc707e --- /dev/null +++ b/.changeset/little-mangos-attack.md @@ -0,0 +1,5 @@ +--- +"reshaped": major +--- + +Flyout: Removed deprecated forcePosition and fallbackMinWidth props diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index 0505998f..4dca635c 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -60,7 +60,7 @@ const ThemeSwitch = () => { Toggle mode - + {(attributes) => ( }> + + + + + + + ); + }, }; export const elevated = { - name: "elevated", + name: "elevation", render: () => ( - - + + + + + + + diff --git a/packages/reshaped/src/styles/mixin.ts b/packages/reshaped/src/styles/mixin.ts index 9369ca13..9ae5a885 100644 --- a/packages/reshaped/src/styles/mixin.ts +++ b/packages/reshaped/src/styles/mixin.ts @@ -34,6 +34,7 @@ import padding, { } from "@/styles/resolvers/padding"; import position from "@/styles/resolvers/position"; import radius from "@/styles/resolvers/radius"; +import shadow from "@/styles/resolvers/shadow"; import textAlign from "@/styles/resolvers/textAlign"; import width from "@/styles/resolvers/width"; @@ -76,6 +77,7 @@ const mixinMap = { radius, textAlign, width, + shadow, }; export const resolveMixin = (mixin: Mixin) => { diff --git a/packages/reshaped/src/styles/resolvers/bleed/bleed.module.css b/packages/reshaped/src/styles/resolvers/bleed/bleed.module.css index 5d9bf1e7..9d2aac55 100644 --- a/packages/reshaped/src/styles/resolvers/bleed/bleed.module.css +++ b/packages/reshaped/src/styles/resolvers/bleed/bleed.module.css @@ -7,16 +7,23 @@ @responsive .--bleed { @value true { - border-left-style: none !important; - border-right-style: none !important; border-radius: 0 !important; + + /* Depends on the border css utility */ + &::before { + border-left-style: none !important; + border-right-style: none !important; + } } @value false { - border-left-style: solid !important; - border-right-style: solid !important; - /* Depends on the radius css utility */ border-radius: var(--rs-radius) !important; + + /* Depends on the border css utility */ + &::before { + border-left-style: solid !important; + border-right-style: solid !important; + } } } diff --git a/packages/reshaped/src/styles/resolvers/border/borderWidth.css b/packages/reshaped/src/styles/resolvers/border/borderWidth.css index 8afa96c9..07bd3b9e 100644 --- a/packages/reshaped/src/styles/resolvers/border/borderWidth.css +++ b/packages/reshaped/src/styles/resolvers/border/borderWidth.css @@ -1,40 +1,52 @@ -@responsive [style*="--rs-border-w-s:"] { +[style*="--rs-border-w"] { + /* Using before while shadows are using after */ + &::before { + content: ""; + position: absolute; + pointer-events: none; + border-radius: inherit; + z-index: var(--rs-z-index-relative); + inset: 0; + } +} + +@responsive [style*="--rs-border-w-s:"]::before { @variable --rs-border-w 1px; border: var(--rs-border-w) solid var(--rs-border-color); } -@responsive [style*="--rs-border-w-top"] { +@responsive [style*="--rs-border-w-top"]::before { @variable --rs-border-w-top 1px; border-top: var(--rs-border-w-top) solid var(--rs-border-color); } -@responsive [style*="--rs-border-w-bottom"] { +@responsive [style*="--rs-border-w-bottom"]::before { @variable --rs-border-w-bottom 1px; border-bottom: var(--rs-border-w-bottom) solid var(--rs-border-color); } -@responsive [style*="--rs-border-w-start"] { +@responsive [style*="--rs-border-w-start"]::before { @variable --rs-border-w-start 1px; border-inline-start: var(--rs-border-w-start) solid var(--rs-border-color); } -@responsive [style*="--rs-border-w-end"] { +@responsive [style*="--rs-border-w-end"]::before { @variable --rs-border-w-end 1px; border-inline-end: var(--rs-border-w-end) solid var(--rs-border-color); } -@responsive [style*="--rs-border-w-inline"] { +@responsive [style*="--rs-border-w-inline"]::before { @variable --rs-border-w-inline 1px; border-inline: var(--rs-border-w-inline) solid var(--rs-border-color); } -@responsive [style*="--rs-border-w-block"] { +@responsive [style*="--rs-border-w-block"]::before { @variable --rs-border-w-block 1px; border-block: var(--rs-border-w-block) solid var(--rs-border-color); diff --git a/packages/reshaped/src/styles/resolvers/padding/padding.css b/packages/reshaped/src/styles/resolvers/padding/padding.css index ea744171..543269cc 100644 --- a/packages/reshaped/src/styles/resolvers/padding/padding.css +++ b/packages/reshaped/src/styles/resolvers/padding/padding.css @@ -1,53 +1,41 @@ @responsive [style*="--rs-p-s:"] { @variable --rs-p 0; - padding: calc(var(--rs-p) * var(--rs-unit-x1) - var(--rs-border-w, 0px)); + padding: calc(var(--rs-p) * var(--rs-unit-x1)); } @responsive [style*="--rs-p-top-"] { @variable --rs-p-top 0; - padding-top: calc( - var(--rs-p-top) * var(--rs-unit-x1) - var(--rs-border-w, var(--rs-border-w-top, 0px)) - ); + padding-top: calc(var(--rs-p-top) * var(--rs-unit-x1)); } @responsive [style*="--rs-p-bottom-"] { @variable --rs-p-bottom 0; - padding-bottom: calc( - var(--rs-p-bottom) * var(--rs-unit-x1) - var(--rs-border-w, var(--rs-border-w-bottom, 0px)) - ); + padding-bottom: calc(var(--rs-p-bottom) * var(--rs-unit-x1)); } @responsive [style*="--rs-p-start-"] { @variable --rs-p-start 0; - padding-inline-start: calc( - var(--rs-p-start) * var(--rs-unit-x1) - var(--rs-border-w, var(--rs-border-w-start, 0px)) - ); + padding-inline-start: calc(var(--rs-p-start) * var(--rs-unit-x1)); } @responsive [style*="--rs-p-end-"] { @variable --rs-p-end 0; - padding-inline-end: calc( - var(--rs-p-end) * var(--rs-unit-x1) - var(--rs-border-w, var(--rs-border-w-end, 0px)) - ); + padding-inline-end: calc(var(--rs-p-end) * var(--rs-unit-x1)); } @responsive [style*="--rs-p-block-"] { @variable --rs-p-block 0; - padding-block: calc( - var(--rs-p-block) * var(--rs-unit-x1) - var(--rs-border-w, var(--rs-border-w-block, 0px)) - ); + padding-block: calc(var(--rs-p-block) * var(--rs-unit-x1)); } @responsive [style*="--rs-p-inline-"] { @variable --rs-p-inline 0; - padding-inline: calc( - var(--rs-p-inline) * var(--rs-unit-x1) - var(--rs-border-w, var(--rs-border-w-inline, 0px)) - ); + padding-inline: calc(var(--rs-p-inline) * var(--rs-unit-x1)); } diff --git a/packages/reshaped/src/styles/resolvers/shadow/index.ts b/packages/reshaped/src/styles/resolvers/shadow/index.ts new file mode 100644 index 00000000..7f5627dd --- /dev/null +++ b/packages/reshaped/src/styles/resolvers/shadow/index.ts @@ -0,0 +1,14 @@ +import * as T from "@/styles/types"; + +import s from "./shadow.module.css"; + +import type { ClassName } from "@reshaped/headless"; + +const shadow: (value: T.Shadow) => { classNames?: ClassName; variables?: React.CSSProperties } = ( + value +) => { + if (!value) return {}; + return { classNames: [s.root, s[`--shadow-${value}`]] }; +}; + +export default shadow; diff --git a/packages/reshaped/src/styles/resolvers/shadow/shadow.module.css b/packages/reshaped/src/styles/resolvers/shadow/shadow.module.css new file mode 100644 index 00000000..aa7b7bda --- /dev/null +++ b/packages/reshaped/src/styles/resolvers/shadow/shadow.module.css @@ -0,0 +1,50 @@ +.root { + position: relative; + isolation: isolate; + + /* Using after while borders are using before */ + &::after { + content: ""; + position: absolute; + inset: 1px; + pointer-events: none; + border-radius: inherit; + z-index: var(--rs-z-index-relative); + } +} + +.--shadow-base { + &::after { + box-shadow: var(--rs-shadow-base); + } +} + +.--shadow-base-intense { + &::after { + box-shadow: var(--rs-shadow-base-intense); + } +} + +.--shadow-raised { + &::after { + box-shadow: var(--rs-shadow-raised); + } +} + +.--shadow-raised-intense { + &::after { + box-shadow: var(--rs-shadow-raised-intense); + } +} + +.--shadow-overlay { + &::after { + box-shadow: var(--rs-shadow-overlay); + } +} + +.--shadow-overlay-intense { + &::after { + box-shadow: var(--rs-shadow-overlay-intense); + } +} diff --git a/packages/reshaped/src/styles/types.ts b/packages/reshaped/src/styles/types.ts index 388f106e..79faef85 100644 --- a/packages/reshaped/src/styles/types.ts +++ b/packages/reshaped/src/styles/types.ts @@ -27,6 +27,13 @@ export type Justify = "start" | "center" | "end" | "space-between"; export type Align = "start" | "center" | "end" | "stretch" | "baseline"; export type Radius = "small" | "medium" | "large" | "circular" | "none"; export type Position = "relative" | "absolute" | "fixed" | "sticky" | "static"; +export type Shadow = + | "base" + | "baseIntense" + | "raised" + | "raisedIntense" + | "overlay" + | "overlayIntense"; export type Border = boolean; export type BorderColor = @@ -71,6 +78,8 @@ export type Mixin = { borderInline?: G.Responsive; borderBlock?: G.Responsive; + shadow?: Shadow; + width?: G.Responsive; height?: G.Responsive; maxWidth?: G.Responsive; diff --git a/packages/reshaped/src/themes/figma/tailwind.css b/packages/reshaped/src/themes/figma/tailwind.css index 86f01c63..e690bf14 100644 --- a/packages/reshaped/src/themes/figma/tailwind.css +++ b/packages/reshaped/src/themes/figma/tailwind.css @@ -79,14 +79,12 @@ --spacing-x8: var(--rs-unit-x8); --spacing-x9: var(--rs-unit-x9); --spacing-x10: var(--rs-unit-x10); ---shadow-border: var(--rs-shadow-border); ---shadow-border-raised: var(--rs-shadow-border-raised); ---shadow-border-overlay: var(--rs-shadow-border-overlay); ---shadow-border-faded: var(--rs-shadow-border-faded); ---shadow-border-faded-raised: var(--rs-shadow-border-faded-raised); ---shadow-border-faded-overlay: var(--rs-shadow-border-faded-overlay); +--shadow-base: var(--rs-shadow-base); +--shadow-base-intense: var(--rs-shadow-base-intense); --shadow-raised: var(--rs-shadow-raised); +--shadow-raised-intense: var(--rs-shadow-raised-intense); --shadow-overlay: var(--rs-shadow-overlay); +--shadow-overlay-intense: var(--rs-shadow-overlay-intense); --breakpoint-m: 660px; --breakpoint-l: 900px; --breakpoint-xl: 1280px; diff --git a/packages/reshaped/src/themes/figma/theme.css b/packages/reshaped/src/themes/figma/theme.css index 3926ad6f..f195616f 100644 --- a/packages/reshaped/src/themes/figma/theme.css +++ b/packages/reshaped/src/themes/figma/theme.css @@ -101,8 +101,8 @@ --rs-easing-standard: cubic-bezier(0.2, 0, 0, 1); --rs-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --rs-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); ---rs-shadow-raised: 0px 10px 12px -4px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.1); ---rs-shadow-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.1), 0px 16px 24px -6px rgba(0, 0, 0, 0.1), 0px 8px 12px -4px rgba(0, 0, 0, 0.1); +--rs-shadow-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06); +--rs-shadow-overlay-intense: 0px 32px 48px -8px rgba(0, 0, 0, 0.08), 0px 16px 24px -6px rgba(0, 0, 0, 0.08), 0px 8px 12px -4px rgba(0, 0, 0, 0.08); --rs-viewport-m-min: 660; --rs-viewport-l-min: 900; --rs-viewport-xl-min: 1280; @@ -175,12 +175,10 @@ --rs-color-rgb-background-elevation-overlay: 255, 255, 255; --rs-color-rgb-background-page: 255, 255, 255; --rs-color-rgb-background-page-faded: 250.002, 250.002, 250.002; ---rs-shadow-border: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); ---rs-shadow-border-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); ---rs-shadow-border-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); ---rs-shadow-border-faded: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 6px 0px 1px rgba(0, 0, 0, 0.08); ---rs-shadow-border-faded-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); ---rs-shadow-border-faded-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); +--rs-shadow-base: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.06); +--rs-shadow-base-intense: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 2px 3px 0px rgba(0, 0, 0, 0.08); +--rs-shadow-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1); +--rs-shadow-raised-intense: 0px 12px 12px -4px rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.1); } [data-rs-theme~="figma"][data-rs-color-mode="dark"] { @@ -247,11 +245,9 @@ --rs-color-rgb-background-elevation-overlay: 43.9875, 43.9875, 43.9875; --rs-color-rgb-background-page: 43.9875, 43.9875, 43.9875; --rs-color-rgb-background-page-faded: 29.988, 29.988, 29.988; ---rs-shadow-border: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); ---rs-shadow-border-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); ---rs-shadow-border-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); ---rs-shadow-border-faded: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 6px 0px 1px rgba(1, 1, 1, 0.08); ---rs-shadow-border-faded-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); ---rs-shadow-border-faded-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); +--rs-shadow-base: 0px -1px 2px -0.5px rgba(255, 255, 255, 0.06), 0px -1px 3px -1px rgba(255, 255, 255, 0.05); +--rs-shadow-base-intense: 0px -1px 2px 0px rgba(255, 255, 255, 0.08), 0px -1px 3px 0px rgba(255, 255, 255, 0.08); +--rs-shadow-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(255, 255, 255, 0.1); +--rs-shadow-raised-intense: 0px 12px 12px -4px rgba(0, 0, 0, 0.1), 0px -2px 2px 0px rgba(255, 255, 255, 0.1); } \ No newline at end of file diff --git a/packages/reshaped/src/themes/figma/theme.json b/packages/reshaped/src/themes/figma/theme.json index 4e5ec07a..4ef50534 100644 --- a/packages/reshaped/src/themes/figma/theme.json +++ b/packages/reshaped/src/themes/figma/theme.json @@ -583,7 +583,7 @@ } }, "shadow": { - "border": { + "base": { "parts": [ { "offsetX": 0, @@ -599,15 +599,7 @@ "blurRadius": 3, "spreadRadius": -1, "colorToken": "black", - "opacity": 0.05 - }, - { - "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "black", - "opacity": 0.1 + "opacity": 0.06 } ], "dark": { @@ -627,259 +619,131 @@ "spreadRadius": -1, "colorToken": "white", "opacity": 0.05 - }, - { - "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "white", - "opacity": 0.1 } ] } }, - "borderRaised": { + "baseIntense": { "parts": [ - { - "offsetX": 0, - "offsetY": 8, - "blurRadius": 12, - "spreadRadius": -4, - "colorToken": "black", - "opacity": 0.08 - }, { "offsetX": 0, "offsetY": 1, "blurRadius": 2, "spreadRadius": 0, "colorToken": "black", - "opacity": 0.1 + "opacity": 0.08 }, { "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, + "offsetY": 2, + "blurRadius": 3, + "spreadRadius": 0, "colorToken": "black", - "opacity": 0.1 + "opacity": 0.08 } ], "dark": { "parts": [ { "offsetX": 0, - "offsetY": 8, - "blurRadius": 12, - "spreadRadius": -4, - "colorToken": "black", - "opacity": 0.08 - }, - { - "offsetX": 0, - "offsetY": -2, + "offsetY": -1, "blurRadius": 2, - "spreadRadius": -1, + "spreadRadius": 0, "colorToken": "white", - "opacity": 0.1 + "opacity": 0.08 }, { "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, + "offsetY": -1, + "blurRadius": 3, + "spreadRadius": 0, "colorToken": "white", - "opacity": 0.1 + "opacity": 0.08 } ] } }, - "borderOverlay": { + "raised": { "parts": [ - { - "offsetX": 0, - "offsetY": 32, - "blurRadius": 48, - "spreadRadius": -8, - "colorToken": "black", - "opacity": 0.06 - }, - { - "offsetX": 0, - "offsetY": 16, - "blurRadius": 24, - "spreadRadius": -6, - "colorToken": "black", - "opacity": 0.06 - }, { "offsetX": 0, "offsetY": 8, "blurRadius": 12, "spreadRadius": -4, "colorToken": "black", - "opacity": 0.06 + "opacity": 0.08 }, { "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, + "offsetY": 1, + "blurRadius": 2, + "spreadRadius": 0, "colorToken": "black", "opacity": 0.1 } ], "dark": { "parts": [ - { - "offsetX": 0, - "offsetY": 32, - "blurRadius": 48, - "spreadRadius": -8, - "colorToken": "black", - "opacity": 0.06 - }, - { - "offsetX": 0, - "offsetY": 16, - "blurRadius": 24, - "spreadRadius": -6, - "colorToken": "black", - "opacity": 0.06 - }, { "offsetX": 0, "offsetY": 8, "blurRadius": 12, "spreadRadius": -4, "colorToken": "black", - "opacity": 0.06 + "opacity": 0.08 }, { "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "white", - "opacity": 0.1 - } - ] - } - }, - "borderFaded": { - "parts": [ - { - "offsetX": 0, - "offsetY": 1, - "blurRadius": 2, - "spreadRadius": -0.5, - "colorToken": "black", - "opacity": 0.06 - }, - { - "offsetX": 0, - "offsetY": 2, - "blurRadius": 3, - "spreadRadius": -1, - "colorToken": "black", - "opacity": 0.05 - }, - { - "offsetX": 0, - "offsetY": 6, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "black", - "opacity": 0.08 - } - ], - "dark": { - "parts": [ - { - "offsetX": 0, - "offsetY": -1, + "offsetY": -2, "blurRadius": 2, - "spreadRadius": -0.5, - "colorToken": "white", - "opacity": 0.06 - }, - { - "offsetX": 0, - "offsetY": -1, - "blurRadius": 3, "spreadRadius": -1, "colorToken": "white", - "opacity": 0.05 - }, - { - "offsetX": 0, - "offsetY": 6, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "white", - "opacity": 0.08 + "opacity": 0.1 } ] } }, - "borderFadedRaised": { + "raisedIntense": { "parts": [ { "offsetX": 0, - "offsetY": 8, + "offsetY": 12, "blurRadius": 12, "spreadRadius": -4, "colorToken": "black", - "opacity": 0.08 + "opacity": 0.1 }, { "offsetX": 0, "offsetY": 1, - "blurRadius": 2, + "blurRadius": 4, "spreadRadius": 0, "colorToken": "black", "opacity": 0.1 - }, - { - "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "black", - "opacity": 0.08 } ], "dark": { "parts": [ { "offsetX": 0, - "offsetY": 8, + "offsetY": 12, "blurRadius": 12, "spreadRadius": -4, "colorToken": "black", - "opacity": 0.08 + "opacity": 0.1 }, { "offsetX": 0, "offsetY": -2, "blurRadius": 2, - "spreadRadius": -1, + "spreadRadius": 0, "colorToken": "white", "opacity": 0.1 - }, - { - "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "white", - "opacity": 0.08 } ] } }, - "borderFadedOverlay": { + "overlay": { "parts": [ { "offsetX": 0, @@ -904,14 +768,6 @@ "spreadRadius": -4, "colorToken": "black", "opacity": 0.06 - }, - { - "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "black", - "opacity": 0.08 } ], "dark": { @@ -939,45 +795,11 @@ "spreadRadius": -4, "colorToken": "black", "opacity": 0.06 - }, - { - "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "white", - "opacity": 0.08 } ] } }, - "raised": { - "parts": [ - { - "offsetX": 0, - "offsetY": 10, - "blurRadius": 12, - "spreadRadius": -4, - "colorToken": "black", - "opacity": 0.08 - }, - { - "offsetX": 0, - "offsetY": 2, - "blurRadius": 4, - "colorToken": "black", - "opacity": 0.1 - }, - { - "offsetX": 0, - "offsetY": 1, - "blurRadius": 4, - "colorToken": "black", - "opacity": 0.1 - } - ] - }, - "overlay": { + "overlayIntense": { "parts": [ { "offsetX": 0, @@ -985,7 +807,7 @@ "blurRadius": 48, "spreadRadius": -8, "colorToken": "black", - "opacity": 0.1 + "opacity": 0.08 }, { "offsetX": 0, @@ -993,7 +815,7 @@ "blurRadius": 24, "spreadRadius": -6, "colorToken": "black", - "opacity": 0.1 + "opacity": 0.08 }, { "offsetX": 0, @@ -1001,9 +823,37 @@ "blurRadius": 12, "spreadRadius": -4, "colorToken": "black", - "opacity": 0.1 + "opacity": 0.08 } - ] + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": 32, + "blurRadius": 48, + "spreadRadius": -8, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": 16, + "blurRadius": 24, + "spreadRadius": -6, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.08 + } + ] + } } }, "viewport": { diff --git a/packages/reshaped/src/themes/fragments/twitter/tailwind.css b/packages/reshaped/src/themes/fragments/twitter/tailwind.css index 256ea9b2..b02d4512 100644 --- a/packages/reshaped/src/themes/fragments/twitter/tailwind.css +++ b/packages/reshaped/src/themes/fragments/twitter/tailwind.css @@ -75,14 +75,12 @@ --spacing-x8: var(--rs-unit-x8); --spacing-x9: var(--rs-unit-x9); --spacing-x10: var(--rs-unit-x10); ---shadow-border: var(--rs-shadow-border); ---shadow-border-raised: var(--rs-shadow-border-raised); ---shadow-border-overlay: var(--rs-shadow-border-overlay); ---shadow-border-faded: var(--rs-shadow-border-faded); ---shadow-border-faded-raised: var(--rs-shadow-border-faded-raised); ---shadow-border-faded-overlay: var(--rs-shadow-border-faded-overlay); +--shadow-base: var(--rs-shadow-base); +--shadow-base-intense: var(--rs-shadow-base-intense); --shadow-raised: var(--rs-shadow-raised); +--shadow-raised-intense: var(--rs-shadow-raised-intense); --shadow-overlay: var(--rs-shadow-overlay); +--shadow-overlay-intense: var(--rs-shadow-overlay-intense); --breakpoint-m: 660px; --breakpoint-l: 900px; --breakpoint-xl: 1280px; diff --git a/packages/reshaped/src/themes/slate/tailwind.css b/packages/reshaped/src/themes/slate/tailwind.css index 86f01c63..e690bf14 100644 --- a/packages/reshaped/src/themes/slate/tailwind.css +++ b/packages/reshaped/src/themes/slate/tailwind.css @@ -79,14 +79,12 @@ --spacing-x8: var(--rs-unit-x8); --spacing-x9: var(--rs-unit-x9); --spacing-x10: var(--rs-unit-x10); ---shadow-border: var(--rs-shadow-border); ---shadow-border-raised: var(--rs-shadow-border-raised); ---shadow-border-overlay: var(--rs-shadow-border-overlay); ---shadow-border-faded: var(--rs-shadow-border-faded); ---shadow-border-faded-raised: var(--rs-shadow-border-faded-raised); ---shadow-border-faded-overlay: var(--rs-shadow-border-faded-overlay); +--shadow-base: var(--rs-shadow-base); +--shadow-base-intense: var(--rs-shadow-base-intense); --shadow-raised: var(--rs-shadow-raised); +--shadow-raised-intense: var(--rs-shadow-raised-intense); --shadow-overlay: var(--rs-shadow-overlay); +--shadow-overlay-intense: var(--rs-shadow-overlay-intense); --breakpoint-m: 660px; --breakpoint-l: 900px; --breakpoint-xl: 1280px; diff --git a/packages/reshaped/src/themes/slate/theme.css b/packages/reshaped/src/themes/slate/theme.css index 275a5c0c..6b0f86cf 100644 --- a/packages/reshaped/src/themes/slate/theme.css +++ b/packages/reshaped/src/themes/slate/theme.css @@ -98,8 +98,8 @@ --rs-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --rs-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --rs-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); ---rs-shadow-raised: 0px 10px 12px -4px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.1); ---rs-shadow-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.1), 0px 16px 24px -6px rgba(0, 0, 0, 0.1), 0px 8px 12px -4px rgba(0, 0, 0, 0.1); +--rs-shadow-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06); +--rs-shadow-overlay-intense: 0px 32px 48px -8px rgba(0, 0, 0, 0.08), 0px 16px 24px -6px rgba(0, 0, 0, 0.08), 0px 8px 12px -4px rgba(0, 0, 0, 0.08); --rs-viewport-m-min: 660; --rs-viewport-l-min: 900; --rs-viewport-xl-min: 1280; @@ -172,12 +172,10 @@ --rs-color-rgb-background-elevation-overlay: 255, 255, 255; --rs-color-rgb-background-page: 255, 255, 255; --rs-color-rgb-background-page-faded: 248.2935, 248.2935, 248.2935; ---rs-shadow-border: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); ---rs-shadow-border-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); ---rs-shadow-border-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); ---rs-shadow-border-faded: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 6px 0px 1px rgba(0, 0, 0, 0.08); ---rs-shadow-border-faded-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); ---rs-shadow-border-faded-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.08); +--rs-shadow-base: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.06), 0px 2px 3px -1px rgba(0, 0, 0, 0.06); +--rs-shadow-base-intense: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 2px 3px 0px rgba(0, 0, 0, 0.08); +--rs-shadow-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1); +--rs-shadow-raised-intense: 0px 12px 12px -4px rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.1); } [data-rs-theme~="slate"][data-rs-color-mode="dark"] { @@ -244,11 +242,9 @@ --rs-color-rgb-background-elevation-overlay: 28.815, 28.815, 28.815; --rs-color-rgb-background-page: 13.209, 13.209, 13.209; --rs-color-rgb-background-page-faded: 17.5185, 17.5185, 17.5185; ---rs-shadow-border: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); ---rs-shadow-border-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); ---rs-shadow-border-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.1); ---rs-shadow-border-faded: 0px -1px 2px -0.5px rgba(1, 1, 1, 0.06), 0px -1px 3px -1px rgba(1, 1, 1, 0.05), 0px 6px 0px 1px rgba(1, 1, 1, 0.08); ---rs-shadow-border-faded-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(1, 1, 1, 0.1), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); ---rs-shadow-border-faded-overlay: 0px 32px 48px -8px rgba(0, 0, 0, 0.06), 0px 16px 24px -6px rgba(0, 0, 0, 0.06), 0px 8px 12px -4px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(1, 1, 1, 0.08); +--rs-shadow-base: 0px -1px 2px -0.5px rgba(255, 255, 255, 0.06), 0px -1px 3px -1px rgba(255, 255, 255, 0.05); +--rs-shadow-base-intense: 0px -1px 2px 0px rgba(255, 255, 255, 0.08), 0px -1px 3px 0px rgba(255, 255, 255, 0.08); +--rs-shadow-raised: 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px -2px 2px -1px rgba(255, 255, 255, 0.1); +--rs-shadow-raised-intense: 0px 12px 12px -4px rgba(0, 0, 0, 0.1), 0px -2px 2px 0px rgba(255, 255, 255, 0.1); } \ No newline at end of file diff --git a/packages/reshaped/src/themes/slate/theme.json b/packages/reshaped/src/themes/slate/theme.json index 9607a517..952aee3d 100644 --- a/packages/reshaped/src/themes/slate/theme.json +++ b/packages/reshaped/src/themes/slate/theme.json @@ -1099,7 +1099,7 @@ } }, "shadow": { - "border": { + "base": { "parts": [ { "offsetX": 0, @@ -1115,15 +1115,7 @@ "blurRadius": 3, "spreadRadius": -1, "colorToken": "black", - "opacity": 0.05 - }, - { - "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "black", - "opacity": 0.1 + "opacity": 0.06 } ], "dark": { @@ -1143,259 +1135,131 @@ "spreadRadius": -1, "colorToken": "white", "opacity": 0.05 - }, - { - "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "white", - "opacity": 0.1 } ] } }, - "borderRaised": { + "baseIntense": { "parts": [ - { - "offsetX": 0, - "offsetY": 8, - "blurRadius": 12, - "spreadRadius": -4, - "colorToken": "black", - "opacity": 0.08 - }, { "offsetX": 0, "offsetY": 1, "blurRadius": 2, "spreadRadius": 0, "colorToken": "black", - "opacity": 0.1 + "opacity": 0.08 }, { "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, + "offsetY": 2, + "blurRadius": 3, + "spreadRadius": 0, "colorToken": "black", - "opacity": 0.1 + "opacity": 0.08 } ], "dark": { "parts": [ { "offsetX": 0, - "offsetY": 8, - "blurRadius": 12, - "spreadRadius": -4, - "colorToken": "black", - "opacity": 0.08 - }, - { - "offsetX": 0, - "offsetY": -2, + "offsetY": -1, "blurRadius": 2, - "spreadRadius": -1, + "spreadRadius": 0, "colorToken": "white", - "opacity": 0.1 + "opacity": 0.08 }, { "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, + "offsetY": -1, + "blurRadius": 3, + "spreadRadius": 0, "colorToken": "white", - "opacity": 0.1 + "opacity": 0.08 } ] } }, - "borderOverlay": { + "raised": { "parts": [ - { - "offsetX": 0, - "offsetY": 32, - "blurRadius": 48, - "spreadRadius": -8, - "colorToken": "black", - "opacity": 0.06 - }, - { - "offsetX": 0, - "offsetY": 16, - "blurRadius": 24, - "spreadRadius": -6, - "colorToken": "black", - "opacity": 0.06 - }, { "offsetX": 0, "offsetY": 8, "blurRadius": 12, "spreadRadius": -4, "colorToken": "black", - "opacity": 0.06 + "opacity": 0.08 }, { "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, + "offsetY": 1, + "blurRadius": 2, + "spreadRadius": 0, "colorToken": "black", "opacity": 0.1 } ], "dark": { "parts": [ - { - "offsetX": 0, - "offsetY": 32, - "blurRadius": 48, - "spreadRadius": -8, - "colorToken": "black", - "opacity": 0.06 - }, - { - "offsetX": 0, - "offsetY": 16, - "blurRadius": 24, - "spreadRadius": -6, - "colorToken": "black", - "opacity": 0.06 - }, { "offsetX": 0, "offsetY": 8, "blurRadius": 12, "spreadRadius": -4, "colorToken": "black", - "opacity": 0.06 + "opacity": 0.08 }, { "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "white", - "opacity": 0.1 - } - ] - } - }, - "borderFaded": { - "parts": [ - { - "offsetX": 0, - "offsetY": 1, - "blurRadius": 2, - "spreadRadius": -0.5, - "colorToken": "black", - "opacity": 0.06 - }, - { - "offsetX": 0, - "offsetY": 2, - "blurRadius": 3, - "spreadRadius": -1, - "colorToken": "black", - "opacity": 0.05 - }, - { - "offsetX": 0, - "offsetY": 6, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "black", - "opacity": 0.08 - } - ], - "dark": { - "parts": [ - { - "offsetX": 0, - "offsetY": -1, + "offsetY": -2, "blurRadius": 2, - "spreadRadius": -0.5, - "colorToken": "white", - "opacity": 0.06 - }, - { - "offsetX": 0, - "offsetY": -1, - "blurRadius": 3, "spreadRadius": -1, "colorToken": "white", - "opacity": 0.05 - }, - { - "offsetX": 0, - "offsetY": 6, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "white", - "opacity": 0.08 + "opacity": 0.1 } ] } }, - "borderFadedRaised": { + "raisedIntense": { "parts": [ { "offsetX": 0, - "offsetY": 8, + "offsetY": 12, "blurRadius": 12, "spreadRadius": -4, "colorToken": "black", - "opacity": 0.08 + "opacity": 0.1 }, { "offsetX": 0, "offsetY": 1, - "blurRadius": 2, + "blurRadius": 4, "spreadRadius": 0, "colorToken": "black", "opacity": 0.1 - }, - { - "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "black", - "opacity": 0.08 } ], "dark": { "parts": [ { "offsetX": 0, - "offsetY": 8, + "offsetY": 12, "blurRadius": 12, "spreadRadius": -4, "colorToken": "black", - "opacity": 0.08 + "opacity": 0.1 }, { "offsetX": 0, "offsetY": -2, "blurRadius": 2, - "spreadRadius": -1, + "spreadRadius": 0, "colorToken": "white", "opacity": 0.1 - }, - { - "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "white", - "opacity": 0.08 } ] } }, - "borderFadedOverlay": { + "overlay": { "parts": [ { "offsetX": 0, @@ -1420,14 +1284,6 @@ "spreadRadius": -4, "colorToken": "black", "opacity": 0.06 - }, - { - "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "black", - "opacity": 0.08 } ], "dark": { @@ -1455,45 +1311,11 @@ "spreadRadius": -4, "colorToken": "black", "opacity": 0.06 - }, - { - "offsetX": 0, - "offsetY": 0, - "blurRadius": 0, - "spreadRadius": 1, - "colorToken": "white", - "opacity": 0.08 } ] } }, - "raised": { - "parts": [ - { - "offsetX": 0, - "offsetY": 10, - "blurRadius": 12, - "spreadRadius": -4, - "colorToken": "black", - "opacity": 0.08 - }, - { - "offsetX": 0, - "offsetY": 2, - "blurRadius": 4, - "colorToken": "black", - "opacity": 0.1 - }, - { - "offsetX": 0, - "offsetY": 1, - "blurRadius": 4, - "colorToken": "black", - "opacity": 0.1 - } - ] - }, - "overlay": { + "overlayIntense": { "parts": [ { "offsetX": 0, @@ -1501,7 +1323,7 @@ "blurRadius": 48, "spreadRadius": -8, "colorToken": "black", - "opacity": 0.1 + "opacity": 0.08 }, { "offsetX": 0, @@ -1509,7 +1331,7 @@ "blurRadius": 24, "spreadRadius": -6, "colorToken": "black", - "opacity": 0.1 + "opacity": 0.08 }, { "offsetX": 0, @@ -1517,9 +1339,37 @@ "blurRadius": 12, "spreadRadius": -4, "colorToken": "black", - "opacity": 0.1 + "opacity": 0.08 } - ] + ], + "dark": { + "parts": [ + { + "offsetX": 0, + "offsetY": 32, + "blurRadius": 48, + "spreadRadius": -8, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": 16, + "blurRadius": 24, + "spreadRadius": -6, + "colorToken": "black", + "opacity": 0.08 + }, + { + "offsetX": 0, + "offsetY": 8, + "blurRadius": 12, + "spreadRadius": -4, + "colorToken": "black", + "opacity": 0.08 + } + ] + } } }, "viewport": { diff --git a/packages/theming/src/generation/definitions/figma.ts b/packages/theming/src/generation/definitions/figma.ts index 80d4f539..18a074a3 100644 --- a/packages/theming/src/generation/definitions/figma.ts +++ b/packages/theming/src/generation/definitions/figma.ts @@ -169,7 +169,7 @@ const theme: Partial = { }, shadow: { - border: { + base: { parts: [ { offsetX: 0, @@ -185,15 +185,7 @@ const theme: Partial = { blurRadius: 3, spreadRadius: -1, colorToken: "black", - opacity: 0.05, - }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "black", - opacity: 0.1, + opacity: 0.06, }, ], dark: { @@ -214,258 +206,130 @@ const theme: Partial = { colorToken: "white", opacity: 0.05, }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "white", - opacity: 0.1, - }, ], }, }, - borderRaised: { + baseIntense: { parts: [ - { - offsetX: 0, - offsetY: 8, - blurRadius: 12, - spreadRadius: -4, - colorToken: "black", - opacity: 0.08, - }, { offsetX: 0, offsetY: 1, blurRadius: 2, spreadRadius: 0, colorToken: "black", - opacity: 0.1, + opacity: 0.08, }, { offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, + offsetY: 2, + blurRadius: 3, + spreadRadius: 0, colorToken: "black", - opacity: 0.1, + opacity: 0.08, }, ], dark: { parts: [ { offsetX: 0, - offsetY: 8, - blurRadius: 12, - spreadRadius: -4, - colorToken: "black", - opacity: 0.08, - }, - { - offsetX: 0, - offsetY: -2, + offsetY: -1, blurRadius: 2, - spreadRadius: -1, + spreadRadius: 0, colorToken: "white", - opacity: 0.1, + opacity: 0.08, }, { offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, + offsetY: -1, + blurRadius: 3, + spreadRadius: 0, colorToken: "white", - opacity: 0.1, + opacity: 0.08, }, ], }, }, - borderOverlay: { + raised: { parts: [ - { - offsetX: 0, - offsetY: 32, - blurRadius: 48, - spreadRadius: -8, - colorToken: "black", - opacity: 0.06, - }, - { - offsetX: 0, - offsetY: 16, - blurRadius: 24, - spreadRadius: -6, - colorToken: "black", - opacity: 0.06, - }, { offsetX: 0, offsetY: 8, blurRadius: 12, spreadRadius: -4, colorToken: "black", - opacity: 0.06, + opacity: 0.08, }, { offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, + offsetY: 1, + blurRadius: 2, + spreadRadius: 0, colorToken: "black", opacity: 0.1, }, ], dark: { parts: [ - { - offsetX: 0, - offsetY: 32, - blurRadius: 48, - spreadRadius: -8, - colorToken: "black", - opacity: 0.06, - }, - { - offsetX: 0, - offsetY: 16, - blurRadius: 24, - spreadRadius: -6, - colorToken: "black", - opacity: 0.06, - }, { offsetX: 0, offsetY: 8, blurRadius: 12, spreadRadius: -4, colorToken: "black", - opacity: 0.06, - }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "white", - opacity: 0.1, + opacity: 0.08, }, - ], - }, - }, - borderFaded: { - parts: [ - { - offsetX: 0, - offsetY: 1, - blurRadius: 2, - spreadRadius: -0.5, - colorToken: "black", - opacity: 0.06, - }, - { - offsetX: 0, - offsetY: 2, - blurRadius: 3, - spreadRadius: -1, - colorToken: "black", - opacity: 0.05, - }, - { - offsetX: 0, - offsetY: 6, - blurRadius: 0, - spreadRadius: 1, - colorToken: "black", - opacity: 0.08, - }, - ], - dark: { - parts: [ { offsetX: 0, - offsetY: -1, + offsetY: -2, blurRadius: 2, - spreadRadius: -0.5, - colorToken: "white", - opacity: 0.06, - }, - { - offsetX: 0, - offsetY: -1, - blurRadius: 3, spreadRadius: -1, colorToken: "white", - opacity: 0.05, - }, - { - offsetX: 0, - offsetY: 6, - blurRadius: 0, - spreadRadius: 1, - colorToken: "white", - opacity: 0.08, + opacity: 0.1, }, ], }, }, - borderFadedRaised: { + raisedIntense: { parts: [ { offsetX: 0, - offsetY: 8, + offsetY: 12, blurRadius: 12, spreadRadius: -4, colorToken: "black", - opacity: 0.08, + opacity: 0.1, }, { offsetX: 0, offsetY: 1, - blurRadius: 2, + blurRadius: 4, spreadRadius: 0, colorToken: "black", opacity: 0.1, }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "black", - opacity: 0.08, - }, ], dark: { parts: [ { offsetX: 0, - offsetY: 8, + offsetY: 12, blurRadius: 12, spreadRadius: -4, colorToken: "black", - opacity: 0.08, + opacity: 0.1, }, { offsetX: 0, offsetY: -2, blurRadius: 2, - spreadRadius: -1, + spreadRadius: 0, colorToken: "white", opacity: 0.1, }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "white", - opacity: 0.08, - }, ], }, }, - borderFadedOverlay: { + overlay: { parts: [ { offsetX: 0, @@ -491,14 +355,6 @@ const theme: Partial = { colorToken: "black", opacity: 0.06, }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "black", - opacity: 0.08, - }, ], dark: { parts: [ @@ -526,44 +382,10 @@ const theme: Partial = { colorToken: "black", opacity: 0.06, }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "white", - opacity: 0.08, - }, ], }, }, - raised: { - parts: [ - { - offsetX: 0, - offsetY: 10, - blurRadius: 12, - spreadRadius: -4, - colorToken: "black", - opacity: 0.08, - }, - { - offsetX: 0, - offsetY: 2, - blurRadius: 4, - colorToken: "black", - opacity: 0.1, - }, - { - offsetX: 0, - offsetY: 1, - blurRadius: 4, - colorToken: "black", - opacity: 0.1, - }, - ], - }, - overlay: { + overlayIntense: { parts: [ { offsetX: 0, @@ -571,7 +393,7 @@ const theme: Partial = { blurRadius: 48, spreadRadius: -8, colorToken: "black", - opacity: 0.1, + opacity: 0.08, }, { offsetX: 0, @@ -579,7 +401,7 @@ const theme: Partial = { blurRadius: 24, spreadRadius: -6, colorToken: "black", - opacity: 0.1, + opacity: 0.08, }, { offsetX: 0, @@ -587,9 +409,37 @@ const theme: Partial = { blurRadius: 12, spreadRadius: -4, colorToken: "black", - opacity: 0.1, + opacity: 0.08, }, ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: 32, + blurRadius: 48, + spreadRadius: -8, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: 16, + blurRadius: 24, + spreadRadius: -6, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.08, + }, + ], + }, }, }, diff --git a/packages/theming/src/generation/definitions/slate.ts b/packages/theming/src/generation/definitions/slate.ts index b5badbc0..48b043a6 100644 --- a/packages/theming/src/generation/definitions/slate.ts +++ b/packages/theming/src/generation/definitions/slate.ts @@ -125,7 +125,7 @@ const theme: ThemeDefinition = { }, shadow: { - border: { + base: { parts: [ { offsetX: 0, @@ -141,15 +141,7 @@ const theme: ThemeDefinition = { blurRadius: 3, spreadRadius: -1, colorToken: "black", - opacity: 0.05, - }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "black", - opacity: 0.1, + opacity: 0.06, }, ], dark: { @@ -170,258 +162,130 @@ const theme: ThemeDefinition = { colorToken: "white", opacity: 0.05, }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "white", - opacity: 0.1, - }, ], }, }, - borderRaised: { + baseIntense: { parts: [ - { - offsetX: 0, - offsetY: 8, - blurRadius: 12, - spreadRadius: -4, - colorToken: "black", - opacity: 0.08, - }, { offsetX: 0, offsetY: 1, blurRadius: 2, spreadRadius: 0, colorToken: "black", - opacity: 0.1, + opacity: 0.08, }, { offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, + offsetY: 2, + blurRadius: 3, + spreadRadius: 0, colorToken: "black", - opacity: 0.1, + opacity: 0.08, }, ], dark: { parts: [ { offsetX: 0, - offsetY: 8, - blurRadius: 12, - spreadRadius: -4, - colorToken: "black", - opacity: 0.08, - }, - { - offsetX: 0, - offsetY: -2, + offsetY: -1, blurRadius: 2, - spreadRadius: -1, + spreadRadius: 0, colorToken: "white", - opacity: 0.1, + opacity: 0.08, }, { offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, + offsetY: -1, + blurRadius: 3, + spreadRadius: 0, colorToken: "white", - opacity: 0.1, + opacity: 0.08, }, ], }, }, - borderOverlay: { + raised: { parts: [ - { - offsetX: 0, - offsetY: 32, - blurRadius: 48, - spreadRadius: -8, - colorToken: "black", - opacity: 0.06, - }, - { - offsetX: 0, - offsetY: 16, - blurRadius: 24, - spreadRadius: -6, - colorToken: "black", - opacity: 0.06, - }, { offsetX: 0, offsetY: 8, blurRadius: 12, spreadRadius: -4, colorToken: "black", - opacity: 0.06, + opacity: 0.08, }, { offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, + offsetY: 1, + blurRadius: 2, + spreadRadius: 0, colorToken: "black", opacity: 0.1, }, ], dark: { parts: [ - { - offsetX: 0, - offsetY: 32, - blurRadius: 48, - spreadRadius: -8, - colorToken: "black", - opacity: 0.06, - }, - { - offsetX: 0, - offsetY: 16, - blurRadius: 24, - spreadRadius: -6, - colorToken: "black", - opacity: 0.06, - }, { offsetX: 0, offsetY: 8, blurRadius: 12, spreadRadius: -4, colorToken: "black", - opacity: 0.06, - }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "white", - opacity: 0.1, + opacity: 0.08, }, - ], - }, - }, - borderFaded: { - parts: [ - { - offsetX: 0, - offsetY: 1, - blurRadius: 2, - spreadRadius: -0.5, - colorToken: "black", - opacity: 0.06, - }, - { - offsetX: 0, - offsetY: 2, - blurRadius: 3, - spreadRadius: -1, - colorToken: "black", - opacity: 0.05, - }, - { - offsetX: 0, - offsetY: 6, - blurRadius: 0, - spreadRadius: 1, - colorToken: "black", - opacity: 0.08, - }, - ], - dark: { - parts: [ { offsetX: 0, - offsetY: -1, + offsetY: -2, blurRadius: 2, - spreadRadius: -0.5, - colorToken: "white", - opacity: 0.06, - }, - { - offsetX: 0, - offsetY: -1, - blurRadius: 3, spreadRadius: -1, colorToken: "white", - opacity: 0.05, - }, - { - offsetX: 0, - offsetY: 6, - blurRadius: 0, - spreadRadius: 1, - colorToken: "white", - opacity: 0.08, + opacity: 0.1, }, ], }, }, - borderFadedRaised: { + raisedIntense: { parts: [ { offsetX: 0, - offsetY: 8, + offsetY: 12, blurRadius: 12, spreadRadius: -4, colorToken: "black", - opacity: 0.08, + opacity: 0.1, }, { offsetX: 0, offsetY: 1, - blurRadius: 2, + blurRadius: 4, spreadRadius: 0, colorToken: "black", opacity: 0.1, }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "black", - opacity: 0.08, - }, ], dark: { parts: [ { offsetX: 0, - offsetY: 8, + offsetY: 12, blurRadius: 12, spreadRadius: -4, colorToken: "black", - opacity: 0.08, + opacity: 0.1, }, { offsetX: 0, offsetY: -2, blurRadius: 2, - spreadRadius: -1, + spreadRadius: 0, colorToken: "white", opacity: 0.1, }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "white", - opacity: 0.08, - }, ], }, }, - borderFadedOverlay: { + overlay: { parts: [ { offsetX: 0, @@ -447,14 +311,6 @@ const theme: ThemeDefinition = { colorToken: "black", opacity: 0.06, }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "black", - opacity: 0.08, - }, ], dark: { parts: [ @@ -482,44 +338,10 @@ const theme: ThemeDefinition = { colorToken: "black", opacity: 0.06, }, - { - offsetX: 0, - offsetY: 0, - blurRadius: 0, - spreadRadius: 1, - colorToken: "white", - opacity: 0.08, - }, ], }, }, - raised: { - parts: [ - { - offsetX: 0, - offsetY: 10, - blurRadius: 12, - spreadRadius: -4, - colorToken: "black", - opacity: 0.08, - }, - { - offsetX: 0, - offsetY: 2, - blurRadius: 4, - colorToken: "black", - opacity: 0.1, - }, - { - offsetX: 0, - offsetY: 1, - blurRadius: 4, - colorToken: "black", - opacity: 0.1, - }, - ], - }, - overlay: { + overlayIntense: { parts: [ { offsetX: 0, @@ -527,7 +349,7 @@ const theme: ThemeDefinition = { blurRadius: 48, spreadRadius: -8, colorToken: "black", - opacity: 0.1, + opacity: 0.08, }, { offsetX: 0, @@ -535,7 +357,7 @@ const theme: ThemeDefinition = { blurRadius: 24, spreadRadius: -6, colorToken: "black", - opacity: 0.1, + opacity: 0.08, }, { offsetX: 0, @@ -543,9 +365,37 @@ const theme: ThemeDefinition = { blurRadius: 12, spreadRadius: -4, colorToken: "black", - opacity: 0.1, + opacity: 0.08, }, ], + dark: { + parts: [ + { + offsetX: 0, + offsetY: 32, + blurRadius: 48, + spreadRadius: -8, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: 16, + blurRadius: 24, + spreadRadius: -6, + colorToken: "black", + opacity: 0.08, + }, + { + offsetX: 0, + offsetY: 8, + blurRadius: 12, + spreadRadius: -4, + colorToken: "black", + opacity: 0.08, + }, + ], + }, }, }, diff --git a/packages/theming/src/generation/tokens/shadow/shadow.transforms.ts b/packages/theming/src/generation/tokens/shadow/shadow.transforms.ts index 133b4094..53d22e35 100644 --- a/packages/theming/src/generation/tokens/shadow/shadow.transforms.ts +++ b/packages/theming/src/generation/tokens/shadow/shadow.transforms.ts @@ -13,7 +13,7 @@ const transformShadowParts = ( const spread = ` ${value.spreadRadius || 0}px`; const colorRef = theme.color[value.colorToken]; const rgb = oklchToRgb(hexToOklch(colorRef?.hex || "#000000")); - const rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`; + const rgbString = `${rgb.r * 255}, ${rgb.g * 255}, ${rgb.b * 255}`; const color = `rgba(${rgbString}, ${value.opacity || 1})`; return `${value.offsetX}px ${value.offsetY}px${blur}${spread} ${color}`; diff --git a/packages/theming/src/generation/tokens/shadow/shadow.types.ts b/packages/theming/src/generation/tokens/shadow/shadow.types.ts index df2bb6c0..1911cf59 100644 --- a/packages/theming/src/generation/tokens/shadow/shadow.types.ts +++ b/packages/theming/src/generation/tokens/shadow/shadow.types.ts @@ -1,14 +1,12 @@ import type * as TColor from "../color/color.types"; export type Name = + | "base" | "raised" | "overlay" - | "border" - | "borderRaised" - | "borderOverlay" - | "borderFaded" - | "borderFadedRaised" - | "borderFadedOverlay"; + | "baseIntense" + | "raisedIntense" + | "overlayIntense"; type Part = { offsetX: number; From 97905828fe45e363597d183f9d8b85e26beee177 Mon Sep 17 00:00:00 2001 From: Dmitry Belyaev Date: Sat, 14 Mar 2026 16:48:35 +0100 Subject: [PATCH 11/75] v4: Avatar, Card --- .changeset/beige-sheep-chew.md | 5 +++++ .changeset/young-meals-clap.md | 5 +++++ .../reshaped/src/components/Avatar/Avatar.tsx | 1 + .../src/components/Card/Card.module.css | 3 --- .../reshaped/src/components/Card/Card.tsx | 22 ++++++++++++------- .../src/components/Card/Card.types.ts | 12 +++++----- .../components/Card/tests/Card.stories.tsx | 11 ++++++++-- 7 files changed, 39 insertions(+), 20 deletions(-) create mode 100644 .changeset/beige-sheep-chew.md create mode 100644 .changeset/young-meals-clap.md diff --git a/.changeset/beige-sheep-chew.md b/.changeset/beige-sheep-chew.md new file mode 100644 index 00000000..c1f890af --- /dev/null +++ b/.changeset/beige-sheep-chew.md @@ -0,0 +1,5 @@ +--- +"reshaped": minor +--- + +Card: Added gap, direction, align, justify props diff --git a/.changeset/young-meals-clap.md b/.changeset/young-meals-clap.md new file mode 100644 index 00000000..9bf7d520 --- /dev/null +++ b/.changeset/young-meals-clap.md @@ -0,0 +1,5 @@ +--- +"reshaped": patch +--- + +Avatar: Added outline to faded variant diff --git a/packages/reshaped/src/components/Avatar/Avatar.tsx b/packages/reshaped/src/components/Avatar/Avatar.tsx index e8961c96..5d881f67 100644 --- a/packages/reshaped/src/components/Avatar/Avatar.tsx +++ b/packages/reshaped/src/components/Avatar/Avatar.tsx @@ -64,6 +64,7 @@ const Avatar: React.FC = (props) => { borderRadius={radius} attributes={{ ...attributes, style: { ...mixinStyles?.variables } }} backgroundColor={variant === "faded" ? `${color}-${variant}` : color} + borderColor={variant === "faded" ? `${color}-faded` : undefined} className={rootClassNames} > {icon ? ( diff --git a/packages/reshaped/src/components/Card/Card.module.css b/packages/reshaped/src/components/Card/Card.module.css index d3f2279a..4f44a3a9 100644 --- a/packages/reshaped/src/components/Card/Card.module.css +++ b/packages/reshaped/src/components/Card/Card.module.css @@ -8,9 +8,6 @@ transition-property: box-shadow; } -.content { - overflow: hidden; -} .--selected { box-shadow: 0 0 0 var(--rs-outline-width) var(--rs-color-border-primary) inset; diff --git a/packages/reshaped/src/components/Card/Card.tsx b/packages/reshaped/src/components/Card/Card.tsx index abd91eaf..5607b0a6 100644 --- a/packages/reshaped/src/components/Card/Card.tsx +++ b/packages/reshaped/src/components/Card/Card.tsx @@ -2,6 +2,7 @@ import { classNames } from "@reshaped/headless"; import React, { forwardRef } from "react"; import Actionable from "@/components/Actionable"; +import View from "@/components/View"; import { resolveMixin } from "@/styles/mixin"; import s from "./Card.module.css"; @@ -22,6 +23,10 @@ const Card: Component = forwardRef((props, ref) => { elevation = "base", bleed, height, + direction, + gap, + align, + justify, onClick, href, children, @@ -39,10 +44,6 @@ const Card: Component = forwardRef((props, ref) => { border: true, shadow: elevation, }); - const contentMixinStyles = resolveMixin({ - height, - padding, - }); const rootClassNames = classNames( s.root, @@ -59,12 +60,17 @@ const Card: Component = forwardRef((props, ref) => { }; const contentNode = ( -
{children} -
+ ); if (isActionable) { diff --git a/packages/reshaped/src/components/Card/Card.types.ts b/packages/reshaped/src/components/Card/Card.types.ts index 35172fee..4c483f8c 100644 --- a/packages/reshaped/src/components/Card/Card.types.ts +++ b/packages/reshaped/src/components/Card/Card.types.ts @@ -1,15 +1,13 @@ import type { ActionableProps } from "@/components/Actionable"; import type { ViewProps } from "@/components/View"; import type * as TStyles from "@/styles/types"; -import type * as G from "@/types/global"; import type { Attributes, ClassName } from "@reshaped/headless"; import type React from "react"; -export type Props = { - /** Component padding, base unit multiplier */ - padding?: G.Responsive; - /** Remove side borders and apply negative margins, base unit multiplier */ - bleed?: G.Responsive; +export type Props = Pick< + ViewProps, + "padding" | "bleed" | "height" | "direction" | "gap" | "align" | "justify" +> & { /** Highlight the component when component is used for an active state */ selected?: boolean; /** Apply elevated styles to the component */ @@ -31,4 +29,4 @@ export type Props; +}; diff --git a/packages/reshaped/src/components/Card/tests/Card.stories.tsx b/packages/reshaped/src/components/Card/tests/Card.stories.tsx index a591b2b0..67b9c083 100644 --- a/packages/reshaped/src/components/Card/tests/Card.stories.tsx +++ b/packages/reshaped/src/components/Card/tests/Card.stories.tsx @@ -100,13 +100,20 @@ export const bleed = { ), }; -export const height = { - name: "height", +export const layout = { + name: "height, direction, gap, align, justify", render: () => ( + + + + + + + ), }; From 0db8f4111196229625b21b0fb96fa0a24288e7c3 Mon Sep 17 00:00:00 2001 From: Dmitry Belyaev Date: Sat, 14 Mar 2026 22:29:12 +0100 Subject: [PATCH 12/75] v4: Skeleton, MenuItem --- .changeset/proud-baboons-camp.md | 5 ++ .changeset/slick-symbols-love.md | 5 ++ .changeset/warm-tigers-wait.md | 5 ++ .../Actionable/Actionable.module.css | 2 +- .../reshaped/src/components/Card/Card.tsx | 2 +- .../components/Checkbox/Checkbox.module.css | 4 +- .../components/MenuItem/MenuItem.module.css | 51 +++++++-------- .../src/components/MenuItem/MenuItem.tsx | 2 - .../MenuItem/tests/MenuItem.stories.tsx | 62 +++++++++---------- .../src/components/Radio/Radio.module.css | 10 +-- .../reshaped/src/components/Radio/Radio.tsx | 4 +- .../components/Skeleton/Skeleton.module.css | 2 +- .../src/components/Skeleton/Skeleton.tsx | 2 +- packages/reshaped/src/themes/figma/theme.css | 2 +- packages/reshaped/src/themes/figma/theme.json | 2 +- packages/reshaped/src/themes/slate/theme.css | 14 ++--- packages/reshaped/src/themes/slate/theme.json | 26 ++++---- .../src/generation/definitions/slate.ts | 2 +- .../tokens/color/utilities/generateColors.ts | 4 +- 19 files changed, 105 insertions(+), 101 deletions(-) create mode 100644 .changeset/proud-baboons-camp.md create mode 100644 .changeset/slick-symbols-love.md create mode 100644 .changeset/warm-tigers-wait.md diff --git a/.changeset/proud-baboons-camp.md b/.changeset/proud-baboons-camp.md new file mode 100644 index 00000000..dadcb90d --- /dev/null +++ b/.changeset/proud-baboons-camp.md @@ -0,0 +1,5 @@ +--- +"reshaped": major +--- + +MenuItem: Removed roundedCorners property diff --git a/.changeset/slick-symbols-love.md b/.changeset/slick-symbols-love.md new file mode 100644 index 00000000..0af31613 --- /dev/null +++ b/.changeset/slick-symbols-love.md @@ -0,0 +1,5 @@ +--- +"reshaped": patch +--- + +Pagination: Updated button variants used for selected state diff --git a/.changeset/warm-tigers-wait.md b/.changeset/warm-tigers-wait.md new file mode 100644 index 00000000..03f31c8d --- /dev/null +++ b/.changeset/warm-tigers-wait.md @@ -0,0 +1,5 @@ +--- +"reshaped": patch +--- + +Skeleton: Updated background color diff --git a/packages/reshaped/src/components/Actionable/Actionable.module.css b/packages/reshaped/src/components/Actionable/Actionable.module.css index 8d6f94fb..f4d8ba51 100644 --- a/packages/reshaped/src/components/Actionable/Actionable.module.css +++ b/packages/reshaped/src/components/Actionable/Actionable.module.css @@ -79,7 +79,7 @@ button.root, .root.--disabled, .root[disabled] { - cursor: not-allowed; + cursor: default; &:active { transform: none; diff --git a/packages/reshaped/src/components/Card/Card.tsx b/packages/reshaped/src/components/Card/Card.tsx index 5607b0a6..178f0d5d 100644 --- a/packages/reshaped/src/components/Card/Card.tsx +++ b/packages/reshaped/src/components/Card/Card.tsx @@ -38,7 +38,7 @@ const Card: Component = forwardRef((props, ref) => { } = props; const isActionable = !!href || !!onClick; const mixinStyles = resolveMixin({ - radius: "medium", + radius: "large", bleed, borderColor: "neutral-faded", border: true, diff --git a/packages/reshaped/src/components/Checkbox/Checkbox.module.css b/packages/reshaped/src/components/Checkbox/Checkbox.module.css index 68222ca2..818eb0e2 100644 --- a/packages/reshaped/src/components/Checkbox/Checkbox.module.css +++ b/packages/reshaped/src/components/Checkbox/Checkbox.module.css @@ -84,7 +84,7 @@ since it reset the border width/color without using @layer [data-rs-keyboard] .input:focus + .decorator { border-color: var(--rs-color-border-primary); - border-width: 1.5px; + border-width: var(--rs-outline-width); } /* } */ @@ -92,7 +92,7 @@ since it reset the border width/color without using @layer /* @layer rs.checkbox.error { */ .root.--error .decorator { border-color: var(--rs-color-border-critical); - border-width: 1.5px; + border-width: var(--rs-outline-width); } /* } */ diff --git a/packages/reshaped/src/components/MenuItem/MenuItem.module.css b/packages/reshaped/src/components/MenuItem/MenuItem.module.css index 6ada7c3d..4f405e73 100644 --- a/packages/reshaped/src/components/MenuItem/MenuItem.module.css +++ b/packages/reshaped/src/components/MenuItem/MenuItem.module.css @@ -2,12 +2,13 @@ /* Higher priority as a workaround for Tailwind button styles reset */ button.root { display: block; - transition: background-color var(--rs-duration-fast) var(--rs-easing-standard); + transition: background-color var(--rs-duration-rapid) var(--rs-easing-standard); padding: var(--rs-p-v) var(--rs-p-h); font-family: var(--rs-font-family-body); font-weight: var(--rs-font-weight-medium); color: var(--rs-menu-item-color); background-color: var(--rs-menu-item-bg-color); + border-radius: var(--rs-radius-medium); &[role="option"] { transition: none; @@ -25,39 +26,29 @@ button.root { .icon, .content { - transition: var(--rs-duration-fast) var(--rs-easing-standard); + transition: var(--rs-duration-rapid) var(--rs-easing-standard); transition-property: color; } -@responsive .--rounded-corners { - @value true { - border-radius: var(--rs-menu-item-radius); - } - - @value false { - border-radius: 0; - } -} - @responsive .--size { @value small { - --rs-p-v: var(--rs-unit-x1); + --rs-p-v: var(--rs-unit-x1-5); --rs-p-h: var(--rs-unit-x2); --rs-menu-item-radius: var(--rs-radius-small); - font-size: var(--rs-font-size-body-3); - line-height: var(--rs-line-height-body-3); - letter-spacing: var(--rs-letter-spacing-body-3); + font-size: var(--rs-font-size-body-2); + line-height: var(--rs-line-height-body-2); + letter-spacing: var(--rs-letter-spacing-body-2); } @value medium { --rs-p-v: var(--rs-unit-x2); --rs-p-h: var(--rs-unit-x3); - --rs-menu-item-radius: var(--rs-radius-small); + --rs-menu-item-radius: var(--rs-radius-medium); - font-size: var(--rs-font-size-body-3); - line-height: var(--rs-line-height-body-3); - letter-spacing: var(--rs-letter-spacing-body-3); + font-size: var(--rs-font-size-body-2); + line-height: var(--rs-line-height-body-2); + letter-spacing: var(--rs-letter-spacing-body-2); } @value large { @@ -65,9 +56,9 @@ button.root { --rs-p-h: var(--rs-unit-x4); --rs-menu-item-radius: var(--rs-radius-medium); - font-size: var(--rs-font-size-body-2); - line-height: var(--rs-line-height-body-2); - letter-spacing: var(--rs-letter-spacing-body-2); + font-size: var(--rs-font-size-body-1); + line-height: var(--rs-line-height-body-1); + letter-spacing: var(--rs-letter-spacing-body-1); } } @@ -77,12 +68,12 @@ button.root { &.--selected, &[data-rs-focus], &.--highlighted { - --rs-menu-item-bg-color: rgba(var(--rs-color-rgb-background-neutral), 32%); + --rs-menu-item-bg-color: var(--rs-color-background-neutral-highlighted-faded); } @media (hover: hover) and (pointer: fine) { &:hover { - --rs-menu-item-bg-color: rgba(var(--rs-color-rgb-background-neutral), 32%); + --rs-menu-item-bg-color: var(--rs-color-background-neutral-highlighted-faded); } } } @@ -93,12 +84,12 @@ button.root { &.--selected, &[data-rs-focus], &.--highlighted { - --rs-menu-item-bg-color: rgba(var(--rs-color-rgb-background-critical), 12%); + --rs-menu-item-bg-color: var(--rs-color-background-critical-highlighted-faded); } @media (hover: hover) and (pointer: fine) { &:hover { - --rs-menu-item-bg-color: rgba(var(--rs-color-rgb-background-critical), 12%); + --rs-menu-item-bg-color: var(--rs-color-background-critical-highlighted-faded); } } } @@ -108,18 +99,18 @@ button.root { &[data-rs-focus], &.--highlighted { - --rs-menu-item-bg-color: rgba(var(--rs-color-rgb-background-neutral), 32%); + --rs-menu-item-bg-color: var(--rs-color-background-neutral-highlighted-faded); } @media (hover: hover) and (pointer: fine) { &:hover { - --rs-menu-item-bg-color: rgba(var(--rs-color-rgb-background-neutral), 32%); + --rs-menu-item-bg-color: var(--rs-color-background-neutral-highlighted-faded); } } &.--selected, &.--selected:hover { - --rs-menu-item-bg-color: rgba(var(--rs-color-rgb-background-primary), 12%); + --rs-menu-item-bg-color: var(--rs-color-background-primary-highlighted-faded); --rs-menu-item-color: var(--rs-color-foreground-primary); --rs-menu-item-icon-color: var(--rs-color-foreground-primary); } diff --git a/packages/reshaped/src/components/MenuItem/MenuItem.tsx b/packages/reshaped/src/components/MenuItem/MenuItem.tsx index 2bb691c4..621014ed 100644 --- a/packages/reshaped/src/components/MenuItem/MenuItem.tsx +++ b/packages/reshaped/src/components/MenuItem/MenuItem.tsx @@ -23,7 +23,6 @@ const MenuItem = forwardRef((props, ref) => { onClick, href, size = "medium", - roundedCorners, stopPropagation, as, render, @@ -34,7 +33,6 @@ const MenuItem = forwardRef((props, ref) => { s.root, className, responsiveClassNames(s, "--size", size), - responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"], diff --git a/packages/reshaped/src/components/MenuItem/tests/MenuItem.stories.tsx b/packages/reshaped/src/components/MenuItem/tests/MenuItem.stories.tsx index 862f3f34..ae39d1fa 100644 --- a/packages/reshaped/src/components/MenuItem/tests/MenuItem.stories.tsx +++ b/packages/reshaped/src/components/MenuItem/tests/MenuItem.stories.tsx @@ -1,7 +1,7 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; -import Hotkey from "@/components/Hotkey"; +import Badge from "@/components/Badge"; import MenuItem from "@/components/MenuItem"; import Text from "@/components/Text"; import View from "@/components/View"; @@ -23,17 +23,27 @@ export const size = { render: () => ( - {}} endSlot={⌘K}> + {}} + endSlot={12} + > Menu item - {}}> + {}} endSlot={12}> Menu item - {}}> + {}} + endSlot={12} + > Menu item @@ -51,17 +61,17 @@ export const color = { render: () => ( - + {}}> Menu item - + {}}> Menu item - + {}}> Menu item @@ -74,36 +84,17 @@ export const selected = { render: () => ( - + {}}> Menu item - + {}}> Menu item - - Menu item - - - - ), -}; - -export const roundedCorners = { - name: "roundedCorners", - render: () => ( - - - - Menu item - - - - - + {}}> Menu item @@ -116,7 +107,12 @@ export const slots = { render: () => ( - } endSlot={} selected> + } + endSlot={} + selected + onClick={() => {}} + > Menu item @@ -143,7 +139,9 @@ export const aligner = { Heading - Menu item + {}}> + Menu item + @@ -152,7 +150,7 @@ export const aligner = { Heading - + {}}> Menu item diff --git a/packages/reshaped/src/components/Radio/Radio.module.css b/packages/reshaped/src/components/Radio/Radio.module.css index 2838a4cc..ba6ec719 100644 --- a/packages/reshaped/src/components/Radio/Radio.module.css +++ b/packages/reshaped/src/components/Radio/Radio.module.css @@ -57,22 +57,23 @@ since it reset the border width/color without using @layer @responsive .--size { @value small { --rs-radio-line-height: var(--rs-line-height-caption-1); - --rs-radio-gap: var(--rs-unit-x1); + --rs-radio-gap: var(--rs-unit-x1-5); } @value medium { - --rs-radio-line-height: var(--rs-line-height-body-3); + --rs-radio-line-height: var(--rs-line-height-body-2); --rs-radio-gap: var(--rs-unit-x2); } @value large { - --rs-radio-line-height: var(--rs-line-height-body-2); + --rs-radio-line-height: var(--rs-line-height-body-1); --rs-radio-gap: var(--rs-unit-x2); } } [data-rs-keyboard] .input:focus + .decorator { - box-shadow: var(--rs-shadow-focus); + border-color: var(--rs-color-border-primary); + border-width: var(--rs-outline-width); } /* } */ @@ -80,6 +81,7 @@ since it reset the border width/color without using @layer /* @layer rs.radio.error { */ .root.--error .decorator { border-color: var(--rs-color-border-critical); + border-width: var(--rs-outline-width); } /* } */ diff --git a/packages/reshaped/src/components/Radio/Radio.tsx b/packages/reshaped/src/components/Radio/Radio.tsx index a2a533d6..ffb60485 100644 --- a/packages/reshaped/src/components/Radio/Radio.tsx +++ b/packages/reshaped/src/components/Radio/Radio.tsx @@ -63,9 +63,9 @@ const Radio: React.FC = (props) => { { - if (size === "large") return "body-2"; + if (size === "large") return "body-1"; if (size === "small") return "caption-1"; - return "body-3"; + return "body-2"; })} > {children} diff --git a/packages/reshaped/src/components/Skeleton/Skeleton.module.css b/packages/reshaped/src/components/Skeleton/Skeleton.module.css index ee3e221c..a22e3a86 100644 --- a/packages/reshaped/src/components/Skeleton/Skeleton.module.css +++ b/packages/reshaped/src/components/Skeleton/Skeleton.module.css @@ -1,5 +1,5 @@ .root { - animation: rs-skeleton-pulse 2.4s ease-in-out infinite; + animation: rs-skeleton-pulse 2.5s ease-in-out infinite; min-height: var(--rs-unit-x5); } diff --git a/packages/reshaped/src/components/Skeleton/Skeleton.tsx b/packages/reshaped/src/components/Skeleton/Skeleton.tsx index 2e1d3632..7506994e 100644 --- a/packages/reshaped/src/components/Skeleton/Skeleton.tsx +++ b/packages/reshaped/src/components/Skeleton/Skeleton.tsx @@ -11,7 +11,7 @@ const Skeleton: React.FC = (props) => { return ( Date: Sun, 15 Mar 2026 22:23:49 +0100 Subject: [PATCH 13/75] v4: Scrim --- .changeset/shaky-bottles-live.md | 5 + .../src/components/Scrim/Scrim.module.css | 74 ------------ .../reshaped/src/components/Scrim/Scrim.tsx | 53 --------- .../src/components/Scrim/Scrim.types.ts | 19 --- .../reshaped/src/components/Scrim/index.ts | 2 - .../components/Scrim/tests/Scrim.stories.tsx | 109 ------------------ 6 files changed, 5 insertions(+), 257 deletions(-) create mode 100644 .changeset/shaky-bottles-live.md delete mode 100644 packages/reshaped/src/components/Scrim/Scrim.module.css delete mode 100644 packages/reshaped/src/components/Scrim/Scrim.tsx delete mode 100644 packages/reshaped/src/components/Scrim/Scrim.types.ts delete mode 100644 packages/reshaped/src/components/Scrim/index.ts delete mode 100644 packages/reshaped/src/components/Scrim/tests/Scrim.stories.tsx diff --git a/.changeset/shaky-bottles-live.md b/.changeset/shaky-bottles-live.md new file mode 100644 index 00000000..af153432 --- /dev/null +++ b/.changeset/shaky-bottles-live.md @@ -0,0 +1,5 @@ +--- +"reshaped": major +--- + +Scrim: Deleted component diff --git a/packages/reshaped/src/components/Scrim/Scrim.module.css b/packages/reshaped/src/components/Scrim/Scrim.module.css deleted file mode 100644 index c3d53732..00000000 --- a/packages/reshaped/src/components/Scrim/Scrim.module.css +++ /dev/null @@ -1,74 +0,0 @@ -.root { - --rs-scrim-gradient-padding: calc(var(--rs-unit-x1) * 16); - --rs-scrim-gradient: - rgba(var(--rs-color-rgb-black), 0%), rgba(var(--rs-color-rgb-black), 0.52%), - rgba(var(--rs-color-rgb-black), 2.13%), rgba(var(--rs-color-rgb-black), 4.9%), - rgba(var(--rs-color-rgb-black), 8.84%), rgba(var(--rs-color-rgb-black), 13.91%), - rgba(var(--rs-color-rgb-black), 19.91%), rgba(var(--rs-color-rgb-black), 26.56%), - rgba(var(--rs-color-rgb-black), 33.44%), rgba(var(--rs-color-rgb-black), 40.09%), - rgba(var(--rs-color-rgb-black), 46.09%), rgba(var(--rs-color-rgb-black), 51.16%), - rgba(var(--rs-color-rgb-black), 55.1%), rgba(var(--rs-color-rgb-black), 57.87%), - rgba(var(--rs-color-rgb-black), 59.48%), rgba(var(--rs-color-rgb-black), 60%); - - pointer-events: none; -} - -.scrim { - color: var(--rs-color-white); - position: absolute; - inset: 0; - - /* - Turn on GPU acceleration for handling events on underlying elements properly - Example: Media slider scrolling with css snapping - */ - transform: translateZ(0); -} - -.--position-cover .scrim { - display: flex; - align-items: center; - justify-content: center; -} - -.--position-cover .scrim::after { - content: ""; - position: absolute; - inset: 0; - background-color: var(--rs-color-black); - opacity: 0.5; -} - -.--position-top .scrim { - inset-block-end: auto; - background: linear-gradient(to top, var(--rs-scrim-gradient)); - padding-block-end: var(--rs-scrim-gradient-padding); -} - -.--position-bottom .scrim { - inset-block-start: auto; - background: linear-gradient(to bottom, var(--rs-scrim-gradient)); - padding-block-start: var(--rs-scrim-gradient-padding); -} - -.--position-start .scrim { - width: auto; - inset-inline-end: auto; - background: linear-gradient(to left, var(--rs-scrim-gradient)); - padding-inline-end: var(--rs-scrim-gradient-padding); - - [dir="rtl"] & { - background: linear-gradient(to right, var(--rs-scrim-gradient)); - } -} - -.--position-end .scrim { - width: auto; - inset-inline-start: auto; - background: linear-gradient(to right, var(--rs-scrim-gradient)); - padding-inline-start: var(--rs-scrim-gradient-padding); - - [dir="rtl"] & { - background: linear-gradient(to left, var(--rs-scrim-gradient)); - } -} diff --git a/packages/reshaped/src/components/Scrim/Scrim.tsx b/packages/reshaped/src/components/Scrim/Scrim.tsx deleted file mode 100644 index 61f58f10..00000000 --- a/packages/reshaped/src/components/Scrim/Scrim.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { classNames } from "@reshaped/headless"; - -import View from "@/components/View"; - -import s from "./Scrim.module.css"; - -import type * as T from "./Scrim.types"; - -const Scrim: React.FC = (props) => { - const { - children, - backgroundSlot, - position = "cover", - paddingInline, - paddingBlock, - padding, - borderRadius, - attributes, - className, - scrimClassName, - } = props; - const rootClassNames = classNames(s.root, position && s[`--position-${position}`], className); - const scrimClassNames = classNames(s.scrim, scrimClassName); - - return ( - - {backgroundSlot} -
- - {children} - -
- - ); -}; - -Scrim.displayName = "Scrim"; - -export default Scrim; diff --git a/packages/reshaped/src/components/Scrim/Scrim.types.ts b/packages/reshaped/src/components/Scrim/Scrim.types.ts deleted file mode 100644 index 30f72bb3..00000000 --- a/packages/reshaped/src/components/Scrim/Scrim.types.ts +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; - -import type { ViewProps } from "@/components/View"; -import type { Attributes, ClassName } from "@reshaped/headless"; - -export type Props = { - /** Node for inserting content */ - children?: React.ReactNode; - /** Node for inserting background content behind the scrim */ - backgroundSlot?: React.ReactNode; - /** Component content position */ - position?: "full" | "top" | "bottom" | "start" | "end"; - /** Additional classname for the scrim element */ - scrimClassName?: ClassName; - /** Additional classname for the root element */ - className?: ClassName; - /** Additional attributes for the root element */ - attributes?: Attributes<"div">; -} & Pick; diff --git a/packages/reshaped/src/components/Scrim/index.ts b/packages/reshaped/src/components/Scrim/index.ts deleted file mode 100644 index 92d3fcb0..00000000 --- a/packages/reshaped/src/components/Scrim/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./Scrim"; -export type { Props as ScrimProps } from "./Scrim.types"; diff --git a/packages/reshaped/src/components/Scrim/tests/Scrim.stories.tsx b/packages/reshaped/src/components/Scrim/tests/Scrim.stories.tsx deleted file mode 100644 index f2496733..00000000 --- a/packages/reshaped/src/components/Scrim/tests/Scrim.stories.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { StoryObj } from "@storybook/react-vite"; -import { expect } from "storybook/test"; - -import Badge from "@/components/Badge"; -import Scrim from "@/components/Scrim"; -import View from "@/components/View"; -import { Example } from "@/utilities/storybook"; - -export default { - title: "Components/Scrim", - component: Scrim, - parameters: { - iframe: { - url: "https://reshaped.so/docs/components/scrim", - }, - }, -}; - -const Placeholder = () => ; - -export const position = { - name: "position", - render: () => ( - - - }>Scrim - - - - }> - Scrim - - - - - }> - Scrim - - - - - }> - Scrim - - - - - }> - Scrim - - - - ), -}; - -export const padding = { - name: "padding", - render: () => ( - - - } borderRadius="medium"> - Scrim - - - - - } - borderRadius="medium" - > - Scrim - - - - ), -}; - -export const className: StoryObj = { - name: "className, attributes", - render: () => ( -
- - Content - -
- ), - play: async ({ canvas }) => { - const root = canvas.getByTestId("root").firstChild; - - expect(root).toHaveClass("test-classname"); - expect(root).toHaveAttribute("id", "test-id"); - }, -}; - -export const composition = { - name: "test: composition", - render: () => ( - - -
- Text -
- - - ), -}; From f75412ce4322370a57a40f0e9e7c66332925b367 Mon Sep 17 00:00:00 2001 From: Dmitry Belyaev Date: Mon, 16 Mar 2026 01:10:54 +0100 Subject: [PATCH 14/75] v4: timeline, stepper --- .changeset/dirty-rats-spend.md | 5 + .changeset/open-peas-work.md | 5 + .../src/components/Stepper/Stepper.module.css | 6 - .../src/components/Stepper/Stepper.tsx | 139 -------------- .../src/components/Stepper/Stepper.types.ts | 45 ----- .../reshaped/src/components/Stepper/index.ts | 10 - .../Stepper/tests/Stepper.stories.tsx | 171 ------------------ .../components/Timeline/Timeline.module.css | 62 ------- .../src/components/Timeline/Timeline.tsx | 50 ----- .../src/components/Timeline/Timeline.types.ts | 22 --- .../reshaped/src/components/Timeline/index.ts | 10 - .../Timeline/tests/Timeline.stories.tsx | 100 ---------- 12 files changed, 10 insertions(+), 615 deletions(-) create mode 100644 .changeset/dirty-rats-spend.md create mode 100644 .changeset/open-peas-work.md delete mode 100644 packages/reshaped/src/components/Stepper/Stepper.module.css delete mode 100644 packages/reshaped/src/components/Stepper/Stepper.tsx delete mode 100644 packages/reshaped/src/components/Stepper/Stepper.types.ts delete mode 100644 packages/reshaped/src/components/Stepper/index.ts delete mode 100644 packages/reshaped/src/components/Stepper/tests/Stepper.stories.tsx delete mode 100644 packages/reshaped/src/components/Timeline/Timeline.module.css delete mode 100644 packages/reshaped/src/components/Timeline/Timeline.tsx delete mode 100644 packages/reshaped/src/components/Timeline/Timeline.types.ts delete mode 100644 packages/reshaped/src/components/Timeline/index.ts delete mode 100644 packages/reshaped/src/components/Timeline/tests/Timeline.stories.tsx diff --git a/.changeset/dirty-rats-spend.md b/.changeset/dirty-rats-spend.md new file mode 100644 index 00000000..f747e74f --- /dev/null +++ b/.changeset/dirty-rats-spend.md @@ -0,0 +1,5 @@ +--- +"reshaped": major +--- + +Stepper: Deleted component diff --git a/.changeset/open-peas-work.md b/.changeset/open-peas-work.md new file mode 100644 index 00000000..d83a18d4 --- /dev/null +++ b/.changeset/open-peas-work.md @@ -0,0 +1,5 @@ +--- +"reshaped": major +--- + +Timeline: Deleted component diff --git a/packages/reshaped/src/components/Stepper/Stepper.module.css b/packages/reshaped/src/components/Stepper/Stepper.module.css deleted file mode 100644 index f20f5f33..00000000 --- a/packages/reshaped/src/components/Stepper/Stepper.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.verticalDivider { - position: absolute; - - /* Centering 1px divider visually */ - inset-inline-start: calc(var(--rs-unit-x4) - 0.5px); -} diff --git a/packages/reshaped/src/components/Stepper/Stepper.tsx b/packages/reshaped/src/components/Stepper/Stepper.tsx deleted file mode 100644 index a2276353..00000000 --- a/packages/reshaped/src/components/Stepper/Stepper.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import React from "react"; - -import Expandable from "@/components/_private/Expandable"; -import Divider from "@/components/Divider"; -import Hidden from "@/components/Hidden"; -import Icon from "@/components/Icon"; -import Text from "@/components/Text"; -import View from "@/components/View"; -import IconCheckmark from "@/icons/Checkmark"; -import { responsivePropDependency } from "@/utilities/props"; - -import s from "./Stepper.module.css"; - -import type * as T from "./Stepper.types"; - -const StepperItemPrivate: React.FC = (props) => { - const { - title, - subtitle, - children, - direction, - className, - attributes, - labelDisplay, - step, - completed, - active, - last, - } = props; - const labelHidden = - labelDisplay && responsivePropDependency(labelDisplay, (value) => value === "hidden"); - - const labelNode = ( - - - - {title} - - - {subtitle} - - - - ); - - return ( - - - - - - {completed ? : step} - - - {direction === "column" && !last && } - - {labelDisplay ? {labelNode} : labelNode} - - {direction === "column" && children && ( - - - {children} - - - )} - - ); -}; - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -export const StepperItem = (_: T.ItemProps) => null; - -const Stepper: React.FC = (props) => { - const { - children, - direction = "row", - activeId, - labelDisplay, - gap = 3, - className, - attributes, - } = props; - const vertical = direction === "column"; - const length = React.Children.count(children); - - return ( - - {React.Children.map(children, (child, index) => { - if (!React.isValidElement(child)) return null; - if (child.type !== StepperItem) return null; - - const props = child.props as T.ItemProps; - const itemId = props.id || `${index}`; - - return ( - - - - {!vertical && index < length - 1 && ( - - - - )} - - ); - })} - - ); -}; - -Stepper.displayName = "Stepper"; -StepperItem.displayName = "Stepper.Item"; - -export default Stepper; diff --git a/packages/reshaped/src/components/Stepper/Stepper.types.ts b/packages/reshaped/src/components/Stepper/Stepper.types.ts deleted file mode 100644 index 897242b7..00000000 --- a/packages/reshaped/src/components/Stepper/Stepper.types.ts +++ /dev/null @@ -1,45 +0,0 @@ -import type * as G from "@/types/global"; -import type { Attributes, ClassName } from "@reshaped/headless"; -import type React from "react"; - -export type Props = { - /** Id of the item to display as active */ - activeId?: string | number; - /** Display variant for the item label */ - labelDisplay?: G.Responsive<"inline" | "hidden">; - /** Node for inserting children */ - children?: React.ReactNode; - /** Direction of the stepper */ - direction?: "row" | "column"; - /** Gap between items (default: 3) */ - gap?: G.Responsive; - /** Additional classname for the root element */ - className?: ClassName; - /** Additional attributes for the root element */ - attributes?: Attributes<"div">; -}; - -export type ItemProps = { - /** Id of the item, used for selecting the active item */ - id?: string; - /** Indicate that the item is completed */ - completed?: boolean; - /** Title of the item */ - title?: React.ReactNode; - /** Subtitle of the item */ - subtitle?: React.ReactNode; - /** Node for inserting children */ - children?: React.ReactNode; - /** Additional classname for the root element */ - className?: ClassName; - /** Additional attributes for the root element */ - attributes?: Attributes<"div">; -}; - -export type ItemPrivateProps = ItemProps & { - labelDisplay: Props["labelDisplay"]; - step: number; - active: boolean; - direction: Props["direction"]; - last: boolean; -}; diff --git a/packages/reshaped/src/components/Stepper/index.ts b/packages/reshaped/src/components/Stepper/index.ts deleted file mode 100644 index 8e773a4d..00000000 --- a/packages/reshaped/src/components/Stepper/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import Stepper, { StepperItem } from "./Stepper"; - -const StepperRoot = Stepper as typeof Stepper & { - Item: typeof StepperItem; -}; - -StepperRoot.Item = StepperItem; - -export default StepperRoot; -export type { Props as StepperProps } from "./Stepper.types"; diff --git a/packages/reshaped/src/components/Stepper/tests/Stepper.stories.tsx b/packages/reshaped/src/components/Stepper/tests/Stepper.stories.tsx deleted file mode 100644 index 8963bc6e..00000000 --- a/packages/reshaped/src/components/Stepper/tests/Stepper.stories.tsx +++ /dev/null @@ -1,171 +0,0 @@ -import { StoryObj } from "@storybook/react-vite"; -import React from "react"; -import { expect } from "storybook/test"; - -import Button from "@/components/Button"; -import Stepper from "@/components/Stepper"; -import View from "@/components/View"; -import { Example, Placeholder } from "@/utilities/storybook"; - -export default { - title: "Components/Stepper", - component: Stepper, - parameters: { - iframe: { - url: "https://reshaped.so/docs/components/stepper", - }, - }, -}; - -const Demo: React.FC<{ subtitle?: string; activeId?: number }> = (props) => { - const [activeId, setActiveId] = React.useState(props.activeId ?? 1); - - const content = ( - - - - - - - - ); - - return ( - - 0} - title="Step 1" - subtitle={props.subtitle || "Step subtitle"} - > - {content} - - 1} title="Step 2"> - {content} - - 2} title="Step 3 very long title"> - {content} - - - ); -}; - -export const direction = { - name: "direction", - render: () => ( - - - - - - - - - - - - - - - - - ), -}; - -export const labelDisplay = { - name: "labelDisplay", - render: () => ( - - - - - - - - - - - - - - - - - - - - - - - - ), -}; - -export const gap = { - name: "gap", - render: () => ( - - - - - - - - - - - - - - - - - - - - - - - - ), -}; - -export const className: StoryObj = { - name: "className, attributes", - render: () => ( -
- - - -
- ), - play: async ({ canvas }) => { - const root = canvas.getByTestId("root").firstChild; - const item = root?.firstChild; - - expect(root).toHaveClass("test-classname"); - expect(root).toHaveAttribute("id", "test-id"); - - expect(item).toHaveClass("test-item-classname"); - expect(item).toHaveAttribute("id", "test-item-id"); - }, -}; - -export const edgeCases = { - name: "test: edge cases", - render: () => ( - - - - - - ), -}; diff --git a/packages/reshaped/src/components/Timeline/Timeline.module.css b/packages/reshaped/src/components/Timeline/Timeline.module.css deleted file mode 100644 index 45ab8bf4..00000000 --- a/packages/reshaped/src/components/Timeline/Timeline.module.css +++ /dev/null @@ -1,62 +0,0 @@ -.item { - position: relative; - overflow: hidden; - padding-bottom: var(--rs-unit-x3); - margin-bottom: var(--rs-unit-x1); - - &:last-child { - padding-bottom: 0; - margin-bottom: 0; - } - - &--full-width { - padding-bottom: var(--rs-unit-x4); - margin-bottom: 0; - - &::after { - content: ""; - width: 1px; - background: var(--rs-color-border-neutral); - position: absolute; - bottom: 0; - left: var(--rs-unit-x3); - height: var(--rs-unit-x4); - } - - &:last-child { - padding-bottom: 0; - - &::after { - content: none; - } - } - } -} - -.marker { - position: relative; -} - -.marker:empty::before { - content: ""; - display: block; - background: var(--rs-color-border-neutral); - width: var(--rs-unit-x2); - height: var(--rs-unit-x2); - border-radius: 50%; -} - -.marker::after { - content: ""; - width: 1px; - transform: translate(-50%, var(--rs-unit-x1)); - background: var(--rs-color-border-neutral); - position: absolute; - left: 50%; - height: 100%; - display: block; - - .item:last-child & { - content: none; - } -} diff --git a/packages/reshaped/src/components/Timeline/Timeline.tsx b/packages/reshaped/src/components/Timeline/Timeline.tsx deleted file mode 100644 index fec0911d..00000000 --- a/packages/reshaped/src/components/Timeline/Timeline.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { classNames } from "@reshaped/headless"; -import React, { isValidElement } from "react"; - -import View from "@/components/View"; - -import s from "./Timeline.module.css"; - -import type * as T from "./Timeline.types"; - -export const TimelineItem: React.FC = (props) => { - const { children, markerSlot, className, attributes } = props; - const hasMarker = markerSlot !== null; - const itemClassNames = classNames(s.item, !hasMarker && s["item--full-width"], className); - - return ( - - {hasMarker && {markerSlot}} - {children} - - ); -}; - -const Timeline: React.FC = (props) => { - const { children, className, attributes } = props; - const rootClassNames = classNames(className); - - return ( -
    - {React.Children.map(children, (child, index) => { - return isValidElement(child) && child.type === TimelineItem ? ( - child - ) : ( - {child} - ); - })} -
- ); -}; - -Timeline.displayName = "Timeline"; -TimelineItem.displayName = "Timeline.Item"; - -export default Timeline; diff --git a/packages/reshaped/src/components/Timeline/Timeline.types.ts b/packages/reshaped/src/components/Timeline/Timeline.types.ts deleted file mode 100644 index c039dfa7..00000000 --- a/packages/reshaped/src/components/Timeline/Timeline.types.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type { Attributes, ClassName } from "@reshaped/headless"; -import type React from "react"; - -export type Props = { - /** Node for inserting children */ - children?: React.ReactNode; - /** Additional classname for the root element */ - className?: ClassName; - /** Additional attributes for the root element */ - attributes?: Attributes<"ul">; -}; - -export type ItemProps = { - /** Node for rendering custom item markers */ - markerSlot?: React.ReactNode | null; - /** Node for inserting children */ - children?: React.ReactNode; - /** Additional classname for the item element */ - className?: ClassName; - /** Additional attributes for the item element */ - attributes?: Attributes<"li">; -}; diff --git a/packages/reshaped/src/components/Timeline/index.ts b/packages/reshaped/src/components/Timeline/index.ts deleted file mode 100644 index 20f92c10..00000000 --- a/packages/reshaped/src/components/Timeline/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import Timeline, { TimelineItem } from "./Timeline"; - -const TimelineRoot = Timeline as typeof Timeline & { - Item: typeof TimelineItem; -}; - -TimelineRoot.Item = TimelineItem; - -export default TimelineRoot; -export type { ItemProps as TimelineItemProps, Props as TimelineProps } from "./Timeline.types"; diff --git a/packages/reshaped/src/components/Timeline/tests/Timeline.stories.tsx b/packages/reshaped/src/components/Timeline/tests/Timeline.stories.tsx deleted file mode 100644 index 9e0d5a18..00000000 --- a/packages/reshaped/src/components/Timeline/tests/Timeline.stories.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { StoryObj } from "@storybook/react-vite"; -import { expect } from "storybook/test"; - -import Timeline from "@/components/Timeline"; -import { Example, Placeholder } from "@/utilities/storybook"; - -export default { - title: "Components/Timeline", - component: Timeline, - parameters: { - iframe: { - url: "https://reshaped.so/docs/components/timeline", - }, - }, -}; - -export const base = { - name: "base", - render: () => ( - - - - - - - - - - - - - - - - - - - - - - - ), -}; - -export const marker = { - name: "markerSlot", - render: () => ( - - - - }> - - - }> - - - }> - - - - - - - - - - - - - - - - - ), -}; - -export const className: StoryObj = { - name: "className, attributes", - render: () => ( -
- - - Content - - Content - -
- ), - play: async ({ canvas }) => { - const root = canvas.getByTestId("root").firstChild; - const items = canvas.getAllByRole("listitem"); - - expect(root).toHaveClass("test-classname"); - expect(root).toHaveAttribute("id", "test-id"); - - expect(items).toHaveLength(2); - expect(items[0]).toHaveClass("test-item-classname"); - expect(items[0]).toHaveAttribute("id", "test-item-id"); - }, -}; From c02d7c722ccbe2106a1d23793b9431bb5e7afdc6 Mon Sep 17 00:00:00 2001 From: Dmitry Belyaev Date: Mon, 16 Mar 2026 01:29:24 +0100 Subject: [PATCH 15/75] v4: switch --- .changeset/green-ads-sing.md | 5 ++ .../tests/ProgressIndicator.stories.tsx | 49 ++++++++++++------- .../src/components/Switch/Switch.module.css | 13 ++--- .../Switch/tests/Switch.stories.tsx | 27 +++++----- 4 files changed, 58 insertions(+), 36 deletions(-) create mode 100644 .changeset/green-ads-sing.md diff --git a/.changeset/green-ads-sing.md b/.changeset/green-ads-sing.md new file mode 100644 index 00000000..89a6b607 --- /dev/null +++ b/.changeset/green-ads-sing.md @@ -0,0 +1,5 @@ +--- +"reshaped": patch +--- + +Switch: Updated styles diff --git a/packages/reshaped/src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx b/packages/reshaped/src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx index ca0be467..171f25a9 100644 --- a/packages/reshaped/src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx +++ b/packages/reshaped/src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx @@ -4,7 +4,6 @@ import { expect } from "storybook/test"; import Button from "@/components/Button"; import ProgressIndicator from "@/components/ProgressIndicator"; -import Scrim from "@/components/Scrim"; import Text from "@/components/Text"; import View from "@/components/View"; import { Example } from "@/utilities/storybook"; @@ -47,15 +46,23 @@ export const base: StoryObj = { Index: {activeIndex} - - } + + - - - - + + @@ -73,15 +80,23 @@ export const color = { - - } + + - - - - + + diff --git a/packages/reshaped/src/components/Switch/Switch.module.css b/packages/reshaped/src/components/Switch/Switch.module.css index 88465cd6..91c8a7f6 100644 --- a/packages/reshaped/src/components/Switch/Switch.module.css +++ b/packages/reshaped/src/components/Switch/Switch.module.css @@ -37,7 +37,8 @@ } [data-rs-keyboard] &:focus + .area { - box-shadow: var(--rs-shadow-focus); + outline: var(--rs-outline); + outline-offset: var(--rs-outline-width); } &[disabled] + .area { @@ -95,7 +96,7 @@ @value small { --rs-switch-height: var(--rs-unit-x4); --rs-switch-width: var(--rs-unit-x6); - --rs-switch-gap: var(--rs-unit-x1); + --rs-switch-gap: var(--rs-unit-x1-5); --rs-switch-line-height: var(--rs-line-height-caption-1); --rs-switch-font-size: var(--rs-font-size-caption-1); } @@ -104,15 +105,15 @@ --rs-switch-height: var(--rs-unit-x5); --rs-switch-width: var(--rs-unit-x8); --rs-switch-gap: var(--rs-unit-x2); - --rs-switch-line-height: var(--rs-line-height-body-3); - --rs-switch-font-size: var(--rs-font-size-body-3); + --rs-switch-line-height: var(--rs-line-height-body-2); + --rs-switch-font-size: var(--rs-font-size-body-2); } @value large { --rs-switch-height: var(--rs-unit-x6); --rs-switch-width: var(--rs-unit-x10); --rs-switch-gap: var(--rs-unit-x2); - --rs-switch-line-height: var(--rs-line-height-body-2); - --rs-switch-font-size: var(--rs-font-size-body-2); + --rs-switch-line-height: var(--rs-line-height-body-1); + --rs-switch-font-size: var(--rs-font-size-body-1); } } diff --git a/packages/reshaped/src/components/Switch/tests/Switch.stories.tsx b/packages/reshaped/src/components/Switch/tests/Switch.stories.tsx index 91f3f220..f5c40b31 100644 --- a/packages/reshaped/src/components/Switch/tests/Switch.stories.tsx +++ b/packages/reshaped/src/components/Switch/tests/Switch.stories.tsx @@ -17,12 +17,12 @@ export default { export const size = () => ( - - - + + + @@ -38,16 +38,6 @@ export const size = () => ( export const label = () => ( - - - - Wi-fi - - - Wi-fi - - - @@ -64,6 +54,17 @@ export const label = () => ( + + + + Wi-fi + + + Wi-fi + + + + From 49ccef36c3c21c63597864165d8f59336fa3cb2e Mon Sep 17 00:00:00 2001 From: Dmitry Belyaev Date: Tue, 17 Mar 2026 00:46:22 +0100 Subject: [PATCH 16/75] v4: FormControl --- .changeset/gentle-frogs-cheer.md | 5 +++++ .../FileUpload/tests/FileUpload.stories.tsx | 2 +- .../src/components/FormControl/FormControl.module.css | 11 +++++++++-- .../src/components/FormControl/FormControl.tsx | 10 +++++++--- .../src/components/FormControl/FormControl.types.ts | 2 ++ .../src/components/FormControl/FormControlCaption.tsx | 2 +- .../src/components/FormControl/FormControlLabel.tsx | 2 +- .../FormControl/tests/FormControl.stories.tsx | 4 ++-- .../src/components/Table/tests/Table.stories.tsx | 8 ++++---- packages/reshaped/src/styles/mixin.ts | 2 ++ 10 files changed, 34 insertions(+), 14 deletions(-) create mode 100644 .changeset/gentle-frogs-cheer.md diff --git a/.changeset/gentle-frogs-cheer.md b/.changeset/gentle-frogs-cheer.md new file mode 100644 index 00000000..0269fd4b --- /dev/null +++ b/.changeset/gentle-frogs-cheer.md @@ -0,0 +1,5 @@ +--- +"reshaped": minor +--- + +FormControl: added gap property and improved default gaps diff --git a/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx b/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx index 1010e7e9..87a8456f 100644 --- a/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx +++ b/packages/reshaped/src/components/FileUpload/tests/FileUpload.stories.tsx @@ -28,7 +28,7 @@ const Demo = () => { setFiles((prev) => [...prev, ...args.value])}> - + Drop files to attach diff --git a/packages/reshaped/src/components/FormControl/FormControl.module.css b/packages/reshaped/src/components/FormControl/FormControl.module.css index d4c7668a..03f7fbfd 100644 --- a/packages/reshaped/src/components/FormControl/FormControl.module.css +++ b/packages/reshaped/src/components/FormControl/FormControl.module.css @@ -1,10 +1,13 @@ .root { + --rs-form-control-gap: 1; + --rs-form-control-gap-value: calc(var(--rs-form-control-gap) * var(--rs-unit-x1)); + border: none; } .label { display: block; - margin-bottom: var(--rs-unit-x1); + margin-bottom: var(--rs-form-control-gap-value); &:last-child { margin-bottom: 0; @@ -12,10 +15,14 @@ } .caption { - margin-top: var(--rs-unit-x1); + margin-top: var(--rs-form-control-gap-value); display: block; } .caption + .caption { margin-top: 0; } + +.--size-large { + --rs-form-control-gap: 1.5; +} \ No newline at end of file diff --git a/packages/reshaped/src/components/FormControl/FormControl.tsx b/packages/reshaped/src/components/FormControl/FormControl.tsx index b9c034e8..df9b91fb 100644 --- a/packages/reshaped/src/components/FormControl/FormControl.tsx +++ b/packages/reshaped/src/components/FormControl/FormControl.tsx @@ -1,15 +1,16 @@ "use client"; -import { useElementId } from "@reshaped/headless"; +import { classNames, useElementId } from "@reshaped/headless"; import React from "react"; import { Provider } from "./FormControl.context"; +import s from "./FormControl.module.css"; import { getCaptionId } from "./FormControl.utilities"; import type * as T from "./FormControl.types"; const FormControl: React.FC = (props) => { - const { children, id: passedId, required, hasError, group, disabled, size } = props; + const { children, id: passedId, required, hasError, group, disabled, size, gap } = props; const id = useElementId(passedId); const WrapperTagName = group ? "fieldset" : "div"; const [helperRendered, setHelperRendered] = React.useState(false); @@ -31,7 +32,10 @@ const FormControl: React.FC = (props) => { }; return ( - + diff --git a/packages/reshaped/src/components/FormControl/FormControl.types.ts b/packages/reshaped/src/components/FormControl/FormControl.types.ts index b287fd19..95739adc 100644 --- a/packages/reshaped/src/components/FormControl/FormControl.types.ts +++ b/packages/reshaped/src/components/FormControl/FormControl.types.ts @@ -5,6 +5,8 @@ export type Props = { children: React.ReactNode; /** Component size, to be used together with the other form component sizes */ size?: "medium" | "large"; + /** Custom gap between the field and the text labels */ + gap?: number; /** Change component to show an error state and display FormControl.Error */ hasError?: boolean; /** Change component to show a required indicator */ diff --git a/packages/reshaped/src/components/FormControl/FormControlCaption.tsx b/packages/reshaped/src/components/FormControl/FormControlCaption.tsx index db4d2f7e..a77cfa70 100644 --- a/packages/reshaped/src/components/FormControl/FormControlCaption.tsx +++ b/packages/reshaped/src/components/FormControl/FormControlCaption.tsx @@ -18,7 +18,7 @@ const FormControlCaption: React.FC = (props) => { return ( = (props) => { return ( ( - + Label diff --git a/packages/reshaped/src/components/Table/tests/Table.stories.tsx b/packages/reshaped/src/components/Table/tests/Table.stories.tsx index 433fe26f..858a2873 100644 --- a/packages/reshaped/src/components/Table/tests/Table.stories.tsx +++ b/packages/reshaped/src/components/Table/tests/Table.stories.tsx @@ -232,13 +232,13 @@ export const tabIndex: StoryObj = { render: () => ( - + Row 1 {}}> - + Row 2 {} }}> - + Row 3
), @@ -291,7 +291,7 @@ export const edgeCases = { - + diff --git a/packages/reshaped/src/styles/mixin.ts b/packages/reshaped/src/styles/mixin.ts index 9ae5a885..8ae98973 100644 --- a/packages/reshaped/src/styles/mixin.ts +++ b/packages/reshaped/src/styles/mixin.ts @@ -87,7 +87,9 @@ export const resolveMixin = (mixin: Mixin) => { }; const entries = Object.entries(mixin); entries.forEach(([key, value]) => { + if (value === undefined) return; const mixin = mixinMap[key as keyof typeof mixinMap]; + console.log(mixinMap, key); // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - too complex to resolve inference without manual typing every method From 9d06cf9855dd829e4a8a41b0f61433c3a233245e Mon Sep 17 00:00:00 2001 From: Dima Belyaev Date: Sun, 22 Mar 2026 17:36:16 +0100 Subject: [PATCH 17/75] V4 button (#604) --- .changeset/purple-areas-hunt.md | 5 + .changeset/tall-chefs-report.md | 5 + .../src/components/Button/Button.module.css | 321 +++++++++--------- .../reshaped/src/components/Button/Button.tsx | 18 +- .../src/components/Button/Button.types.ts | 8 +- .../Button/tests/Button.stories.tsx | 192 +++-------- .../src/components/Card/Card.module.css | 4 - .../reshaped/src/components/Card/Card.tsx | 6 +- .../src/components/Card/Card.types.ts | 3 +- .../components/Card/tests/Card.stories.tsx | 13 +- .../reshaped/src/components/Progress/index.ts | 2 - .../ProgressBar.module.css} | 4 + .../ProgressBar.tsx} | 10 +- .../ProgressBar.types.ts} | 2 +- .../src/components/ProgressBar/index.ts | 2 + .../tests/ProgressBar.stories.tsx} | 35 +- packages/reshaped/src/index.ts | 4 +- packages/reshaped/src/styles/mixin.ts | 1 - .../reshaped/src/themes/figma/tailwind.css | 5 + packages/reshaped/src/themes/figma/theme.css | 20 ++ packages/reshaped/src/themes/figma/theme.json | 40 +++ .../src/themes/fragments/twitter/tailwind.css | 6 +- .../reshaped/src/themes/slate/tailwind.css | 5 + packages/reshaped/src/themes/slate/theme.css | 20 ++ packages/reshaped/src/themes/slate/theme.json | 100 ++++++ .../src/generation/definitions/figma.ts | 5 + .../generation/tokens/color/color.types.ts | 5 + .../tokens/color/utilities/generateColors.ts | 33 +- 28 files changed, 517 insertions(+), 357 deletions(-) create mode 100644 .changeset/purple-areas-hunt.md create mode 100644 .changeset/tall-chefs-report.md delete mode 100644 packages/reshaped/src/components/Progress/index.ts rename packages/reshaped/src/components/{Progress/Progress.module.css => ProgressBar/ProgressBar.module.css} (93%) rename packages/reshaped/src/components/{Progress/Progress.tsx => ProgressBar/ProgressBar.tsx} (83%) rename packages/reshaped/src/components/{Progress/Progress.types.ts => ProgressBar/ProgressBar.types.ts} (97%) create mode 100644 packages/reshaped/src/components/ProgressBar/index.ts rename packages/reshaped/src/components/{Progress/tests/Progress.stories.tsx => ProgressBar/tests/ProgressBar.stories.tsx} (66%) diff --git a/.changeset/purple-areas-hunt.md b/.changeset/purple-areas-hunt.md new file mode 100644 index 00000000..6050694c --- /dev/null +++ b/.changeset/purple-areas-hunt.md @@ -0,0 +1,5 @@ +--- +"reshaped": minor +--- + +ProgressBar: Added neutral color diff --git a/.changeset/tall-chefs-report.md b/.changeset/tall-chefs-report.md new file mode 100644 index 00000000..25d23c17 --- /dev/null +++ b/.changeset/tall-chefs-report.md @@ -0,0 +1,5 @@ +--- +"reshaped": major +--- + +ProgressBar: renamed Progress to ProgressBar diff --git a/packages/reshaped/src/components/Button/Button.module.css b/packages/reshaped/src/components/Button/Button.module.css index 9cc1b1a4..b2712b63 100644 --- a/packages/reshaped/src/components/Button/Button.module.css +++ b/packages/reshaped/src/components/Button/Button.module.css @@ -3,28 +3,26 @@ */ .root { - /* Using --rs-button-p and --rs-p to dynamically reassign --rs-p for all sizes of ghost buttons */ + /* Using --rs-button-p and --rs-p to dynamically reassign --rs-p for all sizes of ghost buttons, used by Aligner */ --rs-p-v: var(--rs-button-p-v); --rs-p-h: var(--rs-button-p-h); - --rs-button-highlight-opacity: 0; - --rs-button-highlight-opacity-base: 0; --rs-button-border-color: transparent; - --rs-button-border-width: 0px; transition: var(--rs-duration-fast) var(--rs-easing-standard); transition-property: background-color, box-shadow, border-color, color, transform; - padding: calc(var(--rs-unit-x1) - var(--rs-button-border-width)) - calc(var(--rs-p-h) - var(--rs-button-border-width)); + padding: var(--rs-unit-x1) var(--rs-p-h); border-radius: var(--rs-button-radius); cursor: pointer; position: relative; z-index: 0; + + /* In case it breaks into multiple lines – it should keep default text alignment */ text-align: initial; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; - border: var(--rs-button-border-width) solid var(--rs-button-border-color); + user-select: none; -webkit-tap-highlight-color: transparent; font-family: var(--rs-font-family-body); font-weight: var(--rs-font-weight-medium); @@ -37,63 +35,65 @@ var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-p-h) * 2) ); background-color: var(--rs-button-background-color); - color: var(--rs-button-foreground-color); + color: var(--rs-button-color); + isolation: isolate; - &::before { - content: ""; - position: absolute; - inset: 0; - transition: var(--rs-duration-fast) var(--rs-easing-standard); - transition-property: opacity, background-color; - opacity: var(--rs-button-highlight-opacity-base); - border-radius: var(--rs-button-radius); + &:active { + transform: scale(0.98); + } - /* Use highlight based on the text color with an ability to override it */ - background: var(--rs-button-highlight-color, var(--rs-button-foreground-color)); + &.--highlighted { + z-index: var(--rs-z-index-relative); - /* Avoid edge cases when hovering causes icons to jump in Safari */ - transform: translateZ(0); + /* If there is a highlight element, it's used for the background color instead */ + &:not(:has(.highlight)), + & .highlight { + background-color: var(--rs-button-highlight-color); + } } + @media (hover: hover) and (pointer: fine) { - &:hover:not(.--loading, .--highlighted, .--disabled)::before { - opacity: var(--rs-button-highlight-opacity); + &:hover:not(:has(.highlight)), + &:hover .highlight { + background-color: var(--rs-button-highlight-color); } } - - &.--highlighted::before, - &:active:not(.--loading, .--disabled)::before { - opacity: calc( - var(--rs-button-highlight-opacity) + max(0.04, var(--rs-button-highlight-opacity) / 2) - ); - } } .text { display: flex; align-items: center; gap: var(--rs-button-gap); + + & > :is(:first-child):not(.label, :only-child) { + margin-inline-start: calc(var(--rs-button-icon-align) * -1); + } + + &:not(:only-child) > :is(:last-child):not(.label, :only-child) { + margin-inline-end: calc(var(--rs-button-icon-align) * -1); + } } .icon { /* Starts with 1x and then grows based on the padding size */ margin-inline-end: var(--rs-button-gap); - - /* Icon only */ - &:last-child { - margin-inline-end: 0; - } + margin-inline-start: calc(var(--rs-button-icon-align) * -1); &.--icon-position-end { - margin-inline-end: 0; + margin-inline-end: calc(var(--rs-button-icon-align) * -1); margin-inline-start: var(--rs-button-gap); } } +.--icon-only .icon { + margin: 0 !important; +} + .text, .icon { position: relative; - z-index: 5; + z-index: var(--rs-z-index-relative); } .loader { @@ -102,6 +102,19 @@ display: none; align-items: center; justify-content: center; + z-index: var(--rs-z-index-relative); +} + +.highlight { + position: absolute; + inset: 0; + pointer-events: none; + border-radius: inherit; + background-color: transparent; + transition: var(--rs-duration-fast) var(--rs-easing-standard); + + /* Avoid edge cases when hovering causes icons to jump in Safari */ + transform: translateZ(0); } .root.--icon-only { @@ -133,10 +146,11 @@ @value small { --rs-button-p-v: var(--rs-unit-x1); --rs-button-p-h: var(--rs-unit-x2); - --rs-button-gap: var(--rs-unit-x1); - --rs-button-line-height: var(--rs-line-height-body-3); - --rs-button-font-size: var(--rs-font-size-body-3); - --rs-button-letter-spacing: var(--rs-letter-spacing-body-3); + --rs-button-gap: var(--rs-unit-x1-5); + --rs-button-icon-align: var(--rs-unit-x0-5); + --rs-button-line-height: var(--rs-line-height-body-2); + --rs-button-font-size: var(--rs-font-size-body-2); + --rs-button-letter-spacing: var(--rs-letter-spacing-body-2); --rs-button-radius: var(--rs-radius-small); } @@ -144,19 +158,21 @@ --rs-button-p-v: var(--rs-unit-x2); --rs-button-p-h: var(--rs-unit-x3); --rs-button-gap: var(--rs-unit-x2); - --rs-button-line-height: var(--rs-line-height-body-3); - --rs-button-font-size: var(--rs-font-size-body-3); - --rs-button-letter-spacing: var(--rs-letter-spacing-body-3); - --rs-button-radius: var(--rs-radius-small); + --rs-button-icon-align: var(--rs-unit-x0-5); + --rs-button-line-height: var(--rs-line-height-body-2); + --rs-button-font-size: var(--rs-font-size-body-2); + --rs-button-letter-spacing: var(--rs-letter-spacing-body-2); + --rs-button-radius: var(--rs-radius-medium); } @value large { --rs-button-p-v: var(--rs-unit-x3); --rs-button-p-h: var(--rs-unit-x4); --rs-button-gap: var(--rs-unit-x2); - --rs-button-line-height: var(--rs-line-height-body-2); - --rs-button-font-size: var(--rs-font-size-body-2); - --rs-button-letter-spacing: var(--rs-letter-spacing-body-2); + --rs-button-icon-align: var(--rs-unit-x1); + --rs-button-line-height: var(--rs-line-height-body-1); + --rs-button-font-size: var(--rs-font-size-body-1); + --rs-button-letter-spacing: var(--rs-letter-spacing-body-1); --rs-button-radius: var(--rs-radius-medium); } @@ -164,9 +180,10 @@ --rs-button-p-v: var(--rs-unit-x4); --rs-button-p-h: var(--rs-unit-x5); --rs-button-gap: var(--rs-unit-x3); - --rs-button-line-height: var(--rs-line-height-body-2); - --rs-button-font-size: var(--rs-font-size-body-2); - --rs-button-letter-spacing: var(--rs-letter-spacing-body-2); + --rs-button-icon-align: var(--rs-unit-x1); + --rs-button-line-height: var(--rs-line-height-title-6); + --rs-button-font-size: var(--rs-font-size-title-6); + --rs-button-letter-spacing: var(--rs-letter-spacing-body-1); --rs-button-radius: var(--rs-radius-medium); } } @@ -184,170 +201,152 @@ } .root.--variant-solid { + --rs-button-border-width: 0px; + &.--color-neutral { - --rs-button-highlight-opacity: 0.04; --rs-button-background-color: var(--rs-color-background-neutral); - --rs-button-foreground-color: var(--rs-color-on-background-neutral); + --rs-button-highlight-color: var(--rs-color-background-neutral-highlighted); + --rs-button-color: var(--rs-color-on-background-neutral); } @each $color in primary, critical, positive { &.--color-$(color) { - --rs-button-highlight-opacity: 0.08; --rs-button-background-color: var(--rs-color-background-$(color)); - --rs-button-foreground-color: var(--rs-color-on-background-$(color)); + --rs-button-highlight-color: var(--rs-color-background-$(color)-highlighted); + --rs-button-color: var(--rs-color-on-background-$(color)); } } &.--color-media { - --rs-button-highlight-opacity: 0.06; - --rs-button-background-color: var(--rs-color-white); - --rs-button-foreground-color: var(--rs-color-black); + --rs-button-color: var(--rs-color-white); + --rs-button-background-color: rgb(var(--rs-color-rgb-black), 0.28); + --rs-button-highlight-color: rgb(var(--rs-color-rgb-black), 0.36); } } -.root.--variant-faded { +.root.--variant-outline { + --rs-button-border-width: 1px; + + &::before { + content: ""; + position: absolute; + pointer-events: none; + border-radius: inherit; + z-index: var(--rs-z-index-relative); + inset: 0; + border: var(--rs-button-border-width) solid var(--rs-color-border-neutral); + } + + &::after { + box-shadow: var(--rs-shadow-base); + } + @each $color in neutral, primary, critical, positive { &.--color-$(color) { - --rs-button-highlight-opacity: 0.04; - --rs-button-background-color: var(--rs-color-background-$(color)-faded); - --rs-button-foreground-color: var(--rs-color-foreground-$(color)); + --rs-button-color: var(--rs-color-foreground-$(color)); + --rs-button-background-color: var(--rs-color-background-elevation-base); + --rs-button-highlight-color: var(--rs-color-background-neutral-highlighted-faded); } } - &.--color-media { - --rs-button-highlight-opacity-base: 0.24; - --rs-button-highlight-opacity: 0.32; - --rs-button-foreground-color: var(--rs-color-white); - --rs-button-highlight-color: var(--rs-color-black); - } - &.--color-inherit { - --rs-button-highlight-opacity-base: 0.12; - --rs-button-highlight-opacity: 0.16; - --rs-button-foreground-color: inherit; - --rs-button-highlight-color: currentcolor; + --rs-button-color: currentcolor; + --rs-button-background-color: var(--rs-color-background-elevation-base); + --rs-button-highlight-color: var(--rs-color-background-neutral-highlighted-faded); } } -.root.--variant-outline { - --rs-button-border-width: 1px; - --rs-button-highlight-opacity: 0.06; +.root.--variant-ghost { + --rs-button-border-width: 0px; - @each $color in primary, critical, positive { + @each $color in neutral, primary, critical, positive { &.--color-$(color) { - --rs-button-foreground-color: var(--rs-color-foreground-$(color)); - --rs-button-border-color: var(--rs-color-border-$(color)-faded); - --rs-button-highlight-color: var(--rs-color-background-$(color)); + --rs-button-color: var(--rs-color-foreground-$(color)); + --rs-button-background-color: transparent; + --rs-button-highlight-color: var(--rs-color-background-$(color)-highlighted-faded); } } - &.--color-neutral { - --rs-button-highlight-opacity: 0.24; - --rs-button-foreground-color: var(--rs-color-foreground-neutral); - --rs-button-border-color: var(--rs-color-border-neutral); - --rs-button-highlight-color: var(--rs-color-background-neutral); - } - &.--color-inherit { - --rs-button-border-width: 0px; - --rs-button-foreground-color: inherit; + --rs-button-color: inherit; --rs-button-highlight-color: currentcolor; - &::after { - content: ""; - position: absolute; - inset: 0; - pointer-events: none; - border: 1px solid currentcolor; - border-radius: var(--rs-button-radius); - opacity: 0.28; + & .highlight { + opacity: 0.08; } } } -.root.--variant-ghost { - --rs-button-highlight-opacity: 0.12; +.root.--variant-outline, +.root.--raised { + &::after { + content: ""; + position: absolute; + inset: var(--rs-button-border-width); + pointer-events: none; + border-radius: inherit; + z-index: var(--rs-z-index-relative); + } +} - &.--color-neutral { - --rs-button-highlight-opacity: 0.32; +.root.--raised { + &::after { + box-shadow: var(--rs-shadow-raised-intense); } - @each $color in neutral, primary, critical, positive { - &.--color-$(color) { - --rs-button-foreground-color: var(--rs-color-foreground-$(color)); - --rs-button-highlight-color: var(--rs-color-background-$(color)); + &.--variant-solid.--color-neutral, + &.--variant-outline { + &::after { + box-shadow: var(--rs-shadow-raised); } } - &.--color-inherit { - --rs-button-foreground-color: inherit; - --rs-button-highlight-color: currentcolor; + &.--variant-outline { + background-color: var(--rs-color-background-elevation-raised); } } -.root.--elevated { - [data-rs-keyboard] &:not(:focus), - &:not(:focus) { - box-shadow: var(--rs-shadow-raised); - } - - &.--variant-outline { - &.--color-neutral, - &.--color-primary, - &.--color-critical, - &.--color-positive { - background: var(--rs-color-background-elevation-raised); +.root.--disabled:not(.--color-media) { + &, + &:hover, + &:active, + &.--highlighted { + color: var(--rs-color-foreground-disabled) !important; + background-color: var(--rs-color-background-disabled) !important; + + & .highlight { + opacity: 0 !important; } - } -} -.root.--disabled { - &.--color-neutral, - &.--color-primary, - &.--color-positive, - &.--color-critical, - &.--color-inherit { - &, - &:hover, - &:active, - &.--highlighted { - color: var(--rs-color-foreground-disabled) !important; - border-color: var(--rs-color-border-disabled) !important; - background-color: var(--rs-color-background-disabled) !important; + &.--variant-outline { + background-color: transparent !important; &::before { - opacity: 0 !important; - } - - &.--variant-faded { - background-color: var(--rs-color-background-disabled-faded) !important; + border-color: var(--rs-color-border-disabled) !important; } - &.--variant-outline { - background-color: transparent !important; - } - - &.--variant-ghost { - background-color: transparent !important; - border-color: transparent !important; + &::after { + content: none !important; } } - } - &.--color-media { - &, - &:hover, - &:active, - &.--highlighted { - opacity: 0.4 !important; + &.--variant-ghost { + background-color: transparent !important; } } } -.root.--highlighted { - z-index: var(--rs-z-index-relative); +.root.--color-media.--disabled { + &, + &:hover, + &:active, + &.--highlighted { + opacity: 0.6 !important; + background-color: var(--rs-button-background-color) !important; + } } + /* Button group */ .group { @@ -398,7 +397,7 @@ &::after { content: ""; position: absolute; - inset-block: calc(var(--rs-button-border-width) * -1); + inset-block: 0; inset-inline-end: -1px; pointer-events: none; border-inline-end: 1px solid var(--rs-button-group-separator-color); @@ -418,15 +417,13 @@ } } - &.--variant-faded.--color-neutral, &.--variant-outline.--color-neutral { --rs-button-group-separator-color: var(--rs-color-border-neutral); } @each $color in positive, critical, primary { - &.--variant-outline.--color-$(color), - &.--variant-faded.--color-$(color) { - --rs-button-group-separator-color: var(--rs-color-border-$(color)-faded); + &.--variant-outline.--color-$(color) { + --rs-button-group-separator-color: var(--rs-color-border-neutral); } } @@ -437,10 +434,6 @@ } &.--variant-solid.--color-media { - --rs-button-group-separator-color: rgba(var(--rs-color-rgb-black), 0.12); - } - - &.--variant-faded.--color-media { --rs-button-group-separator-color: rgba(var(--rs-color-rgb-white), 0.12); } diff --git a/packages/reshaped/src/components/Button/Button.tsx b/packages/reshaped/src/components/Button/Button.tsx index 917c8d78..bdf9d96b 100644 --- a/packages/reshaped/src/components/Button/Button.tsx +++ b/packages/reshaped/src/components/Button/Button.tsx @@ -1,5 +1,6 @@ import { classNames } from "@reshaped/headless"; import { forwardRef } from "react"; +import React from "react"; import Actionable, { type ActionableRef } from "@/components/Actionable"; import Icon from "@/components/Icon"; @@ -14,7 +15,7 @@ const Button = forwardRef((props, ref) => { const { variant = "solid", color = "neutral", - elevated, + raised, highlighted, fullWidth, loading, @@ -42,7 +43,7 @@ const Button = forwardRef((props, ref) => { variant && s[`--variant-${variant}`], responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--full-width", fullWidth), - elevated && variant !== "ghost" && s["--elevated"], + raised && variant !== "ghost" && color !== "media" && s["--raised"], rounded && s["--rounded"], disabled && s["--disabled"], loading && s["--loading"], @@ -96,8 +97,19 @@ const Button = forwardRef((props, ref) => { )} {renderIcon("start")} - {children && {children}} + {children && ( + + {React.Children.map(children, (child) => { + if (typeof child === "string") { + return {child}; + } + + return child; + })} + + )} {renderIcon("end")} + {["outline", "ghost"].includes(variant) && } ); }); diff --git a/packages/reshaped/src/components/Button/Button.types.ts b/packages/reshaped/src/components/Button/Button.types.ts index d2b82f82..e0273d18 100644 --- a/packages/reshaped/src/components/Button/Button.types.ts +++ b/packages/reshaped/src/components/Button/Button.types.ts @@ -23,11 +23,11 @@ export type Props = Pick< /** Component color scheme * @default "neutral" */ - color?: "primary" | "critical" | "positive" | "neutral" | "media" | "inherit"; + color?: "primary" | "critical" | "positive" | "neutral" | "warning" | "media" | "inherit"; /** Component render variant * @default "solid" */ - variant?: "solid" | "outline" | "ghost" | "faded"; + variant?: "solid" | "outline" | "ghost"; /** SVG component for the icon */ icon?: IconProps["svg"]; /** SVG component for the end position icon */ @@ -42,8 +42,8 @@ export type Props = Pick< loading?: boolean; /** aria-label attribute for the loading indicator */ loadingAriaLabel?: string; - /** Apply elevated styles to the component */ - elevated?: boolean; + /** Apply raised styles to the component */ + raised?: boolean; /** Make the component take the full width of the parent element */ fullWidth?: G.Responsive; /** Highlight the component when component is used for an active state */ diff --git a/packages/reshaped/src/components/Button/tests/Button.stories.tsx b/packages/reshaped/src/components/Button/tests/Button.stories.tsx index 5f1f0efe..9338521c 100644 --- a/packages/reshaped/src/components/Button/tests/Button.stories.tsx +++ b/packages/reshaped/src/components/Button/tests/Button.stories.tsx @@ -2,10 +2,12 @@ import { StoryObj } from "@storybook/react-vite"; import { expect, fn, userEvent } from "storybook/test"; import Avatar from "@/components/Avatar"; +import Badge from "@/components/Badge"; import Button from "@/components/Button"; -import Hotkey from "@/components/Hotkey"; import Image from "@/components/Image"; +import Text from "@/components/Text"; import View from "@/components/View"; +import IconPlus from "@/icons/Plus"; import IconZap from "@/icons/Zap"; import { Example, Placeholder } from "@/utilities/storybook"; @@ -27,78 +29,41 @@ export const variantAndColor = { render: () => ( - - + + - - - - - - - - - - - - - - - - - + - - - - - - - - + @@ -106,48 +71,38 @@ export const variantAndColor = { - + - + - + - + + - - - - - - - ), }; @@ -157,7 +112,7 @@ export const icon = { render: () => ( - @@ -248,16 +203,16 @@ export const size = { ), }; -export const elevated = { - name: "elevated", +export const raised = { + name: "raised", render: () => ( - - @@ -265,17 +220,20 @@ export const elevated = { - - + + + + + + - - - @@ -343,9 +301,6 @@ export const fullWidth = { - @@ -371,9 +326,6 @@ export const loading = { - @@ -387,9 +339,6 @@ export const loading = { - @@ -403,9 +352,6 @@ export const loading = { - @@ -424,9 +370,6 @@ export const loading = { - @@ -454,9 +397,6 @@ export const highlighted = { - @@ -470,9 +410,6 @@ export const highlighted = { - @@ -486,9 +423,6 @@ export const highlighted = { - @@ -510,9 +444,6 @@ export const disabled: StoryObj = { - @@ -526,9 +457,6 @@ export const disabled: StoryObj = { - @@ -542,9 +470,6 @@ export const disabled: StoryObj = { - @@ -563,9 +488,6 @@ export const disabled: StoryObj = { - @@ -654,11 +576,22 @@ export const composition = { name: "test: composition", render: () => ( - + + + + + + + + @@ -808,23 +741,6 @@ export const group: StoryObj = { ))} - - - {(["neutral", "primary", "critical", "positive", "media"] as const).map((color) => ( - - - - - - ))} - - diff --git a/packages/reshaped/src/components/Card/Card.module.css b/packages/reshaped/src/components/Card/Card.module.css index 4f44a3a9..16a992b5 100644 --- a/packages/reshaped/src/components/Card/Card.module.css +++ b/packages/reshaped/src/components/Card/Card.module.css @@ -18,10 +18,6 @@ background: var(--rs-color-background-elevation-raised); } -.--elevation-overlay { - background: var(--rs-color-background-elevation-overlay); -} - .--actionable:not(.--selected) { & .content::before { content: ""; diff --git a/packages/reshaped/src/components/Card/Card.tsx b/packages/reshaped/src/components/Card/Card.tsx index 178f0d5d..169934f5 100644 --- a/packages/reshaped/src/components/Card/Card.tsx +++ b/packages/reshaped/src/components/Card/Card.tsx @@ -20,7 +20,7 @@ const Card: Component = forwardRef((props, ref) => { const { padding = 4, selected, - elevation = "base", + raised, bleed, height, direction, @@ -42,14 +42,14 @@ const Card: Component = forwardRef((props, ref) => { bleed, borderColor: "neutral-faded", border: true, - shadow: elevation, + shadow: raised ? "raised" : "base", }); const rootClassNames = classNames( s.root, mixinStyles.classNames, isActionable && s["--actionable"], - elevation && s[`--elevation-${elevation}`], + raised && s["--elevation-raised"], selected && s["--selected"], className ); diff --git a/packages/reshaped/src/components/Card/Card.types.ts b/packages/reshaped/src/components/Card/Card.types.ts index 4c483f8c..4091093b 100644 --- a/packages/reshaped/src/components/Card/Card.types.ts +++ b/packages/reshaped/src/components/Card/Card.types.ts @@ -1,6 +1,5 @@ import type { ActionableProps } from "@/components/Actionable"; import type { ViewProps } from "@/components/View"; -import type * as TStyles from "@/styles/types"; import type { Attributes, ClassName } from "@reshaped/headless"; import type React from "react"; @@ -11,7 +10,7 @@ export type Props; + raised?: boolean; /** Node for inserting children */ children?: React.ReactNode; /** Callback when the component is clicked, turns component into a button */ diff --git a/packages/reshaped/src/components/Card/tests/Card.stories.tsx b/packages/reshaped/src/components/Card/tests/Card.stories.tsx index 67b9c083..7962bcdf 100644 --- a/packages/reshaped/src/components/Card/tests/Card.stories.tsx +++ b/packages/reshaped/src/components/Card/tests/Card.stories.tsx @@ -64,17 +64,12 @@ export const selected = { }, }; -export const elevated = { - name: "elevation", +export const raised = { + name: "raised", render: () => ( - - - - - - - + + diff --git a/packages/reshaped/src/components/Progress/index.ts b/packages/reshaped/src/components/Progress/index.ts deleted file mode 100644 index 808e673d..00000000 --- a/packages/reshaped/src/components/Progress/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from "./Progress"; -export type { Props as ProgressProps } from "./Progress.types"; diff --git a/packages/reshaped/src/components/Progress/Progress.module.css b/packages/reshaped/src/components/ProgressBar/ProgressBar.module.css similarity index 93% rename from packages/reshaped/src/components/Progress/Progress.module.css rename to packages/reshaped/src/components/ProgressBar/ProgressBar.module.css index 474be8fc..e3578580 100644 --- a/packages/reshaped/src/components/Progress/Progress.module.css +++ b/packages/reshaped/src/components/ProgressBar/ProgressBar.module.css @@ -33,6 +33,10 @@ height: var(--rs-unit-x2); } +.--color-neutral .value { + background: var(--rs-color-background-neutral); +} + .--color-primary .value { background: var(--rs-color-background-primary); } diff --git a/packages/reshaped/src/components/Progress/Progress.tsx b/packages/reshaped/src/components/ProgressBar/ProgressBar.tsx similarity index 83% rename from packages/reshaped/src/components/Progress/Progress.tsx rename to packages/reshaped/src/components/ProgressBar/ProgressBar.tsx index 4688d76c..4c257237 100644 --- a/packages/reshaped/src/components/Progress/Progress.tsx +++ b/packages/reshaped/src/components/ProgressBar/ProgressBar.tsx @@ -1,11 +1,11 @@ import { classNames } from "@reshaped/headless"; import React from "react"; -import s from "./Progress.module.css"; +import s from "./ProgressBar.module.css"; -import type * as T from "./Progress.types"; +import type * as T from "./ProgressBar.types"; -const Progress: React.FC = (props) => { +const ProgressBar: React.FC = (props) => { const { value = 0, min = 0, @@ -53,6 +53,6 @@ const Progress: React.FC = (props) => { ); }; -Progress.displayName = "Progress"; +ProgressBar.displayName = "ProgressBar"; -export default Progress; +export default ProgressBar; diff --git a/packages/reshaped/src/components/Progress/Progress.types.ts b/packages/reshaped/src/components/ProgressBar/ProgressBar.types.ts similarity index 97% rename from packages/reshaped/src/components/Progress/Progress.types.ts rename to packages/reshaped/src/components/ProgressBar/ProgressBar.types.ts index 6f5e7bf3..96fd2717 100644 --- a/packages/reshaped/src/components/Progress/Progress.types.ts +++ b/packages/reshaped/src/components/ProgressBar/ProgressBar.types.ts @@ -10,7 +10,7 @@ export type Props = { /** Component size */ size?: "small" | "medium"; /** Component color scheme */ - color?: "primary" | "critical" | "warning" | "positive" | "media"; + color?: "primary" | "critical" | "warning" | "positive" | "media" | "neutral"; /** Duration of the progress bar animation in milliseconds */ duration?: number; /** aria-label attribute for the root element */ diff --git a/packages/reshaped/src/components/ProgressBar/index.ts b/packages/reshaped/src/components/ProgressBar/index.ts new file mode 100644 index 00000000..9ee6851c --- /dev/null +++ b/packages/reshaped/src/components/ProgressBar/index.ts @@ -0,0 +1,2 @@ +export { default } from "./ProgressBar"; +export type { Props as ProgressBarProps } from "./ProgressBar.types"; diff --git a/packages/reshaped/src/components/Progress/tests/Progress.stories.tsx b/packages/reshaped/src/components/ProgressBar/tests/ProgressBar.stories.tsx similarity index 66% rename from packages/reshaped/src/components/Progress/tests/Progress.stories.tsx rename to packages/reshaped/src/components/ProgressBar/tests/ProgressBar.stories.tsx index 0887676b..6ce9822f 100644 --- a/packages/reshaped/src/components/Progress/tests/Progress.stories.tsx +++ b/packages/reshaped/src/components/ProgressBar/tests/ProgressBar.stories.tsx @@ -3,16 +3,16 @@ import React from "react"; import { expect } from "storybook/test"; import Button from "@/components/Button"; -import Progress from "@/components/Progress"; +import ProgressBar from "@/components/ProgressBar"; import View from "@/components/View"; import { Example } from "@/utilities/storybook"; export default { - title: "Components/Progress", - component: Progress, + title: "Components/ProgressBar", + component: ProgressBar, parameters: { iframe: { - url: "https://reshaped.so/docs/components/progress", + url: "https://reshaped.so/docs/components/progress-bar", }, }, }; @@ -22,13 +22,13 @@ export const value = { render: () => ( - + - + - + ), @@ -39,10 +39,10 @@ export const size = { render: () => ( - + - + ), @@ -52,18 +52,21 @@ export const color = { name: "color", render: () => ( + + + - + - + - + - + @@ -87,7 +90,7 @@ export const duration = { - + @@ -97,7 +100,7 @@ export const duration = { export const render: StoryObj = { name: "rendering", - render: () => , + render: () => , play: async ({ canvas }) => { const el = canvas.getByRole("progressbar"); @@ -113,7 +116,7 @@ export const className: StoryObj = { name: "className, attributes", render: () => (
- +
), play: async ({ canvas }) => { diff --git a/packages/reshaped/src/index.ts b/packages/reshaped/src/index.ts index 6fbe2b76..4674c633 100644 --- a/packages/reshaped/src/index.ts +++ b/packages/reshaped/src/index.ts @@ -51,8 +51,8 @@ export type { PinFieldProps } from "@/components/PinField"; export { default as PinField } from "@/components/PinField"; export type { PopoverInstance, PopoverProps } from "@/components/Popover"; export { default as Popover } from "@/components/Popover"; -export type { ProgressProps } from "@/components/Progress"; -export { default as Progress } from "@/components/Progress"; +export type { ProgressProps } from "@/components/ProgressBar"; +export { default as Progress } from "@/components/ProgressBar"; export type { ProgressIndicatorProps } from "@/components/ProgressIndicator"; export { default as ProgressIndicator } from "@/components/ProgressIndicator"; export type { RadioProps } from "@/components/Radio"; diff --git a/packages/reshaped/src/styles/mixin.ts b/packages/reshaped/src/styles/mixin.ts index 8ae98973..141c36ce 100644 --- a/packages/reshaped/src/styles/mixin.ts +++ b/packages/reshaped/src/styles/mixin.ts @@ -89,7 +89,6 @@ export const resolveMixin = (mixin: Mixin) => { entries.forEach(([key, value]) => { if (value === undefined) return; const mixin = mixinMap[key as keyof typeof mixinMap]; - console.log(mixinMap, key); // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - too complex to resolve inference without manual typing every method diff --git a/packages/reshaped/src/themes/figma/tailwind.css b/packages/reshaped/src/themes/figma/tailwind.css index e690bf14..9b71bd4e 100644 --- a/packages/reshaped/src/themes/figma/tailwind.css +++ b/packages/reshaped/src/themes/figma/tailwind.css @@ -1,6 +1,7 @@ @theme inline { --background-color-primary: var(--rs-color-background-primary); --background-color-primary-faded: var(--rs-color-background-primary-faded); +--background-color-primary-highlighted: var(--rs-color-background-primary-highlighted); --background-color-primary-highlighted-faded: var(--rs-color-background-primary-highlighted-faded); --border-color-primary: var(--rs-color-border-primary); --outline-color-primary: var(--rs-color-border-primary); @@ -9,6 +10,7 @@ --text-color-primary: var(--rs-color-foreground-primary); --background-color-critical: var(--rs-color-background-critical); --background-color-critical-faded: var(--rs-color-background-critical-faded); +--background-color-critical-highlighted: var(--rs-color-background-critical-highlighted); --background-color-critical-highlighted-faded: var(--rs-color-background-critical-highlighted-faded); --border-color-critical: var(--rs-color-border-critical); --outline-color-critical: var(--rs-color-border-critical); @@ -17,6 +19,7 @@ --text-color-critical: var(--rs-color-foreground-critical); --background-color-warning: var(--rs-color-background-warning); --background-color-warning-faded: var(--rs-color-background-warning-faded); +--background-color-warning-highlighted: var(--rs-color-background-warning-highlighted); --background-color-warning-highlighted-faded: var(--rs-color-background-warning-highlighted-faded); --border-color-warning: var(--rs-color-border-warning); --outline-color-warning: var(--rs-color-border-warning); @@ -25,6 +28,7 @@ --text-color-warning: var(--rs-color-foreground-warning); --background-color-positive: var(--rs-color-background-positive); --background-color-positive-faded: var(--rs-color-background-positive-faded); +--background-color-positive-highlighted: var(--rs-color-background-positive-highlighted); --background-color-positive-highlighted-faded: var(--rs-color-background-positive-highlighted-faded); --border-color-positive: var(--rs-color-border-positive); --outline-color-positive: var(--rs-color-border-positive); @@ -33,6 +37,7 @@ --text-color-positive: var(--rs-color-foreground-positive); --background-color-neutral: var(--rs-color-background-neutral); --background-color-neutral-faded: var(--rs-color-background-neutral-faded); +--background-color-neutral-highlighted: var(--rs-color-background-neutral-highlighted); --background-color-neutral-highlighted-faded: var(--rs-color-background-neutral-highlighted-faded); --border-color-neutral: var(--rs-color-border-neutral); --outline-color-neutral: var(--rs-color-border-neutral); diff --git a/packages/reshaped/src/themes/figma/theme.css b/packages/reshaped/src/themes/figma/theme.css index 123ec701..65187ed4 100644 --- a/packages/reshaped/src/themes/figma/theme.css +++ b/packages/reshaped/src/themes/figma/theme.css @@ -114,30 +114,35 @@ [data-rs-theme~="figma"][data-rs-color-mode="light"] { --rs-color-background-primary: #0D99FF; --rs-color-background-primary-faded: #E5F4FF; +--rs-color-background-primary-highlighted: #39ADFF; --rs-color-background-primary-highlighted-faded: #0D99FF0F; --rs-color-border-primary: #007BE5; --rs-color-border-primary-faded: #BDE3FF; --rs-color-foreground-primary: #007BE5; --rs-color-background-critical: #F24822; --rs-color-background-critical-faded: #FFE2E0; +--rs-color-background-critical-highlighted: #FCA397; --rs-color-background-critical-highlighted-faded: #F248220F; --rs-color-border-critical: #DC3412; --rs-color-border-critical-faded: #FFC7C2; --rs-color-foreground-critical: #DC3412; --rs-color-background-warning: #facc15; --rs-color-background-warning-faded: #fffae9; +--rs-color-background-warning-highlighted: #B4920A; --rs-color-background-warning-highlighted-faded: #facc150F; --rs-color-border-warning: #cfa90f; --rs-color-border-warning-faded: #ece2c4; --rs-color-foreground-warning: #7b6305; --rs-color-background-positive: #14AE5C; --rs-color-background-positive-faded: #DAECDF; +--rs-color-background-positive-highlighted: #79D297; --rs-color-background-positive-highlighted-faded: #14AE5C0F; --rs-color-border-positive: #009951; --rs-color-border-positive-faded: #BBDDC6; --rs-color-foreground-positive: #009951; --rs-color-background-neutral: #DFE2EA; --rs-color-background-neutral-faded: #F5F5F5; +--rs-color-background-neutral-highlighted: #C8CED9; --rs-color-background-neutral-highlighted-faded: #DFE2EA66; --rs-color-border-neutral: #E6E6E6; --rs-color-border-neutral-faded: #E6E6E6; @@ -154,19 +159,24 @@ --rs-color-background-page-faded: #FAFAFA; --rs-color-rgb-background-primary: 13.004999999999999, 153, 255; --rs-color-rgb-background-primary-faded: 228.99, 244.0095, 255; +--rs-color-rgb-background-primary-highlighted: 56.9925, 172.992, 255; --rs-color-rgb-background-primary-highlighted-faded: 13.004999999999999, 153, 255; --rs-color-rgb-background-critical: 241.99499999999998, 72.012, 33.9915; --rs-color-rgb-background-critical-faded: 255, 226.0065, 223.992; +--rs-color-rgb-background-critical-highlighted: 251.99099999999999, 162.996, 151.011; --rs-color-rgb-background-critical-highlighted-faded: 241.99499999999998, 72.012, 33.9915; --rs-color-rgb-background-warning: 250.002, 204, 21.012; --rs-color-rgb-background-warning-faded: 255, 250.002, 232.99349999999998; +--rs-color-rgb-background-warning-highlighted: 180.00449999999998, 145.9875, 9.996; --rs-color-rgb-background-warning-highlighted-faded: 250.002, 204, 21.012; --rs-color-rgb-background-positive: 19.992, 174.012, 92.004; --rs-color-rgb-background-positive-faded: 217.9995, 236.0025, 222.9975; +--rs-color-rgb-background-positive-highlighted: 120.99749999999999, 209.9925, 151.011; --rs-color-rgb-background-positive-highlighted-faded: 19.992, 174.012, 92.004; --rs-color-on-background-neutral: oklch(0 0 0); --rs-color-rgb-background-neutral: 222.9975, 226.0065, 233.988; --rs-color-rgb-background-neutral-faded: 245.004, 245.004, 245.004; +--rs-color-rgb-background-neutral-highlighted: 199.9965, 205.989, 217.005; --rs-color-rgb-background-neutral-highlighted-faded: 222.9975, 226.0065, 233.988; --rs-color-rgb-background-disabled: 227.9955, 227.9955, 227.9955; --rs-color-rgb-background-disabled-faded: 245.004, 245.004, 245.004; @@ -184,30 +194,35 @@ [data-rs-theme~="figma"][data-rs-color-mode="dark"] { --rs-color-background-primary: #0C8CE9; --rs-color-background-primary-faded: #394360; +--rs-color-background-primary-highlighted: #39A2F2; --rs-color-background-primary-highlighted-faded: #0C8CE90F; --rs-color-border-primary: #7CC4F8; --rs-color-border-primary-faded: #2A4D72; --rs-color-foreground-primary: #7CC4F8; --rs-color-background-critical: #E03E1A; --rs-color-background-critical-faded: #60332A; +--rs-color-background-critical-highlighted: #F8978B; --rs-color-background-critical-highlighted-faded: #E03E1A0F; --rs-color-border-critical: #FCA397; --rs-color-border-critical-faded: #803226; --rs-color-foreground-critical: #FCA397; --rs-color-background-warning: #f1c512; --rs-color-background-warning-faded: #2c271f; +--rs-color-background-warning-highlighted: #A98909; --rs-color-background-warning-highlighted-faded: #f1c5120F; --rs-color-border-warning: #b4920a; --rs-color-border-warning-faded: #453c1e; --rs-color-foreground-warning: #b4920c; --rs-color-background-positive: #198F51; --rs-color-background-positive-faded: #3d5749; +--rs-color-background-positive-highlighted: #76C28B; --rs-color-background-positive-highlighted-faded: #198F510F; --rs-color-border-positive: #79D297; --rs-color-border-positive-faded: #086338; --rs-color-foreground-positive: #79D297; --rs-color-background-neutral: #444444; --rs-color-background-neutral-faded: #383838; +--rs-color-background-neutral-highlighted: #4D4D4D; --rs-color-background-neutral-highlighted-faded: #44444466; --rs-color-border-neutral: #444444; --rs-color-border-neutral-faded: #444444; @@ -224,19 +239,24 @@ --rs-color-background-page-faded: #1E1E1E; --rs-color-rgb-background-primary: 12.0105, 139.995, 232.99349999999998; --rs-color-rgb-background-primary-faded: 56.9925, 66.9885, 96.00750000000001; +--rs-color-rgb-background-primary-highlighted: 56.9925, 162.0015, 241.99499999999998; --rs-color-rgb-background-primary-highlighted-faded: 12.0105, 139.995, 232.99349999999998; --rs-color-rgb-background-critical: 223.992, 61.990500000000004, 26.009999999999998; --rs-color-rgb-background-critical-faded: 96.00750000000001, 51, 41.9985; +--rs-color-rgb-background-critical-highlighted: 247.9875, 151.011, 139.00050000000002; --rs-color-rgb-background-critical-highlighted-faded: 223.992, 61.990500000000004, 26.009999999999998; --rs-color-rgb-background-warning: 241.00050000000002, 196.98749999999998, 18.003; --rs-color-rgb-background-warning-faded: 43.9875, 38.9895, 31.008; +--rs-color-rgb-background-warning-highlighted: 168.9885, 137.0115, 9.0015; --rs-color-rgb-background-warning-highlighted-faded: 241.00050000000002, 196.98749999999998, 18.003; --rs-color-rgb-background-positive: 24.990000000000002, 143.004, 80.988; --rs-color-rgb-background-positive-faded: 60.996, 87.006, 73.0065; +--rs-color-rgb-background-positive-highlighted: 117.9885, 194.00400000000002, 139.00050000000002; --rs-color-rgb-background-positive-highlighted-faded: 24.990000000000002, 143.004, 80.988; --rs-color-on-background-neutral: oklch(1 0 0); --rs-color-rgb-background-neutral: 68.0085, 68.0085, 68.0085; --rs-color-rgb-background-neutral-faded: 55.998, 55.998, 55.998; +--rs-color-rgb-background-neutral-highlighted: 77.00999999999999, 77.00999999999999, 77.00999999999999; --rs-color-rgb-background-neutral-highlighted-faded: 68.0085, 68.0085, 68.0085; --rs-color-rgb-background-disabled: 70.99199999999999, 70.99199999999999, 70.99199999999999; --rs-color-rgb-background-disabled-faded: 58.0125, 58.0125, 58.0125; diff --git a/packages/reshaped/src/themes/figma/theme.json b/packages/reshaped/src/themes/figma/theme.json index ac5831a5..b76f1cfb 100644 --- a/packages/reshaped/src/themes/figma/theme.json +++ b/packages/reshaped/src/themes/figma/theme.json @@ -8,6 +8,10 @@ "hex": "#E5F4FF", "hexDark": "#394360" }, + "backgroundPrimaryHighlighted": { + "hex": "#39ADFF", + "hexDark": "#39A2F2" + }, "backgroundPrimaryHighlightedFaded": { "hex": "#0D99FF0F", "hexDark": "#0C8CE90F" @@ -32,6 +36,10 @@ "hex": "#FFE2E0", "hexDark": "#60332A" }, + "backgroundCriticalHighlighted": { + "hex": "#FCA397", + "hexDark": "#F8978B" + }, "backgroundCriticalHighlightedFaded": { "hex": "#F248220F", "hexDark": "#E03E1A0F" @@ -56,6 +64,10 @@ "hex": "#fffae9", "hexDark": "#2c271f" }, + "backgroundWarningHighlighted": { + "hex": "#B4920A", + "hexDark": "#A98909" + }, "backgroundWarningHighlightedFaded": { "hex": "#facc150F", "hexDark": "#f1c5120F" @@ -80,6 +92,10 @@ "hex": "#DAECDF", "hexDark": "#3d5749" }, + "backgroundPositiveHighlighted": { + "hex": "#79D297", + "hexDark": "#76C28B" + }, "backgroundPositiveHighlightedFaded": { "hex": "#14AE5C0F", "hexDark": "#198F510F" @@ -104,6 +120,10 @@ "hex": "#F5F5F5", "hexDark": "#383838" }, + "backgroundNeutralHighlighted": { + "hex": "#C8CED9", + "hexDark": "#4D4D4D" + }, "backgroundNeutralHighlightedFaded": { "hex": "#DFE2EA66", "hexDark": "#44444466" @@ -180,6 +200,10 @@ "hex": "228.99, 244.0095, 255", "hexDark": "56.9925, 66.9885, 96.00750000000001" }, + "rgbBackgroundPrimaryHighlighted": { + "hex": "56.9925, 172.992, 255", + "hexDark": "56.9925, 162.0015, 241.99499999999998" + }, "rgbBackgroundPrimaryHighlightedFaded": { "hex": "13.004999999999999, 153, 255", "hexDark": "12.0105, 139.995, 232.99349999999998" @@ -206,6 +230,10 @@ "hex": "255, 226.0065, 223.992", "hexDark": "96.00750000000001, 51, 41.9985" }, + "rgbBackgroundCriticalHighlighted": { + "hex": "251.99099999999999, 162.996, 151.011", + "hexDark": "247.9875, 151.011, 139.00050000000002" + }, "rgbBackgroundCriticalHighlightedFaded": { "hex": "241.99499999999998, 72.012, 33.9915", "hexDark": "223.992, 61.990500000000004, 26.009999999999998" @@ -232,6 +260,10 @@ "hex": "255, 250.002, 232.99349999999998", "hexDark": "43.9875, 38.9895, 31.008" }, + "rgbBackgroundWarningHighlighted": { + "hex": "180.00449999999998, 145.9875, 9.996", + "hexDark": "168.9885, 137.0115, 9.0015" + }, "rgbBackgroundWarningHighlightedFaded": { "hex": "250.002, 204, 21.012", "hexDark": "241.00050000000002, 196.98749999999998, 18.003" @@ -258,6 +290,10 @@ "hex": "217.9995, 236.0025, 222.9975", "hexDark": "60.996, 87.006, 73.0065" }, + "rgbBackgroundPositiveHighlighted": { + "hex": "120.99749999999999, 209.9925, 151.011", + "hexDark": "117.9885, 194.00400000000002, 139.00050000000002" + }, "rgbBackgroundPositiveHighlightedFaded": { "hex": "19.992, 174.012, 92.004", "hexDark": "24.990000000000002, 143.004, 80.988" @@ -284,6 +320,10 @@ "hex": "245.004, 245.004, 245.004", "hexDark": "55.998, 55.998, 55.998" }, + "rgbBackgroundNeutralHighlighted": { + "hex": "199.9965, 205.989, 217.005", + "hexDark": "77.00999999999999, 77.00999999999999, 77.00999999999999" + }, "rgbBackgroundNeutralHighlightedFaded": { "hex": "222.9975, 226.0065, 233.988", "hexDark": "68.0085, 68.0085, 68.0085" diff --git a/packages/reshaped/src/themes/fragments/twitter/tailwind.css b/packages/reshaped/src/themes/fragments/twitter/tailwind.css index b02d4512..881692d7 100644 --- a/packages/reshaped/src/themes/fragments/twitter/tailwind.css +++ b/packages/reshaped/src/themes/fragments/twitter/tailwind.css @@ -1,6 +1,7 @@ @theme inline { --background-color-primary: var(--rs-color-background-primary); --background-color-primary-faded: var(--rs-color-background-primary-faded); +--background-color-primary-highlighted: var(--rs-color-background-primary-highlighted); --background-color-primary-highlighted-faded: var(--rs-color-background-primary-highlighted-faded); --border-color-primary: var(--rs-color-border-primary); --outline-color-primary: var(--rs-color-border-primary); @@ -9,6 +10,7 @@ --text-color-primary: var(--rs-color-foreground-primary); --background-color-critical: var(--rs-color-background-critical); --background-color-critical-faded: var(--rs-color-background-critical-faded); +--background-color-critical-highlighted: var(--rs-color-background-critical-highlighted); --background-color-critical-highlighted-faded: var(--rs-color-background-critical-highlighted-faded); --border-color-critical: var(--rs-color-border-critical); --outline-color-critical: var(--rs-color-border-critical); @@ -17,6 +19,7 @@ --text-color-critical: var(--rs-color-foreground-critical); --background-color-warning: var(--rs-color-background-warning); --background-color-warning-faded: var(--rs-color-background-warning-faded); +--background-color-warning-highlighted: var(--rs-color-background-warning-highlighted); --background-color-warning-highlighted-faded: var(--rs-color-background-warning-highlighted-faded); --border-color-warning: var(--rs-color-border-warning); --outline-color-warning: var(--rs-color-border-warning); @@ -25,6 +28,7 @@ --text-color-warning: var(--rs-color-foreground-warning); --background-color-positive: var(--rs-color-background-positive); --background-color-positive-faded: var(--rs-color-background-positive-faded); +--background-color-positive-highlighted: var(--rs-color-background-positive-highlighted); --background-color-positive-highlighted-faded: var(--rs-color-background-positive-highlighted-faded); --border-color-positive: var(--rs-color-border-positive); --outline-color-positive: var(--rs-color-border-positive); @@ -33,6 +37,7 @@ --text-color-positive: var(--rs-color-foreground-positive); --background-color-neutral: var(--rs-color-background-neutral); --background-color-neutral-faded: var(--rs-color-background-neutral-faded); +--background-color-neutral-highlighted: var(--rs-color-background-neutral-highlighted); --background-color-neutral-highlighted-faded: var(--rs-color-background-neutral-highlighted-faded); --border-color-neutral: var(--rs-color-border-neutral); --outline-color-neutral: var(--rs-color-border-neutral); @@ -53,7 +58,6 @@ --color-brand: var(--rs-color-brand); --color-white: var(--rs-color-white); --color-black: var(--rs-color-black); ---background-color-primary-highlighted: var(--rs-color-background-primary-highlighted); --text-color-on-primary: var(--rs-color-on-background-primary); --radius-small: var(--rs-radius-small); --radius-medium: var(--rs-radius-medium); diff --git a/packages/reshaped/src/themes/slate/tailwind.css b/packages/reshaped/src/themes/slate/tailwind.css index e690bf14..9b71bd4e 100644 --- a/packages/reshaped/src/themes/slate/tailwind.css +++ b/packages/reshaped/src/themes/slate/tailwind.css @@ -1,6 +1,7 @@ @theme inline { --background-color-primary: var(--rs-color-background-primary); --background-color-primary-faded: var(--rs-color-background-primary-faded); +--background-color-primary-highlighted: var(--rs-color-background-primary-highlighted); --background-color-primary-highlighted-faded: var(--rs-color-background-primary-highlighted-faded); --border-color-primary: var(--rs-color-border-primary); --outline-color-primary: var(--rs-color-border-primary); @@ -9,6 +10,7 @@ --text-color-primary: var(--rs-color-foreground-primary); --background-color-critical: var(--rs-color-background-critical); --background-color-critical-faded: var(--rs-color-background-critical-faded); +--background-color-critical-highlighted: var(--rs-color-background-critical-highlighted); --background-color-critical-highlighted-faded: var(--rs-color-background-critical-highlighted-faded); --border-color-critical: var(--rs-color-border-critical); --outline-color-critical: var(--rs-color-border-critical); @@ -17,6 +19,7 @@ --text-color-critical: var(--rs-color-foreground-critical); --background-color-warning: var(--rs-color-background-warning); --background-color-warning-faded: var(--rs-color-background-warning-faded); +--background-color-warning-highlighted: var(--rs-color-background-warning-highlighted); --background-color-warning-highlighted-faded: var(--rs-color-background-warning-highlighted-faded); --border-color-warning: var(--rs-color-border-warning); --outline-color-warning: var(--rs-color-border-warning); @@ -25,6 +28,7 @@ --text-color-warning: var(--rs-color-foreground-warning); --background-color-positive: var(--rs-color-background-positive); --background-color-positive-faded: var(--rs-color-background-positive-faded); +--background-color-positive-highlighted: var(--rs-color-background-positive-highlighted); --background-color-positive-highlighted-faded: var(--rs-color-background-positive-highlighted-faded); --border-color-positive: var(--rs-color-border-positive); --outline-color-positive: var(--rs-color-border-positive); @@ -33,6 +37,7 @@ --text-color-positive: var(--rs-color-foreground-positive); --background-color-neutral: var(--rs-color-background-neutral); --background-color-neutral-faded: var(--rs-color-background-neutral-faded); +--background-color-neutral-highlighted: var(--rs-color-background-neutral-highlighted); --background-color-neutral-highlighted-faded: var(--rs-color-background-neutral-highlighted-faded); --border-color-neutral: var(--rs-color-border-neutral); --outline-color-neutral: var(--rs-color-border-neutral); diff --git a/packages/reshaped/src/themes/slate/theme.css b/packages/reshaped/src/themes/slate/theme.css index 1afbfc41..5d120861 100644 --- a/packages/reshaped/src/themes/slate/theme.css +++ b/packages/reshaped/src/themes/slate/theme.css @@ -111,30 +111,35 @@ [data-rs-theme~="slate"][data-rs-color-mode="light"] { --rs-color-background-primary: oklch(0.55 0.24 262.67); --rs-color-background-primary-faded: oklch(0.98 0.02 262.67); +--rs-color-background-primary-highlighted: oklch(0.495 0.24 262.67); --rs-color-background-primary-highlighted-faded: oklch(0.55 0.24 262.67 / 0.06); --rs-color-border-primary: oklch(0.47 0.24 262.67); --rs-color-border-primary-faded: oklch(0.94 0.02 262.67); --rs-color-foreground-primary: oklch(0.52 0.24 262.67); --rs-color-background-critical: oklch(0.59 0.205 20.28); --rs-color-background-critical-faded: oklch(0.98 0.02 20.28); +--rs-color-background-critical-highlighted: oklch(0.531 0.205 20.28); --rs-color-background-critical-highlighted-faded: oklch(0.59 0.205 20.28 / 0.06); --rs-color-border-critical: oklch(0.51 0.205 20.28); --rs-color-border-critical-faded: oklch(0.94 0.02 20.28); --rs-color-foreground-critical: oklch(0.52 0.205 20.28); --rs-color-background-warning: oklch(0.82 0.22 80); --rs-color-background-warning-faded: oklch(0.98 0.04 80); +--rs-color-background-warning-highlighted: oklch(0.738 0.22 80); --rs-color-background-warning-highlighted-faded: oklch(0.82 0.22 80 / 0.06); --rs-color-border-warning: oklch(0.74 0.22 80); --rs-color-border-warning-faded: oklch(0.94 0.04 80); --rs-color-foreground-warning: oklch(0.52 0.22 80); --rs-color-background-positive: oklch(0.55 0.13 151.8); --rs-color-background-positive-faded: oklch(0.98 0.02 151.8); +--rs-color-background-positive-highlighted: oklch(0.495 0.13 151.8); --rs-color-background-positive-highlighted-faded: oklch(0.55 0.13 151.8 / 0.06); --rs-color-border-positive: oklch(0.47 0.13 151.8); --rs-color-border-positive-faded: oklch(0.94 0.02 151.8); --rs-color-foreground-positive: oklch(0.52 0.13 151.8); --rs-color-background-neutral: oklch(0.94 0 89.88); --rs-color-background-neutral-faded: oklch(0 0 89.88 / 0.03); +--rs-color-background-neutral-highlighted: oklch(0.9024 0 89.88); --rs-color-background-neutral-highlighted-faded: oklch(0.94 0 89.88 / 0.48); --rs-color-border-neutral: oklch(0 0 89.88 / 0.12); --rs-color-border-neutral-faded: oklch(0 0 89.88 / 0.08); @@ -151,19 +156,24 @@ --rs-color-background-page-faded: oklch(0.98 0 89.88); --rs-color-rgb-background-primary: 23.536499999999997, 95.6505, 250.1295; --rs-color-rgb-background-primary-faded: 241.332, 248.829, 262.548; +--rs-color-rgb-background-primary-highlighted: 1.3005, 76.449, 230.571; --rs-color-rgb-background-primary-highlighted-faded: 23.536499999999997, 95.6505, 250.1295; --rs-color-rgb-background-critical: 220.473, 49.725, 70.278; --rs-color-rgb-background-critical-faded: 261.936, 243.49949999999998, 242.76; +--rs-color-rgb-background-critical-highlighted: 199.1295, 19.456500000000002, 53.397; --rs-color-rgb-background-critical-highlighted-faded: 220.473, 49.725, 70.278; --rs-color-rgb-background-warning: 268.515, 174.16500000000002, -89.811; --rs-color-rgb-background-warning-faded: 263.0325, 246.20250000000001, 218.86649999999997; +--rs-color-rgb-background-warning-highlighted: 240.18449999999999, 147.3645, -90.831; --rs-color-rgb-background-warning-highlighted-faded: 268.515, 174.16500000000002, -89.811; --rs-color-rgb-background-positive: 34.7565, 134.334, 73.21050000000001; --rs-color-rgb-background-positive-faded: 239.13899999999998, 252.6285, 241.893; +--rs-color-rgb-background-positive-highlighted: 2.295, 117.7335, 57.7065; --rs-color-rgb-background-positive-highlighted-faded: 34.7565, 134.334, 73.21050000000001; --rs-color-on-background-neutral: oklch(0 0 0); --rs-color-rgb-background-neutral: 234.9825, 234.9825, 234.9825; --rs-color-rgb-background-neutral-faded: 0, 0, 0; +--rs-color-rgb-background-neutral-highlighted: 222.58950000000002, 222.58950000000002, 222.58950000000002; --rs-color-rgb-background-neutral-highlighted-faded: 234.9825, 234.9825, 234.9825; --rs-color-rgb-background-disabled: 238.29749999999999, 238.29749999999999, 238.29749999999999; --rs-color-rgb-background-disabled-faded: 248.2935, 248.2935, 248.2935; @@ -181,30 +191,35 @@ [data-rs-theme~="slate"][data-rs-color-mode="dark"] { --rs-color-background-primary: oklch(0.5498 0.192 262.67); --rs-color-background-primary-faded: oklch(0.24 0.0196 262.67); +--rs-color-background-primary-highlighted: oklch(0.5949 0.192 262.67); --rs-color-background-primary-highlighted-faded: oklch(0.5498 0.192 262.67 / 0.08); --rs-color-border-primary: oklch(0.6498 0.192 262.67); --rs-color-border-primary-faded: oklch(0.3 0.0196 262.67); --rs-color-foreground-primary: oklch(0.75 0.204 262.67); --rs-color-background-critical: oklch(0.5842 0.164 20.28); --rs-color-background-critical-faded: oklch(0.24 0.0167 20.28); +--rs-color-background-critical-highlighted: oklch(0.6258 0.164 20.28); --rs-color-background-critical-highlighted-faded: oklch(0.5842 0.164 20.28 / 0.08); --rs-color-border-critical: oklch(0.6842 0.164 20.28); --rs-color-border-critical-faded: oklch(0.3 0.0167 20.28); --rs-color-foreground-critical: oklch(0.75 0.1742 20.28); --rs-color-background-warning: oklch(0.8108 0.176 80); --rs-color-background-warning-faded: oklch(0.24 0.018 80); +--rs-color-background-warning-highlighted: oklch(0.7297 0.176 80); --rs-color-background-warning-highlighted-faded: oklch(0.8108 0.176 80 / 0.08); --rs-color-border-warning: oklch(0.9108 0.176 80); --rs-color-border-warning-faded: oklch(0.3 0.018 80); --rs-color-foreground-warning: oklch(0.75 0.187 80); --rs-color-background-positive: oklch(0.527 0.104 151.8); --rs-color-background-positive-faded: oklch(0.24 0.0106 151.8); +--rs-color-background-positive-highlighted: oklch(0.5743 0.104 151.8); --rs-color-background-positive-highlighted-faded: oklch(0.527 0.104 151.8 / 0.08); --rs-color-border-positive: oklch(0.627 0.104 151.8); --rs-color-border-positive-faded: oklch(0.3 0.0106 151.8); --rs-color-foreground-positive: oklch(0.75 0.1105 151.8); --rs-color-background-neutral: oklch(0.32 0 89.88); --rs-color-background-neutral-faded: oklch(1 0 89.88 / 0.03); +--rs-color-background-neutral-highlighted: oklch(0.3608 0 89.88); --rs-color-background-neutral-highlighted-faded: oklch(0.32 0 89.88 / 0.28); --rs-color-border-neutral: oklch(1 0 89.88 / 0.12); --rs-color-border-neutral-faded: oklch(1 0 89.88 / 0.08); @@ -221,19 +236,24 @@ --rs-color-background-page-faded: oklch(0.18 0 89.88); --rs-color-rgb-background-primary: 47.277, 104.0655, 223.3545; --rs-color-rgb-background-primary-faded: 26.290499999999998, 31.365, 40.749; +--rs-color-rgb-background-primary-highlighted: 60.231, 118.3965, 238.96050000000002; --rs-color-rgb-background-primary-highlighted-faded: 47.277, 104.0655, 223.3545; --rs-color-rgb-background-critical: 202.2405, 73.032, 80.886; --rs-color-rgb-background-critical-faded: 38.76, 28.177500000000002, 27.871499999999997; +--rs-color-rgb-background-critical-highlighted: 216.82649999999998, 86.39399999999999, 92.769; --rs-color-rgb-background-critical-highlighted-faded: 202.2405, 73.032, 80.886; --rs-color-rgb-background-warning: 251.6595, 177.60750000000002, -35.9805; --rs-color-rgb-background-warning-faded: 35.7765, 30.4215, 21.598499999999998; +--rs-color-rgb-background-warning-highlighted: 224.2215, 151.5465, -57.834; --rs-color-rgb-background-warning-highlighted-faded: 251.6595, 177.60750000000002, -35.9805; --rs-color-rgb-background-positive: 52.810500000000005, 123.75150000000001, 75.786; --rs-color-rgb-background-positive-faded: 27.6675, 32.7675, 28.764; +--rs-color-rgb-background-positive-highlighted: 67.6005, 138.0315, 89.12249999999999; --rs-color-rgb-background-positive-highlighted-faded: 52.810500000000005, 123.75150000000001, 75.786; --rs-color-on-background-neutral: oklch(1 0 0); --rs-color-rgb-background-neutral: 50.7195, 50.7195, 50.7195; --rs-color-rgb-background-neutral-faded: 255, 255, 255; +--rs-color-rgb-background-neutral-highlighted: 61.199999999999996, 61.199999999999996, 61.199999999999996; --rs-color-rgb-background-neutral-highlighted-faded: 50.7195, 50.7195, 50.7195; --rs-color-rgb-background-disabled: 40.774499999999996, 40.774499999999996, 40.774499999999996; --rs-color-rgb-background-disabled-faded: 28.815, 28.815, 28.815; diff --git a/packages/reshaped/src/themes/slate/theme.json b/packages/reshaped/src/themes/slate/theme.json index d3c07ecf..d33491cd 100644 --- a/packages/reshaped/src/themes/slate/theme.json +++ b/packages/reshaped/src/themes/slate/theme.json @@ -32,6 +32,22 @@ "hex": "#f1f9ff", "hexDark": "#1a1f29" }, + "backgroundPrimaryHighlighted": { + "oklch": { + "l": 0.49500000000000005, + "c": 0.24, + "h": 262.67, + "mode": "oklch" + }, + "oklchDark": { + "l": 0.594856, + "c": 0.192, + "h": 262.67, + "mode": "oklch" + }, + "hex": "#014ce7", + "hexDark": "#3c76ef" + }, "backgroundPrimaryHighlightedFaded": { "oklch": { "l": 0.55, @@ -130,6 +146,22 @@ "hex": "#fff3f3", "hexDark": "#271c1c" }, + "backgroundCriticalHighlighted": { + "oklch": { + "l": 0.5309999999999999, + "c": 0.205, + "h": 20.28, + "mode": "oklch" + }, + "oklchDark": { + "l": 0.6257512000000001, + "c": 0.164, + "h": 20.28, + "mode": "oklch" + }, + "hex": "#c71335", + "hexDark": "#d9565d" + }, "backgroundCriticalHighlightedFaded": { "oklch": { "l": 0.59, @@ -228,6 +260,22 @@ "hex": "#fff6db", "hexDark": "#241e16" }, + "backgroundWarningHighlighted": { + "oklch": { + "l": 0.738, + "c": 0.22, + "h": 80, + "mode": "oklch" + }, + "oklchDark": { + "l": 0.7297056, + "c": 0.17600000000000002, + "h": 80, + "mode": "oklch" + }, + "hex": "#f09300", + "hexDark": "#e09800" + }, "backgroundWarningHighlightedFaded": { "oklch": { "l": 0.82, @@ -326,6 +374,22 @@ "hex": "#effdf2", "hexDark": "#1c211d" }, + "backgroundPositiveHighlighted": { + "oklch": { + "l": 0.49500000000000005, + "c": 0.13, + "h": 151.8, + "mode": "oklch" + }, + "oklchDark": { + "l": 0.574264, + "c": 0.10400000000000001, + "h": 151.8, + "mode": "oklch" + }, + "hex": "#02763a", + "hexDark": "#448a59" + }, "backgroundPositiveHighlightedFaded": { "oklch": { "l": 0.55, @@ -426,6 +490,22 @@ "hex": "#00000008", "hexDark": "#ffffff08" }, + "backgroundNeutralHighlighted": { + "oklch": { + "l": 0.9024, + "c": 0, + "h": 89.88, + "mode": "oklch" + }, + "oklchDark": { + "l": 0.3608, + "c": 0, + "h": 89.88, + "mode": "oklch" + }, + "hex": "#dfdfdf", + "hexDark": "#3d3d3d" + }, "backgroundNeutralHighlightedFaded": { "oklch": { "l": 0.94, @@ -705,6 +785,10 @@ "hex": "241.332, 248.829, 262.548", "hexDark": "26.290499999999998, 31.365, 40.749" }, + "rgbBackgroundPrimaryHighlighted": { + "hex": "1.3005, 76.449, 230.571", + "hexDark": "60.231, 118.3965, 238.96050000000002" + }, "rgbBackgroundPrimaryHighlightedFaded": { "hex": "23.536499999999997, 95.6505, 250.1295", "hexDark": "47.277, 104.0655, 223.3545" @@ -731,6 +815,10 @@ "hex": "261.936, 243.49949999999998, 242.76", "hexDark": "38.76, 28.177500000000002, 27.871499999999997" }, + "rgbBackgroundCriticalHighlighted": { + "hex": "199.1295, 19.456500000000002, 53.397", + "hexDark": "216.82649999999998, 86.39399999999999, 92.769" + }, "rgbBackgroundCriticalHighlightedFaded": { "hex": "220.473, 49.725, 70.278", "hexDark": "202.2405, 73.032, 80.886" @@ -757,6 +845,10 @@ "hex": "263.0325, 246.20250000000001, 218.86649999999997", "hexDark": "35.7765, 30.4215, 21.598499999999998" }, + "rgbBackgroundWarningHighlighted": { + "hex": "240.18449999999999, 147.3645, -90.831", + "hexDark": "224.2215, 151.5465, -57.834" + }, "rgbBackgroundWarningHighlightedFaded": { "hex": "268.515, 174.16500000000002, -89.811", "hexDark": "251.6595, 177.60750000000002, -35.9805" @@ -783,6 +875,10 @@ "hex": "239.13899999999998, 252.6285, 241.893", "hexDark": "27.6675, 32.7675, 28.764" }, + "rgbBackgroundPositiveHighlighted": { + "hex": "2.295, 117.7335, 57.7065", + "hexDark": "67.6005, 138.0315, 89.12249999999999" + }, "rgbBackgroundPositiveHighlightedFaded": { "hex": "34.7565, 134.334, 73.21050000000001", "hexDark": "52.810500000000005, 123.75150000000001, 75.786" @@ -809,6 +905,10 @@ "hex": "0, 0, 0", "hexDark": "255, 255, 255" }, + "rgbBackgroundNeutralHighlighted": { + "hex": "222.58950000000002, 222.58950000000002, 222.58950000000002", + "hexDark": "61.199999999999996, 61.199999999999996, 61.199999999999996" + }, "rgbBackgroundNeutralHighlightedFaded": { "hex": "234.9825, 234.9825, 234.9825", "hexDark": "50.7195, 50.7195, 50.7195" diff --git a/packages/theming/src/generation/definitions/figma.ts b/packages/theming/src/generation/definitions/figma.ts index 18a074a3..ff61d7f2 100644 --- a/packages/theming/src/generation/definitions/figma.ts +++ b/packages/theming/src/generation/definitions/figma.ts @@ -114,20 +114,25 @@ const theme: Partial = { backgroundNeutral: { hex: "#DFE2EA", hexDark: "#444444" }, backgroundNeutralFaded: { hex: "#F5F5F5", hexDark: "#383838" }, + backgroundNeutralHighlighted: { hex: "#C8CED9", hexDark: "#4D4D4D" }, backgroundNeutralHighlightedFaded: { hex: "#DFE2EA66", hexDark: "#44444466" }, backgroundDisabled: { hex: "#e4e4e4", hexDark: "#474747" }, backgroundDisabledFaded: { hex: "#F5F5F5", hexDark: "#3A3A3A" }, backgroundPrimary: { hex: "#0D99FF", hexDark: "#0C8CE9" }, backgroundPrimaryFaded: { hex: "#E5F4FF", hexDark: "#394360" }, + backgroundPrimaryHighlighted: { hex: "#39ADFF", hexDark: "#39A2F2" }, backgroundPrimaryHighlightedFaded: { hex: "#0D99FF0F", hexDark: "#0C8CE90F" }, backgroundPositive: { hex: "#14AE5C", hexDark: "#198F51" }, backgroundPositiveFaded: { hex: "#DAECDF", hexDark: "#3d5749" }, + backgroundPositiveHighlighted: { hex: "#79D297", hexDark: "#76C28B" }, backgroundPositiveHighlightedFaded: { hex: "#14AE5C0F", hexDark: "#198F510F" }, backgroundCritical: { hex: "#F24822", hexDark: "#E03E1A" }, backgroundCriticalFaded: { hex: "#FFE2E0", hexDark: "#60332A" }, + backgroundCriticalHighlighted: { hex: "#FCA397", hexDark: "#F8978B" }, backgroundCriticalHighlightedFaded: { hex: "#F248220F", hexDark: "#E03E1A0F" }, backgroundWarning: { hex: "#facc15", hexDark: "#f1c512" }, backgroundWarningFaded: { hex: "#fffae9", hexDark: "#2c271f" }, + backgroundWarningHighlighted: { hex: "#B4920A", hexDark: "#A98909" }, backgroundWarningHighlightedFaded: { hex: "#facc150F", hexDark: "#f1c5120F" }, borderNeutral: { hex: "#E6E6E6", hexDark: "#444444" }, diff --git a/packages/theming/src/generation/tokens/color/color.types.ts b/packages/theming/src/generation/tokens/color/color.types.ts index 765af178..8fb08904 100644 --- a/packages/theming/src/generation/tokens/color/color.types.ts +++ b/packages/theming/src/generation/tokens/color/color.types.ts @@ -23,20 +23,25 @@ export type Name = | "borderPositiveFaded" | "backgroundNeutral" | "backgroundNeutralFaded" + | "backgroundNeutralHighlighted" | "backgroundNeutralHighlightedFaded" | "backgroundDisabled" | "backgroundDisabledFaded" | "backgroundPrimary" | "backgroundPrimaryFaded" + | "backgroundPrimaryHighlighted" | "backgroundPrimaryHighlightedFaded" | "backgroundCritical" | "backgroundCriticalFaded" + | "backgroundCriticalHighlighted" | "backgroundCriticalHighlightedFaded" | "backgroundWarning" | "backgroundWarningFaded" + | "backgroundWarningHighlighted" | "backgroundWarningHighlightedFaded" | "backgroundPositive" | "backgroundPositiveFaded" + | "backgroundPositiveHighlighted" | "backgroundPositiveHighlightedFaded" | "backgroundPage" | "backgroundPageFaded" diff --git a/packages/theming/src/generation/tokens/color/utilities/generateColors.ts b/packages/theming/src/generation/tokens/color/utilities/generateColors.ts index 1667a444..febe39ec 100644 --- a/packages/theming/src/generation/tokens/color/utilities/generateColors.ts +++ b/packages/theming/src/generation/tokens/color/utilities/generateColors.ts @@ -62,6 +62,21 @@ const getDarkModeColor = (lch: OklchColor) => { return { ...lch, c: c * 0.8, l: clampedDarkL }; }; +const adjustLightnessByForegroundDirection = ( + background: OklchColor, + foregroundLightness: number, + amount: number +) => { + if (foregroundLightness === background.l) return background; + + const isForegroundLighter = foregroundLightness > background.l; + const l = isForegroundLighter + ? background.l + (1 - background.l) * amount + : background.l - background.l * amount; + + return { ...background, l }; +}; + const generateColorValues = ( key: string, token: ColorValue @@ -90,11 +105,21 @@ const generateColorValues = ( c: bgDark.c / 9.8, }; + const fgLightness = neutral ? 0.24 : 0.52; + const fgDarkLightness = neutral ? 0.96 : 0.75; + const bgHighlighted = adjustLightnessByForegroundDirection(bg, fgLightness, neutral ? 0.04 : 0.1); + const bgHighlightedDark = adjustLightnessByForegroundDirection( + bgDark, + fgDarkLightness, + neutral ? 0.06 : 0.1 + ); const bgHighlightedFaded = neutral ? { ...bg, alpha: 0.48 } : { ...bg, alpha: 0.06 }; const bgHighlightedFadedDark = neutral ? { ...bgDark, alpha: 0.28 } : { ...bgDark, alpha: 0.08 }; - const fg = neutral ? { ...bg, l: 0.24 } : { ...bg, l: 0.52 }; - const fgDark = neutral ? { ...bgDark, l: 0.96 } : { ...bgDark, l: 0.75, c: bg.c * 0.85 }; + const fg = { ...bg, l: fgLightness }; + const fgDark = neutral + ? { ...bgDark, l: fgDarkLightness } + : { ...bgDark, l: fgDarkLightness, c: bg.c * 0.85 }; const bd = neutral ? { ...bg, l: 0, alpha: 0.12 } : { ...bg, l: bg.l - 0.08 }; const bdDark = neutral ? { ...bgDark, l: 1, alpha: 0.12 } : { ...bgDark, l: bgDark.l + 0.1 }; @@ -112,6 +137,10 @@ const generateColorValues = ( oklch: bgFaded, oklchDark: bgFadedDark, }, + [`background${capitalizedKey}Highlighted`]: { + oklch: bgHighlighted, + oklchDark: bgHighlightedDark, + }, [`background${capitalizedKey}HighlightedFaded`]: { oklch: bgHighlightedFaded, oklchDark: bgHighlightedFadedDark, From 1fce40361727311a01b22ff70f10434ab30f16d0 Mon Sep 17 00:00:00 2001 From: Dmitry Belyaev Date: Sun, 22 Mar 2026 19:14:57 +0100 Subject: [PATCH 18/75] v4: button, hotkey --- .changeset/four-cases-slide.md | 5 + .changeset/late-zebras-push.md | 5 + .changeset/silly-plums-ask.md | 5 + .changeset/tasty-animals-drive.md | 5 + .../components/Badge/tests/Badge.stories.tsx | 3 + .../src/components/Button/Button.module.css | 132 ++++++++++-------- .../Button/tests/Button.stories.tsx | 15 +- .../src/components/Hotkey/Hotkey.module.css | 16 --- .../reshaped/src/components/Hotkey/Hotkey.tsx | 29 ---- .../src/components/Hotkey/Hotkey.types.ts | 13 -- .../reshaped/src/components/Hotkey/index.ts | 2 - .../Hotkey/tests/Hotkey.stories.tsx | 70 ---------- .../ProgressBar/ProgressBar.module.css | 2 +- 13 files changed, 105 insertions(+), 197 deletions(-) create mode 100644 .changeset/four-cases-slide.md create mode 100644 .changeset/late-zebras-push.md create mode 100644 .changeset/silly-plums-ask.md create mode 100644 .changeset/tasty-animals-drive.md delete mode 100644 packages/reshaped/src/components/Hotkey/Hotkey.module.css delete mode 100644 packages/reshaped/src/components/Hotkey/Hotkey.tsx delete mode 100644 packages/reshaped/src/components/Hotkey/Hotkey.types.ts delete mode 100644 packages/reshaped/src/components/Hotkey/index.ts delete mode 100644 packages/reshaped/src/components/Hotkey/tests/Hotkey.stories.tsx diff --git a/.changeset/four-cases-slide.md b/.changeset/four-cases-slide.md new file mode 100644 index 00000000..2925e543 --- /dev/null +++ b/.changeset/four-cases-slide.md @@ -0,0 +1,5 @@ +--- +"reshaped": major +--- + +Button: Removed faded variant diff --git a/.changeset/late-zebras-push.md b/.changeset/late-zebras-push.md new file mode 100644 index 00000000..64126088 --- /dev/null +++ b/.changeset/late-zebras-push.md @@ -0,0 +1,5 @@ +--- +"reshaped": minor +--- + +Button: Updated colors for the outline button, improved spacing and button group styles diff --git a/.changeset/silly-plums-ask.md b/.changeset/silly-plums-ask.md new file mode 100644 index 00000000..34fead2f --- /dev/null +++ b/.changeset/silly-plums-ask.md @@ -0,0 +1,5 @@ +--- +"reshaped": major +--- + +Hokey: Deleted component in favor of using Badge diff --git a/.changeset/tasty-animals-drive.md b/.changeset/tasty-animals-drive.md new file mode 100644 index 00000000..a28afe96 --- /dev/null +++ b/.changeset/tasty-animals-drive.md @@ -0,0 +1,5 @@ +--- +"reshaped": major +--- + +Button: Renamed elevated to raised diff --git a/packages/reshaped/src/components/Badge/tests/Badge.stories.tsx b/packages/reshaped/src/components/Badge/tests/Badge.stories.tsx index d8023365..3670bf82 100644 --- a/packages/reshaped/src/components/Badge/tests/Badge.stories.tsx +++ b/packages/reshaped/src/components/Badge/tests/Badge.stories.tsx @@ -239,6 +239,9 @@ export const highlighted = { + + Badge + Badge diff --git a/packages/reshaped/src/components/Button/Button.module.css b/packages/reshaped/src/components/Button/Button.module.css index b2712b63..44d5f453 100644 --- a/packages/reshaped/src/components/Button/Button.module.css +++ b/packages/reshaped/src/components/Button/Button.module.css @@ -6,10 +6,9 @@ /* Using --rs-button-p and --rs-p to dynamically reassign --rs-p for all sizes of ghost buttons, used by Aligner */ --rs-p-v: var(--rs-button-p-v); --rs-p-h: var(--rs-button-p-h); - --rs-button-border-color: transparent; transition: var(--rs-duration-fast) var(--rs-easing-standard); - transition-property: background-color, box-shadow, border-color, color, transform; + transition-property: background-color, box-shadow, border-color, color, transform, opacity; padding: var(--rs-unit-x1) var(--rs-p-h); border-radius: var(--rs-button-radius); cursor: pointer; @@ -204,6 +203,7 @@ --rs-button-border-width: 0px; &.--color-neutral { + --rs-button-group-separator-color: var(--rs-color-border-neutral-faded); --rs-button-background-color: var(--rs-color-background-neutral); --rs-button-highlight-color: var(--rs-color-background-neutral-highlighted); --rs-button-color: var(--rs-color-on-background-neutral); @@ -211,6 +211,7 @@ @each $color in primary, critical, positive { &.--color-$(color) { + --rs-button-group-separator-color: var(--rs-color-border-$(color)); --rs-button-background-color: var(--rs-color-background-$(color)); --rs-button-highlight-color: var(--rs-color-background-$(color)-highlighted); --rs-button-color: var(--rs-color-on-background-$(color)); @@ -218,6 +219,7 @@ } &.--color-media { + --rs-button-group-separator-color: rgba(var(--rs-color-rgb-white), 0.12); --rs-button-color: var(--rs-color-white); --rs-button-background-color: rgb(var(--rs-color-rgb-black), 0.28); --rs-button-highlight-color: rgb(var(--rs-color-rgb-black), 0.36); @@ -232,7 +234,7 @@ position: absolute; pointer-events: none; border-radius: inherit; - z-index: var(--rs-z-index-relative); + z-index: calc(var(--rs-z-index-relative) - 1); inset: 0; border: var(--rs-button-border-width) solid var(--rs-color-border-neutral); } @@ -243,6 +245,7 @@ @each $color in neutral, primary, critical, positive { &.--color-$(color) { + --rs-button-group-separator-color: var(--rs-color-border-neutral); --rs-button-color: var(--rs-color-foreground-$(color)); --rs-button-background-color: var(--rs-color-background-elevation-base); --rs-button-highlight-color: var(--rs-color-background-neutral-highlighted-faded); @@ -250,6 +253,7 @@ } &.--color-inherit { + --rs-button-group-separator-color: var(--rs-color-border-neutral); --rs-button-color: currentcolor; --rs-button-background-color: var(--rs-color-background-elevation-base); --rs-button-highlight-color: var(--rs-color-background-neutral-highlighted-faded); @@ -261,6 +265,7 @@ @each $color in neutral, primary, critical, positive { &.--color-$(color) { + --rs-button-group-separator-color: var(--rs-color-border-neutral-faded); --rs-button-color: var(--rs-color-foreground-$(color)); --rs-button-background-color: transparent; --rs-button-highlight-color: var(--rs-color-background-$(color)-highlighted-faded); @@ -268,6 +273,7 @@ } &.--color-inherit { + --rs-button-group-separator-color: var(--rs-color-border-neutral-faded); --rs-button-color: inherit; --rs-button-highlight-color: currentcolor; @@ -350,21 +356,59 @@ /* Button group */ .group { - display: flex; + display: inline-flex; + position: relative; + + &:has(.--full-width) { + display: flex; + } + + &:has(.--variant-outline) { + &::before, &::after { + border-radius: var(--rs-radius-medium); + } + + &:has(.--size-small) { + border-radius: var(--rs-radius-small); + } + + &::before { + content: ""; + position: absolute; + pointer-events: none; + z-index: var(--rs-z-index-relative); + inset: 0; + border: 1px solid var(--rs-color-border-neutral); + border-radius: 6px; + } + + &::after { + content: ""; + position: absolute; + inset: 1px; + pointer-events: none; + border-radius: inherit; + z-index: var(--rs-z-index-relative); + } + } } .group .root { flex-shrink: 0; width: auto; + &:active { + transform: scale(1); + } + &, - &::before { + & .highlight { border-radius: 0; } &:first-child { &, - &::before { + & .highlight { border-start-start-radius: var(--rs-button-radius); border-end-start-radius: var(--rs-button-radius); } @@ -372,73 +416,37 @@ &:last-child { &, - &::before { + & .highlight { border-start-end-radius: var(--rs-button-radius); border-end-end-radius: var(--rs-button-radius); } } - &:not(:first-child) { - border-inline-start: 1px solid var(--rs-button-group-separator-color); - - /* Compensate left separator width so label alignment doesn't shift */ - padding-inline-start: calc(var(--rs-p-h) - 1px); - } - - &:not(:last-child) { - border-inline-end: 0; - border-inline-end: 0 solid var(--rs-button-group-separator-color); - - /* Keep internal horizontal space equal across grouped variants */ - padding-inline-end: var(--rs-p-h); - } - - &.--highlighted:not(:last-child) { - &::after { - content: ""; - position: absolute; - inset-block: 0; - inset-inline-end: -1px; - pointer-events: none; - border-inline-end: 1px solid var(--rs-button-group-separator-color); - } - - & + .root { - border-inline-start-width: 0; - - /* Keep text position stable after removing the 1px group separator */ - padding-inline-start: var(--rs-p-h); - } - } - - @each $color in neutral, positive, critical, primary { - &.--variant-solid.--color-$(color) { - --rs-button-group-separator-color: transparent; - } - } - - &.--variant-outline.--color-neutral { - --rs-button-group-separator-color: var(--rs-color-border-neutral); - } - - @each $color in positive, critical, primary { - &.--variant-outline.--color-$(color) { - --rs-button-group-separator-color: var(--rs-color-border-neutral); - } + /* Reset outline border */ + &::before { + border: none; + inset-inline-end: auto; + border-radius: 0; + transition: background-color var(--rs-duration-fast) var(--rs-easing-standard); } - @each $color in neutral, positive, critical, primary { - &.--variant-ghost.--color-$(color) { - --rs-button-group-separator-color: var(--rs-color-border-$(color)-faded); - } + /* Reset outline shadow */ + &::after { + content: none; } - &.--variant-solid.--color-media { - --rs-button-group-separator-color: rgba(var(--rs-color-rgb-white), 0.12); + &:not(:first-child)::before { + content: ''; + position: absolute; + width: 1px; + inset-block: var(--rs-unit-x1); + inset-inline-start: -0.5px; + border-radius: var(--rs-radius-circular); + background-color: var(--rs-button-group-separator-color); } - &.--disabled { - --rs-button-group-separator-color: var(--rs-color-border-disabled) !important; + &.--variant-outline { + background: transparent; } &.--full-width { diff --git a/packages/reshaped/src/components/Button/tests/Button.stories.tsx b/packages/reshaped/src/components/Button/tests/Button.stories.tsx index 9338521c..f70a5c91 100644 --- a/packages/reshaped/src/components/Button/tests/Button.stories.tsx +++ b/packages/reshaped/src/components/Button/tests/Button.stories.tsx @@ -714,18 +714,25 @@ export const group: StoryObj = { - - {(["neutral", "primary", "critical", "positive", "media"] as const).map((color) => ( + + {(["neutral", "primary", "critical", "positive"] as const).map((color) => ( ))} + + + + + + + - + {(["neutral", "primary", "critical", "positive"] as const).map((color) => (