@brumaombra/ui-vintage 0.8.1 → 0.9.0

package/src/styles.css

@@ -11,6 +11,8 @@ html {
 }
 
 :root {
+    color-scheme: light;
+
     /*********************** Core custom colors ***********************/
 
     --bg-main-light: #fafafa;
@@ -43,7 +45,6 @@ html {
 
     /*********************** Motion tokens ***********************/
 
-    --uv-duration-instant: 90ms;
     --uv-duration-fast: 150ms;
     --uv-duration-base: 220ms;
     --uv-duration-slow: 420ms;
@@ -166,7 +167,31 @@ html {
     --animate-uv-fade-up: uv-fade-up 0.5s var(--ease-out-expo) both;
     --animate-uv-ping-soft: uv-ping-soft 1.8s var(--ease-out-expo) infinite;
     --animate-uv-indeterminate: uv-indeterminate 1.4s var(--ease-snappy) infinite;
-    --animate-uv-gradient: uv-gradient 6s ease infinite;
+    --animate-uv-word-in: uv-word-in 0.9s var(--ease-spring) both;
+    --animate-uv-grow-x: uv-grow-x 0.9s var(--ease-out-expo) both;
+    --animate-uv-ken-burns: uv-ken-burns 9s ease-out both;
+    --animate-uv-draw: uv-draw 1s var(--ease-out-expo) both;
+
+    @keyframes uv-word-in {
+        0% { opacity: 0; transform: translateY(0.45em); filter: blur(8px); }
+        100% { opacity: 1; transform: translateY(0); filter: blur(0); }
+    }
+
+    @keyframes uv-grow-x {
+        0% { transform: scaleX(0); }
+        100% { transform: scaleX(1); }
+    }
+
+    /* Draws an SVG stroke that uses pathLength="1" and stroke-dasharray: 1 */
+    @keyframes uv-draw {
+        0% { stroke-dashoffset: 1; }
+        100% { stroke-dashoffset: 0; }
+    }
+
+    @keyframes uv-ken-burns {
+        0% { transform: scale(1.12); }
+        100% { transform: scale(1); }
+    }
 
     @keyframes uv-shimmer {
         0% { transform: translateX(-100%); }
@@ -206,11 +231,6 @@ html {
         50% { transform: translateX(40%) scaleX(0.6); }
         100% { transform: translateX(120%) scaleX(0.4); }
     }
-
-    @keyframes uv-gradient {
-        0%, 100% { background-position: 0% 50%; }
-        50% { background-position: 100% 50%; }
-    }
 }
 
 /* Floating surfaces (popover, select, dropdown, tooltip, hover card) scale from their anchor */
@@ -317,15 +337,6 @@ html {
     }
 }
 
-/* Shared focus ring used by interactive primitives */
-@utility uv-focus-ring {
-    outline: none;
-
-    &:focus-visible {
-        box-shadow: 0 0 0 1px var(--background), 0 0 0 3px color-mix(in oklab, var(--ring) 55%, transparent);
-    }
-}
-
 /* Shared interactive states for inputs, textareas, and field-like triggers (base colors stay in utility classes) */
 @utility uv-field {
     transition-property: border-color, box-shadow, background-color, color, opacity;
@@ -351,6 +362,9 @@ html {
 }
 
 .dark {
+    /* Native controls (date/time pickers, scrollbars, form widgets) follow the theme */
+    color-scheme: dark;
+
     --background: var(--bg-main-dark);
     --foreground: var(--text-primary-dark);
     --card: var(--bg-card-dark);
@@ -419,6 +433,28 @@ body {
     color: var(--text-primary-dark);
 }
 
+/*********************** AOS scroll animations ***********************/
+
+/*
+ * "blur-up" animation for AOS (https://github.com/michalsnik/aos), used by the blog components through data-aos="blur-up".
+ * Elements are only hidden once AOS has initialized them (.aos-init), so apps without AOS always show the content.
+ * The repeated attribute selector outranks the global AOS easing and duration rules; data-aos-delay keeps working.
+ */
+[data-aos="blur-up"][data-aos="blur-up"][data-aos="blur-up"].aos-init {
+    opacity: 0;
+    transform: translate3d(0, 18px, 0);
+    filter: blur(6px);
+    transition-property: opacity, transform, filter;
+    transition-duration: 700ms, 900ms, 700ms;
+    transition-timing-function: var(--ease-out-expo), var(--ease-spring), var(--ease-out-expo);
+}
+
+[data-aos="blur-up"][data-aos="blur-up"][data-aos="blur-up"].aos-init.aos-animate {
+    opacity: 1;
+    transform: none;
+    filter: none;
+}
+
 /*********************** Page transition animations ***********************/
 
 .page-enter-active {

package/skills/ui-vintage/SKILL.md

@@ -1,42 +0,0 @@
----
-name: ui-vintage
-description: Build Nuxt UI with the @brumaombra/ui-vintage component library. Use whenever creating or changing pages, layouts, forms, tables, dialogs, toasts, or any other UI in an app that depends on @brumaombra/ui-vintage, before writing custom components or styles.
----
-
-# UI Vintage
-
-This app uses `@brumaombra/ui-vintage`, a Nuxt component library with its own design tokens, motion system, and runtime flows. Reuse it instead of building UI from scratch.
-
-## 1. Read the catalog first
-
-The complete, version-matched API reference is installed with the package:
-
-`node_modules/@brumaombra/ui-vintage/COMPONENTS.md`
-
-Search it (for example for `### \`@brumaombra/ui-vintage/`, a component name, or a prop) instead of reading it top to bottom. It lists every entry point with its import line, components, props and defaults, events, slots, helpers, and usage examples. Never guess prop names: check them there.
-
-## 2. Choose the component
-
-- Before writing a custom component, check the catalog's Contents list. Common mappings:
-  - Searchable select → `combobox` (`ComboboxSelect`); plain select → `select`.
-  - Table with sorting or selection → `data-table`; KPI tiles → `single-value-card`.
-  - Confirmation → `showConfirmDialog` (`confirm-dialog`); notification → `showMessageToast` (`message-toast`); blocking load → `setBusy` (`busy-indicator`). These mount themselves, so do not add them to the template.
-  - App layout with sidebar → `dashboard-shell`; marketing or blog layout → `landing`.
-  - Empty and loading placeholders → `empty-state-card`, `loading-state-card`, `skeleton`.
-- Only build something new when no entry point fits, and compose it from library primitives (`card`, `button`, `field`, ...).
-
-## 3. Follow the library conventions
-
-- Import from explicit subpaths: `import { Button } from '@brumaombra/ui-vintage/button'`. Never import from `@brumaombra/ui-vintage/src/...`.
-- Style with the semantic tokens (`bg-card`, `bg-surface`, `bg-accent`, `bg-primary`, `text-muted-foreground`, `border-border`, `border-border-strong`, ...). They adapt to dark mode, so do not write `dark:` color variants or hard-coded colors for surfaces and text.
-- Customize components through their props and the `class` prop (merged with tailwind-merge) rather than wrapping them in extra styled elements.
-- For motion, reuse the library utilities (`ease-spring`, `ease-out-expo`, `animate-uv-fade-up`, `animate-uv-pop`, `uv-floating-motion`, `shadow-elevated-*`). In custom transitions, name `scale`, `rotate`, and `translate` explicitly; Tailwind v4 does not animate them through `transform`.
-- Icons are Hugeicons definitions: import from `@hugeicons/core-free-icons` and pass them to `:icon` props, or render them with `HugeiconsIcon` from `@hugeicons/vue`.
-- Form controls use `v-model`. Mark invalid fields with `aria-invalid` and show messages with `FieldError`.
-- Library strings are translated through vue-i18n (`uiVintage.*` keys). App copy belongs in the app's own locale files.
-
-## 4. Check your work
-
-- Every import path you used appears as an entry point in `COMPONENTS.md`.
-- Every prop and event you used appears in that component's table.
-- No new CSS reimplements something a component or token already provides.