@birdapi/velinstyle 0.7.0 → 0.9.0

package/src/layout/grid.css

@@ -107,7 +107,7 @@
   .velin-row > .velin-col-12 { flex: 0 0 auto; inline-size: 100%; }
 
   /* Responsive columns */
-  @media (min-width: 36rem) {
+  @media (width >= 36rem) {
     .velin-sm-col { flex: 1 0 0%; }
     .velin-sm-col-auto { flex: 0 0 auto; inline-size: auto; }
     .velin-row > .velin-sm-col-1 { flex: 0 0 auto; inline-size: 8.333%; }
@@ -119,7 +119,7 @@
     .velin-row > .velin-sm-col-12 { flex: 0 0 auto; inline-size: 100%; }
   }
 
-  @media (min-width: 48rem) {
+  @media (width >= 48rem) {
     .velin-md-col { flex: 1 0 0%; }
     .velin-md-col-auto { flex: 0 0 auto; inline-size: auto; }
     .velin-row > .velin-md-col-1 { flex: 0 0 auto; inline-size: 8.333%; }
@@ -133,7 +133,7 @@
     .velin-row > .velin-md-col-12 { flex: 0 0 auto; inline-size: 100%; }
   }
 
-  @media (min-width: 62rem) {
+  @media (width >= 62rem) {
     .velin-lg-col { flex: 1 0 0%; }
     .velin-lg-col-auto { flex: 0 0 auto; inline-size: auto; }
     .velin-row > .velin-lg-col-1 { flex: 0 0 auto; inline-size: 8.333%; }
@@ -149,7 +149,7 @@
     .velin-row > .velin-lg-col-12 { flex: 0 0 auto; inline-size: 100%; }
   }
 
-  @media (min-width: 80rem) {
+  @media (width >= 80rem) {
     .velin-xl-col { flex: 1 0 0%; }
     .velin-row > .velin-xl-col-2 { flex: 0 0 auto; inline-size: 16.666%; }
     .velin-row > .velin-xl-col-3 { flex: 0 0 auto; inline-size: 25%; }
@@ -166,7 +166,7 @@
   .velin-offset-5 { margin-inline-start: 41.666%; }
   .velin-offset-6 { margin-inline-start: 50%; }
 
-  @media (min-width: 48rem) {
+  @media (width >= 48rem) {
     .velin-md-offset-0 { margin-inline-start: 0; }
     .velin-md-offset-1 { margin-inline-start: 8.333%; }
     .velin-md-offset-2 { margin-inline-start: 16.666%; }
@@ -174,7 +174,7 @@
     .velin-md-offset-4 { margin-inline-start: 33.333%; }
   }
 
-  @media (min-width: 62rem) {
+  @media (width >= 62rem) {
     .velin-lg-offset-0 { margin-inline-start: 0; }
     .velin-lg-offset-1 { margin-inline-start: 8.333%; }
     .velin-lg-offset-2 { margin-inline-start: 16.666%; }
@@ -209,13 +209,13 @@
   .velin-row-cols-5 > * { flex: 0 0 auto; inline-size: 20%; }
   .velin-row-cols-6 > * { flex: 0 0 auto; inline-size: 16.666%; }
 
-  @media (min-width: 48rem) {
+  @media (width >= 48rem) {
     .velin-md-row-cols-2 > * { flex: 0 0 auto; inline-size: 50%; }
     .velin-md-row-cols-3 > * { flex: 0 0 auto; inline-size: 33.333%; }
     .velin-md-row-cols-4 > * { flex: 0 0 auto; inline-size: 25%; }
   }
 
-  @media (min-width: 62rem) {
+  @media (width >= 62rem) {
     .velin-lg-row-cols-3 > * { flex: 0 0 auto; inline-size: 33.333%; }
     .velin-lg-row-cols-4 > * { flex: 0 0 auto; inline-size: 25%; }
     .velin-lg-row-cols-6 > * { flex: 0 0 auto; inline-size: 16.666%; }

package/src/layout/patterns.css

@@ -6,7 +6,7 @@
     min-block-size: 100vh;
   }
 
-  @media (max-width: 48rem) {
+  @media (width <= 48rem) {
     .velin-layout-sidebar {
       grid-template-columns: 1fr;
     }
@@ -25,7 +25,7 @@
     grid-column: 1 / -1;
   }
 
-  @media (max-width: 48rem) {
+  @media (width <= 48rem) {
     .velin-layout-holy-grail {
       grid-template-columns: 1fr;
     }
@@ -64,7 +64,7 @@
     gap: var(--velin-space-8);
   }
 
-  @media (max-width: 56rem) {
+  @media (width <= 56rem) {
     .velin-layout-aside-main {
       grid-template-columns: 1fr;
     }
@@ -78,7 +78,7 @@
     min-block-size: auto;
   }
 
-  @media (max-width: 48rem) {
+  @media (width <= 48rem) {
     .velin-layout-split {
       grid-template-columns: 1fr;
     }
@@ -108,7 +108,7 @@
     grid-row: 2;
   }
 
-  @media (max-width: 48rem) {
+  @media (width <= 48rem) {
     .velin-layout-dashboard {
       grid-template-columns: 1fr;
       grid-template-rows: auto auto 1fr;

package/src/themes/brutalist.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 0;
     --velin-radius-full: 0;
     --velin-radius-pill: 0;
-
-    --velin-color-primary: oklch(65% 0.25 30);
+    --velin-color-primary: oklch(38% 0.22 30);
     --velin-color-primary-hover: oklch(58% 0.25 30);
     --velin-color-primary-active: oklch(50% 0.25 30);
     --velin-color-primary-subtle: oklch(92% 0.05 30);
-    --velin-color-on-primary: oklch(0% 0 0);
-
+    --velin-color-on-primary: oklch(100% 0 0);
     --velin-color-secondary: oklch(85% 0.2 90);
     --velin-color-secondary-hover: oklch(78% 0.2 90);
     --velin-color-secondary-subtle: oklch(95% 0.05 90);
     --velin-color-on-secondary: oklch(0% 0 0);
-
     --velin-color-surface: oklch(97% 0.005 90);
     --velin-color-surface-dim: oklch(92% 0.01 90);
     --velin-color-surface-bright: oklch(100% 0 0);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(30% 0 0);
     --velin-color-border: oklch(10% 0 0);
     --velin-color-border-strong: oklch(0% 0 0);
-
     --velin-shadow-sm: 3px 3px 0 oklch(0% 0 0);
     --velin-shadow-md: 4px 4px 0 oklch(0% 0 0);
     --velin-shadow-lg: 6px 6px 0 oklch(0% 0 0);
     --velin-shadow-xl: 8px 8px 0 oklch(0% 0 0);
     --velin-shadow-2xl: 12px 12px 0 oklch(0% 0 0);
-
     --velin-font-heading: "Space Mono", "Courier New", monospace;
     --velin-font-body: "Space Grotesk", "IBM Plex Sans", var(--velin-font-sans);
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 700;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 700;
-
     --velin-tracking-normal: 0;
     --velin-tracking-wide: 0.05em;
     --velin-tracking-wider: 0.1em;
-
     --velin-leading-tight: 1.15;
     --velin-leading-normal: 1.4;
-
     --velin-duration-normal: 100ms;
     --velin-duration-slow: 150ms;
   }

package/src/themes/corporate.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 0.5rem;
     --velin-radius-full: 9999px;
     --velin-radius-pill: 9999px;
-
     --velin-color-primary: oklch(35% 0.1 260);
     --velin-color-primary-hover: oklch(28% 0.1 260);
     --velin-color-primary-active: oklch(22% 0.1 260);
     --velin-color-primary-subtle: oklch(94% 0.02 260);
     --velin-color-on-primary: oklch(100% 0 0);
-
     --velin-color-secondary: oklch(70% 0.15 85);
     --velin-color-secondary-hover: oklch(63% 0.15 85);
     --velin-color-secondary-subtle: oklch(95% 0.03 85);
     --velin-color-on-secondary: oklch(10% 0 0);
-
     --velin-color-surface: oklch(97% 0.005 250);
     --velin-color-surface-dim: oklch(94% 0.005 250);
     --velin-color-surface-bright: oklch(100% 0 0);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(42% 0.01 260);
     --velin-color-border: oklch(85% 0.005 250);
     --velin-color-border-strong: oklch(65% 0.01 250);
-
     --velin-shadow-sm: 0 1px 2px oklch(20% 0.01 260 / 0.06);
     --velin-shadow-md: 0 2px 6px oklch(20% 0.01 260 / 0.08);
     --velin-shadow-lg: 0 4px 12px oklch(20% 0.01 260 / 0.1);
     --velin-shadow-xl: 0 8px 20px oklch(20% 0.01 260 / 0.12);
     --velin-shadow-2xl: 0 12px 32px oklch(20% 0.01 260 / 0.14);
-
     --velin-font-heading: "IBM Plex Sans", system-ui, sans-serif;
     --velin-font-body: "IBM Plex Sans", system-ui, sans-serif;
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 600;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 800;
-
     --velin-tracking-normal: 0;
     --velin-tracking-wide: 0.03em;
     --velin-tracking-wider: 0.06em;
-
     --velin-leading-tight: 1.2;
     --velin-leading-normal: 1.55;
-
     --velin-duration-normal: 150ms;
     --velin-duration-slow: 250ms;
   }

package/src/themes/earth.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 1rem;
     --velin-radius-full: 9999px;
     --velin-radius-pill: 9999px;
-
     --velin-color-primary: oklch(55% 0.12 30);
     --velin-color-primary-hover: oklch(48% 0.12 30);
     --velin-color-primary-active: oklch(42% 0.12 30);
     --velin-color-primary-subtle: oklch(92% 0.03 30);
     --velin-color-on-primary: oklch(100% 0 0);
-
     --velin-color-secondary: oklch(55% 0.1 120);
     --velin-color-secondary-hover: oklch(48% 0.1 120);
     --velin-color-secondary-subtle: oklch(93% 0.03 120);
     --velin-color-on-secondary: oklch(100% 0 0);
-
     --velin-color-surface: oklch(95% 0.02 80);
     --velin-color-surface-dim: oklch(90% 0.025 80);
     --velin-color-surface-bright: oklch(99% 0.005 80);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(45% 0.03 30);
     --velin-color-border: oklch(78% 0.04 60);
     --velin-color-border-strong: oklch(55% 0.06 40);
-
     --velin-shadow-sm: 0 1px 3px oklch(30% 0.03 30 / 0.12);
     --velin-shadow-md: 0 3px 8px oklch(30% 0.03 30 / 0.15);
     --velin-shadow-lg: 0 6px 16px oklch(30% 0.03 30 / 0.18);
     --velin-shadow-xl: 0 10px 24px oklch(30% 0.03 30 / 0.2);
     --velin-shadow-2xl: 0 16px 40px oklch(30% 0.03 30 / 0.25);
-
     --velin-font-heading: "Merriweather", Georgia, serif;
     --velin-font-body: "Source Sans 3", "Source Sans Pro", sans-serif;
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 600;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 800;
-
     --velin-tracking-normal: 0;
     --velin-tracking-wide: 0.025em;
     --velin-tracking-wider: 0.05em;
-
     --velin-leading-tight: 1.25;
     --velin-leading-normal: 1.6;
-
     --velin-duration-normal: 200ms;
     --velin-duration-slow: 350ms;
   }

package/src/themes/forest.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 1rem;
     --velin-radius-full: 9999px;
     --velin-radius-pill: 9999px;
-
     --velin-color-primary: oklch(45% 0.12 150);
     --velin-color-primary-hover: oklch(38% 0.12 150);
     --velin-color-primary-active: oklch(32% 0.12 150);
     --velin-color-primary-subtle: oklch(93% 0.03 150);
     --velin-color-on-primary: oklch(100% 0 0);
-
     --velin-color-secondary: oklch(55% 0.08 130);
     --velin-color-secondary-hover: oklch(48% 0.08 130);
     --velin-color-secondary-subtle: oklch(93% 0.02 130);
     --velin-color-on-secondary: oklch(100% 0 0);
-
     --velin-color-surface: oklch(96% 0.01 140);
     --velin-color-surface-dim: oklch(92% 0.015 140);
     --velin-color-surface-bright: oklch(99% 0.005 140);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(40% 0.03 140);
     --velin-color-border: oklch(80% 0.03 140);
     --velin-color-border-strong: oklch(55% 0.06 145);
-
     --velin-shadow-sm: 0 1px 3px oklch(25% 0.03 140 / 0.1);
     --velin-shadow-md: 0 3px 8px oklch(25% 0.03 140 / 0.14);
     --velin-shadow-lg: 0 6px 16px oklch(25% 0.03 140 / 0.16);
     --velin-shadow-xl: 0 10px 24px oklch(25% 0.03 140 / 0.18);
     --velin-shadow-2xl: 0 16px 40px oklch(25% 0.03 140 / 0.22);
-
     --velin-font-heading: "Merriweather", Georgia, serif;
     --velin-font-body: "Lato", sans-serif;
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 600;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 800;
-
     --velin-tracking-normal: 0;
     --velin-tracking-wide: 0.025em;
     --velin-tracking-wider: 0.05em;
-
     --velin-leading-tight: 1.25;
     --velin-leading-normal: 1.6;
-
     --velin-duration-normal: 200ms;
     --velin-duration-slow: 350ms;
   }

package/src/themes/midnight.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 1rem;
     --velin-radius-full: 9999px;
     --velin-radius-pill: 9999px;
-
-    --velin-color-primary: oklch(65% 0.2 290);
+    --velin-color-primary: oklch(48% 0.18 290);
     --velin-color-primary-hover: oklch(70% 0.22 290);
     --velin-color-primary-active: oklch(58% 0.18 290);
     --velin-color-primary-subtle: oklch(20% 0.06 290);
     --velin-color-on-primary: oklch(100% 0 0);
-
     --velin-color-secondary: oklch(55% 0.15 260);
     --velin-color-secondary-hover: oklch(60% 0.17 260);
     --velin-color-secondary-subtle: oklch(18% 0.05 260);
     --velin-color-on-secondary: oklch(100% 0 0);
-
     --velin-color-surface: oklch(12% 0.02 280);
     --velin-color-surface-dim: oklch(8% 0.02 280);
     --velin-color-surface-bright: oklch(18% 0.025 280);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(60% 0.02 270);
     --velin-color-border: oklch(25% 0.03 280);
     --velin-color-border-strong: oklch(40% 0.05 280);
-
     --velin-shadow-sm: 0 1px 4px oklch(10% 0.03 290 / 0.3);
     --velin-shadow-md: 0 3px 10px oklch(10% 0.03 290 / 0.35), 0 0 6px oklch(65% 0.2 290 / 0.08);
     --velin-shadow-lg: 0 6px 20px oklch(10% 0.03 290 / 0.4), 0 0 10px oklch(65% 0.2 290 / 0.1);
     --velin-shadow-xl: 0 10px 30px oklch(10% 0.03 290 / 0.45), 0 0 15px oklch(65% 0.2 290 / 0.12);
     --velin-shadow-2xl: 0 16px 44px oklch(10% 0.03 290 / 0.5), 0 0 20px oklch(65% 0.2 290 / 0.15);
-
     --velin-font-heading: "Inter", system-ui, sans-serif;
     --velin-font-body: "Inter", system-ui, sans-serif;
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 600;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 800;
-
     --velin-tracking-normal: -0.01em;
     --velin-tracking-wide: 0.02em;
     --velin-tracking-wider: 0.05em;
-
     --velin-leading-tight: 1.2;
     --velin-leading-normal: 1.55;
-
     --velin-duration-normal: 200ms;
     --velin-duration-slow: 300ms;
   }

package/src/themes/neon.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 0;
     --velin-radius-full: 0;
     --velin-radius-pill: 0;
-
     --velin-color-primary: oklch(80% 0.2 195);
     --velin-color-primary-hover: oklch(85% 0.22 195);
     --velin-color-primary-active: oklch(75% 0.18 195);
     --velin-color-primary-subtle: oklch(25% 0.06 195);
     --velin-color-on-primary: oklch(5% 0 0);
-
     --velin-color-secondary: oklch(70% 0.25 330);
     --velin-color-secondary-hover: oklch(75% 0.27 330);
     --velin-color-secondary-subtle: oklch(22% 0.07 330);
     --velin-color-on-secondary: oklch(100% 0 0);
-
     --velin-color-surface: oklch(8% 0.005 280);
     --velin-color-surface-dim: oklch(5% 0.005 280);
     --velin-color-surface-bright: oklch(15% 0.01 280);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(65% 0.02 195);
     --velin-color-border: oklch(80% 0.2 195 / 0.6);
     --velin-color-border-strong: oklch(80% 0.2 195);
-
     --velin-shadow-sm: 0 0 6px oklch(80% 0.2 195 / 0.4);
     --velin-shadow-md: 0 0 10px oklch(80% 0.2 195 / 0.5);
     --velin-shadow-lg: 0 0 20px oklch(80% 0.2 195 / 0.5);
     --velin-shadow-xl: 0 0 30px oklch(80% 0.2 195 / 0.5), 0 0 10px oklch(70% 0.25 330 / 0.3);
     --velin-shadow-2xl: 0 0 40px oklch(80% 0.2 195 / 0.6), 0 0 15px oklch(70% 0.25 330 / 0.4);
-
     --velin-font-heading: "JetBrains Mono", "Fira Code", monospace;
     --velin-font-body: "JetBrains Mono", "Fira Code", monospace;
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 600;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 800;
-
     --velin-tracking-normal: 0.02em;
     --velin-tracking-wide: 0.08em;
     --velin-tracking-wider: 0.14em;
-
     --velin-leading-tight: 1.2;
     --velin-leading-normal: 1.5;
-
     --velin-duration-normal: 150ms;
     --velin-duration-slow: 250ms;
   }

package/src/themes/nordic.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 0.25rem;
     --velin-radius-full: 9999px;
     --velin-radius-pill: 9999px;
-
     --velin-color-primary: oklch(60% 0.08 230);
     --velin-color-primary-hover: oklch(53% 0.08 230);
     --velin-color-primary-active: oklch(47% 0.08 230);
     --velin-color-primary-subtle: oklch(95% 0.015 230);
     --velin-color-on-primary: oklch(100% 0 0);
-
     --velin-color-secondary: oklch(50% 0.03 250);
     --velin-color-secondary-hover: oklch(43% 0.03 250);
     --velin-color-secondary-subtle: oklch(94% 0.01 250);
     --velin-color-on-secondary: oklch(100% 0 0);
-
     --velin-color-surface: oklch(98% 0.005 250);
     --velin-color-surface-dim: oklch(95% 0.005 250);
     --velin-color-surface-bright: oklch(100% 0 0);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(50% 0.01 250);
     --velin-color-border: oklch(88% 0.005 250);
     --velin-color-border-strong: oklch(70% 0.01 250);
-
     --velin-shadow-sm: 0 1px 2px oklch(20% 0.01 250 / 0.04);
     --velin-shadow-md: 0 2px 4px oklch(20% 0.01 250 / 0.06);
     --velin-shadow-lg: 0 4px 8px oklch(20% 0.01 250 / 0.06);
     --velin-shadow-xl: 0 6px 12px oklch(20% 0.01 250 / 0.08);
     --velin-shadow-2xl: 0 8px 16px oklch(20% 0.01 250 / 0.08);
-
     --velin-font-heading: "DM Sans", system-ui, sans-serif;
     --velin-font-body: "DM Sans", system-ui, sans-serif;
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 500;
     --velin-weight-bold: 600;
     --velin-weight-extrabold: 700;
-
     --velin-tracking-normal: 0.01em;
     --velin-tracking-wide: 0.06em;
     --velin-tracking-wider: 0.12em;
-
     --velin-leading-tight: 1.2;
     --velin-leading-normal: 1.6;
-
     --velin-duration-normal: 150ms;
     --velin-duration-slow: 250ms;
   }

package/src/themes/ocean.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 1rem;
     --velin-radius-full: 9999px;
     --velin-radius-pill: 9999px;
-
     --velin-color-primary: oklch(55% 0.15 195);
     --velin-color-primary-hover: oklch(48% 0.15 195);
     --velin-color-primary-active: oklch(42% 0.15 195);
     --velin-color-primary-subtle: oklch(94% 0.03 195);
     --velin-color-on-primary: oklch(100% 0 0);
-
     --velin-color-secondary: oklch(45% 0.12 250);
     --velin-color-secondary-hover: oklch(38% 0.12 250);
     --velin-color-secondary-subtle: oklch(93% 0.03 250);
     --velin-color-on-secondary: oklch(100% 0 0);
-
     --velin-color-surface: oklch(97% 0.01 220);
     --velin-color-surface-dim: oklch(93% 0.015 220);
     --velin-color-surface-bright: oklch(100% 0.005 220);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(40% 0.03 230);
     --velin-color-border: oklch(82% 0.03 220);
     --velin-color-border-strong: oklch(60% 0.06 220);
-
     --velin-shadow-sm: 0 1px 3px oklch(30% 0.03 220 / 0.1);
     --velin-shadow-md: 0 3px 8px oklch(30% 0.03 220 / 0.14);
     --velin-shadow-lg: 0 6px 16px oklch(30% 0.03 220 / 0.18);
     --velin-shadow-xl: 0 10px 24px oklch(30% 0.03 220 / 0.2);
     --velin-shadow-2xl: 0 16px 40px oklch(30% 0.03 220 / 0.25);
-
     --velin-font-heading: "Inter", system-ui, sans-serif;
     --velin-font-body: "Inter", system-ui, sans-serif;
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 600;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 800;
-
     --velin-tracking-normal: -0.01em;
     --velin-tracking-wide: 0.02em;
     --velin-tracking-wider: 0.04em;
-
     --velin-leading-tight: 1.2;
     --velin-leading-normal: 1.55;
-
     --velin-duration-normal: 200ms;
     --velin-duration-slow: 300ms;
   }

package/src/themes/pastel.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 1.5rem;
     --velin-radius-full: 9999px;
     --velin-radius-pill: 9999px;
-
-    --velin-color-primary: oklch(75% 0.1 290);
+    --velin-color-primary: oklch(40% 0.12 290);
     --velin-color-primary-hover: oklch(68% 0.1 290);
     --velin-color-primary-active: oklch(62% 0.1 290);
     --velin-color-primary-subtle: oklch(95% 0.03 290);
     --velin-color-on-primary: oklch(100% 0 0);
-
     --velin-color-secondary: oklch(80% 0.1 160);
     --velin-color-secondary-hover: oklch(73% 0.1 160);
     --velin-color-secondary-subtle: oklch(96% 0.025 160);
     --velin-color-on-secondary: oklch(15% 0 0);
-
     --velin-color-surface: oklch(97% 0.01 320);
     --velin-color-surface-dim: oklch(94% 0.015 320);
     --velin-color-surface-bright: oklch(100% 0.005 320);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(50% 0.03 290);
     --velin-color-border: oklch(88% 0.03 290);
     --velin-color-border-strong: oklch(75% 0.05 290);
-
     --velin-shadow-sm: 0 2px 6px oklch(60% 0.04 290 / 0.1);
     --velin-shadow-md: 0 4px 12px oklch(60% 0.04 290 / 0.12);
     --velin-shadow-lg: 0 8px 24px oklch(60% 0.04 290 / 0.14);
     --velin-shadow-xl: 0 14px 36px oklch(60% 0.04 290 / 0.16);
     --velin-shadow-2xl: 0 20px 48px oklch(60% 0.04 290 / 0.18);
-
     --velin-font-heading: "Quicksand", "Nunito", sans-serif;
     --velin-font-body: "Quicksand", "Nunito", sans-serif;
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 600;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 700;
-
     --velin-tracking-normal: 0.01em;
     --velin-tracking-wide: 0.04em;
     --velin-tracking-wider: 0.08em;
-
     --velin-leading-tight: 1.25;
     --velin-leading-normal: 1.6;
-
     --velin-duration-normal: 250ms;
     --velin-duration-slow: 400ms;
   }

package/src/themes/retro.css

@@ -11,18 +11,15 @@
     --velin-radius-2xl: 0;
     --velin-radius-full: 0;
     --velin-radius-pill: 0;
-
-    --velin-color-primary: oklch(70% 0.15 85);
+    --velin-color-primary: oklch(42% 0.14 85);
     --velin-color-primary-hover: oklch(63% 0.15 85);
     --velin-color-primary-active: oklch(57% 0.15 85);
     --velin-color-primary-subtle: oklch(94% 0.04 85);
-    --velin-color-on-primary: oklch(10% 0 0);
-
+    --velin-color-on-primary: oklch(100% 0 0);
     --velin-color-secondary: oklch(55% 0.15 45);
     --velin-color-secondary-hover: oklch(48% 0.15 45);
     --velin-color-secondary-subtle: oklch(93% 0.04 45);
     --velin-color-on-secondary: oklch(100% 0 0);
-
     --velin-color-surface: oklch(95% 0.02 85);
     --velin-color-surface-dim: oklch(90% 0.025 85);
     --velin-color-surface-bright: oklch(98% 0.01 85);
@@ -30,29 +27,23 @@
     --velin-color-text-muted: oklch(35% 0.03 45);
     --velin-color-border: oklch(25% 0.02 45);
     --velin-color-border-strong: oklch(10% 0.01 45);
-
     --velin-shadow-sm: 2px 2px 0 oklch(10% 0.02 45);
     --velin-shadow-md: 3px 3px 0 oklch(10% 0.02 45);
     --velin-shadow-lg: 5px 5px 0 oklch(10% 0.02 45);
     --velin-shadow-xl: 7px 7px 0 oklch(10% 0.02 45);
     --velin-shadow-2xl: 10px 10px 0 oklch(10% 0.02 45);
-
     --velin-font-heading: "VT323", "Press Start 2P", monospace;
     --velin-font-body: "Space Grotesk", "IBM Plex Sans", sans-serif;
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 600;
     --velin-weight-bold: 700;
     --velin-weight-extrabold: 800;
-
     --velin-tracking-normal: 0.01em;
     --velin-tracking-wide: 0.05em;
     --velin-tracking-wider: 0.1em;
-
     --velin-leading-tight: 1.15;
     --velin-leading-normal: 1.5;
-
     --velin-duration-normal: 100ms;
     --velin-duration-slow: 150ms;
   }

package/src/themes/sharp.css

@@ -11,36 +11,29 @@
     --velin-radius-2xl: 4px;
     --velin-radius-full: 0;
     --velin-radius-pill: 0;
-
     --velin-color-primary: oklch(45% 0.18 260);
     --velin-color-primary-hover: oklch(38% 0.18 260);
     --velin-color-primary-active: oklch(32% 0.18 260);
     --velin-color-primary-subtle: oklch(94% 0.03 260);
     --velin-color-on-primary: oklch(100% 0 0);
-
     --velin-color-secondary: oklch(50% 0.01 260);
     --velin-color-secondary-hover: oklch(40% 0.01 260);
-
     --velin-color-surface: oklch(99% 0.002 260);
     --velin-color-surface-dim: oklch(95% 0.003 260);
     --velin-color-surface-bright: oklch(100% 0 0);
     --velin-color-text: oklch(10% 0.005 260);
     --velin-color-border: oklch(70% 0.005 260);
     --velin-color-border-strong: oklch(40% 0.005 260);
-
     --velin-shadow-sm: none;
     --velin-shadow-md: 0 2px 0 oklch(0% 0 0 / 0.08);
     --velin-shadow-lg: 0 4px 0 oklch(0% 0 0 / 0.1);
     --velin-shadow-xl: 0 6px 0 oklch(0% 0 0 / 0.12);
-
     --velin-font-heading: "Inter", "Helvetica Neue", Arial, var(--velin-font-sans);
     --velin-font-body: "Inter", "Helvetica Neue", Arial, var(--velin-font-sans);
-
     --velin-weight-normal: 400;
     --velin-weight-medium: 500;
     --velin-weight-semibold: 700;
     --velin-weight-bold: 800;
-
     --velin-tracking-normal: -0.01em;
     --velin-tracking-tight: -0.03em;
   }