@raxium/themes 0.1.1

package/src/razer/components/checkbox.css

@@ -0,0 +1,39 @@
+@layer components {
+  .rui-checkbox {
+    @apply text-hcc hover:text-hff disabled:text-hcc;
+    &[disabled],
+    &[data-disabled] {
+      @apply opacity-(--disabled-opacity);
+    }
+  }
+
+  .rui-checkbox-control {
+    @apply bg-transparent border-h55
+    hover:border-rz-green
+    focus:border-rz-green
+    active:bg-rz-green-dark-active
+    active:border-rz-green-dark-active
+    data-[state=checked]:bg-rz-green
+    data-[state=checked]:border-rz-green
+    data-[state=indeterminate]:bg-rz-green
+    data-[state=indeterminate]:border-rz-green;
+
+    &[disabled],
+    &[data-disabled] {
+      @apply border-h55 bg-transparent hover:border-h55;
+      @apply data-[state=checked]:bg-rz-green data-[state=checked]:border-rz-green;
+      @apply data-[state=indeterminate]:bg-rz-green data-[state=indeterminate]:border-rz-green;
+      @apply data-[state=checked]:hover:bg-rz-green data-[state=checked]:hover:border-rz-green data-[state=indeterminate]:hover:bg-rz-green data-[state=indeterminate]:hover:border-rz-green;
+      @apply active:border-h55 active:bg-transparent;
+      @apply data-[state=checked]:active:bg-rz-green data-[state=checked]:active:border-rz-green data-[state=indeterminate]:active:bg-rz-green data-[state=indeterminate]:active:border-rz-green;
+    }
+  }
+
+  .rui-checkbox-label {
+    @apply text-hcc hover:text-hff;
+    &[disabled],
+    &[data-disabled] {
+      @apply hover:text-hcc;
+    }
+  }
+}

package/src/razer/components/collapsible.css

@@ -0,0 +1,16 @@
+@layer components {
+  .rui-readmore {
+    @apply relative;
+  }
+}
+
+@layer utilities {
+  .rui-readmore-trigger {
+    &[data-state='closed'] {
+      @apply absolute bottom-0 right-0 pl-10 py-1 pr-1 bg-linear-[90deg,transparent_0%,var(--color-h1a)_27%];
+    }
+    &[data-state='open'] {
+      @apply static flex w-full justify-end pl-10 py-1 pr-1;
+    }
+  }
+}

package/src/razer/components/date-picker.css

@@ -0,0 +1,46 @@
+@layer components {
+  .rui-date-picker-content {
+    @apply bg-h1a text-hcc border-h11 shadow-rui-popper;
+  }
+
+  .rui-date-picker-table-header {
+    @apply text-hff font-rob-bold;
+  }
+
+  .rui-date-picker-view-trigger, .rui-date-picker-view-control-trigger {
+    @apply hover:bg-h33;
+  }
+
+  .rui-date-picker-table-cell-trigger {
+    &[data-selected],
+    &[data-selected][data-outside-range] {
+      @apply bg-rz-green text-h00 ;
+    }
+
+    &[data-outside-range] {
+      @apply bg-h47;
+    }
+
+    &[data-today] {
+      &:after {
+        @apply  bg-rz-green;
+      }
+    }
+
+    &[data-in-range], &[data-in-hover-range] {
+      @apply bg-rz-green/80 text-h00;
+    }
+
+    &[data-range-start], &[data-hover-range-start] {
+      @apply bg-rz-green text-h00;
+    }
+
+    &[data-range-end], &[data-hover-range-end] {
+      @apply bg-rz-green text-h00;
+    }
+
+    &[data-disabled] {
+      @apply bg-h47 text-h88;
+    }
+  }
+}

package/src/razer/components/dialog.css

@@ -0,0 +1,29 @@
+@layer components {
+  .rui-dialog-backdrop {
+    @apply bg-h00/80 data-[variant=scroll]:webkit-scrollbar-self;
+  }
+
+  .rui-dialog-content {
+    @apply bg-h1a border-h11 webkit-small-scrollbar
+  }
+
+  .rui-dialog-close{
+    @apply text-rui-close hover:text-rui-close-hover;
+  }
+
+  .rui-dialog-header{
+    @apply bg-h22 font-rob-bold;
+  }
+
+  .rui-dialog-footer{
+    @apply bg-h16;
+  }
+
+  .rui-dialog-body{
+    @apply -outline-offset-2;
+  }
+
+  .rui-dialog-content-close{
+    @apply text-rui-close hover:text-rui-close-hover;
+  }
+}

package/src/razer/components/editable.css

