@raxium/themes 0.1.1

package/src/default/crafts/tabs.ts

@@ -0,0 +1,122 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+
+const prefix = 'rui-tabs'
+
+export const tvTabs = tv({
+  slots: {
+    root: '',
+    list: ['flex', 'items-center', 'relative', 'overflow-hidden'],
+    trigger: [
+      'inline-flex',
+      'items-center',
+      'justify-center',
+      'whitespace-nowrap',
+      'rounded',
+      'transition-all',
+      'outline-offset-[-2px]',
+      'disabled:pointer-events-none',
+      'disabled:opacity-(--disabled-opacity)',
+    ],
+    content: ['mt-2'],
+    indicator: [],
+  },
+
+  variants: {
+    size: {
+      xs: {
+        trigger: 'text-xs',
+      },
+      sm: {
+        trigger: 'text-sm',
+      },
+      base: {
+        trigger: 'text-base',
+      },
+      lg: {
+        trigger: 'text-lg',
+      },
+    },
+    orientation: {
+      horizontal: {
+        indicator: 'w-(--width) bottom-0',
+      },
+      vertical: {
+        indicator: 'h-(--height)',
+      },
+    },
+    prev: {
+      true: '',
+      false: '',
+    },
+    next: {
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    // horizontal
+    {
+      orientation: 'horizontal',
+      size: 'xs',
+      class: {
+        trigger: 'px-3 py-2',
+        indicator: 'h-0.5',
+      },
+    },
+    {
+      orientation: 'horizontal',
+      size: 'sm',
+      class: {
+        trigger: 'px-3.5 py-2.5',
+        indicator: 'h-0.75',
+      },
+    },
+    {
+      orientation: 'horizontal',
+      size: 'base',
+      class: {
+        trigger: 'px-4 py-3',
+        indicator: 'h-1',
+      },
+    },
+    {
+      orientation: 'horizontal',
+      size: 'lg',
+      class: {
+        trigger: 'px-4.5 py-3.5',
+        indicator: 'h-1.25',
+      },
+    },
+    {
+      orientation: 'horizontal',
+      prev: true,
+      class: {
+        content: 'data-[state=open]:-motion-translate-x-in data-[state=open]:motion-opacity-in',
+      },
+    },
+    {
+      orientation: 'horizontal',
+      next: true,
+      class: {
+        content: 'data-[state=open]:motion-translate-x-in data-[state=open]:motion-opacity-in',
+      },
+    },
+  ],
+  defaultVariants: {
+    size: 'base',
+    orientation: 'horizontal',
+    prev: false,
+    next: false,
+  },
+}, {
+  slots: {
+    root: prefix,
+    list: `${prefix}-list`,
+    trigger: `${prefix}-trigger`,
+    content: `${prefix}-content`,
+    indicator: `${prefix}-indicator`,
+  },
+})
+
+export type TabsVariants = VariantProps<typeof tvTabs>

package/src/default/crafts/tags-input.ts

@@ -0,0 +1,81 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+
+const prefix = 'rui-tags-input'
+
+export const tvTagsInput = tv(
+  {
+    slots: {
+      root: ['flex flex-col'],
+      control: ['flex', 'items-center'],
+      scrollArea: '',
+      scrollAreaContent: '',
+      input: ['focus:outline-none', 'bg-transparent'],
+      item: '',
+      itemPreview: 'flex items-center gap-1 rounded-full cursor-default',
+      itemInput: 'p-0 w-fit min-w-0 outline-none',
+      itemText: '',
+    },
+
+    variants: {
+      size: {
+        xs: {
+          input: 'text-xs',
+          itemPreview: 'text-xs px-1.5',
+          itemInput: 'text-xs px-0.5',
+        },
+        sm: {
+          input: 'text-sm',
+          itemPreview: 'text-sm px-2',
+          itemInput: 'text-sm px-1',
+        },
+        base: {
+          input: 'text-base',
+          itemPreview: 'text-base px-2.5',
+          itemInput: 'text-base px-1.5',
+        },
+        lg: {
+          input: 'text-lg',
+          itemPreview: 'text-lg px-2.5',
+          itemInput: 'text-lg px-1.5',
+        },
+      },
+      inline: {
+        true: {
+          control: ['flex-nowrap', 'p-0', 'gap-0'],
+          scrollArea: ['flex-shrink-0', 'py-1.5', 'px-2', 'max-w-[calc(100%-var(--spacing)*10)]'],
+          scrollAreaContent: ['flex', 'flex-nowrap', 'gap-2'],
+          input: ['flex-shrink-1', 'py-1.5', 'px-2', 'min-w-5'],
+          itemText: 'whitespace-nowrap',
+        },
+        false: {
+          control: 'flex-wrap',
+        },
+      },
+      empty: {
+        true: {
+          scrollArea: 'p-0',
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+      inline: true,
+    },
+  },
+  {
+    slots: {
+      root: prefix,
+      control: `${prefix}-control`,
+      input: `${prefix}-input`,
+      scrollArea: `${prefix}-scroll-area`,
+      scrollAreaContent: `${prefix}-scroll-area-content`,
+      item: `${prefix}-item`,
+      itemPreview: `${prefix}-item-preview`,
+      itemInput: `${prefix}-item-input`,
+      itemText: `${prefix}-item-text`,
+    },
+  },
+)
+
+export type TagsInputVariants = VariantProps<typeof tvTagsInput>

package/src/default/crafts/toast.ts

@@ -0,0 +1,70 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+
+const prefix = 'rui-toast'
+
+export const tvToast = tv(
+  {
+    slots: {
+      root: ['group/toast'],
+      content: ['flex', 'items-center', 'border-l-3', 'rounded-md'],
+      inner: 'flex flex-col w-max',
+      title: '',
+      description: '',
+      icon: 'size-[1lh]',
+      close: '',
+    },
+    variants: {
+      size: {
+        xs: {
+          content: 'py-3 px-4 space-x-3',
+          inner: 'gap-0.5',
+          icon: 'text-sm',
+          close: 'text-xs',
+          title: 'text-sm',
+          description: 'text-xs',
+        },
+        sm: {
+          content: 'py-4 px-6 space-x-4',
+          inner: 'gap-1',
+          icon: 'text-base',
+          close: 'text-sm',
+          title: 'text-base',
+          description: 'text-sm',
+        },
+        base: {
+          content: 'py-5 px-8 space-x-5',
+          inner: 'gap-1.5',
+          icon: 'text-base',
+          close: 'text-base',
+          title: 'text-lg',
+          description: 'text-base',
+        },
+        lg: {
+          content: 'py-6 px-10 space-x-6',
+          inner: 'gap-2',
+          icon: 'text-lg',
+          close: 'text-base',
+          title: 'text-lg',
+          description: 'text-base',
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+    },
+  },
+  {
+    slots: {
+      root: prefix,
+      content: `${prefix}-content`,
+      inner: `${prefix}-inner`,
+      title: `${prefix}-title`,
+      description: `${prefix}-description`,
+      icon: `${prefix}-icon`,
+      close: `${prefix}-close`,
+    },
+  },
+)
+
+export type ToastVariants = VariantProps<typeof tvToast>

package/src/default/crafts/toggle-group.ts

@@ -0,0 +1,57 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+
+const prefix = 'rui-toggle-group'
+
+export const tvToggleGroup = tv(
+  {
+    slots: {
+      root: ['w-fit', 'inline-flex', 'items-center', 'group/toggle-group', 'border', 'rounded'],
+      item: ['flex', 'items-center', 'justify-center', 'aspect-square'],
+    },
+    variants: {
+      size: {
+        xs: {
+          item: 'size-6 text-xs',
+        },
+        sm: {
+          item: 'size-7 text-sm',
+        },
+        base: {
+          item: 'size-8 text-base',
+        },
+        lg: {
+          item: 'size-9 text-lg',
+        },
+      },
+      orientation: {
+        horizontal: {
+          root: 'flex-row',
+          item: [
+            '[&:not([hidden])~:not([hidden])]:border-s',
+            '[&:not([hidden])~:not([hidden])]:border-e-0',
+          ],
+        },
+        vertical: {
+          root: 'flex-col',
+          item: [
+            '[&:not([hidden])~:not([hidden])]:border-t',
+            '[&:not([hidden])~:not([hidden])]:border-b-0',
+          ],
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+      orientation: 'horizontal',
+    },
+  },
+  {
+    slots: {
+      root: prefix,
+      item: `${prefix}-item`,
+    },
+  },
+)
+
+export type ToggleGroupVariants = VariantProps<typeof tvToggleGroup>

package/src/default/crafts/toggle.ts

@@ -0,0 +1,34 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+
+const prefix = 'rui-toggle'
+
+export const tvToggle = tv({
+  base: [
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded',
+    'border',
+    'transition-all',
+    'disabled:pointer-events-none',
+    'disabled:opacity-(--disabled-opacity)',
+    '[&_svg]:pointer-events-none',
+    '[&_svg]:shrink-0',
+  ],
+  variants: {
+    size: {
+      xs: 'h-6 text-xs gap-1.5 px-3',
+      sm: 'h-7 text-sm gap-2.5 px-4',
+      base: 'h-8 text-base gap-3 px-5',
+      lg: 'h-9 text-lg gap-3.5 px-6',
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+  },
+}, {
+  class: prefix,
+})
+
+export type ToggleVariants = VariantProps<typeof tvToggle>

package/src/default/crafts/tooltip.ts

@@ -0,0 +1,63 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+
+const prefix = 'rui-tooltip'
+
+export const tvTooltip = tv(
+  {
+    slots: {
+      content: [
+        'rounded-(--border-radius)',
+        'data-[state=open]:motion-opacity-in',
+        'data-[state=open]:motion-scale-in-95',
+        'data-[state=open]:data-[placement^=bottom]:motion-translate-y-in-[.25rem]',
+        'data-[state=open]:data-[placement^=top]:-motion-translate-y-in-[.25rem]',
+        'data-[state=open]:data-[placement^=left]:-motion-translate-x-in-[.25rem]',
+        'data-[state=open]:data-[placement^=right]:motion-translate-x-in-[.25rem]',
+        'data-[state=closed]:motion-opacity-out',
+        'data-[state=closed]:motion-scale-out-95',
+        'data-[state=closed]:data-[placement^=bottom]:motion-translate-y-out-[.25rem]',
+        'data-[state=closed]:data-[placement^=top]:-motion-translate-y-out-[.25rem]',
+        'data-[state=closed]:data-[placement^=left]:-motion-translate-x-out-[.25rem]',
+        'data-[state=closed]:data-[placement^=right]:motion-translate-x-out-[.25rem]',
+      ],
+      contentInner: ['relative', 'rounded-(--border-radius)', 'z-10'],
+    },
+    variants: {
+      size: {
+        xs: {
+          contentInner: 'px-1.5 py-0.5 text-xs',
+        },
+        sm: {
+          contentInner: 'px-2 py-1 text-sm',
+        },
+        base: {
+          contentInner: 'px-2.5 py-1.5 text-base',
+        },
+        lg: {
+          contentInner: 'px-3 py-2 text-lg',
+        },
+      },
+      bordered: {
+        true: {
+          content: 'border',
+        },
+        false: {
+          content: 'border-none',
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+      bordered: true,
+    },
+  },
+  {
+    slots: {
+      content: `${prefix}-content`,
+      contentInner: `${prefix}-content-inner`,
+    },
+  },
+)
+
+export type TooltipVariants = VariantProps<typeof tvTooltip>

package/src/default/crafts/tree.ts

@@ -0,0 +1,165 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+
+const prefix = 'rui-tree'
+
+export const tvTree = tv(
+  {
+    slots: {
+      root: '',
+      tree: '',
+    },
+  },
+  {
+    slots: {
+      root: prefix,
+      tree: `${prefix}-tree`,
+    },
+  },
+)
+
+export type TreeVariants = VariantProps<typeof tvTree>
+
+export const tvTreeBranch = tv(
+  {
+    slots: {
+      root: 'data-[disabled]:pointer-events-none',
+      control: 'flex items-center justify-between data-[disabled]:pointer-events-none',
+      title: 'flex items-center',
+      text: '',
+      icon: 'size-[1lh]',
+      indicator: [
+        'data-[state=open]:rotate-90',
+        'data-[state=closed]:rotate-0',
+        'transition-transform',
+      ],
+      content: [
+        'overflow-hidden',
+        'data-[state=open]:animate-collapsible-down',
+        'data-[state=closed]:animate-collapsible-up',
+      ],
+      indentGuide: '',
+      checkbox: '',
+      checkboxIndicator: '',
+    },
+
+    variants: {
+      size: {
+        xs: {
+          control: [
+            'text-xs',
+            'min-h-6',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*3.5)))]',
+          ],
+          title: 'gap-2',
+        },
+        sm: {
+          control: [
+            'text-sm',
+            'min-h-8',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*4)))]',
+          ],
+          title: 'gap-2.5',
+        },
+        base: {
+          control: [
+            'text-base',
+            'min-h-10',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*4.5)))]',
+          ],
+          title: 'gap-3',
+        },
+        lg: {
+          control: [
+            'text-lg',
+            'min-h-12',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*5)))]',
+          ],
+          title: 'gap-3.5',
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+    },
+  },
+  {
+    slots: {
+      root: `${prefix}-branch`,
+      control: `${prefix}-branch-control`,
+      title: `${prefix}-branch-title`,
+      text: `${prefix}-branch-text`,
+      icon: `${prefix}-branch-icon`,
+      indicator: `${prefix}-branch-indicator`,
+      content: `${prefix}-branch-content`,
+      indentGuide: `${prefix}-branch-indent-guide`,
+      checkbox: `${prefix}-branch-checkbox`,
+      checkboxIndicator: `${prefix}-branch-checkbox-indicator`,
+    },
+  },
+)
+export type TreeBranchVariants = VariantProps<typeof tvTreeBranch>
+
+export const tvTreeItem = tv(
+  {
+    slots: {
+      root: 'data-[disabled]:pointer-events-none',
+      title: 'flex items-center gap-2',
+      icon: 'size-[1lh]',
+      text: '',
+      checkbox: '',
+      checkboxIndicator: '',
+    },
+    variants: {
+      size: {
+        xs: {
+          title: [
+            'gap-2',
+            'min-h-6',
+            'text-xs',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*3.5)))]',
+          ],
+        },
+        sm: {
+          title: [
+            'gap-2.5',
+            'min-h-8',
+            'text-sm',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*4)))]',
+          ],
+        },
+        base: {
+          title: [
+            'gap-3',
+            'min-h-10',
+            'text-base',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*4.5)))]',
+          ],
+        },
+        lg: {
+          title: [
+            'gap-3.5',
+            'min-h-12',
+            'text-lg',
+            'pl-[calc((var(--depth)-1)*var(--indent,calc(var(--spacing)*5)))]',
+          ],
+        },
+      },
+    },
+    defaultVariants: {
+      size: 'base',
+    },
+  },
+  {
+    slots: {
+      root: `${prefix}-item`,
+      title: `${prefix}-item-title`,
+      icon: `${prefix}-item-icon`,
+      text: `${prefix}-item-text`,
+      checkbox: `${prefix}-item-checkbox`,
+      checkboxIndicator: `${prefix}-item-checkbox-indicator`,
+    },
+  },
+)
+
+export type TreeItemVariants = VariantProps<typeof tvTreeItem>

