@proj-airi/ui 0.9.0-beta.2 → 0.9.0-beta.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.9.0-beta.2",
+  "version": "0.9.0-beta.6",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",
@@ -16,6 +16,7 @@
   },
   "exports": {
     ".": "./src/index.ts",
+    "./main.css": "./src/main.css",
     "./components/animations": "./src/components/animations/index.ts",
     "./components/form": "./src/components/form/index.ts",
     "./components/layouts": "./src/components/layouts/index.ts",

package/src/components/misc/button.vue

@@ -44,7 +44,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'primary': {
     default: {
       default: [
-        'rounded-lg',
+        'rounded-xl',
         'backdrop-blur-md',
         'bg-primary-500/15 hover:bg-primary-500/20 active:bg-primary-500/30 dark:bg-primary-700/30 dark:hover:bg-primary-700/40 dark:active:bg-primary-700/30',
         'focus:ring-primary-300/60 dark:focus:ring-primary-600/30',
@@ -57,7 +57,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'secondary': {
     default: {
       default: [
-        'rounded-lg',
+        'rounded-xl',
         'backdrop-blur-md',
         'bg-neutral-100/55 hover:bg-neutral-400/20 active:bg-neutral-400/30 dark:bg-neutral-700/60 dark:hover:bg-neutral-700/80 dark:active:bg-neutral-700/60',
         'focus:ring-neutral-300/30 dark:focus:ring-neutral-600/60 dark:focus:ring-neutral-600/30',
@@ -70,7 +70,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'secondary-muted': {
     default: {
       default: [
-        'rounded-lg',
+        'rounded-xl',
         'backdrop-blur-md',
         'hover:bg-neutral-50/50 active:bg-neutral-50/90 hover:dark:bg-neutral-800/50 active:dark:bg-neutral-800/90',
         'border-2 border-solid border-neutral-100/60 dark:border-neutral-800/30',
@@ -83,7 +83,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'danger': {
     default: {
       default: [
-        'rounded-lg',
+        'rounded-xl',
         'backdrop-blur-md',
         'bg-red-500/15 hover:bg-red-500/20 active:bg-red-500/30 dark:bg-red-700/30 dark:hover:bg-red-700/40 dark:active:bg-red-700/30',
         'focus:ring-2 focus:ring-red-300/30 dark:focus:ring-red-600/60 dark:focus:ring-red-600/30',
@@ -95,7 +95,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'caution': {
     default: {
       default: [
-        'rounded-lg',
+        'rounded-xl',
         'backdrop-blur-md',
         'bg-amber-400/20 hover:bg-amber-400/25 active:bg-amber-400/35 dark:bg-amber-500/20 dark:hover:bg-amber-500/30 dark:active:bg-amber-500/35',
         'focus:ring-2 focus:ring-amber-300/40 dark:focus:ring-amber-400/40',

package/src/constants/lamp-flicker-animation.ts

@@ -0,0 +1,2 @@
+/** Global class from `@proj-airi/ui/main.css`; pairs with useLampFlickerAnimation in stage-ui. */
+export const lampFlickerAnimationClass = 'lamp-flicker-animation' as const

package/src/index.ts

@@ -1,8 +1,7 @@
-import './fallback.css'
-
 export * from './components/animations'
 export * from './components/form'
 export * from './components/layouts'
 export * from './components/misc'
 export * from './composables/use-deferred-mount'
 export * from './composables/use-theme'
+export { lampFlickerAnimationClass } from './constants/lamp-flicker-animation'

package/src/lamp-flicker.css

@@ -0,0 +1,88 @@
+/**
+ * Opacity “lamp flicker” for offline / warning icons.
+ * Timing is driven by useLampFlickerAnimation (@proj-airi/stage-ui) via
+ * --lamp-flicker-delay and --lamp-flicker-duration.
+ * Loaded via @proj-airi/ui/main.css (import from app `styles/main.css`).
+ */
+@keyframes lamp-flicker-keyframes {
+  0%,
+  6%,
+  22%,
+  33%,
+  52%,
+  68%,
+  86%,
+  100% {
+    opacity: 1;
+  }
+
+  3% {
+    opacity: 0.74;
+  }
+
+  9% {
+    opacity: 0.92;
+  }
+
+  13% {
+    opacity: 0.38;
+  }
+
+  18% {
+    opacity: 0.58;
+  }
+
+  27% {
+    opacity: 0.44;
+  }
+
+  29% {
+    opacity: 0.84;
+  }
+
+  41% {
+    opacity: 0.42;
+  }
+
+  45% {
+    opacity: 0.88;
+  }
+
+  57% {
+    opacity: 0.62;
+  }
+
+  61% {
+    opacity: 0.8;
+  }
+
+  73% {
+    opacity: 0.36;
+  }
+
+  74.4% {
+    opacity: 0.08;
+  }
+
+  75.2% {
+    opacity: 0.82;
+  }
+
+  78% {
+    opacity: 0.94;
+  }
+
+  91% {
+    opacity: 0.52;
+  }
+}
+
+.lamp-flicker-animation {
+  animation-delay: var(--lamp-flicker-delay, 0s);
+  animation-duration: var(--lamp-flicker-duration, 6.4s);
+  animation-iteration-count: infinite;
+  animation-name: lamp-flicker-keyframes;
+  animation-timing-function: ease-in-out;
+  filter: drop-shadow(0 0 0.14rem rgb(251 191 36 / 0.18));
+  will-change: opacity;
+}

package/src/main.css

@@ -0,0 +1,6 @@
+/**
+ * Global styles for @proj-airi/ui. Import once from the app entry stylesheet
+ * (e.g. `src/styles/main.css`) so CSS is not tied to JS side-effect imports.
+ */
+@import './fallback.css';
+@import './lamp-flicker.css';