@jacshuo/onyx 0.1.9 → 1.0.0

package/dist/styles/tokens.css

@@ -62,10 +62,51 @@
 
   --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 {
@@ -78,6 +119,28 @@
   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); }
@@ -114,3 +177,170 @@
   );
   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 */
+}