chore(ui,icons,ui-preset,toolbox): Move design system packages to monorepo (#5470)

2023-11-07 22:17:44 +01:00
parent 71853eafdd
commit e4ce2f4e07
722 changed files with 30300 additions and 186 deletions
@@ -0,0 +1,2 @@
+# Docs: https://www.figma.com/developers/api#access-tokens
+FIGMA_TOKEN=
@@ -0,0 +1,79 @@
+# @medusajs/ui-preset
+
+## 1.0.2
+
+### Patch Changes
+
+- 035fa72: feat(ui,ui-preset): Release 2.1.0
+
+  ## `@medusajs/ui`
+
+  - The styling of buttons, inputs, and the CommandBar has been adjusted to have a more consistent look and feel.
+  - Fixed an issue that caused DropdownMenu.Content to overflow the viewport.
+  - Fixed an issue with the DatePicker component where deleting a time segment would throw an error.
+  - The Text component now accepts a `leading` prop to adjust the line height. It can be set to `normal` (default) or `compact`. This change in the API is fully backwards compatible.
+  - Adds a new subcomponent to RadioGroup called RadioGroup.ChoiceBox. This component wraps the RadioGroup.Item component with a mandatory label and description.
+
+  ## `@medusajs/ui-preset`
+
+  - Updated several colors, shadows, and gradient effects.
+
+  ## `@medusajs/icons`
+
+  - Introduces 6 new icons: QuestionMark, SparklesMiniSolid, SparklesMini, ThumbDown, ThumbUp, and UserCircleMini.
+  - There have been slight adjustments made to ArrowPathMini, EllipseBlueSolid, EllipseGreenSolid, EllipseGreySolid, EllipseOrangeSolid, EllipsePurpleSolid, and EllipseRedSolid.
+
+## 1.0.1
+
+### Patch Changes
+
+- ef98084: feat(ui,icons,ui-preset): Update to Medusa UI, including new components, icons, and preset styles.
+
+  # Changes in `@medusajs/ui`
+
+  ## New components
+
+  - `IconButton` - A button that only contains an icon.
+  - `IconBadge` - A badge that only contains an icon.
+  - `StatusBadge` - A badge component specifically designed to be used for displaying statuses.
+  - `Tabs` - A tab component that can be used to switch between different views.
+  - `ProgressTabs` - A tab component specifically designed to be used for building multi-step tasks.
+  - `ProgressAccordion` - An accordion component specifically designed to be used for building multi-step tasks.
+  - `CurrencyInput` - An input component that can be used to input currency values.
+  - `CommandBar` - A component that can be used to display a list of keyboard commands omn the screen.
+  - `CurrencyInput` - An input component that can be used to input currency values, such as prices.
+
+  ## Breaking changes
+
+  Several components have been reorganized to streamline their API. The following components have breaking changes:
+
+  - Button - The `format` property has been removed. To create a Icon only button, use the new `IconButton` component.
+  - Badge - The `format` property has been removed. To create a Icon only badge, use the new `IconBadge` component. The border radius of the component is now controlled using the new `rounded` property.
+  - CodeBlock - The `hideLineNumbers` property has been moved to the `snippets` property. This allows users to control the visibility of line numbers on a per snippet basis.
+
+  ## Other changes
+
+  - The `z-index`'s of all components have been cleaned up to to make stacking portalled components easier.
+  - `Table.Pagination` has been tweaked to ensure that it displays the correct number of pages when there is no data.
+  - `Calendar` has been tweaked to prevent clicking a date from submitting any forms that precede it in the DOM.
+
+  # Changes in `@medusajs/icons`
+
+  ## New icons
+
+  - `X`
+  - `AcademicCap`
+  - `Figma`
+  - `Photo`
+  - `PuzzleSolid`
+  - `Text`
+
+  # Changes in `@medusajs/ui-preset`
+
+  Minor tweaks to colors, typography, and animations.
+
+## 1.0.0
+
+### Major Changes
+
+- 8d31ce6: Release of the Medusa UI design system, includes three new packages: `@medusajs/ui` a set of React components, hooks, and utils; `@medusajs/icons` a set of React icons; `@medusajs/ui-preset` a Tailwind CSS preset containing Medusa UI design tokens.
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Medusajs
+
+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.
@@ -0,0 +1,36 @@
+<p align="center">
+  <a href="https://www.medusajs.com">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/59018053/229103275-b5e482bb-4601-46e6-8142-244f531cebdb.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/59018053/229103726-e5b529a3-9b3f-4970-8a1f-c6af37f087bf.svg">
+    <img alt="Medusa logo" src="https://user-images.githubusercontent.com/59018053/229103726-e5b529a3-9b3f-4970-8a1f-c6af37f087bf.svg">
+    </picture>
+  </a>
+</p>
+<h1 align="center">
+  Medusa UI
+</h1>
+
+<h4 align="center">
+  <a href="https://docs.medusajs.com/ui">Documentation</a> |
+  <a href="https://www.medusajs.com">Website</a>
+</h4>
+
+<p align="center">
+  Medusa's design system tokens.
+</p>
+<p align="center">
+  <a href="https://github.com/medusajs/medusa/blob/develop/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Medusa is released under the MIT license." />
+  </a>
+  <a href="https://discord.gg/xpCwq3Kfn8">
+    <img src="https://img.shields.io/badge/chat-on%20discord-7289DA.svg" alt="Discord Chat" />
+  </a>
+  <a href="https://twitter.com/intent/follow?screen_name=medusajs">
+    <img src="https://img.shields.io/twitter/follow/medusajs.svg?label=Follow%20@medusajs" alt="Follow @medusajs" />
+  </a>
+</p>
+
+## Note
+
+This package is auto-generated, and requires a Figma token associated with the Medusa Figma organization. If you are a not a Medusa team member, you will not be able to make changes to this package. If you discover any issues please open an issue instead of a PR.
@@ -0,0 +1,41 @@
+{
+  "name": "@medusajs/ui-preset",
+  "version": "1.0.2",
+  "description": "Medusa UI preset",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/medusajs/medusa.git",
+    "directory": "packages/design-system/ui-preset"
+  },
+  "author": "Kasper Kristensen <kasper@medusajs.com>",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "scripts": {
+    "build": "tsup",
+    "generate": "toolbox tokens -o './src/theme'"
+  },
+  "dependencies": {
+    "@tailwindcss/forms": "^0.5.3",
+    "tailwindcss-animate": "^1.0.6"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@medusajs/toolbox": "^0.0.1",
+    "tailwindcss": "^3.3.2",
+    "tsup": "^7.1.0",
+    "typescript": "^5.1.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
@@ -0,0 +1,4 @@
+import { fontFamily } from "tailwindcss/defaultTheme"
+
+export const FONT_FAMILY_SANS = ["Inter", ...fontFamily.sans]
+export const FONT_FAMILY_MONO = ["Roboto Mono", ...fontFamily.mono]
@@ -0,0 +1,3 @@
+import { preset } from "./preset"
+
+module.exports = preset
@@ -0,0 +1,69 @@
+import plugin from "tailwindcss/plugin"
+import { FONT_FAMILY_MONO, FONT_FAMILY_SANS } from "./constants"
+import { theme } from "./theme/extension/theme"
+import { colors } from "./theme/tokens/colors"
+import { components } from "./theme/tokens/components"
+import { effects } from "./theme/tokens/effects"
+import { typography } from "./theme/tokens/typography"
+
+export default plugin(
+  function medusaUi({ addBase, addComponents, config }) {
+    const [darkMode, className = ".dark"] = ([] as string[]).concat(
+      config("darkMode", "media")
+    )
+
+    addBase({
+      "*": {
+        borderColor: "var(--border-base)",
+      },
+    })
+
+    addComponents(typography)
+
+    addBase({
+      ":root": { ...colors.light, ...effects.light },
+      ...components.light,
+    })
+
+    if (darkMode === "class") {
+      addBase({
+        [className]: { ...colors.dark, ...effects.dark },
+      })
+    } else {
+      addBase({
+        "@media (prefers-color-scheme: dark)": {
+          ":root": { ...colors.dark, ...effects.dark },
+          ...components.dark,
+        },
+      })
+    }
+  },
+  {
+    theme: {
+      extend: {
+        ...theme.extend,
+        fontFamily: {
+          sans: FONT_FAMILY_SANS,
+          mono: FONT_FAMILY_MONO,
+        },
+        transitionProperty: {
+          fg: "color, background-color, border-color, box-shadow, opacity",
+        },
+        keyframes: {
+          "accordion-down": {
+            from: { height: "0px" },
+            to: { height: "var(--radix-accordion-content-height)" },
+          },
+          "accordion-up": {
+            from: { height: "var(--radix-accordion-content-height)" },
+            to: { height: "0px" },
+          },
+        },
+        animation: {
+          "accordion-down": "accordion-down 0.2s ease-out",
+          "accordion-up": "accordion-up 0.2s ease-out",
+        },
+      },
+    },
+  }
+)
@@ -0,0 +1,10 @@
+import type { Config } from "tailwindcss"
+
+import plugin from "./plugin"
+
+const preset = {
+  content: [],
+  plugins: [plugin, require("tailwindcss-animate")] as Config["plugins"],
+} satisfies Config
+
+export { preset }
@@ -0,0 +1,335 @@
+export const theme = {
+  "extend": {
+    "colors": {
+      "ui": {
+        "button": {
+          "inverted": {
+            "DEFAULT": "var(--button-inverted)",
+            "pressed": {
+              "DEFAULT": "var(--button-inverted-pressed)"
+            },
+            "hover": {
+              "DEFAULT": "var(--button-inverted-hover)"
+            }
+          },
+          "transparent": {
+            "DEFAULT": "var(--button-transparent)",
+            "hover": {
+              "DEFAULT": "var(--button-transparent-hover)"
+            },
+            "pressed": {
+              "DEFAULT": "var(--button-transparent-pressed)"
+            }
+          },
+          "neutral": {
+            "pressed": {
+              "DEFAULT": "var(--button-neutral-pressed)"
+            },
+            "DEFAULT": "var(--button-neutral)",
+            "hover": {
+              "DEFAULT": "var(--button-neutral-hover)"
+            }
+          },
+          "danger": {
+            "DEFAULT": "var(--button-danger)",
+            "pressed": {
+              "DEFAULT": "var(--button-danger-pressed)"
+            },
+            "hover": {
+              "DEFAULT": "var(--button-danger-hover)"
+            }
+          }
+        },
+        "code": {
+          "text": {
+            "base": {
+              "DEFAULT": "var(--code-text-base)"
+            },
+            "subtle": {
+              "DEFAULT": "var(--code-text-subtle)"
+            }
+          },
+          "bg": {
+            "base": {
+              "DEFAULT": "var(--code-bg-base)"
+            },
+            "header": {
+              "DEFAULT": "var(--code-bg-header)"
+            }
+          },
+          "border": {
+            "DEFAULT": "var(--code-border)"
+          },
+          "icon": {
+            "DEFAULT": "var(--code-icon)"
+          }
+        },
+        "tag": {
+          "green": {
+            "bg": {
+              "DEFAULT": "var(--tag-green-bg)",
+              "hover": {
+                "DEFAULT": "var(--tag-green-bg-hover)"
+              }
+            },
+            "icon": {
+              "DEFAULT": "var(--tag-green-icon)"
+            },
+            "border": {
+              "DEFAULT": "var(--tag-green-border)"
+            },
+            "text": {
+              "DEFAULT": "var(--tag-green-text)"
+            }
+          },
+          "neutral": {
+            "bg": {
+              "DEFAULT": "var(--tag-neutral-bg)",
+              "hover": {
+                "DEFAULT": "var(--tag-neutral-bg-hover)"
+              }
+            },
+            "border": {
+              "DEFAULT": "var(--tag-neutral-border)"
+            },
+            "text": {
+              "DEFAULT": "var(--tag-neutral-text)"
+            },
+            "icon": {
+              "DEFAULT": "var(--tag-neutral-icon)"
+            }
+          },
+          "red": {
+            "bg": {
+              "DEFAULT": "var(--tag-red-bg)",
+              "hover": {
+                "DEFAULT": "var(--tag-red-bg-hover)"
+              }
+            },
+            "icon": {
+              "DEFAULT": "var(--tag-red-icon)"
+            },
+            "text": {
+              "DEFAULT": "var(--tag-red-text)"
+            },
+            "border": {
+              "DEFAULT": "var(--tag-red-border)"
+            }
+          },
+          "orange": {
+            "bg": {
+              "DEFAULT": "var(--tag-orange-bg)",
+              "hover": {
+                "DEFAULT": "var(--tag-orange-bg-hover)"
+              }
+            },
+            "icon": {
+              "DEFAULT": "var(--tag-orange-icon)"
+            },
+            "text": {
+              "DEFAULT": "var(--tag-orange-text)"
+            },
+            "border": {
+              "DEFAULT": "var(--tag-orange-border)"
+            }
+          },
+          "purple": {
+            "bg": {
+              "hover": {
+                "DEFAULT": "var(--tag-purple-bg-hover)"
+              },
+              "DEFAULT": "var(--tag-purple-bg)"
+            },
+            "text": {
+              "DEFAULT": "var(--tag-purple-text)"
+            },
+            "icon": {
+              "DEFAULT": "var(--tag-purple-icon)"
+            },
+            "border": {
+              "DEFAULT": "var(--tag-purple-border)"
+            }
+          },
+          "blue": {
+            "border": {
+              "DEFAULT": "var(--tag-blue-border)"
+            },
+            "bg": {
+              "DEFAULT": "var(--tag-blue-bg)",
+              "hover": {
+                "DEFAULT": "var(--tag-blue-bg-hover)"
+              }
+            },
+            "icon": {
+              "DEFAULT": "var(--tag-blue-icon)"
+            },
+            "text": {
+              "DEFAULT": "var(--tag-blue-text)"
+            }
+          }
+        },
+        "border": {
+          "strong": {
+            "DEFAULT": "var(--border-strong)"
+          },
+          "interactive": {
+            "DEFAULT": "var(--border-interactive)"
+          },
+          "base": {
+            "DEFAULT": "var(--border-base)"
+          },
+          "error": {
+            "DEFAULT": "var(--border-error)"
+          },
+          "loud": {
+            "DEFAULT": "var(--border-loud)"
+          },
+          "danger": {
+            "DEFAULT": "var(--border-danger)"
+          },
+          "transparent": {
+            "DEFAULT": "var(--border-transparent)"
+          }
+        },
+        "bg": {
+          "highlight": {
+            "DEFAULT": "var(--bg-highlight)",
+            "hover": {
+              "DEFAULT": "var(--bg-highlight-hover)"
+            }
+          },
+          "base": {
+            "hover": {
+              "DEFAULT": "var(--bg-base-hover)"
+            },
+            "DEFAULT": "var(--bg-base)",
+            "pressed": {
+              "DEFAULT": "var(--bg-base-pressed)"
+            }
+          },
+          "subtle": {
+            "DEFAULT": "var(--bg-subtle)",
+            "pressed": {
+              "DEFAULT": "var(--bg-subtle-pressed)"
+            },
+            "hover": {
+              "DEFAULT": "var(--bg-subtle-hover)"
+            }
+          },
+          "component": {
+            "DEFAULT": "var(--bg-component)"
+          },
+          "overlay": {
+            "DEFAULT": "var(--bg-overlay)"
+          },
+          "switch": {
+            "off": {
+              "DEFAULT": "var(--bg-switch-off)",
+              "hover": {
+                "DEFAULT": "var(--bg-switch-off-hover)"
+              }
+            }
+          },
+          "field": {
+            "hover": {
+              "DEFAULT": "var(--bg-field-hover)"
+            },
+            "DEFAULT": "var(--bg-field)"
+          },
+          "interactive": {
+            "DEFAULT": "var(--bg-interactive)"
+          },
+          "disabled": {
+            "DEFAULT": "var(--bg-disabled)"
+          }
+        },
+        "fg": {
+          "on": {
+            "inverted": {
+              "DEFAULT": "var(--fg-on-inverted)"
+            },
+            "color": {
+              "DEFAULT": "var(--fg-on-color)"
+            }
+          },
+          "interactive": {
+            "hover": {
+              "DEFAULT": "var(--fg-interactive-hover)"
+            },
+            "DEFAULT": "var(--fg-interactive)"
+          },
+          "error": {
+            "DEFAULT": "var(--fg-error)"
+          },
+          "base": {
+            "DEFAULT": "var(--fg-base)"
+          },
+          "disabled": {
+            "DEFAULT": "var(--fg-disabled)"
+          },
+          "subtle": {
+            "DEFAULT": "var(--fg-subtle)"
+          },
+          "muted": {
+            "DEFAULT": "var(--fg-muted)"
+          }
+        },
+        "contrast": {
+          "bg": {
+            "subtle": {
+              "DEFAULT": "var(--contrast-bg-subtle)"
+            },
+            "base": {
+              "DEFAULT": "var(--contrast-bg-base)",
+              "pressed": {
+                "DEFAULT": "var(--contrast-bg-base-pressed)"
+              },
+              "hover": {
+                "DEFAULT": "var(--contrast-bg-base-hover)"
+              }
+            },
+            "highlight": {
+              "DEFAULT": "var(--contrast-bg-highlight)"
+            }
+          },
+          "border": {
+            "base": {
+              "DEFAULT": "var(--contrast-border-base)"
+            }
+          },
+          "fg": {
+            "primary": {
+              "DEFAULT": "var(--contrast-fg-primary)"
+            },
+            "secondary": {
+              "DEFAULT": "var(--contrast-fg-secondary)"
+            }
+          }
+        }
+      }
+    },
+    "boxShadow": {
+      "elevation-card-hover": "var(--elevation-card-hover)",
+      "elevation-modal": "var(--elevation-modal)",
+      "buttons-inverted": "var(--buttons-inverted)",
+      "elevation-card-rest": "var(--elevation-card-rest)",
+      "buttons-neutral-focus": "var(--buttons-neutral-focus)",
+      "borders-interactive-with-active": "var(--borders-interactive-with-active)",
+      "buttons-danger-focus": "var(--buttons-danger-focus)",
+      "borders-base": "var(--borders-base)",
+      "buttons-danger": "var(--buttons-danger)",
+      "details-contrast-on-bg-interactive": "var(--details-contrast-on-bg-interactive)",
+      "details-switch-handle": "var(--details-switch-handle)",
+      "buttons-neutral": "var(--buttons-neutral)",
+      "borders-interactive-with-focus": "var(--borders-interactive-with-focus)",
+      "details-switch-background-focus": "var(--details-switch-background-focus)",
+      "borders-error": "var(--borders-error)",
+      "buttons-inverted-focus": "var(--buttons-inverted-focus)",
+      "borders-focus": "var(--borders-focus)",
+      "details-switch-background": "var(--details-switch-background)",
+      "elevation-tooltip": "var(--elevation-tooltip)",
+      "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
+      "elevation-flyout": "var(--elevation-flyout)"
+    }
+  }
+}
@@ -0,0 +1,218 @@
+export const colors = {
+  "dark": {
+    "--code-text-subtle": "rgba(105, 110, 119, 1)",
+    "--button-transparent-pressed": "rgba(46, 48, 53, 1)",
+    "--border-base": "rgba(46, 48, 53, 1)",
+    "--code-text-base": "rgba(237, 238, 240, 1)",
+    "--tag-neutral-icon": "rgba(125, 130, 138, 1)",
+    "--bg-switch-off-hover": "rgba(70, 75, 80, 1)",
+    "--fg-on-color": "rgba(255, 255, 255, 1)",
+    "--bg-switch-off": "rgba(53, 55, 60, 1)",
+    "--border-strong": "rgba(53, 55, 60, 1)",
+    "--fg-subtle": "rgba(173, 177, 184, 1)",
+    "--fg-base": "rgba(237, 238, 240, 1)",
+    "--bg-base-hover": "rgba(39, 40, 45, 1)",
+    "--bg-subtle-hover": "rgba(27, 27, 31, 1)",
+    "--fg-disabled": "rgba(60, 63, 68, 1)",
+    "--bg-subtle": "rgba(24, 24, 26, 1)",
+    "--tag-neutral-border": "rgba(60, 63, 68, 1)",
+    "--bg-subtle-pressed": "rgba(39, 40, 45, 1)",
+    "--tag-neutral-text": "rgba(173, 177, 184, 1)",
+    "--fg-muted": "rgba(105, 110, 119, 1)",
+    "--code-bg-header": "rgba(24, 24, 26, 1)",
+    "--border-loud": "rgba(237, 238, 240, 1)",
+    "--bg-base-pressed": "rgba(46, 48, 53, 1)",
+    "--bg-disabled": "rgba(39, 40, 45, 1)",
+    "--code-icon": "rgba(70, 75, 80, 1)",
+    "--bg-highlight-hover": "rgba(30, 58, 138, 1)",
+    "--border-danger": "rgba(190, 18, 60, 1)",
+    "--border-interactive": "rgba(96, 165, 250, 1)",
+    "--bg-highlight": "rgba(23, 37, 84, 1)",
+    "--fg-interactive-hover": "rgba(59, 130, 246, 1)",
+    "--fg-error": "rgba(251, 113, 133, 1)",
+    "--bg-interactive": "rgba(96, 165, 250, 1)",
+    "--border-error": "rgba(244, 63, 94, 1)",
+    "--button-danger": "rgba(159, 18, 57, 1)",
+    "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
+    "--fg-interactive": "rgba(96, 165, 250, 1)",
+    "--bg-overlay": "rgba(24, 24, 26, 0.7)",
+    "--fg-on-inverted": "rgba(24, 24, 26, 1)",
+    "--tag-red-border": "rgba(136, 19, 55, 1)",
+    "--tag-red-bg": "rgba(76, 5, 25, 1)",
+    "--button-transparent-hover": "rgba(39, 40, 45, 1)",
+    "--tag-blue-text": "rgba(96, 165, 250, 1)",
+    "--tag-orange-text": "rgba(251, 191, 36, 1)",
+    "--tag-green-text": "rgba(52, 211, 153, 1)",
+    "--tag-neutral-bg": "rgba(46, 48, 53, 1)",
+    "--tag-orange-border": "rgba(120, 53, 15, 1)",
+    "--tag-green-border": "rgba(6, 78, 59, 1)",
+    "--bg-base": "rgba(27, 27, 31, 1)",
+    "--tag-red-text": "rgba(251, 113, 133, 1)",
+    "--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
+    "--tag-purple-bg-hover": "rgba(76, 29, 149, 1)",
+    "--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
+    "--border-transparent": "rgba(255, 255, 255, 0)",
+    "--code-border": "rgba(46, 48, 53, 1)",
+    "--tag-orange-icon": "rgba(245, 158, 11, 1)",
+    "--tag-purple-bg": "rgba(46, 16, 100, 1)",
+    "--tag-blue-bg": "rgba(23, 37, 84, 1)",
+    "--tag-green-bg": "rgba(2, 44, 34, 1)",
+    "--tag-blue-border": "rgba(30, 58, 138, 1)",
+    "--tag-purple-border": "rgba(76, 29, 149, 1)",
+    "--tag-blue-bg-hover": "rgba(30, 42, 138, 1)",
+    "--tag-orange-bg": "rgba(69, 26, 3, 1)",
+    "--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
+    "--code-bg-base": "rgba(27, 27, 31, 1)",
+    "--button-transparent": "rgba(255, 255, 255, 0)",
+    "--button-neutral": "rgba(39, 40, 45, 1)",
+    "--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
+    "--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)",
+    "--tag-blue-icon": "rgba(59, 130, 246, 1)",
+    "--tag-red-icon": "rgba(244, 63, 94, 1)",
+    "--tag-purple-icon": "rgba(139, 92, 246, 1)",
+    "--tag-purple-text": "rgba(167, 139, 250, 1)",
+    "--tag-green-icon": "rgba(16, 185, 129, 1)",
+    "--button-inverted": "rgba(237, 238, 240, 1)",
+    "--button-inverted-gradient-from": "rgba(24, 24, 26, 0)",
+    "--button-inverted-gradient-to": "rgba(24, 24, 26, 1)",
+    "--bg-component": "rgba(39, 40, 45, 1)",
+    "--bg-field": "rgba(39, 40, 45, 1)",
+    "--bg-field-hover": "rgba(46, 48, 53, 1)",
+    "--contrast-fg-primary": "rgba(28, 32, 36, 1)",
+    "--contrast-bg-base": "rgba(228, 228, 233, 1)",
+    "--contrast-fg-secondary": "rgba(96, 100, 108, 1)",
+    "--contrast-border-base": "rgba(185, 187, 198, 1)",
+    "--contrast-bg-base-pressed": "rgba(242, 242, 245, 1)",
+    "--contrast-bg-subtle": "rgba(211, 212, 219, 1)",
+    "--contrast-bg-base-hover": "rgba(235, 235, 239, 1)",
+    "--contrast-bg-highlight": "rgba(242, 242, 245, 1)",
+    "--button-neutral-pressed": "rgba(60, 63, 68, 1)",
+    "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-inverted-pressed": "rgba(237, 238, 240, 1)",
+    "--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 0)",
+    "--button-inverted-pressed-gradient-to": "rgba(24, 24, 26, 1)",
+    "--button-neutral-hover": "rgba(53, 55, 60, 1)",
+    "--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-inverted-hover": "rgba(255, 255, 255, 1)",
+    "--button-inverted-hover-gradient-from": "rgba(24, 24, 26, 0)",
+    "--button-inverted-hover-gradient-to": "rgba(24, 24, 26, 1)",
+    "--button-danger-pressed": "rgba(225, 29, 72, 1)",
+    "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-danger-hover": "rgba(190, 18, 60, 1)",
+    "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)"
+  },
+  "light": {
+    "--button-inverted": "rgba(3, 7, 18, 1)",
+    "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
+    "--code-text-base": "rgba(249, 250, 251, 1)",
+    "--tag-green-bg": "rgba(209, 250, 229, 1)",
+    "--border-strong": "rgba(209, 213, 219, 1)",
+    "--border-interactive": "rgba(59, 130, 246, 1)",
+    "--bg-highlight": "rgba(239, 246, 255, 1)",
+    "--bg-base-hover": "rgba(249, 250, 251, 1)",
+    "--tag-neutral-bg": "rgba(243, 244, 246, 1)",
+    "--tag-red-bg": "rgba(255, 228, 230, 1)",
+    "--tag-orange-bg": "rgba(254, 244, 199, 1)",
+    "--bg-base": "rgba(255, 255, 255, 1)",
+    "--border-base": "rgba(229, 231, 235, 1)",
+    "--tag-green-icon": "rgba(5, 150, 105, 1)",
+    "--tag-purple-bg-hover": "rgba(221, 214, 254, 1)",
+    "--tag-blue-border": "rgba(191, 219, 254, 1)",
+    "--tag-orange-icon": "rgba(217, 119, 6, 1)",
+    "--tag-purple-bg": "rgba(237, 233, 254, 1)",
+    "--bg-subtle": "rgba(249, 250, 251, 1)",
+    "--tag-purple-text": "rgba(109, 40, 217, 1)",
+    "--tag-blue-bg": "rgba(219, 234, 254, 1)",
+    "--tag-blue-icon": "rgba(37, 99, 235, 1)",
+    "--border-error": "rgba(225, 29, 72, 1)",
+    "--border-loud": "rgba(3, 7, 18, 1)",
+    "--fg-on-inverted": "rgba(255, 255, 255, 1)",
+    "--fg-on-color": "rgba(255, 255, 255, 1)",
+    "--button-transparent": "rgba(255, 255, 255, 0)",
+    "--fg-interactive-hover": "rgba(37, 99, 235, 1)",
+    "--fg-interactive": "rgba(59, 130, 246, 1)",
+    "--fg-error": "rgba(225, 29, 72, 1)",
+    "--border-danger": "rgba(190, 18, 60, 1)",
+    "--border-transparent": "rgba(3, 7, 18, 0)",
+    "--fg-base": "rgba(3, 7, 18, 1)",
+    "--fg-disabled": "rgba(209, 213, 219, 1)",
+    "--bg-subtle-pressed": "rgba(229, 231, 235, 1)",
+    "--fg-subtle": "rgba(75, 85, 99, 1)",
+    "--fg-muted": "rgba(156, 163, 175, 1)",
+    "--bg-base-pressed": "rgba(243, 244, 246, 1)",
+    "--bg-subtle-hover": "rgba(243, 244, 246, 1)",
+    "--tag-neutral-border": "rgba(229, 231, 235, 1)",
+    "--tag-green-bg-hover": "rgba(167, 243, 208, 1)",
+    "--tag-blue-bg-hover": "rgba(191, 219, 254, 1)",
+    "--tag-red-icon": "rgba(225, 29, 72, 1)",
+    "--tag-neutral-text": "rgba(75, 85, 99, 1)",
+    "--tag-red-bg-hover": "rgba(254, 205, 211, 1)",
+    "--tag-red-text": "rgba(190, 18, 60, 1)",
+    "--tag-purple-icon": "rgba(124, 58, 237, 1)",
+    "--tag-blue-text": "rgba(29, 78, 216, 1)",
+    "--tag-orange-bg-hover": "rgba(253, 230, 138, 1)",
+    "--tag-neutral-bg-hover": "rgba(229, 231, 235, 1)",
+    "--tag-purple-border": "rgba(221, 214, 254, 1)",
+    "--tag-orange-text": "rgba(180, 83, 9, 1)",
+    "--tag-neutral-icon": "rgba(107, 114, 128, 1)",
+    "--tag-orange-border": "rgba(253, 230, 138, 1)",
+    "--tag-red-border": "rgba(254, 205, 211, 1)",
+    "--tag-green-border": "rgba(167, 243, 208, 1)",
+    "--tag-green-text": "rgba(4, 120, 87, 1)",
+    "--button-transparent-hover": "rgba(249, 250, 251, 1)",
+    "--button-transparent-pressed": "rgba(243, 244, 246, 1)",
+    "--code-bg-base": "rgba(17, 24, 39, 1)",
+    "--code-bg-header": "rgba(31, 41, 55, 1)",
+    "--code-text-subtle": "rgba(156, 163, 175, 1)",
+    "--code-border": "rgba(55, 65, 81, 1)",
+    "--code-icon": "rgba(107, 114, 128, 1)",
+    "--button-neutral-pressed": "rgba(243, 244, 246, 1)",
+    "--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)",
+    "--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)",
+    "--button-neutral": "rgba(255, 255, 255, 1)",
+    "--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
+    "--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
+    "--button-neutral-hover": "rgba(249, 250, 251, 1)",
+    "--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)",
+    "--button-neutral-hover-gradient-to": "rgba(3, 7, 18, 1)",
+    "--button-danger": "rgba(225, 29, 72, 1)",
+    "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-inverted-pressed": "rgba(31, 41, 55, 1)",
+    "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-danger-pressed": "rgba(159, 18, 57, 1)",
+    "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-inverted-hover": "rgba(17, 24, 39, 1)",
+    "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-danger-hover": "rgba(190, 18, 60, 1)",
+    "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
+    "--bg-component": "rgba(241, 243, 245, 1)",
+    "--bg-overlay": "rgba(3, 7, 18, 0.4)",
+    "--bg-switch-off": "rgba(229, 231, 235, 1)",
+    "--bg-field-hover": "rgba(243, 244, 246, 1)",
+    "--bg-field": "rgba(249, 250, 251, 1)",
+    "--bg-interactive": "rgba(59, 130, 246, 1)",
+    "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
+    "--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
+    "--bg-disabled": "rgba(243, 244, 246, 1)",
+    "--contrast-bg-subtle": "rgba(46, 48, 53, 1)",
+    "--contrast-bg-base": "rgba(27, 27, 31, 1)",
+    "--contrast-border-base": "rgba(60, 63, 68, 1)",
+    "--contrast-fg-primary": "rgba(237, 238, 240, 1)",
+    "--contrast-bg-base-pressed": "rgba(53, 55, 60, 1)",
+    "--contrast-fg-secondary": "rgba(173, 177, 184, 1)",
+    "--contrast-bg-highlight": "rgba(53, 55, 60, 1)",
+    "--contrast-bg-base-hover": "rgba(46, 48, 53, 1)"
+  }
+}
@@ -0,0 +1,78 @@
+export const components = {
+  "dark": {
+    ".button-danger-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
+      "opacity": "10%"
+    },
+    ".button-neutral-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
+      "opacity": "6%"
+    },
+    ".button-inverted-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
+      "opacity": "12%"
+    },
+    ".button-neutral-pressed-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
+      "opacity": "6%"
+    },
+    ".button-inverted-pressed-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
+      "opacity": "12%"
+    },
+    ".button-neutral-hover-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
+      "opacity": "6%"
+    },
+    ".button-inverted-hover-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
+      "opacity": "12%"
+    },
+    ".button-danger-pressed-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
+      "opacity": "10%"
+    },
+    ".button-danger-hover-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
+      "opacity": "10%"
+    }
+  },
+  "light": {
+    ".button-inverted-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
+      "opacity": "16%"
+    },
+    ".button-neutral-pressed-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
+      "opacity": "3%"
+    },
+    ".button-neutral-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
+      "opacity": "3%"
+    },
+    ".button-neutral-hover-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
+      "opacity": "3%"
+    },
+    ".button-danger-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
+      "opacity": "16%"
+    },
+    ".button-inverted-pressed-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
+      "opacity": "16%"
+    },
+    ".button-danger-pressed-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
+      "opacity": "16%"
+    },
+    ".button-inverted-hover-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
+      "opacity": "16%"
+    },
+    ".button-danger-hover-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
+      "opacity": "16%"
+    }
+  }
+}
@@ -0,0 +1,48 @@
+export const effects = {
+  "dark": {
+    "--details-switch-background-focus": "0px 0px 0px 1px rgba(27, 27, 31, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)",
+    "--buttons-neutral-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
+    "--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 2px rgba(46, 48, 53, 0.4) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
+    "--elevation-card-hover": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.4)",
+    "--borders-focus": "0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
+    "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
+    "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1)",
+    "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)",
+    "--elevation-card-rest": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.4)",
+    "--elevation-tooltip": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
+    "--elevation-flyout": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
+    "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.16), 0px 5px 4px 0px rgba(0, 0, 0, 0.1), 0px 3px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.1)",
+    "--details-switch-background": "0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)",
+    "--borders-interactive-with-active": "0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.25)",
+    "--buttons-inverted": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)",
+    "--buttons-danger": "0px 1px 0px 0px rgba(190, 18, 60, 0.04), 0px -1px 0px 0px rgba(190, 18, 60, 0.04), 0px 0px 0px 1px rgba(190, 18, 60, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.4)",
+    "--buttons-neutral": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)",
+    "--buttons-danger-focus": "0px 1px 0px 0px rgba(190, 18, 60, 0.04), 0px -1px 0px 0px rgba(190, 18, 60, 0.04), 0px 0px 0px 1px rgba(190, 18, 60, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
+    "--borders-base": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)",
+    "--borders-error": "0px 0px 0px 1px rgba(244, 63, 94, 1), 0px 0px 0px 4px rgba(225, 29, 72, 0.25)",
+    "--buttons-inverted-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)"
+  },
+  "light": {
+    "--elevation-card-hover": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 8px 0px rgba(3, 7, 18, 0.1)",
+    "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 2px rgba(229, 231, 235, 0.4) inset, 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 16px 32px 0px rgba(3, 7, 18, 0.08), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)",
+    "--buttons-inverted": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(3, 7, 18, 0.4), 0px 0px 0px 1px rgba(3, 7, 18, 0.8)",
+    "--elevation-card-rest": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
+    "--buttons-neutral-focus": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
+    "--borders-interactive-with-active": "0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.2)",
+    "--buttons-danger-focus": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 0.8), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
+    "--borders-base": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08)",
+    "--buttons-danger": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 0.8)",
+    "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)",
+    "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.02), 0px 5px 4px 0px rgba(3, 7, 18, 0.02), 0px 3px 3px 0px rgba(3, 7, 18, 0.04), 0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 1px 0px rgba(3, 7, 18, 0.08)",
+    "--buttons-neutral": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08)",
+    "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
+    "--details-switch-background-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6), 0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
+    "--borders-error": "0px 0px 0px 1px rgba(225, 29, 72, 1), 0px 0px 0px 3px rgba(225, 29, 72, 0.15)",
+    "--buttons-inverted-focus": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(3, 7, 18, 0.4), 0px 0px 0px 1px rgba(3, 7, 18, 0.8), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
+    "--borders-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
+    "--details-switch-background": "0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
+    "--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)",
+    "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1)",
+    "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)"
+  }
+}
@@ -0,0 +1,194 @@
+export const typography = {
+  ".h1-docs": {
+    "fontSize": "2rem",
+    "lineHeight": "2.75rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".h2-docs": {
+    "fontSize": "1.5rem",
+    "lineHeight": "2rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".h4-webs": {
+    "fontSize": "1.125rem",
+    "lineHeight": "1.75rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".h1-webs": {
+    "fontSize": "4.5rem",
+    "lineHeight": "5.5rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".h2-core": {
+    "fontSize": "1rem",
+    "lineHeight": "1.5rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".h2-webs": {
+    "fontSize": "2rem",
+    "lineHeight": "2.75rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".h3-docs": {
+    "fontSize": "1.125rem",
+    "lineHeight": "1.75rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".h3-webs": {
+    "fontSize": "1.5rem",
+    "lineHeight": "2rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".h1-core": {
+    "fontSize": "1.25rem",
+    "lineHeight": "2rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".h3-core": {
+    "fontSize": "0.875rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-medium": {
+    "fontSize": "0.875rem",
+    "lineHeight": "1.5rem",
+    "fontWeight": "400",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-large": {
+    "fontSize": "1rem",
+    "lineHeight": "1.75rem",
+    "fontWeight": "400",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-medium-plus": {
+    "fontSize": "0.875rem",
+    "lineHeight": "1.5rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-compact-xsmall": {
+    "fontSize": "0.75rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "400",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-compact-xsmall-plus": {
+    "fontSize": "0.75rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-xlarge-plus": {
+    "fontSize": "1.125rem",
+    "lineHeight": "2rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-large-plus": {
+    "fontSize": "1rem",
+    "lineHeight": "1.75rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-xlarge": {
+    "fontSize": "1.125rem",
+    "lineHeight": "2rem",
+    "fontWeight": "400",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-compact-large": {
+    "fontSize": "1rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "400",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-compact-medium-plus": {
+    "fontSize": "0.875rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-compact-small-plus": {
+    "fontSize": "0.8125rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-compact-medium": {
+    "fontSize": "0.875rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "400",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-compact-small": {
+    "fontSize": "0.8125rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "400",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".code-body": {
+    "fontSize": "0.8125rem",
+    "lineHeight": "1.5rem",
+    "fontWeight": "400",
+    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
+  },
+  ".code-label": {
+    "fontSize": "0.8125rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "400",
+    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
+  },
+  ".txt-compact-xlarge-plus": {
+    "fontSize": "1.125rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-xsmall-plus": {
+    "fontSize": "0.75rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-compact-xlarge": {
+    "fontSize": "1.125rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "400",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-small-plus": {
+    "fontSize": "0.8125rem",
+    "lineHeight": "1.375rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-xsmall": {
+    "fontSize": "0.75rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "400",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-compact-large-plus": {
+    "fontSize": "1rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".txt-small": {
+    "fontSize": "0.8125rem",
+    "lineHeight": "1.375rem",
+    "fontWeight": "400",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  }
+}
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "checkJs": false
+  },
+  "include": ["src"],
+  "exclude": ["dist", "node_modules"]
+}
@@ -0,0 +1,10 @@
+import { defineConfig } from "tsup"
+import path from "path"
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  tsconfig: path.resolve(__dirname, "tsconfig.json"),
+  dts: true,
+  clean: true,
+})