@ecopages/radiant-themes 0.2.0 → 0.2.2

package/dist/tokens/colors/macos.css

@@ -1,33 +1,73 @@
+/**
+ * AppKit system colors from macOS Sonoma and Sequoia: `windowBackgroundColor` for the canvas, `controlBackgroundColor`
+ * for content and fields, `labelColor` and `secondaryLabelColor` for text, `separatorColor`, the default
+ * `controlAccentColor`, and `selectedContentBackgroundColor` for selected rows and filled buttons.
+ *
+ * @remarks AppKit's translucent label colors are flattened onto their usual backgrounds. Status hues use Apple's
+ * increased-contrast variants (`#d70015`, `#248a3d`, `#b25000`) where the standard hue cannot carry text at 4.5:1.
+ */
 :where(:root), :root[data-rui-theme='macos'] {
-	--macos-canvas: #f5f5f7;
+	--macos-canvas: #ececec;
 	--macos-surface: #ffffff;
-	--macos-subtle: #e9e9ed;
-	--macos-border: #7f7f84;
-	--macos-separator: #d1d1d6;
-	--macos-text: #1d1d1f;
-	--macos-muted: #55555b;
-	--macos-blue: #005fcc;
-	--macos-blue-light: #004da8;
-	--macos-green: #176b35;
-	--macos-red: #a51d2d;
-	--macos-amber: #704500;
-	--macos-purple: #6e3bb5;
+	--macos-subtle: #e3e3e3;
+	--macos-control: #ffffff;
+	--macos-control-pressed: #e5e5e5;
+	--macos-elevated: rgb(246 246 246 / 0.88);
+	--macos-elevated-solid: #f6f6f6;
+	--macos-elevated-edge: rgb(0 0 0 / 0.18);
+	--macos-elevated-highlight: rgb(255 255 255 / 0);
+	--macos-border: #8e8e93;
+	--macos-separator: #d9d9d9;
+	--macos-grid: #e6e6e6;
+	--macos-alternate-row: #f4f5f5;
+	--macos-text: #262626;
+	--macos-muted: #5e5e62;
+	--macos-accent: #007aff;
+	--macos-selection: #0063e1;
+	--macos-selection-text: #ffffff;
+	--macos-unemphasized-selection: #dcdcdc;
+	--macos-blue: #0063e1;
+	--macos-blue-light: #3b8cff;
+	--macos-green: #1e7b34;
+	--macos-red: #d70015;
+	--macos-amber: #9e4700;
+	--macos-purple: #8944ab;
+	--macos-control-shadow:
+		0 0 0 0.5px rgb(0 0 0 / 0.16), 0 0.5px 1px rgb(0 0 0 / 0.22), 0 1px 1.5px -0.5px rgb(0 0 0 / 0.1);
+	--macos-menu-shadow: 0 0 0 0.5px var(--macos-elevated-edge), 0 10px 30px rgb(0 0 0 / 0.2), 0 2px 6px rgb(0 0 0 / 0.1);
 }
 
 :where(.dark), :root.dark[data-rui-theme='macos'] {
-	--macos-canvas: #1c1c1e;
-	--macos-surface: #2c2c2e;
-	--macos-subtle: #3a3a3c;
-	--macos-border: #8e8e93;
-	--macos-separator: #3a3a3c;
-	--macos-text: #f5f5f7;
-	--macos-muted: #d1d1d6;
-	--macos-blue: #55a6ff;
-	--macos-blue-light: #8cc2ff;
-	--macos-green: #63d982;
-	--macos-red: #ff7a83;
-	--macos-amber: #ffd166;
-	--macos-purple: #c8a1ff;
+	--macos-canvas: #323232;
+	--macos-surface: #1e1e1e;
+	--macos-subtle: #3d3d3d;
+	--macos-control: #5c5c5e;
+	--macos-control-pressed: #747476;
+	--macos-elevated: rgb(44 44 46 / 0.9);
+	--macos-elevated-solid: #2c2c2e;
+	--macos-elevated-edge: rgb(0 0 0 / 0.6);
+	--macos-elevated-highlight: rgb(255 255 255 / 0.14);
+	--macos-border: #767676;
+	--macos-separator: #484848;
+	--macos-grid: #3a3a3a;
+	--macos-alternate-row: #262626;
+	--macos-text: #dfdfdf;
+	--macos-muted: #a1a1a6;
+	--macos-accent: #0a84ff;
+	--macos-selection: #0058d0;
+	--macos-selection-text: #ffffff;
+	--macos-unemphasized-selection: #464646;
+	--macos-blue: #409cff;
+	--macos-blue-light: #70b4ff;
+	--macos-green: #30d158;
+	--macos-red: #ff6961;
+	--macos-amber: #ffd60a;
+	--macos-purple: #da8fff;
+	--macos-control-shadow:
+		inset 0 0.5px 0 rgb(255 255 255 / 0.18), 0 0 0 0.5px rgb(0 0 0 / 0.5), 0 0.5px 1px rgb(0 0 0 / 0.4);
+	--macos-menu-shadow:
+		inset 0 0 0 0.5px var(--macos-elevated-highlight), 0 0 0 0.5px var(--macos-elevated-edge),
+		0 10px 30px rgb(0 0 0 / 0.45);
 }
 
 @theme inline {

package/dist/tokens/colors/material.css

@@ -1,25 +1,66 @@
+/**
+ * Material 3 baseline scheme (source color #6750a4), light and dark.
+ */
 :where(:root), :root[data-rui-theme='material'] {
-	--material-primary: oklch(46% 0.17 293);
-	--material-secondary: oklch(48% 0.045 286);
-	--material-tertiary: oklch(48% 0.11 340);
-	--material-error: oklch(48% 0.18 25);
-	--material-canvas: oklch(99% 0.006 285);
-	--material-surface: oklch(98% 0.009 285);
-	--material-surface-container: oklch(95% 0.015 285);
-	--material-outline: oklch(53% 0.018 285);
-	--material-outline-variant: oklch(86% 0.012 300);
-	--material-text: oklch(18% 0.018 285);
+	--material-primary: #6750a4;
+	--material-on-primary: #ffffff;
+	--material-primary-container: #eaddff;
+	--material-on-primary-container: #4f378b;
+	--material-secondary: #625b71;
+	--material-on-secondary: #ffffff;
+	--material-secondary-container: #e8def8;
+	--material-on-secondary-container: #4a4458;
+	--material-tertiary: #7d5260;
+	--material-on-tertiary: #ffffff;
+	--material-tertiary-container: #ffd8e4;
+	--material-on-tertiary-container: #633b48;
+	--material-error: #b3261e;
+	--material-on-error: #ffffff;
+	--material-error-container: #f9dedc;
+	--material-on-error-container: #8c1d18;
+	--material-surface: #fef7ff;
+	--material-on-surface: #1d1b20;
+	--material-on-surface-variant: #49454f;
+	--material-surface-container-lowest: #ffffff;
+	--material-surface-container-low: #f7f2fa;
+	--material-surface-container: #f3edf7;
+	--material-surface-container-high: #ece6f0;
+	--material-surface-container-highest: #e6e0e9;
+	--material-inverse-surface: #322f35;
+	--material-inverse-on-surface: #f5eff7;
+	--material-inverse-primary: #d0bcff;
+	--material-outline: #79747e;
+	--material-outline-variant: #cac4d0;
 }
 
 :where(.dark), :root.dark[data-rui-theme='material'] {
-	--material-primary: oklch(82% 0.11 293);
-	--material-secondary: oklch(80% 0.04 286);
-	--material-tertiary: oklch(82% 0.09 340);
-	--material-error: oklch(82% 0.12 25);
-	--material-canvas: oklch(17% 0.012 285);
-	--material-surface: oklch(20% 0.014 285);
-	--material-surface-container: oklch(25% 0.018 285);
-	--material-outline: oklch(70% 0.018 285);
-	--material-outline-variant: oklch(36% 0.012 300);
-	--material-text: oklch(91% 0.01 285);
+	--material-primary: #d0bcff;
+	--material-on-primary: #381e72;
+	--material-primary-container: #4f378b;
+	--material-on-primary-container: #eaddff;
+	--material-secondary: #ccc2dc;
+	--material-on-secondary: #332d41;
+	--material-secondary-container: #4a4458;
+	--material-on-secondary-container: #e8def8;
+	--material-tertiary: #efb8c8;
+	--material-on-tertiary: #492532;
+	--material-tertiary-container: #633b48;
+	--material-on-tertiary-container: #ffd8e4;
+	--material-error: #f2b8b5;
+	--material-on-error: #601410;
+	--material-error-container: #8c1d18;
+	--material-on-error-container: #f9dedc;
+	--material-surface: #141218;
+	--material-on-surface: #e6e0e9;
+	--material-on-surface-variant: #cac4d0;
+	--material-surface-container-lowest: #0f0d13;
+	--material-surface-container-low: #1d1b20;
+	--material-surface-container: #211f26;
+	--material-surface-container-high: #2b2930;
+	--material-surface-container-highest: #36343b;
+	--material-inverse-surface: #e6e0e9;
+	--material-inverse-on-surface: #322f35;
+	--material-inverse-primary: #6750a4;
+	--material-outline: #938f99;
+	--material-outline-variant: #49454f;
 }

package/dist/tokens/colors/vercel.css

@@ -1,15 +1,19 @@
+/**
+ * Geist colors: Background 1 and 2, component fills (Colors 1-3), borders (Colors 4-6), high-contrast fills (Colors
+ * 7-8), and text (Colors 9-10), with Geist's near-black #171717 and near-white #ededed in place of pure black and white.
+ */
 :where(:root), :root[data-rui-theme='vercel'] {
 	--color-vercel-gray-50: #fafafa;
 	--color-vercel-gray-100: #f2f2f2;
-	--color-vercel-gray-200: #eaeaea;
-	--color-vercel-gray-300: #e1e1e1;
-	--color-vercel-gray-400: #c7c7c7;
-	--color-vercel-gray-500: #a1a1a1;
-	--color-vercel-gray-600: #666666;
-	--color-vercel-gray-700: #444444;
-	--color-vercel-gray-800: #333333;
-	--color-vercel-gray-900: #111111;
-	--color-vercel-gray-950: #000000;
+	--color-vercel-gray-200: #ebebeb;
+	--color-vercel-gray-300: #e6e6e6;
+	--color-vercel-gray-400: #c9c9c9;
+	--color-vercel-gray-500: #a8a8a8;
+	--color-vercel-gray-600: #8f8f8f;
+	--color-vercel-gray-700: #7d7d7d;
+	--color-vercel-gray-800: #666666;
+	--color-vercel-gray-900: #4d4d4d;
+	--color-vercel-gray-950: #171717;
 
 	--color-vercel-blue: #0070f3;
 	--color-vercel-blue-light: #3291ff;
@@ -22,30 +26,30 @@
 
 	--color-vercel-background-1: #ffffff;
 	--color-vercel-background-2: #fafafa;
-	--color-vercel-component-1: #ffffff;
-	--color-vercel-component-2: #fafafa;
-	--color-vercel-component-3: #eaeaea;
-	--color-vercel-border-4: #eaeaea;
-	--color-vercel-border-5: #999999;
-	--color-vercel-border-6: #666666;
-	--color-vercel-high-contrast-1: #000000;
-	--color-vercel-high-contrast-2: #333333;
+	--color-vercel-component-1: #f2f2f2;
+	--color-vercel-component-2: #ebebeb;
+	--color-vercel-component-3: #e6e6e6;
+	--color-vercel-border-4: #ebebeb;
+	--color-vercel-border-5: #c9c9c9;
+	--color-vercel-border-6: #a8a8a8;
+	--color-vercel-high-contrast-1: #171717;
+	--color-vercel-high-contrast-2: #383838;
 	--color-vercel-text-secondary: #666666;
-	--color-vercel-text-primary: #000000;
+	--color-vercel-text-primary: #171717;
 }
 
 :where(.dark), :root.dark[data-rui-theme='vercel'] {
 	--color-vercel-gray-50: #1a1a1a;
-	--color-vercel-gray-100: #222222;
-	--color-vercel-gray-200: #2a2a2a;
-	--color-vercel-gray-300: #333333;
-	--color-vercel-gray-400: #444444;
-	--color-vercel-gray-500: #666666;
-	--color-vercel-gray-600: #888888;
-	--color-vercel-gray-700: #999999;
-	--color-vercel-gray-800: #cccccc;
-	--color-vercel-gray-900: #eeeeee;
-	--color-vercel-gray-950: #ffffff;
+	--color-vercel-gray-100: #1f1f1f;
+	--color-vercel-gray-200: #292929;
+	--color-vercel-gray-300: #2e2e2e;
+	--color-vercel-gray-400: #454545;
+	--color-vercel-gray-500: #7d7d7d;
+	--color-vercel-gray-600: #878787;
+	--color-vercel-gray-700: #8f8f8f;
+	--color-vercel-gray-800: #a1a1a1;
+	--color-vercel-gray-900: #d4d4d4;
+	--color-vercel-gray-950: #ededed;
 
 	--color-vercel-blue: #3291ff;
 	--color-vercel-blue-light: #52a8ff;
@@ -56,16 +60,16 @@
 	--color-vercel-purple: #a76ad7;
 	--color-vercel-pink: #ff0080;
 
-	--color-vercel-background-1: #000000;
-	--color-vercel-background-2: #111111;
-	--color-vercel-component-1: #111111;
-	--color-vercel-component-2: #1a1a1a;
-	--color-vercel-component-3: #333333;
-	--color-vercel-border-4: #333333;
-	--color-vercel-border-5: #666666;
-	--color-vercel-border-6: #888888;
-	--color-vercel-high-contrast-1: #ffffff;
+	--color-vercel-background-1: #0a0a0a;
+	--color-vercel-background-2: #000000;
+	--color-vercel-component-1: #1a1a1a;
+	--color-vercel-component-2: #1f1f1f;
+	--color-vercel-component-3: #292929;
+	--color-vercel-border-4: #2e2e2e;
+	--color-vercel-border-5: #454545;
+	--color-vercel-border-6: #878787;
+	--color-vercel-high-contrast-1: #ededed;
 	--color-vercel-high-contrast-2: #cccccc;
-	--color-vercel-text-secondary: #888888;
-	--color-vercel-text-primary: #ffffff;
+	--color-vercel-text-secondary: #a1a1a1;
+	--color-vercel-text-primary: #ededed;
 }

package/dist/tokens/colors/vscode.css

@@ -1,31 +1,75 @@
+/**
+ * Light Modern and Dark Modern workbench colors: editor, side bar, widget, input, button, list, menu, badge, and
+ * scrollbar slider values.
+ */
 :where(:root), :root[data-rui-theme='vscode'] {
 	--color-vscode-canvas: #ffffff;
 	--color-vscode-subtle: #f8f8f8;
 	--color-vscode-muted: #ececec;
-	--color-vscode-border: #cecece;
+	--color-vscode-border: #e5e5e5;
 	--color-vscode-border-strong: #808080;
 	--color-vscode-fg: #3b3b3b;
 	--color-vscode-muted-fg: #616161;
-	--color-vscode-blue: #006bb3;
+	--color-vscode-inactive-fg: #6e6e6e;
+	--color-vscode-blue: #005fb8;
+	--color-vscode-blue-hover: #0258a8;
+	--color-vscode-blue-active: #004c94;
 	--color-vscode-blue-light: #3794ff;
 	--color-vscode-green: #16825d;
 	--color-vscode-red: #d32f2f;
 	--color-vscode-orange: #a15c00;
 	--color-vscode-purple: #af00db;
+	--color-vscode-input: #ffffff;
+	--color-vscode-checkbox: #f8f8f8;
+	--color-vscode-widget: #f8f8f8;
+	--color-vscode-widget-border: #e5e5e5;
+	--color-vscode-widget-shadow: rgb(0 0 0 / 16%);
+	--color-vscode-menu: #ffffff;
+	--color-vscode-menu-border: #cecece;
+	--color-vscode-button-border: rgb(0 0 0 / 10%);
+	--color-vscode-button-secondary: #e5e5e5;
+	--color-vscode-button-secondary-hover: #cccccc;
+	--color-vscode-toolbar-hover: rgb(184 184 184 / 31%);
+	--color-vscode-list-hover: #f2f2f2;
+	--color-vscode-badge: #cccccc;
+	--color-vscode-badge-fg: #3b3b3b;
+	--color-vscode-scrollbar: rgb(100 100 100 / 40%);
+	--color-vscode-scrollbar-hover: rgb(100 100 100 / 70%);
+	--color-vscode-scrollbar-active: rgb(0 0 0 / 60%);
 }
 
 :where(.dark), :root.dark[data-rui-theme='vscode'] {
 	--color-vscode-canvas: #1f1f1f;
 	--color-vscode-subtle: #181818;
 	--color-vscode-muted: #2b2b2b;
-	--color-vscode-border: #393939;
-	--color-vscode-border-strong: #6e6e6e;
+	--color-vscode-border: #2b2b2b;
+	--color-vscode-border-strong: #858585;
 	--color-vscode-fg: #cccccc;
 	--color-vscode-muted-fg: #9d9d9d;
+	--color-vscode-inactive-fg: #9d9d9d;
 	--color-vscode-blue: #0078d4;
+	--color-vscode-blue-hover: #026ec1;
+	--color-vscode-blue-active: #005ba4;
 	--color-vscode-blue-light: #4daafc;
 	--color-vscode-green: #4ec9b0;
 	--color-vscode-red: #f14c4c;
 	--color-vscode-orange: #cca700;
 	--color-vscode-purple: #c586c0;
+	--color-vscode-input: #313131;
+	--color-vscode-checkbox: #313131;
+	--color-vscode-widget: #202020;
+	--color-vscode-widget-border: #313131;
+	--color-vscode-widget-shadow: rgb(0 0 0 / 36%);
+	--color-vscode-menu: #1f1f1f;
+	--color-vscode-menu-border: #454545;
+	--color-vscode-button-border: rgb(255 255 255 / 7%);
+	--color-vscode-button-secondary: #313131;
+	--color-vscode-button-secondary-hover: #3c3c3c;
+	--color-vscode-toolbar-hover: rgb(90 93 94 / 31%);
+	--color-vscode-list-hover: #2a2d2e;
+	--color-vscode-badge: #616161;
+	--color-vscode-badge-fg: #f8f8f8;
+	--color-vscode-scrollbar: rgb(121 121 121 / 40%);
+	--color-vscode-scrollbar-hover: rgb(100 100 100 / 70%);
+	--color-vscode-scrollbar-active: rgb(191 191 191 / 40%);
 }

package/dist/tokens/colors/windows95.css

@@ -7,6 +7,8 @@
 	--windows95-dark: #0a0a0a;
 	--windows95-text: #000000;
 	--windows95-muted: #404040;
+	--windows95-line: #808080;
+	--windows95-disabled: #808080;
 	--windows95-field: #ffffff;
 	--windows95-field-text: #000000;
 	--windows95-selection: #000080;
@@ -20,17 +22,20 @@
 
 /**
  * @remarks Windows 95 shipped no dark mode. This scheme keeps the two-tone bevel structure and remaps it to a dark
- * button face, in the spirit of the custom color schemes Windows offered.
+ * button face, in the spirit of the custom color schemes Windows offered: light and highlight edges stay above the
+ * face and shadow and dark edges below it, so raised and sunken controls still read as relief instead of outlines.
  */
 :where(.dark), :root.dark[data-rui-theme='windows95'] {
 	--windows95-canvas: #2b2b2b;
 	--windows95-face: #3a3a3a;
-	--windows95-light: #d0d0d0;
-	--windows95-highlight: #a5a5a5;
-	--windows95-shadow: #858585;
-	--windows95-dark: #6f6f6f;
+	--windows95-light: #8a8a8a;
+	--windows95-highlight: #5e5e5e;
+	--windows95-shadow: #1e1e1e;
+	--windows95-dark: #000000;
 	--windows95-text: #f0f0f0;
 	--windows95-muted: #c8c8c8;
+	--windows95-line: #8a8a8a;
+	--windows95-disabled: #7a7a7a;
 	--windows95-field: #1c1c1c;
 	--windows95-field-text: #f0f0f0;
 	--windows95-selection: #2d5aa8;

package/dist/tokens/components/cloudflare.css

@@ -15,13 +15,16 @@
 	--border-radius-3xl: 1.25rem;
 	--radius-control: var(--border-radius-lg);
 	--radius-container: var(--border-radius-xl);
+	--size-control-sm: 1.625rem;
+	--size-control-md: 2.25rem;
+	--size-control-lg: 2.5rem;
 }
 
 @layer components {
 	/**
 	 * @remarks Kumo draws the primary action with white text in both modes, a ring one tenth darker than the fill, and
-	 * `shadow-xs`. `#cc3a00` keeps cloudflare.com's orange hue at 5:1 against white, where the marketing orange
-	 * `#ff5e1e` reaches only 3:1. `--primary` stays the lighter orange in dark mode for text and icons.
+	 * `shadow-xs`. `#cc3a00` keeps cloudflare.com's orange hue at 5:1 against white and keeps the primary orange stable
+	 * across light and dark mode. The brighter orange remains available for supporting text and container roles.
 	 */
 	:root .rui-button--filled {
 		background-color: var(--color-cloudflare-orange-fill);
@@ -80,6 +83,12 @@
 	:root .rui-button--outline,
 	:root .rui-input,
 	:root .rui-textarea,
+	:root .rui-combobox__control,
+	:root .rui-date-field__group,
+	:root .rui-date-range-picker__group,
+	:root .rui-input-group,
+	:root .rui-number-field__group,
+	:root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
 	:root .rui-select__control {
 		@apply border-border bg-surface text-on-surface shadow-none;
 		border-color: var(--rui-control-border-color);
@@ -95,9 +104,12 @@
 	 * @remarks Kumo does not combine a border with a drop shadow. Floating surfaces use a 1px edge ring plus a soft drop.
 	 */
 	:root .rui-dialog__surface,
-	:root .rui-popover-host,
+	:root .rui-popover:where(:not(.rui-popover--listbox)),
 	:root .rui-hover-card__content,
 	:root .rui-select__listbox,
+	:root .rui-combobox__listbox,
+	:root .rui-menu-button__menu,
+	:root .rui-menubar__menu,
 	:root .rui-calendar {
 		@apply rounded-container border-0 bg-surface;
 		box-shadow:
@@ -105,6 +117,16 @@
 			0 4px 12px var(--color-cloudflare-shadow-drop);
 	}
 
+	:root .rui-menu-button__menu,
+	:root .rui-menubar__menu {
+		--rui-menu-item-hover: var(--color-cloudflare-tint);
+	}
+
+	:root .rui-select__listbox .rui-listbox,
+	:root .rui-combobox__listbox .rui-listbox {
+		background-color: transparent;
+	}
+
 	:root rui-tabs[variant='boxed'] {
 		@apply rounded-container border border-border bg-surface shadow-none;
 	}
@@ -126,18 +148,52 @@
 		border-bottom-color: var(--primary);
 	}
 
+	/**
+	 * @remarks Kumo highlights chosen options and active navigation with the neutral tint layer and full-strength text;
+	 * orange stays reserved for the primary action.
+	 */
 	:root .rui-listbox__option[aria-selected='true'],
+	:root .rui-listbox__option[aria-selected='true']:focus-visible,
 	:root .rui-menu-button__item[aria-checked='true'],
-	:root .rui-sidebar__menu-button--active {
-		@apply bg-primary-container text-on-primary-container;
+	:root .rui-sidebar__menu-button[aria-current='page'],
+	:root .rui-sidebar__menu-button--active,
+	:root .rui-tree__node[aria-selected='true'],
+	:root .rui-treegrid__cell[aria-selected='true'] {
+		background-color: var(--color-cloudflare-tint);
+		background-image: none;
+		color: var(--color-cloudflare-fg);
+	}
+
+	:root .rui-listbox__option[aria-selected='true'][data-active]:not([aria-disabled='true']) {
+		--tw-ring-color: var(--rui-control-border-color);
+	}
+
+	:root .rui-listbox__option[aria-selected='true'] .rui-listbox__option-indicator {
+		color: var(--color-cloudflare-fg);
+	}
+
+	:root .rui-breadcrumb__link {
+		color: var(--link);
+	}
+
+	/**
+	 * @remarks The `#cc3a00` primary reads below 4.5:1 as text on the dark canvas, so orange text in dark mode uses the
+	 * brighter orange.
+	 */
+	:root.dark .rui-heading__eyebrow,
+	:root.dark .rui-toc__link--active,
+	:root.dark .rui-calendar__today,
+	:root.dark .rui-feed__rating-stars {
+		color: var(--color-cloudflare-orange-bright);
 	}
 
 	:root .rui-alert {
 		@apply rounded-control shadow-none;
 	}
 
-	:root .rui-toast__content {
-		@apply rounded-control border border-border bg-surface text-on-surface shadow-none;
+	:root .rui-toast {
+		@apply rounded-control shadow-none;
+		background-image: none;
 	}
 
 	:root .rui-separator,