@rotki/ui-library 2.26.1 → 3.0.0-beta.1

package/dist/styles/colors.css

@@ -0,0 +1,315 @@
+:root {
+  /*
+   * Material grey, kept from 2.x because consumers still use it widely. The library itself draws
+   * with the zinc neutral ramp below; the other Material hues were dropped in 3.0.
+   */
+  --rui-grey-50: 250, 250, 250;
+  --rui-grey-100: 245, 245, 245;
+  --rui-grey-200: 238, 238, 238;
+  --rui-grey-300: 224, 224, 224;
+  --rui-grey-400: 189, 189, 189;
+  --rui-grey-500: 158, 158, 158;
+  --rui-grey-600: 117, 117, 117;
+  --rui-grey-700: 97, 97, 97;
+  --rui-grey-800: 66, 66, 66;
+  --rui-grey-900: 33, 33, 33;
+  --rui-grey-a100: 213, 213, 213;
+  --rui-grey-a200: 170, 170, 170;
+  --rui-grey-a400: 97, 97, 97;
+  --rui-grey-a700: 48, 48, 48;
+  --rui-light-primary-main: 78, 91, 166;
+  --rui-light-primary-darker: 54, 63, 114;
+  --rui-light-primary-lighter: 179, 184, 219;
+  --rui-light-secondary-main: 102, 112, 133;
+  --rui-light-secondary-darker: 71, 84, 103;
+  --rui-light-secondary-lighter: 208, 213, 221;
+  /*
+   * Status colors, calmer than the Material set they replace. In light, `main` is both the fill
+   * (white text on it) and the text color, `darker` the text on a tint of it.
+   */
+  --rui-light-error-main: 196, 43, 43;
+  --rui-light-error-darker: 161, 34, 34;
+  --rui-light-error-lighter: 244, 112, 103;
+  --rui-light-warning-main: 163, 90, 0;
+  --rui-light-warning-darker: 133, 73, 0;
+  --rui-light-warning-lighter: 217, 164, 65;
+  --rui-light-info-main: 3, 105, 161;
+  --rui-light-info-darker: 7, 89, 133;
+  --rui-light-info-lighter: 108, 182, 255;
+  --rui-light-success-main: 31, 122, 61;
+  --rui-light-success-darker: 23, 97, 47;
+  --rui-light-success-lighter: 87, 171, 90;
+  --rui-dark-primary-main: 94, 107, 180;
+  --rui-dark-primary-darker: 62, 72, 132;
+  --rui-dark-primary-lighter: 179, 184, 219;
+  --rui-dark-secondary-main: 103, 113, 134;
+  --rui-dark-secondary-darker: var(--rui-light-secondary-darker);
+  --rui-dark-secondary-lighter: 152, 162, 179;
+  /*
+   * In dark, `main` is a calm tone readable as text on every surface, and `darker` the deep fill,
+   * the same as light's `main`, which takes white text. Filled components use `darker` here.
+   */
+  --rui-dark-error-main: 244, 112, 103;
+  --rui-dark-error-darker: 196, 43, 43;
+  --rui-dark-error-lighter: 255, 149, 146;
+  --rui-dark-warning-main: 217, 164, 65;
+  --rui-dark-warning-darker: 163, 90, 0;
+  --rui-dark-warning-lighter: 232, 194, 122;
+  --rui-dark-info-main: 108, 182, 255;
+  --rui-dark-info-darker: 3, 105, 161;
+  --rui-dark-info-lighter: 157, 203, 255;
+  --rui-dark-success-main: 87, 171, 90;
+  --rui-dark-success-darker: 31, 122, 61;
+  --rui-dark-success-lighter: 133, 199, 135;
+  --rui-light-shadow-primary: rgba(9, 9, 11, 0.1);
+  --rui-light-shadow-secondary: rgba(9, 9, 11, 0.06);
+  --rui-dark-shadow-primary: rgba(0, 0, 0, 0.5);
+  --rui-dark-shadow-secondary: rgba(0, 0, 0, 0.3);
+  --rui-shadow-primary: var(--rui-light-shadow-primary);
+  --rui-shadow-secondary: var(--rui-light-shadow-secondary);
+  /* Solid zinc text, so a color reads the same on every surface; secondary keeps 4.5:1 on the menus. */
+  --rui-light-text-primary: rgb(9, 9, 11);
+  --rui-light-text-secondary: rgb(82, 82, 91);
+  --rui-light-text-disabled: rgb(161, 161, 170);
+  --rui-dark-text-primary: rgb(250, 250, 250);
+  --rui-dark-text-secondary: rgb(161, 161, 170);
+  --rui-dark-text-disabled: rgb(113, 113, 122);
+
+  /* The neutral ramp: zinc, a near-pure grey that leaves the indigo primary as the one color. */
+  --rui-neutral-50: 250, 250, 250;
+  --rui-neutral-100: 244, 244, 245;
+  --rui-neutral-200: 228, 228, 231;
+  --rui-neutral-300: 212, 212, 216;
+  --rui-neutral-400: 161, 161, 170;
+  --rui-neutral-500: 113, 113, 122;
+  --rui-neutral-600: 82, 82, 91;
+  --rui-neutral-700: 63, 63, 70;
+  --rui-neutral-800: 39, 39, 42;
+  --rui-neutral-900: 24, 24, 27;
+  --rui-neutral-950: 9, 9, 11;
+
+  /*
+   * Surfaces (bare channels) and lines (full colors, translucent so one value reads on every
+   * surface). Dark surfaces step up the zinc ramp. The adaptive ones start on light.
+   */
+  --rui-light-surface: 255, 255, 255;
+  --rui-dark-surface: var(--rui-neutral-900);
+  --rui-light-background: 255, 255, 255;
+  --rui-dark-background: var(--rui-neutral-950);
+  --rui-light-menu: 255, 255, 255;
+  --rui-dark-menu: var(--rui-neutral-800);
+  --rui-light-overlay: 255, 255, 255;
+  --rui-dark-overlay: var(--rui-neutral-800);
+  --rui-light-divider: rgba(9, 9, 11, 0.1);
+  --rui-dark-divider: rgba(250, 250, 250, 0.1);
+  /*
+   * The edge that identifies a control (a field, an outlined button, a switch track): 3:1 against
+   * the page, the card and the menu in both themes, as WCAG 1.4.11 asks. Decorative lines use the
+   * lighter divider.
+   */
+  --rui-light-outline: rgba(9, 9, 11, 0.46);
+  --rui-dark-outline: rgba(250, 250, 250, 0.36);
+  --rui-light-surface-muted: var(--rui-neutral-100);
+  --rui-dark-surface-muted: var(--rui-neutral-800);
+  --rui-light-surface-sunken: var(--rui-neutral-50);
+  --rui-dark-surface-sunken: var(--rui-neutral-950);
+  /* Links: the info blue, which reads as a link without competing with the indigo primary. */
+  --rui-light-link: 3, 105, 161;
+  --rui-dark-link: 108, 182, 255;
+  /*
+   * The solid fill behind light text. Primary and secondary fill with `main` in both themes; a status
+   * color fills with `main` in light and its deep `darker` in dark, where `main` is a text tone.
+   */
+  --rui-light-primary-fill: var(--rui-light-primary-main);
+  --rui-light-secondary-fill: var(--rui-light-secondary-main);
+  --rui-light-error-fill: var(--rui-light-error-main);
+  --rui-light-warning-fill: var(--rui-light-warning-main);
+  --rui-light-info-fill: var(--rui-light-info-main);
+  --rui-light-success-fill: var(--rui-light-success-main);
+  --rui-dark-primary-fill: var(--rui-dark-primary-main);
+  --rui-dark-secondary-fill: var(--rui-dark-secondary-main);
+  --rui-dark-error-fill: var(--rui-dark-error-darker);
+  --rui-dark-warning-fill: var(--rui-dark-warning-darker);
+  --rui-dark-info-fill: var(--rui-dark-info-darker);
+  --rui-dark-success-fill: var(--rui-dark-success-darker);
+  /* The text on a fill. White on every library color; an app that themes primary light sets its own. */
+  --rui-primary-foreground: 255, 255, 255;
+  --rui-secondary-foreground: 255, 255, 255;
+  --rui-error-foreground: 255, 255, 255;
+  --rui-warning-foreground: 255, 255, 255;
+  --rui-info-foreground: 255, 255, 255;
+  --rui-success-foreground: 255, 255, 255;
+  /*
+   * The chart palette: indigo (the brand), orange, teal, pink, violet, sky, lime and plum. Each hue
+   * sits at the lightness where it looks clean, warm hues lighter and cool ones deeper, and every
+   * series clears 3:1 on its surface. Red and green stay out so no series reads as an error or a
+   * success; orange and sky are brighter than warning and info. The first four alternate warm and
+   * cool, so a chart with few series gets the most distinct colors.
+   */
+  --rui-light-chart-1: 81, 95, 184;
+  --rui-light-chart-2: 228, 108, 29;
+  --rui-light-chart-3: 15, 148, 133;
+  --rui-light-chart-4: 200, 77, 131;
+  --rui-light-chart-5: 127, 85, 198;
+  --rui-light-chart-6: 43, 136, 192;
+  --rui-light-chart-7: 110, 156, 20;
+  --rui-light-chart-8: 120, 57, 118;
+  --rui-light-chart-other: var(--rui-neutral-500);
+  --rui-dark-chart-1: 138, 156, 252;
+  --rui-dark-chart-2: 254, 160, 110;
+  --rui-dark-chart-3: 95, 213, 195;
+  --rui-dark-chart-4: 254, 137, 183;
+  --rui-dark-chart-5: 185, 152, 253;
+  --rui-dark-chart-6: 127, 202, 254;
+  --rui-dark-chart-7: 169, 219, 97;
+  --rui-dark-chart-8: 199, 131, 196;
+  --rui-dark-chart-other: var(--rui-neutral-500);
+  /* The `rui-scrollbar` thumb, a step darker on hover and press. */
+  --rui-light-scrollbar-thumb: rgb(var(--rui-neutral-300));
+  --rui-light-scrollbar-thumb-hover: rgb(var(--rui-neutral-400));
+  --rui-light-scrollbar-thumb-active: rgb(var(--rui-neutral-500));
+  --rui-dark-scrollbar-thumb: rgb(var(--rui-neutral-700));
+  --rui-dark-scrollbar-thumb-hover: rgb(var(--rui-neutral-600));
+  --rui-dark-scrollbar-thumb-active: rgb(var(--rui-neutral-500));
+  /* State layers, the same tints as a hovered or pressed text button. */
+  --rui-light-hover: rgba(9, 9, 11, 0.05);
+  --rui-light-pressed: rgba(9, 9, 11, 0.1);
+  --rui-dark-hover: rgba(250, 250, 250, 0.08);
+  --rui-dark-pressed: rgba(250, 250, 250, 0.12);
+  --rui-surface: var(--rui-light-surface);
+  --rui-background: var(--rui-light-background);
+  --rui-menu: var(--rui-light-menu);
+  --rui-overlay: var(--rui-light-overlay);
+  --rui-divider: var(--rui-light-divider);
+  --rui-outline: var(--rui-light-outline);
+  --rui-hover: var(--rui-light-hover);
+  --rui-pressed: var(--rui-light-pressed);
+  --rui-surface-muted: var(--rui-light-surface-muted);
+  --rui-surface-sunken: var(--rui-light-surface-sunken);
+  --rui-link: var(--rui-light-link);
+  --rui-chart-1: var(--rui-light-chart-1);
+  --rui-chart-2: var(--rui-light-chart-2);
+  --rui-chart-3: var(--rui-light-chart-3);
+  --rui-chart-4: var(--rui-light-chart-4);
+  --rui-chart-5: var(--rui-light-chart-5);
+  --rui-chart-6: var(--rui-light-chart-6);
+  --rui-chart-7: var(--rui-light-chart-7);
+  --rui-chart-8: var(--rui-light-chart-8);
+  --rui-chart-other: var(--rui-light-chart-other);
+  --rui-scrollbar-thumb: var(--rui-light-scrollbar-thumb);
+  --rui-scrollbar-thumb-hover: var(--rui-light-scrollbar-thumb-hover);
+  --rui-scrollbar-thumb-active: var(--rui-light-scrollbar-thumb-active);
+}
+
+/* The adaptive variables alias whichever theme is showing. */
+html[data-theme='light'],
+html.light {
+  --rui-primary-main: var(--rui-light-primary-main);
+  --rui-primary-darker: var(--rui-light-primary-darker);
+  --rui-primary-lighter: var(--rui-light-primary-lighter);
+  --rui-secondary-main: var(--rui-light-secondary-main);
+  --rui-secondary-darker: var(--rui-light-secondary-darker);
+  --rui-secondary-lighter: var(--rui-light-secondary-lighter);
+  --rui-error-main: var(--rui-light-error-main);
+  --rui-error-darker: var(--rui-light-error-darker);
+  --rui-error-lighter: var(--rui-light-error-lighter);
+  --rui-warning-main: var(--rui-light-warning-main);
+  --rui-warning-darker: var(--rui-light-warning-darker);
+  --rui-warning-lighter: var(--rui-light-warning-lighter);
+  --rui-info-main: var(--rui-light-info-main);
+  --rui-info-darker: var(--rui-light-info-darker);
+  --rui-info-lighter: var(--rui-light-info-lighter);
+  --rui-success-main: var(--rui-light-success-main);
+  --rui-success-darker: var(--rui-light-success-darker);
+  --rui-success-lighter: var(--rui-light-success-lighter);
+  --rui-text-primary: var(--rui-light-text-primary);
+  --rui-text-secondary: var(--rui-light-text-secondary);
+  --rui-text-disabled: var(--rui-light-text-disabled);
+  --rui-surface: var(--rui-light-surface);
+  --rui-background: var(--rui-light-background);
+  --rui-menu: var(--rui-light-menu);
+  --rui-overlay: var(--rui-light-overlay);
+  --rui-divider: var(--rui-light-divider);
+  --rui-outline: var(--rui-light-outline);
+  --rui-hover: var(--rui-light-hover);
+  --rui-pressed: var(--rui-light-pressed);
+  --rui-primary-fill: var(--rui-light-primary-fill);
+  --rui-secondary-fill: var(--rui-light-secondary-fill);
+  --rui-error-fill: var(--rui-light-error-fill);
+  --rui-warning-fill: var(--rui-light-warning-fill);
+  --rui-info-fill: var(--rui-light-info-fill);
+  --rui-success-fill: var(--rui-light-success-fill);
+  --rui-surface-muted: var(--rui-light-surface-muted);
+  --rui-surface-sunken: var(--rui-light-surface-sunken);
+  --rui-link: var(--rui-light-link);
+  --rui-chart-1: var(--rui-light-chart-1);
+  --rui-chart-2: var(--rui-light-chart-2);
+  --rui-chart-3: var(--rui-light-chart-3);
+  --rui-chart-4: var(--rui-light-chart-4);
+  --rui-chart-5: var(--rui-light-chart-5);
+  --rui-chart-6: var(--rui-light-chart-6);
+  --rui-chart-7: var(--rui-light-chart-7);
+  --rui-chart-8: var(--rui-light-chart-8);
+  --rui-chart-other: var(--rui-light-chart-other);
+  --rui-scrollbar-thumb: var(--rui-light-scrollbar-thumb);
+  --rui-scrollbar-thumb-hover: var(--rui-light-scrollbar-thumb-hover);
+  --rui-scrollbar-thumb-active: var(--rui-light-scrollbar-thumb-active);
+  --rui-shadow-primary: var(--rui-light-shadow-primary);
+  --rui-shadow-secondary: var(--rui-light-shadow-secondary);
+}
+
+html[data-theme='dark'],
+html.dark {
+  --rui-primary-main: var(--rui-dark-primary-main);
+  --rui-primary-darker: var(--rui-dark-primary-darker);
+  --rui-primary-lighter: var(--rui-dark-primary-lighter);
+  --rui-secondary-main: var(--rui-dark-secondary-main);
+  --rui-secondary-darker: var(--rui-dark-secondary-darker);
+  --rui-secondary-lighter: var(--rui-dark-secondary-lighter);
+  --rui-error-main: var(--rui-dark-error-main);
+  --rui-error-darker: var(--rui-dark-error-darker);
+  --rui-error-lighter: var(--rui-dark-error-lighter);
+  --rui-warning-main: var(--rui-dark-warning-main);
+  --rui-warning-darker: var(--rui-dark-warning-darker);
+  --rui-warning-lighter: var(--rui-dark-warning-lighter);
+  --rui-info-main: var(--rui-dark-info-main);
+  --rui-info-darker: var(--rui-dark-info-darker);
+  --rui-info-lighter: var(--rui-dark-info-lighter);
+  --rui-success-main: var(--rui-dark-success-main);
+  --rui-success-darker: var(--rui-dark-success-darker);
+  --rui-success-lighter: var(--rui-dark-success-lighter);
+  --rui-text-primary: var(--rui-dark-text-primary);
+  --rui-text-secondary: var(--rui-dark-text-secondary);
+  --rui-text-disabled: var(--rui-dark-text-disabled);
+  --rui-surface: var(--rui-dark-surface);
+  --rui-background: var(--rui-dark-background);
+  --rui-menu: var(--rui-dark-menu);
+  --rui-overlay: var(--rui-dark-overlay);
+  --rui-divider: var(--rui-dark-divider);
+  --rui-outline: var(--rui-dark-outline);
+  --rui-hover: var(--rui-dark-hover);
+  --rui-pressed: var(--rui-dark-pressed);
+  --rui-primary-fill: var(--rui-dark-primary-fill);
+  --rui-secondary-fill: var(--rui-dark-secondary-fill);
+  --rui-error-fill: var(--rui-dark-error-fill);
+  --rui-warning-fill: var(--rui-dark-warning-fill);
+  --rui-info-fill: var(--rui-dark-info-fill);
+  --rui-success-fill: var(--rui-dark-success-fill);
+  --rui-surface-muted: var(--rui-dark-surface-muted);
+  --rui-surface-sunken: var(--rui-dark-surface-sunken);
+  --rui-link: var(--rui-dark-link);
+  --rui-chart-1: var(--rui-dark-chart-1);
+  --rui-chart-2: var(--rui-dark-chart-2);
+  --rui-chart-3: var(--rui-dark-chart-3);
+  --rui-chart-4: var(--rui-dark-chart-4);
+  --rui-chart-5: var(--rui-dark-chart-5);
+  --rui-chart-6: var(--rui-dark-chart-6);
+  --rui-chart-7: var(--rui-dark-chart-7);
+  --rui-chart-8: var(--rui-dark-chart-8);
+  --rui-chart-other: var(--rui-dark-chart-other);
+  --rui-scrollbar-thumb: var(--rui-dark-scrollbar-thumb);
+  --rui-scrollbar-thumb-hover: var(--rui-dark-scrollbar-thumb-hover);
+  --rui-scrollbar-thumb-active: var(--rui-dark-scrollbar-thumb-active);
+  --rui-shadow-primary: var(--rui-dark-shadow-primary);
+  --rui-shadow-secondary: var(--rui-dark-shadow-secondary);
+}

