@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/theme/ThemeSwitcher.d.ts

@@ -0,0 +1,52 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+/** Canonical rungs; ThemeSwitcher supports all five (it passes the rung to ToggleInput). */
+export declare enum ThemeSwitcherSize {
+    /** 20px control. */
+    X_SMALL = "X_SMALL",
+    /** 24px control; the usual size in a sidebar footer or a menu. */
+    SMALL = "SMALL",
+    /** 32px control. The default; the usual size on a settings page. */
+    MEDIUM = "MEDIUM",
+    /** 36px control. */
+    LARGE = "LARGE",
+    /** 40px control. */
+    X_LARGE = "X_LARGE"
+}
+export interface ThemeSwitcherProps extends AriaAttributes {
+    /**
+     * Control rung: 20 / 24 / 32 / 36 / 40px tall.
+     * @default ThemeSwitcherSize.MEDIUM
+     */
+    size?: ThemeSwitcherSize;
+    /**
+     * Show only the icons; each segment's name moves to its `aria-label` and tooltip. For tight spots such as a sidebar footer or a user menu.
+     * @default false
+     */
+    isIconOnly?: boolean;
+    /** Visible label above the control, rendered through `Field` ("Theme"). Omit it inside a labelled `Field`. */
+    label?: string;
+    /**
+     * Accessible name of the group when there is no visible label.
+     * @default "Theme"
+     */
+    ariaLabel?: string;
+    /**
+     * Stretch to the parent's width with three equal segments.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /**
+     * DOM id of the radiogroup element (ToggleInput's).
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the radiogroup element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on ToggleInput's root. */
+    className?: string;
+    /** Inline style on ToggleInput's root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** The System / Dark / Light control, bound to the nearest `GalaxyProvider`. */
+declare const ThemeSwitcher: import("react").ForwardRefExoticComponent<ThemeSwitcherProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ThemeSwitcher;

package/dist/theme/ThemeSwitcher.js

@@ -0,0 +1,94 @@
+import { GalaxyTheme } from "./enums.js";
+import { useGalaxyTheme } from "./useGalaxyTheme.js";
+import ToggleInput, { ToggleInputSize } from "../inputs/ToggleInput.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { MonitorIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
+//#region src/theme/ThemeSwitcher.tsx
+/**
+* The one System / Dark / Light control every Galaxy app uses for its color theme (Constitution
+* VIII-A.4). A `ToggleInput` preset with three fixed options (icon + label, or icon-only), bound to
+* the nearest `GalaxyProvider` through `useGalaxyTheme()`: it shows the stored preference
+* (`selectedTheme`) and changes it with `setTheme`, which the provider persists. It takes no
+* `value` or `onChange`; read `useGalaxyTheme()` to react to a change.
+*
+* Must render inside a `GalaxyProvider` (`useGalaxyTheme()` throws otherwise). Replaces the 1.x
+* `GALAXY_THEME_OPTIONS` constant, from which each app built its own picker.
+*/
+/** Canonical rungs; ThemeSwitcher supports all five (it passes the rung to ToggleInput). */
+var ThemeSwitcherSize = /* @__PURE__ */ function(ThemeSwitcherSize) {
+	/** 20px control. */
+	ThemeSwitcherSize["X_SMALL"] = "X_SMALL";
+	/** 24px control; the usual size in a sidebar footer or a menu. */
+	ThemeSwitcherSize["SMALL"] = "SMALL";
+	/** 32px control. The default; the usual size on a settings page. */
+	ThemeSwitcherSize["MEDIUM"] = "MEDIUM";
+	/** 36px control. */
+	ThemeSwitcherSize["LARGE"] = "LARGE";
+	/** 40px control. */
+	ThemeSwitcherSize["X_LARGE"] = "X_LARGE";
+	return ThemeSwitcherSize;
+}({});
+/** The three built-in themes, in the 1.x order, each with its glyph. */
+var THEME_SWITCHER_OPTIONS = [
+	{
+		id: GalaxyTheme.SYSTEM,
+		label: "System",
+		icon: MonitorIcon
+	},
+	{
+		id: GalaxyTheme.DARK,
+		label: "Dark",
+		icon: MoonIcon
+	},
+	{
+		id: GalaxyTheme.LIGHT,
+		label: "Light",
+		icon: SunIcon
+	}
+];
+/** The same options without visible labels; the name becomes the `aria-label` and tooltip. */
+var THEME_SWITCHER_ICON_ONLY_OPTIONS = [
+	{
+		id: GalaxyTheme.SYSTEM,
+		icon: MonitorIcon,
+		ariaLabel: "System"
+	},
+	{
+		id: GalaxyTheme.DARK,
+		icon: MoonIcon,
+		ariaLabel: "Dark"
+	},
+	{
+		id: GalaxyTheme.LIGHT,
+		icon: SunIcon,
+		ariaLabel: "Light"
+	}
+];
+/** ThemeSwitcher's rung is ToggleInput's rung. */
+var THEME_SWITCHER_SIZE_TO_TOGGLE_INPUT_SIZE_MAP = {
+	["X_SMALL"]: ToggleInputSize.X_SMALL,
+	["SMALL"]: ToggleInputSize.SMALL,
+	["MEDIUM"]: ToggleInputSize.MEDIUM,
+	["LARGE"]: ToggleInputSize.LARGE,
+	["X_LARGE"]: ToggleInputSize.X_LARGE
+};
+/** The System / Dark / Light control, bound to the nearest `GalaxyProvider`. */
+var ThemeSwitcher = forwardRef(function ThemeSwitcher({ size = "MEDIUM", isIconOnly = false, label, ariaLabel = "Theme", fillWidth = false, className, style, ...rest }, ref) {
+	const { selectedTheme, setTheme } = useGalaxyTheme();
+	return /* @__PURE__ */ jsx(ToggleInput, {
+		ref,
+		options: isIconOnly ? THEME_SWITCHER_ICON_ONLY_OPTIONS : THEME_SWITCHER_OPTIONS,
+		value: selectedTheme,
+		onChange: setTheme,
+		size: THEME_SWITCHER_SIZE_TO_TOGGLE_INPUT_SIZE_MAP[size],
+		...label === void 0 ? { ariaLabel } : { label },
+		fillWidth,
+		...rest,
+		...className === void 0 ? {} : { className },
+		...style === void 0 ? {} : { style }
+	});
+});
+ThemeSwitcher.displayName = "ThemeSwitcher";
+//#endregion
+export { ThemeSwitcherSize, ThemeSwitcher as default };

package/dist/theme/enums.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Enums that describe cross-cutting concepts rather than one component (Constitution VII.6).
+ *
+ * Component axes are not here: every component owns its `<Component>Size` / `<Component>Variant`
+ * and exports them from its own module (VII.5). Adding a component-specific enum to this file is
+ * a review failure.
+ */
+/** Color theme. `SYSTEM` follows `prefers-color-scheme`. */
+export declare enum GalaxyTheme {
+    /** Follow the OS color scheme. The provider default. */
+    SYSTEM = "SYSTEM",
+    /** Dark theme. */
+    DARK = "DARK",
+    /** Light theme (1.x direction, not flipped). */
+    LIGHT = "LIGHT"
+}
+/** Type family. Sans for UI, mono for data, serif for editorial copy only. */
+export declare enum FontFamily {
+    /** UI copy. */
+    SANS = "SANS",
+    /** Data and code; sized ~0.92× sans with the same line height. */
+    MONO = "MONO",
+    /** Editorial copy (Cardo); no UI steps. */
+    SERIF = "SERIF"
+}
+/** Axis of a one-dimensional component (`Divider`, `ResizeHandle`, `Tabs`, `Stepper`). */
+export declare enum Orientation {
+    /** Lays out along the x axis. */
+    HORIZONTAL = "HORIZONTAL",
+    /** Lays out along the y axis. */
+    VERTICAL = "VERTICAL"
+}
+/** Edge of the viewport or a container (`Drawer side`). */
+export declare enum Side {
+    /** Left edge. */
+    LEFT = "LEFT",
+    /** Right edge. */
+    RIGHT = "RIGHT",
+    /** Top edge. */
+    TOP = "TOP",
+    /** Bottom edge. */
+    BOTTOM = "BOTTOM"
+}
+/** Corner radius step; maps to the `radius` token group. Nothing rounder than `LG` except `PILL`. */
+export declare enum Radius {
+    /** 2px, inline elements. */
+    SM = "SM",
+    /** 2px, controls. */
+    MD = "MD",
+    /** 4px, panels. */
+    LG = "LG",
+    /** Fully rounded ends. */
+    PILL = "PILL"
+}
+/**
+ * Where a floating element sits relative to its anchor (`Tooltip`, `Popover`, `Dropdown`, `Menu`).
+ * Replaces 1.x `DropdownPosition` / `TooltipPosition`; components map to the positioning engine
+ * internally.
+ */
+export declare enum Placement {
+    /** Above, centered. */
+    TOP = "TOP",
+    /** Below, centered. */
+    BOTTOM = "BOTTOM",
+    /** Left, centered. */
+    LEFT = "LEFT",
+    /** Right, centered. */
+    RIGHT = "RIGHT",
+    /** Above, start-aligned. */
+    TOP_START = "TOP_START",
+    /** Above, end-aligned. */
+    TOP_END = "TOP_END",
+    /** Below, start-aligned. */
+    BOTTOM_START = "BOTTOM_START",
+    /** Below, end-aligned. */
+    BOTTOM_END = "BOTTOM_END",
+    /** Left, start-aligned. */
+    LEFT_START = "LEFT_START",
+    /** Left, end-aligned. */
+    LEFT_END = "LEFT_END",
+    /** Right, start-aligned. */
+    RIGHT_START = "RIGHT_START",
+    /** Right, end-aligned. */
+    RIGHT_END = "RIGHT_END",
+    /** Whichever side has the most room, centered. */
+    AUTO = "AUTO",
+    /** Whichever side has the most room, start-aligned. */
+    AUTO_START = "AUTO_START",
+    /** Whichever side has the most room, end-aligned. */
+    AUTO_END = "AUTO_END"
+}
+/** Reduced-motion policy for the provider. */
+export declare enum ReducedMotion {
+    /** Follow `prefers-reduced-motion`. The provider default. */
+    SYSTEM = "SYSTEM",
+    /** Always reduce motion. */
+    ALWAYS = "ALWAYS",
+    /** Never reduce motion. */
+    NEVER = "NEVER"
+}
+/** Spacing scale — a literal number type, not an enum (Constitution VII.6). Maps to `t.space[n]`. */
+export type Space = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 48;
+/** One to four `Space` values in CSS shorthand order (`padding`), or `[row, column]` (`gap`). */
+export type SpaceShorthand = Space | [Space, Space] | [Space, Space, Space] | [Space, Space, Space, Space];
+/** Canonical size rungs (20 / 24 / 32 / 36 / 40px). Every `<Component>Size` draws from these. */
+export declare const CANONICAL_SIZE_MEMBERS: readonly ["X_SMALL", "SMALL", "MEDIUM", "LARGE", "X_LARGE"];
+/**
+ * Color set: members a color-role `<Component>Variant` may use (Constitution V, V-A). Meaning
+ * only: categorical hues are the `color?: PaletteColor` prop. There is no accent: Galaxy is
+ * monochrome.
+ */
+export declare const CANONICAL_COLOR_MEMBERS: readonly ["PRIMARY", "SECONDARY", "TERTIARY", "SUCCESS", "WARNING", "ERROR", "DISABLED", "INHERIT"];
+/**
+ * Surface set: members a container or input `<Component>Variant` may use (Constitution V, V-A;
+ * color 2.1). No fill is an unset `variant` (containers), `isGhost` (fields), `hasSurface={false}`
+ * (Popover, Dropdown) or `isPlain` (Kbd); inverse is a scope, not a member.
+ */
+export declare const CANONICAL_SURFACE_MEMBERS: readonly ["BASE", "PRIMARY", "SECONDARY", "TERTIARY"];

package/dist/theme/enums.js

@@ -0,0 +1,144 @@
+//#region src/theme/enums.ts
+/**
+* Enums that describe cross-cutting concepts rather than one component (Constitution VII.6).
+*
+* Component axes are not here: every component owns its `<Component>Size` / `<Component>Variant`
+* and exports them from its own module (VII.5). Adding a component-specific enum to this file is
+* a review failure.
+*/
+/** Color theme. `SYSTEM` follows `prefers-color-scheme`. */
+var GalaxyTheme = /* @__PURE__ */ function(GalaxyTheme) {
+	/** Follow the OS color scheme. The provider default. */
+	GalaxyTheme["SYSTEM"] = "SYSTEM";
+	/** Dark theme. */
+	GalaxyTheme["DARK"] = "DARK";
+	/** Light theme (1.x direction, not flipped). */
+	GalaxyTheme["LIGHT"] = "LIGHT";
+	return GalaxyTheme;
+}({});
+/** Type family. Sans for UI, mono for data, serif for editorial copy only. */
+var FontFamily = /* @__PURE__ */ function(FontFamily) {
+	/** UI copy. */
+	FontFamily["SANS"] = "SANS";
+	/** Data and code; sized ~0.92× sans with the same line height. */
+	FontFamily["MONO"] = "MONO";
+	/** Editorial copy (Cardo); no UI steps. */
+	FontFamily["SERIF"] = "SERIF";
+	return FontFamily;
+}({});
+/** Axis of a one-dimensional component (`Divider`, `ResizeHandle`, `Tabs`, `Stepper`). */
+var Orientation = /* @__PURE__ */ function(Orientation) {
+	/** Lays out along the x axis. */
+	Orientation["HORIZONTAL"] = "HORIZONTAL";
+	/** Lays out along the y axis. */
+	Orientation["VERTICAL"] = "VERTICAL";
+	return Orientation;
+}({});
+/** Edge of the viewport or a container (`Drawer side`). */
+var Side = /* @__PURE__ */ function(Side) {
+	/** Left edge. */
+	Side["LEFT"] = "LEFT";
+	/** Right edge. */
+	Side["RIGHT"] = "RIGHT";
+	/** Top edge. */
+	Side["TOP"] = "TOP";
+	/** Bottom edge. */
+	Side["BOTTOM"] = "BOTTOM";
+	return Side;
+}({});
+/** Corner radius step; maps to the `radius` token group. Nothing rounder than `LG` except `PILL`. */
+var Radius = /* @__PURE__ */ function(Radius) {
+	/** 2px, inline elements. */
+	Radius["SM"] = "SM";
+	/** 2px, controls. */
+	Radius["MD"] = "MD";
+	/** 4px, panels. */
+	Radius["LG"] = "LG";
+	/** Fully rounded ends. */
+	Radius["PILL"] = "PILL";
+	return Radius;
+}({});
+/**
+* Where a floating element sits relative to its anchor (`Tooltip`, `Popover`, `Dropdown`, `Menu`).
+* Replaces 1.x `DropdownPosition` / `TooltipPosition`; components map to the positioning engine
+* internally.
+*/
+var Placement = /* @__PURE__ */ function(Placement) {
+	/** Above, centered. */
+	Placement["TOP"] = "TOP";
+	/** Below, centered. */
+	Placement["BOTTOM"] = "BOTTOM";
+	/** Left, centered. */
+	Placement["LEFT"] = "LEFT";
+	/** Right, centered. */
+	Placement["RIGHT"] = "RIGHT";
+	/** Above, start-aligned. */
+	Placement["TOP_START"] = "TOP_START";
+	/** Above, end-aligned. */
+	Placement["TOP_END"] = "TOP_END";
+	/** Below, start-aligned. */
+	Placement["BOTTOM_START"] = "BOTTOM_START";
+	/** Below, end-aligned. */
+	Placement["BOTTOM_END"] = "BOTTOM_END";
+	/** Left, start-aligned. */
+	Placement["LEFT_START"] = "LEFT_START";
+	/** Left, end-aligned. */
+	Placement["LEFT_END"] = "LEFT_END";
+	/** Right, start-aligned. */
+	Placement["RIGHT_START"] = "RIGHT_START";
+	/** Right, end-aligned. */
+	Placement["RIGHT_END"] = "RIGHT_END";
+	/** Whichever side has the most room, centered. */
+	Placement["AUTO"] = "AUTO";
+	/** Whichever side has the most room, start-aligned. */
+	Placement["AUTO_START"] = "AUTO_START";
+	/** Whichever side has the most room, end-aligned. */
+	Placement["AUTO_END"] = "AUTO_END";
+	return Placement;
+}({});
+/** Reduced-motion policy for the provider. */
+var ReducedMotion = /* @__PURE__ */ function(ReducedMotion) {
+	/** Follow `prefers-reduced-motion`. The provider default. */
+	ReducedMotion["SYSTEM"] = "SYSTEM";
+	/** Always reduce motion. */
+	ReducedMotion["ALWAYS"] = "ALWAYS";
+	/** Never reduce motion. */
+	ReducedMotion["NEVER"] = "NEVER";
+	return ReducedMotion;
+}({});
+/** Canonical size rungs (20 / 24 / 32 / 36 / 40px). Every `<Component>Size` draws from these. */
+var CANONICAL_SIZE_MEMBERS = [
+	"X_SMALL",
+	"SMALL",
+	"MEDIUM",
+	"LARGE",
+	"X_LARGE"
+];
+/**
+* Color set: members a color-role `<Component>Variant` may use (Constitution V, V-A). Meaning
+* only: categorical hues are the `color?: PaletteColor` prop. There is no accent: Galaxy is
+* monochrome.
+*/
+var CANONICAL_COLOR_MEMBERS = [
+	"PRIMARY",
+	"SECONDARY",
+	"TERTIARY",
+	"SUCCESS",
+	"WARNING",
+	"ERROR",
+	"DISABLED",
+	"INHERIT"
+];
+/**
+* Surface set: members a container or input `<Component>Variant` may use (Constitution V, V-A;
+* color 2.1). No fill is an unset `variant` (containers), `isGhost` (fields), `hasSurface={false}`
+* (Popover, Dropdown) or `isPlain` (Kbd); inverse is a scope, not a member.
+*/
+var CANONICAL_SURFACE_MEMBERS = [
+	"BASE",
+	"PRIMARY",
+	"SECONDARY",
+	"TERTIARY"
+];
+//#endregion
+export { CANONICAL_COLOR_MEMBERS, CANONICAL_SIZE_MEMBERS, CANONICAL_SURFACE_MEMBERS, FontFamily, GalaxyTheme, Orientation, Placement, Radius, ReducedMotion, Side };

package/dist/theme/tokens/dark.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from "./types.js";
+export declare const DARK_THEME: Theme;

package/dist/theme/tokens/dark.js

@@ -0,0 +1,275 @@
+import { TYPE_SCALE } from "./scales.js";
+//#region src/theme/tokens/dark.ts
+/**
+* Dark theme, resolved hex. Everything is Galaxy monochrome: `solid.primary` is `text.primary`
+* with `background.base` on it, `background.selected` is `text.primary` at 12% over
+* `background.base`.
+*
+* Families (`<family>` below is any of the 17; the palette steps are `PALETTE`):
+* - `text`: brighter and more vivid than Tailwind's 400: OKLCH lightness ~0.03 above it, at the
+*   largest in-gamut chroma for the hue (≥ 4.5:1 on every surface and on its own tint). Amber and
+*   yellow are pulled apart in hue (80° / 98°) so they never read alike.
+* - `background`: palette 500 at 16% over `background.base`, a subtle tint.
+* - `border`: palette 500 at 55% over `background.base`.
+* - `solid`: shared with Light (see `solid` below).
+*
+* Statuses have their own hues, not a family's: success OKLCH 155° (between green and emerald),
+* warning 70° in Dark and 50° in Light (amber that never reads brown), error 22° (a clear red).
+* Their text follows the text rule above, their tint is the vivid fill at 16% over the canvas, and
+* their border is the hue at OKLCH lightness 0.58 (0.66 for warning, so amber never reads brown),
+* ≥ 3:1 on every surface.
+*
+* `solid.neutral`: the muted fill, `background.secondary` with `text.primary` on it; hover and press
+* step up the surface ramp (the `background.tertiary` and `background.selected` values).
+*
+* `solid.<family|status>`: the vivid fill with black text, hover and press mixing toward the light
+* end (away from the text); or, where white reaches 4.6:1 within 35% of the way to palette 700,
+* that mix with white text, hover and press 12% / 24% further toward 700.
+*/
+var DARK_THEME = {
+	color: {
+		background: {
+			base: "#141415",
+			primary: "#161617",
+			secondary: "#1c1c1d",
+			tertiary: "#222223",
+			hovered: "#1d1d1e",
+			pressed: "#242425",
+			selected: "#303031",
+			disabled: "#1c1c1d",
+			success: "#142f23",
+			warning: "#392c19",
+			error: "#35131a",
+			red: "#371c1d",
+			orange: "#392315",
+			amber: "#382a13",
+			yellow: "#362d13",
+			lime: "#263115",
+			green: "#163021",
+			emerald: "#132e26",
+			teal: "#142e2c",
+			cyan: "#122e34",
+			sky: "#132b37",
+			blue: "#1a2639",
+			indigo: "#212138",
+			violet: "#272039",
+			purple: "#2c1e39",
+			fuchsia: "#341c38",
+			pink: "#371c2a",
+			rose: "#381b21"
+		},
+		text: {
+			primary: "#ffffff",
+			secondary: "#bdbdbd",
+			tertiary: "#9a9a9a",
+			disabled: "#4d4d4d",
+			success: "#19e184",
+			warning: "#febc6c",
+			error: "#fd6b6d",
+			red: "#fe7f7e",
+			orange: "#fe9b4e",
+			amber: "#fec14f",
+			yellow: "#fadb31",
+			lime: "#acf043",
+			green: "#56e889",
+			emerald: "#43dda2",
+			teal: "#3ddec9",
+			cyan: "#36ddf8",
+			sky: "#52c6fe",
+			blue: "#6dadfd",
+			indigo: "#8b97fd",
+			violet: "#ae95fd",
+			purple: "#c58dfd",
+			fuchsia: "#ee88fe",
+			pink: "#fe7dbf",
+			rose: "#fe7c8d"
+		},
+		border: {
+			primary: "#2b2b2c",
+			secondary: "#39393a",
+			tertiary: "#49494a",
+			hovered: "#787879",
+			focused: "#9a9a9b",
+			disabled: "#2b2b2c",
+			success: "#259057",
+			warning: "#c48228",
+			error: "#db293d",
+			red: "#8c2e2f",
+			orange: "#924816",
+			amber: "#90600f",
+			yellow: "#8a6b0e",
+			lime: "#527916",
+			green: "#1c753d",
+			emerald: "#126f50",
+			teal: "#146e65",
+			cyan: "#0c6d7e",
+			sky: "#11648a",
+			blue: "#295091",
+			indigo: "#3f418e",
+			violet: "#553c91",
+			purple: "#653891",
+			fuchsia: "#80308d",
+			pink: "#8b315e",
+			rose: "#8f2c3d"
+		},
+		solid: {
+			primary: {
+				background: "#ffffff",
+				text: "#141415",
+				hovered: "#e3e3e3",
+				pressed: "#c7c7c7"
+			},
+			neutral: {
+				background: "#1c1c1d",
+				text: "#ffffff",
+				hovered: "#222223",
+				pressed: "#303031"
+			},
+			success: {
+				background: "#13bc6e",
+				text: "#000000",
+				hovered: "#15cb76",
+				pressed: "#18d97f"
+			},
+			warning: {
+				background: "#fea931",
+				text: "#000000",
+				hovered: "#febc6c",
+				pressed: "#fece96"
+			},
+			error: {
+				background: "#e50f36",
+				text: "#ffffff",
+				hovered: "#ce0c30",
+				pressed: "#b70929"
+			},
+			red: {
+				background: "#d83939",
+				text: "#ffffff",
+				hovered: "#ce3434",
+				pressed: "#c3302f"
+			},
+			orange: {
+				background: "#f97316",
+				text: "#000000",
+				hovered: "#fb8a3a",
+				pressed: "#fc9f56"
+			},
+			amber: {
+				background: "#f59e0b",
+				text: "#000000",
+				hovered: "#f7ad31",
+				pressed: "#f8bc49"
+			},
+			yellow: {
+				background: "#eab308",
+				text: "#000000",
+				hovered: "#eec035",
+				pressed: "#f2cc4e"
+			},
+			lime: {
+				background: "#84cc16",
+				text: "#000000",
+				hovered: "#97d53e",
+				pressed: "#a8de59"
+			},
+			green: {
+				background: "#22c55e",
+				text: "#000000",
+				hovered: "#4dd077",
+				pressed: "#6cda8f"
+			},
+			emerald: {
+				background: "#10b981",
+				text: "#000000",
+				hovered: "#42c591",
+				pressed: "#60d0a0"
+			},
+			teal: {
+				background: "#14b8a6",
+				text: "#000000",
+				hovered: "#3ec4b2",
+				pressed: "#59d1be"
+			},
+			cyan: {
+				background: "#06b6d4",
+				text: "#000000",
+				hovered: "#3fc2db",
+				pressed: "#5dcfe3"
+			},
+			sky: {
+				background: "#0ea5e9",
+				text: "#000000",
+				hovered: "#45b3ed",
+				pressed: "#67c0f1"
+			},
+			blue: {
+				background: "#3270e3",
+				text: "#ffffff",
+				hovered: "#2f68da",
+				pressed: "#2b60d2"
+			},
+			indigo: {
+				background: "#6163ed",
+				text: "#ffffff",
+				hovered: "#5b5de3",
+				pressed: "#5656da"
+			},
+			violet: {
+				background: "#8555ee",
+				text: "#ffffff",
+				hovered: "#7f4fe6",
+				pressed: "#7948df"
+			},
+			purple: {
+				background: "#9b4be7",
+				text: "#ffffff",
+				hovered: "#9445dd",
+				pressed: "#8d3fd4"
+			},
+			fuchsia: {
+				background: "#bb36cc",
+				text: "#ffffff",
+				hovered: "#b131c0",
+				pressed: "#a72bb5"
+			},
+			pink: {
+				background: "#d0377d",
+				text: "#ffffff",
+				hovered: "#c73173",
+				pressed: "#bd2c6a"
+			},
+			rose: {
+				background: "#da3253",
+				text: "#ffffff",
+				hovered: "#d02d4e",
+				pressed: "#c5284a"
+			}
+		},
+		opacity: {
+			bg4: "rgba(0, 0, 0, 0.04)",
+			bg8: "rgba(0, 0, 0, 0.08)",
+			bg12: "rgba(0, 0, 0, 0.12)",
+			bg16: "rgba(0, 0, 0, 0.16)",
+			bg24: "rgba(0, 0, 0, 0.24)",
+			bg32: "rgba(0, 0, 0, 0.32)",
+			bg48: "rgba(0, 0, 0, 0.48)",
+			bg64: "rgba(0, 0, 0, 0.64)",
+			bg80: "rgba(0, 0, 0, 0.8)",
+			bg100: "rgba(0, 0, 0, 1)",
+			fg4: "rgba(255, 255, 255, 0.04)",
+			fg8: "rgba(255, 255, 255, 0.08)",
+			fg12: "rgba(255, 255, 255, 0.12)",
+			fg16: "rgba(255, 255, 255, 0.16)",
+			fg24: "rgba(255, 255, 255, 0.24)",
+			fg32: "rgba(255, 255, 255, 0.32)",
+			fg48: "rgba(255, 255, 255, 0.48)",
+			fg64: "rgba(255, 255, 255, 0.64)",
+			fg80: "rgba(255, 255, 255, 0.8)",
+			fg100: "rgba(255, 255, 255, 1)"
+		}
+	},
+	font: TYPE_SCALE
+};
+//#endregion
+export { DARK_THEME };