@rark-ui/themes 1.1.0 → 1.2.1

package/src/razer/preset.css

@@ -0,0 +1,261 @@
+@import '../shared/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/addons/**/*.{vue,ts,tsx}',
+  ],
+} satisfies Config

package/src/shared/css/animation-easing.css

@@ -0,0 +1,21 @@
+@theme {
+  /* tw default duration */
+  --tw-duration: var(--motion-duration);
+  --default-transition-duration: var(--motion-duration);
+  --transition-duration: var(--motion-duration);
+  --tw-timing: var(--motion-timing);
+  --default-transition-timing-function: var(--motion-timing);
+  --transition-timing-function: var(--motion-timing);
+}
+
+@property --motion-duration {
+  syntax: '<time>';
+  inherits: false;
+  initial-value: 200ms;
+}
+
+@property --motion-timing {
+  syntax: '*';
+  inherits: false;
+  initial-value: cubic-bezier(0, 0, 0.2, 1);
+}

package/src/shared/css/animations.css

@@ -0,0 +1,252 @@
+@import './animation-easing.css';
+
+@plugin 'tailwindcss-motion';
+
+@theme {
+  --animate-accordion-down: accordion-down var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --animate-accordion-up: accordion-up var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --animate-collapsible-down: collapsible-down var(--tw-duration, 200ms)
+    var(--tw-timing, ease-in-out);
+  --animate-collapsible-up: collapsible-up var(--tw-duration, 200ms)
+    var(--tw-timing, ease-in-out);
+  --animate-quick-squeeze-x: squeeze-x var(--tw-duration, 200ms)
+    var(--tw-timing, ease-in-out);
+  --animate-rippling: rippling var(--tw-ripple-duration, 600ms) ease-out;
+  --animate-spin: spin 1s linear infinite;
+  --animate-fade-scale-in: fade-scale-in var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --animate-fade-scale-out: fade-scale-out var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --animate-backdrop-blur-in: backdrop-blur-in var(--tw-duration, 200ms) 
+    var(--tw-timing, ease-out) forwards;
+  --animate-backdrop-blur-out: backdrop-blur-out var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out) forwards;
+
+  /* toast exit animations */
+  --animate-toast-exit-right: toast-exit-right var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --animate-toast-exit-left: toast-exit-left var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --animate-toast-exit-top: toast-exit-top var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --animate-toast-exit-bottom: toast-exit-bottom var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+
+  /* Keyframes */
+  @keyframes accordion-down {
+    from {
+      height: 0px;
+    }
+
+    to {
+      height: var(--reka-accordion-content-height, 0px);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--reka-accordion-content-height, 0px);
+    }
+
+    to {
+      height: 0px;
+    }
+  }
+
+  @keyframes collapsible-down {
+    from {
+      height: var(--collapsed-height, 0px);
+    }
+
+    to {
+      height: var(--height, 0px);
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      height: var(--height, 0px);
+    }
+
+    to {
+      height: var(--collapsed-height, 0px);
+    }
+  }
+
+  @keyframes squeeze-x {
+    from {
+      transform: scaleX(1);
+    }
+
+    50% {
+      transform: scaleX(1.15);
+    }
+
+    to {
+      transform: scaleX(1);
+    }
+  }
+
+  @keyframes path-dash {
+    from {
+      stroke-dashoffset: var(--dash-offset-from, 0);
+    }
+    to {
+      stroke-dashoffset: var(--dash-offset-to, 0);
+    }
+  }
+
+  @keyframes fade-down-out {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(-2rem);
+    }
+  }
+
+  @keyframes blur-in {
+    from {
+      filter: blur(1rem);
+    }
+
+    to {
+      filter: blur(0);
+    }
+  }
+
+  @keyframes rippling {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+
+  @keyframes toast-exit-right {
+    from {
+      opacity: 1;
+      transform: translate3d(var(--reka-toast-swipe-end-x, 0), 0, 0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate3d(calc(100% + 24px), 0, 0);
+    }
+  }
+
+  @keyframes toast-exit-left {
+    from {
+      opacity: 1;
+      transform: translate3d(var(--reka-toast-swipe-end-x, 0), 0, 0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate3d(calc(-100% - 24px), 0, 0);
+    }
+  }
+
+  @keyframes toast-exit-top {
+    from {
+      opacity: 1;
+      transform: translate3d(0, var(--reka-toast-swipe-end-y, 0), 0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate3d(0, calc(-100% - 24px), 0);
+    }
+  }
+
+  @keyframes toast-exit-bottom {
+    from {
+      opacity: 1;
+      transform: translate3d(0, var(--reka-toast-swipe-end-y, 0), 0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate3d(0, calc(100% + 24px), 0);
+    }
+  }
+
+  @keyframes skeleton-wave {
+    to {
+      background-position-x: -200%;
+    }
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes fade-scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes fade-scale-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes backdrop-blur-in {
+    from {
+      backdrop-filter: blur(0);
+    }
+    to {
+      backdrop-filter: blur(.3125rem);
+    }
+  }
+  @keyframes backdrop-blur-out {
+    from {
+      backdrop-filter: blur(.3125rem);
+    }
+    to {
+      backdrop-filter: blur(0);
+    }
+  }
+}
+
+@utility animate-check-dash {
+  --dash-offset-from: -50;
+  --dash-offset-to: 0;
+  stroke-dasharray: 50;
+  stroke-dashoffset: var(--dash-offset-from);
+  animation: path-dash var(--tw-duration, 150ms) var(--tw-timing, ease-out)
+    forwards;
+}
+
+@utility animate-indeterminate-dash {
+  --dash-offset-from: 50;
+  --dash-offset-to: 0;
+  stroke-dasharray: 50;
+  stroke-dashoffset: var(--dash-offset-from);
+  animation: path-dash var(--tw-duration, 150ms) linear forwards;
+}

package/src/shared/css/index.css

@@ -0,0 +1,2 @@
+@import './animations.css';
+@import './static.css';

package/src/shared/css/static.css

@@ -0,0 +1,31 @@
+@theme static {
+  /* z-indexes */
+  --z-base: 0;
+  --z-sticky: 10;
+  --z-dropdown: 50;
+  --z-tooltip: 100;
+  --z-fixed: 200;
+  --z-overlay: 900;
+  --z-modal: 1000;
+  --z-popover: 1100;
+  --z-toast: 1500;
+  --z-loading: 2000;
+  --z-devtools: 9999;
+  --z-max: 2147483647;
+}
+
+@utility overflow-anchor-none {
+  overflow-anchor: none;
+}
+
+@utility overflow-anchor-auto {
+  overflow-anchor: auto;
+}
+
+@utility scrollbar-none {
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome / Safari */
+  }
+}
+

package/src/shared/utils/cn.ts

@@ -0,0 +1 @@
+export { cn, cnMerge, cx } from 'tailwind-variants'

package/src/shared/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
+    >
+  >
+}