@raxium/themes 0.1.1

package/src/razer/components/toast.css

@@ -0,0 +1,41 @@
+@layer components {
+  .rui-toast {
+    overflow-wrap: anywhere;
+    translate: var(--x) var(--y);
+    scale: var(--scale);
+    z-index: var(--z-index);
+    height: var(--height);
+    opacity: var(--opacity);
+
+    will-change: translate, opacity, scale;
+    transition: translate var(--tw-duration, 200ms),
+      scale var(--tw-duration, 200ms), opacity var(--tw-duration, 200ms),
+      height var(--tw-duration, 200ms);
+    transition-timing-function: var(--tw-timing, ease-out);
+
+    &[data-state='closed'] {
+      transition: translate var(--tw-duration, 200ms),
+        scale var(--tw-duration, 200ms), opacity var(--tw-duration, 200ms);
+      transition-timing-function: var(--tw-timing, ease-out);
+    }
+  }
+
+  .rui-toast-content {
+    @apply bg-h22 shadow-rui-popper;
+    @apply success:border-l-rui-success error:border-l-rui-error warning:border-l-rui-warning info:border-l-rui-info loading:border-l-rui-parimary;
+    &[data-placement^='bottom'] {
+      @apply shadow-rui-popper-top;
+    }
+  }
+
+  .rui-toast-icon {
+    @apply success:text-rui-success error:text-rui-error warning:text-rui-warning info:text-rui-info loading:text-rui-parimary;
+    &[data-type='loading'] {
+      @apply animate-spin;
+    }
+  }
+
+  .rui-toast-close {
+    @apply text-rui-close hover:text-rui-close-hover;
+  }
+}

package/src/razer/components/toggle-group.css

@@ -0,0 +1,19 @@
+@layer components {
+  .rui-toggle-group {
+    @apply border-h55;
+  }
+  .rui-toggle-group-item {
+    @apply border-h55 bg-h1a
+    hover:bg-h5e hover:border-h4c hover:ring-h4c
+    active:bg-h1a active:border-h00 active:text-ha7;
+
+    &[data-state='on'] {
+      @apply bg-rz-green-dark
+      hover:bg-rz-green-dark-hover
+      hover:border-rz-green-dark-hover
+      active:bg-rz-green-dark-active
+      active:border-rz-green-dark-active
+      active:text-ha7;
+    }
+  }
+}

package/src/razer/components/toggle.css

@@ -0,0 +1,17 @@
+@layer components {
+  .rui-toggle {
+    @apply border-h00 bg-h1a
+    hover:bg-h5e hover:border-h4c hover:ring-h4c
+    active:bg-h1a active:border-h00 active:text-ha7;
+
+    &[data-state='on'] {
+      @apply bg-rz-green-dark
+      border-rz-green-dark
+      hover:bg-rz-green-dark-hover
+      hover:border-rz-green-dark-hover
+      active:bg-rz-green-dark-active
+      active:border-rz-green-dark-active
+      active:text-ha7;
+    }
+  }
+}

package/src/razer/components/tooltip.css

@@ -0,0 +1,16 @@
+@layer components {
+  .rui-tooltip-content {
+    --border-radius: var(--radius);
+    @apply shadow-rui-popper;
+    @apply data-theme-bordered:border-h00;
+    @apply surface-dark:data-theme-bordered:border-h33;
+    @apply surface-razer:border-h00;
+  }
+
+  .rui-tooltip-content,
+  .rui-tooltip-content-inner {
+    @apply bg-hff text-h00;
+    @apply surface-dark:bg-h00 surface-dark:text-hff;
+    @apply surface-razer:bg-rz-green surface-razer:text-h00;
+  }
+}

package/src/razer/components/tree.css

