upstream/upstream-twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)
Some checks failed
App Prod-Parity E2E Dispatch / dispatch (push) Failing after 10s
Details
CD Storybook UI / build (push) Failing after 3m25s
Details
CD Storybook UI / dispatch (push) Has been skipped
Details
CD deploy main / website-changed-files (push) Successful in 18m8s
Details
CI Agent Skills / changed-files-check (push) Successful in 18m9s
Details
CI Create App E2E minimal / changed-files-check (push) Successful in 24s
Details
CI Create App / changed-files-check (push) Successful in 26s
Details
CI Docs / changed-files-check (push) Successful in 26s
Details
CI Emails / changed-files-check (push) Successful in 28s
Details
CI Example App Hello World / changed-files-check (push) Successful in 23s
Details
CI Front / changed-files-check (push) Has been skipped
Details
CI Example App Postcard / changed-files-check (push) Successful in 27s
Details
CI UI / changed-files-check (push) Has been skipped
Details
CI Utils Test / changed-files-check (push) Successful in 45s
Details
CI Twenty Apps / discover (push) Successful in 1m3s
Details
CD deploy main / deploy-main (push) Failing after 3s
Details
CI Agent Skills / agent-skills-validate (push) Has been skipped
Details
CI Create App / create-app-test (lint) (push) Has been skipped
Details
CI Emails / emails-test (push) Has been skipped
Details
CI Front / front-task (lingui:compile) (push) Has been skipped
Details
CI Front / front-task (lint) (push) Has been skipped
Details
CI Example App Postcard / example-app-postcard (push) Has been skipped
Details
CI UI / ui-task (lint) (push) Has been skipped
Details
CI UI / ui-task (pack-size) (push) Has been skipped
Details
CI UI / ui-task (size) (push) Has been skipped
Details
CI UI / ui-task (test) (push) Has been skipped
Details
CI UI / ui-task (typecheck) (push) Has been skipped
Details
CI Utils Test / utils-test (push) Has been skipped
Details
CI Twenty Apps / ${{ matrix.app.name }} (push) Has been skipped
Details
CI Emails / ci-emails-status-check (push) Successful in 2s
Details
CI Example App Hello World / ci-example-app-hello-world-status-check (push) Successful in 2s
Details
CI Example App Postcard / ci-example-app-postcard-status-check (push) Successful in 3s
Details
CI UI / ui-sb-test (push) Has been skipped
Details
CI Utils Test / ci-utils-test-status-check (push) Successful in 2s
Details
CI Twenty Apps / ci-twenty-apps-status-check (push) Successful in 2s
Details
CI UI / ci-ui-status-check (push) Successful in 2s
Details
CI Desktop / desktop (push) Failing after 1m8s
Details
Push docs to Crowdin / Push documentation to Crowdin (push) Failing after 55s
Details
Push translations to Crowdin / Extract and upload translations (push) Failing after 5s
Details
Push website translations to Crowdin / Extract and upload website translations (push) Failing after 5s
Details
CI Create App / create-app-test (test) (push) Has been skipped
Details
CI Create App / create-app-test (typecheck) (push) Has been skipped
Details
CI Docs / docs-lint (push) Has been skipped
Details
CI Example App Hello World / example-app-hello-world (push) Has been skipped
Details
CI Front / front-task (lingui:extract) (push) Has been skipped
Details
CI Front / front-task (test) (push) Has been skipped
Details
CI Front / front-task (typecheck) (push) Has been skipped
Details
CI UI / ui-sb-build (push) Failing after 1m32s
Details
CI Twenty Apps / ${{ matrix.app.name }} (${{ matrix.server-source }}) (push) Has been skipped
Details
CI Agent Skills / agent-skills-publish (push) Has been skipped
Details
CI Create App / ci-create-app-status-check (push) Successful in 2s
Details
CI Agent Skills / agent-skills-remote-source (push) Has been skipped
Details
CI Create App E2E minimal / create-app-e2e-minimal (push) Has been cancelled
Details
CI E2E Main / e2e-test (push) Has been cancelled
Details
CI Front / front-sb-build (push) Has been cancelled
Details
CI Front / front-build (push) Has been cancelled
Details
CI Create App E2E minimal / ci-create-app-e2e-minimal-status-check (push) Has been cancelled
Details
CI E2E Main / ci-e2e-main-status-check (push) Has been cancelled
Details
CI E2E Main / notify-main-ci-failure (push) Has been cancelled
Details
CI E2E Main / qa-scout-comment (push) Has been cancelled
Details
CI Front / front-sb-test (push) Has been cancelled
Details
CI Front / front-sb-screenshots (push) Has been cancelled
Details
CI Front / ci-front-status-check (push) Has been cancelled
Details
DPA Sub-Processor Sync / sync-subprocessors (push) Failing after 3s
Details
AI Catalog Sync / sync-catalog (push) Failing after 2s
Details

Browse Source
This commit is contained in:
upstream-mirror
2026-09-17 23:28:13 +05:00
commit e7da97194a
32688 changed files with 4208681 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
packages/twenty-ui/.oxlintrc.json Normal file
View File

@@ -0,0 +1,103 @@
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"plugins": ["react", "typescript", "import", "unicorn", "jsx-a11y"],
"jsPlugins": ["../twenty-oxlint-rules/dist/oxlint-plugin.mjs"],
"categories": {
"correctness": "off"
},
"ignorePatterns": ["node_modules", "generated", "**/*.module.scss.d.ts"],
"rules": {
"func-style": ["error", "declaration", { "allowArrowFunctions": true }],
"no-console": [
"warn",
{ "allow": ["group", "groupCollapsed", "groupEnd"] }
],
"no-control-regex": "off",
"no-debugger": "error",
"no-duplicate-imports": "error",
"no-undef": "off",
"no-unused-vars": "off",
"no-redeclare": "off",
"import/no-duplicates": "error",
"react/no-unescaped-entities": "off",
"react/prop-types": "off",
"react/jsx-key": "off",
"react/display-name": "off",
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off",
"react/jsx-no-useless-fragment": "off",
"react/jsx-props-no-spreading": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"typescript/no-redeclare": "error",
"typescript/ban-ts-comment": "error",
"typescript/consistent-type-imports": [
"error",
{
"prefer": "type-imports",
"fixStyle": "inline-type-imports"
}
],
"typescript/explicit-function-return-type": "off",
"typescript/explicit-module-boundary-types": "off",
"typescript/no-empty-object-type": [
"error",
{
"allowInterfaces": "with-single-extends"
}
],
"typescript/no-empty-function": "off",
"typescript/no-explicit-any": "off",
"typescript/no-unused-vars": [
"warn",
{
"vars": "all",
"varsIgnorePattern": "^_",
"args": "after-used",
"argsIgnorePattern": "^_"
}
],
"twenty/enforce-module-boundaries": [
"error",
{
"depConstraints": [
{
"sourceTag": "scope:shared",
"onlyDependOnLibsWithTags": ["scope:shared"]
}
]
}
],
"twenty/no-storybook-a11y-disable": "error",
"jsx-a11y/alt-text": "error",
"jsx-a11y/anchor-has-content": "error",
"jsx-a11y/anchor-is-valid": "error",
"jsx-a11y/aria-activedescendant-has-tabindex": "error",
"jsx-a11y/aria-props": "error",
"jsx-a11y/aria-proptypes": "error",
"jsx-a11y/aria-role": "error",
"jsx-a11y/aria-unsupported-elements": "error",
"jsx-a11y/heading-has-content": "error",
"jsx-a11y/iframe-has-title": "error",
"jsx-a11y/img-redundant-alt": "error",
"jsx-a11y/label-has-associated-control": "error",
"jsx-a11y/no-access-key": "error",
"jsx-a11y/no-aria-hidden-on-focusable": "error",
"jsx-a11y/no-noninteractive-tabindex": "error",
"jsx-a11y/no-redundant-roles": "error",
"jsx-a11y/role-has-required-aria-props": "error",
"jsx-a11y/role-supports-aria-props": "error",
"jsx-a11y/tabindex-no-positive": "error",
"jsx-a11y/click-events-have-key-events": "error",
"jsx-a11y/mouse-events-have-key-events": "error",
"jsx-a11y/no-static-element-interactions": "warn",
"jsx-a11y/no-autofocus": "warn"
}
}

6
packages/twenty-ui/.prettierignore Normal file
View File

@@ -0,0 +1,6 @@
dist
storybook-static
coverage
# Generated by vite-plugin-sass-dts (committed; regenerated in dev mode).
*.module.scss.d.ts

98
packages/twenty-ui/.size-limit.json Normal file
View File

@@ -0,0 +1,98 @@
[
{
"name": ". (root barrel, tree-shaken single import)",
"path": "dist/index.mjs",
"limit": "130 kB",
"import": "{ Button }"
},
{
"name": "assets",
"path": "dist/assets.mjs",
"limit": "10 kB"
},
{
"name": "components",
"path": "dist/components.mjs",
"limit": "95 kB"
},
{
"name": "primitives",
"path": "dist/primitives.mjs",
"limit": "210 kB"
},
{
"name": "primitives/accessibility",
"path": "dist/primitives/accessibility.mjs",
"limit": "10 kB"
},
{
"name": "primitives/data-display",
"path": "dist/primitives/data-display.mjs",
"limit": "170 kB"
},
{
"name": "primitives/feedback",
"path": "dist/primitives/feedback.mjs",
"limit": "210 kB"
},
{
"name": "primitives/input",
"path": "dist/primitives/input.mjs",
"limit": "230 kB"
},
{
"name": "primitives/json-visualizer",
"path": "dist/primitives/json-visualizer.mjs",
"limit": "30 kB"
},
{
"name": "primitives/layout",
"path": "dist/primitives/layout.mjs",
"limit": "25 kB"
},
{
"name": "primitives/navigation",
"path": "dist/primitives/navigation.mjs",
"limit": "180 kB"
},
{
"name": "primitives/surfaces",
"path": "dist/primitives/surfaces.mjs",
"limit": "70 kB"
},
{
"name": "primitives/typography",
"path": "dist/primitives/typography.mjs",
"limit": "50 kB"
},
{
"name": "testing",
"path": "dist/testing.mjs",
"limit": "50 kB"
},
{
"name": "icon",
"path": "dist/icon.mjs",
"limit": "290 kB"
},
{
"name": "theme",
"path": "dist/theme.mjs",
"limit": "25 kB"
},
{
"name": "theme-constants",
"path": "dist/theme-constants.mjs",
"limit": "12 kB"
},
{
"name": "utilities",
"path": "dist/utilities.mjs",
"limit": "90 kB"
},
{
"name": "style.css",
"path": "dist/style.css",
"limit": "20 kB"
}
]

59
packages/twenty-ui/.storybook/main.ts Normal file
View File

@@ -0,0 +1,59 @@
import type { StorybookConfig } from '@storybook/react-vite';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import checker from 'vite-plugin-checker';
const dirname =
typeof __dirname !== 'undefined'
? __dirname
: path.dirname(fileURLToPath(import.meta.url));
const isVitest = Boolean(process.env.VITEST);
const isDocumentationBuild = process.env.STORYBOOK_DOCS === 'true';
const config: StorybookConfig = {
stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
addons: [
'@storybook-community/storybook-addon-cookie',
'@storybook/addon-links',
...(isDocumentationBuild ? [] : ['@storybook/addon-coverage']),
'@storybook/addon-a11y',
'storybook-addon-pseudo-states',
'@storybook/addon-vitest',
],
framework: '@storybook/react-vite',
viteFinal: async (viteConfig) => {
const plugins = [...(viteConfig.plugins ?? [])];
if (!isVitest) {
plugins.push(
checker({
typescript: {
tsconfigPath: path.resolve(dirname, '../tsconfig.json'),
},
}),
);
}
return {
...viteConfig,
plugins,
resolve: {
...viteConfig.resolve,
alias: {
...(viteConfig.resolve?.alias ?? {}),
'@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
},
},
};
},
};
export default config;
// To customize your Vite configuration you can use the viteFinal field.
// Check https://storybook.js.org/docs/react/builders/vite#configuration
// and https://nx.dev/recipes/storybook/custom-builder-configs

31
packages/twenty-ui/.storybook/preview-head.html Normal file
View File

@@ -0,0 +1,31 @@
<style type="text/css">
body {
margin: 0;
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
font-size: 13px;
}
html.dark {
background: var(--t-background-primary);
color: var(--t-font-color-primary);
}
.sbdocs-wrapper {
padding: 0 !important;
}
*::-webkit-scrollbar {
height: 4px;
width: 4px;
}
*::-webkit-scrollbar-corner {
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 2px;
}
</style>

48
packages/twenty-ui/.storybook/preview.tsx Normal file
View File

@@ -0,0 +1,48 @@
import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/inter/600.css';
import { type Preview } from '@storybook/react-vite';
import '@ui/theme-constants/theme-light.css';
import '@ui/theme-constants/theme-dark.css';
import { ThemeProvider } from '@ui/theme-constants';
const preview: Preview = {
tags: ['autodocs'],
parameters: {
a11y: {
test: 'error',
},
},
globalTypes: {
colorScheme: {
description: 'Color scheme applied by ThemeProvider',
toolbar: {
title: 'Color scheme',
icon: 'circlehollow',
items: [
{ value: 'light', title: 'Light', icon: 'sun' },
{ value: 'dark', title: 'Dark', icon: 'moon' },
],
dynamicTitle: true,
},
},
},
initialGlobals: {
colorScheme: 'light',
},
decorators: [
(Story, context) => {
const colorScheme =
context.globals.colorScheme === 'dark' ? 'dark' : 'light';
return (
<ThemeProvider colorScheme={colorScheme}>
<Story />
</ThemeProvider>
);
},
],
};
export default preview;

8
packages/twenty-ui/.storybook/vitest.setup.ts Normal file
View File

@@ -0,0 +1,8 @@
import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
import { setProjectAnnotations } from '@storybook/react-vite';
import * as projectAnnotations from './preview';
// Apply Storybook's preview configuration to Vitest runs.
// The a11y addon annotations register the axe afterEach hook so that
// parameters.a11y.test = 'error' (set in preview.tsx) actually gates tests.
setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

21
packages/twenty-ui/LICENSE Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2023-present Twenty.com, PBC
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

105
packages/twenty-ui/README.md Normal file
View File