package/src/default/index.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+
+@config './tailwind.config.ts';

package/src/default/index.ts

@@ -0,0 +1,2 @@
+export * as crafts from './crafts'
+export type * from './crafts'

package/src/default/tailwind.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: [
+    './crafts/**/*.{ts}',
+    '../../../vue/core/src/**/*.{vue,ts,tsx}',
+    '!../../../vue/core/src/**/examples/**/*.{vue,ts,tsx}',
+  ],
+} satisfies Config

package/src/razer/components/arrow.css

@@ -0,0 +1,20 @@
+@layer components {
+  *:where([data-part='arrow']) {
+    --arrow-border: var(--color-h00);
+    --arrow-background: var(--color-hff);
+
+    &[data-theme-surface='dark'] {
+      --arrow-border: var(--color-h33);
+      --arrow-background: var(--color-h00);
+    }
+
+    &[data-theme-surface='razer'] {
+      --arrow-border: var(--color-h00);
+      --arrow-background: var(--color-rz-green);
+    }
+  }
+
+  *:where([data-part='arrow-tip']) {
+    @apply bg-(--arrow-background) data-theme-bordered:border-(--arrow-border);
+  }
+}

package/src/razer/components/badge.css

@@ -0,0 +1,13 @@
+@layer components {
+  .rui-badge {
+    &[data-variant="default"] {
+      @apply bg-rz-green text-h00 font-rob-bold
+    }
+    &[data-variant="secondary"] {
+      @apply bg-h00 text-rz-green
+    }
+    &[data-variant="dot"] {
+      @apply bg-rz-red
+    }
+  }
+}

