@danieljoffe/shared-ui 0.0.1

package/src/styles/indigo-theme.css

@@ -0,0 +1,322 @@
+@theme {
+  /* Radius scale */
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+
+  /* Fonts — actual families injected by next/font via CSS variables at runtime */
+  --font-sans: ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, monospace;
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-lg:
+    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
+  --shadow-xl:
+    0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+
+  /* Animation */
+  --animate-fade-in: fade-in 0.2s ease-out;
+  --animate-slide-up: slide-up 0.2s ease-out;
+  --animate-slide-down: slide-down 0.15s ease-out;
+  --animate-slide-out-down: slide-out-down 0.15s ease-in forwards;
+  --animate-scale-in: scale-in 0.15s ease-out;
+
+  /* Colors - Brand (blue-indigo, oklch hue 250) */
+  --color-brand-50: oklch(0.97 0.01 250);
+  --color-brand-100: oklch(0.93 0.03 250);
+  --color-brand-200: oklch(0.87 0.06 250);
+  --color-brand-300: oklch(0.78 0.1 250);
+  --color-brand-400: oklch(0.68 0.15 250);
+  --color-brand-500: oklch(0.54 0.19 250);
+  --color-brand-600: oklch(0.5 0.19 250);
+  --color-brand-700: oklch(0.43 0.17 250);
+  --color-brand-800: oklch(0.37 0.14 250);
+  --color-brand-900: oklch(0.3 0.1 250);
+  --color-brand-950: oklch(0.22 0.08 250);
+
+  /* Semantic Colors - Surface */
+  --color-surface: #ffffff;
+  --color-surface-secondary: #f9fafb;
+  --color-surface-tertiary: #f3f4f6;
+  --color-surface-elevated: #ffffff;
+  --color-surface-overlay: rgba(0, 0, 0, 0.5);
+
+  /* Semantic Colors - Border */
+  --color-border: #e5e7eb;
+  --color-border-secondary: #d1d5db;
+  --color-border-focus: oklch(0.54 0.19 250);
+
+  /* Semantic Colors - Text */
+  --color-text-primary: #111827;
+  --color-text-secondary: #6b7280;
+  --color-text-tertiary: #6b6b6b;
+  --color-text-inverse: #ffffff;
+  --color-text-brand: oklch(0.5 0.19 250);
+  /* Tokenized text color paired with brand-500 bg. Indigo's brand-500
+     (oklch 0.54 0.19 250) is dark enough that white reads cleanly. */
+  --color-text-on-brand: #ffffff;
+
+  /* Semantic Colors - Status */
+  --color-success: #10b981;
+  --color-success-light: #ecfdf5;
+  --color-warning: #f59e0b;
+  --color-warning-light: #fffbeb;
+  --color-error: #ef4444;
+  --color-error-light: #fef2f2;
+  --color-info: #2563eb;
+  --color-info-light: #eff6ff;
+}
+
+/* Dark mode overrides */
+.dark {
+  --color-surface: #0f1117;
+  --color-surface-secondary: #161922;
+  --color-surface-tertiary: #1e2130;
+  --color-surface-elevated: #1a1d2b;
+  --color-surface-overlay: rgba(0, 0, 0, 0.7);
+
+  --color-border: #2a2d3a;
+  --color-border-secondary: #3a3d4a;
+
+  --color-text-primary: #f1f5f9;
+  --color-text-secondary: #94a3b8;
+  --color-text-tertiary: #8494a7;
+  --color-text-inverse: #0f1117;
+  --color-text-brand: oklch(0.65 0.19 250);
+
+  --color-success-light: #052e16;
+  --color-warning-light: #451a03;
+  --color-error-light: #450a0a;
+  --color-info-light: #172554;
+
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
+  --shadow-lg:
+    0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
+  --shadow-xl:
+    0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out-down {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@keyframes bounceSubtle {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+@keyframes pulseSlow {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@custom-variant dark (&:is(.dark *));
+
+/* Base styles */
+@layer base {
+  * {
+    @apply border-border outline-border-focus/50;
+  }
+
+  html {
+    font-size: 16px;
+  }
+
+  body {
+    @apply bg-surface text-text-primary antialiased;
+    font-family: var(--font-sans);
+    font-size: 16px;
+    line-height: 1.65;
+    font-weight: 400;
+    transition:
+      background-color 0.2s ease,
+      color 0.2s ease;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-sans);
+    font-weight: 600;
+    color: inherit;
+    text-wrap: balance;
+    margin: 0;
+    letter-spacing: -0.025em;
+  }
+
+  h1 {
+    font-size: 2.25rem;
+    line-height: 1.1;
+  }
+
+  h2 {
+    font-size: 1.75rem;
+    line-height: 1.2;
+  }
+
+  h3 {
+    font-size: 1.375rem;
+    line-height: 1.25;
+  }
+
+  h4 {
+    font-size: 1.125rem;
+    line-height: 1.3;
+  }
+
+  h5 {
+    font-size: 1rem;
+    line-height: 1.5;
+    font-weight: 500;
+  }
+
+  h6 {
+    font-size: 0.875rem;
+    line-height: 1.5;
+    font-weight: 500;
+  }
+
+  :is(h1, h2, h3, h4, h5, h6):first-child {
+    margin-top: 0;
+  }
+
+  p {
+    margin-bottom: 0.5em;
+  }
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Inline code only — code blocks are styled by rehype-pretty-code below */
+  code:not([data-theme]) {
+    font-family: var(--font-mono);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    @apply bg-brand-50 text-brand-600 rounded px-1.5 py-0.5;
+  }
+
+  ul:not(.prose ul),
+  ol:not(.prose ol) {
+    list-style: none;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  th,
+  td {
+    text-align: left;
+    padding: 0.25rem 0.75rem;
+  }
+
+  th:first-child,
+  td:first-child {
+    padding-left: 0;
+  }
+
+  th:last-child,
+  td:last-child {
+    padding-right: 0;
+  }
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-border-secondary);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-tertiary);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/src/styles/preview.scss

@@ -0,0 +1,4 @@
+@use 'tailwindcss';
+@import './indigo-theme.css';
+@import './pyre-storybook-preview.css';
+@source "../**/*.{js,ts,jsx,tsx}";

package/src/styles/pyre-storybook-preview.css

@@ -0,0 +1,50 @@
+/**
+ * Pyre overrides scoped to the `.pyre` class — for Storybook only.
+ *
+ * The production Pyre file (pyre-theme.css) registers its tokens via
+ * `@theme {}` at :root, which would clobber indigo's defaults in the
+ * Storybook preview where both palettes coexist. This file scopes the
+ * same token *values* under `.pyre` so the storybook decorator can flip
+ * between palettes by toggling a class on <body>.
+ *
+ * Values must stay in lockstep with pyre-theme.css's @theme block.
+ * If you change one, change both.
+ */
+.pyre {
+  --color-brand-50: oklch(0.97 0.05 127);
+  --color-brand-100: oklch(0.93 0.1 127);
+  --color-brand-200: oklch(0.87 0.16 127);
+  --color-brand-300: oklch(0.78 0.22 127);
+  --color-brand-400: oklch(0.72 0.26 127);
+  --color-brand-500: oklch(0.67 0.28 127);
+  --color-brand-600: oklch(0.6 0.26 127);
+  --color-brand-700: oklch(0.5 0.22 127);
+  --color-brand-800: oklch(0.4 0.17 127);
+  --color-brand-900: oklch(0.3 0.12 127);
+  --color-brand-950: oklch(0.2 0.08 127);
+
+  --color-surface: oklch(0.1 0.01 270);
+  --color-surface-secondary: oklch(0.13 0.01 270);
+  --color-surface-tertiary: oklch(0.16 0.01 270);
+  --color-surface-elevated: oklch(0.13 0.01 270);
+  --color-surface-overlay: rgba(0, 0, 0, 0.7);
+
+  --color-border: oklch(0.22 0.01 270);
+  --color-border-secondary: oklch(0.3 0.01 270);
+  --color-border-focus: oklch(0.67 0.28 127);
+
+  --color-text-primary: oklch(0.96 0.01 90);
+  --color-text-secondary: oklch(0.75 0.02 90);
+  --color-text-tertiary: oklch(0.6 0.02 90);
+  --color-text-inverse: oklch(0.1 0.01 270);
+  --color-text-brand: oklch(0.78 0.22 127);
+
+  --color-success: oklch(0.72 0.2 145);
+  --color-success-light: oklch(0.25 0.05 145);
+  --color-warning: oklch(0.78 0.18 70);
+  --color-warning-light: oklch(0.28 0.05 70);
+  --color-error: oklch(0.65 0.22 25);
+  --color-error-light: oklch(0.25 0.05 25);
+  --color-info: oklch(0.7 0.2 230);
+  --color-info-light: oklch(0.25 0.05 230);
+}

package/src/styles/pyre-theme.css

@@ -0,0 +1,346 @@
+/**
+ * Pyre — chartreuse over neutral surfaces. Light by default; dark
+ * mode activates via the ``.dark`` class on ``<html>``, set by
+ * ``wyrdfold/state/Theme/ThemeProvider`` based on
+ * localStorage + ``prefers-color-scheme``.
+ *
+ * Originally shipped dark-only (the original docstring said "No
+ * light/dark switch — Pyre is one palette"), but the
+ * ``DarkModeToggle`` button + ``ThemeProvider`` were giving users a
+ * non-functional affordance: the toggle cycled state + flipped the
+ * ``.dark`` class on ``<html>``, but the theme had no rules scoped
+ * to ``.dark`` vs the default, so the page stayed dark regardless.
+ *
+ * Token *names* mirror indigo-theme.css exactly so the two themes
+ * stay drop-in-compatible. Token *values* differ.
+ *
+ * Color decisions:
+ *   brand   = chartreuse, oklch hue 127, peak chroma at L≈0.67.
+ *             Same in both modes — the brand colour doesn't flip.
+ *   surface = light: near-white at L≈0.98 (hue 270);
+ *             dark:  near-black at L≈0.10 (hue 270).
+ *   text    = light: near-black at L≈0.18 (≥ 14:1 over surface);
+ *             dark:  near-white at L≈0.96 (≥ 14:1 over surface).
+ *   status  = both modes use mid-lightness hues so the foreground
+ *             reads at WCAG AA over the corresponding surface.
+ *
+ * For Storybook coexistence with indigo, see pyre-storybook-preview.css —
+ * that file scopes Pyre tokens under a `.pyre` class so the indigo theme
+ * can stay the default at :root.
+ */
+@theme {
+  /* Radius scale */
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+
+  /* Fonts — actual families injected by next/font via CSS variables at runtime */
+  --font-sans: ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, monospace;
+
+  /* Shadows — light defaults; dark mode overrides below. */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-lg:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
+  --shadow-xl:
+    0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
+
+  /* Animation */
+  --animate-fade-in: fade-in 0.2s ease-out;
+  --animate-slide-up: slide-up 0.2s ease-out;
+  --animate-slide-down: slide-down 0.15s ease-out;
+  --animate-slide-out-down: slide-out-down 0.15s ease-in forwards;
+  --animate-scale-in: scale-in 0.15s ease-out;
+
+  /* Colors — Brand (chartreuse, oklch hue 127). Identical across modes. */
+  --color-brand-50: oklch(0.97 0.05 127);
+  --color-brand-100: oklch(0.93 0.1 127);
+  --color-brand-200: oklch(0.87 0.16 127);
+  --color-brand-300: oklch(0.78 0.22 127);
+  --color-brand-400: oklch(0.72 0.26 127);
+  --color-brand-500: oklch(0.67 0.28 127);
+  --color-brand-600: oklch(0.6 0.26 127);
+  --color-brand-700: oklch(0.5 0.22 127);
+  --color-brand-800: oklch(0.4 0.17 127);
+  --color-brand-900: oklch(0.3 0.12 127);
+  --color-brand-950: oklch(0.2 0.08 127);
+
+  /* Semantic Colors — Surface (light mode, near-white hue 270) */
+  --color-surface: oklch(0.99 0.005 270);
+  --color-surface-secondary: oklch(0.97 0.005 270);
+  --color-surface-tertiary: oklch(0.94 0.005 270);
+  --color-surface-elevated: oklch(1 0 0);
+  --color-surface-overlay: rgba(15, 15, 25, 0.4);
+
+  /* Semantic Colors — Border (light mode) */
+  --color-border: oklch(0.9 0.005 270);
+  --color-border-secondary: oklch(0.82 0.005 270);
+  --color-border-focus: oklch(0.55 0.28 127);
+
+  /* Semantic Colors — Text (light mode, near-black hue 270) */
+  --color-text-primary: oklch(0.18 0.01 270);
+  --color-text-secondary: oklch(0.4 0.02 270);
+  --color-text-tertiary: oklch(0.55 0.02 270);
+  --color-text-inverse: oklch(0.98 0.005 270);
+  --color-text-brand: oklch(0.4 0.22 127);
+  /* Brand-500 chartreuse over a near-black foreground clears WCAG
+     AA in both modes (foreground is the dark token; surface is
+     bright). */
+  --color-text-on-brand: oklch(0.15 0.02 127);
+
+  /* Semantic Colors — Status (light mode: mid-lightness hues
+     readable on near-white surfaces) */
+  --color-success: oklch(0.52 0.18 145);
+  --color-success-light: oklch(0.94 0.05 145);
+  --color-warning: oklch(0.6 0.16 70);
+  --color-warning-light: oklch(0.95 0.05 70);
+  --color-error: oklch(0.55 0.22 25);
+  --color-error-light: oklch(0.94 0.05 25);
+  --color-info: oklch(0.52 0.2 230);
+  --color-info-light: oklch(0.94 0.05 230);
+}
+
+/*
+ * Dark mode overrides. ThemeProvider toggles ``.dark`` on
+ * ``<html>``; only the tokens that need to flip are repeated here
+ * (the radius / font / animation / brand-color values stay the
+ * same so a future palette tweak only happens in one place).
+ *
+ * Values match what shipped pre-fix when Pyre was dark-only — so
+ * users who land in dark mode (the typical OS default in the
+ * existing user base) get the identical palette they had before
+ * this PR. The new tokens are the light-mode defaults.
+ */
+.dark {
+  /* Shadows — heavier opacity values for the dark surface */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
+  --shadow-lg:
+    0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
+  --shadow-xl:
+    0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
+
+  /* Surface — near-black, hue 270 */
+  --color-surface: oklch(0.1 0.01 270);
+  --color-surface-secondary: oklch(0.13 0.01 270);
+  --color-surface-tertiary: oklch(0.16 0.01 270);
+  --color-surface-elevated: oklch(0.13 0.01 270);
+  --color-surface-overlay: rgba(0, 0, 0, 0.7);
+
+  /* Border */
+  --color-border: oklch(0.22 0.01 270);
+  --color-border-secondary: oklch(0.3 0.01 270);
+  --color-border-focus: oklch(0.67 0.28 127);
+
+  /* Text — near-white */
+  --color-text-primary: oklch(0.96 0.01 90);
+  --color-text-secondary: oklch(0.75 0.02 90);
+  --color-text-tertiary: oklch(0.6 0.02 90);
+  --color-text-inverse: oklch(0.1 0.01 270);
+  --color-text-brand: oklch(0.78 0.22 127);
+
+  /* Status (semantic hues, dimmed chroma for dark surface) */
+  --color-success: oklch(0.72 0.2 145);
+  --color-success-light: oklch(0.25 0.05 145);
+  --color-warning: oklch(0.78 0.18 70);
+  --color-warning-light: oklch(0.28 0.05 70);
+  --color-error: oklch(0.65 0.22 25);
+  --color-error-light: oklch(0.25 0.05 25);
+  --color-info: oklch(0.7 0.2 230);
+  --color-info-light: oklch(0.25 0.05 230);
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out-down {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Base styles */
+@layer base {
+  * {
+    @apply border-border outline-border-focus/50;
+  }
+
+  html {
+    font-size: 16px;
+  }
+
+  body {
+    @apply bg-surface text-text-primary antialiased;
+    font-family: var(--font-sans);
+    font-size: 16px;
+    line-height: 1.65;
+    font-weight: 400;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-sans);
+    font-weight: 600;
+    color: inherit;
+    text-wrap: balance;
+    margin: 0;
+    letter-spacing: -0.025em;
+  }
+
+  h1 {
+    font-size: 2.25rem;
+    line-height: 1.1;
+  }
+
+  h2 {
+    font-size: 1.75rem;
+    line-height: 1.2;
+  }
+
+  h3 {
+    font-size: 1.375rem;
+    line-height: 1.25;
+  }
+
+  h4 {
+    font-size: 1.125rem;
+    line-height: 1.3;
+  }
+
+  h5 {
+    font-size: 1rem;
+    line-height: 1.5;
+    font-weight: 500;
+  }
+
+  h6 {
+    font-size: 0.875rem;
+    line-height: 1.5;
+    font-weight: 500;
+  }
+
+  :is(h1, h2, h3, h4, h5, h6):first-child {
+    margin-top: 0;
+  }
+
+  p {
+    margin-bottom: 0.5em;
+  }
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  code:not([data-theme]) {
+    font-family: var(--font-mono);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    @apply bg-brand-950 text-brand-300 rounded px-1.5 py-0.5;
+  }
+
+  ul:not(.prose ul),
+  ol:not(.prose ol) {
+    list-style: none;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  th,
+  td {
+    text-align: left;
+    padding: 0.25rem 0.75rem;
+  }
+
+  th:first-child,
+  td:first-child {
+    padding-left: 0;
+  }
+
+  th:last-child,
+  td:last-child {
+    padding-right: 0;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-border-secondary);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-tertiary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}