@@ -0,0 +1,19 @@
+
+@import './checkbox.css';
+
+@layer components {
+  .rui-tree-item[data-disabled] {
+    @apply opacity-(--disabled-opacity);
+  }
+
+  .rui-tree-branch {
+    &[data-disabled] {
+      @apply opacity-(--disabled-opacity);
+    }
+    &:not([data-disabled]) {
+      & .rui-tree-branch-control[data-disabled] {
+        @apply cursor-pointer;
+      }
+    }
+  }
+}

package/src/razer/components.css

@@ -0,0 +1,33 @@
+@import './components/arrow.css';
+@import './components/badge.css';
+@import './components/button.css';
+@import './components/checkbox.css';
+@import './components/radio-group.css';
+@import './components/collapsible.css';
+@import './components/input.css';
+@import './components/editable.css';
+@import './components/tooltip.css';
+@import './components/dialog.css';
+@import './components/hover-card.css';
+@import './components/popover.css';
+@import './components/switch.css';
+@import './components/menu.css';
+@import './components/select.css';
+@import './components/toast.css';
+@import './components/message.css';
+@import './components/slider.css';
+@import './components/tabs.css';
+@import './components/scroll-area.css';
+@import './components/toggle.css';
+@import './components/toggle-group.css';
+@import './components/progress.css';
+@import './components/hotkey.css';
+@import './components/spin.css';
+@import './components/tags-input.css';
+@import './components/skeleton.css';
+@import './components/rating-group.css';
+@import './components/pagination.css';
+@import './components/number-input.css';
+@import './components/date-picker.css';
+@import './components/tree.css';
+@import './components/floating-panel.css';

package/src/razer/crafts/index.ts

@@ -0,0 +1,16 @@
+/**
+ *
+ * you can extend the core crafts by importing them from the default theme
+ * and then extending them with your own customizations
+ *
+ * example:
+ * import { coreCrafts } from '../../../default'
+ * import { tv } from '../../utils'
+ * export const tvButton = tv({
+ *   extend: coreCrafts.tvButton,
+ *   // your own customizations here
+ * })
+ *
+ */
+
+export {}

package/src/razer/index.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+
+@config './tailwind.config.ts';
+
+@import './preset.css';
+@import './components.css';

package/src/razer/index.ts

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

package/src/razer/preset.css