package/dist/styles/tokens.css

@@ -0,0 +1,50 @@
+/*
+ * The library's layout tokens. The components read them, and `theme.css` maps them onto Tailwind
+ * (`z-rui-dialog`, `h-rui-app-bar`, `max-w-rui-dialog-md`), so an app that sets one here retunes
+ * the components and its own markup together.
+ */
+:root {
+  /*
+   * Stacking layers, lowest first. Sticky parts inside the content (a table's stuck header and
+   * pagination bar), the page's own fixed parts that float over it (a dock, a FAB, a side tab), the
+   * app's chrome, a modal drawer, then the popups: a menu or tooltip opened from a dialog sits above
+   * it, and a toast above everything but a blocking screen (an error or lock screen). Steps of 100
+   * between the popups leave room for an app's own layer in between.
+   */
+  --rui-z-raised: 10;
+  --rui-z-floating: 15;
+  --rui-z-app-bar: 20;
+  --rui-z-drawer: 30;
+  --rui-z-dialog: 1000;
+  --rui-z-menu: 1100;
+  --rui-z-tooltip: 1200;
+  --rui-z-toast: 1300;
+  --rui-z-blocking: 2000;
+
+  /* The app bar: 56px on a phone, 64px from md, as in rotki. */
+  --rui-app-bar-height: 3.5rem;
+
+  /*
+   * How much of the view's bottom a data table's stuck pagination bar covers. RuiDataTable sets it on
+   * the root while a bar sticks; a dock or FAB fixed to the bottom adds it to its offset to stay clear
+   * of the page buttons.
+   */
+  --rui-sticky-bottom: 0px;
+
+  /* RuiDialog's `size` presets, which cover nearly every dialog in the rotki apps. */
+  --rui-dialog-sm: 400px;
+  --rui-dialog-md: 500px;
+  --rui-dialog-lg: 600px;
+  --rui-dialog-xl: 800px;
+  --rui-dialog-2xl: 1000px;
+  --rui-dialog-max-height: 90vh;
+
+  /* A tooltip wraps at this width rather than running across the screen. */
+  --rui-tooltip-max-width: 20rem;
+}
+
+@media (min-width: 48rem) {
+  :root {
+    --rui-app-bar-height: 4rem;
+  }
+}