@@ -0,0 +1,27 @@
+@layer components {
+  .rui-editable-input {
+    --default-border-color: var(--color-h55);
+    --hover-border-color: var(--color-h66);
+    --focus-border-color: var(--color-rz-green);
+    @apply bg-transparent border-(--default-border-color) text-hbb transition-colors;
+    @apply hover:border-(--hover-border-color) focus:border-(--focus-border-color);
+    @apply data-[state=focused]:border-(--focus-border-color) 
+      data-[state=focused]:hover:border-(--focus-border-color) 
+        data-[state=focused]:ring-2
+        data-[state=focused]:ring-(--focus-border-color)/30;
+    @apply data-[state=disabled]:hover:border-(--default-border-color) data-[state=disabled]:bg-h1d;
+    @apply data-[state=readonly]:bg-h1d;
+
+    &[data-focused] {
+      @apply border-(--focus-border-color) hover:border-(--focus-border-color) ring-2 ring-(--focus-border-color)/30;
+    }
+  }
+
+  .rui-editable-input-input {
+    @apply placeholder:text-h55 placeholder:italic selection:bg-[#204C19] selection:text-[#97C390];
+  }
+
+  .rui-editable-input-clearable {
+    @apply fill-rui-close stroke-black hover:fill-rui-close-hover;
+  }
+}

package/src/razer/components/floating-panel.css

@@ -0,0 +1,11 @@
+@layer components {
+  .rui-floating-panel-content {
+    @apply bg-h00/80 rounded-[1.25rem] border-rz-green border-2 backdrop-blur-md;
+  }
+  .rui-floating-panel-header {
+    @apply font-rob-bold;
+  }
+  .rui-floating-panel-trigger {
+    @apply text-rui-close hover:text-rui-close-hover;
+  }
+}

package/src/razer/components/hotkey.css

@@ -0,0 +1,5 @@
+@import './input.css';
+
+@layer components {
+  .rui-hotkey {}
+}

package/src/razer/components/hover-card.css

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

package/src/razer/components/input.css

@@ -0,0 +1,29 @@
+@layer components {
+  .rui-input {
+    --default-border-color: var(--color-h55);
+    --hover-border-color: var(--color-h66);
+    --focus-border-color: var(--color-rz-green);
+    @apply bg-transparent border-(--default-border-color) text-hbb transition-colors;
+    @apply hover:border-(--hover-border-color) focus:border-(--focus-border-color);
+    @apply data-[state=focused]:border-(--focus-border-color) 
+      data-[state=focused]:hover:border-(--focus-border-color) 
+        data-[state=focused]:ring-2
+        data-[state=focused]:ring-(--focus-border-color)/30;
+    @apply data-[state=disabled]:hover:border-(--default-border-color) data-[state=disabled]:bg-h1d;
+    @apply data-[state=readonly]:bg-h1d;
+
+    &[data-focus] {
+      @apply border-(--focus-border-color) hover:border-(--focus-border-color) ring-2 ring-(--focus-border-color)/30;
+    }
+  }
+
+  .rui-input-input {
+    @apply placeholder:text-h55 placeholder:italic selection:bg-[#204C19] selection:text-[#97C390];
+  }
+
+  .rui-input-clearable {
+    @apply [&>svg]:fill-rui-close
+           [&>svg]:stroke-black
+           [&>svg]:hover:fill-rui-close-hover;
+  }
+}

package/src/razer/components/menu.css

@@ -0,0 +1,47 @@
+@layer components {
+  .rui-menu-content {
+    --border-radius: var(--radius);
+    /** shadow & border */
+    @apply data-theme-bordered:border-h11 shadow-rui-popper;
+
+    /** arrow */
+    & [data-part='arrow'] {
+      --arrow-background: var(--color-h1a);
+      &[data-theme-surface='dark'] {
+        --arrow-background: var(--color-h1a);
+      }
+    }
+    & [data-part='arrow-tip'] {
+      @apply bg-h1a data-theme-bordered:border-h11;
+    }
+  }
+
+  /** bg & text */
+  .rui-menu-content,
+  .rui-menu-content-inner {
+    @apply bg-h1a;
+  }
+
+  .rui-menu-item {
+    @apply bg-transparent
+    text-hcc
+    data-highlighted:bg-hff/10
+    data-highlighted:text-hff
+    data-[state=open]:bg-hff/10
+    data-[state=open]:text-hff;
+
+    &[data-type='radio'] {
+      & .rui-radio-group-item-indicator[data-variant='checkbox'] {
+        @apply fill-transparent stroke-rz-green;
+      }
+    }
+  }
+
+  .rui-menu-item-group-label {
+    @apply text-hff font-rz-bold border-h11;
+  }
+
+  .rui-menu-separator {
+    @apply border-h11;
+  }
+}

package/src/razer/components/message.css

@@ -0,0 +1,41 @@
+@layer components {
+  .rui-message {
+    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-message-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-message-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-message-close {
+    @apply text-rui-close hover:text-rui-close-hover;
+  }
+}

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

@@ -0,0 +1,9 @@
+@import './input.css';
+
+@layer components {
+  .rui-number-input {}
+
+  .rui-number-input-trigger {
+    @apply hover:bg-h33 hover:text-hff;
+  }
+}

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;
+    }
+  }
+}