pxd 0.0.4 → 0.0.6

package/README.md

@@ -1,84 +1,18 @@
 # PXD
-Vue component library based on radix-vue and geist design system. Everything is just right.
+A universal UI component library for Vue2&3
 
-> [!IMPORTANT]
-> The library is still under development and may undergo major changes at any time.
+## Contribution
 
-> [!IMPORTANT]
-> This is a COMMUNITY PROJECT, not associated with Vercel, originating from [Vercel design system](https://vercel.com/geist/introduction). Did not strictly follow its implementation, and added some personal ideas.
+### Dev
+```shell
+pnpm install
 
-## Install
+pnpm dev:lib
 
-```bash
-pnpm i pxd
+pnpm dev
 ```
 
-## Usage
-
-### Styles
-```js
-// tailwind.config.js
-
-export default {
-  content: [
-    './src/**/*.{ts,tsx,vue}',
-    './node_modules/pxd/dist/components/**/*.js',
-  ]
-}
-```
-
-### vars.css
-
-```js
-// main.ts
-import 'pxd/vars.css'
-```
-
-### Auto import
-
-```js
-// vite.config.js
-import PxResolver from 'pxd/resolver'
-import VueComponents from 'unplugin-vue-components/vite'
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-  plugins: [
-    VueComponents({
-      resolvers: [
-        PxResolver()
-      ]
-    })
-  ]
-})
+### Build
+```shell
+pnpm build
 ```
-
-### Global import
-We strongly recommend using automatic import because it can significantly reduce the package size.
-
-## Manual Import
-```js
-// main.ts
-
-// All components only need to import this style file.
-import 'pxd/vars.css'
-```
-
-```vue
-<script setup>
-import Button from 'pxd/components/button/index.js'
-</script>
-
-<template>
-  <Button>
-    Button
-  </Button>
-</template>
-```
-
-## Acknowledgement
-rankings are in no particular order, they are all very important to this project.
-
-- Vite: https://vitejs.dev/
-- Iconify: https://iconify.design/
-- Geist Design System: https://vercel.com/geist/introduction

package/dist/components/button/index.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import { useConfigProvider } from '../../composables/useConfigProvider'
+import { computed } from 'vue'
+
+interface Props {
+  variant?: keyof typeof VARIANTS
+  size?: keyof typeof SIZES
+  disabled?: boolean
+  block?: boolean
+  href?: string
+  shape?: 'square' | 'rounded'
+}
+
+defineOptions({
+  name: 'PButton',
+})
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    variant: 'outline',
+  },
+)
+
+const config = useConfigProvider()
+
+const SIZES = {
+  xs: 'px-1 rounded-md h-6 text-sm ',
+  sm: 'px-1.5 rounded-md h-7 text-sm ',
+  md: 'px-2.5 rounded-md h-8 text-sm ',
+  lg: 'px-3.5 rounded-lg h-9 text-base ',
+}
+
+const VARIANTS = {
+  outline: 'bg-background text-foreground hover:bg-background-hover active:bg-background-active border border-input ',
+  ghost: 'bg-transparent text-foreground hover:bg-gray-alpha-200 active:bg-gray-alpha-300 ',
+  primary: 'bg-foreground text-background hover:bg-foreground/80 active:bg-foreground ',
+  error: 'bg-red-800 text-white  hover:bg-red-700 active:bg-red-800 ',
+  warning: 'bg-amber-800 text-black hover:bg-amber-700 active:bg-amber-800 ',
+  success: 'bg-green-800 text-white hover:bg-green-700 active:bg-green-800 ',
+}
+
+const DISABLED_CLASS_NAMES = 'disabled:bg-gray-100 !text-gray-700 border-none shadow-[0_0_0_1px_hsl(var(--gray-200-value))] !cursor-not-allowed '
+
+const computedClassNames = computed(() => {
+  let classNames = 'cursor-pointer transition-colors items-center justify-center '
+
+  classNames += VARIANTS[props.variant]
+
+  classNames += SIZES[props.size || config.size]
+
+  classNames += props.block ? 'flex ' : 'inline-flex '
+
+  if (props.disabled) {
+    classNames += DISABLED_CLASS_NAMES
+  }
+
+  if (props.shape === 'square') {
+    classNames += '!rounded-none '
+  }
+  else if (props.shape === 'rounded') {
+    classNames += '!rounded-full '
+  }
+
+  return classNames
+})
+</script>
+
+<template>
+  <Component
+    :is="props.href ? 'router-link' : 'button'"
+    class="pxd-button" :class="computedClassNames"
+    :disabled="disabled"
+    :to="href"
+  >
+    <slot name="prefix" />
+
+    <span class="px-1 inline-flex truncate">
+      <slot />
+    </span>
+
+    <slot name="suffix" />
+  </Component>
+</template>

