From 3cb058c105b176f93f203a138a6b22c4d2c344e0 Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Fri, 3 Nov 2023 10:30:29 -0400 Subject: [PATCH] [HOP-62] Inject Design Tokens hashed per version (#79) --- .storybook/main.ts | 35 +- .stylelintignore | 3 + apps/docs/package.json | 4 +- jest.config.ts | 17 + package.json | 4 +- packages/components/package.json | 65 + .../src/HopperProvider/src/HopperProvider.tsx | 17 + .../src/HopperProvider/src/index.ts | 1 + .../chromatic/HopperProvider.stories.tsx | 56 + packages/components/src/index.ts | 1 + packages/components/tsconfig.json | 10 + packages/components/tsup.build.ts | 14 + packages/components/tsup.dev.ts | 13 + packages/styled-system/.eslintrc.json | 5 + packages/styled-system/README.md | 19 + packages/styled-system/jest-setup.ts | 1 + packages/styled-system/jest.config.ts | 22 + packages/styled-system/package.json | 65 + .../src/StyledSystemProvider.tsx | 46 + .../src/global-styles/BodyStyleProvider.tsx | 78 + packages/styled-system/src/index.ts | 14 + .../src/styled-system-root-css-class.ts | 7 + .../src/tokens/TokenProvider.tsx | 50 + .../tokens/generated/dark-semantic-tokens.ts | 257 ++ .../src/tokens/generated/light-tokens.ts | 608 +++++ packages/styled-system/src/tokens/tokens.ts | 11 + packages/styled-system/src/utils/assertion.ts | 59 + packages/styled-system/src/utils/clsx.ts | 53 + .../src/utils/useInsertStyleElement.ts | 30 + .../src/utils/useIsomorphicInsertionEffect.ts | 14 + .../src/utils/useIsomorphicLayoutEffect.ts | 14 + .../src/utils/useThemeComputedStyle.ts | 30 + packages/styled-system/swc.jest.ts | 5 + packages/styled-system/tsconfig.json | 9 + packages/styled-system/tsup.build.ts | 14 + packages/styled-system/tsup.dev.ts | 13 + pnpm-lock.yaml | 2175 +++++++++++++++-- stories/assets/code-brackets.svg | 1 - stories/assets/colors.svg | 1 - stories/assets/comments.svg | 1 - stories/assets/direction.svg | 1 - stories/assets/flow.svg | 1 - stories/assets/plugin.svg | 1 - stories/assets/repo.svg | 1 - stories/assets/stackalt.svg | 1 - tsconfig.json | 11 + 46 files changed, 3591 insertions(+), 267 deletions(-) create mode 100644 jest.config.ts create mode 100644 packages/components/package.json create mode 100644 packages/components/src/HopperProvider/src/HopperProvider.tsx create mode 100644 packages/components/src/HopperProvider/src/index.ts create mode 100644 packages/components/src/HopperProvider/tests/chromatic/HopperProvider.stories.tsx create mode 100644 packages/components/src/index.ts create mode 100644 packages/components/tsconfig.json create mode 100644 packages/components/tsup.build.ts create mode 100644 packages/components/tsup.dev.ts create mode 100644 packages/styled-system/.eslintrc.json create mode 100644 packages/styled-system/README.md create mode 100644 packages/styled-system/jest-setup.ts create mode 100644 packages/styled-system/jest.config.ts create mode 100644 packages/styled-system/package.json create mode 100644 packages/styled-system/src/StyledSystemProvider.tsx create mode 100644 packages/styled-system/src/global-styles/BodyStyleProvider.tsx create mode 100644 packages/styled-system/src/index.ts create mode 100644 packages/styled-system/src/styled-system-root-css-class.ts create mode 100644 packages/styled-system/src/tokens/TokenProvider.tsx create mode 100644 packages/styled-system/src/tokens/generated/dark-semantic-tokens.ts create mode 100644 packages/styled-system/src/tokens/generated/light-tokens.ts create mode 100644 packages/styled-system/src/tokens/tokens.ts create mode 100644 packages/styled-system/src/utils/assertion.ts create mode 100644 packages/styled-system/src/utils/clsx.ts create mode 100644 packages/styled-system/src/utils/useInsertStyleElement.ts create mode 100644 packages/styled-system/src/utils/useIsomorphicInsertionEffect.ts create mode 100644 packages/styled-system/src/utils/useIsomorphicLayoutEffect.ts create mode 100644 packages/styled-system/src/utils/useThemeComputedStyle.ts create mode 100644 packages/styled-system/swc.jest.ts create mode 100644 packages/styled-system/tsconfig.json create mode 100644 packages/styled-system/tsup.build.ts create mode 100644 packages/styled-system/tsup.dev.ts delete mode 100644 stories/assets/code-brackets.svg delete mode 100644 stories/assets/colors.svg delete mode 100644 stories/assets/comments.svg delete mode 100644 stories/assets/direction.svg delete mode 100644 stories/assets/flow.svg delete mode 100644 stories/assets/plugin.svg delete mode 100644 stories/assets/repo.svg delete mode 100644 stories/assets/stackalt.svg create mode 100644 tsconfig.json diff --git a/.storybook/main.ts b/.storybook/main.ts index b64cf8af3..a653e2b2a 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,18 +1,16 @@ import type { StorybookConfig } from "@storybook/react-vite"; import { mergeConfig } from "vite"; import turbosnap from "vite-plugin-turbosnap"; - +import tsconfigPaths from "vite-tsconfig-paths"; const storybookConfig: StorybookConfig = { stories: [ - "../packages/**/*.stories.@(ts|tsx)", - "../stories/**/*.stories.@(js|jsx|ts|tsx)" + "../packages/**/*.stories.@(ts|tsx)" ], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", - "@storybook/addon-interactions", - "@storybook/addon-mdx-gfm" + "@storybook/addon-interactions" ], framework: { name: "@storybook/react-vite", @@ -22,19 +20,22 @@ const storybookConfig: StorybookConfig = { autodocs: "tag" }, async viteFinal(config, { configType }) { + const plugins = [tsconfigPaths()]; + + if (configType === "PRODUCTION") { + plugins.push( + // TurboSnap only officially support webpack (https://www.chromatic.com/docs/turbosnap/#prerequisites) + // This plugin is suggested by storybook and maintained by a core storybook contributor. + // This is experimental, and may not support all project and storybook configurations, yet. + turbosnap({ + // This should be the base path of your storybook. In monorepos, you may only need process.cwd(). + rootDir: config.root ?? process.cwd() + }) + ); + } + return mergeConfig(config, { - plugins: - configType === "PRODUCTION" - ? [ - // TurboSnap only officially support webpack (https://www.chromatic.com/docs/turbosnap/#prerequisites) - // This plugin is suggested by storybook and maintained by a core storybook contributor. - // This is experimental, and may not support all project and storybook configurations, yet. - turbosnap({ - // This should be the base path of your storybook. In monorepos, you may only need process.cwd(). - rootDir: config.root ?? process.cwd() - }) - ] - : [] + plugins }); } }; diff --git a/.stylelintignore b/.stylelintignore index 316081f0f..4633defcb 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -2,3 +2,6 @@ stories # crach after runing packages/tokens/dist + +node_modules +dist diff --git a/apps/docs/package.json b/apps/docs/package.json index 470e52961..b8de904d8 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -33,8 +33,8 @@ "@storybook/react": "7.5.1", "@storybook/testing-library": "0.2.2", "@svgr/webpack": "8.1.0", - "@types/node": "20.8.8", - "@types/react": "18.2.31", + "@types/node": "20.8.9", + "@types/react": "18.2.32", "@types/react-dom": "18.2.14", "classnames": "2.3.2", "eslint": "8.52.0", diff --git a/jest.config.ts b/jest.config.ts new file mode 100644 index 000000000..fc50b019b --- /dev/null +++ b/jest.config.ts @@ -0,0 +1,17 @@ +import type { Config } from "jest"; + +const config: Config = { + // projects: [ + // "/packages/*" + // ], + "transform": { + "^.+\\.(ts|tsx|js|jsx)$": "ts-jest" + }, + testRegex: "/tests/jest/.*\\.test\\.(ts|tsx)$", + testPathIgnorePatterns: ["/node_modules/", "/dist/"], + cacheDirectory: "./node_modules/.cache/jest", + clearMocks: true + // verbose: true +}; + +export default config; diff --git a/package.json b/package.json index d9f0aeec9..e3538c7d2 100644 --- a/package.json +++ b/package.json @@ -55,8 +55,10 @@ "prop-types": "15.8.1", "react": "18.2.0", "react-dom": "18.2.0", + "ts-jest": "29.1.1", "stylelint": "15.11.0", - "vite-plugin-turbosnap": "1.0.3" + "vite-plugin-turbosnap": "1.0.3", + "vite-tsconfig-paths": "4.2.1" }, "bugs": { "url": "https://github.com/gsoft-inc/wl-hopper/issues" diff --git a/packages/components/package.json b/packages/components/package.json new file mode 100644 index 000000000..65e001e6c --- /dev/null +++ b/packages/components/package.json @@ -0,0 +1,65 @@ +{ + "name": "@hopper-ui/components", + "author": "Workleap", + "version": "0.0.0", + "description": "The components package.", + "license": "Apache-2.0", + "repository": { + "type": "git", + "url": "git+https://github.com/gsoft-inc/wl-hopper.git", + "directory": "packages/components" + }, + "publishConfig": { + "access": "public", + "provenance": true + }, + "type": "module", + "sideEffects": [ + "*.css" + ], + "exports": "./dist/index.js", + "types": "./dist/index.d.ts", + "files": [ + "/dist", + "CHANGELOG.md", + "README.md" + ], + "scripts": { + "dev": "tsup --config ./tsup.dev.ts", + "build": "tsup --config ./tsup.build.ts", + "test": "jest" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + }, + "dependencies": { + "@hopper-ui/styled-system": "workspace:*" + }, + "devDependencies": { + "@swc/core": "1.3.95", + "@swc/helpers": "0.5.3", + "@swc/jest": "0.2.29", + "@testing-library/jest-dom": "6.1.4", + "@testing-library/react": "14.0.0", + "@types/jest": "29.5.6", + "@types/react": "18.2.32", + "@types/react-dom": "18.2.14", + "@types/react-test-renderer": "18.0.5", + "@workleap/eslint-plugin": "3.0.0", + "@workleap/swc-configs": "2.1.2", + "@workleap/typescript-configs": "3.0.2", + "jest": "29.7.0", + "jest-environment-jsdom": "29.7.0", + "react": "18.2.0", + "react-dom": "18.2.0", + "react-test-renderer": "18.2.0", + "ts-jest": "29.1.1", + "ts-node": "10.9.1", + "tsup": "7.2.0", + "typescript": "5.2.2" + }, + "engines": { + "node": ">=18.0.0" + } +} diff --git a/packages/components/src/HopperProvider/src/HopperProvider.tsx b/packages/components/src/HopperProvider/src/HopperProvider.tsx new file mode 100644 index 000000000..457b31ab2 --- /dev/null +++ b/packages/components/src/HopperProvider/src/HopperProvider.tsx @@ -0,0 +1,17 @@ +import { StyledSystemProvider, type StyledSystemProviderProps } from "@hopper-ui/styled-system"; + +export type HopperProviderProps = StyledSystemProviderProps; + +/** + * HopperProvider is required to be rendered at the root of your application. It is responsible for: + * - Adding CSS variables to the document + * - Managing color scheme (light, dark, auto) + * - Optionally adding body styles to the document + */ +export function HopperProvider({ children, withBodyStyle = false, colorScheme = "light", withCssVariables = true, ...rest }: HopperProviderProps) { + return ( + + {children} + + ); +} diff --git a/packages/components/src/HopperProvider/src/index.ts b/packages/components/src/HopperProvider/src/index.ts new file mode 100644 index 000000000..dafb5ba82 --- /dev/null +++ b/packages/components/src/HopperProvider/src/index.ts @@ -0,0 +1 @@ +export * from "./HopperProvider.tsx"; diff --git a/packages/components/src/HopperProvider/tests/chromatic/HopperProvider.stories.tsx b/packages/components/src/HopperProvider/tests/chromatic/HopperProvider.stories.tsx new file mode 100644 index 000000000..960eeca80 --- /dev/null +++ b/packages/components/src/HopperProvider/tests/chromatic/HopperProvider.stories.tsx @@ -0,0 +1,56 @@ +import { HopperProvider } from "@hopper-ui/components"; +import type { HopperCssVar } from "@hopper-ui/styled-system"; +import type { Meta, StoryObj } from "@storybook/react"; + +export default { + title: "Components/HopperProvider", + component: HopperProvider +} as Meta; + +type HopperProviderStory = StoryObj; + +const ColoredDiv = () => { + return ( +
Hello
+ ); +}; + +export const Light: HopperProviderStory = { + name: "light", + render: () => ( + + + + ) +}; + +export const Dark: HopperProviderStory = { + name: "dark", + render: () => ( + + + + ) +}; + +export const WithBodyStyles: HopperProviderStory = { + name: "with body styles", + render: () => ( + + + + ) +}; + +export const DarkWithBodyStyles: HopperProviderStory = { + name: "dark with body styles", + render: () => ( + + + + ) +}; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts new file mode 100644 index 000000000..527e244ee --- /dev/null +++ b/packages/components/src/index.ts @@ -0,0 +1 @@ +export * from "./HopperProvider/src/index.ts"; diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json new file mode 100644 index 000000000..32a819db3 --- /dev/null +++ b/packages/components/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@workleap/typescript-configs/library.json", + "exclude": ["dist", "node_modules"], + "compilerOptions": { + "paths": { + "@hopper-ui/styled-system": ["../styled-system/src/index.ts"], + "@hopper-ui/components": ["./src/HopperProvider/src/index.ts"] + } + } +} diff --git a/packages/components/tsup.build.ts b/packages/components/tsup.build.ts new file mode 100644 index 000000000..a6068f649 --- /dev/null +++ b/packages/components/tsup.build.ts @@ -0,0 +1,14 @@ +import { defineConfig } from "tsup"; + +export default defineConfig({ + dts: true, + clean: true, + minify: true, + splitting: false, + treeshake: true, + entry: ["./src/**/src/*"], + outDir: "./dist", + format: ["esm"], + target: "esnext", + platform: "browser" +}); diff --git a/packages/components/tsup.dev.ts b/packages/components/tsup.dev.ts new file mode 100644 index 000000000..dcf467828 --- /dev/null +++ b/packages/components/tsup.dev.ts @@ -0,0 +1,13 @@ +import { defineConfig } from "tsup"; + +export default defineConfig({ + dts: true, + splitting: false, + watch: true, + sourcemap: "inline", + entry: ["./src/**/src/*"], + outDir: "./dist", + format: ["esm"], + target: "esnext", + platform: "browser" +}); diff --git a/packages/styled-system/.eslintrc.json b/packages/styled-system/.eslintrc.json new file mode 100644 index 000000000..bf0564209 --- /dev/null +++ b/packages/styled-system/.eslintrc.json @@ -0,0 +1,5 @@ +{ + "$schema": "https://json.schemastore.org/eslintrc", + "root": true, + "extends": "plugin:@workleap/react-library" +} diff --git a/packages/styled-system/README.md b/packages/styled-system/README.md new file mode 100644 index 000000000..10b068e13 --- /dev/null +++ b/packages/styled-system/README.md @@ -0,0 +1,19 @@ +# @hopper-ui/styled-system + +Ideas from PandaCSS +- Patterns/JSX Patterns (HStack VStack Truncate) + - divider + - flex + - gloat + - grid + - gridItem + - hstack + - stack + - truncate + - vstack + - wrap +- CSS Variables in style + - either a vars prop, cssVars props, or style={{vars: {}}} +- Negative values for token scale + - margin={-2} should be valid +- Pseudos could be generated from usage and added to a style tag dynamically, like the GlobalStyleProvider diff --git a/packages/styled-system/jest-setup.ts b/packages/styled-system/jest-setup.ts new file mode 100644 index 000000000..d0de870dc --- /dev/null +++ b/packages/styled-system/jest-setup.ts @@ -0,0 +1 @@ +import "@testing-library/jest-dom"; diff --git a/packages/styled-system/jest.config.ts b/packages/styled-system/jest.config.ts new file mode 100644 index 000000000..eaabb1548 --- /dev/null +++ b/packages/styled-system/jest.config.ts @@ -0,0 +1,22 @@ +import type { Config } from "jest"; +import { pathsToModuleNameMapper } from "ts-jest"; +import { swcConfig } from "./swc.jest.ts"; +import { compilerOptions } from "./tsconfig.json"; + +const config: Config = { + testEnvironment: "jsdom", + transform: { + "^.+\\.(js|ts|tsx)$": ["@swc/jest", swcConfig as Record] + }, + testRegex: "/tests/jest/.*\\.test\\.(ts|tsx)$", + moduleNameMapper: { + ...pathsToModuleNameMapper(compilerOptions.paths, { + prefix: "/../.." + }) + }, + setupFilesAfterEnv: [ + "./jest-setup.ts" + ] +}; + +export default config; diff --git a/packages/styled-system/package.json b/packages/styled-system/package.json new file mode 100644 index 000000000..a363cd59b --- /dev/null +++ b/packages/styled-system/package.json @@ -0,0 +1,65 @@ +{ + "name": "@hopper-ui/styled-system", + "author": "Workleap", + "version": "0.0.0", + "description": "The styled-system package.", + "license": "Apache-2.0", + "repository": { + "type": "git", + "url": "git+https://github.com/gsoft-inc/wl-hopper.git", + "directory": "packages/styled-system" + }, + "publishConfig": { + "access": "public", + "provenance": true + }, + "type": "module", + "sideEffects": [ + "*.css" + ], + "exports": "./dist/index.js", + "types": "./dist/index.d.ts", + "files": [ + "/dist", + "CHANGELOG.md", + "README.md" + ], + "scripts": { + "dev": "tsup --config ./tsup.dev.ts", + "build": "tsup --config ./tsup.build.ts", + "test": "jest" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + }, + "dependencies": { + "react-aria": "3.29.1" + }, + "devDependencies": { + "@swc/core": "1.3.95", + "@swc/helpers": "0.5.3", + "@swc/jest": "0.2.29", + "@testing-library/jest-dom": "6.1.4", + "@testing-library/react": "14.0.0", + "@types/jest": "29.5.6", + "@types/react": "18.2.32", + "@types/react-dom": "18.2.14", + "@types/react-test-renderer": "18.0.5", + "@workleap/eslint-plugin": "3.0.0", + "@workleap/swc-configs": "2.1.2", + "@workleap/typescript-configs": "3.0.2", + "jest": "29.7.0", + "jest-environment-jsdom": "29.7.0", + "react": "18.2.0", + "react-dom": "18.2.0", + "react-test-renderer": "18.2.0", + "ts-jest": "29.1.1", + "ts-node": "10.9.1", + "tsup": "7.2.0", + "typescript": "5.2.2" + }, + "engines": { + "node": ">=18.0.0" + } +} diff --git a/packages/styled-system/src/StyledSystemProvider.tsx b/packages/styled-system/src/StyledSystemProvider.tsx new file mode 100644 index 000000000..bd6073830 --- /dev/null +++ b/packages/styled-system/src/StyledSystemProvider.tsx @@ -0,0 +1,46 @@ +import type { ComponentProps, ReactNode } from "react"; +import { BodyStyleProvider } from "./global-styles/BodyStyleProvider.tsx"; +import { HopperRootCssClass, StyledSystemRootCssClass } from "./styled-system-root-css-class.ts"; +import { TokenProvider } from "./tokens/TokenProvider.tsx"; +import clsx from "./utils/clsx.ts"; + +export interface StyledSystemProviderProps extends ComponentProps<"div">{ + /** The children of the component */ + children: ReactNode; + + /** + * Determines whether the styles should be added to the document's body + * By default, it is set to `false`. If set to `true`, it will apply additional styling to the document's body. + */ + withBodyStyle?: boolean; + + /** The color scheme to use. */ + colorScheme?: "light" | "dark"; + + /** + * Determines whether token CSS variables should be added to the document's head + * By default, it is set to `true`, you should not change it unless you want to manage CSS variables via `.css` files + */ + withCssVariables?: boolean; +} + +/** + * StyledSystemProvider is required to be rendered at the root of your application. It is responsible for: + * - Adding CSS variables to the document + * - Managing color scheme (light, dark, auto) + * - Optionally adding body styles to the document + */ +export function StyledSystemProvider({ children, withBodyStyle = false, withCssVariables = true, colorScheme = "light", className, ...rest }: StyledSystemProviderProps) { + const classNames = clsx( + `${HopperRootCssClass} ${HopperRootCssClass}-${colorScheme} ${StyledSystemRootCssClass} ${StyledSystemRootCssClass}-${colorScheme}`, + className + ); + + return ( +
+ {withBodyStyle && } + {withCssVariables && } + {children} +
+ ); +} diff --git a/packages/styled-system/src/global-styles/BodyStyleProvider.tsx b/packages/styled-system/src/global-styles/BodyStyleProvider.tsx new file mode 100644 index 000000000..184e35efd --- /dev/null +++ b/packages/styled-system/src/global-styles/BodyStyleProvider.tsx @@ -0,0 +1,78 @@ +import { useRef, useState } from "react"; +import { StyledSystemRootCssClass } from "../styled-system-root-css-class.ts"; +import type { HopperTokenKey } from "../tokens/tokens.ts"; +import { isNil } from "../utils/assertion.ts"; +import { useInsertStyleElement } from "../utils/useInsertStyleElement.ts"; +import { useIsomorphicLayoutEffect } from "../utils/useIsomorphicLayoutEffect.ts"; +import { ThemeComputedStyle } from "../utils/useThemeComputedStyle.ts"; + +interface CosmeticStyles { + color: string; + backgroundColor: string; + lineHeight: string; + fontFamily: string; + fontSize: string; +} + +const BodyTokens = { + color: "--hop-neutral-text", + backgroundColor: "--hop-neutral-surface", + lineHeight: "--hop-body-md-line-height", + fontFamily: "--hop-body-md-font-family", + fontSize: "--hop-body-md-font-size" +} satisfies Record; + +/* The BodyStyleProvider injects fonts and body styles on the body. +* Since tokens are injected on a dom element inside the body, tokens can not be used in the body styles. +* This component makes sure that the body styles are injected without referring to tokens. +*/ +export function BodyStyleProvider() { + const ref = useRef(null); + + const [cosmeticStyles, setCosmeticStyles] = useState(undefined); + + useIsomorphicLayoutEffect(() => { + if (ref.current) { + const computedStyle = new ThemeComputedStyle(ref, `.${StyledSystemRootCssClass}`); + + const color = computedStyle.getPropertyValue(BodyTokens.color); + const backgroundColor = computedStyle.getPropertyValue(BodyTokens.backgroundColor); + const fontFamily = computedStyle.getPropertyValue(BodyTokens.fontFamily); + const lineHeight = computedStyle.getPropertyValue(BodyTokens.lineHeight); + const fontSize = computedStyle.getPropertyValue(BodyTokens.fontSize); + + setCosmeticStyles({ color, backgroundColor, lineHeight, fontFamily, fontSize }); + } + // TODO: we re-run this hook if colorScheme changes + }, [ref]); + + useInsertStyleElement( + `hop-body-styles-${StyledSystemRootCssClass}`, + isNil(cosmeticStyles) ? "" : generateBodyCssContent(cosmeticStyles) + ); + + return ( +
+ ); +} + +function generateBodyCssContent({ color, backgroundColor, fontFamily, lineHeight, fontSize }: CosmeticStyles) { + return ` + body { + -webkit-font-smoothing: antialiased; + font-family: ${fontFamily}, Arial, sans-serif; + line-height: ${lineHeight}; + font-size: ${fontSize}; + color: ${color}; + background-color: ${backgroundColor}; + margin: 0; + padding: 0; + } + + @media not (prefers-reduced-motion) { + body { + scroll-behavior: smooth; + } + } + `; +} diff --git a/packages/styled-system/src/index.ts b/packages/styled-system/src/index.ts new file mode 100644 index 000000000..23c86e229 --- /dev/null +++ b/packages/styled-system/src/index.ts @@ -0,0 +1,14 @@ +// TODO: utils folder should be move to an utils package +export * from "./utils/useInsertStyleElement.ts"; +export * from "./utils/useIsomorphicInsertionEffect.ts"; +export * from "./utils/useIsomorphicLayoutEffect.ts"; +export * from "./utils/useThemeComputedStyle.ts"; + +export * from "./global-styles/BodyStyleProvider.tsx"; + +export * from "./tokens/TokenProvider.tsx"; +export * from "./tokens/tokens.ts"; + +export * from "./StyledSystemProvider.tsx"; +export * from "./styled-system-root-css-class.ts"; + diff --git a/packages/styled-system/src/styled-system-root-css-class.ts b/packages/styled-system/src/styled-system-root-css-class.ts new file mode 100644 index 000000000..2dd71b83d --- /dev/null +++ b/packages/styled-system/src/styled-system-root-css-class.ts @@ -0,0 +1,7 @@ +import packageJson from "../package.json"; + +export const HopperRootCssClass = "hop"; + +// We read the version from the packageJson and replace all dots with dashes. +// This ensures that multiple versions of the Styled System can be used on the same page. +export const StyledSystemRootCssClass = `${HopperRootCssClass}-${packageJson.version.replaceAll(".", "-")}`; diff --git a/packages/styled-system/src/tokens/TokenProvider.tsx b/packages/styled-system/src/tokens/TokenProvider.tsx new file mode 100644 index 000000000..ea390ada9 --- /dev/null +++ b/packages/styled-system/src/tokens/TokenProvider.tsx @@ -0,0 +1,50 @@ +import { StyledSystemRootCssClass } from "../styled-system-root-css-class.ts"; +import { useInsertStyleElement } from "../utils/useInsertStyleElement.ts"; +import { Tokens } from "./tokens.ts"; + +/** The TokenProvider injects tokens in the document's head. + * This is a component and not a hook, so it's easier to conditionally call it + * @example + * assuming different versions of the design system loaded at the same time, one with version 1, the other with version 2.0.0 + * + * + * + * + */ +export function TokenProvider() { + useInsertStyleElement( + `hop-tokens-${StyledSystemRootCssClass}`, + tokensToCssString(`.hop.${StyledSystemRootCssClass}`, Tokens.Core), + false + ); + + useInsertStyleElement( + `hop-tokens-semantic-${StyledSystemRootCssClass}`, + tokensToCssString(`.hop.${StyledSystemRootCssClass}`, Tokens.Semantic), + false + ); + + useInsertStyleElement( + `hop-tokens-semantic-dark-${StyledSystemRootCssClass}`, + tokensToCssString(`.hop.${StyledSystemRootCssClass}.${StyledSystemRootCssClass}-dark`, Tokens.DarkSemantic), + false + ); + + return null; +} + +function tokensToCssString(selector: string, tokens: Record) { + const cssValues = Object.entries(tokens).reduce((acc, [key, value]) => { + return `${acc} ${key}: ${value};`; + }, ""); + + return `${selector} {${cssValues}\n}`; +} diff --git a/packages/styled-system/src/tokens/generated/dark-semantic-tokens.ts b/packages/styled-system/src/tokens/generated/dark-semantic-tokens.ts new file mode 100644 index 000000000..7d6e5f874 --- /dev/null +++ b/packages/styled-system/src/tokens/generated/dark-semantic-tokens.ts @@ -0,0 +1,257 @@ +/** + * TODO: This file needs to be auto-generated. It is not at the moment + */ + +export const DarkSemanticTokens = { + "--hop-upsell-border-active": "var(--hop-sunken-treasure-500)", + "--hop-upsell-text-active": "var(--hop-sunken-treasure-300)", + "--hop-upsell-icon-weakest": "var(--hop-sunken-treasure-100)", + "--hop-upsell-icon-weak": "var(--hop-sunken-treasure-300)", + "--hop-upsell-border": "var(--hop-sunken-treasure-200)", + "--hop-upsell-surface-hover": "var(--hop-sunken-treasure-600)", + "--hop-upsell-border-disabled": "var(--hop-sunken-treasure-700)", + "--hop-upsell-icon-active": "var(--hop-sunken-treasure-300)", + "--hop-upsell-surface-weak": "var(--hop-sunken-treasure-800)", + "--hop-upsell-surface-disabled": "var(--hop-sunken-treasure-700)", + "--hop-upsell-text": "var(--hop-sunken-treasure-900)", + "--hop-upsell-icon": "var(--hop-sunken-treasure-900)", + "--hop-upsell-text-hover": "var(--hop-sunken-treasure-700)", + "--hop-upsell-text-disabled": "var(--hop-sunken-treasure-300)", + "--hop-upsell-surface-active": "var(--hop-sunken-treasure-800)", + "--hop-upsell-surface": "var(--hop-sunken-treasure-50)", + "--hop-danger-border-active": "var(--hop-amanita-400)", + "--hop-danger-icon-active": "var(--hop-amanita-300)", + "--hop-danger-text-active": "var(--hop-amanita-300)", + "--hop-danger-surface": "var(--hop-amanita-200)", + "--hop-danger-text-hover": "var(--hop-amanita-200)", + "--hop-danger-surface-disabled": "var(--hop-amanita-600)", + "--hop-danger-surface-hover": "var(--hop-amanita-200)", + "--hop-danger-surface-strong": "var(--hop-amanita-300)", + "--hop-danger-surface-strong-hover": "var(--hop-amanita-200)", + "--hop-danger-surface-weak": "var(--hop-amanita-900)", + "--hop-danger-border-strong": "var(--hop-amanita-300)", + "--hop-danger-icon": "var(--hop-amanita-900)", + "--hop-danger-icon-weak": "var(--hop-amanita-100)", + "--hop-danger-text": "var(--hop-amanita-900)", + "--hop-danger-surface-active": "var(--hop-amanita-800)", + "--hop-danger-text-weak": "var(--hop-amanita-100)", + "--hop-danger-text-strong": "var(--hop-samoyed)", + "--hop-danger-text-strong-hover": "var(--hop-samoyed)", + "--hop-danger-icon-strong": "var(--hop-samoyed)", + "--hop-danger-icon-hover": "var(--hop-amanita-200)", + "--hop-danger-text-disabled": "var(--hop-amanita-600)", + "--hop-danger-icon-disabled": "var(--hop-amanita-600)", + "--hop-danger-border": "var(--hop-amanita-500)", + "--hop-primary-icon-active": "var(--hop-sapphire-200)", + "--hop-primary-border-active": "var(--hop-sapphire-300)", + "--hop-primary-text-active": "var(--hop-sapphire-200)", + "--hop-primary-icon-strong": "var(--hop-samoyed)", + "--hop-primary-icon-strong-hover": "var(--hop-sapphire-300)", + "--hop-primary-icon": "var(--hop-sapphire-200)", + "--hop-primary-border-focus": "var(--hop-sapphire-200)", + "--hop-primary-border": "var(--hop-sapphire-300)", + "--hop-primary-icon-hover": "var(--hop-sapphire-300)", + "--hop-primary-icon-disabled": "var(--hop-sapphire-700)", + "--hop-primary-surface-disabled": "var(--hop-sapphire-700)", + "--hop-primary-surface-focus": "var(--hop-sapphire-900)", + "--hop-primary-text-disabled": "var(--hop-sapphire-700)", + "--hop-primary-surface": "var(--hop-sapphire-200)", + "--hop-primary-surface-weak": "var(--hop-sapphire-800)", + "--hop-primary-surface-strong": "var(--hop-sapphire-400)", + "--hop-primary-surface-strong-hover": "var(--hop-sapphire-200)", + "--hop-primary-surface-strong-active": "var(--hop-sapphire-800)", + "--hop-primary-text": "var(--hop-sapphire-200)", + "--hop-primary-surface-hover": "var(--hop-sapphire-200)", + "--hop-primary-text-strong": "var(--hop-samoyed)", + "--hop-primary-text-strong-hover": "var(--hop-sapphire-300)", + "--hop-primary-text-hover": "var(--hop-sapphire-300)", + "--hop-primary-surface-active": "var(--hop-sapphire-800)", + "--hop-decorative-option9-border": "var(--hop-rock-400)", + "--hop-decorative-option9-icon": "var(--hop-samoyed)", + "--hop-decorative-option9-surface-weakest": "var(--hop-rock-25)", + "--hop-decorative-option9-surface-weak": "var(--hop-rock-50)", + "--hop-decorative-option9-surface-strong": "var(--hop-rock-800)", + "--hop-decorative-option9-surface-hover": "var(--hop-rock-500)", + "--hop-decorative-option9-surface": "var(--hop-rock-400)", + "--hop-decorative-option9-text": "var(--hop-samoyed)", + "--hop-decorative-option9-text-weak": "var(--hop-rock-300)", + "--hop-decorative-option8-border": "var(--hop-amanita-400)", + "--hop-decorative-option8-icon": "var(--hop-amanita-900)", + "--hop-decorative-option8-surface-weakest": "var(--hop-amanita-25)", + "--hop-decorative-option8-surface-weak": "var(--hop-amanita-50)", + "--hop-decorative-option8-surface-strong": "var(--hop-amanita-100)", + "--hop-decorative-option8-surface-hover": "var(--hop-amanita-200)", + "--hop-decorative-option8-text-weak": "var(--hop-amanita-300)", + "--hop-decorative-option8-surface": "var(--hop-amanita-100)", + "--hop-decorative-option8-text": "var(--hop-amanita-900)", + "--hop-decorative-option7-border": "var(--hop-toad-400)", + "--hop-decorative-option7-icon": "var(--hop-toad-900)", + "--hop-decorative-option7-surface-weakest": "var(--hop-toad-25)", + "--hop-decorative-option7-surface-weak": "var(--hop-toad-50)", + "--hop-decorative-option7-surface-strong": "var(--hop-toad-75)", + "--hop-decorative-option7-surface-hover": "var(--hop-toad-75)", + "--hop-decorative-option7-surface": "var(--hop-toad-50)", + "--hop-decorative-option7-text-weak": "var(--hop-toad-500)", + "--hop-decorative-option7-text": "var(--hop-toad-900)", + "--hop-decorative-option5-text-weak": "var(--hop-coastal-300)", + "--hop-decorative-option5-text": "var(--hop-coastal-900)", + "--hop-decorative-option5-surface-weakest": "var(--hop-coastal-25)", + "--hop-decorative-option5-surface-weak": "var(--hop-coastal-50)", + "--hop-decorative-option5-surface-strong": "var(--hop-coastal-100)", + "--hop-decorative-option5-surface-hover": "var(--hop-coastal-100)", + "--hop-decorative-option5-surface": "var(--hop-coastal-75)", + "--hop-decorative-option5-border": "var(--hop-coastal-400)", + "--hop-decorative-option5-icon": "var(--hop-coastal-900)", + "--hop-decorative-option6-surface-weakest": "var(--hop-sunken-treasure-25)", + "--hop-decorative-option6-surface-weak": "var(--hop-sunken-treasure-50)", + "--hop-decorative-option6-surface-strong": "var(--hop-sunken-treasure-100)", + "--hop-decorative-option6-surface-hover": "var(--hop-sunken-treasure-100)", + "--hop-decorative-option6-surface": "var(--hop-sunken-treasure-75)", + "--hop-decorative-option6-border": "var(--hop-sunken-treasure-400)", + "--hop-decorative-option6-icon": "var(--hop-sunken-treasure-900)", + "--hop-decorative-option6-text": "var(--hop-sunken-treasure-900)", + "--hop-decorative-option6-text-weak": "var(--hop-sunken-treasure-200)", + "--hop-decorative-option4-surface-weakest": "var(--hop-moss-25)", + "--hop-decorative-option4-surface-weak": "var(--hop-moss-50)", + "--hop-decorative-option4-surface-strong": "var(--hop-moss-100)", + "--hop-decorative-option4-surface-hover": "var(--hop-moss-100)", + "--hop-decorative-option4-surface": "var(--hop-moss-75)", + "--hop-decorative-option4-border": "var(--hop-moss-400)", + "--hop-decorative-option4-icon": "var(--hop-moss-900)", + "--hop-decorative-option4-text-weak": "var(--hop-moss-400)", + "--hop-decorative-option4-text": "var(--hop-moss-900)", + "--hop-decorative-option3-surface-strong": "var(--hop-koi-200)", + "--hop-decorative-option3-surface-weakest": "var(--hop-koi-25)", + "--hop-decorative-option3-surface-weak": "var(--hop-koi-50)", + "--hop-decorative-option3-surface-hover": "var(--hop-koi-200)", + "--hop-decorative-option3-surface": "var(--hop-koi-100)", + "--hop-decorative-option3-border": "var(--hop-koi-400)", + "--hop-decorative-option3-icon": "var(--hop-koi-900)", + "--hop-decorative-option3-text": "var(--hop-koi-900)", + "--hop-decorative-option3-text-weak": "var(--hop-koi-300)", + "--hop-decorative-option2-surface-weakest": "var(--hop-quetzal-25)", + "--hop-decorative-option2-surface-weak": "var(--hop-quetzal-50)", + "--hop-decorative-option2-surface-strong": "var(--hop-quetzal-100)", + "--hop-decorative-option2-surface-hover": "var(--hop-quetzal-100)", + "--hop-decorative-option2-surface": "var(--hop-quetzal-75)", + "--hop-decorative-option2-text": "var(--hop-quetzal-900)", + "--hop-decorative-option2-text-weak": "var(--hop-quetzal-300)", + "--hop-decorative-option2-border": "var(--hop-quetzal-400)", + "--hop-decorative-option2-icon": "var(--hop-quetzal-900)", + "--hop-decorative-option1-surface-strong": "var(--hop-sapphire-200)", + "--hop-decorative-option1-surface-weakest": "var(--hop-sapphire-25)", + "--hop-decorative-option1-surface-weak": "var(--hop-sapphire-50)", + "--hop-decorative-option1-surface-hover": "var(--hop-sapphire-200)", + "--hop-decorative-option1-surface": "var(--hop-sapphire-100)", + "--hop-decorative-option1-text-weak": "var(--hop-sapphire-300)", + "--hop-decorative-option1-border": "var(--hop-sapphire-400)", + "--hop-decorative-option1-icon": "var(--hop-sapphire-900)", + "--hop-decorative-option1-text": "var(--hop-sapphire-900)", + "--hop-neutral-text-hover": "var(--hop-rock-50)", + "--hop-neutral-surface-weakest-hover": "var(--hop-rock-800)", + "--hop-neutral-text-weak": "var(--hop-rock-200)", + "--hop-neutral-surface-disabled": "var(--hop-rock-700)", + "--hop-neutral-surface-active": "var(--hop-toad-25)", + "--hop-neutral-surface-weak": "var(--hop-rock-800)", + "--hop-neutral-surface": "var(--hop-abyss)", + "--hop-neutral-text-disabled": "var(--hop-rock-500)", + "--hop-neutral-text-active": "var(--hop-rock-900)", + "--hop-neutral-text-strong": "var(--hop-rock-900)", + "--hop-neutral-text": "var(--hop-rock-25)", + "--hop-neutral-text-weakest": "var(--hop-rock-400)", + "--hop-neutral-border-disabled": "var(--hop-rock-800)", + "--hop-neutral-border-strong-hover": "var(--hop-samoyed)", + "--hop-neutral-border-strong": "var(--hop-samoyed)", + "--hop-neutral-surface-strong": "var(--hop-samoyed)", + "--hop-neutral-surface-hover": "var(--hop-rock-800)", + "--hop-neutral-icon-disabled": "var(--hop-rock-500)", + "--hop-neutral-icon": "var(--hop-rock-25)", + "--hop-neutral-icon-weak": "var(--hop-rock-200)", + "--hop-neutral-border": "var(--hop-rock-500)", + "--hop-neutral-border-weak": "var(--hop-rock-800)", + "--hop-neutral-icon-weakest": "var(--hop-rock-400)", + "--hop-neutral-icon-strong": "var(--hop-rock-900)", + "--hop-neutral-icon-hover": "var(--hop-rock-50)", + "--hop-neutral-icon-active": "var(--hop-rock-900)", + "--hop-neutral-border-hover": "var(--hop-rock-300)", + "--hop-neutral-border-active": "var(--hop-toad-25)", + "--hop-neutral-surface-weak-hover": "var(--hop-rock-700)", + "--hop-neutral-border-weakest": "var(--hop-rock-800)", + "--hop-neutral-surface-weakest": "var(--hop-rock-900)", + "--hop-warning-icon-weakest": "var(--hop-koi-200)", + "--hop-warning-icon-weak": "var(--hop-koi-75)", + "--hop-warning-text-weak": "var(--hop-koi-75)", + "--hop-warning-surface": "var(--hop-koi-75)", + "--hop-warning-surface-strong": "var(--hop-koi-300)", + "--hop-warning-surface-weak": "var(--hop-koi-800)", + "--hop-warning-border": "var(--hop-koi-500)", + "--hop-warning-icon": "var(--hop-koi-900)", + "--hop-warning-text": "var(--hop-koi-900)", + "--hop-success-border": "var(--hop-moss-500)", + "--hop-success-icon-weak": "var(--hop-moss-75)", + "--hop-success-icon-weakest": "var(--hop-moss-200)", + "--hop-success-text-weak": "var(--hop-moss-75)", + "--hop-success-surface": "var(--hop-moss-75)", + "--hop-success-surface-strong": "var(--hop-moss-300)", + "--hop-success-text-hover": "var(--hop-moss-700)", + "--hop-success-text": "var(--hop-moss-900)", + "--hop-success-icon": "var(--hop-moss-900)", + "--hop-success-surface-weak": "var(--hop-moss-800)", + "--hop-information-icon-weakest": "var(--hop-coastal-200)", + "--hop-information-surface-strong": "var(--hop-coastal-300)", + "--hop-information-icon-weak": "var(--hop-coastal-300)", + "--hop-information-text": "var(--hop-coastal-900)", + "--hop-information-surface": "var(--hop-coastal-75)", + "--hop-information-surface-weak": "var(--hop-coastal-800)", + "--hop-information-text-weak": "var(--hop-coastal-75)", + "--hop-information-icon": "var(--hop-coastal-900)", + "--hop-information-border": "var(--hop-coastal-400)", + "--hop-status-neutral-surface-strong": "var(--hop-rock-100)", + "--hop-status-neutral-text": "var(--hop-rock-25)", + "--hop-status-neutral-icon": "var(--hop-rock-25)", + "--hop-status-neutral-surface": "var(--hop-abyss)", + "--hop-status-progress-surface-strong": "var(--hop-sapphire-200)", + "--hop-status-progress-icon": "var(--hop-sapphire-900)", + "--hop-status-progress-surface": "var(--hop-sapphire-100)", + "--hop-status-progress-text": "var(--hop-sapphire-900)", + "--hop-status-option6-surface-strong": "var(--hop-sunken-treasure-100)", + "--hop-status-option6-icon": "var(--hop-sunken-treasure-900)", + "--hop-status-option6-surface": "var(--hop-sunken-treasure-75)", + "--hop-status-option6-text": "var(--hop-sunken-treasure-900)", + "--hop-status-option5-surface-strong": "var(--hop-toad-100)", + "--hop-status-option5-icon": "var(--hop-toad-900)", + "--hop-status-option5-surface": "var(--hop-toad-200)", + "--hop-status-option5-text": "var(--hop-toad-900)", + "--hop-status-option1-surface-strong": "var(--hop-coastal-100)", + "--hop-status-option1-icon": "var(--hop-coastal-900)", + "--hop-status-option1-surface": "var(--hop-coastal-200)", + "--hop-status-option1-text": "var(--hop-coastal-900)", + "--hop-status-option2-surface-strong": "var(--hop-orchid-bloom-100)", + "--hop-status-option2-text": "var(--hop-orchid-bloom-900)", + "--hop-status-option2-surface": "var(--hop-orchid-bloom-200)", + "--hop-status-option2-icon": "var(--hop-orchid-bloom-900)", + "--hop-status-option3-surface-strong": "var(--hop-quetzal-100)", + "--hop-status-option3-icon": "var(--hop-quetzal-900)", + "--hop-status-option3-surface": "var(--hop-quetzal-200)", + "--hop-status-option3-text": "var(--hop-quetzal-900)", + "--hop-status-option4-surface-strong": "var(--hop-fog-100)", + "--hop-status-option4-icon": "var(--hop-fog-900)", + "--hop-status-option4-surface": "var(--hop-fog-200)", + "--hop-status-option4-text": "var(--hop-fog-900)", + "--hop-status-inactive-surface-strong": "var(--hop-rock-100)", + "--hop-status-inactive-icon": "var(--hop-rock-800)", + "--hop-status-inactive-surface": "var(--hop-rock-75)", + "--hop-status-inactive-text": "var(--hop-rock-900)", + "--hop-status-caution-surface-strong": "var(--hop-koi-200)", + "--hop-status-caution-icon": "var(--hop-koi-900)", + "--hop-status-caution-surface": "var(--hop-koi-75)", + "--hop-status-caution-text": "var(--hop-koi-900)", + "--hop-status-negative-surface-strong": "var(--hop-amanita-200)", + "--hop-status-negative-icon": "var(--hop-amanita-900)", + "--hop-status-negative-surface": "var(--hop-amanita-75)", + "--hop-status-negative-text": "var(--hop-amanita-900)", + "--hop-status-positive-icon": "var(--hop-moss-900)", + "--hop-status-positive-surface-strong": "var(--hop-moss-200)", + "--hop-status-positive-surface": "var(--hop-moss-75)", + "--hop-status-positive-text": "var(--hop-moss-900)" +}; diff --git a/packages/styled-system/src/tokens/generated/light-tokens.ts b/packages/styled-system/src/tokens/generated/light-tokens.ts new file mode 100644 index 000000000..cb5cdb4fe --- /dev/null +++ b/packages/styled-system/src/tokens/generated/light-tokens.ts @@ -0,0 +1,608 @@ +/** + * TODO: This file needs to be auto-generated. It is not at the moment + */ + +export const CoreTokens = { + "--hop-coastal-25": "#f0f8ff", + "--hop-coastal-50": "#d9efff", + "--hop-coastal-75": "#bae6ff", + "--hop-coastal-100": "#9fd2f7", + "--hop-coastal-200": "#81b9e4", + "--hop-coastal-300": "#5d9acd", + "--hop-coastal-400": "#3a7bb2", + "--hop-coastal-500": "#2e70a8", + "--hop-coastal-600": "#23669f", + "--hop-coastal-700": "#0a538b", + "--hop-coastal-800": "#003d70", + "--hop-coastal-900": "#00274b", + "--hop-quetzal-25": "#ddfdf9", + "--hop-quetzal-50": "#cff4ef", + "--hop-quetzal-75": "#bde8e1", + "--hop-quetzal-100": "#a3d6cb", + "--hop-quetzal-200": "#83beaf", + "--hop-quetzal-300": "#5da18c", + "--hop-quetzal-400": "#38836a", + "--hop-quetzal-500": "#2b795e", + "--hop-quetzal-600": "#206f54", + "--hop-quetzal-700": "#055c41", + "--hop-quetzal-800": "#00452d", + "--hop-quetzal-900": "#002d1c", + "--hop-orchid-bloom-25": "#f6f5ff", + "--hop-orchid-bloom-50": "#eae9fb", + "--hop-orchid-bloom-75": "#ddddf7", + "--hop-orchid-bloom-100": "#c8caf0", + "--hop-orchid-bloom-200": "#aeb3e8", + "--hop-orchid-bloom-300": "#8d91dc", + "--hop-orchid-bloom-400": "#6b6ecc", + "--hop-orchid-bloom-500": "#5f61c5", + "--hop-orchid-bloom-600": "#5454be", + "--hop-orchid-bloom-700": "#433fac", + "--hop-orchid-bloom-800": "#322b8d", + "--hop-orchid-bloom-900": "#1e1c5d", + "--hop-sapphire-25": "#f5f6ff", + "--hop-sapphire-50": "#e6ebff", + "--hop-sapphire-75": "#d6e0ff", + "--hop-sapphire-100": "#b9cbff", + "--hop-sapphire-200": "#95b1ff", + "--hop-sapphire-300": "#6c8ffd", + "--hop-sapphire-400": "#4767fe", + "--hop-sapphire-500": "#3b57ff", + "--hop-sapphire-600": "#2a43e8", + "--hop-sapphire-700": "#2040c7", + "--hop-sapphire-800": "#1b3587", + "--hop-sapphire-900": "#152450", + "--hop-fog-25": "#f2f8fa", + "--hop-fog-50": "#e1eef1", + "--hop-fog-75": "#d2e3e7", + "--hop-fog-100": "#bad0d5", + "--hop-fog-200": "#9cb7be", + "--hop-fog-300": "#7c9aa3", + "--hop-fog-400": "#5e7b84", + "--hop-fog-500": "#557079", + "--hop-fog-600": "#4e6770", + "--hop-fog-700": "#40535a", + "--hop-fog-800": "#313e43", + "--hop-fog-900": "#20282a", + "--hop-toad-25": "#fef6ef", + "--hop-toad-50": "#f0eae3", + "--hop-toad-75": "#e5ded6", + "--hop-toad-100": "#d4cbc0", + "--hop-toad-200": "#bdb1a3", + "--hop-toad-300": "#a19382", + "--hop-toad-400": "#837463", + "--hop-toad-500": "#776a59", + "--hop-toad-600": "#6e6151", + "--hop-toad-700": "#594f41", + "--hop-toad-800": "#433b31", + "--hop-toad-900": "#2a2620", + "--hop-sunken-treasure-25": "#fff8d6", + "--hop-sunken-treasure-50": "#fff2b8", + "--hop-sunken-treasure-75": "#f7e694", + "--hop-sunken-treasure-100": "#eac96d", + "--hop-sunken-treasure-200": "#e2a934", + "--hop-sunken-treasure-300": "#c28b12", + "--hop-sunken-treasure-400": "#996f08", + "--hop-sunken-treasure-500": "#8b6609", + "--hop-sunken-treasure-600": "#7e5e0a", + "--hop-sunken-treasure-700": "#654c0d", + "--hop-sunken-treasure-800": "#4b390f", + "--hop-sunken-treasure-900": "#2f250d", + "--hop-koi-25": "#fff5e9", + "--hop-koi-50": "#ffe8d3", + "--hop-koi-75": "#ffd8be", + "--hop-koi-100": "#ffbf92", + "--hop-koi-200": "#ff9b3f", + "--hop-koi-300": "#e57723", + "--hop-koi-400": "#c95109", + "--hop-koi-500": "#ba4705", + "--hop-koi-600": "#ab4104", + "--hop-koi-700": "#8c3504", + "--hop-koi-800": "#692803", + "--hop-koi-900": "#451a02", + "--hop-amanita-25": "#fdf6f6", + "--hop-amanita-50": "#fde6e5", + "--hop-amanita-75": "#ffd6d3", + "--hop-amanita-100": "#ffbcb7", + "--hop-amanita-200": "#ff8e8e", + "--hop-amanita-300": "#fa4d59", + "--hop-amanita-400": "#df3236", + "--hop-amanita-500": "#cb2e31", + "--hop-amanita-600": "#ba2d2d", + "--hop-amanita-700": "#952927", + "--hop-amanita-800": "#6c2320", + "--hop-amanita-900": "#431a17", + "--hop-moss-25": "#f4f9e9", + "--hop-moss-50": "#e3f3b9", + "--hop-moss-75": "#cde8ac", + "--hop-moss-100": "#aad89d", + "--hop-moss-200": "#7dc291", + "--hop-moss-300": "#47a584", + "--hop-moss-400": "#188a71", + "--hop-moss-500": "#0c796b", + "--hop-moss-600": "#0a6f64", + "--hop-moss-700": "#115a52", + "--hop-moss-800": "#16433d", + "--hop-moss-900": "#132a27", + "--hop-abyss": "#1d1d1c", + "--hop-rock-20": "#fcfbfb", + "--hop-rock-25": "#f8f6f3", + "--hop-rock-50": "#ecebe8", + "--hop-rock-75": "#e0dfdd", + "--hop-rock-100": "#ccccca", + "--hop-rock-200": "#b3b3b1", + "--hop-rock-300": "#959593", + "--hop-rock-400": "#777775", + "--hop-rock-500": "#6c6c6b", + "--hop-rock-600": "#636362", + "--hop-rock-700": "#505050", + "--hop-rock-800": "#3c3c3c", + "--hop-rock-900": "#292929", + "--hop-samoyed": "#ffffff", + "--hop-shadow-none": "none", + "--hop-shadow-sm": "0 1px 6px 0 rgba(60, 60, 60, 0.10)", + "--hop-shadow-md": "0 4px 10px 4px rgba(60, 60, 60, 0.08)", + "--hop-shadow-lg": "0 10px 18px 8px rgba(60, 60, 60, 0.08)", + "--hop-font-family-primary": "ABC Favorit", + "--hop-font-family-secondary": "Inter", + "--hop-font-family-tertiary": "ABC Favorit Mono", + "--hop-font-size-120": "0.75rem", + "--hop-font-size-140": "0.875rem", + "--hop-font-size-160": "1rem", + "--hop-font-size-180": "1.125rem", + "--hop-font-size-200": "1.25rem", + "--hop-font-size-240": "1.5rem", + "--hop-font-size-280": "1.75rem", + "--hop-font-size-320": "2rem", + "--hop-font-size-360": "2.25rem", + "--hop-font-size-480": "3rem", + "--hop-font-weight-400": "400", + "--hop-font-weight-410": "410", + "--hop-font-weight-505": "505", + "--hop-font-weight-580": "580", + "--hop-font-weight-590": "590", + "--hop-font-weight-680": "680", + "--hop-font-weight-690": "690", + "--hop-line-height-1-125": "1.125", + "--hop-line-height-1-14": "1.1428571", + "--hop-line-height-1-20": "1.2", + "--hop-line-height-1-25": "1.25", + "--hop-line-height-1-33": "1.3333333", + "--hop-line-height-1-4285": "1.4285714", + "--hop-line-height-1-50": "1.5", + "--hop-border-radius-0": "0", + "--hop-border-radius-1": "0.25rem", + "--hop-border-radius-2": "0.5rem", + "--hop-border-radius-3": "1rem", + "--hop-border-radius-4": "1.5rem", + "--hop-border-radius-9999": "624.9375rem", + "--hop-space-0": "0", + "--hop-space-20": "0.125rem", + "--hop-space-40": "0.25rem", + "--hop-space-80": "0.5rem", + "--hop-space-160": "1rem", + "--hop-space-240": "1.5rem", + "--hop-space-320": "2rem", + "--hop-space-400": "2.5rem", + "--hop-space-480": "3rem", + "--hop-space-640": "4rem", + "--hop-space-800": "5rem", + "--hop-space-960": "6rem", + "--hop-space-1280": "8rem" +}; +export const SemanticTokens = { + "--hop-space-inset-xs": "var(--hop-space-40)", + "--hop-space-inset-sm": "var(--hop-space-80)", + "--hop-space-inset-md": "var(--hop-space-160)", + "--hop-space-inset-lg": "var(--hop-space-240)", + "--hop-space-inset-xl": "var(--hop-space-320)", + "--hop-space-inset-squish-sm": "0.25rem var(--hop-space-80)", + "--hop-space-inset-squish-md": "0.5rem var(--hop-space-160)", + "--hop-space-inset-squish-lg": "1rem var(--hop-space-320)", + "--hop-space-inset-stretch-sm": "1rem var(--hop-space-80)", + "--hop-space-inset-stretch-md": "1.5rem var(--hop-space-160)", + "--hop-space-inset-stretch-lg": "3rem var(--hop-space-240)", + "--hop-space-stack-xs": "var(--hop-space-40)", + "--hop-space-stack-sm": "var(--hop-space-80)", + "--hop-space-stack-md": "var(--hop-space-160)", + "--hop-space-stack-lg": "var(--hop-space-240)", + "--hop-space-stack-xl": "var(--hop-space-320)", + "--hop-space-inline-xs": "var(--hop-space-40)", + "--hop-space-inline-sm": "var(--hop-space-80)", + "--hop-space-inline-md": "var(--hop-space-160)", + "--hop-space-inline-lg": "var(--hop-space-240)", + "--hop-space-inline-xl": "var(--hop-space-320)", + "--hop-upsell-border-active": "var(--hop-sunken-treasure-200)", + "--hop-upsell-text-active": "var(--hop-sunken-treasure-400)", + "--hop-upsell-icon-weakest": "var(--hop-sunken-treasure-75)", + "--hop-upsell-icon-weak": "var(--hop-sunken-treasure-100)", + "--hop-upsell-border": "var(--hop-sunken-treasure-100)", + "--hop-upsell-surface-hover": "var(--hop-sunken-treasure-100)", + "--hop-upsell-border-disabled": "var(--hop-sunken-treasure-75)", + "--hop-upsell-icon-active": "var(--hop-sunken-treasure-400)", + "--hop-upsell-surface-weak": "var(--hop-sunken-treasure-25)", + "--hop-upsell-surface-disabled": "var(--hop-sunken-treasure-75)", + "--hop-upsell-text": "var(--hop-sunken-treasure-800)", + "--hop-upsell-icon": "var(--hop-sunken-treasure-800)", + "--hop-upsell-text-hover": "var(--hop-sunken-treasure-900)", + "--hop-upsell-text-disabled": "var(--hop-sunken-treasure-400)", + "--hop-upsell-surface-active": "var(--hop-sunken-treasure-50)", + "--hop-upsell-surface": "var(--hop-sunken-treasure-25)", + "--hop-danger-border-active": "var(--hop-amanita-300)", + "--hop-danger-icon-active": "var(--hop-amanita-400)", + "--hop-danger-text-active": "var(--hop-amanita-400)", + "--hop-danger-surface": "var(--hop-amanita-25)", + "--hop-danger-text-hover": "var(--hop-amanita-500)", + "--hop-danger-surface-disabled": "var(--hop-amanita-100)", + "--hop-danger-surface-hover": "var(--hop-amanita-500)", + "--hop-danger-surface-strong": "var(--hop-amanita-300)", + "--hop-danger-surface-strong-hover": "var(--hop-amanita-500)", + "--hop-danger-surface-weak": "var(--hop-amanita-50)", + "--hop-danger-border-strong": "var(--hop-amanita-300)", + "--hop-danger-icon": "var(--hop-amanita-700)", + "--hop-danger-icon-weak": "var(--hop-amanita-300)", + "--hop-danger-text": "var(--hop-amanita-700)", + "--hop-danger-surface-active": "var(--hop-amanita-50)", + "--hop-danger-text-weak": "var(--hop-amanita-300)", + "--hop-danger-text-strong": "var(--hop-samoyed)", + "--hop-danger-text-strong-hover": "var(--hop-samoyed)", + "--hop-danger-icon-strong": "var(--hop-samoyed)", + "--hop-danger-icon-strong-hover": "var(--hop-samoyed)", + "--hop-danger-icon-hover": "var(--hop-amanita-500)", + "--hop-danger-text-disabled": "var(--hop-amanita-100)", + "--hop-danger-icon-disabled": "var(--hop-amanita-100)", + "--hop-danger-border": "var(--hop-amanita-100)", + "--hop-primary-icon-active": "var(--hop-sapphire-500)", + "--hop-primary-border-active": "var(--hop-sapphire-400)", + "--hop-primary-text-active": "var(--hop-sapphire-500)", + "--hop-primary-icon-strong": "var(--hop-samoyed)", + "--hop-primary-icon-strong-hover": "var(--hop-samoyed)", + "--hop-primary-icon": "var(--hop-sapphire-500)", + "--hop-primary-border-focus": "var(--hop-sapphire-500)", + "--hop-primary-border": "var(--hop-sapphire-400)", + "--hop-primary-icon-hover": "var(--hop-sapphire-600)", + "--hop-primary-icon-disabled": "var(--hop-sapphire-200)", + "--hop-primary-surface-disabled": "var(--hop-sapphire-200)", + "--hop-primary-surface-focus": "var(--hop-sapphire-25)", + "--hop-primary-text-disabled": "var(--hop-sapphire-200)", + "--hop-primary-surface": "var(--hop-sapphire-50)", + "--hop-primary-surface-weak": "var(--hop-sapphire-25)", + "--hop-primary-surface-strong": "var(--hop-sapphire-400)", + "--hop-primary-surface-strong-active": "var(--hop-sapphire-50)", + "--hop-primary-surface-strong-hover": "var(--hop-sapphire-600)", + "--hop-primary-text": "var(--hop-sapphire-500)", + "--hop-primary-surface-hover": "var(--hop-sapphire-600)", + "--hop-primary-text-strong": "var(--hop-samoyed)", + "--hop-primary-text-strong-hover": "var(--hop-samoyed)", + "--hop-primary-text-hover": "var(--hop-sapphire-600)", + "--hop-primary-surface-active": "var(--hop-sapphire-50)", + "--hop-decorative-option9-icon": "var(--hop-samoyed)", + "--hop-decorative-option9-surface": "var(--hop-rock-400)", + "--hop-decorative-option9-surface-strong": "var(--hop-rock-800)", + "--hop-decorative-option9-surface-hover": "var(--hop-rock-500)", + "--hop-decorative-option9-surface-weak": "var(--hop-rock-50)", + "--hop-decorative-option9-surface-weakest": "var(--hop-rock-25)", + "--hop-decorative-option9-text": "var(--hop-samoyed)", + "--hop-decorative-option9-text-weak": "var(--hop-rock-300)", + "--hop-decorative-option9-border": "var(--hop-rock-100)", + "--hop-decorative-option8-icon": "var(--hop-amanita-900)", + "--hop-decorative-option8-surface-weakest": "var(--hop-amanita-25)", + "--hop-decorative-option8-surface-weak": "var(--hop-amanita-50)", + "--hop-decorative-option8-surface-hover": "var(--hop-amanita-200)", + "--hop-decorative-option8-surface-strong": "var(--hop-amanita-100)", + "--hop-decorative-option8-text-weak": "var(--hop-amanita-300)", + "--hop-decorative-option8-surface": "var(--hop-amanita-100)", + "--hop-decorative-option8-text": "var(--hop-amanita-900)", + "--hop-decorative-option8-border": "var(--hop-amanita-100)", + "--hop-decorative-option7-icon": "var(--hop-toad-900)", + "--hop-decorative-option7-surface-weakest": "var(--hop-toad-25)", + "--hop-decorative-option7-surface-weak": "var(--hop-toad-50)", + "--hop-decorative-option7-surface-strong": "var(--hop-toad-75)", + "--hop-decorative-option7-surface-hover": "var(--hop-toad-75)", + "--hop-decorative-option7-surface": "var(--hop-toad-75)", + "--hop-decorative-option7-text-weak": "var(--hop-toad-500)", + "--hop-decorative-option7-text": "var(--hop-toad-900)", + "--hop-decorative-option7-border": "var(--hop-toad-100)", + "--hop-decorative-option5-text-weak": "var(--hop-coastal-300)", + "--hop-decorative-option5-text": "var(--hop-coastal-900)", + "--hop-decorative-option5-surface-weakest": "var(--hop-coastal-25)", + "--hop-decorative-option5-surface-weak": "var(--hop-coastal-50)", + "--hop-decorative-option5-surface-strong": "var(--hop-coastal-100)", + "--hop-decorative-option5-surface-hover": "var(--hop-coastal-100)", + "--hop-decorative-option5-surface": "var(--hop-coastal-75)", + "--hop-decorative-option5-icon": "var(--hop-coastal-900)", + "--hop-decorative-option5-border": "var(--hop-coastal-100)", + "--hop-decorative-option6-surface-weakest": "var(--hop-sunken-treasure-25)", + "--hop-decorative-option6-surface-weak": "var(--hop-sunken-treasure-50)", + "--hop-decorative-option6-surface-hover": "var(--hop-sunken-treasure-100)", + "--hop-decorative-option6-surface-strong": "var(--hop-sunken-treasure-100)", + "--hop-decorative-option6-surface": "var(--hop-sunken-treasure-75)", + "--hop-decorative-option6-icon": "var(--hop-sunken-treasure-900)", + "--hop-decorative-option6-text": "var(--hop-sunken-treasure-900)", + "--hop-decorative-option6-text-weak": "var(--hop-sunken-treasure-200)", + "--hop-decorative-option6-border": "var(--hop-sunken-treasure-100)", + "--hop-decorative-option4-surface-weakest": "var(--hop-moss-25)", + "--hop-decorative-option4-surface-weak": "var(--hop-moss-50)", + "--hop-decorative-option4-surface-strong": "var(--hop-moss-100)", + "--hop-decorative-option4-surface-hover": "var(--hop-moss-100)", + "--hop-decorative-option4-surface": "var(--hop-moss-75)", + "--hop-decorative-option4-icon": "var(--hop-moss-900)", + "--hop-decorative-option4-text-weak": "var(--hop-moss-400)", + "--hop-decorative-option4-text": "var(--hop-moss-900)", + "--hop-decorative-option4-border": "var(--hop-moss-100)", + "--hop-decorative-option3-surface-weak": "var(--hop-koi-100)", + "--hop-decorative-option3-surface-weakest": "var(--hop-koi-25)", + "--hop-decorative-option3-surface-strong": "var(--hop-koi-200)", + "--hop-decorative-option3-surface-hover": "var(--hop-koi-200)", + "--hop-decorative-option3-surface": "var(--hop-koi-200)", + "--hop-decorative-option3-icon": "var(--hop-koi-900)", + "--hop-decorative-option3-text": "var(--hop-koi-900)", + "--hop-decorative-option3-text-weak": "var(--hop-koi-300)", + "--hop-decorative-option3-border": "var(--hop-koi-100)", + "--hop-decorative-option2-surface-weakest": "var(--hop-quetzal-25)", + "--hop-decorative-option2-surface-weak": "var(--hop-quetzal-50)", + "--hop-decorative-option2-surface-strong": "var(--hop-quetzal-100)", + "--hop-decorative-option2-surface": "var(--hop-quetzal-75)", + "--hop-decorative-option2-surface-hover": "var(--hop-quetzal-100)", + "--hop-decorative-option2-text": "var(--hop-quetzal-900)", + "--hop-decorative-option2-text-weak": "var(--hop-quetzal-300)", + "--hop-decorative-option2-icon": "var(--hop-quetzal-900)", + "--hop-decorative-option2-border": "var(--hop-quetzal-100)", + "--hop-decorative-option1-surface-weak": "var(--hop-sapphire-50)", + "--hop-decorative-option1-surface-weakest": "var(--hop-sapphire-25)", + "--hop-decorative-option1-surface-strong": "var(--hop-sapphire-200)", + "--hop-decorative-option1-surface-hover": "var(--hop-sapphire-200)", + "--hop-decorative-option1-surface": "var(--hop-sapphire-100)", + "--hop-decorative-option1-border": "var(--hop-sapphire-100)", + "--hop-decorative-option1-text-weak": "var(--hop-sapphire-300)", + "--hop-decorative-option1-icon": "var(--hop-sapphire-900)", + "--hop-decorative-option1-text": "var(--hop-sapphire-900)", + "--hop-neutral-text-hover": "var(--hop-rock-700)", + "--hop-neutral-surface-weakest-active": "var(--hop-rock-50)", + "--hop-neutral-surface-weakest-hover": "var(--hop-rock-50)", + "--hop-neutral-text-weak": "var(--hop-rock-400)", + "--hop-neutral-surface-disabled": "var(--hop-rock-50)", + "--hop-neutral-surface-active": "var(--hop-rock-800)", + "--hop-neutral-surface-weak": "var(--hop-rock-50)", + "--hop-neutral-surface": "var(--hop-samoyed)", + "--hop-neutral-text-disabled": "var(--hop-rock-300)", + "--hop-neutral-text-active": "var(--hop-samoyed)", + "--hop-neutral-text-strong": "var(--hop-samoyed)", + "--hop-neutral-text": "var(--hop-rock-800)", + "--hop-neutral-text-weakest": "var(--hop-rock-200)", + "--hop-neutral-border-disabled": "var(--hop-rock-50)", + "--hop-neutral-border-strong": "var(--hop-rock-800)", + "--hop-neutral-surface-strong": "var(--hop-rock-800)", + "--hop-neutral-surface-hover": "var(--hop-rock-25)", + "--hop-neutral-icon-disabled": "var(--hop-rock-300)", + "--hop-neutral-icon": "var(--hop-rock-800)", + "--hop-neutral-icon-weak": "var(--hop-rock-400)", + "--hop-neutral-icon-weak-hover": "var(--hop-rock-700)", + "--hop-neutral-border": "var(--hop-rock-200)", + "--hop-neutral-border-weak": "var(--hop-rock-75)", + "--hop-neutral-icon-weakest": "var(--hop-rock-200)", + "--hop-neutral-icon-strong": "var(--hop-samoyed)", + "--hop-neutral-icon-hover": "var(--hop-rock-700)", + "--hop-neutral-icon-active": "var(--hop-samoyed)", + "--hop-neutral-border-hover": "var(--hop-rock-300)", + "--hop-neutral-border-active": "var(--hop-rock-800)", + "--hop-neutral-surface-weak-hover": "var(--hop-rock-50)", + "--hop-neutral-border-weakest": "var(--hop-rock-50)", + "--hop-neutral-surface-weakest": "var(--hop-rock-25)", + "--hop-warning-icon-weakest": "var(--hop-koi-100)", + "--hop-warning-icon-weak": "var(--hop-koi-300)", + "--hop-warning-text-weak": "var(--hop-koi-300)", + "--hop-warning-surface": "var(--hop-koi-25)", + "--hop-warning-surface-strong": "var(--hop-koi-100)", + "--hop-warning-surface-weak": "var(--hop-koi-50)", + "--hop-warning-border": "var(--hop-koi-100)", + "--hop-warning-icon": "var(--hop-koi-700)", + "--hop-warning-text": "var(--hop-koi-700)", + "--hop-success-border": "var(--hop-moss-100)", + "--hop-success-icon-weak": "var(--hop-moss-300)", + "--hop-success-icon-weakest": "var(--hop-moss-100)", + "--hop-success-text-weak": "var(--hop-moss-300)", + "--hop-success-surface": "var(--hop-moss-25)", + "--hop-success-surface-strong": "var(--hop-moss-100)", + "--hop-success-text-hover": "var(--hop-moss-800)", + "--hop-success-text": "var(--hop-moss-700)", + "--hop-success-icon": "var(--hop-moss-700)", + "--hop-success-surface-weak": "var(--hop-moss-50)", + "--hop-information-icon-weakest": "var(--hop-coastal-75)", + "--hop-information-surface-strong": "var(--hop-coastal-100)", + "--hop-information-icon-weak": "var(--hop-coastal-300)", + "--hop-information-text": "var(--hop-coastal-800)", + "--hop-information-surface": "var(--hop-coastal-25)", + "--hop-information-surface-weak": "var(--hop-coastal-50)", + "--hop-information-text-weak": "var(--hop-coastal-300)", + "--hop-information-icon": "var(--hop-coastal-700)", + "--hop-information-border": "var(--hop-coastal-100)", + "--hop-status-neutral-surface-strong": "var(--hop-rock-200)", + "--hop-status-neutral-text": "var(--hop-rock-800)", + "--hop-status-neutral-icon": "var(--hop-rock-800)", + "--hop-status-neutral-surface": "var(--hop-samoyed)", + "--hop-status-progress-surface-strong": "var(--hop-sapphire-200)", + "--hop-status-progress-icon": "var(--hop-sapphire-500)", + "--hop-status-progress-surface": "var(--hop-sapphire-50)", + "--hop-status-progress-text": "var(--hop-sapphire-500)", + "--hop-status-option6-surface-strong": "var(--hop-sunken-treasure-200)", + "--hop-status-option6-icon": "var(--hop-sunken-treasure-600)", + "--hop-status-option6-surface": "var(--hop-sunken-treasure-25)", + "--hop-status-option6-text": "var(--hop-sunken-treasure-600)", + "--hop-status-option5-surface-strong": "var(--hop-toad-200)", + "--hop-status-option5-icon": "var(--hop-toad-600)", + "--hop-status-option5-surface": "var(--hop-toad-50)", + "--hop-status-option5-text": "var(--hop-toad-600)", + "--hop-status-option1-surface-strong": "var(--hop-coastal-200)", + "--hop-status-option1-icon": "var(--hop-coastal-700)", + "--hop-status-option1-surface": "var(--hop-coastal-50)", + "--hop-status-option1-text": "var(--hop-coastal-700)", + "--hop-status-option2-surface-strong": "var(--hop-orchid-bloom-200)", + "--hop-status-option2-text": "var(--hop-orchid-bloom-700)", + "--hop-status-option2-surface": "var(--hop-orchid-bloom-50)", + "--hop-status-option2-icon": "var(--hop-orchid-bloom-700)", + "--hop-status-option3-surface-strong": "var(--hop-quetzal-200)", + "--hop-status-option3-icon": "var(--hop-quetzal-700)", + "--hop-status-option3-surface": "var(--hop-quetzal-50)", + "--hop-status-option3-text": "var(--hop-quetzal-700)", + "--hop-status-option4-surface-strong": "var(--hop-fog-200)", + "--hop-status-option4-icon": "var(--hop-fog-600)", + "--hop-status-option4-surface": "var(--hop-fog-50)", + "--hop-status-option4-text": "var(--hop-fog-600)", + "--hop-status-caution-surface-strong": "var(--hop-koi-200)", + "--hop-status-caution-icon": "var(--hop-koi-700)", + "--hop-status-caution-surface": "var(--hop-koi-50)", + "--hop-status-caution-text": "var(--hop-koi-700)", + "--hop-status-negative-surface-strong": "var(--hop-amanita-200)", + "--hop-status-negative-icon": "var(--hop-amanita-700)", + "--hop-status-negative-surface": "var(--hop-amanita-50)", + "--hop-status-negative-text": "var(--hop-amanita-700)", + "--hop-status-inactive-surface-strong": "var(--hop-rock-100)", + "--hop-status-inactive-icon": "var(--hop-rock-500)", + "--hop-status-inactive-surface": "var(--hop-rock-50)", + "--hop-status-inactive-text": "var(--hop-rock-700)", + "--hop-status-positive-icon": "var(--hop-moss-700)", + "--hop-status-positive-surface-strong": "var(--hop-moss-200)", + "--hop-status-positive-surface": "var(--hop-moss-50)", + "--hop-status-positive-text": "var(--hop-moss-700)", + "--hop-elevation-none": "var(--hop-shadow-none)", + "--hop-elevation-raised": "var(--hop-shadow-sm)", + "--hop-elevation-lifted": "var(--hop-shadow-md)", + "--hop-elevation-floating": "var(--hop-shadow-lg)", + "--hop-heading-3xl-font-family": "var(--hop-font-family-primary)", + "--hop-heading-3xl-font-size": "var(--hop-font-size-360)", + "--hop-heading-3xl-font-weight": "var(--hop-font-weight-680)", + "--hop-heading-3xl-line-height": "var(--hop-line-height-1-33)", + "--hop-heading-2xl-font-family": "var(--hop-font-family-primary)", + "--hop-heading-2xl-font-size": "var(--hop-font-size-320)", + "--hop-heading-2xl-font-weight": "var(--hop-font-weight-580)", + "--hop-heading-2xl-line-height": "var(--hop-line-height-1-25)", + "--hop-heading-xl-font-family": "var(--hop-font-family-primary)", + "--hop-heading-xl-font-size": "var(--hop-font-size-280)", + "--hop-heading-xl-font-weight": "var(--hop-font-weight-680)", + "--hop-heading-xl-line-height": "var(--hop-line-height-1-14)", + "--hop-heading-lg-font-family": "var(--hop-font-family-primary)", + "--hop-heading-lg-font-size": "var(--hop-font-size-240)", + "--hop-heading-lg-font-weight": "var(--hop-font-weight-680)", + "--hop-heading-lg-line-height": "var(--hop-line-height-1-33)", + "--hop-heading-md-font-family": "var(--hop-font-family-primary)", + "--hop-heading-md-font-size": "var(--hop-font-size-200)", + "--hop-heading-md-font-weight": "var(--hop-font-weight-580)", + "--hop-heading-md-line-height": "var(--hop-line-height-1-20)", + "--hop-heading-sm-font-family": "var(--hop-font-family-primary)", + "--hop-heading-sm-font-size": "var(--hop-font-size-180)", + "--hop-heading-sm-font-weight": "var(--hop-font-weight-580)", + "--hop-heading-sm-line-height": "var(--hop-line-height-1-50)", + "--hop-heading-xs-font-family": "var(--hop-font-family-primary)", + "--hop-heading-xs-font-size": "var(--hop-font-size-160)", + "--hop-heading-xs-font-weight": "var(--hop-font-weight-410)", + "--hop-heading-xs-line-height": "var(--hop-line-height-1-50)", + "--hop-heading-xs-medium-font-family": "var(--hop-font-family-primary)", + "--hop-heading-xs-medium-font-size": "var(--hop-font-size-160)", + "--hop-heading-xs-medium-font-weight": "var(--hop-font-weight-580)", + "--hop-heading-xs-medium-line-height": "var(--hop-line-height-1-50)", + "--hop-overline-font-family": "var(--hop-font-family-tertiary)", + "--hop-overline-font-size": "var(--hop-font-size-120)", + "--hop-overline-font-weight": "var(--hop-font-weight-400)", + "--hop-overline-line-height": "var(--hop-line-height-1-33)", + "--hop-body-2xl-font-family": "var(--hop-font-family-secondary)", + "--hop-body-2xl-font-size": "var(--hop-font-size-320)", + "--hop-body-2xl-font-weight": "var(--hop-font-weight-410)", + "--hop-body-2xl-line-height": "var(--hop-line-height-1-125)", + "--hop-body-xl-font-family": "var(--hop-font-family-secondary)", + "--hop-body-xl-font-size": "var(--hop-font-size-280)", + "--hop-body-xl-font-weight": "var(--hop-font-weight-410)", + "--hop-body-xl-line-height": "var(--hop-line-height-1-14)", + "--hop-body-lg-font-family": "var(--hop-font-family-secondary)", + "--hop-body-lg-font-size": "var(--hop-font-size-180)", + "--hop-body-lg-font-weight": "var(--hop-font-weight-410)", + "--hop-body-lg-line-height": "var(--hop-line-height-1-33)", + "--hop-body-lg-medium-font-family": "var(--hop-font-family-secondary)", + "--hop-body-lg-medium-font-size": "var(--hop-font-size-180)", + "--hop-body-lg-medium-font-weight": "var(--hop-font-weight-505)", + "--hop-body-lg-medium-line-height": "var(--hop-line-height-1-33)", + "--hop-body-lg-semibold-font-family": "var(--hop-font-family-secondary)", + "--hop-body-lg-semibold-font-size": "var(--hop-font-size-180)", + "--hop-body-lg-semibold-font-weight": "var(--hop-font-weight-590)", + "--hop-body-lg-semibold-line-height": "var(--hop-line-height-1-33)", + "--hop-body-lg-bold-font-family": "var(--hop-font-family-secondary)", + "--hop-body-lg-bold-font-size": "var(--hop-font-size-180)", + "--hop-body-lg-bold-font-weight": "var(--hop-font-weight-690)", + "--hop-body-lg-bold-line-height": "var(--hop-line-height-1-33)", + "--hop-body-lg-underline-font-family": "var(--hop-font-family-secondary)", + "--hop-body-lg-underline-font-size": "var(--hop-font-size-180)", + "--hop-body-lg-underline-font-weight": "var(--hop-font-weight-505)", + "--hop-body-lg-underline-line-height": "var(--hop-line-height-1-33)", + "--hop-body-md-font-family": "var(--hop-font-family-secondary)", + "--hop-body-md-font-size": "var(--hop-font-size-160)", + "--hop-body-md-font-weight": "var(--hop-font-weight-410)", + "--hop-body-md-line-height": "var(--hop-line-height-1-50)", + "--hop-body-md-medium-font-family": "var(--hop-font-family-secondary)", + "--hop-body-md-medium-font-size": "var(--hop-font-size-160)", + "--hop-body-md-medium-font-weight": "var(--hop-font-weight-505)", + "--hop-body-md-medium-line-height": "var(--hop-line-height-1-50)", + "--hop-body-md-semibold-font-family": "var(--hop-font-family-secondary)", + "--hop-body-md-semibold-font-size": "var(--hop-font-size-160)", + "--hop-body-md-semibold-font-weight": "var(--hop-font-weight-590)", + "--hop-body-md-semibold-line-height": "var(--hop-line-height-1-50)", + "--hop-body-md-bold-font-family": "var(--hop-font-family-secondary)", + "--hop-body-md-bold-font-size": "var(--hop-font-size-160)", + "--hop-body-md-bold-font-weight": "var(--hop-font-weight-690)", + "--hop-body-md-bold-line-height": "var(--hop-line-height-1-50)", + "--hop-body-md-underline-font-family": "var(--hop-font-family-secondary)", + "--hop-body-md-underline-font-size": "var(--hop-font-size-160)", + "--hop-body-md-underline-font-weight": "var(--hop-font-weight-410)", + "--hop-body-md-underline-line-height": "var(--hop-line-height-1-50)", + "--hop-body-sm-font-family": "var(--hop-font-family-secondary)", + "--hop-body-sm-font-size": "var(--hop-font-size-140)", + "--hop-body-sm-font-weight": "var(--hop-font-weight-410)", + "--hop-body-sm-line-height": "var(--hop-line-height-1-4285)", + "--hop-body-sm-medium-font-family": "var(--hop-font-family-secondary)", + "--hop-body-sm-medium-font-size": "var(--hop-font-size-140)", + "--hop-body-sm-medium-font-weight": "var(--hop-font-weight-505)", + "--hop-body-sm-medium-line-height": "var(--hop-line-height-1-4285)", + "--hop-body-sm-semibold-font-family": "var(--hop-font-family-secondary)", + "--hop-body-sm-semibold-font-size": "var(--hop-font-size-140)", + "--hop-body-sm-semibold-font-weight": "var(--hop-font-weight-590)", + "--hop-body-sm-semibold-line-height": "var(--hop-line-height-1-4285)", + "--hop-body-sm-bold-font-family": "var(--hop-font-family-secondary)", + "--hop-body-sm-bold-font-size": "var(--hop-font-size-140)", + "--hop-body-sm-bold-font-weight": "var(--hop-font-weight-690)", + "--hop-body-sm-bold-line-height": "var(--hop-line-height-1-4285)", + "--hop-body-sm-underline-font-family": "var(--hop-font-family-secondary)", + "--hop-body-sm-underline-font-size": "var(--hop-font-size-140)", + "--hop-body-sm-underline-font-weight": "var(--hop-font-weight-505)", + "--hop-body-sm-underline-line-height": "var(--hop-line-height-1-4285)", + "--hop-body-xs-font-family": "var(--hop-font-family-secondary)", + "--hop-body-xs-font-size": "var(--hop-font-size-120)", + "--hop-body-xs-font-weight": "var(--hop-font-weight-410)", + "--hop-body-xs-line-height": "var(--hop-line-height-1-33)", + "--hop-body-xs-medium-font-family": "var(--hop-font-family-secondary)", + "--hop-body-xs-medium-font-size": "var(--hop-font-size-120)", + "--hop-body-xs-medium-font-weight": "var(--hop-font-weight-505)", + "--hop-body-xs-medium-line-height": "var(--hop-line-height-1-33)", + "--hop-body-xs-semibold-font-family": "var(--hop-font-family-secondary)", + "--hop-body-xs-semibold-font-size": "var(--hop-font-size-120)", + "--hop-body-xs-semibold-font-weight": "var(--hop-font-weight-590)", + "--hop-body-xs-semibold-line-height": "var(--hop-line-height-1-33)", + "--hop-body-xs-bold-font-family": "var(--hop-font-family-secondary)", + "--hop-body-xs-bold-font-size": "var(--hop-font-size-120)", + "--hop-body-xs-bold-font-weight": "var(--hop-font-weight-690)", + "--hop-body-xs-bold-line-height": "var(--hop-line-height-1-33)", + "--hop-body-xs-underline-font-family": "var(--hop-font-family-secondary)", + "--hop-body-xs-underline-font-size": "var(--hop-font-size-120)", + "--hop-body-xs-underline-font-weight": "var(--hop-font-weight-505)", + "--hop-body-xs-underline-line-height": "var(--hop-line-height-1-33)", + "--hop-accent-lg-font-family": "var(--hop-font-family-primary)", + "--hop-accent-lg-font-size": "var(--hop-font-size-480)", + "--hop-accent-lg-font-weight": "var(--hop-font-weight-580)", + "--hop-accent-lg-line-height": "var(--hop-line-height-1-125)", + "--hop-accent-sm-font-family": "var(--hop-font-family-primary)", + "--hop-accent-sm-font-size": "var(--hop-font-size-180)", + "--hop-accent-sm-font-weight": "var(--hop-font-weight-580)", + "--hop-accent-sm-line-height": "var(--hop-line-height-1-33)", + "--hop-shape-circle": "var(--hop-border-radius-9999)", + "--hop-shape-pill": "var(--hop-border-radius-4)", + "--hop-shape-rounded-lg": "var(--hop-border-radius-3)", + "--hop-shape-rounded-md": "var(--hop-border-radius-2)", + "--hop-shape-rounded-sm": "var(--hop-border-radius-1)" +}; diff --git a/packages/styled-system/src/tokens/tokens.ts b/packages/styled-system/src/tokens/tokens.ts new file mode 100644 index 000000000..cd8c35660 --- /dev/null +++ b/packages/styled-system/src/tokens/tokens.ts @@ -0,0 +1,11 @@ +import { DarkSemanticTokens } from "./generated/dark-semantic-tokens.ts"; +import { CoreTokens, SemanticTokens } from "./generated/light-tokens.ts"; + +export const Tokens = { + Core:CoreTokens, + Semantic: SemanticTokens, + DarkSemantic:DarkSemanticTokens +}; + +export type HopperTokenKey = keyof typeof CoreTokens | keyof typeof SemanticTokens | keyof typeof DarkSemanticTokens; +export type HopperCssVar = `var(${HopperTokenKey})`; diff --git a/packages/styled-system/src/utils/assertion.ts b/packages/styled-system/src/utils/assertion.ts new file mode 100644 index 000000000..2f04b6754 --- /dev/null +++ b/packages/styled-system/src/utils/assertion.ts @@ -0,0 +1,59 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ + +export function isNull(value: any): value is null { + return value == null; +} + +export function isUndefined(value: any): value is undefined { + return typeof value === "undefined" || value === undefined; +} + +export function isDefined(value: any) { + return typeof value !== "undefined" && value !== undefined; +} + +export function isNil(value: any): value is null | undefined { + return isNull(value) || isUndefined(value); +} + +export function isNilOrEmpty(value: any) { + return isNil(value) || value === ""; +} + +export function isString(value: any): value is string { + return Object.prototype.toString.call(value) === "[object String]"; +} + +export function isNumber(value: any): value is number { + return typeof value === "number"; +} + +export function isArray(value: any): value is Array { + return Array.isArray(value); +} + +export function isEmptyArray(value: any) { + return isArray(value) && value.length === 0; +} + +export function isFunction(value: any): value is (...args: any) => any { + return typeof value === "function"; +} + +export function isObject(value: any): value is Record { + return typeof value === "object" && !Array.isArray(value) && value != null; +} + +export function isPlainObject(value: any): value is Record { + if (Object.prototype.toString.call(value) !== "[object Object]") { + return false; + } + + const prototype = Object.getPrototypeOf(value); + + return prototype === null || prototype === Object.prototype; +} + +export function isPromise(value: any) { + return !isNil(value) && !isNil(value.then); +} diff --git a/packages/styled-system/src/utils/clsx.ts b/packages/styled-system/src/utils/clsx.ts new file mode 100644 index 000000000..45c8d08e9 --- /dev/null +++ b/packages/styled-system/src/utils/clsx.ts @@ -0,0 +1,53 @@ +// taken from https://github.com/lukeed/clsx +// TODO: i know pat doesn't like having to many third parties and would prefer inlining the code. Is it true for a small +// package like this also? +// Disabling eslint since it's a third party package +/* eslint-disable */ +export type ClassValue = ClassArray | ClassDictionary | string | number | null | boolean | undefined; +export type ClassDictionary = Record; +export type ClassArray = ClassValue[]; + +function toVal(mix: ClassValue) { + let k: ClassValue, y: ClassValue, str = ""; + + if (typeof mix === "string" || typeof mix === "number") { + str += mix; + } else if (typeof mix === "object") { + if (Array.isArray(mix)) { + for (k = 0; k < mix.length; k++) { + if (mix[k]) { + if (y = toVal(mix[k])) { + str && (str += " "); + str += y; + } + } + } + } else { + for (k in mix) { + if (mix![k]) { + str && (str += " "); + str += k; + } + } + } + } + + return str; +} + +export function clsx(...inputs: ClassValue[]): string { + let i = 0, tmp: ClassValue, x: ClassValue, str = ""; + while (i < inputs.length) { + if (tmp = inputs[i++]) { + if (x = toVal(tmp)) { + str && (str += " "); + str += x; + } + } + } + + return str; +} + +export default clsx; +/* eslint-enabled */ diff --git a/packages/styled-system/src/utils/useInsertStyleElement.ts b/packages/styled-system/src/utils/useInsertStyleElement.ts new file mode 100644 index 000000000..65689b13d --- /dev/null +++ b/packages/styled-system/src/utils/useInsertStyleElement.ts @@ -0,0 +1,30 @@ +import { isNil } from "./assertion.ts"; +import { useIsomorphicInsertionEffect } from "./useIsomorphicInsertionEffect.ts"; + +/** Method use for runtime injection of