@jacshuo/onyx 1.1.0 → 1.2.0

package/dist/styles/tokens/core.css

@@ -0,0 +1,56 @@
+@theme {
+  --color-primary-50: var(--color-slate-50);
+  --color-primary-100: var(--color-slate-100);
+  --color-primary-200: var(--color-slate-200);
+  --color-primary-300: var(--color-slate-300);
+  --color-primary-400: var(--color-slate-400);
+  --color-primary-500: var(--color-slate-500);
+  --color-primary-600: var(--color-slate-600);
+  --color-primary-700: var(--color-slate-700);
+  --color-primary-800: var(--color-slate-800);
+  --color-primary-900: var(--color-slate-900);
+
+  --color-secondary-50: var(--color-gray-50);
+  --color-secondary-100: var(--color-gray-100);
+  --color-secondary-200: var(--color-gray-200);
+  --color-secondary-300: var(--color-gray-300);
+  --color-secondary-400: var(--color-gray-400);
+  --color-secondary-500: var(--color-gray-500);
+  --color-secondary-600: var(--color-gray-600);
+  --color-secondary-700: var(--color-gray-700);
+  --color-secondary-800: var(--color-gray-800);
+  --color-secondary-900: var(--color-gray-900);
+
+  --color-success-50: var(--color-emerald-50);
+  --color-success-100: var(--color-emerald-100);
+  --color-success-200: var(--color-emerald-200);
+  --color-success-300: var(--color-emerald-300);
+  --color-success-400: var(--color-emerald-400);
+  --color-success-500: var(--color-emerald-500);
+  --color-success-600: var(--color-emerald-600);
+  --color-success-700: var(--color-emerald-700);
+  --color-success-800: var(--color-emerald-800);
+  --color-success-900: var(--color-emerald-900);
+
+  --color-danger-50: var(--color-rose-50);
+  --color-danger-100: var(--color-rose-100);
+  --color-danger-200: var(--color-rose-200);
+  --color-danger-300: var(--color-rose-300);
+  --color-danger-400: var(--color-rose-400);
+  --color-danger-500: var(--color-rose-500);
+  --color-danger-600: var(--color-rose-600);
+  --color-danger-700: var(--color-rose-700);
+  --color-danger-800: var(--color-rose-800);
+  --color-danger-900: var(--color-rose-900);
+
+  --color-warning-50: var(--color-orange-50);
+  --color-warning-100: var(--color-orange-100);
+  --color-warning-200: var(--color-orange-200);
+  --color-warning-300: var(--color-orange-300);
+  --color-warning-400: var(--color-orange-400);
+  --color-warning-500: var(--color-orange-500);
+  --color-warning-600: var(--color-orange-600);
+  --color-warning-700: var(--color-orange-700);
+  --color-warning-800: var(--color-orange-800);
+  --color-warning-900: var(--color-orange-900);
+}

package/dist/styles/tokens.css

@@ -1,346 +1,5 @@
-/* ═══════════════════════════════════════════════════════════
-   Core theme tokens & animations
-   Shared by ALL components. Import this if you have your own
-   Tailwind setup and want to skip the pre-compiled bundle.
-   ═══════════════════════════════════════════════════════════ */
+/* Global shared token entrypoint.
+   Component-coupled tokens live in component-local CSS files. */
 