package/src/razer/components/button.css

@@ -0,0 +1,40 @@
+@layer components {
+  .rui-btn {
+    /* --rui-ripple-color: var(--color-rz-green); */
+    &[data-variant="default"] {
+      --rui-ripple-color: var(--color-rz-green-border);
+      @apply bg-rz-green text-h00 border-rz-green-border
+      hover:bg-rz-green-light hover:border-rz-green-border-hover hover:ring-rz-green-border-hover
+      active:bg-rz-green-dark-active active:border-rz-green-border-active active:ring-rz-green-border-active;
+    }
+
+    &[data-variant="normal"] {
+      --rui-ripple-color: var(--color-h4f);
+      @apply bg-h70 text-hff border-h4f
+      hover:bg-h9b hover:border-h83 hover:ring-h83
+      active:bg-h4f active:border-h37 active:ring-h37;
+    }
+
+    &[data-variant="outline"] {
+      --rui-ripple-color: var(--color-hcc);
+      @apply bg-transparent text-hcc border-hcc
+      hover:border-hff hover:ring-hff
+      active:border-hbb active:ring-hbb;
+    }
+
+    &[data-variant="text"] {
+      --rui-ripple-color: var(--color-h8f);
+      @apply border-none bg-transparent text-hcc
+      hover:bg-h33 hover:text-hff
+      active:bg-h24 active:text-h8f;
+    }
+
+    &[data-variant="icon"] {
+      --rui-ripple-color: var(--color-h8f);
+      @apply bg-transparent text-hcc
+      hover:bg-h33 hover:text-hff
+      active:bg-h24 active:text-h8f;
+    }
+    
+  }
+}