@rark-ui/themes 1.1.0 → 1.2.1

package/src/razer/components/pagination.css

@@ -0,0 +1,14 @@
+@layer components {
+  .rui-pagination-control {}
+
+  .rui-pagination-item {
+    @apply text-h90 hover:text-hff hover:bg-h00/30;
+    &[data-selected] {
+      @apply text-hff bg-h00/30;
+    }
+  }
+
+  .rui-pagination-ellipsis {
+    @apply text-h90;
+  }
+}

package/src/razer/components/popover.css

@@ -0,0 +1,19 @@
+@layer components {
+  .rui-popover-content {
+    --border-radius: var(--radius);
+    @apply shadow-rui-popper;
+    @apply data-theme-bordered:border-h00;
+    @apply surface-dark:data-theme-bordered:border-h33;
+  }
+
+  .rui-popover-content,
+  .rui-popover-content-inner {
+    @apply bg-hff text-h00;
+    @apply surface-dark:bg-h00 surface-dark:text-hff;
+  }
+
+  .rui-popover-close {
+    @apply text-rui-close hover:text-h00;
+    @apply surface-dark:hover:text-rui-close-hover;
+  }
+}

package/src/razer/components/progress.css

@@ -0,0 +1,78 @@
+@layer components {
+  .rui-progress-track {
+    @apply bg-rz-green/30;
+  }
+
+  .rui-progress-range {
+    &[data-variant='default'] {
+      @apply bg-rz-green;
+    }
+
+    &[data-variant='robbin'][data-orientation='horizontal'] {
+      --robbin-1: var(--color-rz-green);
+      --robbin-2: oklch(70% 0.2343 141.32);
+      background-image: linear-gradient(
+        45deg,
+        var(--robbin-1) 25%,
+        var(--robbin-2) 25%,
+        var(--robbin-2) 50%,
+        var(--robbin-1) 50%,
+        var(--robbin-1) 75%,
+        var(--robbin-2) 75%,
+        var(--robbin-2)
+      );
+      background-size: var(--height) var(--height);
+      background-repeat: repeat-x;
+      animation: robbin-left-to-right 0.6s linear infinite;
+    }
+
+    &[data-variant='robbin'][data-orientation='vertical'] {
+      --robbin-1: var(--color-rz-green);
+      --robbin-2: oklch(70% 0.2343 141.32);
+      background-image: linear-gradient(
+        45deg,
+        var(--robbin-1) 25%,
+        var(--robbin-2) 25%,
+        var(--robbin-2) 50%,
+        var(--robbin-1) 50%,
+        var(--robbin-1) 75%,
+        var(--robbin-2) 75%,
+        var(--robbin-2)
+      );
+      background-size: var(--width) var(--width);
+      background-repeat: repeat-y;
+      animation: robbin-top-to-bottom 0.6s linear infinite;
+    }
+
+    &[data-variant='transfer'] {
+      --transfer-from: oklch(76.87% 0.2343 141.32);
+      --transfer-to: oklch(80.16% 0.1705 73.27);
+    }
+  }
+
+
+  .rui-progress-circle-track{
+    @apply stroke-rz-green/30;
+  }
+
+  .rui-progress-circle-range{
+    &[data-variant='default'] {
+      @apply stroke-rz-green;
+    }
+    &[data-variant='transfer'] {
+      --transfer-from: oklch(76.87% 0.2343 141.32);
+      --transfer-to: oklch(80.16% 0.1705 73.27);
+    }
+  }
+
+  @keyframes robbin-left-to-right {
+    to {
+      background-position: 6px 0;
+    }
+  }
+  @keyframes robbin-top-to-bottom {
+    to {
+      background-position: 0 6px;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+@layer components {
+  .rui-radio-group-root {
+  }
+  .rui-radio-group-item {
+    @apply data-disabled:opacity-(--disabled-opacity);
+  }
+  .rui-radio-group-item-control {
+    @apply bg-transparent active:bg-h28 border-h70 
+         hover:border-rz-green active:border-rz-green
+         group-hover/item:border-rz-green group-focus-within/item:border-rz-green;
+
+ 
+    @apply data-disabled:hover:border-h70 data-disabled:active:bg-h28 data-disabled:active:border-h70
+    data-disabled:group-hover/item:border-h70 data-disabled:group-focus-within/item:border-h70;
+
+    &[data-variant='checkbox'] {
+      @apply data-[state=checked]:bg-rz-green
+      data-[state=checked]:hover:bg-rz-green-light
+      data-[state=checked]:active:bg-rz-green-dark-active
+      data-[state=checked]:border-rz-green
+      data-[state=checked]:hover:border-rz-green-light
+      data-[state=checked]:active:border-rz-green-dark-active;
+
+      @apply data-disabled:data-[state=checked]:bg-rz-green 
+      data-disabled:data-[state=checked]:hover:bg-rz-green 
+      data-disabled:data-[state=checked]:active:bg-rz-green 
+      data-disabled:data-[state=checked]:border-rz-green 
+      data-disabled:data-[state=checked]:hover:border-rz-green 
+      data-disabled:data-[state=checked]:active:border-rz-green;
+    }
+  }
+  .rui-radio-group-item-indicator {
+    @apply fill-rz-green stroke-rz-green;
+    &[data-variant="checkbox"] {
+      @apply fill-transparent stroke-h00;
+    }
+  }
+
+  .rui-radio-group-item-text {
+    @apply text-hcc hover:text-hff group-hover/item:text-hff;
+    @apply data-disabled:hover:text-hcc data-disabled:group-hover/item:text-hcc;
+    
+  }
+}

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

@@ -0,0 +1,26 @@
+@layer components {
+  .rui-rating-group-item {
+    --fill-color: var(--color-h88);
+    --stroke-color: var(--color-h88);
+    --highlighted-fill-color: var(--color-hff);
+    --highlighted-stroke-color: var(--color-hff);
+  }
+
+  .rui-rating-group-item-indicator {
+    & [data-bg] {
+      stroke: var(--stroke-color);
+      fill: var(--fill-color);
+    }
+    & [data-fg] {
+      stroke: var(--highlighted-stroke-color);
+      fill: var(--highlighted-fill-color);
+      clip-path: inset(0 0 0 0);
+    }
+    &[data-half] [data-fg] {
+      clip-path: inset(0 50% 0 0);
+    }
+    &:not([data-highlighted]) [data-fg] {
+      clip-path: inset(0 100% 0 0);
+    }
+  }
+}

package/src/razer/components/scroll-area.css

@@ -0,0 +1,14 @@
+@layer components {
+  .rui-scroll-area-scrollbar {
+    @apply bg-h00/30;
+  }
+
+  .rui-scroll-area-thumb {
+    @apply bg-h58/40;
+    &[data-hover],
+    &[data-scrolling],
+    &[data-dragging] {
+      @apply bg-rz-green/80;
+    }
+  }
+}

package/src/razer/components/select.css

@@ -0,0 +1,31 @@
+@layer components {
+  .rui-select-trigger {
+    @apply bg-h16 text-hbb border-h00 data-[state=open]:border-rz-green;
+
+    &:not([data-disabled]) {
+      @apply hover:border-rz-green;
+    }
+  }
+
+  .rui-select-content {
+    @apply bg-h1a text-hcc border-h11 shadow-rui-popper webkit-small-scrollbar;
+  }
+
+  .rui-select-item {
+    @apply bg-transparent data-highlighted:bg-h28 text-hbb data-[state=checked]:text-rz-green;
+  }
+
+  .rui-select-item-group-label {
+    @apply text-hff font-rz-bold border-h11;
+  }
+
+  .rui-select-separator {
+    @apply border-h11;
+  }
+
+  .rui-select-clear-trigger {
+    @apply [&>svg]:fill-rui-close
+    [&>svg]:stroke-black
+    [&>svg]:hover:fill-rui-close-hover;
+  }
+}

package/src/razer/components/skeleton.css

@@ -0,0 +1,11 @@
+@layer components {
+  .rui-skeleton {
+    @apply bg-h55;
+    &[data-variant="wave"] {
+      --tw-duration: 2s;
+      @apply bg-linear-to-r from-h33 from-8% via-h55 via-18% to-h33 to-33%;
+      background-size: 200% 100%;
+      animation: skeleton-wave var(--tw-duration, 2s) linear infinite;
+    }
+  }
+}

package/src/razer/components/slider.css

@@ -0,0 +1,27 @@
+@layer components {
+  .rui-slider-track {
+    @apply bg-h33;
+  }
+
+  .rui-slider-range {
+    @apply bg-rz-green;
+  }
+
+  .rui-slider-thumb {
+    @apply 
+     data-[theme-size=xs]:border 
+     data-[theme-size=sm]:border-2 
+     data-[theme-size=base]:border-2
+     data-[theme-size=lg]:border-2;
+    @apply border-rz-green bg-h00;
+  }
+
+  .rui-slider-marker-dot {
+    &[data-state="over-value"] {
+      @apply bg-h33;
+    }
+    &[data-state="under-value"] {
+      @apply bg-rz-green;
+    }
+  }
+}

package/src/razer/components/spin.css

@@ -0,0 +1,15 @@
+@layer components{
+  .rui-spin-mask{
+    @apply bg-h00/50;
+  }
+
+  .rui-spin-icon {
+    &[data-variant="default"] {
+      @apply text-rz-green animate-spin;
+    }
+  }
+
+  .rui-spin-text{
+    @apply text-h88;
+  }
+}

package/src/razer/components/switch.css

@@ -0,0 +1,24 @@
+@layer components {
+  .rui-switch-control {
+    @apply bg-h78
+           data-[state=unchecked]:hover:bg-h78/80
+           data-[state=checked]:bg-rz-green
+           data-[state=checked]:hover:bg-rz-green-light
+           border-transparent;
+    &[data-disabled] {
+      @apply bg-h78 hover:bg-h78;
+      @apply opacity-(--disabled-opacity);
+    }
+    &[data-state='checked']&[data-disabled] {
+      @apply bg-rz-green;
+      @apply hover:bg-rz-green;
+    }
+  }
+  .rui-switch-thumb {
+    @apply bg-h00;
+  }
+  .rui-switch-label {
+    @apply text-h88;
+    @apply group-hover/switch:text-hff;
+  }
+}

package/src/razer/components/tabs.css

@@ -0,0 +1,11 @@
+@layer components {
+  .rui-tabs-list {
+    @apply border-b border-b-h54;
+  }
+  .rui-tabs-trigger{
+    @apply text-rui-toggle-text hover:text-rui-toggle-text-hover data-[state=active]:text-rui-toggle-text-active;
+  }
+  .rui-tabs-indicator{
+    @apply bg-rz-green;
+  }
+}

package/src/razer/components/tags-input.css

@@ -0,0 +1,16 @@
+@import './input.css';
+
+@layer components {
+  .rui-tags-input-control {
+    &[data-focus] {
+      @apply border-(--focus-border-color) hover:border-(--focus-border-color) ring-2 ring-(--focus-border-color)/30;
+    }
+  }
+
+  .rui-tags-input-item-preview {
+    @apply bg-h22 hover:bg-h44;
+    &[data-highlighted] {
+      @apply bg-rz-blue text-hff;
+    }
+  }
+}

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/virtual.css

@@ -0,0 +1,17 @@
+
+@layer components {
+
+  .rui-virtual-list {
+    @apply webkit-scrollbar-self;
+  }
+
+  .rui-virtual-infinite-spinner {
+    @apply stroke-rz-green;
+  }
+
+  .rui-virtual-infinite-error {
+    & .retry {
+      @apply cursor-pointer hover:text-rz-green;
+    }
+  }
+}

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 '../../../shared/utils/tv'
+ * 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,4 @@
+export { cn } from '../shared/utils/cn'
+export { tv } from '../shared/utils/tv'
+export * as crafts from './crafts/index'
+export type * as Crafts from './crafts/index'