package/dist/components/config-provider/index.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { VNode } from 'vue'
+import { provideConfigProvider, type ComponentSize } from '../../composables/useConfigProvider'
+
+interface Props {
+  as?: keyof HTMLElementTagNameMap | VNode
+  size?: ComponentSize
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  { as: 'div', size: 'md' },
+)
+
+defineOptions({
+  name: 'PConfigProvider',
+})
+
+provideConfigProvider(props)
+</script>
+
+<template>
+  <component :is="as">
+    <slot />
+  </component>
+</template>

package/dist/composables/useConfigProvider.d.ts

@@ -0,0 +1,8 @@
+export declare const injectionKey = "configProvider";
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface ConfigProviderProps {
+    size?: ComponentSize;
+}
+export declare const defaultConfig: Required<ConfigProviderProps>;
+export declare function provideConfigProvider(configProvider: ConfigProviderProps): void;
+export declare function useConfigProvider(): Required<ConfigProviderProps>;

package/dist/composables/useConfigProvider.js

@@ -0,0 +1,11 @@
+import { inject, provide } from "vue";
+export const injectionKey = "configProvider";
+export const defaultConfig = {
+  size: "md"
+};
+export function provideConfigProvider(configProvider) {
+  provide(injectionKey, configProvider);
+}
+export function useConfigProvider() {
+  return inject(injectionKey, defaultConfig);
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import type { App } from 'vue';
+import Button from './components/button/index.vue';
+import ConfigProvider from './components/config-provider/index.vue';
+export default function install(app: App): void;
+export { Button, ConfigProvider, };

package/dist/index.js

@@ -0,0 +1,12 @@
+import Button from "./components/button/index.vue";
+import ConfigProvider from "./components/config-provider/index.vue";
+const components = [Button, ConfigProvider];
+export default function install(app) {
+  components.forEach((component) => {
+    app.component(component.name, component);
+  });
+}
+export {
+  Button,
+  ConfigProvider
+};

package/dist/plugins/nuxt.d.ts

@@ -0,0 +1,5 @@
+export interface ModuleOptions {
+    prefix: string;
+}
+declare const _default: import("@nuxt/schema").NuxtModule<ModuleOptions, ModuleOptions, false>;
+export default _default;

package/dist/plugins/nuxt.js

@@ -0,0 +1,24 @@
+import { addComponent, defineNuxtModule } from "@nuxt/kit";
+import * as components from "../index.js";
+import { name } from "../../package.json";
+export default defineNuxtModule({
+  meta: {
+    name: "pxd",
+    configKey: "pxd",
+    compatibility: {
+      nuxt: ">=3.0.0"
+    }
+  },
+  defaults: {
+    prefix: ""
+  },
+  async setup(options) {
+    for (const component in components) {
+      addComponent({
+        name: `${options.prefix}${component}`,
+        export: component,
+        filePath: name
+      });
+    }
+  }
+});

package/dist/plugins/resolver.d.ts

@@ -1,3 +1,3 @@
-import { ComponentResolver } from 'unplugin-vue-components';
-declare function PxdResolver(): ComponentResolver;
-export default PxdResolver;
+import type { ComponentResolver } from 'unplugin-vue-components';
+declare function resolver(): ComponentResolver;
+export default resolver;

package/dist/plugins/resolver.js

@@ -1 +1,19 @@
-const n="pxd",o=n[0].toUpperCase(),s=`${n}/dist`,c=(()=>{const e=".js";return t=>`${s}/components/${t}/index${e}`})();function p(){return{type:"component",resolve:e=>{const t=new RegExp(`^${o}[A-Z]`);if(!e.match(t))return;const r=e.replace(new RegExp(o,"i"),"").replace(/([A-Z])/g,"-$1").toLowerCase().slice(1);return{importName:e,from:c(r),sideEffects:[]}}}}export{p as default};
+const LIBRARY_NAME = "pxd";
+const NAMESPACE = LIBRARY_NAME[0].toUpperCase();
+function resolver() {
+  const prefixRegex = /^P[A-Z]/;
+  return {
+    type: "component",
+    resolve(name) {
+      if (!prefixRegex.test(name)) {
+        return;
+      }
+      const partialName = name.replace(new RegExp(NAMESPACE, "i"), "").replace(/([A-Z])/g, "-$1").toLowerCase().slice(1);
+      return {
+        importName: name,
+        from: `pxd/components/${partialName}`
+      };
+    }
+  };
+}
+export default resolver;

package/dist/tokens.css

@@ -0,0 +1,378 @@
+@custom-variant dark (&:is(.dark *));
+
+@utility scrollbar-hidden {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+:root {
+  --radius: 0.5rem;
+
+  --background-100: #fff;
+  --background-200: #fafafa;
+
+  --accents-1: #fafafa;
+  --accents-2: #eaeaea;
+  --accents-3: #999;
+  --accents-4: #888;
+  --accents-5: #666;
+  --accents-6: #444;
+  --accents-7: #333;
+  --accents-8: #111;
+
+  --gray-alpha-100: hsla(0, 0%, 0%, 0.05);
+  --gray-alpha-200: hsla(0, 0%, 0%, 0.08);
+  --gray-alpha-300: hsla(0, 0%, 0%, 0.12);
+  --gray-alpha-400: hsla(0, 0%, 0%, 0.17);
+  --gray-alpha-500: hsla(0, 0%, 0%, 0.21);
+  --gray-alpha-600: hsla(0, 0%, 0%, 0.34);
+  --gray-alpha-700: hsla(0, 0%, 0%, 0.44);
+  --gray-alpha-800: hsla(0, 0%, 0%, 0.51);
+  --gray-alpha-900: hsla(0, 0%, 0%, 0.61);
+  --gray-alpha-1000: hsla(0, 0%, 0%, 0.91);
+
+  --gray-100-value: 0, 0%, 95%;
+  --gray-200-value: 0, 0%, 93%;
+  --gray-300-value: 0, 0%, 90%;
+  --gray-400-value: 0, 0%, 85%;
+  --gray-500-value: 0, 0%, 79%;
+  --gray-600-value: 0, 0%, 66%;
+  --gray-700-value: 0, 0%, 56%;
+  --gray-800-value: 0, 0%, 49%;
+  --gray-900-value: 0, 0%, 40%;
+  --gray-1000-value: 0, 0%, 9%;
+
+  --blue-100-value: 212, 100%, 97%;
+  --blue-200-value: 210, 100%, 96%;
+  --blue-300-value: 210, 100%, 94%;
+  --blue-400-value: 209, 100%, 90%;
+  --blue-500-value: 209, 100%, 80%;
+  --blue-600-value: 208, 100%, 66%;
+  --blue-700-value: 212, 100%, 48%;
+  --blue-800-value: 212, 100%, 41%;
+  --blue-900-value: 211, 100%, 42%;
+  --blue-1000-value: 211, 100%, 15%;
+
+  --red-100-value: 0, 100%, 97%;
+  --red-200-value: 0, 100%, 96%;
+  --red-300-value: 0, 100%, 95%;
+  --red-400-value: 0, 90%, 92%;
+  --red-500-value: 0, 82%, 85%;
+  --red-600-value: 359, 90%, 71%;
+  --red-700-value: 358, 75%, 59%;
+  --red-800-value: 358, 70%, 52%;
+  --red-900-value: 358, 66%, 48%;
+  --red-1000-value: 355, 49%, 15%;
+
+  --amber-100-value: 39, 100%, 95%;
+  --amber-200-value: 44, 100%, 92%;
+  --amber-300-value: 43, 96%, 90%;
+  --amber-400-value: 42, 100%, 78%;
+  --amber-500-value: 38, 100%, 71%;
+  --amber-600-value: 36, 90%, 62%;
+  --amber-700-value: 39, 100%, 57%;
+  --amber-800-value: 35, 100%, 52%;
+  --amber-900-value: 30, 100%, 32%;
+  --amber-1000-value: 20, 79%, 17%;
+
+  --green-100-value: 120, 60%, 96%;
+  --green-200-value: 120, 60%, 95%;
+  --green-300-value: 120, 60%, 91%;
+  --green-400-value: 122, 60%, 86%;
+  --green-500-value: 124, 60%, 75%;
+  --green-600-value: 125, 60%, 64%;
+  --green-700-value: 131, 41%, 46%;
+  --green-800-value: 132, 43%, 39%;
+  --green-900-value: 133, 50%, 32%;
+  --green-1000-value: 128, 29%, 15%;
+
+  --teal-100-value: 169, 70%, 96%;
+  --teal-200-value: 167, 70%, 94%;
+  --teal-300-value: 168, 70%, 90%;
+  --teal-400-value: 170, 70%, 85%;
+  --teal-500-value: 170, 70%, 72%;
+  --teal-600-value: 170, 70%, 57%;
+  --teal-700-value: 173, 80%, 36%;
+  --teal-800-value: 173, 83%, 30%;
+  --teal-900-value: 174, 91%, 25%;
+  --teal-1000-value: 171, 80%, 13%;
+
+  --purple-100-value: 276, 100%, 97%;
+  --purple-200-value: 277, 87%, 97%;
+  --purple-300-value: 274, 78%, 95%;
+  --purple-400-value: 276, 71%, 92%;
+  --purple-500-value: 274, 70%, 82%;
+  --purple-600-value: 273, 72%, 73%;
+  --purple-700-value: 272, 51%, 54%;
+  --purple-800-value: 272, 47%, 45%;
+  --purple-900-value: 274, 71%, 43%;
+  --purple-1000-value: 276, 100%, 15%;
+
+  --pink-100-value: 330, 100%, 96%;
+  --pink-200-value: 340, 90%, 96%;
+  --pink-300-value: 340, 82%, 94%;
+  --pink-400-value: 341, 76%, 91%;
+  --pink-500-value: 340, 75%, 84%;
+  --pink-600-value: 341, 75%, 73%;
+  --pink-700-value: 336, 80%, 58%;
+  --pink-800-value: 336, 74%, 51%;
+  --pink-900-value: 336, 65%, 45%;
+  --pink-1000-value: 333, 74%, 15%;
+
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+}
+
+.dark {
+  --background-100: #0a0a0a;
+  --background-200: #000;
+
+  --accents-1: #111;
+  --accents-2: #333;
+  --accents-3: #444;
+  --accents-4: #666;
+  --accents-5: #888;
+  --accents-6: #999;
+  --accents-7: #eaeaea;
+  --accents-8: #fafafa;
+
+  --gray-100-value: 0, 0%, 10%;
+  --gray-200-value: 0, 0%, 12%;
+  --gray-300-value: 0, 0%, 16%;
+  --gray-400-value: 0, 0%, 18%;
+  --gray-500-value: 0, 0%, 27%;
+  --gray-600-value: 0, 0%, 53%;
+  --gray-700-value: 0, 0%, 56%;
+  --gray-800-value: 0, 0%, 49%;
+  --gray-900-value: 0, 0%, 63%;
+  --gray-1000-value: 0, 0%, 93%;
+
+  --blue-100-value: 216, 50%, 12%;
+  --blue-200-value: 214, 59%, 15%;
+  --blue-300-value: 213, 71%, 20%;
+  --blue-400-value: 212, 78%, 23%;
+  --blue-500-value: 211, 86%, 27%;
+  --blue-600-value: 206, 100%, 50%;
+  --blue-700-value: 212, 100%, 48%;
+  --blue-800-value: 212, 100%, 41%;
+  --blue-900-value: 210, 100%, 66%;
+  --blue-1000-value: 206, 100%, 96%;
+
+  --red-100-value: 357, 37%, 12%;
+  --red-200-value: 357, 46%, 16%;
+  --red-300-value: 356, 54%, 22%;
+  --red-400-value: 357, 55%, 26%;
+  --red-500-value: 357, 60%, 32%;
+  --red-600-value: 358, 75%, 59%;
+  --red-700-value: 358, 75%, 59%;
+  --red-800-value: 358, 69%, 52%;
+  --red-900-value: 358, 100%, 69%;
+  --red-1000-value: 353, 90%, 96%;
+
+  --amber-100-value: 35, 100%, 8%;
+  --amber-200-value: 32, 100%, 10%;
+  --amber-300-value: 33, 100%, 15%;
+  --amber-400-value: 35, 100%, 17%;
+  --amber-500-value: 35, 91%, 22%;
+  --amber-600-value: 39, 85%, 49%;
+  --amber-700-value: 39, 100%, 57%;
+  --amber-800-value: 35, 100%, 52%;
+  --amber-900-value: 39, 90%, 50%;
+  --amber-1000-value: 40, 94%, 93%;
+
+  --green-100-value: 136, 50%, 9%;
+  --green-200-value: 137, 50%, 12%;
+  --green-300-value: 136, 50%, 14%;
+  --green-400-value: 135, 70%, 16%;
+  --green-500-value: 135, 70%, 23%;
+  --green-600-value: 135, 70%, 34%;
+  --green-700-value: 131, 41%, 46%;
+  --green-800-value: 132, 43%, 39%;
+  --green-900-value: 131, 43%, 57%;
+  --green-1000-value: 136, 73%, 94%;
+
+  --teal-100-value: 169, 78%, 7%;
+  --teal-200-value: 170, 74%, 9%;
+  --teal-300-value: 171, 75%, 13%;
+  --teal-400-value: 171, 85%, 13%;
+  --teal-500-value: 172, 85%, 20%;
+  --teal-600-value: 172, 85%, 32%;
+  --teal-700-value: 173, 80%, 36%;
+  --teal-800-value: 173, 83%, 30%;
+  --teal-900-value: 174, 90%, 41%;
+  --teal-1000-value: 166, 71%, 93%;
+
+  --purple-100-value: 283, 30%, 12%;
+  --purple-200-value: 281, 38%, 16%;
+  --purple-300-value: 279, 44%, 23%;
+  --purple-400-value: 277, 46%, 28%;
+  --purple-500-value: 274, 49%, 35%;
+  --purple-600-value: 272, 51%, 54%;
+  --purple-700-value: 272, 51%, 54%;
+  --purple-800-value: 272, 47%, 45%;
+  --purple-900-value: 275, 80%, 71%;
+  --purple-1000-value: 281, 73%, 96%;
+
+  --pink-100-value: 335, 32%, 12%;
+  --pink-200-value: 335, 43%, 16%;
+  --pink-300-value: 335, 47%, 21%;
+  --pink-400-value: 335, 51%, 22%;
+  --pink-500-value: 335, 57%, 27%;
+  --pink-600-value: 336, 75%, 40%;
+  --pink-700-value: 336, 80%, 58%;
+  --pink-800-value: 336, 74%, 51%;
+  --pink-900-value: 341, 90%, 67%;
+  --pink-1000-value: 333, 90%, 96%;
+
+  --gray-alpha-100: hsla(0, 0%, 100%, .06);
+  --gray-alpha-200: hsla(0, 0%, 100%, .09);
+  --gray-alpha-300: hsla(0, 0%, 100%, .13);
+  --gray-alpha-400: hsla(0, 0%, 100%, .14);
+  --gray-alpha-500: hsla(0, 0%, 100%, .24);
+  --gray-alpha-600: hsla(0, 0%, 100%, .51);
+  --gray-alpha-700: hsla(0, 0%, 100%, .54);
+  --gray-alpha-800: hsla(0, 0%, 100%, .47);
+  --gray-alpha-900: hsla(0, 0%, 100%, .61);
+  --gray-alpha-1000: hsla(0, 0%, 100%, .92);
+}
+
+@theme inline {
+  --color-foreground: hsl(var(--gray-1000-value));
+  --color-background: var(--background-100);
+  --color-background-secondary: var(--background-200);
+  --color-background-muted: hsl(var(--gray-100-value));
+  --color-background-hover: hsl(var(--gray-200-value));
+  --color-background-active: hsl(var(--gray-300-value));
+
+  --color-primary: hsl(var(--blue-700-value));
+  --color-secondary: hsl(var(--gray-700-value));
+  --color-muted: var(--gray-alpha-800);
+  --color-accent: hsl(var(--green-700-value));
+  --color-destructive: hsl(var(--red-700-value));
+
+  --color-border: hsl(var(--gray-300-value));
+  --color-border-hover: hsl(var(--gray-500-value));
+  --color-border-active: hsl(var(--gray-600-value));
+
+  --color-input: var(--gray-alpha-400);
+  --color-ring: hsl(var(--blue-900-value));
+
+  --color-gray-100: hsl(var(--gray-100-value));
+  --color-gray-200: hsl(var(--gray-200-value));
+  --color-gray-300: hsl(var(--gray-300-value));
+  --color-gray-400: hsl(var(--gray-400-value));
+  --color-gray-500: hsl(var(--gray-500-value));
+  --color-gray-600: hsl(var(--gray-600-value));
+  --color-gray-700: hsl(var(--gray-700-value));
+  --color-gray-800: hsl(var(--gray-800-value));
+  --color-gray-900: hsl(var(--gray-900-value));
+  --color-gray-1000: hsl(var(--gray-1000-value));
+
+  --color-gray-alpha-100: var(--gray-alpha-100);
+  --color-gray-alpha-200: var(--gray-alpha-200);
+  --color-gray-alpha-300: var(--gray-alpha-300);
+  --color-gray-alpha-400: var(--gray-alpha-400);
+  --color-gray-alpha-500: var(--gray-alpha-500);
+  --color-gray-alpha-600: var(--gray-alpha-600);
+  --color-gray-alpha-700: var(--gray-alpha-700);
+  --color-gray-alpha-800: var(--gray-alpha-800);
+  --color-gray-alpha-900: var(--gray-alpha-900);
+  --color-gray-alpha-1000: var(--gray-alpha-1000);
+
+  --color-red-100: hsl(var(--red-100-value));
+  --color-red-200: hsl(var(--red-200-value));
+  --color-red-300: hsl(var(--red-300-value));
+  --color-red-400: hsl(var(--red-400-value));
+  --color-red-500: hsl(var(--red-500-value));
+  --color-red-600: hsl(var(--red-600-value));
+  --color-red-700: hsl(var(--red-700-value));
+  --color-red-800: hsl(var(--red-800-value));
+  --color-red-900: hsl(var(--red-900-value));
+  --color-red-1000: hsl(var(--red-1000-value));
+
+  --color-blue-100: hsl(var(--blue-100-value));
+  --color-blue-200: hsl(var(--blue-200-value));
+  --color-blue-300: hsl(var(--blue-300-value));
+  --color-blue-400: hsl(var(--blue-400-value));
+  --color-blue-500: hsl(var(--blue-500-value));
+  --color-blue-600: hsl(var(--blue-600-value));
+  --color-blue-700: hsl(var(--blue-700-value));
+  --color-blue-800: hsl(var(--blue-800-value));
+  --color-blue-900: hsl(var(--blue-900-value));
+  --color-blue-1000: hsl(var(--blue-1000-value));
+
+  --color-amber-100: hsl(var(--amber-100-value));
+  --color-amber-200: hsl(var(--amber-200-value));
+  --color-amber-300: hsl(var(--amber-300-value));
+  --color-amber-400: hsl(var(--amber-400-value));
+  --color-amber-500: hsl(var(--amber-500-value));
+  --color-amber-600: hsl(var(--amber-600-value));
+  --color-amber-700: hsl(var(--amber-700-value));
+  --color-amber-800: hsl(var(--amber-800-value));
+  --color-amber-900: hsl(var(--amber-900-value));
+  --color-amber-1000: hsl(var(--amber-1000-value));
+
+  --color-green-100: hsl(var(--green-100-value));
+  --color-green-200: hsl(var(--green-200-value));
+  --color-green-300: hsl(var(--green-300-value));
+  --color-green-400: hsl(var(--green-400-value));
+  --color-green-500: hsl(var(--green-500-value));
+  --color-green-600: hsl(var(--green-600-value));
+  --color-green-700: hsl(var(--green-700-value));
+  --color-green-800: hsl(var(--green-800-value));
+  --color-green-900: hsl(var(--green-900-value));
+  --color-green-1000: hsl(var(--green-1000-value));
+
+  --color-teal-100: hsl(var(--teal-100-value));
+  --color-teal-200: hsl(var(--teal-200-value));
+  --color-teal-300: hsl(var(--teal-300-value));
+  --color-teal-400: hsl(var(--teal-400-value));
+  --color-teal-500: hsl(var(--teal-500-value));
+  --color-teal-600: hsl(var(--teal-600-value));
+  --color-teal-700: hsl(var(--teal-700-value));
+  --color-teal-800: hsl(var(--teal-800-value));
+  --color-teal-900: hsl(var(--teal-900-value));
+  --color-teal-1000: hsl(var(--teal-1000-value));
+
+  --color-purple-100: hsl(var(--purple-100-value));
+  --color-purple-200: hsl(var(--purple-200-value));
+  --color-purple-300: hsl(var(--purple-300-value));
+  --color-purple-400: hsl(var(--purple-400-value));
+  --color-purple-500: hsl(var(--purple-500-value));
+  --color-purple-600: hsl(var(--purple-600-value));
+  --color-purple-700: hsl(var(--purple-700-value));
+  --color-purple-800: hsl(var(--purple-800-value));
+  --color-purple-900: hsl(var(--purple-900-value));
+  --color-purple-1000: hsl(var(--purple-1000-value));
+
+  --color-pink-100: hsl(var(--pink-100-value));
+  --color-pink-200: hsl(var(--pink-200-value));
+  --color-pink-300: hsl(var(--pink-300-value));
+  --color-pink-400: hsl(var(--pink-400-value));
+  --color-pink-500: hsl(var(--pink-500-value));
+  --color-pink-600: hsl(var(--pink-600-value));
+  --color-pink-700: hsl(var(--pink-700-value));
+  --color-pink-800: hsl(var(--pink-800-value));
+  --color-pink-900: hsl(var(--pink-900-value));
+  --color-pink-1000: hsl(var(--pink-1000-value));
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+}