package/dist/tailwind.css

@@ -0,0 +1,145 @@
+/*
+ * The library for a consumer's own Tailwind 4 build:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@rotki/ui-library/tailwind.css';
+ *
+ * It carries the theme tokens, the color values and the library's variants and utilities, and
+ * points Tailwind at the built components, so the consumer's build generates the classes they use
+ * once, in the same layers as its own. Nothing is shipped twice, and a class passed to a component
+ * competes with the component's classes as any two Tailwind classes do.
+ *
+ * `style.css` wraps this file with Tailwind itself, prebuilt, for an app without Tailwind.
+ */
+@import './theme/theme.css';
+@import './styles/colors.css' layer(base);
+@import './styles/tokens.css' layer(base);
+
+/* The built components and their helpers; paths resolve from this file, next to them in dist. */
+@source './**/*.js';
+@source not './vite-plugin';
+
+/*
+ * Tailwind 3's divide and space selector. Tailwind 4's `divide-*` and
+ * `space-*` style every child but the last (the bottom border, the end
+ * margin) inside a zero-specificity `:where()`, so a child's own `border-0`
+ * erases the line, a `border-t-0` on the row below no longer removes it, and
+ * a `w-full` child lays out differently. The components write them as
+ * `between:border-t` and `between:ml-2` and keep the old placement and weight.
+ */
+@custom-variant between (& > :not([hidden]) ~ :not([hidden]));
+
+@theme {
+  --animate-buffer-pulse: buffer-pulse 3s ease-in-out 3s infinite;
+  --animate-slide-rail: slide-rail 1.6s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  --animate-collapse-stroke: collapse-stroke 1.4s ease-in-out infinite;
+  --animate-circular-spin: spin 1.4s linear infinite;
+
+  @keyframes buffer-pulse {
+    0% {
+      opacity: 0.2;
+      left: -100%;
+    }
+    50% {
+      opacity: 1.5;
+      left: -100%;
+    }
+    60% {
+      opacity: 0.4;
+      left: -75%;
+    }
+    100% {
+      opacity: 0.2;
+      left: -100%;
+    }
+  }
+
+  /* the first frame shows a short bar at the start, so a paused or reduced-motion rail is not empty */
+  @keyframes slide-rail {
+    0% {
+      left: 0%;
+      right: 70%;
+    }
+    60% {
+      left: 100%;
+      right: -90%;
+    }
+    100% {
+      left: 100%;
+      right: -90%;
+    }
+  }
+
+  /* the first frame draws a short arc instead of a 1px dot */
+  @keyframes collapse-stroke {
+    0% {
+      stroke-dasharray: 20px, 200px;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 100px, 200px;
+      stroke-dashoffset: -15px;
+    }
+    100% {
+      stroke-dasharray: 100px, 200px;
+      stroke-dashoffset: -125px;
+    }
+  }
+}
+
+/*
+ * Preflight defaults that Tailwind 4 changed. A bare `border` takes the adaptive divider, where
+ * Tailwind 3's fixed gray-200 drew a bright line in dark mode.
+ */
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--rui-divider);
+  }
+
+  /* 4.8:1 on white and 6.9:1 on the dark card; Tailwind 3's gray-400 was 2.5:1, below WCAG AA */
+  input::placeholder,
+  textarea::placeholder {
+    color: rgb(var(--rui-neutral-500));
+  }
+
+  :is(.dark, [data-theme='dark']) input::placeholder,
+  :is(.dark, [data-theme='dark']) textarea::placeholder {
+    color: rgb(var(--rui-neutral-400));
+  }
+
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+
+  body {
+    scroll-behavior: smooth;
+  }
+}
+
+@utility no-scrollbar {
+  /* Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+@utility bg-hue-spectrum {
+  background-image: linear-gradient(
+    to right,
+    red 0%,
+    yellow 16.66%,
+    lime 33.33%,
+    cyan 50%,
+    blue 66.66%,
+    magenta 83.33%,
+    red 100%
+  );
+}