@@ -0,0 +1,105 @@
<p align="center">
<img src="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-ui/logo.png" width="136" height="136" alt="twenty-ui logo" />
</p>
# twenty-ui
Twenty's open-source React UI component library: components, icons, and design tokens built on a zero-runtime, CSS-variable styling layer.
Read the [twenty-ui documentation](https://docs.twenty.com/ui/getting-started) for setup, theming, and component guides.
> **Alpha:** `twenty-ui` is still in alpha. Its version number follows the Twenty SDK release cycle. APIs and component behavior may change between releases.
# Installation
For a standalone React application, install the library and its peer dependencies. React 19 is required.
```bash
npm install twenty-ui monaco-editor react@^19 react-dom@^19
```
Install `monaco-editor` even if you never render a code editor: the `twenty-ui/primitives/input`, `twenty-ui/primitives/feedback`, and `twenty-ui/primitives/navigation` entry points reference it, and bundlers fail to resolve it otherwise.
For Twenty apps, follow [Using Twenty UI components](https://docs.twenty.com/developers/extend/apps/layout/front-components#using-twenty-ui-components). The front component renderer supplies the workspace theme. Keep `twenty-ui`, `twenty-sdk`, and `twenty-client-sdk` on the same version.
# Usage
For a standalone React application, import the base styles once, pick a theme stylesheet, and wrap your app in `ThemeProvider`:
```tsx
import { ThemeProvider } from 'twenty-ui/theme-constants';
import { Button } from 'twenty-ui/primitives/input';
import 'twenty-ui/style.css';
import 'twenty-ui/theme-light.css';
export const App = () => (
<ThemeProvider colorScheme="light">
<Button>Click me</Button>
</ThemeProvider>
);
```
Prefer the matching subpath for better tree-shaking. Imports from the `twenty-ui` root entry point are also supported.
```tsx
import { Button } from 'twenty-ui/primitives/input';
```
# Entry points
| Subpath | Contents |
| --- | --- |
| `twenty-ui` | All components, icons, theme tokens, and utilities |
| `twenty-ui/assets` | Logos and static assets |
| `twenty-ui/components` | Shared design presets and reusable app building blocks |
| `twenty-ui/icon` | Icon components and the icon provider |
| `twenty-ui/primitives` | Foundational UI controls and compound controls |
| `twenty-ui/primitives/accessibility` | Hidden elements and keyboard interaction helpers |
| `twenty-ui/primitives/data-display` | Avatars, chips, tags, status indicators, and display helpers |
| `twenty-ui/primitives/feedback` | Toasts, banners, progress bars, and loaders |
| `twenty-ui/primitives/input` | Buttons, form controls, pickers, and code editors |
| `twenty-ui/primitives/json-visualizer` | JSON tree viewer |
| `twenty-ui/primitives/layout` | Layout, animation, resizing, and section components |
| `twenty-ui/primitives/navigation` | Links, list items, menus, and tabs |
| `twenty-ui/primitives/surfaces` | Cards, dialogs, menus, popovers, and tooltips |
| `twenty-ui/primitives/typography` | Text, headings, labels, and typography helpers |
| `twenty-ui/testing` | Storybook and test decorators |
| `twenty-ui/theme` | Theme types and helpers |
| `twenty-ui/theme-constants` | Design tokens, `ThemeProvider`, and `useTheme` |
| `twenty-ui/utilities` | Hooks and shared utilities |
# Theming
- `twenty-ui/style.css` ships the base reset and component styles. Import it once.
- `twenty-ui/theme-light.css` and `twenty-ui/theme-dark.css` define the design-token CSS variables for each color scheme.
- `ThemeProvider` exposes the active theme through `useTheme()` and applies the `light` / `dark` class. Pass `applyToRoot={false}` with `overrides` to scope a theme to a subtree instead of the document root.
# Development
Primitive guides belong in `packages/twenty-docs/ui/primitives`. Shared component guides belong in `packages/twenty-docs/ui/components`. For each stateful API that supports both modes, include separate **Uncontrolled state** and **Controlled state** examples with the same scenario, labels, and initial state. Keep each example complete, with public imports and one exported example component.
Explain state ownership before advanced behavior such as indeterminate selection or manual tab activation. Document independent states, such as selection and popup visibility, separately. For components that delegate state to a parent or group, explain that ownership and link to the relevant examples.
For compound components, include an anatomy tree and identify required parts, optional parts, and elements supplied internally. Show supported composition with complete examples, use Twenty UI components for supporting controls, and explain how custom wrappers preserve props and refs. Use `text` fences for structural diagrams and `tsx` fences for runnable examples so the documentation checker validates the examples.
## Internal state
twenty-ui uses Base UI's store for notification state. Each `ToastProvider` creates its own store, and the toaster subscribes to the toast list. Queue rules and rendering remain owned by twenty-ui. Consumers use `useToast()` without configuring a state library.
The store factory and subscription hook are internal to the toast module. `@base-ui/utils` is a direct dependency pinned to the version used by `@base-ui/react`, and the library build keeps it external. Review its store API changes when upgrading the dependency.
## Testing
Component interaction and behavior tests belong in Storybook stories (`*.stories.tsx`) using `play` functions. Component unit tests are reserved for conformance (native props, refs, class names, rendering, and prop types). Keep non-interactive utility, hook, and token tests in the Vitest unit project; avoid duplicating story coverage there.
```bash
npx nx build twenty-ui # Build the library (dual ESM/CJS + types)
npx nx storybook:serve:dev twenty-ui # Run Storybook
npx nx test twenty-ui # Run unit tests
npx vitest run --root packages/twenty-ui --project unit <file> # Run a single test file
```
# License
twenty-ui is released under the [MIT](https://github.com/twentyhq/twenty/blob/main/packages/twenty-ui/LICENSE) license.

14
packages/twenty-ui/design-tokens/__tests__/themeTokenPipeline.test.ts Normal file
View File

@@ -0,0 +1,14 @@
import { DESIGN_TOKENS } from '../designTokens';
import { collectLeaves } from '../pipeline/collectLeaves';
const leaves = collectLeaves(DESIGN_TOKENS);
describe('design token source', () => {
it('marks exactly the leaves that resolve to numbers as unit number', () => {
for (const leaf of leaves) {
const parsesAsNumber =
!Number.isNaN(Number(leaf.light)) && !Number.isNaN(Number(leaf.dark));
expect(leaf.unit === 'number').toBe(parsesAsNumber);
}
});
});

21
packages/twenty-ui/design-tokens/accent.ts Normal file
View File

@@ -0,0 +1,21 @@
import { COLOR_TOKENS } from './color';
export const ACCENT_TOKENS = {
primary: COLOR_TOKENS.blue5,
secondary: COLOR_TOKENS.blue5,
tertiary: COLOR_TOKENS.blue3,
quaternary: COLOR_TOKENS.blue2,
accent3570: COLOR_TOKENS.blue8,
accent4060: COLOR_TOKENS.blue8,
accent1: COLOR_TOKENS.blue1,
accent2: COLOR_TOKENS.blue2,
accent3: COLOR_TOKENS.blue3,
accent4: COLOR_TOKENS.blue4,
accent5: COLOR_TOKENS.blue5,
accent6: COLOR_TOKENS.blue6,
accent7: COLOR_TOKENS.blue7,
accent8: COLOR_TOKENS.blue8,
accent9: COLOR_TOKENS.blue9,
accent10: COLOR_TOKENS.blue10,
accent11: COLOR_TOKENS.blue11,
accent12: COLOR_TOKENS.blue12,
};

10
packages/twenty-ui/design-tokens/animation.ts Normal file
View File

@@ -0,0 +1,10 @@
import { token } from './token';
export const ANIMATION_TOKENS = {
duration: {
instant: token('0.075', { unit: 'number' }),
fast: token('0.15', { unit: 'number' }),
normal: token('0.3', { unit: 'number' }),
slow: token('1.5', { unit: 'number' }),
},
};

62
packages/twenty-ui/design-tokens/background.ts Normal file
View File

File diff suppressed because one or more lines are too long

16
packages/twenty-ui/design-tokens/blur.ts Normal file
View File

@@ -0,0 +1,16 @@
import { token } from './token';
export const BLUR_TOKENS = {
light: token({
light: 'blur(6px) saturate(200%) contrast(50%) brightness(130%)',
dark: 'blur(6px) saturate(200%) contrast(100%) brightness(130%)',
}),
medium: token({
light: 'blur(12px) saturate(200%) contrast(50%) brightness(130%)',
dark: 'blur(12px) saturate(200%) contrast(100%) brightness(130%)',
}),
strong: token({
light: 'blur(20px) saturate(200%) contrast(50%) brightness(130%)',
dark: 'blur(20px) saturate(200%) contrast(100%) brightness(130%)',
}),
};

31
packages/twenty-ui/design-tokens/border.ts Normal file
View File

@@ -0,0 +1,31 @@
import { COLOR_TOKENS } from './color';
import { GRAY_SCALE_TOKENS } from './grayScale';
import { token } from './token';
const SM_RADIUS = token('4px');
const MD_RADIUS = token('8px');
export const BORDER_TOKENS = {
color: {
strong: GRAY_SCALE_TOKENS.gray6,
medium: GRAY_SCALE_TOKENS.gray5,
light: GRAY_SCALE_TOKENS.gray4,
secondaryInverted: GRAY_SCALE_TOKENS.gray11,
inverted: GRAY_SCALE_TOKENS.gray12,
danger: COLOR_TOKENS.red5,
blue: COLOR_TOKENS.blue7,
transparentStrong: COLOR_TOKENS.transparent.gray4,
},
radius: {
xs: token('2px'),
sm: SM_RADIUS,
md: MD_RADIUS,
smRound: SM_RADIUS,
mdRound: MD_RADIUS,
lg: token('16px'),
xl: token('20px'),
xxl: token('40px'),
pill: token('999px'),
rounded: token('100%'),
},
};

31
packages/twenty-ui/design-tokens/boxShadow.ts Normal file
View File

@@ -0,0 +1,31 @@
import { token } from './token';
export const BOX_SHADOW_TOKENS = {
color: token({
light: 'color(display-p3 0 0 0 / 0.039)',
dark: 'rgba(0, 0, 0, 0.6)',
}),
light: token({
light:
'0px 2px 4px 0px color(display-p3 0 0 0 / 0.039), 0px 0px 4px 0px color(display-p3 0 0 0 / 0.078)',
dark: '0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
}),
sidebar: token({
light: '-4px 4px 4px 0px rgba(0, 0, 0, 0.005)',
dark: '-4px 4px 4px 0px rgba(0, 0, 0, 0.03)',
}),
strong: token({
light:
'2px 4px 16px 0px color(display-p3 0 0 0 / 0.161), 0px 2px 4px 0px color(display-p3 0 0 0 / 0.078)',
dark: '2px 4px 16px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.08)',
}),
underline: token({
light: '0px 1px 0px 0px color(display-p3 0 0 0 / 0.361)',
dark: '0px 1px 0px 0px rgba(0, 0, 0, 0.32)',
}),
superHeavy: token({
light:
'0px 0px 8px 0px color(display-p3 0 0 0 / 0.161), 0px 8px 64px -16px color(display-p3 0 0 0 / 0.478), 0px 24px 56px -16px color(display-p3 0 0 0 / 0.078)',
dark: '2px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)',
}),
};

6
packages/twenty-ui/design-tokens/buttons.ts Normal file
View File

@@ -0,0 +1,6 @@
import { ACCENT_TOKENS } from './accent';
import { token } from './token';
export const BUTTONS_TOKENS = {
secondaryTextColor: token(ACCENT_TOKENS.accent11.dark),
};

15
packages/twenty-ui/design-tokens/code.ts Normal file
View File

@@ -0,0 +1,15 @@
import { COLOR_TOKENS } from './color';
import { GRAY_SCALE_TOKENS } from './grayScale';
import { token } from './token';
export const CODE_TOKENS = {
text: {
gray: GRAY_SCALE_TOKENS.gray10,
sky: COLOR_TOKENS.sky10,
pink: COLOR_TOKENS.pink10,
orange: COLOR_TOKENS.orange8,
green: COLOR_TOKENS.lime8,
},
font: {
family: token('DM Mono'),
},
};

65
packages/twenty-ui/design-tokens/color/amber.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const AMBER_COLOR_TOKENS = {
scale: {
amber1: token({
light: 'color(display-p3 0.995 0.992 0.985)',
dark: 'color(display-p3 0.082 0.07 0.05)',
}),
amber2: token({
light: 'color(display-p3 0.994 0.986 0.921)',
dark: 'color(display-p3 0.111 0.094 0.064)',
}),
amber3: token({
light: 'color(display-p3 0.994 0.969 0.782)',
dark: 'color(display-p3 0.178 0.128 0.049)',
}),
amber4: token({
light: 'color(display-p3 0.989 0.937 0.65)',
dark: 'color(display-p3 0.239 0.156 0)',
}),
amber5: token({
light: 'color(display-p3 0.97 0.902 0.527)',
dark: 'color(display-p3 0.29 0.193 0)',
}),
amber6: token({
light: 'color(display-p3 0.936 0.844 0.506)',
dark: 'color(display-p3 0.344 0.245 0.076)',
}),
amber7: token({
light: 'color(display-p3 0.89 0.762 0.443)',
dark: 'color(display-p3 0.422 0.314 0.141)',
}),
amber8: token({
light: 'color(display-p3 0.85 0.65 0.3)',
dark: 'color(display-p3 0.535 0.399 0.189)',
}),
amber9: token('color(display-p3 1 0.77 0.26)'),
amber10: token({
light: 'color(display-p3 0.959 0.741 0.274)',
dark: 'color(display-p3 1 0.87 0.15)',
}),
amber11: token({
light: 'color(display-p3 0.64 0.4 0)',
dark: 'color(display-p3 1 0.8 0.29)',
}),
amber12: token({
light: 'color(display-p3 0.294 0.208 0.145)',
dark: 'color(display-p3 0.984 0.909 0.726)',
}),
},
transparent: {
amber1: token({ light: '#c0800004', dark: '#e63c0006' }),
amber2: token({ light: '#f4d10016', dark: '#fd9b000d' }),
amber3: token({ light: '#ffde003d', dark: '#fa820022' }),
amber4: token({ light: '#ffd40063', dark: '#fc820032' }),
amber5: token({ light: '#f8cf0088', dark: '#fd8b0041' }),
amber6: token({ light: '#eab5008c', dark: '#fd9b0051' }),
amber7: token({ light: '#dc9b009d', dark: '#ffab2567' }),
amber8: token({ light: '#da8a00c9', dark: '#ffae3587' }),
amber9: token({ light: '#ffb300c2', dark: '#ffc53d' }),
amber10: token({ light: '#ffb300e7', dark: '#ffd60a' }),
amber11: token({ light: '#ab6400', dark: '#ffca16' }),
amber12: token({ light: '#341500dd', dark: '#ffe7b3' }),
},
};

65
packages/twenty-ui/design-tokens/color/blue.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const BLUE_COLOR_TOKENS = {
scale: {
blue1: token({
light: 'color(display-p3 0.992 0.992 0.996)',
dark: 'color(display-p3 0.068 0.074 0.118)',
}),
blue2: token({
light: 'color(display-p3 0.971 0.977 0.998)',
dark: 'color(display-p3 0.081 0.089 0.144)',
}),
blue3: token({
light: 'color(display-p3 0.933 0.948 0.992)',
dark: 'color(display-p3 0.105 0.141 0.275)',
}),
blue4: token({
light: 'color(display-p3 0.885 0.914 1)',
dark: 'color(display-p3 0.129 0.18 0.369)',
}),
blue5: token({
light: 'color(display-p3 0.831 0.87 1)',
dark: 'color(display-p3 0.163 0.22 0.439)',
}),
blue6: token({
light: 'color(display-p3 0.767 0.814 0.995)',
dark: 'color(display-p3 0.203 0.262 0.5)',
}),
blue7: token({
light: 'color(display-p3 0.685 0.74 0.957)',
dark: 'color(display-p3 0.245 0.309 0.575)',
}),
blue8: token({
light: 'color(display-p3 0.569 0.639 0.916)',
dark: 'color(display-p3 0.285 0.362 0.674)',
}),
blue9: token('color(display-p3 0.276 0.384 0.837)'),
blue10: token({
light: 'color(display-p3 0.234 0.343 0.801)',
dark: 'color(display-p3 0.354 0.445 0.866)',
}),
blue11: token({
light: 'color(display-p3 0.256 0.354 0.755)',
dark: 'color(display-p3 0.63 0.69 1)',
}),
blue12: token({
light: 'color(display-p3 0.133 0.175 0.348)',
dark: 'color(display-p3 0.848 0.881 0.99)',
}),
},
transparent: {
blue1: token({ light: '#00008002', dark: '#1133ff0f' }),
blue2: token({ light: '#0040ff08', dark: '#3354fa17' }),
blue3: token({ light: '#0047f112', dark: '#2f62ff3c' }),
blue4: token({ light: '#0044ff1e', dark: '#3566ff57' }),
blue5: token({ light: '#0044ff2d', dark: '#4171fd6b' }),
blue6: token({ light: '#003eff3e', dark: '#5178fd7c' }),
blue7: token({ light: '#0037ed54', dark: '#5a7fff90' }),
blue8: token({ light: '#0034dc72', dark: '#5b81feac' }),
blue9: token({ light: '#0031d2c1', dark: '#4671ffdb' }),
blue10: token({ light: '#002ec9cc', dark: '#5c7efee3' }),
blue11: token({ light: '#002bb7c5', dark: '#9eb1ff' }),
blue12: token({ light: '#001046e0', dark: '#d6e1ff' }),
},
};

65
packages/twenty-ui/design-tokens/color/bronze.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const BRONZE_COLOR_TOKENS = {
scale: {
bronze1: token({
light: 'color(display-p3 0.991 0.988 0.988)',
dark: 'color(display-p3 0.076 0.067 0.063)',
}),
bronze2: token({
light: 'color(display-p3 0.989 0.97 0.961)',
dark: 'color(display-p3 0.106 0.097 0.093)',
}),
bronze3: token({
light: 'color(display-p3 0.958 0.932 0.919)',
dark: 'color(display-p3 0.147 0.132 0.125)',
}),
bronze4: token({
light: 'color(display-p3 0.929 0.894 0.877)',
dark: 'color(display-p3 0.185 0.166 0.156)',
}),
bronze5: token({
light: 'color(display-p3 0.898 0.853 0.832)',
dark: 'color(display-p3 0.227 0.202 0.19)',
}),
bronze6: token({
light: 'color(display-p3 0.861 0.805 0.778)',
dark: 'color(display-p3 0.278 0.246 0.23)',
}),
bronze7: token({
light: 'color(display-p3 0.812 0.739 0.706)',
dark: 'color(display-p3 0.343 0.302 0.281)',
}),
bronze8: token({
light: 'color(display-p3 0.741 0.647 0.606)',
dark: 'color(display-p3 0.426 0.374 0.347)',
}),
bronze9: token('color(display-p3 0.611 0.507 0.455)'),
bronze10: token({
light: 'color(display-p3 0.563 0.461 0.414)',
dark: 'color(display-p3 0.66 0.556 0.504)',
}),
bronze11: token({
light: 'color(display-p3 0.471 0.373 0.336)',
dark: 'color(display-p3 0.81 0.707 0.655)',
}),
bronze12: token({
light: 'color(display-p3 0.251 0.191 0.172)',
dark: 'color(display-p3 0.921 0.88 0.854)',
}),
},
transparent: {
bronze1: token({ light: '#55000003', dark: '#d1110004' }),
bronze2: token({ light: '#cc33000a', dark: '#fbbc910c' }),
bronze3: token({ light: '#92250015', dark: '#faceb817' }),
bronze4: token({ light: '#80280020', dark: '#facdb622' }),
bronze5: token({ light: '#7423002c', dark: '#ffd2c12d' }),
bronze6: token({ light: '#7324003a', dark: '#ffd1c03c' }),
bronze7: token({ light: '#6c1f004c', dark: '#fdd0c04f' }),
bronze8: token({ light: '#671c0066', dark: '#ffd6c565' }),
bronze9: token({ light: '#551a008d', dark: '#fec7b09b' }),
bronze10: token({ light: '#4c150097', dark: '#fecab5a9' }),
bronze11: token({ light: '#3d0f00ab', dark: '#ffd7c6d1' }),
bronze12: token({ light: '#1d0600d4', dark: '#fff1e9ec' }),
},
};

65
packages/twenty-ui/design-tokens/color/brown.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const BROWN_COLOR_TOKENS = {
scale: {
brown1: token({
light: 'color(display-p3 0.995 0.992 0.989)',
dark: 'color(display-p3 0.071 0.067 0.059)',
}),
brown2: token({
light: 'color(display-p3 0.987 0.976 0.964)',
dark: 'color(display-p3 0.107 0.095 0.087)',
}),
brown3: token({
light: 'color(display-p3 0.959 0.936 0.909)',
dark: 'color(display-p3 0.151 0.13 0.115)',
}),
brown4: token({
light: 'color(display-p3 0.934 0.897 0.855)',
dark: 'color(display-p3 0.191 0.161 0.138)',
}),
brown5: token({
light: 'color(display-p3 0.909 0.856 0.798)',
dark: 'color(display-p3 0.235 0.194 0.162)',
}),
brown6: token({
light: 'color(display-p3 0.88 0.808 0.73)',
dark: 'color(display-p3 0.291 0.237 0.192)',
}),
brown7: token({
light: 'color(display-p3 0.841 0.742 0.639)',
dark: 'color(display-p3 0.365 0.295 0.232)',
}),
brown8: token({
light: 'color(display-p3 0.782 0.647 0.514)',
dark: 'color(display-p3 0.469 0.377 0.287)',
}),
brown9: token('color(display-p3 0.651 0.505 0.368)'),
brown10: token({
light: 'color(display-p3 0.601 0.465 0.344)',
dark: 'color(display-p3 0.697 0.557 0.423)',
}),
brown11: token({
light: 'color(display-p3 0.485 0.374 0.288)',
dark: 'color(display-p3 0.835 0.715 0.597)',
}),
brown12: token({
light: 'color(display-p3 0.236 0.202 0.183)',
dark: 'color(display-p3 0.938 0.885 0.802)',
}),
},
transparent: {
brown1: token({ light: '#aa550003', dark: '#91110002' }),
brown2: token({ light: '#aa550009', dark: '#fba67c0c' }),
brown3: token({ light: '#a04b0018', dark: '#fcb58c19' }),
brown4: token({ light: '#9b4a0026', dark: '#fbbb8a24' }),
brown5: token({ light: '#9f4d0035', dark: '#fcb88931' }),
brown6: token({ light: '#a04e0048', dark: '#fdba8741' }),
brown7: token({ light: '#a34e0060', dark: '#ffbb8856' }),
brown8: token({ light: '#9f4a0081', dark: '#ffbe8773' }),
brown9: token({ light: '#823c00a7', dark: '#feb87da8' }),
brown10: token({ light: '#723300ac', dark: '#ffc18cb3' }),
brown11: token({ light: '#522100b9', dark: '#fed1aad9' }),
brown12: token({ light: '#140600d1', dark: '#feecd4f2' }),
},
};

65
packages/twenty-ui/design-tokens/color/crimson.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const CRIMSON_COLOR_TOKENS = {
scale: {
crimson1: token({
light: 'color(display-p3 0.998 0.989 0.992)',
dark: 'color(display-p3 0.093 0.068 0.078)',
}),
crimson2: token({
light: 'color(display-p3 0.991 0.969 0.976)',
dark: 'color(display-p3 0.117 0.078 0.095)',
}),
crimson3: token({
light: 'color(display-p3 0.987 0.917 0.941)',
dark: 'color(display-p3 0.203 0.091 0.143)',
}),
crimson4: token({
light: 'color(display-p3 0.975 0.866 0.904)',
dark: 'color(display-p3 0.277 0.087 0.182)',
}),
crimson5: token({
light: 'color(display-p3 0.953 0.813 0.864)',
dark: 'color(display-p3 0.332 0.115 0.22)',
}),
crimson6: token({
light: 'color(display-p3 0.921 0.755 0.817)',
dark: 'color(display-p3 0.394 0.162 0.268)',
}),
crimson7: token({
light: 'color(display-p3 0.88 0.683 0.761)',
dark: 'color(display-p3 0.489 0.222 0.336)',
}),
crimson8: token({
light: 'color(display-p3 0.834 0.592 0.694)',
dark: 'color(display-p3 0.638 0.289 0.429)',
}),
crimson9: token('color(display-p3 0.843 0.298 0.507)'),
crimson10: token({
light: 'color(display-p3 0.807 0.266 0.468)',
dark: 'color(display-p3 0.864 0.364 0.539)',
}),
crimson11: token({
light: 'color(display-p3 0.731 0.195 0.388)',
dark: 'color(display-p3 1 0.56 0.66)',
}),
crimson12: token({
light: 'color(display-p3 0.352 0.111 0.221)',
dark: 'color(display-p3 0.966 0.834 0.906)',
}),
},
transparent: {
crimson1: token({ light: '#ff005503', dark: '#f4126709' }),
crimson2: token({ light: '#e0004008', dark: '#f22f7a11' }),
crimson3: token({ light: '#ff005216', dark: '#fe2a8b2a' }),
crimson4: token({ light: '#f8005123', dark: '#fd158741' }),
crimson5: token({ light: '#e5004f31', dark: '#fd278f51' }),
crimson6: token({ light: '#d0004b41', dark: '#fe459763' }),
crimson7: token({ light: '#bf004753', dark: '#fd559b7f' }),
crimson8: token({ light: '#b6004a6c', dark: '#fe5b9bab' }),
crimson9: token({ light: '#e2005bc2', dark: '#fe418de8' }),
crimson10: token({ light: '#d70056cb', dark: '#ff5693ed' }),
crimson11: token({ light: '#c4004fe2', dark: '#ff92ad' }),
crimson12: token({ light: '#530026e9', dark: '#ffd5eafd' }),
},
};

65
packages/twenty-ui/design-tokens/color/cyan.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const CYAN_COLOR_TOKENS = {
scale: {
cyan1: token({
light: 'color(display-p3 0.982 0.992 0.996)',
dark: 'color(display-p3 0.053 0.085 0.098)',
}),
cyan2: token({
light: 'color(display-p3 0.955 0.981 0.984)',
dark: 'color(display-p3 0.072 0.105 0.122)',
}),
cyan3: token({
light: 'color(display-p3 0.888 0.965 0.975)',
dark: 'color(display-p3 0.073 0.168 0.209)',
}),
cyan4: token({
light: 'color(display-p3 0.821 0.941 0.959)',
dark: 'color(display-p3 0.063 0.216 0.277)',
}),
cyan5: token({
light: 'color(display-p3 0.751 0.907 0.935)',
dark: 'color(display-p3 0.091 0.267 0.336)',
}),
cyan6: token({
light: 'color(display-p3 0.671 0.862 0.9)',
dark: 'color(display-p3 0.137 0.324 0.4)',
}),
cyan7: token({
light: 'color(display-p3 0.564 0.8 0.854)',
dark: 'color(display-p3 0.186 0.398 0.484)',
}),
cyan8: token({
light: 'color(display-p3 0.388 0.715 0.798)',
dark: 'color(display-p3 0.23 0.496 0.6)',
}),
cyan9: token('color(display-p3 0.282 0.627 0.765)'),
cyan10: token({
light: 'color(display-p3 0.264 0.583 0.71)',
dark: 'color(display-p3 0.331 0.675 0.801)',
}),
cyan11: token({
light: 'color(display-p3 0.08 0.48 0.63)',
dark: 'color(display-p3 0.446 0.79 0.887)',
}),
cyan12: token({
light: 'color(display-p3 0.108 0.232 0.277)',
dark: 'color(display-p3 0.757 0.919 0.962)',
}),
},
transparent: {
cyan1: token({ light: '#0099cc05', dark: '#0091f70a' }),
cyan2: token({ light: '#009db10d', dark: '#02a7f211' }),
cyan3: token({ light: '#00c2d121', dark: '#00befd28' }),
cyan4: token({ light: '#00bcd435', dark: '#00baff3b' }),
cyan5: token({ light: '#01b4cc4a', dark: '#00befd4d' }),
cyan6: token({ light: '#00a7c162', dark: '#00c7fd5e' }),
cyan7: token({ light: '#009fbb82', dark: '#14cdff75' }),
cyan8: token({ light: '#00a3c0c2', dark: '#11cfff95' }),
cyan9: token({ light: '#00a2c7', dark: '#00cfffc3' }),
cyan10: token({ light: '#0094b7f8', dark: '#28d6ffcd' }),
cyan11: token({ light: '#007491ef', dark: '#52e1fee5' }),
cyan12: token({ light: '#00323ef2', dark: '#bbf3fef7' }),
},
};

65
packages/twenty-ui/design-tokens/color/gold.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const GOLD_COLOR_TOKENS = {
scale: {
gold1: token({
light: 'color(display-p3 0.992 0.992 0.989)',
dark: 'color(display-p3 0.071 0.071 0.067)',
}),
gold2: token({
light: 'color(display-p3 0.98 0.976 0.953)',
dark: 'color(display-p3 0.104 0.101 0.09)',
}),
gold3: token({
light: 'color(display-p3 0.947 0.94 0.909)',
dark: 'color(display-p3 0.141 0.136 0.122)',
}),
gold4: token({
light: 'color(display-p3 0.914 0.904 0.865)',
dark: 'color(display-p3 0.177 0.17 0.152)',
}),
gold5: token({
light: 'color(display-p3 0.88 0.865 0.816)',
dark: 'color(display-p3 0.217 0.207 0.185)',
}),
gold6: token({
light: 'color(display-p3 0.84 0.818 0.756)',
dark: 'color(display-p3 0.265 0.252 0.225)',
}),
gold7: token({
light: 'color(display-p3 0.788 0.753 0.677)',
dark: 'color(display-p3 0.327 0.31 0.277)',
}),
gold8: token({
light: 'color(display-p3 0.715 0.66 0.565)',
dark: 'color(display-p3 0.407 0.384 0.342)',
}),
gold9: token('color(display-p3 0.579 0.517 0.41)'),
gold10: token({
light: 'color(display-p3 0.538 0.479 0.38)',
dark: 'color(display-p3 0.628 0.566 0.463)',
}),
gold11: token({
light: 'color(display-p3 0.433 0.386 0.305)',
dark: 'color(display-p3 0.784 0.728 0.635)',
}),
gold12: token({
light: 'color(display-p3 0.227 0.209 0.173)',
dark: 'color(display-p3 0.906 0.887 0.855)',
}),
},
transparent: {
gold1: token({ light: '#55550003', dark: '#91911102' }),
gold2: token({ light: '#9d8a000d', dark: '#f9e29d0b' }),
gold3: token({ light: '#75600018', dark: '#f8ecbb15' }),
gold4: token({ light: '#6b4e0024', dark: '#ffeec41e' }),
gold5: token({ light: '#60460030', dark: '#feecc22a' }),
gold6: token({ light: '#64440040', dark: '#feebcb37' }),
gold7: token({ light: '#63420055', dark: '#ffedcd48' }),
gold8: token({ light: '#633d0072', dark: '#fdeaca5f' }),
gold9: token({ light: '#5332009a', dark: '#ffdba690' }),
gold10: token({ light: '#492d00a1', dark: '#fedfb09d' }),
gold11: token({ light: '#362100b4', dark: '#fee7c6c8' }),
gold12: token({ light: '#130c00d4', dark: '#fef7ede7' }),
},
};

65
packages/twenty-ui/design-tokens/color/grass.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const GRASS_COLOR_TOKENS = {
scale: {
grass1: token({
light: 'color(display-p3 0.986 0.996 0.985)',
dark: 'color(display-p3 0.062 0.083 0.067)',
}),
grass2: token({
light: 'color(display-p3 0.966 0.983 0.964)',
dark: 'color(display-p3 0.083 0.103 0.085)',
}),
grass3: token({
light: 'color(display-p3 0.923 0.965 0.917)',
dark: 'color(display-p3 0.118 0.163 0.122)',
}),
grass4: token({
light: 'color(display-p3 0.872 0.94 0.865)',
dark: 'color(display-p3 0.142 0.225 0.15)',
}),
grass5: token({
light: 'color(display-p3 0.811 0.908 0.802)',
dark: 'color(display-p3 0.178 0.279 0.186)',
}),
grass6: token({
light: 'color(display-p3 0.733 0.864 0.724)',
dark: 'color(display-p3 0.217 0.337 0.224)',
}),
grass7: token({
light: 'color(display-p3 0.628 0.803 0.622)',
dark: 'color(display-p3 0.258 0.4 0.264)',
}),
grass8: token({
light: 'color(display-p3 0.477 0.72 0.482)',
dark: 'color(display-p3 0.302 0.47 0.305)',
}),
grass9: token('color(display-p3 0.38 0.647 0.378)'),
grass10: token({
light: 'color(display-p3 0.344 0.598 0.342)',
dark: 'color(display-p3 0.426 0.694 0.426)',
}),
grass11: token({
light: 'color(display-p3 0.263 0.488 0.261)',
dark: 'color(display-p3 0.535 0.807 0.542)',
}),
grass12: token({
light: 'color(display-p3 0.151 0.233 0.153)',
dark: 'color(display-p3 0.797 0.936 0.776)',
}),
},
transparent: {
grass1: token({ light: '#00c00004', dark: '#00de1205' }),
grass2: token({ light: '#0099000a', dark: '#5ef7780a' }),
grass3: token({ light: '#00970016', dark: '#70fe8c1b' }),
grass4: token({ light: '#009f0725', dark: '#57ff802c' }),
grass5: token({ light: '#00930536', dark: '#68ff8b3b' }),
grass6: token({ light: '#008f0a4d', dark: '#71ff8f4b' }),
grass7: token({ light: '#018b0f6b', dark: '#77fd925d' }),
grass8: token({ light: '#008d199a', dark: '#77fd9070' }),
grass9: token({ light: '#008619b9', dark: '#65ff82a1' }),
grass10: token({ light: '#007b17c1', dark: '#72ff8dae' }),
grass11: token({ light: '#006514d5', dark: '#89ff9fcd' }),
grass12: token({ light: '#002006df', dark: '#ceffceef' }),
},
};

104
packages/twenty-ui/design-tokens/color/gray.ts Normal file
View File

@@ -0,0 +1,104 @@
import { token } from '../token';
export const GRAY_COLOR_TOKENS = {
scale: {
gray1: token({
light: 'color(display-p3 1 1 1)',
dark: 'color(display-p3 0.09 0.09 0.09)',
}),
gray2: token({
light: 'color(display-p3 0.988 0.988 0.988)',
dark: 'color(display-p3 0.106 0.106 0.106)',
}),
gray3: token({
light: 'color(display-p3 0.976 0.976 0.976)',
dark: 'color(display-p3 0.098 0.098 0.098)',
}),
gray4: token({
light: 'color(display-p3 0.945 0.945 0.945)',
dark: 'color(display-p3 0.114 0.114 0.114)',
}),
gray5: token({
light: 'color(display-p3 0.922 0.922 0.922)',
dark: 'color(display-p3 0.133 0.133 0.133)',
}),
gray6: token({
light: 'color(display-p3 0.839 0.839 0.839)',
dark: 'color(display-p3 0.282 0.282 0.282)',
}),
gray7: token({
light: 'color(display-p3 0.8 0.8 0.8)',
dark: 'color(display-p3 0.298 0.298 0.298)',
}),
gray8: token({
light: 'color(display-p3 0.702 0.702 0.702)',
dark: 'color(display-p3 0.4 0.4 0.4)',
}),
gray9: token({
light: 'color(display-p3 0.6 0.6 0.6)',
dark: 'color(display-p3 0.506 0.506 0.506)',
}),
gray10: token({
light: 'color(display-p3 0.514 0.514 0.514)',
dark: 'color(display-p3 0.482 0.482 0.482)',
}),
gray11: token({
light: 'color(display-p3 0.4 0.4 0.4)',
dark: 'color(display-p3 0.702 0.702 0.702)',
}),
gray12: token({
light: 'color(display-p3 0.2 0.2 0.2)',
dark: 'color(display-p3 0.922 0.922 0.922)',
}),
},
transparent: {
gray1: token({
light: 'color(display-p3 0 0 0 / 0.02)',
dark: 'color(display-p3 1 1 1 / 0.031)',
}),
gray2: token({
light: 'color(display-p3 0 0 0 / 0.039)',
dark: 'color(display-p3 1 1 1 / 0.059)',
}),
gray3: token({
light: 'color(display-p3 0 0 0 / 0.047)',
dark: 'color(display-p3 1 1 1 / 0.047)',
}),
gray4: token({
light: 'color(display-p3 0 0 0 / 0.071)',
dark: 'color(display-p3 1 1 1 / 0.071)',
}),
gray5: token({
light: 'color(display-p3 0 0 0 / 0.078)',
dark: 'color(display-p3 1 1 1 / 0.102)',
}),
gray6: token({
light: 'color(display-p3 0 0 0 / 0.114)',
dark: 'color(display-p3 1 1 1 / 0.114)',
}),
gray7: token({
light: 'color(display-p3 0 0 0 / 0.161)',
dark: 'color(display-p3 1 1 1 / 0.141)',
}),
gray8: token({
light: 'color(display-p3 0 0 0 / 0.22)',
dark: 'color(display-p3 1 1 1 / 0.22)',
}),
gray9: token({
light: 'color(display-p3 0 0 0 / 0.361)',
dark: 'color(display-p3 1 1 1 / 0.427)',
}),
gray10: token({
light: 'color(display-p3 0 0 0 / 0.478)',
dark: 'color(display-p3 1 1 1 / 0.478)',
}),
gray11: token({
light: 'color(display-p3 0 0 0 / 0.722)',
dark: 'color(display-p3 1 1 1 / 0.565)',
}),
gray12: token({
light: 'color(display-p3 0 0 0 / 0.91)',
dark: 'color(display-p3 1 1 1 / 0.91)',
}),
},
};

65
packages/twenty-ui/design-tokens/color/green.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const GREEN_COLOR_TOKENS = {
scale: {
green1: token({
light: 'color(display-p3 0.986 0.996 0.989)',
dark: 'color(display-p3 0.062 0.083 0.071)',
}),
green2: token({
light: 'color(display-p3 0.963 0.983 0.967)',
dark: 'color(display-p3 0.079 0.106 0.09)',
}),
green3: token({
light: 'color(display-p3 0.913 0.964 0.925)',
dark: 'color(display-p3 0.1 0.173 0.133)',
}),
green4: token({
light: 'color(display-p3 0.859 0.94 0.879)',
dark: 'color(display-p3 0.115 0.229 0.166)',
}),
green5: token({
light: 'color(display-p3 0.796 0.907 0.826)',
dark: 'color(display-p3 0.147 0.282 0.206)',
}),
green6: token({
light: 'color(display-p3 0.718 0.863 0.761)',
dark: 'color(display-p3 0.185 0.338 0.25)',
}),
green7: token({
light: 'color(display-p3 0.61 0.801 0.675)',
dark: 'color(display-p3 0.227 0.403 0.298)',
}),
green8: token({
light: 'color(display-p3 0.451 0.715 0.559)',
dark: 'color(display-p3 0.27 0.479 0.351)',
}),
green9: token('color(display-p3 0.332 0.634 0.442)'),
green10: token({
light: 'color(display-p3 0.308 0.595 0.417)',
dark: 'color(display-p3 0.357 0.682 0.474)',
}),
green11: token({
light: 'color(display-p3 0.19 0.5 0.32)',
dark: 'color(display-p3 0.434 0.828 0.573)',
}),
green12: token({
light: 'color(display-p3 0.132 0.228 0.18)',
dark: 'color(display-p3 0.747 0.938 0.807)',
}),
},
transparent: {
green1: token({ light: '#00c04004', dark: '#00de4505' }),
green2: token({ light: '#00a32f0b', dark: '#29f99d0b' }),
green3: token({ light: '#00a43319', dark: '#22ff991e' }),
green4: token({ light: '#00a83829', dark: '#11ff992d' }),
green5: token({ light: '#019c393b', dark: '#2bffa23c' }),
green6: token({ light: '#00963c52', dark: '#44ffaa4b' }),
green7: token({ light: '#00914071', dark: '#50fdac5e' }),
green8: token({ light: '#00924ba4', dark: '#54ffad73' }),
green9: token({ light: '#008f4acf', dark: '#44ffa49e' }),
green10: token({ light: '#008647d4', dark: '#43fea4ab' }),
green11: token({ light: '#00713fde', dark: '#46fea5d4' }),
green12: token({ light: '#002616e6', dark: '#bbffd7f0' }),
},
};

97
packages/twenty-ui/design-tokens/color/index.ts Normal file
View File

@@ -0,0 +1,97 @@
import { AMBER_COLOR_TOKENS } from './amber';
import { BLUE_COLOR_TOKENS } from './blue';
import { BRONZE_COLOR_TOKENS } from './bronze';
import { BROWN_COLOR_TOKENS } from './brown';
import { CRIMSON_COLOR_TOKENS } from './crimson';
import { CYAN_COLOR_TOKENS } from './cyan';
import { GOLD_COLOR_TOKENS } from './gold';
import { GRASS_COLOR_TOKENS } from './grass';
import { GRAY_COLOR_TOKENS } from './gray';
import { GREEN_COLOR_TOKENS } from './green';
import { IRIS_COLOR_TOKENS } from './iris';
import { JADE_COLOR_TOKENS } from './jade';
import { LIME_COLOR_TOKENS } from './lime';
import { MAUVE_COLOR_TOKENS } from './mauve';
import { MINT_COLOR_TOKENS } from './mint';
import { OLIVE_COLOR_TOKENS } from './olive';
import { ORANGE_COLOR_TOKENS } from './orange';
import { PINK_COLOR_TOKENS } from './pink';
import { PLUM_COLOR_TOKENS } from './plum';
import { PURPLE_COLOR_TOKENS } from './purple';
import { RED_COLOR_TOKENS } from './red';
import { RUBY_COLOR_TOKENS } from './ruby';
import { SAGE_COLOR_TOKENS } from './sage';
import { SAND_COLOR_TOKENS } from './sand';
import { SKY_COLOR_TOKENS } from './sky';
import { SLATE_COLOR_TOKENS } from './slate';
import { TOMATO_COLOR_TOKENS } from './tomato';
import { TURQUOISE_COLOR_TOKENS } from './turquoise';
import { VIOLET_COLOR_TOKENS } from './violet';
import { YELLOW_COLOR_TOKENS } from './yellow';
import { MAIN_COLOR_TOKENS } from './mainColors';
export const COLOR_TOKENS = {
...MAIN_COLOR_TOKENS,
...YELLOW_COLOR_TOKENS.scale,
...GREEN_COLOR_TOKENS.scale,
...TURQUOISE_COLOR_TOKENS.scale,
...SKY_COLOR_TOKENS.scale,
...BLUE_COLOR_TOKENS.scale,
...PURPLE_COLOR_TOKENS.scale,
...PINK_COLOR_TOKENS.scale,
...RED_COLOR_TOKENS.scale,
...ORANGE_COLOR_TOKENS.scale,
...GRAY_COLOR_TOKENS.scale,
...MAUVE_COLOR_TOKENS.scale,
...SLATE_COLOR_TOKENS.scale,
...SAGE_COLOR_TOKENS.scale,
...OLIVE_COLOR_TOKENS.scale,
...SAND_COLOR_TOKENS.scale,
...TOMATO_COLOR_TOKENS.scale,
...RUBY_COLOR_TOKENS.scale,
...CRIMSON_COLOR_TOKENS.scale,
...PLUM_COLOR_TOKENS.scale,
...VIOLET_COLOR_TOKENS.scale,
...IRIS_COLOR_TOKENS.scale,
...CYAN_COLOR_TOKENS.scale,
...JADE_COLOR_TOKENS.scale,
...GRASS_COLOR_TOKENS.scale,
...MINT_COLOR_TOKENS.scale,
...LIME_COLOR_TOKENS.scale,
...BRONZE_COLOR_TOKENS.scale,
...GOLD_COLOR_TOKENS.scale,
...BROWN_COLOR_TOKENS.scale,
...AMBER_COLOR_TOKENS.scale,
transparent: {
...GREEN_COLOR_TOKENS.transparent,
...TURQUOISE_COLOR_TOKENS.transparent,
...SKY_COLOR_TOKENS.transparent,
...BLUE_COLOR_TOKENS.transparent,
...PURPLE_COLOR_TOKENS.transparent,
...PINK_COLOR_TOKENS.transparent,
...RED_COLOR_TOKENS.transparent,
...ORANGE_COLOR_TOKENS.transparent,
...YELLOW_COLOR_TOKENS.transparent,
...GRAY_COLOR_TOKENS.transparent,
...MAUVE_COLOR_TOKENS.transparent,
...SLATE_COLOR_TOKENS.transparent,
...SAGE_COLOR_TOKENS.transparent,
...OLIVE_COLOR_TOKENS.transparent,
...SAND_COLOR_TOKENS.transparent,
...TOMATO_COLOR_TOKENS.transparent,
...RUBY_COLOR_TOKENS.transparent,
...CRIMSON_COLOR_TOKENS.transparent,
...PLUM_COLOR_TOKENS.transparent,
...VIOLET_COLOR_TOKENS.transparent,
...IRIS_COLOR_TOKENS.transparent,
...CYAN_COLOR_TOKENS.transparent,
...JADE_COLOR_TOKENS.transparent,
...GRASS_COLOR_TOKENS.transparent,
...MINT_COLOR_TOKENS.transparent,
...LIME_COLOR_TOKENS.transparent,
...BRONZE_COLOR_TOKENS.transparent,
...GOLD_COLOR_TOKENS.transparent,
...BROWN_COLOR_TOKENS.transparent,
...AMBER_COLOR_TOKENS.transparent,
},
};

65
packages/twenty-ui/design-tokens/color/iris.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const IRIS_COLOR_TOKENS = {
scale: {
iris1: token({
light: 'color(display-p3 0.992 0.992 0.999)',
dark: 'color(display-p3 0.075 0.075 0.114)',
}),
iris2: token({
light: 'color(display-p3 0.972 0.973 0.998)',
dark: 'color(display-p3 0.089 0.086 0.14)',
}),
iris3: token({
light: 'color(display-p3 0.943 0.945 0.992)',
dark: 'color(display-p3 0.128 0.134 0.272)',
}),
iris4: token({
light: 'color(display-p3 0.902 0.906 1)',
dark: 'color(display-p3 0.153 0.165 0.382)',
}),
iris5: token({
light: 'color(display-p3 0.857 0.861 1)',
dark: 'color(display-p3 0.192 0.201 0.44)',
}),
iris6: token({
light: 'color(display-p3 0.799 0.805 0.987)',
dark: 'color(display-p3 0.239 0.241 0.491)',
}),
iris7: token({
light: 'color(display-p3 0.721 0.727 0.955)',
dark: 'color(display-p3 0.291 0.289 0.565)',
}),
iris8: token({
light: 'color(display-p3 0.61 0.619 0.918)',
dark: 'color(display-p3 0.35 0.345 0.673)',
}),
iris9: token('color(display-p3 0.357 0.357 0.81)'),
iris10: token({
light: 'color(display-p3 0.318 0.318 0.774)',
dark: 'color(display-p3 0.428 0.416 0.843)',
}),
iris11: token({
light: 'color(display-p3 0.337 0.326 0.748)',
dark: 'color(display-p3 0.685 0.662 1)',
}),
iris12: token({
light: 'color(display-p3 0.154 0.161 0.371)',
dark: 'color(display-p3 0.878 0.875 0.986)',
}),
},
transparent: {
iris1: token({ light: '#0000ff02', dark: '#3636fe0e' }),
iris2: token({ light: '#0000ff07', dark: '#564bf916' }),
iris3: token({ light: '#0011ee0f', dark: '#525bff3b' }),
iris4: token({ light: '#000bff19', dark: '#4d58ff5a' }),
iris5: token({ light: '#000eff25', dark: '#5b62fd6b' }),
iris6: token({ light: '#000aff34', dark: '#6d6ffd7a' }),
iris7: token({ light: '#0008e647', dark: '#7777fe8e' }),
iris8: token({ light: '#0008d964', dark: '#7b7afeac' }),
iris9: token({ light: '#0000c0a4', dark: '#6a6afed4' }),
iris10: token({ light: '#0000b6ae', dark: '#7d79ffdc' }),
iris11: token({ light: '#0600abac', dark: '#b1a9ff' }),
iris12: token({ light: '#000246d8', dark: '#e1e0fffe' }),
},
};

65
packages/twenty-ui/design-tokens/color/jade.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const JADE_COLOR_TOKENS = {
scale: {
jade1: token({
light: 'color(display-p3 0.986 0.996 0.992)',
dark: 'color(display-p3 0.059 0.083 0.071)',
}),
jade2: token({
light: 'color(display-p3 0.962 0.983 0.969)',
dark: 'color(display-p3 0.078 0.11 0.094)',
}),
jade3: token({
light: 'color(display-p3 0.912 0.965 0.932)',
dark: 'color(display-p3 0.091 0.176 0.138)',
}),
jade4: token({
light: 'color(display-p3 0.858 0.941 0.893)',
dark: 'color(display-p3 0.102 0.228 0.177)',
}),
jade5: token({
light: 'color(display-p3 0.795 0.909 0.847)',
dark: 'color(display-p3 0.133 0.279 0.221)',
}),
jade6: token({
light: 'color(display-p3 0.715 0.864 0.791)',
dark: 'color(display-p3 0.174 0.334 0.273)',
}),
jade7: token({
light: 'color(display-p3 0.603 0.802 0.718)',
dark: 'color(display-p3 0.219 0.402 0.335)',
}),
jade8: token({
light: 'color(display-p3 0.44 0.72 0.629)',
dark: 'color(display-p3 0.263 0.488 0.411)',
}),
jade9: token('color(display-p3 0.319 0.63 0.521)'),
jade10: token({
light: 'color(display-p3 0.299 0.592 0.488)',
dark: 'color(display-p3 0.338 0.68 0.555)',
}),
jade11: token({
light: 'color(display-p3 0.15 0.5 0.37)',
dark: 'color(display-p3 0.4 0.835 0.656)',
}),
jade12: token({
light: 'color(display-p3 0.142 0.229 0.194)',
dark: 'color(display-p3 0.734 0.934 0.838)',
}),
},
transparent: {
jade1: token({ light: '#00c08004', dark: '#00de4505' }),
jade2: token({ light: '#00a3460b', dark: '#27fba60c' }),
jade3: token({ light: '#00ae4819', dark: '#02f99920' }),
jade4: token({ light: '#00a85129', dark: '#00ffaa2d' }),
jade5: token({ light: '#00a2553c', dark: '#11ffb63b' }),
jade6: token({ light: '#009a5753', dark: '#34ffc24b' }),
jade7: token({ light: '#00945f74', dark: '#45fdc75e' }),
jade8: token({ light: '#00976ea9', dark: '#48ffcf75' }),
jade9: token({ light: '#00916bd6', dark: '#38feca9d' }),
jade10: token({ light: '#008764d9', dark: '#31fec7ab' }),
jade11: token({ light: '#007152df', dark: '#21fec0d6' }),
jade12: token({ light: '#002217e2', dark: '#b8ffe1ef' }),
},
};

65
packages/twenty-ui/design-tokens/color/lime.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const LIME_COLOR_TOKENS = {
scale: {
lime1: token({
light: 'color(display-p3 0.989 0.992 0.981)',
dark: 'color(display-p3 0.067 0.073 0.048)',
}),
lime2: token({
light: 'color(display-p3 0.975 0.98 0.954)',
dark: 'color(display-p3 0.086 0.1 0.067)',
}),
lime3: token({
light: 'color(display-p3 0.939 0.965 0.851)',
dark: 'color(display-p3 0.13 0.16 0.099)',
}),
lime4: token({
light: 'color(display-p3 0.896 0.94 0.76)',
dark: 'color(display-p3 0.172 0.214 0.126)',
}),
lime5: token({
light: 'color(display-p3 0.843 0.903 0.678)',
dark: 'color(display-p3 0.213 0.266 0.153)',
}),
lime6: token({
light: 'color(display-p3 0.778 0.852 0.599)',
dark: 'color(display-p3 0.257 0.321 0.182)',
}),
lime7: token({
light: 'color(display-p3 0.694 0.784 0.508)',
dark: 'color(display-p3 0.307 0.383 0.215)',
}),
lime8: token({
light: 'color(display-p3 0.585 0.707 0.378)',
dark: 'color(display-p3 0.365 0.456 0.25)',
}),
lime9: token('color(display-p3 0.78 0.928 0.466)'),
lime10: token({
light: 'color(display-p3 0.734 0.896 0.397)',
dark: 'color(display-p3 0.865 0.995 0.519)',
}),
lime11: token({
light: 'color(display-p3 0.386 0.482 0.227)',
dark: 'color(display-p3 0.771 0.893 0.485)',
}),
lime12: token({
light: 'color(display-p3 0.222 0.25 0.128)',
dark: 'color(display-p3 0.905 0.966 0.753)',
}),
},
transparent: {
lime1: token({ light: '#66990005', dark: '#11bb0003' }),
lime2: token({ light: '#6b95000c', dark: '#78f7000a' }),
lime3: token({ light: '#96c80029', dark: '#9bfd4c1a' }),
lime4: token({ light: '#8fc60042', dark: '#a7fe5c29' }),
lime5: token({ light: '#81bb0059', dark: '#affe6537' }),
lime6: token({ light: '#72aa006e', dark: '#b2fe6d46' }),
lime7: token({ light: '#61990087', dark: '#b6ff6f57' }),
lime8: token({ light: '#559200ab', dark: '#b6fd6d6c' }),
lime9: token({ light: '#93e4009c', dark: '#caff69ed' }),
lime10: token({ light: '#8fdc00b3', dark: '#d4ff70' }),
lime11: token({ light: '#375f00d0', dark: '#d1fe77e4' }),
lime12: token({ light: '#1e2900e3', dark: '#e9febff7' }),
},
};

57
packages/twenty-ui/design-tokens/color/mainColors.ts Normal file
View File

@@ -0,0 +1,57 @@
import { AMBER_COLOR_TOKENS } from './amber';
import { BLUE_COLOR_TOKENS } from './blue';
import { BRONZE_COLOR_TOKENS } from './bronze';
import { BROWN_COLOR_TOKENS } from './brown';
import { CRIMSON_COLOR_TOKENS } from './crimson';
import { CYAN_COLOR_TOKENS } from './cyan';
import { GOLD_COLOR_TOKENS } from './gold';
import { GRASS_COLOR_TOKENS } from './grass';
import { GRAY_COLOR_TOKENS } from './gray';
import { GREEN_COLOR_TOKENS } from './green';
import { IRIS_COLOR_TOKENS } from './iris';
import { JADE_COLOR_TOKENS } from './jade';
import { LIME_COLOR_TOKENS } from './lime';
import { MINT_COLOR_TOKENS } from './mint';
import { ORANGE_COLOR_TOKENS } from './orange';
import { PINK_COLOR_TOKENS } from './pink';
import { PLUM_COLOR_TOKENS } from './plum';
import { PURPLE_COLOR_TOKENS } from './purple';
import { RED_COLOR_TOKENS } from './red';
import { RUBY_COLOR_TOKENS } from './ruby';
import { SKY_COLOR_TOKENS } from './sky';
import { TOMATO_COLOR_TOKENS } from './tomato';
import { TURQUOISE_COLOR_TOKENS } from './turquoise';
import { VIOLET_COLOR_TOKENS } from './violet';
import { YELLOW_COLOR_TOKENS } from './yellow';
import { token } from '../token';
export const MAIN_COLOR_TOKENS = {
red: RED_COLOR_TOKENS.scale.red9,
ruby: RUBY_COLOR_TOKENS.scale.ruby9,
crimson: CRIMSON_COLOR_TOKENS.scale.crimson9,
tomato: TOMATO_COLOR_TOKENS.scale.tomato9,
orange: ORANGE_COLOR_TOKENS.scale.orange9,
amber: AMBER_COLOR_TOKENS.scale.amber9,
yellow: YELLOW_COLOR_TOKENS.scale.yellow9,
lime: LIME_COLOR_TOKENS.scale.lime9,
grass: GRASS_COLOR_TOKENS.scale.grass9,
green: GREEN_COLOR_TOKENS.scale.green9,
jade: JADE_COLOR_TOKENS.scale.jade9,
mint: MINT_COLOR_TOKENS.scale.mint9,
turquoise: TURQUOISE_COLOR_TOKENS.scale.turquoise9,
cyan: CYAN_COLOR_TOKENS.scale.cyan9,
sky: SKY_COLOR_TOKENS.scale.sky9,
blue: BLUE_COLOR_TOKENS.scale.blue9,
iris: IRIS_COLOR_TOKENS.scale.iris9,
violet: VIOLET_COLOR_TOKENS.scale.violet9,
purple: PURPLE_COLOR_TOKENS.scale.purple9,
plum: PLUM_COLOR_TOKENS.scale.plum9,
pink: PINK_COLOR_TOKENS.scale.pink9,
bronze: BRONZE_COLOR_TOKENS.scale.bronze9,
gold: GOLD_COLOR_TOKENS.scale.gold9,
brown: BROWN_COLOR_TOKENS.scale.brown9,
gray: token({
light: GRAY_COLOR_TOKENS.scale.gray9.light,
dark: GRAY_COLOR_TOKENS.scale.gray7.dark,
}),
};

68
packages/twenty-ui/design-tokens/color/mauve.ts Normal file
View File

@@ -0,0 +1,68 @@
import { token } from '../token';
export const MAUVE_COLOR_TOKENS = {
scale: {
mauve1: token({
light: 'color(display-p3 0.991 0.988 0.992)',
dark: 'color(display-p3 0.07 0.067 0.074)',
}),
mauve2: token({
light: 'color(display-p3 0.98 0.976 0.984)',
dark: 'color(display-p3 0.101 0.098 0.105)',
}),
mauve3: token({
light: 'color(display-p3 0.946 0.938 0.952)',
dark: 'color(display-p3 0.138 0.134 0.144)',
}),
mauve4: token({
light: 'color(display-p3 0.915 0.906 0.925)',
dark: 'color(display-p3 0.167 0.161 0.175)',
}),
mauve5: token({
light: 'color(display-p3 0.886 0.876 0.901)',
dark: 'color(display-p3 0.196 0.189 0.206)',
}),
mauve6: token({
light: 'color(display-p3 0.856 0.846 0.875)',
dark: 'color(display-p3 0.232 0.225 0.245)',
}),
mauve7: token({
light: 'color(display-p3 0.814 0.804 0.84)',
dark: 'color(display-p3 0.286 0.277 0.302)',
}),
mauve8: token({
light: 'color(display-p3 0.735 0.728 0.777)',
dark: 'color(display-p3 0.383 0.373 0.408)',
}),
mauve9: token({
light: 'color(display-p3 0.555 0.549 0.596)',
dark: 'color(display-p3 0.434 0.428 0.467)',
}),
mauve10: token({
light: 'color(display-p3 0.514 0.508 0.552)',
dark: 'color(display-p3 0.487 0.48 0.519)',
}),
mauve11: token({
light: 'color(display-p3 0.395 0.388 0.424)',
dark: 'color(display-p3 0.707 0.7 0.735)',
}),
mauve12: token({
light: 'color(display-p3 0.128 0.122 0.147)',
dark: 'color(display-p3 0.933 0.933 0.94)',
}),
},
transparent: {
mauve1: token({ light: '#55005503', dark: '#00000000' }),
mauve2: token({ light: '#2b005506', dark: '#f5f4f609' }),
mauve3: token({ light: '#30004010', dark: '#ebeaf814' }),
mauve4: token({ light: '#20003618', dark: '#eee5f81d' }),
mauve5: token({ light: '#20003820', dark: '#efe6fe25' }),
mauve6: token({ light: '#14003527', dark: '#f1e6fd30' }),
mauve7: token({ light: '#10003332', dark: '#eee9ff40' }),
mauve8: token({ light: '#08003145', dark: '#eee7ff5d' }),
mauve9: token({ light: '#05001d73', dark: '#eae6fd6e' }),
mauve10: token({ light: '#0500197d', dark: '#ece9fd7c' }),
mauve11: token({ light: '#0400119c', dark: '#f5f1ffb7' }),
mauve12: token({ light: '#020008e0', dark: '#fdfdffef' }),
},
};

65
packages/twenty-ui/design-tokens/color/mint.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const MINT_COLOR_TOKENS = {
scale: {
mint1: token({
light: 'color(display-p3 0.98 0.995 0.992)',
dark: 'color(display-p3 0.059 0.082 0.081)',
}),
mint2: token({
light: 'color(display-p3 0.957 0.985 0.977)',
dark: 'color(display-p3 0.068 0.104 0.105)',
}),
mint3: token({
light: 'color(display-p3 0.888 0.972 0.95)',
dark: 'color(display-p3 0.077 0.17 0.168)',
}),
mint4: token({
light: 'color(display-p3 0.819 0.951 0.916)',
dark: 'color(display-p3 0.068 0.224 0.22)',
}),
mint5: token({
light: 'color(display-p3 0.747 0.918 0.873)',
dark: 'color(display-p3 0.104 0.275 0.264)',
}),
mint6: token({
light: 'color(display-p3 0.668 0.87 0.818)',
dark: 'color(display-p3 0.154 0.332 0.313)',
}),
mint7: token({
light: 'color(display-p3 0.567 0.805 0.744)',
dark: 'color(display-p3 0.207 0.403 0.373)',
}),
mint8: token({
light: 'color(display-p3 0.42 0.724 0.649)',
dark: 'color(display-p3 0.258 0.49 0.441)',
}),
mint9: token('color(display-p3 0.62 0.908 0.834)'),
mint10: token({
light: 'color(display-p3 0.585 0.871 0.797)',
dark: 'color(display-p3 0.725 0.954 0.898)',
}),
mint11: token({
light: 'color(display-p3 0.203 0.463 0.397)',
dark: 'color(display-p3 0.482 0.825 0.733)',
}),
mint12: token({
light: 'color(display-p3 0.136 0.259 0.236)',
dark: 'color(display-p3 0.807 0.955 0.887)',
}),
},
transparent: {
mint1: token({ light: '#00d5aa06', dark: '#00dede05' }),
mint2: token({ light: '#00b18a0d', dark: '#00f9f90b' }),
mint3: token({ light: '#00d29e22', dark: '#00fff61d' }),
mint4: token({ light: '#00cc9937', dark: '#00fff42c' }),
mint5: token({ light: '#00c0914c', dark: '#00fff23a' }),
mint6: token({ light: '#00b08663', dark: '#0effeb4a' }),
mint7: token({ light: '#00a17d81', dark: '#34fde55e' }),
mint8: token({ light: '#009e7fb3', dark: '#41ffdf76' }),
mint9: token({ light: '#00d3a579', dark: '#92ffe7e9' }),
mint10: token({ light: '#00c39982', dark: '#aefeedf5' }),
mint11: token({ light: '#007763fd', dark: '#67ffded2' }),
mint12: token({ light: '#00312ae9', dark: '#cbfee9f5' }),
},
};

68
packages/twenty-ui/design-tokens/color/olive.ts Normal file
View File

@@ -0,0 +1,68 @@
import { token } from '../token';
export const OLIVE_COLOR_TOKENS = {
scale: {
olive1: token({
light: 'color(display-p3 0.989 0.992 0.989)',
dark: 'color(display-p3 0.067 0.07 0.063)',
}),
olive2: token({
light: 'color(display-p3 0.974 0.98 0.973)',
dark: 'color(display-p3 0.095 0.098 0.091)',
}),
olive3: token({
light: 'color(display-p3 0.939 0.945 0.937)',
dark: 'color(display-p3 0.131 0.135 0.126)',
}),
olive4: token({
light: 'color(display-p3 0.907 0.914 0.905)',
dark: 'color(display-p3 0.158 0.163 0.153)',
}),
olive5: token({
light: 'color(display-p3 0.878 0.885 0.875)',
dark: 'color(display-p3 0.186 0.192 0.18)',
}),
olive6: token({
light: 'color(display-p3 0.846 0.855 0.843)',
dark: 'color(display-p3 0.221 0.229 0.215)',
}),
olive7: token({
light: 'color(display-p3 0.803 0.812 0.8)',
dark: 'color(display-p3 0.273 0.284 0.266)',
}),
olive8: token({
light: 'color(display-p3 0.727 0.738 0.723)',
dark: 'color(display-p3 0.365 0.382 0.359)',
}),
olive9: token({
light: 'color(display-p3 0.541 0.556 0.532)',
dark: 'color(display-p3 0.414 0.438 0.404)',
}),
olive10: token({
light: 'color(display-p3 0.5 0.515 0.491)',
dark: 'color(display-p3 0.467 0.49 0.458)',
}),
olive11: token({
light: 'color(display-p3 0.38 0.395 0.374)',
dark: 'color(display-p3 0.69 0.709 0.682)',
}),
olive12: token({
light: 'color(display-p3 0.117 0.129 0.111)',
dark: 'color(display-p3 0.927 0.933 0.926)',
}),
},
transparent: {
olive1: token({ light: '#00550003', dark: '#00000000' }),
olive2: token({ light: '#00490007', dark: '#f1f2f008' }),
olive3: token({ light: '#00200010', dark: '#f4f5f312' }),
olive4: token({ light: '#00160018', dark: '#f3fef21a' }),
olive5: token({ light: '#00180020', dark: '#f2fbf122' }),
olive6: token({ light: '#00140028', dark: '#f4faed2c' }),
olive7: token({ light: '#000f0033', dark: '#f2fced3b' }),
olive8: token({ light: '#040f0047', dark: '#edfdeb57' }),
olive9: token({ light: '#050f0078', dark: '#ebfde766' }),
olive10: token({ light: '#040e0082', dark: '#f0fdec74' }),
olive11: token({ light: '#020a00a0', dark: '#f6fef4b0' }),
olive12: token({ light: '#010600e3', dark: '#fdfffded' }),
},
};

65
packages/twenty-ui/design-tokens/color/orange.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const ORANGE_COLOR_TOKENS = {
scale: {
orange1: token({
light: 'color(display-p3 0.995 0.988 0.985)',
dark: 'color(display-p3 0.088 0.07 0.057)',
}),
orange2: token({
light: 'color(display-p3 0.994 0.968 0.934)',
dark: 'color(display-p3 0.113 0.089 0.061)',
}),
orange3: token({
light: 'color(display-p3 0.989 0.938 0.85)',
dark: 'color(display-p3 0.189 0.12 0.056)',
}),
orange4: token({
light: 'color(display-p3 1 0.874 0.687)',
dark: 'color(display-p3 0.262 0.132 0)',
}),
orange5: token({
light: 'color(display-p3 1 0.821 0.583)',
dark: 'color(display-p3 0.315 0.168 0.016)',
}),
orange6: token({
light: 'color(display-p3 0.975 0.767 0.545)',
dark: 'color(display-p3 0.376 0.219 0.088)',
}),
orange7: token({
light: 'color(display-p3 0.919 0.693 0.486)',
dark: 'color(display-p3 0.465 0.283 0.147)',
}),
orange8: token({
light: 'color(display-p3 0.877 0.597 0.379)',
dark: 'color(display-p3 0.601 0.359 0.201)',
}),
orange9: token('color(display-p3 0.9 0.45 0.2)'),
orange10: token({
light: 'color(display-p3 0.87 0.409 0.164)',
dark: 'color(display-p3 0.98 0.51 0.23)',
}),
orange11: token({
light: 'color(display-p3 0.76 0.34 0)',
dark: 'color(display-p3 1 0.63 0.38)',
}),
orange12: token({
light: 'color(display-p3 0.323 0.185 0.127)',
dark: 'color(display-p3 0.98 0.883 0.775)',
}),
},
transparent: {
orange1: token({ light: '#c0400004', dark: '#ec360007' }),
orange2: token({ light: '#ff8e0012', dark: '#fe6d000e' }),
orange3: token({ light: '#ff9c0029', dark: '#fb6a0025' }),
orange4: token({ light: '#ff91014a', dark: '#ff590039' }),
orange5: token({ light: '#ff8b0065', dark: '#ff61004a' }),
orange6: token({ light: '#ff81007d', dark: '#fd75045c' }),
orange7: token({ light: '#ed6c008c', dark: '#ff832c75' }),
orange8: token({ light: '#e35f00aa', dark: '#fe84389d' }),
orange9: token({ light: '#f65e00ea', dark: '#fe6d15f7' }),
orange10: token({ light: '#ef5f00', dark: '#ff801f' }),
orange11: token({ light: '#cc4e00', dark: '#ffa057' }),
orange12: token({ light: '#431200e2', dark: '#ffe0c2' }),
},
};

65
packages/twenty-ui/design-tokens/color/pink.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const PINK_COLOR_TOKENS = {
scale: {
pink1: token({
light: 'color(display-p3 0.998 0.989 0.996)',
dark: 'color(display-p3 0.093 0.068 0.089)',
}),
pink2: token({
light: 'color(display-p3 0.992 0.97 0.985)',
dark: 'color(display-p3 0.121 0.073 0.11)',
}),
pink3: token({
light: 'color(display-p3 0.981 0.917 0.96)',
dark: 'color(display-p3 0.198 0.098 0.179)',
}),
pink4: token({
light: 'color(display-p3 0.963 0.867 0.932)',
dark: 'color(display-p3 0.271 0.095 0.231)',
}),
pink5: token({
light: 'color(display-p3 0.939 0.815 0.899)',
dark: 'color(display-p3 0.32 0.127 0.273)',
}),
pink6: token({
light: 'color(display-p3 0.907 0.756 0.859)',
dark: 'color(display-p3 0.382 0.177 0.326)',
}),
pink7: token({
light: 'color(display-p3 0.869 0.683 0.81)',
dark: 'color(display-p3 0.477 0.238 0.405)',
}),
pink8: token({
light: 'color(display-p3 0.825 0.59 0.751)',
dark: 'color(display-p3 0.612 0.304 0.51)',
}),
pink9: token('color(display-p3 0.775 0.297 0.61)'),
pink10: token({
light: 'color(display-p3 0.748 0.27 0.581)',
dark: 'color(display-p3 0.808 0.356 0.645)',
}),
pink11: token({
light: 'color(display-p3 0.698 0.219 0.528)',
dark: 'color(display-p3 1 0.535 0.78)',
}),
pink12: token({
light: 'color(display-p3 0.363 0.101 0.279)',
dark: 'color(display-p3 0.964 0.826 0.912)',
}),
},
transparent: {
pink1: token({ light: '#ff00aa03', dark: '#f412bc09' }),
pink2: token({ light: '#e0008008', dark: '#f420bb12' }),
pink3: token({ light: '#f4008c16', dark: '#fe37cc29' }),
pink4: token({ light: '#e2008b23', dark: '#fc1ec43f' }),
pink5: token({ light: '#d1008331', dark: '#fd35c24e' }),
pink6: token({ light: '#c0007840', dark: '#fd51c75f' }),
pink7: token({ light: '#b6006f53', dark: '#fd62c87b' }),
pink8: token({ light: '#af006f6c', dark: '#ff68c8a2' }),
pink9: token({ light: '#c8007fbf', dark: '#fe49bcd4' }),
pink10: token({ light: '#c2007ac7', dark: '#ff5cc0dc' }),
pink11: token({ light: '#b60074d6', dark: '#ff8dcc' }),
pink12: token({ light: '#59003bed', dark: '#ffd3ecfd' }),
},
};

65
packages/twenty-ui/design-tokens/color/plum.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const PLUM_COLOR_TOKENS = {
scale: {
plum1: token({
light: 'color(display-p3 0.995 0.988 0.999)',
dark: 'color(display-p3 0.09 0.068 0.092)',
}),
plum2: token({
light: 'color(display-p3 0.988 0.971 0.99)',
dark: 'color(display-p3 0.118 0.077 0.121)',
}),
plum3: token({
light: 'color(display-p3 0.973 0.923 0.98)',
dark: 'color(display-p3 0.192 0.105 0.202)',
}),
plum4: token({
light: 'color(display-p3 0.953 0.875 0.966)',
dark: 'color(display-p3 0.25 0.121 0.271)',
}),
plum5: token({
light: 'color(display-p3 0.926 0.825 0.945)',
dark: 'color(display-p3 0.293 0.152 0.319)',
}),
plum6: token({
light: 'color(display-p3 0.89 0.765 0.916)',
dark: 'color(display-p3 0.343 0.198 0.372)',
}),
plum7: token({
light: 'color(display-p3 0.84 0.686 0.877)',
dark: 'color(display-p3 0.424 0.262 0.461)',
}),
plum8: token({
light: 'color(display-p3 0.775 0.58 0.832)',
dark: 'color(display-p3 0.54 0.341 0.595)',
}),
plum9: token('color(display-p3 0.624 0.313 0.708)'),
plum10: token({
light: 'color(display-p3 0.587 0.29 0.667)',
dark: 'color(display-p3 0.666 0.365 0.748)',
}),
plum11: token({
light: 'color(display-p3 0.543 0.263 0.619)',
dark: 'color(display-p3 0.86 0.602 0.933)',
}),
plum12: token({
light: 'color(display-p3 0.299 0.114 0.352)',
dark: 'color(display-p3 0.936 0.836 0.949)',
}),
},
transparent: {
plum1: token({ light: '#aa00ff03', dark: '#f112f108' }),
plum2: token({ light: '#c000c008', dark: '#f22ff211' }),
plum3: token({ light: '#cc00cc14', dark: '#fd4cfd27' }),
plum4: token({ light: '#c200c921', dark: '#f646ff3a' }),
plum5: token({ light: '#b700bd2e', dark: '#f455ff48' }),
plum6: token({ light: '#a400b03d', dark: '#f66dff56' }),
plum7: token({ light: '#9900a852', dark: '#f07cfd70' }),
plum8: token({ light: '#9000a56e', dark: '#ee84ff95' }),
plum9: token({ light: '#89009eb5', dark: '#e961feb6' }),
plum10: token({ light: '#7f0092bb', dark: '#ed70ffc0' }),
plum11: token({ light: '#730086c1', dark: '#f19cfef3' }),
plum12: token({ light: '#40004be6', dark: '#feddfef4' }),
},
};

65
packages/twenty-ui/design-tokens/color/purple.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const PURPLE_COLOR_TOKENS = {
scale: {
purple1: token({
light: 'color(display-p3 0.995 0.988 0.996)',
dark: 'color(display-p3 0.09 0.068 0.103)',
}),
purple2: token({
light: 'color(display-p3 0.983 0.971 0.993)',
dark: 'color(display-p3 0.113 0.082 0.134)',
}),
purple3: token({
light: 'color(display-p3 0.963 0.931 0.989)',
dark: 'color(display-p3 0.175 0.112 0.224)',
}),
purple4: token({
light: 'color(display-p3 0.937 0.888 0.981)',
dark: 'color(display-p3 0.224 0.137 0.297)',
}),
purple5: token({
light: 'color(display-p3 0.904 0.837 0.966)',
dark: 'color(display-p3 0.264 0.167 0.349)',
}),
purple6: token({
light: 'color(display-p3 0.86 0.774 0.942)',
dark: 'color(display-p3 0.311 0.208 0.406)',
}),
purple7: token({
light: 'color(display-p3 0.799 0.69 0.91)',
dark: 'color(display-p3 0.381 0.266 0.496)',
}),
purple8: token({
light: 'color(display-p3 0.719 0.583 0.874)',
dark: 'color(display-p3 0.49 0.349 0.649)',
}),
purple9: token('color(display-p3 0.523 0.318 0.751)'),
purple10: token({
light: 'color(display-p3 0.483 0.289 0.7)',
dark: 'color(display-p3 0.57 0.373 0.791)',
}),
purple11: token({
light: 'color(display-p3 0.473 0.281 0.687)',
dark: 'color(display-p3 0.8 0.62 1)',
}),
purple12: token({
light: 'color(display-p3 0.234 0.132 0.363)',
dark: 'color(display-p3 0.913 0.854 0.971)',
}),
},
transparent: {
purple1: token({ light: '#aa00aa03', dark: '#b412f90b' }),
purple2: token({ light: '#8000e008', dark: '#b744f714' }),
purple3: token({ light: '#8e00f112', dark: '#c150ff2d' }),
purple4: token({ light: '#8d00e51d', dark: '#bb53fd42' }),
purple5: token({ light: '#8000db2a', dark: '#be5cfd51' }),
purple6: token({ light: '#7a01d03b', dark: '#c16dfd61' }),
purple7: token({ light: '#6d00c350', dark: '#c378fd7a' }),
purple8: token({ light: '#6600c06c', dark: '#c47effa4' }),
purple9: token({ light: '#5c00adb1', dark: '#b661ffc2' }),
purple10: token({ light: '#53009eb8', dark: '#bc6fffcd' }),
purple11: token({ light: '#52009aba', dark: '#d19dff' }),
purple12: token({ light: '#250049df', dark: '#f1ddfffa' }),
},
};

65
packages/twenty-ui/design-tokens/color/red.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const RED_COLOR_TOKENS = {
scale: {
red1: token({
light: 'color(display-p3 0.998 0.989 0.988)',
dark: 'color(display-p3 0.093 0.068 0.067)',
}),
red2: token({
light: 'color(display-p3 0.995 0.971 0.971)',
dark: 'color(display-p3 0.118 0.077 0.079)',
}),
red3: token({
light: 'color(display-p3 0.985 0.925 0.925)',
dark: 'color(display-p3 0.211 0.081 0.099)',
}),
red4: token({
light: 'color(display-p3 0.999 0.866 0.866)',
dark: 'color(display-p3 0.287 0.079 0.113)',
}),
red5: token({
light: 'color(display-p3 0.984 0.812 0.811)',
dark: 'color(display-p3 0.348 0.11 0.142)',
}),
red6: token({
light: 'color(display-p3 0.955 0.751 0.749)',
dark: 'color(display-p3 0.414 0.16 0.183)',
}),
red7: token({
light: 'color(display-p3 0.915 0.675 0.672)',
dark: 'color(display-p3 0.508 0.224 0.236)',
}),
red8: token({
light: 'color(display-p3 0.872 0.575 0.572)',
dark: 'color(display-p3 0.659 0.298 0.297)',
}),
red9: token('color(display-p3 0.83 0.329 0.324)'),
red10: token({
light: 'color(display-p3 0.798 0.294 0.285)',
dark: 'color(display-p3 0.861 0.403 0.387)',
}),
red11: token({
light: 'color(display-p3 0.744 0.234 0.222)',
dark: 'color(display-p3 1 0.57 0.55)',
}),
red12: token({
light: 'color(display-p3 0.36 0.115 0.143)',
dark: 'color(display-p3 0.971 0.826 0.852)',
}),
},
transparent: {
red1: token({ light: '#ff000003', dark: '#f4121209' }),
red2: token({ light: '#ff000008', dark: '#f22f3e11' }),
red3: token({ light: '#f3000d14', dark: '#ff173f2d' }),
red4: token({ light: '#ff000824', dark: '#fe0a3b44' }),
red5: token({ light: '#ff000632', dark: '#ff204756' }),
red6: token({ light: '#f8000442', dark: '#ff3e5668' }),
red7: token({ light: '#df000356', dark: '#ff536184' }),
red8: token({ light: '#d2000571', dark: '#ff5d61b0' }),
red9: token({ light: '#db0007b7', dark: '#fe4e54e4' }),
red10: token({ light: '#d10005c1', dark: '#ff6465eb' }),
red11: token({ light: '#c40006d3', dark: '#ff9592' }),
red12: token({ light: '#55000de8', dark: '#ffd1d9' }),
},
};

65
packages/twenty-ui/design-tokens/color/ruby.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const RUBY_COLOR_TOKENS = {
scale: {
ruby1: token({
light: 'color(display-p3 0.998 0.989 0.992)',
dark: 'color(display-p3 0.093 0.068 0.074)',
}),
ruby2: token({
light: 'color(display-p3 0.995 0.971 0.974)',
dark: 'color(display-p3 0.113 0.083 0.089)',
}),
ruby3: token({
light: 'color(display-p3 0.983 0.92 0.928)',
dark: 'color(display-p3 0.208 0.088 0.117)',
}),
ruby4: token({
light: 'color(display-p3 0.987 0.869 0.885)',
dark: 'color(display-p3 0.279 0.092 0.147)',
}),
ruby5: token({
light: 'color(display-p3 0.968 0.817 0.839)',
dark: 'color(display-p3 0.337 0.12 0.18)',
}),
ruby6: token({
light: 'color(display-p3 0.937 0.758 0.786)',
dark: 'color(display-p3 0.401 0.166 0.223)',
}),
ruby7: token({
light: 'color(display-p3 0.897 0.685 0.721)',
dark: 'color(display-p3 0.495 0.224 0.281)',
}),
ruby8: token({
light: 'color(display-p3 0.851 0.588 0.639)',
dark: 'color(display-p3 0.652 0.295 0.359)',
}),
ruby9: token('color(display-p3 0.83 0.323 0.408)'),
ruby10: token({
light: 'color(display-p3 0.795 0.286 0.375)',
dark: 'color(display-p3 0.857 0.392 0.455)',
}),
ruby11: token({
light: 'color(display-p3 0.728 0.211 0.311)',
dark: 'color(display-p3 1 0.57 0.59)',
}),
ruby12: token({
light: 'color(display-p3 0.36 0.115 0.171)',
dark: 'color(display-p3 0.968 0.83 0.88)',
}),
},
transparent: {
ruby1: token({ light: '#ff005503', dark: '#f4124a09' }),
ruby2: token({ light: '#ff002008', dark: '#fe5a7f0e' }),
ruby3: token({ light: '#f3002515', dark: '#ff235d2c' }),
ruby4: token({ light: '#ff002523', dark: '#fd195e42' }),
ruby5: token({ light: '#ff002a31', dark: '#fe2d6b53' }),
ruby6: token({ light: '#e4002440', dark: '#ff447665' }),
ruby7: token({ light: '#ce002553', dark: '#ff577d80' }),
ruby8: token({ light: '#c300286d', dark: '#ff5c7cae' }),
ruby9: token({ light: '#db002cb9', dark: '#fe4c70e4' }),
ruby10: token({ light: '#d2002cc4', dark: '#ff617beb' }),
ruby11: token({ light: '#c10030db', dark: '#ff949d' }),
ruby12: token({ light: '#550016e8', dark: '#ffd3e2fe' }),
},
};

68
packages/twenty-ui/design-tokens/color/sage.ts Normal file
View File

@@ -0,0 +1,68 @@
import { token } from '../token';
export const SAGE_COLOR_TOKENS = {
scale: {
sage1: token({
light: 'color(display-p3 0.986 0.992 0.988)',
dark: 'color(display-p3 0.064 0.07 0.067)',
}),
sage2: token({
light: 'color(display-p3 0.97 0.977 0.974)',
dark: 'color(display-p3 0.092 0.098 0.094)',
}),
sage3: token({
light: 'color(display-p3 0.935 0.944 0.94)',
dark: 'color(display-p3 0.128 0.135 0.131)',
}),
sage4: token({
light: 'color(display-p3 0.904 0.913 0.909)',
dark: 'color(display-p3 0.155 0.164 0.159)',
}),
sage5: token({
light: 'color(display-p3 0.875 0.885 0.88)',
dark: 'color(display-p3 0.183 0.193 0.188)',
}),
sage6: token({
light: 'color(display-p3 0.844 0.854 0.849)',
dark: 'color(display-p3 0.218 0.23 0.224)',
}),
sage7: token({
light: 'color(display-p3 0.8 0.811 0.806)',
dark: 'color(display-p3 0.269 0.285 0.277)',
}),
sage8: token({
light: 'color(display-p3 0.725 0.738 0.732)',
dark: 'color(display-p3 0.362 0.382 0.373)',
}),
sage9: token({
light: 'color(display-p3 0.531 0.556 0.546)',
dark: 'color(display-p3 0.398 0.438 0.421)',
}),
sage10: token({
light: 'color(display-p3 0.492 0.515 0.506)',
dark: 'color(display-p3 0.453 0.49 0.474)',
}),
sage11: token({
light: 'color(display-p3 0.377 0.395 0.389)',
dark: 'color(display-p3 0.685 0.709 0.697)',
}),
sage12: token({
light: 'color(display-p3 0.107 0.129 0.118)',
dark: 'color(display-p3 0.927 0.933 0.93)',
}),
},
transparent: {
sage1: token({ light: '#00804004', dark: '#00000000' }),
sage2: token({ light: '#00402008', dark: '#f0f2f108' }),
sage3: token({ light: '#002d1e11', dark: '#f3f5f412' }),
sage4: token({ light: '#001f1519', dark: '#f2fefd1a' }),
sage5: token({ light: '#00180820', dark: '#f1fbfa22' }),
sage6: token({ light: '#00140d28', dark: '#edfbf42d' }),
sage7: token({ light: '#00140a34', dark: '#edfcf73c' }),
sage8: token({ light: '#000f0847', dark: '#ebfdf657' }),
sage9: token({ light: '#00110b79', dark: '#dffdf266' }),
sage10: token({ light: '#00100a83', dark: '#e5fdf674' }),
sage11: token({ light: '#000a07a0', dark: '#f4fefbb0' }),
sage12: token({ light: '#000805e5', dark: '#fdfffeed' }),
},
};

68
packages/twenty-ui/design-tokens/color/sand.ts Normal file
View File

@@ -0,0 +1,68 @@
import { token } from '../token';
export const SAND_COLOR_TOKENS = {
scale: {
sand1: token({
light: 'color(display-p3 0.992 0.992 0.989)',
dark: 'color(display-p3 0.067 0.067 0.063)',
}),
sand2: token({
light: 'color(display-p3 0.977 0.977 0.973)',
dark: 'color(display-p3 0.098 0.098 0.094)',
}),
sand3: token({
light: 'color(display-p3 0.943 0.942 0.936)',
dark: 'color(display-p3 0.135 0.135 0.129)',
}),
sand4: token({
light: 'color(display-p3 0.913 0.912 0.903)',
dark: 'color(display-p3 0.164 0.163 0.156)',
}),
sand5: token({
light: 'color(display-p3 0.885 0.883 0.873)',
dark: 'color(display-p3 0.193 0.192 0.183)',
}),
sand6: token({
light: 'color(display-p3 0.854 0.852 0.839)',
dark: 'color(display-p3 0.23 0.229 0.217)',
}),
sand7: token({
light: 'color(display-p3 0.813 0.81 0.794)',
dark: 'color(display-p3 0.285 0.282 0.267)',
}),
sand8: token({
light: 'color(display-p3 0.738 0.734 0.713)',
dark: 'color(display-p3 0.384 0.378 0.357)',
}),
sand9: token({
light: 'color(display-p3 0.553 0.553 0.528)',
dark: 'color(display-p3 0.434 0.428 0.403)',
}),
sand10: token({
light: 'color(display-p3 0.511 0.511 0.488)',
dark: 'color(display-p3 0.487 0.481 0.456)',
}),
sand11: token({
light: 'color(display-p3 0.388 0.388 0.37)',
dark: 'color(display-p3 0.707 0.703 0.68)',
}),
sand12: token({
light: 'color(display-p3 0.129 0.126 0.111)',
dark: 'color(display-p3 0.933 0.933 0.926)',
}),
},
transparent: {
sand1: token({ light: '#55550003', dark: '#00000000' }),
sand2: token({ light: '#25250007', dark: '#f4f4f309' }),
sand3: token({ light: '#20100010', dark: '#f6f6f513' }),
sand4: token({ light: '#1f150019', dark: '#fefef31b' }),
sand5: token({ light: '#1f180021', dark: '#fbfbeb23' }),
sand6: token({ light: '#19130029', dark: '#fffaed2d' }),
sand7: token({ light: '#19140035', dark: '#fffbed3c' }),
sand8: token({ light: '#1915014a', dark: '#fff9eb57' }),
sand9: token({ light: '#0f0f0079', dark: '#fffae965' }),
sand10: token({ light: '#0c0c0083', dark: '#fffdee73' }),
sand11: token({ light: '#080800a1', dark: '#fffcf4b0' }),
sand12: token({ light: '#060500e3', dark: '#fffffded' }),
},
};

65
packages/twenty-ui/design-tokens/color/sky.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const SKY_COLOR_TOKENS = {
scale: {
sky1: token({
light: 'color(display-p3 0.98 0.995 0.999)',
dark: 'color(display-p3 0.056 0.078 0.116)',
}),
sky2: token({
light: 'color(display-p3 0.953 0.98 0.99)',
dark: 'color(display-p3 0.075 0.101 0.149)',
}),
sky3: token({
light: 'color(display-p3 0.899 0.963 0.989)',
dark: 'color(display-p3 0.089 0.154 0.244)',
}),
sky4: token({
light: 'color(display-p3 0.842 0.937 0.977)',
dark: 'color(display-p3 0.106 0.207 0.323)',
}),
sky5: token({
light: 'color(display-p3 0.777 0.9 0.954)',
dark: 'color(display-p3 0.135 0.261 0.394)',
}),
sky6: token({
light: 'color(display-p3 0.701 0.851 0.921)',
dark: 'color(display-p3 0.17 0.322 0.469)',
}),
sky7: token({
light: 'color(display-p3 0.604 0.785 0.879)',
dark: 'color(display-p3 0.205 0.394 0.557)',
}),
sky8: token({
light: 'color(display-p3 0.457 0.696 0.829)',
dark: 'color(display-p3 0.232 0.48 0.665)',
}),
sky9: token('color(display-p3 0.585 0.877 0.983)'),
sky10: token({
light: 'color(display-p3 0.555 0.845 0.959)',
dark: 'color(display-p3 0.718 0.925 0.991)',
}),
sky11: token({
light: 'color(display-p3 0.193 0.448 0.605)',
dark: 'color(display-p3 0.536 0.772 0.924)',
}),
sky12: token({
light: 'color(display-p3 0.145 0.241 0.329)',
dark: 'color(display-p3 0.799 0.947 0.993)',
}),
},
transparent: {
sky1: token({ light: '#00d5ff06', dark: '#0044ff0f' }),
sky2: token({ light: '#00a4db0e', dark: '#1171fb18' }),
sky3: token({ light: '#00b3ee1e', dark: '#1184fc33' }),
sky4: token({ light: '#00ace42e', dark: '#128fff49' }),
sky5: token({ light: '#00a1d841', dark: '#1c9dfd5d' }),
sky6: token({ light: '#0092ca56', dark: '#28a5ff72' }),
sky7: token({ light: '#0089c172', dark: '#2badfe8b' }),
sky8: token({ light: '#0085bf9f', dark: '#1db2fea9' }),
sky9: token({ light: '#00c7fe83', dark: '#7ce3fffe' }),
sky10: token({ light: '#00bcf38b', dark: '#a8eeff' }),
sky11: token({ light: '#00749e', dark: '#7cd3ffef' }),
sky12: token({ light: '#002540e2', dark: '#c2f3ff' }),
},
};

68
packages/twenty-ui/design-tokens/color/slate.ts Normal file
View File

@@ -0,0 +1,68 @@
import { token } from '../token';
export const SLATE_COLOR_TOKENS = {
scale: {
slate1: token({
light: 'color(display-p3 0.988 0.988 0.992)',
dark: 'color(display-p3 0.067 0.067 0.074)',
}),
slate2: token({
light: 'color(display-p3 0.976 0.976 0.984)',
dark: 'color(display-p3 0.095 0.098 0.105)',
}),
slate3: token({
light: 'color(display-p3 0.94 0.941 0.953)',
dark: 'color(display-p3 0.13 0.135 0.145)',
}),
slate4: token({
light: 'color(display-p3 0.908 0.909 0.925)',
dark: 'color(display-p3 0.156 0.163 0.176)',
}),
slate5: token({
light: 'color(display-p3 0.88 0.881 0.901)',
dark: 'color(display-p3 0.183 0.191 0.206)',
}),
slate6: token({
light: 'color(display-p3 0.85 0.852 0.876)',
dark: 'color(display-p3 0.215 0.226 0.244)',
}),
slate7: token({
light: 'color(display-p3 0.805 0.808 0.838)',
dark: 'color(display-p3 0.265 0.28 0.302)',
}),
slate8: token({
light: 'color(display-p3 0.727 0.733 0.773)',
dark: 'color(display-p3 0.357 0.381 0.409)',
}),
slate9: token({
light: 'color(display-p3 0.547 0.553 0.592)',
dark: 'color(display-p3 0.415 0.431 0.463)',
}),
slate10: token({
light: 'color(display-p3 0.503 0.512 0.549)',
dark: 'color(display-p3 0.469 0.483 0.514)',
}),
slate11: token({
light: 'color(display-p3 0.379 0.392 0.421)',
dark: 'color(display-p3 0.692 0.704 0.728)',
}),
slate12: token({
light: 'color(display-p3 0.113 0.125 0.14)',
dark: 'color(display-p3 0.93 0.933 0.94)',
}),
},
transparent: {
slate1: token({ light: '#00005503', dark: '#00000000' }),
slate2: token({ light: '#00005506', dark: '#d8f4f609' }),
slate3: token({ light: '#0000330f', dark: '#ddeaf814' }),
slate4: token({ light: '#00002d17', dark: '#d3edf81d' }),
slate5: token({ light: '#0009321f', dark: '#d9edfe25' }),
slate6: token({ light: '#00002f26', dark: '#d6ebfd30' }),
slate7: token({ light: '#00062e32', dark: '#d9edff40' }),
slate8: token({ light: '#00083046', dark: '#d9edff5d' }),
slate9: token({ light: '#00051d74', dark: '#dfebfd6d' }),
slate10: token({ light: '#00071b7f', dark: '#e5edfd7b' }),
slate11: token({ light: '#0007149f', dark: '#f1f7feb5' }),
slate12: token({ light: '#000509e3', dark: '#fcfdffef' }),
},
};

65
packages/twenty-ui/design-tokens/color/tomato.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const TOMATO_COLOR_TOKENS = {
scale: {
tomato1: token({
light: 'color(display-p3 0.998 0.989 0.988)',
dark: 'color(display-p3 0.09 0.068 0.067)',
}),
tomato2: token({
light: 'color(display-p3 0.994 0.974 0.969)',
dark: 'color(display-p3 0.115 0.084 0.076)',
}),
tomato3: token({
light: 'color(display-p3 0.985 0.924 0.909)',
dark: 'color(display-p3 0.205 0.097 0.083)',
}),
tomato4: token({
light: 'color(display-p3 0.996 0.868 0.835)',
dark: 'color(display-p3 0.282 0.099 0.077)',
}),
tomato5: token({
light: 'color(display-p3 0.98 0.812 0.77)',
dark: 'color(display-p3 0.339 0.129 0.101)',
}),
tomato6: token({
light: 'color(display-p3 0.953 0.75 0.698)',
dark: 'color(display-p3 0.398 0.179 0.141)',
}),
tomato7: token({
light: 'color(display-p3 0.917 0.673 0.611)',
dark: 'color(display-p3 0.487 0.245 0.194)',
}),
tomato8: token({
light: 'color(display-p3 0.875 0.575 0.502)',
dark: 'color(display-p3 0.629 0.322 0.248)',
}),
tomato9: token('color(display-p3 0.831 0.345 0.231)'),
tomato10: token({
light: 'color(display-p3 0.802 0.313 0.2)',
dark: 'color(display-p3 0.862 0.415 0.298)',
}),
tomato11: token({
light: 'color(display-p3 0.755 0.259 0.152)',
dark: 'color(display-p3 1 0.585 0.455)',
}),
tomato12: token({
light: 'color(display-p3 0.335 0.165 0.132)',
dark: 'color(display-p3 0.959 0.833 0.802)',
}),
},
transparent: {
tomato1: token({ light: '#ff000003', dark: '#f1121208' }),
tomato2: token({ light: '#ff200008', dark: '#ff55330f' }),
tomato3: token({ light: '#f52b0018', dark: '#ff35232b' }),
tomato4: token({ light: '#ff35002c', dark: '#fd201142' }),
tomato5: token({ light: '#ff2e003d', dark: '#fe332153' }),
tomato6: token({ light: '#f92d0050', dark: '#ff4f3864' }),
tomato7: token({ light: '#e7280067', dark: '#fd644a7d' }),
tomato8: token({ light: '#db250084', dark: '#fe6d4ea7' }),
tomato9: token({ light: '#df2600d1', dark: '#fe5431e4' }),
tomato10: token({ light: '#d72400da', dark: '#ff6847eb' }),
tomato11: token({ light: '#cd2200ea', dark: '#ff977d' }),
tomato12: token({ light: '#460900e0', dark: '#ffd6cefb' }),
},
};

65
packages/twenty-ui/design-tokens/color/turquoise.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const TURQUOISE_COLOR_TOKENS = {
scale: {
turquoise1: token({
light: 'color(display-p3 0.983 0.996 0.992)',
dark: 'color(display-p3 0.059 0.083 0.079)',
}),
turquoise2: token({
light: 'color(display-p3 0.958 0.983 0.976)',
dark: 'color(display-p3 0.075 0.11 0.107)',
}),
turquoise3: token({
light: 'color(display-p3 0.895 0.971 0.952)',
dark: 'color(display-p3 0.087 0.175 0.165)',
}),
turquoise4: token({
light: 'color(display-p3 0.831 0.949 0.92)',
dark: 'color(display-p3 0.087 0.227 0.214)',
}),
turquoise5: token({
light: 'color(display-p3 0.761 0.914 0.878)',
dark: 'color(display-p3 0.12 0.277 0.261)',
}),
turquoise6: token({
light: 'color(display-p3 0.682 0.864 0.825)',
dark: 'color(display-p3 0.162 0.335 0.314)',
}),
turquoise7: token({
light: 'color(display-p3 0.581 0.798 0.756)',
dark: 'color(display-p3 0.205 0.406 0.379)',
}),
turquoise8: token({
light: 'color(display-p3 0.433 0.716 0.671)',
dark: 'color(display-p3 0.245 0.489 0.453)',
}),
turquoise9: token('color(display-p3 0.297 0.637 0.581)'),
turquoise10: token({
light: 'color(display-p3 0.275 0.599 0.542)',
dark: 'color(display-p3 0.319 0.69 0.62)',
}),
turquoise11: token({
light: 'color(display-p3 0.08 0.5 0.43)',
dark: 'color(display-p3 0.388 0.835 0.719)',
}),
turquoise12: token({
light: 'color(display-p3 0.11 0.235 0.219)',
dark: 'color(display-p3 0.734 0.934 0.87)',
}),
},
transparent: {
turquoise1: token({ light: '#00cc9905', dark: '#00deab05' }),
turquoise2: token({ light: '#00aa800c', dark: '#12fbe60c' }),
turquoise3: token({ light: '#00c69d1f', dark: '#00ffe61e' }),
turquoise4: token({ light: '#00c39633', dark: '#00ffe92d' }),
turquoise5: token({ light: '#00b49047', dark: '#00ffea3b' }),
turquoise6: token({ light: '#00a6855e', dark: '#1cffe84b' }),
turquoise7: token({ light: '#0099807c', dark: '#2efde85f' }),
turquoise8: token({ light: '#009783ac', dark: '#32ffe775' }),
turquoise9: token({ light: '#009e8ced', dark: '#13ffe49f' }),
turquoise10: token({ light: '#009684f2', dark: '#0dffe0ae' }),
turquoise11: token({ light: '#008573', dark: '#0afed5d6' }),
turquoise12: token({ light: '#00332df2', dark: '#b8ffebef' }),
},
};

65
packages/twenty-ui/design-tokens/color/violet.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const VIOLET_COLOR_TOKENS = {
scale: {
violet1: token({
light: 'color(display-p3 0.991 0.988 0.995)',
dark: 'color(display-p3 0.077 0.071 0.118)',
}),
violet2: token({
light: 'color(display-p3 0.978 0.974 0.998)',
dark: 'color(display-p3 0.101 0.084 0.141)',
}),
violet3: token({
light: 'color(display-p3 0.953 0.943 0.993)',
dark: 'color(display-p3 0.154 0.123 0.256)',
}),
violet4: token({
light: 'color(display-p3 0.916 0.897 1)',
dark: 'color(display-p3 0.191 0.148 0.345)',
}),
violet5: token({
light: 'color(display-p3 0.876 0.851 1)',
dark: 'color(display-p3 0.226 0.182 0.396)',
}),
violet6: token({
light: 'color(display-p3 0.825 0.793 0.981)',
dark: 'color(display-p3 0.269 0.223 0.449)',
}),
violet7: token({
light: 'color(display-p3 0.752 0.712 0.943)',
dark: 'color(display-p3 0.326 0.277 0.53)',
}),
violet8: token({
light: 'color(display-p3 0.654 0.602 0.902)',
dark: 'color(display-p3 0.399 0.346 0.656)',
}),
violet9: token('color(display-p3 0.417 0.341 0.784)'),
violet10: token({
light: 'color(display-p3 0.381 0.306 0.741)',
dark: 'color(display-p3 0.477 0.402 0.823)',
}),
violet11: token({
light: 'color(display-p3 0.383 0.317 0.702)',
dark: 'color(display-p3 0.72 0.65 1)',
}),
violet12: token({
light: 'color(display-p3 0.179 0.15 0.359)',
dark: 'color(display-p3 0.883 0.867 0.986)',
}),
},
transparent: {
violet1: token({ light: '#5500aa03', dark: '#4422ff0f' }),
violet2: token({ light: '#4900ff07', dark: '#853ff916' }),
violet3: token({ light: '#4400ee0f', dark: '#8354fe36' }),
violet4: token({ light: '#4300ff1b', dark: '#7d51fd50' }),
violet5: token({ light: '#3600ff26', dark: '#845ffd5f' }),
violet6: token({ light: '#3100fb35', dark: '#8f6cfd6d' }),
violet7: token({ light: '#2d01dd4a', dark: '#9879ff83' }),
violet8: token({ light: '#2b00d066', dark: '#977dfea8' }),
violet9: token({ light: '#2400b7a9', dark: '#8668ffcc' }),
violet10: token({ light: '#2300abb2', dark: '#9176fed7' }),
violet11: token({ light: '#1f0099af', dark: '#baa7ff' }),
violet12: token({ light: '#0b0043d9', dark: '#e3defffe' }),
},
};

65
packages/twenty-ui/design-tokens/color/yellow.ts Normal file
View File

@@ -0,0 +1,65 @@
import { token } from '../token';
export const YELLOW_COLOR_TOKENS = {
scale: {
yellow1: token({
light: 'color(display-p3 0.992 0.992 0.978)',
dark: 'color(display-p3 0.078 0.069 0.047)',
}),
yellow2: token({
light: 'color(display-p3 0.995 0.99 0.922)',
dark: 'color(display-p3 0.103 0.094 0.063)',
}),
yellow3: token({
light: 'color(display-p3 0.997 0.982 0.749)',
dark: 'color(display-p3 0.168 0.137 0.039)',
}),
yellow4: token({
light: 'color(display-p3 0.992 0.953 0.627)',
dark: 'color(display-p3 0.209 0.169 0)',
}),
yellow5: token({
light: 'color(display-p3 0.984 0.91 0.51)',
dark: 'color(display-p3 0.255 0.209 0)',
}),
yellow6: token({
light: 'color(display-p3 0.934 0.847 0.474)',
dark: 'color(display-p3 0.31 0.261 0.07)',
}),
yellow7: token({
light: 'color(display-p3 0.876 0.785 0.46)',
dark: 'color(display-p3 0.389 0.331 0.135)',
}),
yellow8: token({
light: 'color(display-p3 0.811 0.689 0.313)',
dark: 'color(display-p3 0.497 0.42 0.182)',
}),
yellow9: token('color(display-p3 1 0.92 0.22)'),
yellow10: token({
light: 'color(display-p3 0.977 0.868 0.291)',
dark: 'color(display-p3 1 1 0.456)',
}),
yellow11: token({
light: 'color(display-p3 0.6 0.44 0)',
dark: 'color(display-p3 0.948 0.885 0.392)',
}),
yellow12: token({
light: 'color(display-p3 0.271 0.233 0.137)',
dark: 'color(display-p3 0.959 0.934 0.731)',
}),
},
transparent: {
yellow1: token({ light: '#aaaa0006', dark: '#d1510004' }),
yellow2: token({ light: '#f4dd0016', dark: '#f9b4000b' }),
yellow3: token({ light: '#ffee0047', dark: '#ffaa001e' }),
yellow4: token({ light: '#ffe3016b', dark: '#fdb70028' }),
yellow5: token({ light: '#ffd5008f', dark: '#febb0036' }),
yellow6: token({ light: '#ebbc0097', dark: '#fec40046' }),
yellow7: token({ light: '#d2a10098', dark: '#fdcb225c' }),
yellow8: token({ light: '#c99700c6', dark: '#fdca327b' }),
yellow9: token({ light: '#ffe100d6', dark: '#ffe629' }),
yellow10: token({ light: '#ffdc00', dark: '#ffff57' }),
yellow11: token({ light: '#9e6c00', dark: '#fee949f5' }),
yellow12: token({ light: '#2e2000e0', dark: '#fef6baf6' }),
},
};

51
packages/twenty-ui/design-tokens/designTokens.ts Normal file
View File

@@ -0,0 +1,51 @@
import { ACCENT_TOKENS } from './accent';
import { ANIMATION_TOKENS } from './animation';
import { BACKGROUND_TOKENS } from './background';
import { BLUR_TOKENS } from './blur';
import { BORDER_TOKENS } from './border';
import { BOX_SHADOW_TOKENS } from './boxShadow';
import { BUTTONS_TOKENS } from './buttons';
import { CODE_TOKENS } from './code';
import { COLOR_TOKENS } from './color';
import { FONT_TOKENS } from './font';
import { GRAY_SCALE_TOKENS } from './grayScale';
import { ICON_TOKENS } from './icon';
import { ILLUSTRATION_ICON_TOKENS } from './illustrationIcon';
import { MODAL_TOKENS } from './modal';
import { SNACK_BAR_TOKENS } from './snackBar';
import { SPACING_TOKENS } from './spacing';
import { TABLE_TOKENS } from './table';
import { TAG_TOKENS } from './tag';
import { TEXT_TOKENS } from './text';
import { token } from './token';
import { TOOLTIP_TOKENS } from './tooltip';
import { type DesignTokenNode } from './types/DesignTokenNode';
export const DESIGN_TOKENS: DesignTokenNode = {
icon: ICON_TOKENS,
modal: MODAL_TOKENS,
text: TEXT_TOKENS,
tooltip: TOOLTIP_TOKENS,
animation: ANIMATION_TOKENS,
spacingMultiplicator: token('4', { unit: 'number' }),
spacing: SPACING_TOKENS,
betweenSiblingsGap: token('2px'),
table: TABLE_TOKENS,
sidePanelWidth: token('500px'),
clickableElementBackgroundTransition: token('background 0.1s ease'),
lastLayerZIndex: token('2147483647', { unit: 'number' }),
buttons: BUTTONS_TOKENS,
accent: ACCENT_TOKENS,
background: BACKGROUND_TOKENS,
blur: BLUR_TOKENS,
border: BORDER_TOKENS,
boxShadow: BOX_SHADOW_TOKENS,
font: FONT_TOKENS,
name: token({ light: 'light', dark: 'dark' }),
snackBar: SNACK_BAR_TOKENS,
tag: TAG_TOKENS,
code: CODE_TOKENS,
IllustrationIcon: ILLUSTRATION_ICON_TOKENS,
grayScale: GRAY_SCALE_TOKENS,
color: COLOR_TOKENS,
};

29
packages/twenty-ui/design-tokens/font.ts Normal file
View File

@@ -0,0 +1,29 @@
import { COLOR_TOKENS } from './color';
import { GRAY_SCALE_TOKENS } from './grayScale';
import { token } from './token';
export const FONT_TOKENS = {
color: {
primary: GRAY_SCALE_TOKENS.gray12,
secondary: GRAY_SCALE_TOKENS.gray11,
tertiary: GRAY_SCALE_TOKENS.gray9,
light: GRAY_SCALE_TOKENS.gray8,
extraLight: GRAY_SCALE_TOKENS.gray7,
inverted: GRAY_SCALE_TOKENS.gray1,
danger: COLOR_TOKENS.red,
},
size: {
xxs: token('0.625rem'),
xs: token('0.85rem'),
sm: token('0.92rem'),
md: token('1rem'),
lg: token('1.23rem'),
xl: token('1.54rem'),
xxl: token('1.85rem'),
},
weight: {
regular: token('400', { unit: 'number' }),
medium: token('500', { unit: 'number' }),
semiBold: token('600', { unit: 'number' }),
},
family: token('Inter, sans-serif'),
};

3
packages/twenty-ui/design-tokens/grayScale.ts Normal file
View File

@@ -0,0 +1,3 @@
import { GRAY_COLOR_TOKENS } from './color/gray';
export const GRAY_SCALE_TOKENS = GRAY_COLOR_TOKENS.scale;

15
packages/twenty-ui/design-tokens/icon.ts Normal file
View File

@@ -0,0 +1,15 @@
import { token } from './token';
export const ICON_TOKENS = {
size: {
sm: token('14', { unit: 'number' }),
md: token('16', { unit: 'number' }),
lg: token('20', { unit: 'number' }),
xl: token('24', { unit: 'number' }),
},
stroke: {
sm: token('1.6', { unit: 'number' }),
md: token('2', { unit: 'number' }),
lg: token('2.5', { unit: 'number' }),
},
};

21
packages/twenty-ui/design-tokens/illustrationIcon.ts Normal file
View File

@@ -0,0 +1,21 @@
import { GRAY_SCALE_TOKENS } from './grayScale';
import { token } from './token';
export const ILLUSTRATION_ICON_TOKENS = {
color: {
blue: token({
light: 'color(display-p3 0.569 0.639 0.916)',
dark: 'color(display-p3 0.354 0.445 0.866)',
}),
gray: token({
light: 'color(display-p3 0.6 0.6 0.6)',
dark: 'color(display-p3 0.4 0.4 0.4)',
}),
},
fill: {
blue: token({
light: 'color(display-p3 0.831 0.87 1)',
dark: 'color(display-p3 0.848 0.881 0.99)',
}),
gray: GRAY_SCALE_TOKENS.gray5,
},
};

23
packages/twenty-ui/design-tokens/modal.ts Normal file
View File

@@ -0,0 +1,23 @@
import { token } from './token';
export const MODAL_TOKENS = {
size: {
sm: {
width: token('300px'),
},
md: {
width: token('400px'),
},
lg: {
width: token('53%'),
},
xl: {
width: token('1200px'),
height: token('800px'),
},
fullscreen: {
width: token('calc(100dvw / var(--t-zoom, 1))'),
height: token('calc(100dvh / var(--t-zoom, 1))'),
},
},
};

49
packages/twenty-ui/design-tokens/pipeline/__tests__/buildLeafTree.test.ts Normal file
View File

@@ -0,0 +1,49 @@
import { type CollectedTokenLeaf } from '../../types/CollectedTokenLeaf';
import { buildLeafTree } from '../buildLeafTree';
const leafAt = (path: string[]): CollectedTokenLeaf => ({
path,
varName: `--t-${path.join('-')}`,
light: 'light-value',
dark: 'dark-value',
});
describe('buildLeafTree', () => {
it('nests leaves under their shared path segments', () => {
expect(
buildLeafTree({
leaves: [
leafAt(['border', 'radius', 'md']),
leafAt(['border', 'width']),
],
leafValue: (leaf) => leaf.light,
}),
).toEqual({
border: { radius: { md: 'light-value' }, width: 'light-value' },
});
});
it('throws when a path segment is already a leaf', () => {
expect(() =>
buildLeafTree({
leaves: [
leafAt(['border', 'radius']),
leafAt(['border', 'radius', 'md']),
],
leafValue: (leaf) => leaf.light,
}),
).toThrow('Token path collision at "border.radius.md"');
});
it('throws when a leaf would replace an existing subtree', () => {
expect(() =>
buildLeafTree({
leaves: [
leafAt(['border', 'radius', 'md']),
leafAt(['border', 'radius']),
],
leafValue: (leaf) => leaf.light,
}),
).toThrow('Token path collision at "border.radius"');
});
});

52
packages/twenty-ui/design-tokens/pipeline/__tests__/buildThemeCommon.test.ts Normal file
View File

@@ -0,0 +1,52 @@
import { type CollectedTokenLeaf } from '../../types/CollectedTokenLeaf';
import { buildThemeCommon } from '../buildThemeCommon';
import { pathToVarName } from '../pathToVarName';
const leaf = (
path: string[],
light: string,
dark = light,
): CollectedTokenLeaf => ({
path,
varName: pathToVarName(path),
light,
dark,
});
const spacingLeaf = leaf(['spacing', '1'], '4px');
describe('buildThemeCommon', () => {
it('emits only the pinned root keys', () => {
const output = buildThemeCommon({
leaves: [
leaf(['icon', 'size', 'sm'], '14px'),
spacingLeaf,
leaf(['background', 'primary'], '#fff', '#000'),
],
rootKeys: ['icon', 'spacing'],
});
expect(output).toContain("sm: '14px'");
expect(output).toContain('spacing: themeSpacing');
expect(output).not.toContain('background');
});
it('throws when a pinned root key has no token', () => {
expect(() =>
buildThemeCommon({
leaves: [spacingLeaf],
rootKeys: ['spacing', 'modal'],
}),
).toThrow('Missing the "modal" tokens for THEME_COMMON.');
});
it('throws when a pinned root key has a scheme-variant token', () => {
expect(() =>
buildThemeCommon({
leaves: [leaf(['icon', 'size', 'sm'], '14px', '16px'), spacingLeaf],
rootKeys: ['icon', 'spacing'],
}),
).toThrow(
'THEME_COMMON token "icon.size.sm" must be scheme-invariant, got light "14px" / dark "16px".',
);
});
});

95
packages/twenty-ui/design-tokens/pipeline/__tests__/buildThemeCss.test.ts Normal file
View File

@@ -0,0 +1,95 @@
import { type CollectedTokenLeaf } from '../../types/CollectedTokenLeaf';
import { buildThemeCss } from '../buildThemeCss';
import { pathToVarName } from '../pathToVarName';
const radiusLeaf = (
name: string,
value: string,
darkValue = value,
): CollectedTokenLeaf => {
const path = ['border', 'radius', name];
return { path, varName: pathToVarName(path), light: value, dark: darkValue };
};
const roundRadiusLeaves = [
radiusLeaf('smRound', '4px'),
radiusLeaf('mdRound', '8px'),
radiusLeaf('pill', '999px'),
radiusLeaf('rounded', '100%'),
];
const radiusLeaves = [
radiusLeaf('xs', '2px'),
radiusLeaf('sm', '4px'),
radiusLeaf('md', '8px'),
...roundRadiusLeaves,
radiusLeaf('lg', '16px'),
radiusLeaf('xl', '20px'),
radiusLeaf('xxl', '40px'),
];
const extractSquircleBlock = (css: string): string =>
css.slice(css.indexOf('@supports (corner-shape: squircle)'));
describe('buildThemeCss', () => {
it('emits the scheme block with the values of that scheme', () => {
const css = buildThemeCss({ leaves: radiusLeaves, scheme: 'dark' });
expect(css).toContain('.dark {');
expect(css).toContain(' --t-border-radius-md: 8px;');
});
it('doubles every radius that is not round inside the @supports block', () => {
const squircleBlock = extractSquircleBlock(
buildThemeCss({
leaves: [...radiusLeaves, radiusLeaf('xxxl', '48px')],
scheme: 'light',
}),
);
expect(squircleBlock).toContain('--t-border-radius-md: 16px;');
expect(squircleBlock).toContain('--t-border-radius-xxl: 80px;');
expect(squircleBlock).toContain('--t-border-radius-xxxl: 96px;');
});
it('never doubles the round radius tokens', () => {
const squircleBlock = extractSquircleBlock(
buildThemeCss({ leaves: radiusLeaves, scheme: 'light' }),
);
expect(squircleBlock).not.toContain('--t-border-radius-sm-round');
expect(squircleBlock).not.toContain('--t-border-radius-md-round');
expect(squircleBlock).not.toContain('--t-border-radius-pill');
expect(squircleBlock).not.toContain('--t-border-radius-rounded');
});
it('uses K 2.2 universally while preserving the --t-corner-shape opt-out', () => {
const squircleBlock = extractSquircleBlock(
buildThemeCss({ leaves: radiusLeaves, scheme: 'light' }),
);
expect(squircleBlock).toContain(
'corner-shape: var(--t-corner-shape, superellipse(2.2));',
);
});
it('throws when a round radius token is missing from the source', () => {
expect(() =>
buildThemeCss({
leaves: radiusLeaves.filter((leaf) => leaf.path[2] !== 'pill'),
scheme: 'light',
}),
).toThrow('Missing round radius token "pill" for the squircle block.');
});
it('throws when no radius token is left to double', () => {
expect(() =>
buildThemeCss({ leaves: roundRadiusLeaves, scheme: 'light' }),
).toThrow('Missing the border radius tokens for the squircle block.');
});
it('throws when a squircle radius is not a scheme-invariant integer px value', () => {
expect(() =>
buildThemeCss({
leaves: [radiusLeaf('xs', '2px', '3px'), ...radiusLeaves.slice(1)],
scheme: 'light',
}),
).toThrow('must be a scheme-invariant integer px value');
});
});

64
packages/twenty-ui/design-tokens/pipeline/__tests__/collectLeaves.test.ts Normal file
View File

@@ -0,0 +1,64 @@
import { collectLeaves } from '../collectLeaves';
describe('collectLeaves', () => {
it('walks nested nodes and derives the CSS variable name from the path', () => {
expect(
collectLeaves({
border: { radius: { smRound: { light: '4px', dark: '4px' } } },
}),
).toEqual([
{
path: ['border', 'radius', 'smRound'],
varName: '--t-border-radius-sm-round',
light: '4px',
dark: '4px',
},
]);
});
it('keeps the number unit on leaves that declare it', () => {
expect(
collectLeaves({
lastLayerZIndex: {
light: '2147483647',
dark: '2147483647',
unit: 'number',
},
})[0].unit,
).toBe('number');
});
it('throws when two token paths map to the same CSS variable', () => {
expect(() =>
collectLeaves({
IllustrationIcon: { color: { light: 'a', dark: 'a' } },
illustrationIcon: { color: { light: 'b', dark: 'b' } },
}),
).toThrow(
'Token paths "IllustrationIcon.color" and "illustrationIcon.color" both map to the CSS variable "--t-illustration-icon-color"',
);
});
it('throws when a leaf marked unit number does not parse as a number', () => {
expect(() =>
collectLeaves({
spacingMultiplicator: { light: '4px', dark: '4px', unit: 'number' },
}),
).toThrow(
"is marked unit: 'number' but its values do not parse as numbers",
);
});
it.each(['', ' ', 'Infinity'])(
'throws when a leaf marked unit number holds "%s"',
(value) => {
expect(() =>
collectLeaves({
spacingMultiplicator: { light: value, dark: '4', unit: 'number' },
}),
).toThrow(
"is marked unit: 'number' but its values do not parse as numbers",
);
},
);
});

25
packages/twenty-ui/design-tokens/pipeline/__tests__/pathToVarName.test.ts Normal file
View File

@@ -0,0 +1,25 @@
import { pathToVarName } from '../pathToVarName';
describe('pathToVarName', () => {
it('joins segments with dashes under the --t- prefix', () => {
expect(pathToVarName(['border', 'color', 'strong'])).toBe(
'--t-border-color-strong',
);
});
it('splits camelCase segments into dashed words', () => {
expect(pathToVarName(['border', 'radius', 'smRound'])).toBe(
'--t-border-radius-sm-round',
);
});
it('lowercases a leading capital without adding a dash', () => {
expect(pathToVarName(['IllustrationIcon', 'color', 'blue'])).toBe(
'--t-illustration-icon-color-blue',
);
});
it('replaces dots inside a segment with an underscore', () => {
expect(pathToVarName(['spacing', '0.5'])).toBe('--t-spacing-0_5');
});
});

15
packages/twenty-ui/design-tokens/pipeline/__tests__/quoteSingle.test.ts Normal file
View File

@@ -0,0 +1,15 @@
import { quoteSingle } from '../quoteSingle';
describe('quoteSingle', () => {
it('wraps a plain value in single quotes', () => {
expect(quoteSingle('8px')).toBe("'8px'");
});
it('escapes backslashes before quotes so the escape is not doubled', () => {
expect(quoteSingle('a\\b')).toBe("'a\\\\b'");
});
it('escapes single quotes', () => {
expect(quoteSingle("Inter, 'DM Mono'")).toBe("'Inter, \\'DM Mono\\''");
});
});

39
packages/twenty-ui/design-tokens/pipeline/__tests__/serializeTree.test.ts Normal file
View File

@@ -0,0 +1,39 @@
import { serializeTree } from '../serializeTree';
describe('serializeTree', () => {
it('serializes a flat tree with the given separator', () => {
expect(serializeTree({ node: { md: "'8px'" }, separator: ',' })).toBe(
"{\n md: '8px',\n}",
);
});
it('indents nested nodes by two more spaces per level', () => {
expect(
serializeTree({
node: { border: { radius: { md: "'8px'" } } },
separator: ',',
}),
).toBe("{\n border: {\n radius: {\n md: '8px',\n },\n },\n}");
});
it('quotes keys that are not valid identifiers', () => {
expect(serializeTree({ node: { '0.5': "'2px'" }, separator: ',' })).toBe(
'{\n "0.5": \'2px\',\n}',
);
});
it('escapes a key that would otherwise break out of its quotes', () => {
expect(
serializeTree({ node: { 'we"ird\\': "'2px'" }, separator: ',' }),
).toBe('{\n "we\\"ird\\\\": \'2px\',\n}');
});
it('uses semicolons when serializing a type tree', () => {
expect(
serializeTree({
node: { size: { sm: 'number' } },
separator: ';',
}),
).toBe('{\n size: {\n sm: number;\n };\n}');
});
});

34
packages/twenty-ui/design-tokens/pipeline/buildLeafTree.ts Normal file
View File

@@ -0,0 +1,34 @@
import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
import { type SerializableTree } from '../types/SerializableTree';
export const buildLeafTree = ({
leaves,
leafValue,
}: {
leaves: CollectedTokenLeaf[];
leafValue: (leaf: CollectedTokenLeaf) => string;
}): SerializableTree => {
const tree: SerializableTree = {};
for (const leaf of leaves) {
let node = tree;
for (const segment of leaf.path.slice(0, -1)) {
const existing = node[segment];
if (typeof existing === 'string') {
throw new Error(
`Token path collision at "${leaf.path.join('.')}": "${segment}" is already a leaf.`,
);
}
const child = existing ?? {};
node[segment] = child;
node = child;
}
const leafKey = leaf.path[leaf.path.length - 1];
if (node[leafKey] !== undefined) {
throw new Error(
`Token path collision at "${leaf.path.join('.')}": "${leafKey}" is already defined.`,
);
}
node[leafKey] = leafValue(leaf);
}
return tree;
};

12
packages/twenty-ui/design-tokens/pipeline/buildMainColorNames.ts Normal file
View File

@@ -0,0 +1,12 @@
import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
import { quoteSingle } from './quoteSingle';
export const buildMainColorNames = (
colorNames: string[],
): string => `${GENERATED_TYPESCRIPT_HEADER}
export type ThemeColor = ${colorNames.map(quoteSingle).join(' | ')};
export const MAIN_COLOR_NAMES: ThemeColor[] = [
${colorNames.map((colorName) => ` ${quoteSingle(colorName)},`).join('\n')}
];
`;

44
packages/twenty-ui/design-tokens/pipeline/buildStaticThemeTree.ts Normal file
View File

@@ -0,0 +1,44 @@
import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
import { buildLeafTree } from './buildLeafTree';
import { renderStaticTokenValue } from './renderStaticTokenValue';
import { serializeTree } from './serializeTree';
const SPACING_TOKEN_KEY = 'spacing';
const SPACING_BINDING = 'themeSpacing';
const collapseSpacingScale = (
leaves: CollectedTokenLeaf[],
): CollectedTokenLeaf[] => {
const firstSpacingIndex = leaves.findIndex(
(leaf) => leaf.path[0] === SPACING_TOKEN_KEY,
);
if (firstSpacingIndex === -1) {
throw new Error('Missing the spacing scale tokens.');
}
return leaves.flatMap((leaf, index) => {
if (leaf.path[0] !== SPACING_TOKEN_KEY) {
return [leaf];
}
return index === firstSpacingIndex
? [{ ...leaf, path: [SPACING_TOKEN_KEY] }]
: [];
});
};
export const buildStaticThemeTree = ({
leaves,
scheme,
}: {
leaves: CollectedTokenLeaf[];
scheme: 'light' | 'dark';
}): string =>
serializeTree({
node: buildLeafTree({
leaves: collapseSpacingScale(leaves),
leafValue: (leaf) =>
leaf.path[0] === SPACING_TOKEN_KEY
? SPACING_BINDING
: renderStaticTokenValue({ leaf, scheme }),
}),
separator: ',',
});

32
packages/twenty-ui/design-tokens/pipeline/buildThemeCommon.ts Normal file
View File

@@ -0,0 +1,32 @@
import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
import { buildStaticThemeTree } from './buildStaticThemeTree';
import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
export const buildThemeCommon = ({
leaves,
rootKeys,
}: {
leaves: CollectedTokenLeaf[];
rootKeys: readonly string[];
}): string => {
const commonLeaves = leaves.filter((leaf) => rootKeys.includes(leaf.path[0]));
const missingRootKey = rootKeys.find(
(rootKey) => !commonLeaves.some((leaf) => leaf.path[0] === rootKey),
);
if (missingRootKey !== undefined) {
throw new Error(`Missing the "${missingRootKey}" tokens for THEME_COMMON.`);
}
const schemeVariantLeaf = commonLeaves.find(
(leaf) => leaf.light !== leaf.dark,
);
if (schemeVariantLeaf !== undefined) {
throw new Error(
`THEME_COMMON token "${schemeVariantLeaf.path.join('.')}" must be scheme-invariant, got light "${schemeVariantLeaf.light}" / dark "${schemeVariantLeaf.dark}".`,
);
}
return `${GENERATED_TYPESCRIPT_HEADER}
import { themeSpacing } from '../internal/themeSpacing';
export const THEME_COMMON = ${buildStaticThemeTree({ leaves: commonLeaves, scheme: 'light' })};
`;
};

26
packages/twenty-ui/design-tokens/pipeline/buildThemeConstants.ts Normal file
View File

@@ -0,0 +1,26 @@
import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
import { buildStaticThemeTree } from './buildStaticThemeTree';
import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
export const buildThemeConstants = ({
leaves,
scheme,
}: {
leaves: CollectedTokenLeaf[];
scheme: 'light' | 'dark';
}): string => {
const body = buildStaticThemeTree({ leaves, scheme });
if (scheme === 'light') {
return `${GENERATED_TYPESCRIPT_HEADER}
import { themeSpacing } from '../internal/themeSpacing';
export const THEME_LIGHT = ${body};
`;
}
return `${GENERATED_TYPESCRIPT_HEADER}
import { themeSpacing } from '../internal/themeSpacing';
import { type THEME_LIGHT } from './ThemeLight';
export const THEME_DARK: typeof THEME_LIGHT = ${body};
`;
};

73
packages/twenty-ui/design-tokens/pipeline/buildThemeCss.ts Normal file
View File

@@ -0,0 +1,73 @@
import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
import { GENERATED_CSS_HEADER } from './generatedCssHeader';
import { selectSquircleDoubledRadiusLeaves } from './selectSquircleDoubledRadiusLeaves';
const SQUIRCLE_COMMENT = `/* Squircle corners: progressive enhancement for browsers supporting
corner-shape (Chromium 139+). A squircle needs ~2x the radius of a round
corner to read as the same visual size, so the radius tokens are doubled
here; other browsers keep the base tokens as plain rounded corners.
Shape rules:
- pill, rounded and the *-round tokens are never doubled: they belong to
elements that keep corner-shape: round (circles, capsules, checkboxes,
chips, tags) and must look identical in both modes.
- Opt a subtree out of squircles with --t-corner-shape: round, or a
single element with corner-shape: round.
- Nested radii must stay concentric in both modes: derive them from the
parent radius token minus the inset, e.g.
calc(var(--t-border-radius-md) - var(--t-spacing-1)).
The token doubles under squircle while the inset does not, which is
exactly what concentricity requires. */`;
const ZERO_SPECIFICITY_COMMENT =
' /* Zero specificity on purpose: any component rule can override it. */';
const extractSquircleBasePx = (leaf: CollectedTokenLeaf): number => {
const match = leaf.light.match(/^(\d+)px$/);
if (match === null || leaf.light !== leaf.dark) {
throw new Error(
`Squircle-doubled radius token "${leaf.varName}" must be a scheme-invariant integer px value, got light "${leaf.light}" / dark "${leaf.dark}".`,
);
}
return Number(match[1]);
};
export const buildThemeCss = ({
leaves,
scheme,
}: {
leaves: CollectedTokenLeaf[];
scheme: 'light' | 'dark';
}): string => {
const declarations = leaves
.map(
(leaf) =>
` ${leaf.varName}: ${scheme === 'light' ? leaf.light : leaf.dark};`,
)
.join('\n');
const doubledDeclarations = selectSquircleDoubledRadiusLeaves(leaves)
.map((leaf) => ` ${leaf.varName}: ${extractSquircleBasePx(leaf) * 2}px;`)
.join('\n');
return `${GENERATED_CSS_HEADER}
.${scheme} {
${declarations}
}
${SQUIRCLE_COMMENT}
@supports (corner-shape: squircle) {
.${scheme} {
${doubledDeclarations}
}
${ZERO_SPECIFICITY_COMMENT}
*,
*::before,
*::after {
corner-shape: var(--t-corner-shape, superellipse(2.2));
}
}
`;
};

17
packages/twenty-ui/design-tokens/pipeline/buildThemeCssVariables.ts Normal file
View File

@@ -0,0 +1,17 @@
import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
import { buildLeafTree } from './buildLeafTree';
import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
import { quoteSingle } from './quoteSingle';
import { serializeTree } from './serializeTree';
export const buildThemeCssVariables = (
leaves: CollectedTokenLeaf[],
): string => {
const tree = buildLeafTree({
leaves,
leafValue: (leaf) => quoteSingle(`var(${leaf.varName})`),
});
return `${GENERATED_TYPESCRIPT_HEADER}
export const themeCssVariables = ${serializeTree({ node: tree, separator: ',' })};
`;
};

22
packages/twenty-ui/design-tokens/pipeline/buildThemeSpacing.ts Normal file
View File

@@ -0,0 +1,22 @@
import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
export const buildThemeSpacing = (leaves: CollectedTokenLeaf[]): string => {
const multiplicatorLeaf = leaves.find(
(leaf) => leaf.path.join('.') === 'spacingMultiplicator',
);
if (multiplicatorLeaf === undefined) {
throw new Error('Missing the spacingMultiplicator token.');
}
if (multiplicatorLeaf.light !== multiplicatorLeaf.dark) {
throw new Error(
`spacingMultiplicator must be scheme-invariant, got light "${multiplicatorLeaf.light}" / dark "${multiplicatorLeaf.dark}".`,
);
}
return `${GENERATED_TYPESCRIPT_HEADER}
export const themeSpacing = (...multiplicators: number[]): string =>
multiplicators
.map((multiplicator) => \`\${multiplicator * ${Number(multiplicatorLeaf.light)}}px\`)
.join(' ');
`;
};

34
packages/twenty-ui/design-tokens/pipeline/buildThemeSubtreeConstant.ts Normal file
View File

@@ -0,0 +1,34 @@
import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
import { buildLeafTree } from './buildLeafTree';
import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
import { renderStaticTokenValue } from './renderStaticTokenValue';
import { serializeTree } from './serializeTree';
// Bundlers cannot drop unused properties of a referenced object literal, so
// slicing these out of THEME_LIGHT would retain all 994 tokens.
export const buildThemeSubtreeConstant = ({
leaves,
rootKey,
scheme,
exportName,
}: {
leaves: CollectedTokenLeaf[];
rootKey: string;
scheme: 'light' | 'dark';
exportName: string;
}): string => {
const subtreeLeaves = leaves.filter((leaf) => leaf.path[0] === rootKey);
if (subtreeLeaves.length === 0) {
throw new Error(`Missing the "${rootKey}" tokens.`);
}
const tree = buildLeafTree({
leaves: subtreeLeaves.map((leaf) => ({
...leaf,
path: leaf.path.slice(1),
})),
leafValue: (leaf) => renderStaticTokenValue({ leaf, scheme }),
});
return `${GENERATED_TYPESCRIPT_HEADER}
export const ${exportName} = ${serializeTree({ node: tree, separator: ',' })};
`;
};

14
packages/twenty-ui/design-tokens/pipeline/buildThemeTypes.ts Normal file
View File

@@ -0,0 +1,14 @@
import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
import { buildLeafTree } from './buildLeafTree';
import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
import { serializeTree } from './serializeTree';
export const buildThemeTypes = (leaves: CollectedTokenLeaf[]): string => {
const tree = buildLeafTree({
leaves,
leafValue: (leaf) => (leaf.unit === 'number' ? 'number' : 'string'),
});
return `${GENERATED_TYPESCRIPT_HEADER}
export type ThemeType = ${serializeTree({ node: tree, separator: ';' })};
`;
};

70
packages/twenty-ui/design-tokens/pipeline/collectLeaves.ts Normal file
View File

@@ -0,0 +1,70 @@
import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
import { type DesignTokenLeaf } from '../types/DesignTokenLeaf';
import { type DesignTokenNode } from '../types/DesignTokenNode';
import { pathToVarName } from './pathToVarName';
const isLeaf = (
node: DesignTokenNode | DesignTokenLeaf,
): node is DesignTokenLeaf =>
typeof node.light === 'string' && typeof node.dark === 'string';
const collectLeavesUnderPath = (
node: DesignTokenNode,
path: string[],
): CollectedTokenLeaf[] => {
const leaves: CollectedTokenLeaf[] = [];
for (const key of Object.keys(node)) {
const value = node[key];
const valuePath = [...path, key];
if (isLeaf(value)) {
leaves.push({
path: valuePath,
varName: pathToVarName(valuePath),
light: value.light,
dark: value.dark,
unit: value.unit,
jsValue: value.jsValue,
});
continue;
}
leaves.push(...collectLeavesUnderPath(value, valuePath));
}
return leaves;
};
const assertUniqueVarNames = (leaves: CollectedTokenLeaf[]) => {
const pathByVarName = new Map<string, string>();
for (const leaf of leaves) {
const tokenPath = leaf.path.join('.');
const claimedBy = pathByVarName.get(leaf.varName);
if (claimedBy !== undefined) {
throw new Error(
`Token paths "${claimedBy}" and "${tokenPath}" both map to the CSS variable "${leaf.varName}".`,
);
}
pathByVarName.set(leaf.varName, tokenPath);
}
};
const isFiniteNumericValue = (value: string) =>
value.trim() !== '' && Number.isFinite(Number(value));
const assertNumericLeavesParse = (leaves: CollectedTokenLeaf[]) => {
for (const leaf of leaves) {
if (leaf.unit !== 'number') {
continue;
}
if (!isFiniteNumericValue(leaf.light) || !isFiniteNumericValue(leaf.dark)) {
throw new Error(
`Token "${leaf.path.join('.')}" is marked unit: 'number' but its values do not parse as numbers: light "${leaf.light}" / dark "${leaf.dark}".`,
);
}
}
};
export const collectLeaves = (root: DesignTokenNode): CollectedTokenLeaf[] => {
const leaves = collectLeavesUnderPath(root, []);
assertUniqueVarNames(leaves);
assertNumericLeavesParse(leaves);
return leaves;
};

2
packages/twenty-ui/design-tokens/pipeline/generatedCssHeader.ts Normal file
View File

@@ -0,0 +1,2 @@
export const GENERATED_CSS_HEADER = `/* Generated from design-tokens by scripts/generateThemeTokens.ts.
Do not edit manually. Regenerate with: npx nx generateTokens twenty-ui. */`;

2
packages/twenty-ui/design-tokens/pipeline/generatedTypeScriptHeader.ts Normal file
View File

@@ -0,0 +1,2 @@
export const GENERATED_TYPESCRIPT_HEADER = `// Generated from design-tokens by scripts/generateThemeTokens.ts.
// Do not edit manually. Regenerate with: npx nx generateTokens twenty-ui.`;

11
packages/twenty-ui/design-tokens/pipeline/pathToVarName.ts Normal file
View File

@@ -0,0 +1,11 @@
export const pathToVarName = (path: string[]): string =>
'--t-' +
path
.map((segment) =>
segment
.replace(/[A-Z]/g, (letter, offset) =>
offset === 0 ? letter.toLowerCase() : `-${letter.toLowerCase()}`,
)
.replace(/\./g, '_'),
)
.join('-');

2
packages/twenty-ui/design-tokens/pipeline/quoteSingle.ts Normal file
View File

@@ -0,0 +1,2 @@
export const quoteSingle = (value: string): string =>
`'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;

2
packages/twenty-ui/design-tokens/pipeline/referenceKey.ts Normal file
View File

@@ -0,0 +1,2 @@
export const referenceKey = (key: string): string =>
/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key) ? key : JSON.stringify(key);

16
packages/twenty-ui/design-tokens/pipeline/renderStaticTokenValue.ts Normal file
View File

@@ -0,0 +1,16 @@
import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
import { quoteSingle } from './quoteSingle';
export const renderStaticTokenValue = ({
leaf,
scheme,
}: {
leaf: CollectedTokenLeaf;
scheme: 'light' | 'dark';
}): string => {
if (leaf.jsValue === 'cssVariable') {
return quoteSingle(`var(${leaf.varName})`);
}
const value = scheme === 'light' ? leaf.light : leaf.dark;
return leaf.unit === 'number' ? String(Number(value)) : quoteSingle(value);
};

29
packages/twenty-ui/design-tokens/pipeline/selectSquircleDoubledRadiusLeaves.ts Normal file
View File

@@ -0,0 +1,29 @@
import { ROUND_RADIUS_TOKENS } from '../roundRadiusTokens';
import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
const isRadiusLeaf = (leaf: CollectedTokenLeaf): boolean =>
leaf.path.length === 3 &&
leaf.path[0] === 'border' &&
leaf.path[1] === 'radius';
export const selectSquircleDoubledRadiusLeaves = (
leaves: CollectedTokenLeaf[],
): CollectedTokenLeaf[] => {
const radiusLeaves = leaves.filter(isRadiusLeaf);
const missingRoundRadiusToken = ROUND_RADIUS_TOKENS.find(
(roundRadiusToken) =>
!radiusLeaves.some((leaf) => leaf.path[2] === roundRadiusToken),
);
if (missingRoundRadiusToken !== undefined) {
throw new Error(
`Missing round radius token "${missingRoundRadiusToken}" for the squircle block.`,
);
}
const doubledRadiusLeaves = radiusLeaves.filter(
(leaf) => !ROUND_RADIUS_TOKENS.includes(leaf.path[2]),
);
if (doubledRadiusLeaves.length === 0) {
throw new Error('Missing the border radius tokens for the squircle block.');
}
return doubledRadiusLeaves;
};

23
packages/twenty-ui/design-tokens/pipeline/serializeTree.ts Normal file
View File

@@ -0,0 +1,23 @@
import { type SerializableTree } from '../types/SerializableTree';
import { referenceKey } from './referenceKey';
export const serializeTree = ({
node,
separator,
depth = 0,
}: {
node: SerializableTree;
separator: ',' | ';';
depth?: number;
}): string => {
const spaces = ' '.repeat(depth + 1);
const entries = Object.keys(node).map((key) => {
const value = node[key];
const serializedValue =
typeof value === 'string'
? value
: serializeTree({ node: value, separator, depth: depth + 1 });
return `${spaces}${referenceKey(key)}: ${serializedValue}${separator}`;
});
return `{\n${entries.join('\n')}\n${' '.repeat(depth)}}`;
};

6
packages/twenty-ui/design-tokens/roundRadiusTokens.ts Normal file
View File

@@ -0,0 +1,6 @@
export const ROUND_RADIUS_TOKENS: readonly string[] = [
'smRound',
'mdRound',
'pill',
'rounded',
];

25
packages/twenty-ui/design-tokens/snackBar.ts Normal file
View File

@@ -0,0 +1,25 @@
import { COLOR_TOKENS } from './color';
import { GRAY_SCALE_TOKENS } from './grayScale';
import { token } from './token';
export const SNACK_BAR_TOKENS = {
success: {
color: COLOR_TOKENS.turquoise,
backgroundColor: token({ light: '#00a43319', dark: '#11ff992d' }),
},
error: {
color: COLOR_TOKENS.red,
backgroundColor: COLOR_TOKENS.transparent.red3,
},
warning: {
color: COLOR_TOKENS.orange,
backgroundColor: token({ light: '#ff9c0029', dark: '#ff590039' }),
},
info: {
color: COLOR_TOKENS.blue,
backgroundColor: token({ light: '#0047f112', dark: '#3566ff57' }),
},
default: {
color: GRAY_SCALE_TOKENS.gray12,
backgroundColor: COLOR_TOKENS.transparent.gray2,
},
};

39
packages/twenty-ui/design-tokens/spacing.ts Normal file
View File

@@ -0,0 +1,39 @@
import { token } from './token';
export const SPACING_TOKENS = {
'0': token('0px'),
'1': token('4px'),
'2': token('8px'),
'3': token('12px'),
'4': token('16px'),
'5': token('20px'),
'6': token('24px'),
'7': token('28px'),
'8': token('32px'),
'9': token('36px'),
'10': token('40px'),
'11': token('44px'),
'12': token('48px'),
'13': token('52px'),
'14': token('56px'),
'15': token('60px'),
'16': token('64px'),
'17': token('68px'),
'18': token('72px'),
'19': token('76px'),
'20': token('80px'),
'21': token('84px'),
'22': token('88px'),
'23': token('92px'),
'24': token('96px'),
'25': token('100px'),
'26': token('104px'),
'27': token('108px'),
'28': token('112px'),
'29': token('116px'),
'30': token('120px'),
'31': token('124px'),
'32': token('128px'),
'0.5': token('2px'),
'1.5': token('6px'),
};

7
packages/twenty-ui/design-tokens/table.ts Normal file
View File

@@ -0,0 +1,7 @@
import { token } from './token';
export const TABLE_TOKENS = {
horizontalCellMargin: token('8px'),
checkboxColumnWidth: token('32px'),
horizontalCellPadding: token('8px'),
};

68
packages/twenty-ui/design-tokens/tag.ts Normal file
View File

@@ -0,0 +1,68 @@
import { COLOR_TOKENS } from './color';
import { GRAY_SCALE_TOKENS } from './grayScale';
export const TAG_TOKENS = {
text: {
gray: GRAY_SCALE_TOKENS.gray11,
mauve: COLOR_TOKENS.mauve11,
slate: COLOR_TOKENS.slate11,
sage: COLOR_TOKENS.sage11,
olive: COLOR_TOKENS.olive11,
sand: COLOR_TOKENS.sand11,
tomato: COLOR_TOKENS.tomato11,
red: COLOR_TOKENS.red11,
ruby: COLOR_TOKENS.ruby11,
crimson: COLOR_TOKENS.crimson11,
pink: COLOR_TOKENS.pink11,
plum: COLOR_TOKENS.plum11,
purple: COLOR_TOKENS.purple11,
violet: COLOR_TOKENS.violet11,
iris: COLOR_TOKENS.iris11,
cyan: COLOR_TOKENS.cyan11,
turquoise: COLOR_TOKENS.turquoise11,
sky: COLOR_TOKENS.sky11,
blue: COLOR_TOKENS.blue11,
jade: COLOR_TOKENS.jade11,
green: COLOR_TOKENS.green11,
grass: COLOR_TOKENS.grass11,
mint: COLOR_TOKENS.mint11,
lime: COLOR_TOKENS.lime11,
bronze: COLOR_TOKENS.bronze11,
gold: COLOR_TOKENS.gold11,
brown: COLOR_TOKENS.brown11,
orange: COLOR_TOKENS.orange11,
amber: COLOR_TOKENS.amber11,
yellow: COLOR_TOKENS.yellow11,
},
background: {
gray: GRAY_SCALE_TOKENS.gray3,
mauve: COLOR_TOKENS.mauve3,
slate: COLOR_TOKENS.slate3,
sage: COLOR_TOKENS.sage3,
olive: COLOR_TOKENS.olive3,
sand: COLOR_TOKENS.sand3,
tomato: COLOR_TOKENS.tomato3,
red: COLOR_TOKENS.red3,
ruby: COLOR_TOKENS.ruby3,
crimson: COLOR_TOKENS.crimson3,
pink: COLOR_TOKENS.pink3,
plum: COLOR_TOKENS.plum3,
purple: COLOR_TOKENS.purple3,
violet: COLOR_TOKENS.violet3,
iris: COLOR_TOKENS.iris3,
cyan: COLOR_TOKENS.cyan3,
turquoise: COLOR_TOKENS.turquoise3,
sky: COLOR_TOKENS.sky3,
blue: COLOR_TOKENS.blue3,
jade: COLOR_TOKENS.jade3,
green: COLOR_TOKENS.green3,
grass: COLOR_TOKENS.grass3,
mint: COLOR_TOKENS.mint3,
lime: COLOR_TOKENS.lime3,
bronze: COLOR_TOKENS.bronze3,
gold: COLOR_TOKENS.gold3,
brown: COLOR_TOKENS.brown3,
orange: COLOR_TOKENS.orange3,
amber: COLOR_TOKENS.amber3,
yellow: COLOR_TOKENS.yellow3,
},
};

13
packages/twenty-ui/design-tokens/text.ts Normal file
View File

@@ -0,0 +1,13 @@
import { token } from './token';
export const TEXT_TOKENS = {
lineHeight: {
lg: token('1.5', { unit: 'number' }),
md: token('1.1', { unit: 'number' }),
},
iconSizeMedium: token('16', { unit: 'number' }),
iconSizeSmall: token('14', { unit: 'number' }),
iconStrikeLight: token('1.6', { unit: 'number' }),
iconStrikeMedium: token('2', { unit: 'number' }),
iconStrikeBold: token('2.5', { unit: 'number' }),
};

15
packages/twenty-ui/design-tokens/themeCommonRootKeys.ts Normal file
View File

@@ -0,0 +1,15 @@
export const THEME_COMMON_ROOT_KEYS: readonly string[] = [
'icon',
'modal',
'text',
'tooltip',
'animation',
'spacingMultiplicator',
'spacing',
'betweenSiblingsGap',
'table',
'sidePanelWidth',
'clickableElementBackgroundTransition',
'lastLayerZIndex',
'buttons',
];

4
packages/twenty-ui/design-tokens/themeCssFileNameByScheme.ts Normal file
View File

@@ -0,0 +1,4 @@
export const THEME_CSS_FILE_NAME_BY_SCHEME = {
light: 'theme-light.css',
dark: 'theme-dark.css',
} as const;

9
packages/twenty-ui/design-tokens/token.ts Normal file
View File

@@ -0,0 +1,9 @@
import { type DesignTokenLeaf } from './types/DesignTokenLeaf';
export const token = (
value: string | { light: string; dark: string },
options?: { unit?: 'number'; jsValue?: 'cssVariable' },
): DesignTokenLeaf =>
typeof value === 'string'
? { light: value, dark: value, ...options }
: { ...value, ...options };

7
packages/twenty-ui/design-tokens/tooltip.ts Normal file
View File

@@ -0,0 +1,7 @@
import { token } from './token';
export const TOOLTIP_TOKENS = {
background: token('color(display-p3 0 0 0 / 0.72)'),
color: token('color(display-p3 1 1 1 / 1)'),
descriptionColor: token('color(display-p3 1 1 1 / 0.64)'),
};

6
packages/twenty-ui/design-tokens/types/CollectedTokenLeaf.ts Normal file
View File

@@ -0,0 +1,6 @@
import { type DesignTokenLeaf } from './DesignTokenLeaf';
export type CollectedTokenLeaf = DesignTokenLeaf & {
path: string[];
varName: string;
};

6
packages/twenty-ui/design-tokens/types/DesignTokenLeaf.ts Normal file
View File

@@ -0,0 +1,6 @@
export type DesignTokenLeaf = {
light: string;
dark: string;
unit?: 'number';
jsValue?: 'cssVariable';
};

5
packages/twenty-ui/design-tokens/types/DesignTokenNode.ts Normal file
View File

@@ -0,0 +1,5 @@
import { type DesignTokenLeaf } from './DesignTokenLeaf';
export type DesignTokenNode = {
[key: string]: DesignTokenNode | DesignTokenLeaf;
};

3
packages/twenty-ui/design-tokens/types/SerializableTree.ts Normal file
View File

@@ -0,0 +1,3 @@
export type SerializableTree = {
[key: string]: SerializableTree | string;
};

33
packages/twenty-ui/docs/DocumentationParser.ts Normal file
View File

@@ -0,0 +1,33 @@
import { Parser, type ParserOptions } from 'react-docgen-typescript';
import type ts from 'typescript';
type DocComment = ReturnType<Parser['findDocComment']>;
const hasDocComment = (comment: DocComment): boolean =>
comment.fullComment.length > 0 || comment.tags.default !== undefined;
export class DocumentationParser extends Parser {
private readonly typeChecker: ts.TypeChecker;
constructor(program: ts.Program, options: ParserOptions) {
super(program, options);
this.typeChecker = program.getTypeChecker();
}
override findDocComment(symbol: ts.Symbol): DocComment {
const declaringSymbols = this.typeChecker
.getRootSymbols(symbol)
.filter((rootSymbol) => rootSymbol !== symbol);
if (declaringSymbols.length < 2) {
return super.findDocComment(symbol);
}
const mostSpecificComment = [...declaringSymbols]
.reverse()
.map((declaringSymbol) => super.findDocComment(declaringSymbol))
.find(hasDocComment);
return mostSpecificComment ?? super.findDocComment(symbol);
}
}

19
packages/twenty-ui/docs/avatarPropDescriptions.ts Normal file
View File

@@ -0,0 +1,19 @@
import { type AvatarProps } from '../src/primitives/data-display/Avatar/types/AvatarProps';
export const AVATAR_PROP_DESCRIPTIONS = {
src: 'Image URL. A missing or failed image shows the fallback.',
name: 'Name used for the first-letter fallback and the default accessible name when clickable.',
colorSeed: 'Stable value used to choose fallback colors. Defaults to `name`.',
size: 'Avatar size: `xs` (12px), `sm` (14px), `md` (16px), `lg` (24px), or `xl` (40px).',
shape: 'Shape of the avatar and its fallback.',
variant: 'Visual treatment of the fallback.',
icon: 'Icon rendered instead of the image and first-letter fallback.',
color: 'Text color override for a first-letter fallback.',
backgroundColor: 'Background color override for a first-letter fallback.',
borderColor: 'Border color override for the outline fallback.',
pulsing: 'Animates the avatar opacity. Respects reduced-motion preferences.',
disabled:
'Applies disabled styling and disables activation when `onClick` is supplied.',
nativeButton:
'Set to `false` when a clickable avatar uses `render` with an element other than a native button.',
} satisfies Partial<Record<keyof AvatarProps, string>>;

9
packages/twenty-ui/docs/buttonGroupPropDescriptions.ts Normal file
View File

@@ -0,0 +1,9 @@
import { type ButtonGroupProps } from '../src/primitives/input/ButtonGroup/types/ButtonGroupProps';
export const BUTTON_GROUP_PROP_DESCRIPTIONS = {
variant:
'Shared surface treatment that overrides the variant of buttons in the group.',
color:
'Shared semantic color that overrides the color of buttons in the group.',
size: 'Shared button height that overrides the size of buttons in the group.',
} satisfies Partial<Record<keyof ButtonGroupProps, string>>;

19
packages/twenty-ui/docs/buttonPropDescriptions.ts Normal file
View File

@@ -0,0 +1,19 @@
import { type ButtonProps } from '../src/primitives/input/Button/types/ButtonProps';
export const BUTTON_PROP_DESCRIPTIONS = {
variant: 'Visual treatment of the button surface.',
color: 'Semantic color of the button.',
size: 'Button height: `sm` (24px) or `md` (32px).',
fullWidth: 'Expands the button to fill its container width.',
loading:
'Shows a loading indicator and disables activation while preserving the button width.',
elevated: 'Adds a shadow to the button.',
startIcon: 'Decorative content displayed before the label.',
endIcon: 'Decorative content displayed after the label.',
hotkeys: 'Keyboard shortcut hints displayed on non-mobile screens.',
soon: 'Displays a coming-soon label and disables activation.',
soonLabel: 'Text for the coming-soon label.',
href: 'Destination URL. Enables native link semantics instead of button semantics.',
render:
'Caller-supplied root element or renderer. Preserve a native button, or an anchor when `href` is set. Router integration belongs to the caller.',
} satisfies Partial<Record<keyof ButtonProps, string>>;

Some files were not shown because too many files have changed in this diff Show More