@jacshuo/onyx 1.0.0 → 1.2.0

package/dist/styles/DataDisplay/Chat.css

@@ -0,0 +1 @@
+/* Chat has no component-local CSS tokens. */

package/dist/styles/DataDisplay/CodeBlock.css

@@ -0,0 +1,31 @@
+:root {
+  --color-syntax-keyword: var(--color-primary-600);
+  --color-syntax-string: var(--color-success-600);
+  --color-syntax-comment: var(--color-secondary-400);
+  --color-syntax-function: var(--color-warning-600);
+  --color-syntax-variable: var(--color-danger-600);
+  --color-syntax-number: var(--color-warning-500);
+  --color-syntax-operator: var(--color-secondary-600);
+  --color-syntax-tag: var(--color-danger-500);
+  --color-syntax-attr: var(--color-warning-600);
+  --color-syntax-punctuation: var(--color-secondary-500);
+  --color-syntax-type: var(--color-success-700);
+  --color-syntax-plain: var(--color-primary-800);
+  --color-syntax-bg: var(--color-primary-50);
+}
+
+.dark {
+  --color-syntax-keyword: var(--color-primary-400);
+  --color-syntax-string: var(--color-success-400);
+  --color-syntax-comment: var(--color-secondary-500);
+  --color-syntax-function: var(--color-warning-400);
+  --color-syntax-variable: var(--color-danger-400);
+  --color-syntax-number: var(--color-warning-300);
+  --color-syntax-operator: var(--color-secondary-400);
+  --color-syntax-tag: var(--color-danger-400);
+  --color-syntax-attr: var(--color-warning-300);
+  --color-syntax-punctuation: var(--color-secondary-400);
+  --color-syntax-type: var(--color-success-300);
+  --color-syntax-plain: var(--color-primary-200);
+  --color-syntax-bg: var(--color-primary-900);
+}

package/dist/styles/DataDisplay/List.css

@@ -0,0 +1,12 @@
+:root {
+  --list-item-py-sm: 0.25rem;
+  --list-item-py-md: 0.375rem;
+  --list-item-py-lg: 0.5rem;
+  --list-item-text-sm: 0.75rem;
+  --list-item-text-md: 0.875rem;
+  --list-item-text-lg: 1rem;
+  --list-item-icon-sm: 0.75rem;
+  --list-item-icon-md: 0.875rem;
+  --list-item-icon-lg: 1rem;
+  --row-action-touch-min: 2.25rem;
+}

package/dist/styles/DataDisplay/Table.css

@@ -0,0 +1,8 @@
+:root {
+  --table-cell-px-compact: 0.5rem;
+  --table-cell-py-compact: 0.25rem;
+  --table-cell-px-default: 1rem;
+  --table-cell-py-default: 0.75rem;
+  --table-cell-px-relaxed: 1.5rem;
+  --table-cell-py-relaxed: 1.25rem;
+}

package/dist/styles/DataDisplay/Tree.css

@@ -0,0 +1,11 @@
+:root {
+  --tree-item-py-sm: 0.125rem;
+  --tree-item-py-md: 0.25rem;
+  --tree-item-py-lg: 0.375rem;
+  --tree-item-text-sm: 0.75rem;
+  --tree-item-text-md: 0.875rem;
+  --tree-item-text-lg: 1rem;
+  --tree-item-icon-sm: 0.875rem;
+  --tree-item-icon-md: 1rem;
+  --tree-item-icon-lg: 1.125rem;
+}

package/dist/styles/Disclosure/Accordion.css

@@ -0,0 +1,14 @@
+:root {
+  --accordion-trigger-py-sm: 0.375rem;
+  --accordion-trigger-py-md: 0.75rem;
+  --accordion-trigger-py-lg: 1rem;
+  --accordion-content-pb-sm: 0.375rem;
+  --accordion-content-pb-md: 0.75rem;
+  --accordion-content-pb-lg: 1rem;
+  --accordion-trigger-text-sm: 0.75rem;
+  --accordion-trigger-text-md: 0.875rem;
+  --accordion-trigger-text-lg: 1rem;
+  --accordion-content-text-sm: 0.75rem;
+  --accordion-content-text-md: 0.875rem;
+  --accordion-content-text-lg: 1rem;
+}

