@rimelight/ui 0.0.31 → 0.0.33

package/src/styles/index.css

@@ -1,156 +1,160 @@
-@import "tailwindcss";
-@import "@nuxt/ui";
-@import "./prism.css";
-
-/* Keyboard Component Styles */
-.keyboard-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 16px;
-  border-radius: 12px;
-  width: 100%;
-  max-width: 100%;
-  margin: 16px 0;
-  box-sizing: border-box;
-}
-.keyboard-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-.keyboard-svg {
-  width: 100%;
-  height: auto;
-  max-width: 900px;
-}
-.kb-key-label {
-  font-family: var(--font-mono, monospace);
-  font-size: 10px;
-  font-weight: 600;
-  pointer-events: none;
-  user-select: none;
-}
-.kb-legend {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 12px 24px;
-  margin-top: 24px;
-  width: 100%;
-}
-.keyboard-wrapper .legend-item {
-  display: flex !important;
-  align-items: center !important;
-  gap: 8px;
-  margin: 0 !important;
-  padding: 0 !important;
-  font-size: 10px;
-  color: #a0a0b0;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: 500;
-  white-space: nowrap;
-  line-height: 1 !important;
-}
-.legend-color-svg {
-  flex-shrink: 0;
-  display: block;
-}
-.keyboard-wrapper .legend-label {
-  margin: 0 !important;
-  padding: 0 !important;
-  line-height: 1 !important;
-  display: inline-block !important;
-}
-
-/* Gamepad Component Styles */
-.gamepad-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 48px;
-  border-radius: 24px;
-  width: 100%;
-  max-width: 100%;
-  margin: 24px 0;
-  box-sizing: border-box;
-  container-type: inline-size;
-  border: 1px solid #1a1a2e;
-}
-.gamepad-container {
-  width: 100%;
-  max-width: 440px;
-}
-.gamepad-svg {
-  width: 100%;
-  height: auto;
-}
-.gp-btn rect,
-.gp-btn circle {
-  fill: #1e1e30;
-  stroke: #33334d;
-  stroke-width: 1;
-  transition: all 0.2s ease;
-}
-.btn-label {
-  fill: #555570;
-  font-size: 10px;
-  font-family: var(--font-sans, system-ui);
-  font-weight: 800;
-  pointer-events: none;
-  line-height: 1;
-}
-.gp-btn.active rect,
-.gp-btn.active circle {
-  fill: var(--hl-color, #00c16a);
-  stroke: #ffffff33;
-  stroke-width: 1.5;
-}
-.gp-btn.active .btn-label {
-  fill: #fff;
-}
-.gamepad-legend {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 12px 24px;
-  margin-top: 40px;
-  width: 100%;
-}
-.gamepad-wrapper .legend-item {
-  display: flex !important;
-  align-items: center !important;
-  gap: 8px;
-  height: 10px !important;
-  font-size: 10px;
-  color: #777790;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  font-weight: 700;
-  line-height: 10px !important;
-  padding: 0 !important;
-  margin: 0 !important;
-}
-.gamepad-wrapper .legend-label {
-  display: inline-block !important;
-  height: 10px !important;
-  line-height: 10px !important;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-.kb-legend-label {
-  font-family: var(--font-sans, system-ui);
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.gp-legend-label {
-  font-family: var(--font-sans, system-ui);
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-}
+@import "./prism.css";
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}
+
+/* Keyboard Component Styles */
+.keyboard-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 100%;
+  margin: 16px 0;
+  box-sizing: border-box;
+}
+.keyboard-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.keyboard-svg {
+  width: 100%;
+  height: auto;
+  max-width: 900px;
+}
+.kb-key-label {
+  font-family: var(--font-mono, monospace);
+  font-size: 10px;
+  font-weight: 600;
+  pointer-events: none;
+  user-select: none;
+}
+.kb-legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px 24px;
+  margin-top: 24px;
+  width: 100%;
+}
+.keyboard-wrapper .legend-item {
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px;
+  margin: 0 !important;
+  padding: 0 !important;
+  font-size: 10px;
+  color: #a0a0b0;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 500;
+  white-space: nowrap;
+  line-height: 1 !important;
+}
+.legend-color-svg {
+  flex-shrink: 0;
+  display: block;
+}
+.keyboard-wrapper .legend-label {
+  margin: 0 !important;
+  padding: 0 !important;
+  line-height: 1 !important;
+  display: inline-block !important;
+}
+
+/* Gamepad Component Styles */
+.gamepad-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48px;
+  border-radius: 24px;
+  width: 100%;
+  max-width: 100%;
+  margin: 24px 0;
+  box-sizing: border-box;
+  container-type: inline-size;
+  border: 1px solid #1a1a2e;
+}
+.gamepad-container {
+  width: 100%;
+  max-width: 440px;
+}
+.gamepad-svg {
+  width: 100%;
+  height: auto;
+}
+.gp-btn rect,
+.gp-btn circle {
+  fill: #1e1e30;
+  stroke: #33334d;
+  stroke-width: 1;
+  transition: all 0.2s ease;
+}
+.btn-label {
+  fill: #555570;
+  font-size: 10px;
+  font-family: var(--font-sans, system-ui);
+  font-weight: 800;
+  pointer-events: none;
+  line-height: 1;
+}
+.gp-btn.active rect,
+.gp-btn.active circle {
+  fill: var(--hl-color, #00c16a);
+  stroke: #ffffff33;
+  stroke-width: 1.5;
+}
+.gp-btn.active .btn-label {
+  fill: #fff;
+}
+.gamepad-legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px 24px;
+  margin-top: 40px;
+  width: 100%;
+}
+.gamepad-wrapper .legend-item {
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px;
+  height: 10px !important;
+  font-size: 10px;
+  color: #777790;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 700;
+  line-height: 10px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.gamepad-wrapper .legend-label {
+  display: inline-block !important;
+  height: 10px !important;
+  line-height: 10px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.kb-legend-label {
+  font-family: var(--font-sans, system-ui);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.gp-legend-label {
+  font-family: var(--font-sans, system-ui);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}

package/src/themes/3d-hover.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const create3dHoverTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default create3dHoverTheme()

package/src/themes/accordion.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createAccordionTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createAccordionTheme()

package/src/themes/alert.theme.ts

@@ -1,51 +1,125 @@
-import { defineTheme } from "../utils/defineTheme"
-
-const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
-
-export const createAlertTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "icon", "content", "title", "description"],
-    base: {
-      root: "relative w-full rounded-lg border p-4 flex gap-3 text-sm transition-all shadow-sm",
-      icon: "shrink-0 size-5 text-current",
-      content: "flex flex-col gap-1 w-full",
-      title: "font-semibold leading-none tracking-tight text-foreground",
-      description: "text-xs opacity-90 leading-relaxed"
-    },
-    variants: {
-      variant: {
-        default: { root: "bg-background text-foreground border-border" },
-        destructive: { root: "bg-error-500/10 text-error-700 border-error-500/20 dark:text-error-400" },
-        outline: { root: "border bg-transparent" },
-        solid: { root: "border-transparent text-white" }
-      },
-      color: Object.fromEntries(colors.map((color) => [color, { root: "" }])),
-      hasIcon: {
-        true: { icon: "block" },
-        false: { icon: "hidden" }
-      }
-    },
-    compoundVariants: [
-      ...colors.map((color) => ({
-        variant: "solid" as const,
-        color,
-        classNames: {
-          root: `bg-${color}-500 text-white border-transparent`
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "outline" as const,
-        color,
-        classNames: {
-          root: `border-${color}-500/20 text-${color}-600 bg-${color}-500/5`
-        }
-      }))
-    ],
-    defaultVariants: {
-      variant: "default",
-      color: "primary",
-      hasIcon: false
-    }
-  })
-
-export default createAlertTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createAlertTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: [
+      "root",
+      "wrapper",
+      "title",
+      "description",
+      "icon",
+      "avatar",
+      "avatarSize",
+      "actions",
+      "close"
+    ],
+    base: {
+      root: "relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5",
+      wrapper: "min-w-0 flex-1 flex flex-col",
+      title: "text-sm font-medium",
+      description: "text-sm opacity-90",
+      icon: "shrink-0 size-5",
+      avatar: "shrink-0",
+      avatarSize: "2xl",
+      actions: "flex flex-wrap gap-1.5 shrink-0",
+      close: "p-0"
+    },
+    variants: {
+      variant: {
+        solid: { root: "" },
+        outline: { root: "" },
+        soft: { root: "" },
+        subtle: { root: "" }
+      },
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+        neutral: { root: "" }
+      },
+      orientation: {
+        horizontal: {
+          root: "items-center",
+          actions: "items-center"
+        },
+        vertical: {
+          root: "items-start",
+          actions: "items-start mt-2.5"
+        }
+      },
+      title: {
+        true: {
+          description: "mt-1"
+        }
+      },
+      theme: {
+        flat: { root: "rl-flat" },
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      ...colors.map((color) => ({
+        variant: "solid" as const,
+        color,
+        classNames: {
+          root: "rl-color-" + color + " bg-[var(--rl-bg)] text-white"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "outline" as const,
+        color,
+        classNames: {
+          root: "rl-color-" + color + " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "soft" as const,
+        color,
+        classNames: {
+          root: "rl-color-" + color + " bg-[var(--rl-bg)]/10 text-[var(--rl-text)]"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "subtle" as const,
+        color,
+        classNames: {
+          root: "rl-color-" + color + " bg-[var(--rl-bg)]/10 text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
+        }
+      })),
+      {
+        color: "neutral",
+        variant: "solid",
+        classNames: {
+          root: "text-inverted bg-inverted"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "outline",
+        classNames: {
+          root: "text-highlighted bg-default ring ring-inset ring-default"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "soft",
+        classNames: {
+          root: "text-highlighted bg-elevated/50"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "subtle",
+        classNames: {
+          root: "text-highlighted bg-elevated/50 ring ring-inset ring-accented"
+        }
+      }
+    ],
+    defaultVariants: {
+      color: "primary",
+      variant: "solid",
+      orientation: "horizontal"
+    }
+  })
+
+export default createAlertTheme()

package/src/themes/app.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createAppTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createAppTheme()

package/src/themes/aspect-ratio.theme.ts

@@ -0,0 +1,13 @@
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createAspectRatioTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "content"],
+    base: {
+      root: "relative w-full overflow-hidden",
+      content: "absolute inset-0 h-full w-full object-cover"
+    }
+  })
+
+export default createAspectRatioTheme()

package/src/themes/audio.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createAudioTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createAudioTheme()

package/src/themes/avatar-group.theme.ts

@@ -0,0 +1,12 @@
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createAvatarGroupTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "flex -space-x-3 hover:space-x-0 transition-all duration-300 [&_[data-slot=root]]:ring-2 [&_[data-slot=root]]:ring-background [&_[data-slot=root]]:transition-all"
+    }
+  })
+
+export default createAvatarGroupTheme()