-@theme {
-  --color-primary-50: var(--color-slate-50);
-  --color-primary-100: var(--color-slate-100);
-  --color-primary-200: var(--color-slate-200);
-  --color-primary-300: var(--color-slate-300);
-  --color-primary-400: var(--color-slate-400);
-  --color-primary-500: var(--color-slate-500);
-  --color-primary-600: var(--color-slate-600);
-  --color-primary-700: var(--color-slate-700);
-  --color-primary-800: var(--color-slate-800);
-  --color-primary-900: var(--color-slate-900);
-
-  --color-secondary-50: var(--color-gray-50);
-  --color-secondary-100: var(--color-gray-100);
-  --color-secondary-200: var(--color-gray-200);
-  --color-secondary-300: var(--color-gray-300);
-  --color-secondary-400: var(--color-gray-400);
-  --color-secondary-500: var(--color-gray-500);
-  --color-secondary-600: var(--color-gray-600);
-  --color-secondary-700: var(--color-gray-700);
-  --color-secondary-800: var(--color-gray-800);
-  --color-secondary-900: var(--color-gray-900);
-
-  --color-success-50: var(--color-emerald-50);
-  --color-success-100: var(--color-emerald-100);
-  --color-success-200: var(--color-emerald-200);
-  --color-success-300: var(--color-emerald-300);
-  --color-success-400: var(--color-emerald-400);
-  --color-success-500: var(--color-emerald-500);
-  --color-success-600: var(--color-emerald-600);
-  --color-success-700: var(--color-emerald-700);
-  --color-success-800: var(--color-emerald-800);
-  --color-success-900: var(--color-emerald-900);
-
-  --color-danger-50: var(--color-rose-50);
-  --color-danger-100: var(--color-rose-100);
-  --color-danger-200: var(--color-rose-200);
-  --color-danger-300: var(--color-rose-300);
-  --color-danger-400: var(--color-rose-400);
-  --color-danger-500: var(--color-rose-500);
-  --color-danger-600: var(--color-rose-600);
-  --color-danger-700: var(--color-rose-700);
-  --color-danger-800: var(--color-rose-800);
-  --color-danger-900: var(--color-rose-900);
-
-  --color-warning-50: var(--color-orange-50);
-  --color-warning-100: var(--color-orange-100);
-  --color-warning-200: var(--color-orange-200);
-  --color-warning-300: var(--color-orange-300);
-  --color-warning-400: var(--color-orange-400);
-  --color-warning-500: var(--color-orange-500);
-  --color-warning-600: var(--color-orange-600);
-  --color-warning-700: var(--color-orange-700);
-  --color-warning-800: var(--color-orange-800);
-  --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;
-  --animate-masonry-ripple: masonry-ripple 0.6s ease-out forwards;
-
-  /* ── Syntax highlighting (semantic) ─────────────────── */
-  --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);
-}
-
-/* ── Syntax tokens: dark overrides ─────────────────── */
-.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; }
-  to { opacity: 1; }
-}
-
-@keyframes scale-in {
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
-}
-
-/* Dropdown item domino: flip from top edge (rotateX) + fade */
-@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; }
-}
-
-/* Dropdown container fade+scale */
-@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; 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;
-}
-
-/* ── Spin animations ─────────────────────────────────── */
-
-@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; }
-}
-
-/* ── ProgressBar animations ──────────────────────────── */
-
-@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; }
-}
-
-/* ── Accordion size tokens ───────────────────────────── */
-: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;
-}
-
-/* ── Badge size tokens ───────────────────────────────── */
-: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;
-}
-
-/* ── List size tokens ────────────────────────────────── */
-: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;
-}
-
-/* ── Tree size tokens ────────────────────────────────── */
-: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;
-}
-
-/* ── Header tokens ───────────────────────────────────── */
-: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);
-}
-
-/* ── Table density tokens ────────────────────────────── */
-: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;
-}
-
-/* ── Tooltip tokens ──────────────────────────────────── */
-:root {
-  --tooltip-max-width: 16rem;
-}
-
-/* ── Toast tokens ────────────────────────────────────── */
-:root {
-  --toast-width: 20rem;
-}
-
-/* ── Dialog bottom-sheet tokens ──────────────────────── */
-:root {
-  --dialog-sheet-radius: 0.75rem;
-}
-
-/* ── Form / FormItem tokens ──────────────────────────── */
-:root {
-  /* label column width in "inline" layout */
-  --form-label-w-sm:   5rem;
-  --form-label-w-md:   7rem;
-  --form-label-w-lg:   9rem;
-
-  /* row gap between label and control */
-  --form-item-gap-sm:  0.5rem;
-  --form-item-gap-md:  0.75rem;
-  --form-item-gap-lg:  1rem;
-
-  /* vertical gap between FormItems */
-  --form-row-gap-sm:   0.75rem;
-  --form-row-gap-md:   1.25rem;
-  --form-row-gap-lg:   1.75rem;
-
-  /* validation message text sizes */
-  --form-hint-text:    0.75rem;   /* text-xs */
-
-  /* section spacing */
-  --form-header-mb:    1.5rem;
-  --form-footer-pt:    1.5rem;
-  --form-footer-gap:   0.5rem;
-
-  /* form border radius */
-  --form-radius:       0.5rem;
-
-  /* row actions — minimum tap target on touch devices */
-  --row-action-touch-min: 2.25rem;
-}
-
-/* ── Indicator tokens ────────────────────────────────── */
-:root {
-  --indicator-dot-size-sm: 0.375rem;  /* 6px  */
-  --indicator-dot-size-md: 0.5rem;    /* 8px  */
-  --indicator-dot-size-lg: 0.625rem;  /* 10px */
-}
+@import "./tokens/core.css";
+@import "./tokens/animations-shared.css";