package/dist/styles/Disclosure/Tabs.css

@@ -0,0 +1 @@
+/* Tabs has no component-local CSS tokens. */

package/dist/styles/Extras/CinePlayer.css

@@ -0,0 +1 @@
+@import "../../../styles/components/CinePlayer.css";

package/dist/styles/Extras/FileExplorer.css

@@ -0,0 +1 @@
+@import "../../../styles/components/FileExplorer.css";

package/dist/styles/Extras/FilmReel.css

@@ -0,0 +1 @@
+@import "../../../styles/components/FilmReel.css";

package/dist/styles/Extras/Masonry.css

@@ -0,0 +1,3 @@
+:root {
+  --animate-masonry-ripple: masonry-ripple 0.6s ease-out forwards;
+}

package/dist/styles/Extras/MiniPlayer.css

@@ -0,0 +1 @@
+@import "../../../styles/components/MiniPlayer.css";

package/dist/styles/Feedback/Alert.css

@@ -0,0 +1,3 @@
+:root {
+  --toast-width: 20rem;
+}

package/dist/styles/Feedback/ProgressBar.css

@@ -0,0 +1,25 @@
+:root {
+  --animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out infinite;
+  --animate-progress-shine: progress-shine 2s ease-in-out infinite;
+}
+
+@keyframes progress-indeterminate {
+  0% { left: -40%; width: 40%; }
+  50% { left: 30%; width: 50%; }
+  100% { left: 100%; width: 10%; }
+}
+
+@keyframes progress-shine {
+  0% { background-image: none; }
+  50% {
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.35) 50%,
+      transparent 100%
+    );
+    background-size: 50% 100%;
+    background-position: -100% 0;
+  }
+  100% { background-image: none; }
+}

package/dist/styles/Feedback/Spin.css