@@ -0,0 +1,261 @@
+@import '../css/index.css';
+
+@custom-variant skin-razer (&:where(html[data-theme-skin=razer], html[data-theme-skin=razer] *));
+
+@custom-variant surface-dark (&:where([data-theme-surface=dark], [data-theme-surface=dark] *));
+@custom-variant surface-light (&:where([data-theme-surface=light], [data-theme-surface=light] *));
+@custom-variant surface-razer (&:where([data-theme-surface=razer], [data-theme-surface=razer] *));
+
+@custom-variant success (&:where([data-type=success], [data-type=success] *));
+@custom-variant error (&:where([data-type=error], [data-type=error] *));
+@custom-variant warning (&:where([data-type=warning], [data-type=warning] *));
+@custom-variant info (&:where([data-type=info], [data-type=info] *));
+@custom-variant loading (&:where([data-type=loading], [data-type=loading] *));
+@custom-variant arrow-css (&:where([data-arrow-type="css"]));
+@custom-variant arrow-svg (&:where([data-arrow-type="svg"]));
+
+@theme {
+  /* Spacing */
+  --spacing: 0.25rem;
+
+  /* Breakpoints */
+  --break-point-sm: 1024px;
+  --break-point-md: 1440px;
+  --break-point-lg: 1920px;
+  --break-point-xl: 2560px;
+  --break-point-2xl: 3840px;
+
+  /* Colors */
+  --color-*: initial;
+  --color-tw-ring-color: transparent;
+  --color-rz-green: oklch(76.87% 0.2343 141.32);
+  --color-rz-green-dark: oklch(47.48% 0.2343 141.32);
+  --color-rz-green-dark-hover: oklch(59.25% 0.2343 141.32);
+  --color-rz-green-dark-active: oklch(33.16% 0.2343 141.32);
+  --color-rz-green-light: oklch(82.23% 0.2343 141.32);
+  --color-rz-green-border: oklch(45.35% 0.2343 141.32);
+  --color-rz-green-border-hover: oklch(70.57% 0.2343 141.32);
+  --color-rz-green-border-active: oklch(45.88% 0.2343 141.32);
+
+  --color-rz-orange: oklch(80.16% 0.1705 73.27);
+  --color-rz-red: oklch(62.32% 0.2121 25.89);
+  --color-rz-blue: oklch(69% 0.1282 229.93);
+
+  --color-black: oklch(0% 0 0);
+  --color-h00: oklch(0% 0 0);
+  --color-white: oklch(100% 0 0);
+  --color-hff: oklch(100% 0 0);
+  --color-h70: oklch(54.52% 0 0);
+  --color-h4f: oklch(42.76% 0 0);
+  --color-h9b: oklch(68.95% 0 0);
+  --color-h83: oklch(61% 0 0);
+  --color-h37: oklch(33.68% 0 0);
+  --color-hcc: oklch(84.52% 0 0);
+  --color-hbb: oklch(79.21% 0 0);
+  --color-h33: oklch(32.11% 0 0);
+  --color-h24: oklch(26.03% 0 0);
+  --color-h8f: oklch(65% 0 0);
+  --color-h1a: oklch(21.78% 0 0);
+  --color-ha7: oklch(72.84% 0 0);
+  --color-h5e: oklch(48.19% 0 0);
+  --color-h4c: oklch(41.65% 0 0);
+  --color-h55: oklch(44.95% 0 0);
+  --color-h54: oklch(44.59% 0 0);
+  --color-h66: oklch(51.03% 0 0);
+  --color-h58: oklch(46.04% 0 0);
+  --color-h28: oklch(27.68% 0 0);
+  --color-h78: oklch(57.27% 0 0);
+  --color-h88: oklch(62.68% 0 0);
+  --color-hee: oklch(94.91% 0 0);
+  --color-h44: oklch(38.67% 0 0);
+  --color-h22: oklch(25.2% 0 0);
+  --color-h16: oklch(20.02% 0 0);
+  --color-h11: oklch(15.26% 0 0);
+  --color-h2a: oklch(22.22% 0 0);
+  --color-h1d: oklch(19.61% 0 0);
+  --color-h47: oklch(40.64% 0 0);
+  --color-h90: oklch(65.34% 0 0);
+
+  /* Text */
+  --text-3xs: 0.5rem;
+  --text-3xs--line-height: 1.25;
+  --text-2xs: 0.625rem;
+  --text-2xs--line-height: 1.25;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1.25;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25;
+  --text-base: 1rem;
+  --text-base--line-height: 1.25;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.25;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.25;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 1.25;
+  --text-3xl: 2rem;
+  --text-3xl--line-height: 1.25;
+
+  /* Shadows */
+  --shadow-glory: 0 0 1.5625rem 0 oklch(86.64% 0.2343 141.32 / 47%);
+  --shadow-black: 0 0 0.625rem 0 oklch(0% 0 0 / 80%);
+  --shadow-black-md: 0 0 0.9375rem 0 oklch(0% 0 0 / 80%);
+
+  /* Fonts */
+  --font-rob: Roboto, var(--font-sans);
+  --font-rob-regular: Roboto-Regular, var(--font-sans);
+  --font-rob-medium: Roboto-Medium, var(--font-sans);
+  --font-rob-bold: Roboto-Bold, var(--font-sans);
+  --font-rob-black: Roboto-Black, var(--font-sans);
+  --font-rz: RazerF5, var(--font-sans);
+  --font-rz-light: RazerF5-Light, var(--font-sans);
+  --font-rz-medium: RazerF5-Medium, var(--font-sans);
+  --font-rz-bold: RazerF5-Bold, var(--font-sans);
+  --font-rz-black: RazerF5-Black, var(--font-sans);
+
+  /* Border Radius */
+  --radius: 0.125rem; /* 2px */
+  --radius-md: calc(var(--radius) + 0.125rem); /* 4px */
+  --radius-lg: calc(var(--radius) + 0.25rem); /* 6px */
+
+  /* Other */
+  --outline: 2px solid var(--color-rz-green);
+  --disabled-opacity: var(--opacity-50, 0.5);
+
+  /* RUI Theme*/
+  --color-rui-parimary: var(--color-rz-green);
+  --color-rui-parimary-hover: var(--color-rz-green-dark-hover);
+  --color-rui-parimary-active: var(--color-rz-green-dark-active);
+
+  --color-rui-border: var(--color-h54);
+
+  --color-rui-toggle-text: var(--color-h88);
+  --color-rui-toggle-text-hover: var(--color-hff);
+  --color-rui-toggle-text-active: var(--color-hff);
+
+  --color-rui-success: var(--color-rz-green);
+  --color-rui-error: var(--color-rz-red);
+  --color-rui-info: var(--color-h88);
+  --color-rui-warning: var(--color-rz-orange);
+
+  --color-rui-close: var(--color-h88);
+  --color-rui-close-hover: var(--color-hff);
+
+  --color-rui-separator: var(--color-h00);
+
+  --font-rui-label: var(--font-rob-bold);
+
+  --shadow-rui-popper: 0 0.25rem 0.375rem 0 oklch(0% 0 0 / 80%);
+  --shadow-rui-popper-top: 0 -0.25rem 0.375rem 0 oklch(0% 0 0 / 80%);
+}
+
+@theme inline {
+}
+
+@theme static {
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  :root {
+    font-family: var(--font-roboto, --font-sans);
+  }
+
+  *:focus-visible {
+    outline: var(--outline);
+    outline-offset: 2px;
+  }
+}
+
+@utility flex-c {
+  @apply flex justify-center items-center;
+}
+
+@utility flex-ac {
+  @apply flex justify-around items-center;
+}
+
+@utility flex-bc {
+  @apply flex justify-between items-center;
+}
+
+@utility flex-col-c {
+  @apply flex flex-col justify-center items-center;
+}
+
+@utility flex-col-ac {
+  @apply flex flex-col justify-center items-center;
+}
+
+@utility flex-col-bc {
+  @apply flex flex-col justify-between items-center;
+}
+
+@utility hide-scrollbar {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility webkit-scrollbar {
+  ::-webkit-scrollbar {
+    @apply size-[6px];
+  }
+
+  ::-webkit-scrollbar-track-piece {
+    @apply bg-transparent rounded-[6px];
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply h-[30px] bg-h58/40 rounded-[6px] hover:bg-rz-green active:bg-rz-green/70 focus:bg-rz-green/70;
+  }
+}
+
+@utility webkit-scrollbar-self {
+  &::-webkit-scrollbar {
+    @apply size-[6px];
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    @apply bg-transparent rounded-[6px];
+  }
+
+  &::-webkit-scrollbar-thumb {
+    @apply h-[30px] bg-h58/40 rounded-[6px] hover:bg-rz-green active:bg-rz-green/70 focus:bg-rz-green/70;
+  }
+}
+
+@utility webkit-small-scrollbar {
+  ::-webkit-scrollbar {
+    @apply size-[3px];
+  }
+
+  ::-webkit-scrollbar-track-piece {
+    @apply bg-transparent rounded-[1px];
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply h-[5px] bg-h58/40 rounded-[1px] hover:bg-rz-green active:bg-rz-green/70 focus:bg-rz-green/70;
+  }
+}
+
+@utility webkit-small-scrollbar-self {
+  &::-webkit-scrollbar {
+    @apply size-[3px];
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    @apply bg-transparent rounded-[1px];
+  }
+
+  &::-webkit-scrollbar-thumb {
+    @apply h-[5px] bg-h58/40 rounded-[1px] hover:bg-rz-green active:bg-rz-green/70 focus:bg-rz-green/70;
+  }
+}

package/src/razer/tailwind.config.ts

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

package/src/utils/cn.ts

@@ -0,0 +1,18 @@
+import type { ClassValue } from 'clsx'
+import clsx from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/** clsx + twMerge，统一处理 class 类型并合并 Tailwind 冲突 */
+export function cn(...classes: ClassValue[]) {
+  return twMerge(clsx(...classes))
+}
+
+export function cnMerge(...classes: ClassValue[]) {
+  return twMerge(clsx(...classes))
+}
+
+export function cx(...classes: ClassValue[]) {
+  return clsx(...classes)
+}
+
+export { clsx }

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './cn'
+export * from './tv'

package/src/utils/tv.ts

@@ -0,0 +1,91 @@
+import type {
+  ClassValue,
+  TVCompoundSlots,
+  TVCompoundVariants,
+  TVDefaultVariants,
+  TVReturnType,
+  TVVariants,
+} from 'tailwind-variants'
+import { tv as originTv } from 'tailwind-variants'
+
+type TVSlots = Record<string, ClassValue> | undefined
+export type { VariantProps } from 'tailwind-variants'
+
+export function tv<
+  V extends TVVariants<S, B, EV>,
+  CV extends TVCompoundVariants<V, S, B, EV, ES>,
+  DV extends TVDefaultVariants<V, S, EV, ES>,
+  B extends ClassValue = undefined,
+  S extends TVSlots = undefined,
+  // @ts-expect-error error in tailwind-variants
+  E extends TVReturnType = TVReturnType<
+    V,
+    S,
+    B,
+    // @ts-expect-error error in tailwind-variants
+    EV extends undefined ? {} : EV,
+    // @ts-expect-error error in tailwind-variants
+    ES extends undefined ? {} : ES
+  >,
+  EV extends TVVariants<ES, B, E['variants'], ES> = E['variants'],
+  ES extends TVSlots = E['slots'] extends TVSlots ? E['slots'] : undefined,
+>(
+  options: {
+    extend?: E
+    base?: B
+    slots?: S
+    variants?: V
+    compoundVariants?: CV
+    compoundSlots?: TVCompoundSlots<V & { unstyled: { true: ClassValue, false: ClassValue } }, S, B>
+    defaultVariants?: DV
+  },
+  ruiConfig?: {
+    class?: ClassValue
+    className?: ClassValue
+    slots?: Record<keyof S, ClassValue>
+  },
+  config?: any,
+) {
+  type mergedV = V & { unstyled: { true: ClassValue, false: ClassValue } }
+
+  // fix: extend时, ruiConfig丢失
+  const _ruiConfig = ruiConfig ?? options.extend?._ruiConfig
+  const variants = {
+    ...(options.variants ?? {}),
+    unstyled: {
+      true: '',
+      false: _ruiConfig?.class ?? _ruiConfig?.className ?? '',
+    },
+  }
+
+  const unstyledCompoundSlots: any[] = []
+  for (const key in _ruiConfig?.slots) {
+    unstyledCompoundSlots.push({
+      slots: [key],
+      unstyled: false,
+      class: _ruiConfig?.slots[key],
+    })
+  }
+  options.variants = variants as V
+  options.defaultVariants = {
+    ...(options.defaultVariants ?? {}),
+    unstyled: false,
+  } as unknown as DV
+
+  options.compoundSlots = (options.compoundSlots ?? []).concat(unstyledCompoundSlots)
+
+  const result: any = originTv(options as any, config)
+  result._ruiConfig = ruiConfig
+  return result as ReturnType<
+    typeof originTv<
+      mergedV,
+      TVCompoundVariants<mergedV, S, B, EV, ES>,
+      TVDefaultVariants<mergedV, S, EV, ES>,
+      B,
+      S,
+      E,
+      EV,
+      ES
+    >
+  >
+}