@birdapi/velinstyle 0.7.0 → 0.9.0

package/src/utilities/filter-effects.css

@@ -0,0 +1,103 @@
+/*
+ * Filter-Effect utilities — saturate, hue-rotate, contrast, invert, sepia,
+ * drop-shadow plus extended backdrop and glass composites.
+ *
+ * Layered under `utilities`; pair with the existing blur/brightness/grayscale
+ * helpers from src/utilities/position.css. The reduced-motion block at the
+ * bottom strips saturation/hue rotation because those distort color contrast
+ * for users who request reduced motion as a proxy for visual calm.
+ */
+
+@layer utilities {
+  /* === Saturate === */
+  .velin-saturate-0 { filter: saturate(0); }
+  .velin-saturate-50 { filter: saturate(0.5); }
+  .velin-saturate-100 { filter: saturate(1); }
+  .velin-saturate-150 { filter: saturate(1.5); }
+  .velin-saturate-200 { filter: saturate(2); }
+
+  /* === Hue rotate === */
+  .velin-hue-rotate-15 { filter: hue-rotate(15deg); }
+  .velin-hue-rotate-30 { filter: hue-rotate(30deg); }
+  .velin-hue-rotate-60 { filter: hue-rotate(60deg); }
+  .velin-hue-rotate-90 { filter: hue-rotate(90deg); }
+  .velin-hue-rotate-180 { filter: hue-rotate(180deg); }
+
+  /* === Contrast === */
+  .velin-contrast-50 { filter: contrast(0.5); }
+  .velin-contrast-75 { filter: contrast(0.75); }
+  .velin-contrast-100 { filter: contrast(1); }
+  .velin-contrast-125 { filter: contrast(1.25); }
+  .velin-contrast-150 { filter: contrast(1.5); }
+
+  /* === Invert === */
+  .velin-invert { filter: invert(1); }
+  .velin-invert-0 { filter: invert(0); }
+
+  /* === Sepia === */
+  .velin-sepia { filter: sepia(1); }
+  .velin-sepia-50 { filter: sepia(0.5); }
+  .velin-sepia-0 { filter: sepia(0); }
+
+  /* === Drop shadow (paints under transparent SVG/PNG content; differs from box-shadow) === */
+  .velin-drop-shadow-sm {
+    filter: drop-shadow(0 1px 1px oklch(0% 0 0 / 0.18));
+  }
+  .velin-drop-shadow-md {
+    filter: drop-shadow(0 4px 6px oklch(0% 0 0 / 0.18));
+  }
+  .velin-drop-shadow-lg {
+    filter: drop-shadow(0 12px 24px oklch(0% 0 0 / 0.22));
+  }
+  .velin-drop-shadow-glow {
+    filter: drop-shadow(0 0 1.5rem color-mix(in oklch, var(--velin-color-primary, #2563eb) 60%, transparent));
+  }
+
+  /* === Extended backdrop helpers === */
+  .velin-backdrop-saturate {
+    backdrop-filter: saturate(180%);
+    -webkit-backdrop-filter: saturate(180%);
+  }
+  .velin-backdrop-brightness-90 {
+    backdrop-filter: brightness(0.9);
+    -webkit-backdrop-filter: brightness(0.9);
+  }
+  .velin-backdrop-brightness-110 {
+    backdrop-filter: brightness(1.1);
+    -webkit-backdrop-filter: brightness(1.1);
+  }
+  .velin-backdrop-grayscale {
+    backdrop-filter: grayscale(1);
+    -webkit-backdrop-filter: grayscale(1);
+  }
+
+  /* === Glass composites — frosted surfaces for sticky bars/cards === */
+  .velin-glass {
+    background: color-mix(in oklch, var(--velin-color-surface-bright, #fff) 70%, transparent);
+    backdrop-filter: blur(12px) saturate(160%);
+    -webkit-backdrop-filter: blur(12px) saturate(160%);
+    border: 1px solid color-mix(in oklch, var(--velin-color-border, #ddd) 60%, transparent);
+  }
+  .velin-glass-strong {
+    background: color-mix(in oklch, var(--velin-color-surface-bright, #fff) 55%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid color-mix(in oklch, var(--velin-color-border, #ddd) 70%, transparent);
+  }
+
+  /* Reduced-motion / reduced-transparency: strip color distortion. */
+  @media (prefers-reduced-motion: reduce) {
+    .velin-saturate-0,
+    .velin-saturate-50,
+    .velin-saturate-100,
+    .velin-saturate-150,
+    .velin-saturate-200,
+    .velin-hue-rotate-15,
+    .velin-hue-rotate-30,
+    .velin-hue-rotate-60,
+    .velin-hue-rotate-90,
+    .velin-hue-rotate-180 {
+      filter: none;
+    }
+  }
+}

package/src/utilities/responsive.css

@@ -6,7 +6,7 @@
      =================================================================== */
 
   /* --- SM (min-width: 36rem / 576px) --- */
-  @media (min-width: 36rem) {
+  @media (width >= 36rem) {
     /* Display (extending existing) */
     .velin-sm-inline-block { display: inline-block; }
     .velin-sm-inline-flex { display: inline-flex; }
@@ -81,7 +81,7 @@
   }
 
   /* --- MD (min-width: 48rem / 768px) --- */
-  @media (min-width: 48rem) {
+  @media (width >= 48rem) {
     /* Display */
     .velin-md-inline-block { display: inline-block; }
     .velin-md-inline-flex { display: inline-flex; }
@@ -174,7 +174,7 @@
   }
 
   /* --- LG (min-width: 62rem / 992px) --- */
-  @media (min-width: 62rem) {
+  @media (width >= 62rem) {
     /* Display */
     .velin-lg-inline-block { display: inline-block; }
     .velin-lg-inline-flex { display: inline-flex; }
@@ -259,7 +259,7 @@
   }
 
   /* --- XL (min-width: 80rem / 1280px) --- */
-  @media (min-width: 80rem) {
+  @media (width >= 80rem) {
     /* Display */
     .velin-xl-block { display: block; }
     .velin-xl-flex { display: flex; }

package/src/utilities/safe-area.css

@@ -0,0 +1,39 @@
+@layer utilities {
+  .velin-pt-safe {
+    padding-block-start: max(var(--velin-space-4, 1rem), env(safe-area-inset-top, 0px));
+  }
+
+  .velin-pb-safe {
+    padding-block-end: max(var(--velin-space-4, 1rem), env(safe-area-inset-bottom, 0px));
+  }
+
+  .velin-px-safe {
+    padding-inline: max(var(--velin-space-4, 1rem), env(safe-area-inset-left, 0px))
+      max(var(--velin-space-4, 1rem), env(safe-area-inset-right, 0px));
+  }
+
+  .velin-p-safe {
+    padding-block: max(var(--velin-space-4, 1rem), env(safe-area-inset-top, 0px))
+      max(var(--velin-space-4, 1rem), env(safe-area-inset-bottom, 0px));
+    padding-inline: max(var(--velin-space-4, 1rem), env(safe-area-inset-left, 0px))
+      max(var(--velin-space-4, 1rem), env(safe-area-inset-right, 0px));
+  }
+
+  .velin-mobile-only {
+    display: block;
+  }
+
+  .velin-desktop-only {
+    display: none;
+  }
+
+  @media (width >= 48rem) {
+    .velin-mobile-only {
+      display: none;
+    }
+
+    .velin-desktop-only {
+      display: block;
+    }
+  }
+}

package/src/utilities/scroll-animation.css

@@ -74,6 +74,40 @@
     to { transform: translateY(5%); }
   }
 
+  /* JS motion runtime (initMotion) — IntersectionObserver + .velin-in-view */
+  @supports not (animation-timeline: view()) {
+    .velin-animate-on-scroll:not(.velin-in-view) {
+      opacity: 0;
+      transform: translateY(1.5rem);
+    }
+    .velin-animate-on-scroll--fade:not(.velin-in-view) {
+      opacity: 0;
+      transform: none;
+    }
+    .velin-animate-on-scroll--slide-up:not(.velin-in-view) {
+      opacity: 0;
+      transform: translateY(2rem);
+    }
+    .velin-animate-on-scroll--scale:not(.velin-in-view) {
+      opacity: 0;
+      transform: scale(0.92);
+    }
+    .velin-animate-on-scroll.velin-in-view,
+    .velin-animate-on-scroll--fade.velin-in-view,
+    .velin-animate-on-scroll--slide-up.velin-in-view,
+    .velin-animate-on-scroll--scale.velin-in-view {
+      opacity: 1;
+      transform: none;
+      transition:
+        opacity var(--velin-duration-normal, 400ms) var(--velin-ease-out, ease-out),
+        transform var(--velin-duration-normal, 400ms) var(--velin-ease-out, ease-out);
+    }
+  }
+
+  .velin-stagger-item {
+    transition-delay: var(--velin-stagger-delay, 0ms);
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .velin-animate-on-scroll,
     .velin-animate-on-scroll--fade,

package/src/utilities/spacing.css

@@ -9,14 +9,23 @@
   .velin-m-8 { margin: var(--velin-space-8); }
   .velin-m-auto { margin: auto; }
 
-  /* Margin - block (top/bottom via logical props) */
-  .velin-mb-0 { margin-block: var(--velin-space-0); }
-  .velin-mb-1 { margin-block: var(--velin-space-1); }
-  .velin-mb-2 { margin-block: var(--velin-space-2); }
-  .velin-mb-3 { margin-block: var(--velin-space-3); }
-  .velin-mb-4 { margin-block: var(--velin-space-4); }
-  .velin-mb-6 { margin-block: var(--velin-space-6); }
-  .velin-mb-8 { margin-block: var(--velin-space-8); }
+  /* Margin - bottom */
+  .velin-mb-0 { margin-bottom: var(--velin-space-0); }
+  .velin-mb-1 { margin-bottom: var(--velin-space-1); }
+  .velin-mb-2 { margin-bottom: var(--velin-space-2); }
+  .velin-mb-3 { margin-bottom: var(--velin-space-3); }
+  .velin-mb-4 { margin-bottom: var(--velin-space-4); }
+  .velin-mb-6 { margin-bottom: var(--velin-space-6); }
+  .velin-mb-8 { margin-bottom: var(--velin-space-8); }
+
+  /* Margin - block axis (top + bottom) */
+  .velin-my-0 { margin-block: var(--velin-space-0); }
+  .velin-my-1 { margin-block: var(--velin-space-1); }
+  .velin-my-2 { margin-block: var(--velin-space-2); }
+  .velin-my-3 { margin-block: var(--velin-space-3); }
+  .velin-my-4 { margin-block: var(--velin-space-4); }
+  .velin-my-6 { margin-block: var(--velin-space-6); }
+  .velin-my-8 { margin-block: var(--velin-space-8); }
 
   /* Margin - inline (left/right via logical props) */
   .velin-mi-0 { margin-inline: var(--velin-space-0); }

package/src/utilities/text.css

@@ -22,6 +22,10 @@
   .velin-font-sans { font-family: var(--velin-font-sans); }
   .velin-font-serif { font-family: var(--velin-font-serif); }
   .velin-font-mono { font-family: var(--velin-font-mono); }
+  .velin-font-display { font-family: var(--velin-font-display); }
+  .velin-font-text { font-family: var(--velin-font-text); }
+  .velin-tabular-nums { font-variant-numeric: tabular-nums; }
+  .velin-text-pretty { text-wrap: pretty; }
 
   /* Text align */
   .velin-text-start { text-align: start; }
@@ -85,7 +89,6 @@
 
   /* Text-wrap */
   .velin-text-balance { text-wrap: balance; }
-  .velin-text-pretty { text-wrap: pretty; }
   .velin-text-nowrap { text-wrap: nowrap; }
 
   /* Extended line-clamp */

package/src/velinstyle.css

@@ -7,6 +7,7 @@
 /* Design Tokens */
 @import "tokens/color.css";
 @import "tokens/spacing.css";
+@import "tokens/fonts.css";
 @import "tokens/typography.css";
 @import "tokens/radius.css";
 @import "tokens/shadow.css";
@@ -16,6 +17,7 @@
 
 /* Base */
 @import "base/reset.css";
+@import "base/wc-placeholder.css";
 @import "base/focus.css";
 @import "base/content.css";
 
@@ -29,6 +31,10 @@
 @import "a11y/focus-not-obscured.css";
 @import "a11y/target-size.css";
 @import "a11y/high-contrast-aaa.css";
+@import "a11y/authentication.css";
+@import "a11y/consistent-help.css";
+@import "a11y/dragging-alternatives.css";
+@import "a11y/focus-appearance.css";
 
 /* Layout */
 @import "layout/breakpoints.css";
@@ -63,6 +69,9 @@
 @import "components/input-group.css";
 @import "components/form-validation.css";
 @import "components/collapse.css";
+@import "components/search.css";
+@import "components/attributes.css";
+@import "components/highlight.css";
 
 /* Utilities */
 @import "utilities/color.css";
@@ -73,9 +82,12 @@
 @import "utilities/border.css";
 @import "utilities/position.css";
 @import "utilities/animation.css";
+@import "utilities/filter-effects.css";
+@import "utilities/chart-animation.css";
 @import "utilities/gradient.css";
 @import "utilities/print.css";
 @import "utilities/responsive.css";
+@import "utilities/safe-area.css";
 @import "utilities/divide.css";
 @import "utilities/scroll.css";
 @import "utilities/color-mix.css";