@@ -0,0 +1,14 @@
+:root {
+  --animate-spin-rotate: spin-rotate 1.4s linear infinite;
+  --animate-spin-dash: spin-dash 1.4s ease-in-out infinite;
+}
+
+@keyframes spin-rotate {
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes spin-dash {
+  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
+  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
+  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
+}

package/dist/styles/Forms/Form.css

@@ -0,0 +1,21 @@
+:root {
+  --form-label-w-sm: 5rem;
+  --form-label-w-md: 7rem;
+  --form-label-w-lg: 9rem;
+
+  --form-item-gap-sm: 0.5rem;
+  --form-item-gap-md: 0.75rem;
+  --form-item-gap-lg: 1rem;
+
+  --form-row-gap-sm: 0.75rem;
+  --form-row-gap-md: 1.25rem;
+  --form-row-gap-lg: 1.75rem;
+
+  --form-hint-text: 0.75rem;
+
+  --form-header-mb: 1.5rem;
+  --form-footer-pt: 1.5rem;
+  --form-footer-gap: 0.5rem;
+
+  --form-radius: 0.5rem;
+}

package/dist/styles/Layout/Card.css

@@ -0,0 +1 @@
+/* Card has no component-local CSS tokens. */

package/dist/styles/Layout/ImageCard.css

@@ -0,0 +1 @@
+/* ImageCard has no component-local CSS tokens. */

package/dist/styles/Layout/Panel.css

@@ -0,0 +1 @@
+/* Panel has no component-local CSS tokens. */

package/dist/styles/Navigation/Header.css

@@ -0,0 +1,9 @@
+:root {
+  --header-mobile-bg: theme(colors.white);
+  --header-mobile-border: theme(colors.primary.200);
+}
+
+.dark {
+  --header-mobile-bg: theme(colors.primary.900);
+  --header-mobile-border: theme(colors.primary.700);
+}

package/dist/styles/Navigation/NavLink.css

@@ -0,0 +1 @@
+/* NavLink has no component-local CSS tokens. */

package/dist/styles/Navigation/SideNav.css

@@ -0,0 +1 @@
+/* SideNav has no component-local CSS tokens. */

package/dist/styles/Overlay/Dialog.css

@@ -0,0 +1,3 @@
+:root {
+  --dialog-sheet-radius: 0.75rem;
+}

package/dist/styles/Overlay/Tooltip.css

@@ -0,0 +1,3 @@
+:root {
+  --tooltip-max-width: 16rem;
+}

package/dist/styles/Primitives/Badge.css

@@ -0,0 +1,14 @@
+:root {
+  --badge-px-sm: 0.375rem;
+  --badge-px-md: 0.625rem;
+  --badge-px-lg: 0.75rem;
+  --badge-py-sm: 0px;
+  --badge-py-md: 0.125rem;
+  --badge-py-lg: 0.25rem;
+  --badge-text-sm: 0.625rem;
+  --badge-text-md: 0.75rem;
+  --badge-text-lg: 0.875rem;
+  --badge-icon-sm: 0.625rem;
+  --badge-icon-md: 0.75rem;
+  --badge-icon-lg: 0.875rem;
+}

package/dist/styles/Primitives/Button.css

@@ -0,0 +1 @@
+/* Button has no component-local CSS tokens. */

package/dist/styles/Primitives/Checkbox.css

@@ -0,0 +1 @@
+/* Checkbox has no component-local CSS tokens. */

package/dist/styles/Primitives/Dropdown.css

@@ -0,0 +1,26 @@
+:root {
+  --animate-dropdown-item-in: dropdown-item-in 200ms ease-out both;
+  --animate-dropdown-item-out: dropdown-item-out 150ms ease-in both;
+  --animate-dropdown-container-in: dropdown-container-in 150ms ease-out both;
+  --animate-dropdown-container-out: dropdown-container-out 120ms ease-in both;
+}
+
+@keyframes dropdown-item-in {
+  from { opacity: 0; transform: perspective(400px) rotateX(-50deg); transform-origin: top center; }
+  to { opacity: 1; transform: perspective(400px) rotateX(0deg); transform-origin: top center; }
+}
+
+@keyframes dropdown-item-out {
+  from { opacity: 1; transform: perspective(400px) rotateX(0deg); transform-origin: top center; }
+  to { opacity: 0; transform: perspective(400px) rotateX(-50deg); transform-origin: top center; }
+}
+
+@keyframes dropdown-container-in {
+  from { opacity: 0; transform: scaleY(0.96); transform-origin: top center; }
+  to { opacity: 1; transform: scaleY(1); transform-origin: top center; }
+}
+
+@keyframes dropdown-container-out {
+  from { opacity: 1; transform: scaleY(1); transform-origin: top center; }
+  to { opacity: 0; transform: scaleY(0.96); transform-origin: top center; }
+}

package/dist/styles/Primitives/DropdownButton.css

@@ -0,0 +1 @@
+@import "../Dropdown/Dropdown.css";

package/dist/styles/Primitives/Indicator.css

@@ -0,0 +1,5 @@
+:root {
+  --indicator-dot-size-sm: 0.375rem;
+  --indicator-dot-size-md: 0.5rem;
+  --indicator-dot-size-lg: 0.625rem;
+}

package/dist/styles/Primitives/Input.css

@@ -0,0 +1 @@
+/* Input has no component-local CSS tokens. */

package/dist/styles/Primitives/Label.css

@@ -0,0 +1 @@
+/* Label has no component-local CSS tokens. */

package/dist/styles/Primitives/Radio.css

@@ -0,0 +1 @@
+/* Radio has no component-local CSS tokens. */

package/dist/styles/Primitives/Switch.css

@@ -0,0 +1 @@
+/* Switch has no component-local CSS tokens. */

package/dist/styles/Primitives/TextBox.css

@@ -0,0 +1 @@
+/* TextBox has no component-local CSS tokens. */

package/dist/styles/base.css

@@ -176,31 +176,10 @@
     --color-warning-900: var(--color-orange-900);
     --animate-fade-in: fade-in 150ms ease-out;
     --animate-scale-in: scale-in 200ms ease-out;
-    --animate-dropdown-item-in: dropdown-item-in 200ms ease-out both;
-    --animate-dropdown-item-out: dropdown-item-out 150ms ease-in both;
-    --animate-dropdown-container-in: dropdown-container-in 150ms ease-out both;
-    --animate-dropdown-container-out: dropdown-container-out 120ms ease-in both;
     --animate-slide-in-right: slide-in-right 300ms ease-out;
     --animate-slide-in-left: slide-in-left 300ms ease-out;
     --animate-slide-in-top: slide-in-top 300ms ease-out;
     --animate-slide-in-bottom: slide-in-bottom 300ms ease-out;
-    --animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out infinite;
-    --animate-progress-shine: progress-shine 2s ease-in-out infinite;
-    --animate-spin-rotate: spin-rotate 1.4s linear infinite;
-    --animate-spin-dash: spin-dash 1.4s ease-in-out infinite;
-    --color-syntax-keyword: var(--color-primary-600);
-    --color-syntax-string: var(--color-success-600);
-    --color-syntax-comment: var(--color-secondary-400);
-    --color-syntax-function: var(--color-warning-600);
-    --color-syntax-variable: var(--color-danger-600);
-    --color-syntax-number: var(--color-warning-500);
-    --color-syntax-operator: var(--color-secondary-600);
-    --color-syntax-tag: var(--color-danger-500);
-    --color-syntax-attr: var(--color-warning-600);
-    --color-syntax-punctuation: var(--color-secondary-500);
-    --color-syntax-type: var(--color-success-700);
-    --color-syntax-plain: var(--color-primary-800);
-    --color-syntax-bg: var(--color-primary-50);
   }
 }
 @layer base {
@@ -546,9 +525,6 @@
   .z-200 {
     z-index: 200;
   }
-  .z-9999 {
-    z-index: 9999;
-  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -1083,12 +1059,6 @@
   .animate-ping {
     animation: var(--animate-ping);
   }
-  .animate-progress-indeterminate {
-    animation: var(--animate-progress-indeterminate);
-  }
-  .animate-progress-shine {
-    animation: var(--animate-progress-shine);
-  }
   .animate-scale-in {
     animation: var(--animate-scale-in);
   }
@@ -1104,12 +1074,6 @@
   .animate-slide-in-top {
     animation: var(--animate-slide-in-top);
   }
-  .animate-spin-dash {
-    animation: var(--animate-spin-dash);
-  }
-  .animate-spin-rotate {
-    animation: var(--animate-spin-rotate);
-  }
   .cursor-default {
     cursor: default;
   }
@@ -1426,7 +1390,7 @@
   .rounded-xs {
     border-radius: var(--radius-xs);
   }
-  .rounded-t-\[var\(--dialog-sheet-radius\)\] {
+  .rounded-t-\(--dialog-sheet-radius\) {
     border-top-left-radius: var(--dialog-sheet-radius);
     border-top-right-radius: var(--dialog-sheet-radius);
   }
@@ -1468,9 +1432,6 @@
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
-  .rounded-bl-lg {
-    border-bottom-left-radius: var(--radius-lg);
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -4291,21 +4252,6 @@
     }
   }
 }
-.dark {
-  --color-syntax-keyword: var(--color-primary-400);
-  --color-syntax-string: var(--color-success-400);
-  --color-syntax-comment: var(--color-secondary-500);
-  --color-syntax-function: var(--color-warning-400);
-  --color-syntax-variable: var(--color-danger-400);
-  --color-syntax-number: var(--color-warning-300);
-  --color-syntax-operator: var(--color-secondary-400);
-  --color-syntax-tag: var(--color-danger-400);
-  --color-syntax-attr: var(--color-warning-300);
-  --color-syntax-punctuation: var(--color-secondary-400);
-  --color-syntax-type: var(--color-success-300);
-  --color-syntax-plain: var(--color-primary-200);
-  --color-syntax-bg: var(--color-primary-900);
-}
 @keyframes fade-in {
   from {
     opacity: 0;
@@ -4324,54 +4270,6 @@
     transform: scale(1);
   }
 }
-@keyframes dropdown-item-in {
-  from {
-    opacity: 0;
-    transform: perspective(400px) rotateX(-50deg);
-    transform-origin: top center;
-  }
-  to {
-    opacity: 1;
-    transform: perspective(400px) rotateX(0deg);
-    transform-origin: top center;
-  }
-}
-@keyframes dropdown-item-out {
-  from {
-    opacity: 1;
-    transform: perspective(400px) rotateX(0deg);
-    transform-origin: top center;
-  }
-  to {
-    opacity: 0;
-    transform: perspective(400px) rotateX(-50deg);
-    transform-origin: top center;
-  }
-}
-@keyframes dropdown-container-in {
-  from {
-    opacity: 0;
-    transform: scaleY(0.96);
-    transform-origin: top center;
-  }
-  to {
-    opacity: 1;
-    transform: scaleY(1);
-    transform-origin: top center;
-  }
-}
-@keyframes dropdown-container-out {
-  from {
-    opacity: 1;
-    transform: scaleY(1);
-    transform-origin: top center;
-  }
-  to {
-    opacity: 0;
-    transform: scaleY(0.96);
-    transform-origin: top center;
-  }
-}
 @keyframes slide-in-right {
   from {
     opacity: 0;
@@ -4420,149 +4318,6 @@
     transform: translateX(200%) skewX(-15deg);
   }
 }
-@keyframes spin-rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes spin-dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
-@keyframes progress-indeterminate {
-  0% {
-    left: -40%;
-    width: 40%;
-  }
-  50% {
-    left: 30%;
-    width: 50%;
-  }
-  100% {
-    left: 100%;
-    width: 10%;
-  }
-}
-@keyframes progress-shine {
-  0% {
-    background-image: none;
-  }
-  50% {
-    background-image: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100% );
-    background-size: 50% 100%;
-    background-position: -100% 0;
-  }
-  100% {
-    background-image: none;
-  }
-}
-:root {
-  --accordion-trigger-py-sm: 0.375rem;
-  --accordion-trigger-py-md: 0.75rem;
-  --accordion-trigger-py-lg: 1rem;
-  --accordion-content-pb-sm: 0.375rem;
-  --accordion-content-pb-md: 0.75rem;
-  --accordion-content-pb-lg: 1rem;
-  --accordion-trigger-text-sm: 0.75rem;
-  --accordion-trigger-text-md: 0.875rem;
-  --accordion-trigger-text-lg: 1rem;
-  --accordion-content-text-sm: 0.75rem;
-  --accordion-content-text-md: 0.875rem;
-  --accordion-content-text-lg: 1rem;
-}
-:root {
-  --badge-px-sm: 0.375rem;
-  --badge-px-md: 0.625rem;
-  --badge-px-lg: 0.75rem;
-  --badge-py-sm: 0px;
-  --badge-py-md: 0.125rem;
-  --badge-py-lg: 0.25rem;
-  --badge-text-sm: 0.625rem;
-  --badge-text-md: 0.75rem;
-  --badge-text-lg: 0.875rem;
-  --badge-icon-sm: 0.625rem;
-  --badge-icon-md: 0.75rem;
-  --badge-icon-lg: 0.875rem;
-}
-:root {
-  --list-item-py-sm: 0.25rem;
-  --list-item-py-md: 0.375rem;
-  --list-item-py-lg: 0.5rem;
-  --list-item-text-sm: 0.75rem;
-  --list-item-text-md: 0.875rem;
-  --list-item-text-lg: 1rem;
-  --list-item-icon-sm: 0.75rem;
-  --list-item-icon-md: 0.875rem;
-  --list-item-icon-lg: 1rem;
-}
-:root {
-  --tree-item-py-sm: 0.125rem;
-  --tree-item-py-md: 0.25rem;
-  --tree-item-py-lg: 0.375rem;
-  --tree-item-text-sm: 0.75rem;
-  --tree-item-text-md: 0.875rem;
-  --tree-item-text-lg: 1rem;
-  --tree-item-icon-sm: 0.875rem;
-  --tree-item-icon-md: 1rem;
-  --tree-item-icon-lg: 1.125rem;
-}
-:root {
-  --header-mobile-bg: #fff;
-  --header-mobile-border: var(--color-slate-200);
-}
-.dark {
-  --header-mobile-bg: var(--color-slate-900);
-  --header-mobile-border: var(--color-slate-700);
-}
-:root {
-  --table-cell-px-compact: 0.5rem;
-  --table-cell-py-compact: 0.25rem;
-  --table-cell-px-default: 1rem;
-  --table-cell-py-default: 0.75rem;
-  --table-cell-px-relaxed: 1.5rem;
-  --table-cell-py-relaxed: 1.25rem;
-}
-:root {
-  --tooltip-max-width: 16rem;
-}
-:root {
-  --toast-width: 20rem;
-}
-:root {
-  --dialog-sheet-radius: 0.75rem;
-}
-:root {
-  --form-label-w-sm: 5rem;
-  --form-label-w-md: 7rem;
-  --form-label-w-lg: 9rem;
-  --form-item-gap-sm: 0.5rem;
-  --form-item-gap-md: 0.75rem;
-  --form-item-gap-lg: 1rem;
-  --form-row-gap-sm: 0.75rem;
-  --form-row-gap-md: 1.25rem;
-  --form-row-gap-lg: 1.75rem;
-  --form-hint-text: 0.75rem;
-  --form-header-mb: 1.5rem;
-  --form-footer-pt: 1.5rem;
-  --form-footer-gap: 0.5rem;
-  --form-radius: 0.5rem;
-  --row-action-touch-min: 2.25rem;
-}
-:root {
-  --indicator-dot-size-sm: 0.375rem;
-  --indicator-dot-size-md: 0.5rem;
-  --indicator-dot-size-lg: 0.625rem;
-}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/dist/styles/tokens/animations-shared.css

