@juo/orion-extensions 0.8.0-staging.13 → 0.8.0-staging.14

package/dist/style.css

@@ -109,8 +109,8 @@
   --tint-800: oklch(20% 0.05 40);
   --tint-900: oklch(10% 0.055 40);
 }
-/* Tint System - Cool */
-[data-tint="cool"] {
+/* Tint System - cold */
+[data-tint="cold"] {
   --tint-25: oklch(98% 0.005 220);
   --tint-50: oklch(96% 0.01 220);
   --tint-100: oklch(94% 0.015 220);
@@ -123,6 +123,48 @@
   --tint-800: oklch(20% 0.05 220);
   --tint-900: oklch(10% 0.055 220);
 }
+/* Tint System - Custom (derived from --tint-hue and --tint-chroma) */
+[data-tint="custom"] {
+  --tint-25: oklch(98% calc(0.005 * var(--tint-chroma, 1)) var(--tint-hue, 0));
+  --tint-50: oklch(96% calc(0.01 * var(--tint-chroma, 1)) var(--tint-hue, 0));
+  --tint-100: oklch(94% calc(0.015 * var(--tint-chroma, 1)) var(--tint-hue, 0));
+  --tint-200: oklch(88% calc(0.02 * var(--tint-chroma, 1)) var(--tint-hue, 0));
+  --tint-300: oklch(80% calc(0.025 * var(--tint-chroma, 1)) var(--tint-hue, 0));
+  --tint-400: oklch(65% calc(0.03 * var(--tint-chroma, 1)) var(--tint-hue, 0));
+  --tint-500: oklch(50% calc(0.035 * var(--tint-chroma, 1)) var(--tint-hue, 0));
+  --tint-600: oklch(40% calc(0.04 * var(--tint-chroma, 1)) var(--tint-hue, 0));
+  --tint-700: oklch(30% calc(0.045 * var(--tint-chroma, 1)) var(--tint-hue, 0));
+  --tint-800: oklch(20% calc(0.05 * var(--tint-chroma, 1)) var(--tint-hue, 0));
+  --tint-900: oklch(10% calc(0.055 * var(--tint-chroma, 1)) var(--tint-hue, 0));
+}
+/* Callout Colors - Custom (derived from --callout-hue and --callout-chroma) */
+[data-callout="custom"] {
+  --callout-25: oklch(98% calc(0.005 * var(--callout-chroma, 1)) var(--callout-hue, 0));
+  --callout-50: oklch(96% calc(0.01 * var(--callout-chroma, 1)) var(--callout-hue, 0));
+  --callout-100: oklch(94% calc(0.015 * var(--callout-chroma, 1)) var(--callout-hue, 0));
+  --callout-200: oklch(88% calc(0.02 * var(--callout-chroma, 1)) var(--callout-hue, 0));
+  --callout-300: oklch(80% calc(0.025 * var(--callout-chroma, 1)) var(--callout-hue, 0));
+  --callout-400: oklch(65% calc(0.03 * var(--callout-chroma, 1)) var(--callout-hue, 0));
+  --callout-500: oklch(50% calc(0.035 * var(--callout-chroma, 1)) var(--callout-hue, 0));
+  --callout-600: oklch(40% calc(0.04 * var(--callout-chroma, 1)) var(--callout-hue, 0));
+  --callout-700: oklch(30% calc(0.045 * var(--callout-chroma, 1)) var(--callout-hue, 0));
+  --callout-800: oklch(20% calc(0.05 * var(--callout-chroma, 1)) var(--callout-hue, 0));
+  --callout-900: oklch(10% calc(0.055 * var(--callout-chroma, 1)) var(--callout-hue, 0));
+}
+/* Accent Colors - Custom (derived from --accent-hue and --accent-chroma) */
+[data-accent="custom"] {
+  --accent-25: oklch(98% calc(0.005 * var(--accent-chroma, 1)) var(--accent-hue, 0));
+  --accent-50: oklch(96% calc(0.01 * var(--accent-chroma, 1)) var(--accent-hue, 0));
+  --accent-100: oklch(94% calc(0.015 * var(--accent-chroma, 1)) var(--accent-hue, 0));
+  --accent-200: oklch(88% calc(0.02 * var(--accent-chroma, 1)) var(--accent-hue, 0));
+  --accent-300: oklch(80% calc(0.025 * var(--accent-chroma, 1)) var(--accent-hue, 0));
+  --accent-400: oklch(65% calc(0.03 * var(--accent-chroma, 1)) var(--accent-hue, 0));
+  --accent-500: oklch(50% calc(0.035 * var(--accent-chroma, 1)) var(--accent-hue, 0));
+  --accent-600: oklch(40% calc(0.04 * var(--accent-chroma, 1)) var(--accent-hue, 0));
+  --accent-700: oklch(30% calc(0.045 * var(--accent-chroma, 1)) var(--accent-hue, 0));
+  --accent-800: oklch(20% calc(0.05 * var(--accent-chroma, 1)) var(--accent-hue, 0));
+  --accent-900: oklch(10% calc(0.055 * var(--accent-chroma, 1)) var(--accent-hue, 0));
+}
 /* Utility Tokens - Font Size Scale */
 :root,
 [data-variant] {
@@ -173,6 +215,28 @@
   --card-radius-2: var(--radius-sm);
   --card-radius-3: var(--radius-xs);
 }
+/* Component Tokens - Thumbnail Rounding */
+:root,
+[data-thumbnail-rounding="circle"] {
+  --thumbnail-rounding: 50%;
+}
+[data-thumbnail-rounding="sharp"] {
+  --thumbnail-rounding: 0px;
+}
+[data-thumbnail-rounding="rounding"] {
+  --thumbnail-rounding: var(--radius-lg);
+}
+/* Component Tokens - Buttons Rounding */
+:root,
+[data-buttons-rounding="rounding"] {
+  --buttons-rounding: var(--radius-xs);
+}
+[data-buttons-rounding="sharp"] {
+  --buttons-rounding: 0px;
+}
+[data-buttons-rounding="circle"] {
+  --buttons-rounding: 9999px;
+}
 /* Surface Presets - Subtle (Default) */
 :root,
 [data-surface="subtle"] {
@@ -774,12 +838,6 @@ video {
 .right-0 {
   right: 0px;
 }
-.right-1 {
-  right: 0.25rem;
-}
-.right-1\.5 {
-  right: 0.375rem;
-}
 .right-3 {
   right: 0.75rem;
 }
@@ -795,12 +853,6 @@ video {
 .top-0 {
   top: 0px;
 }
-.top-1 {
-  top: 0.25rem;
-}
-.top-1\.5 {
-  top: 0.375rem;
-}
 .top-1\/2 {
   top: 50%;
 }
@@ -870,6 +922,9 @@ video {
 .\!ml-10 {
   margin-left: 2.5rem !important;
 }
+.-ml-px {
+  margin-left: -1px;
+}
 .mb-0 {
   margin-bottom: 0px;
 }
@@ -912,6 +967,9 @@ video {
 .mr-3 {
   margin-right: 0.75rem;
 }
+.mr-md {
+  margin-right: var(--spacing-md);
+}
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -966,6 +1024,9 @@ video {
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
+.\!h-7 {
+  height: 1.75rem !important;
+}
 .\!h-9 {
   height: 2.25rem !important;
 }
@@ -978,6 +1039,12 @@ video {
 .h-12 {
   height: 3rem;
 }
+.h-2 {
+  height: 0.5rem;
+}
+.h-2\.5 {
+  height: 0.625rem;
+}
 .h-3 {
   height: 0.75rem;
 }
@@ -1011,12 +1078,21 @@ video {
 .h-\[150px\] {
   height: 150px;
 }
+.h-\[16px\] {
+  height: 16px;
+}
+.h-\[18px\] {
+  height: 18px;
+}
 .h-\[200px\] {
   height: 200px;
 }
 .h-\[20px\] {
   height: 20px;
 }
+.h-\[24px\] {
+  height: 24px;
+}
 .h-\[250px\] {
   height: 250px;
 }
@@ -1029,6 +1105,12 @@ video {
 .h-\[33px\] {
   height: 33px;
 }
+.h-\[360px\] {
+  height: 360px;
+}
+.h-\[36px\] {
+  height: 36px;
+}
 .h-\[40px\] {
   height: 40px;
 }
@@ -1074,15 +1156,24 @@ video {
 .max-h-96 {
   max-height: 24rem;
 }
+.max-h-\[40\%\] {
+  max-height: 40%;
+}
 .max-h-\[400px\] {
   max-height: 400px;
 }
 .max-h-full {
   max-height: 100%;
 }
+.min-h-0 {
+  min-height: 0px;
+}
 .min-h-full {
   min-height: 100%;
 }
+.\!w-7 {
+  width: 1.75rem !important;
+}
 .\!w-9 {
   width: 2.25rem !important;
 }
@@ -1092,6 +1183,12 @@ video {
 .w-12 {
   width: 3rem;
 }
+.w-2 {
+  width: 0.5rem;
+}
+.w-2\.5 {
+  width: 0.625rem;
+}
 .w-3 {
   width: 0.75rem;
 }
@@ -1107,18 +1204,27 @@ video {
 .w-60 {
   width: 15rem;
 }
+.w-7 {
+  width: 1.75rem;
+}
 .w-8 {
   width: 2rem;
 }
 .w-80 {
   width: 20rem;
 }
+.w-9 {
+  width: 2.25rem;
+}
 .w-\[14px\] {
   width: 14px;
 }
 .w-\[150px\] {
   width: 150px;
 }
+.w-\[18px\] {
+  width: 18px;
+}
 .w-\[200px\] {
   width: 200px;
 }
@@ -1128,12 +1234,18 @@ video {
 .w-\[234px\] {
   width: 234px;
 }
+.w-\[24px\] {
+  width: 24px;
+}
 .w-\[25\%\] {
   width: 25%;
 }
 .w-\[360px\] {
   width: 360px;
 }
+.w-\[36px\] {
+  width: 36px;
+}
 .w-\[404px\] {
   width: 404px;
 }
@@ -1321,9 +1433,6 @@ video {
 .items-center {
   align-items: center;
 }
-.items-baseline {
-  align-items: baseline;
-}
 .items-stretch {
   align-items: stretch;
 }
@@ -1409,11 +1518,6 @@ video {
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1430,6 +1534,9 @@ video {
 .self-end {
   align-self: flex-end;
 }
+.self-stretch {
+  align-self: stretch;
+}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1451,9 +1558,6 @@ video {
 .break-all {
   word-break: break-all;
 }
-.\!rounded-none {
-  border-radius: var(--radius-none) !important;
-}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1487,6 +1591,12 @@ video {
 .rounded-\[9999px\] {
   border-radius: 9999px;
 }
+.rounded-buttons {
+  border-radius: var(--buttons-rounding);
+}
+.rounded-card-1 {
+  border-radius: var(--card-radius-1);
+}
 .rounded-full {
   border-radius: var(--radius-full);
 }
@@ -1499,6 +1609,9 @@ video {
 .rounded-sm {
   border-radius: var(--radius-sm);
 }
+.rounded-thumbnail {
+  border-radius: var(--thumbnail-rounding);
+}
 .rounded-xs {
   border-radius: var(--radius-xs);
 }
@@ -1534,6 +1647,14 @@ video {
 .border-\[0\.5px\] {
   border-width: 0.5px;
 }
+.border-x-0 {
+  border-left-width: 0px;
+  border-right-width: 0px;
+}
+.border-y {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1734,6 +1855,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
+.bg-callout-200 {
+  background-color: var(--callout-200);
+}
 .bg-current {
   background-color: currentColor;
 }
@@ -1784,6 +1908,9 @@ video {
 .bg-tint-50 {
   background-color: var(--tint-50);
 }
+.bg-tint-900 {
+  background-color: var(--tint-900);
+}
 .bg-transparent {
   background-color: transparent;
 }
@@ -1833,9 +1960,6 @@ video {
 .p-0 {
   padding: 0px;
 }
-.p-1 {
-  padding: 0.25rem;
-}
 .p-2 {
   padding: 0.5rem;
 }
@@ -1869,10 +1993,6 @@ video {
 .p-xl {
   padding: var(--padding-xl);
 }
-.\!px-1 {
-  padding-left: 0.25rem !important;
-  padding-right: 0.25rem !important;
-}
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -2019,6 +2139,9 @@ video {
 .pb-md {
   padding-bottom: var(--padding-md);
 }
+.pb-sm {
+  padding-bottom: var(--padding-sm);
+}
 .pb-xl {
   padding-bottom: var(--padding-xl);
 }
@@ -2046,6 +2169,9 @@ video {
 .pl-lg {
   padding-left: var(--padding-lg);
 }
+.pl-xl {
+  padding-left: var(--padding-xl);
+}
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -2055,6 +2181,9 @@ video {
 .pr-\[8\.5px\] {
   padding-right: 8.5px;
 }
+.pr-lg {
+  padding-right: var(--padding-lg);
+}
 .pt-2 {
   padding-top: 0.5rem;
 }
@@ -2079,9 +2208,6 @@ video {
 .text-left {
   text-align: left;
 }
-.\!text-center {
-  text-align: center !important;
-}
 .text-center {
   text-align: center;
 }
@@ -2124,6 +2250,9 @@ video {
 .text-\[9px\] {
   font-size: 9px;
 }
+.text-\[calc\(var\(--font-size\)\*1\.125\)\] {
+  font-size: calc(var(--font-size) * 1.125);
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -2185,6 +2314,9 @@ video {
 .leading-\[1\.45\] {
   line-height: 1.45;
 }
+.leading-\[100\%\] {
+  line-height: 100%;
+}
 .leading-\[135\%\] {
   line-height: 135%;
 }
@@ -2197,8 +2329,8 @@ video {
 .leading-\[14px\] {
   line-height: 14px;
 }
-.leading-\[150\%\] {
-  line-height: 150%;
+.leading-\[16px\] {
+  line-height: 16px;
 }
 .leading-none {
   line-height: 1;
@@ -2218,6 +2350,9 @@ video {
 .tracking-\[-0\.12px\] {
   letter-spacing: -0.12px;
 }
+.tracking-\[-0\.36px\] {
+  letter-spacing: -0.36px;
+}
 .tracking-\[-0\.4px\] {
   letter-spacing: -0.4px;
 }
@@ -2294,6 +2429,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
+.text-callout-900 {
+  color: var(--callout-900);
+}
 .text-current {
   color: currentColor;
 }
@@ -2350,6 +2488,9 @@ video {
 .text-tint-300 {
   color: var(--tint-300);
 }
+.text-tint-400 {
+  color: var(--tint-400);
+}
 .text-tint-500 {
   color: var(--tint-500);
 }
@@ -2388,10 +2529,8 @@ video {
 .opacity-20 {
   opacity: 0.2;
 }
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.opacity-50 {
+  opacity: 0.5;
 }
 .shadow-\[-7px_0px_4px_\#CCCCCC40\] {
   --tw-shadow: -7px 0px 4px #CCCCCC40;
@@ -2427,10 +2566,6 @@ video {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.drop-shadow-lg {
-  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2505,6 +2640,12 @@ video {
 .placeholder\:text-tint-500::placeholder {
   color: var(--tint-500);
 }
+.placeholder\:text-tint-600::-moz-placeholder {
+  color: var(--tint-600);
+}
+.placeholder\:text-tint-600::placeholder {
+  color: var(--tint-600);
+}
 .first\:rounded-t-xs:first-child {
   border-top-left-radius: var(--radius-xs);
   border-top-right-radius: var(--radius-xs);
@@ -2565,12 +2706,18 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
+.hover\:bg-tint-25:hover {
+  background-color: var(--tint-25);
+}
 .hover\:text-accent-600:hover {
   color: var(--accent-600);
 }
 .hover\:text-tint-900:hover {
   color: var(--tint-900);
 }
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
 .focus\:border-\[\#121826\]:focus {
   --tw-border-opacity: 1;
   border-color: rgb(18 24 38 / var(--tw-border-opacity));
@@ -2742,10 +2889,6 @@ video {
     margin-left: 0px;
     margin-right: 0px;
   }
-  .sm\:my-2xl {
-    margin-top: var(--spacing-2xl);
-    margin-bottom: var(--spacing-2xl);
-  }
   .sm\:w-full {
     width: 100%;
   }
@@ -2773,9 +2916,6 @@ video {
     --tw-scale-y: .95;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
-  .sm\:items-center {
-    align-items: center;
-  }
   .sm\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
@@ -2894,15 +3034,15 @@ video {
   --card-radius: var(--card-radius-3);
 }
 
-.v-enter-active[data-v-901abfd3],
-.v-leave-active[data-v-901abfd3] {
+.v-enter-active[data-v-944bbf56],
+.v-leave-active[data-v-944bbf56] {
   transition: opacity 0.2s ease-in-out;
 }
-.v-enter-from[data-v-901abfd3],
-.v-leave-to[data-v-901abfd3] {
+.v-enter-from[data-v-944bbf56],
+.v-leave-to[data-v-944bbf56] {
   opacity: 0;
 }
-.link-underline[data-v-901abfd3] {
+.link-underline[data-v-944bbf56] {
   text-decoration-line: underline;
 }
 
@@ -2918,15 +3058,6 @@ footer[data-v-707bb46f] > * {
   flex-grow: 1;
 }
 
-.shadow[data-v-85ae98ed] {
-  box-shadow: 0px 6px 29px rgba(0, 0, 0, 0.05),
-    0px 2.50666px 12.1155px rgba(0, 0, 0, 0.0359427),
-    0px 1.34018px 6.47753px rgba(0, 0, 0, 0.0298054),
-    0px 0.751293px 3.63125px rgba(0, 0, 0, 0.025),
-    0px 0.399006px 1.92853px rgba(0, 0, 0, 0.0201946),
-    0px 0.166035px 0.802504px rgba(0, 0, 0, 0.0140573);
-}
-
 .with-tooltip[data-v-9a6feeac] {
   position: relative
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@juo/orion-extensions",
   "private": false,
-  "version": "0.8.0-staging.13",
+  "version": "0.8.0-staging.14",
   "type": "module",
   "files": [
     "dist"
@@ -45,7 +45,7 @@
     "tailwindcss": "3.3.5",
     "vue": "3.5.13",
     "@juo/customer-ui": "0.0.0",
-    "@juo/orion-core": "0.12.0-staging.13"
+    "@juo/orion-core": "0.12.0-staging.14"
   },
   "scripts": {
     "dev": "vite build -w",