@@ -0,0 +1,55 @@
+@theme {
+  --animate-fade-in: fade-in 150ms ease-out;
+  --animate-scale-in: scale-in 200ms ease-out;
+  --animate-slide-in-right: slide-in-right 300ms ease-out;
+  --animate-slide-in-left: slide-in-left 300ms ease-out;
+  --animate-slide-in-top: slide-in-top 300ms ease-out;
+  --animate-slide-in-bottom: slide-in-bottom 300ms ease-out;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes slide-in-right {
+  from { opacity: 0; transform: translateX(100%); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slide-in-left {
+  from { opacity: 0; transform: translateX(-100%); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slide-in-top {
+  from { opacity: 0; transform: translateY(-100%); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slide-in-bottom {
+  from { opacity: 0; transform: translateY(100%); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes light-sweep {
+  0% { transform: translateX(-100%) skewX(-15deg); }
+  100% { transform: translateX(200%) skewX(-15deg); }
+}
+
+@utility animate-light-sweep {
+  background: linear-gradient(
+    105deg,
+    transparent 30%,
+    rgba(255, 255, 255, 0.08) 40%,
+    rgba(255, 255, 255, 0.25) 50%,
+    rgba(255, 255, 255, 0.08) 60%,
+    transparent 70%
+  );
+  animation: light-sweep 0.8s ease-in-out;
+}