@flipdish/ui-library 0.4.0 → 0.4.2

package/dist/providers/ThemeProvider/index.js

@@ -10,9 +10,9 @@ const useTheme = () => {
     return context;
 };
 /**
- * @summary app-wide light/dark/system theme provider that syncs the root dark-mode class
+ * @summary app-wide light/dark/system theme provider that syncs the root `data-theme` attribute
  */
-const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-theme', darkModeClass = 'dark-mode' }) => {
+const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-theme', themeModeOverride }) => {
     const [theme, setTheme] = useState(() => {
         if (typeof window !== 'undefined') {
             const savedTheme = localStorage.getItem(storageKey);
@@ -20,31 +20,37 @@ const ThemeProvider = ({ children, defaultTheme = 'system', storageKey = 'ui-the
         }
         return defaultTheme;
     });
+    const activeTheme = themeModeOverride ?? theme;
     useEffect(() => {
+        const resolveTheme = (value) => value === 'system' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : value;
         const applyTheme = () => {
             const root = window.document.documentElement;
-            if (theme === 'system') {
-                const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-                root.classList.toggle(darkModeClass, systemTheme === 'dark');
+            // The token layer + Tailwind `dark:` variant cascade on `[data-theme="dark"]`
+            // (see @flipdish/ui-tokens + src/styles.css), so drive that attribute here.
+            root.setAttribute('data-theme', resolveTheme(activeTheme));
+            // Controlled usage (e.g. Storybook) is ephemeral — don't touch persisted state.
+            if (themeModeOverride) {
+                return;
+            }
+            if (activeTheme === 'system') {
                 localStorage.removeItem(storageKey);
             }
             else {
-                root.classList.toggle(darkModeClass, theme === 'dark');
-                localStorage.setItem(storageKey, theme);
+                localStorage.setItem(storageKey, activeTheme);
             }
         };
         applyTheme();
         // Listen for system theme changes
         const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
         const handleChange = () => {
-            if (theme === 'system') {
+            if (activeTheme === 'system') {
                 applyTheme();
             }
         };
         mediaQuery.addEventListener('change', handleChange);
         return () => mediaQuery.removeEventListener('change', handleChange);
-    }, [theme, darkModeClass, storageKey]);
-    return jsx(ThemeContext.Provider, { value: { theme, setTheme }, children: children });
+    }, [activeTheme, themeModeOverride, storageKey]);
+    return jsx(ThemeContext.Provider, { value: { theme: activeTheme, setTheme }, children: children });
 };
 
 export { ThemeProvider, useTheme };

package/dist/providers/ThemeProvider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAUA,MAAM,YAAY,GAAG,aAAa,CAA+B,SAAS,CAAC;AAEpE,MAAM,QAAQ,GAAG,MAAuB;AAC7C,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC;AAExC,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,QAAA,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC;IACjE;AAEA,IAAA,OAAO,OAAO;AAChB;AAqBA;;AAEG;MACU,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,GAAG,QAAQ,EAAE,UAAU,GAAG,UAAU,EAAE,aAAa,GAAG,WAAW,EAAsB,KAAI;IAC/I,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,MAAK;AAC7C,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,CAAiB;YACnE,OAAO,UAAU,IAAI,YAAY;QACnC;AACA,QAAA,OAAO,YAAY;AACrB,IAAA,CAAC,CAAC;IAEF,SAAS,CAAC,MAAK;QACb,MAAM,UAAU,GAAG,MAAK;AACtB,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,eAAe;AAE5C,YAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;AACtB,gBAAA,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;gBAEhG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,KAAK,MAAM,CAAC;AAC5D,gBAAA,YAAY,CAAC,UAAU,CAAC,UAAU,CAAC;YACrC;iBAAO;gBACL,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,KAAK,MAAM,CAAC;AACtD,gBAAA,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC;YACzC;AACF,QAAA,CAAC;AAED,QAAA,UAAU,EAAE;;QAGZ,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC;QAEpE,MAAM,YAAY,GAAG,MAAK;AACxB,YAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;AACtB,gBAAA,UAAU,EAAE;YACd;AACF,QAAA,CAAC;AAED,QAAA,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QACnD,OAAO,MAAM,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;IACrE,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC;AAEtC,IAAA,OAAOA,GAAA,CAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAG,QAAQ,GAAyB;AAC9F;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/providers/ThemeProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAUA,MAAM,YAAY,GAAG,aAAa,CAA+B,SAAS,CAAC;AAEpE,MAAM,QAAQ,GAAG,MAAuB;AAC7C,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC;AAExC,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,QAAA,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC;IACjE;AAEA,IAAA,OAAO,OAAO;AAChB;AAqBA;;AAEG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,GAAG,QAAQ,EAAE,UAAU,GAAG,UAAU,EAAE,iBAAiB,EAAsB,KAAI;IACrI,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,MAAK;AAC7C,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,CAAiB;YACnE,OAAO,UAAU,IAAI,YAAY;QACnC;AACA,QAAA,OAAO,YAAY;AACrB,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,WAAW,GAAU,iBAAiB,IAAI,KAAK;IAErD,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,YAAY,GAAG,CAAC,KAAY,KAChC,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,IAAI,KAAK;QAE7G,MAAM,UAAU,GAAG,MAAK;AACtB,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,eAAe;;;YAI5C,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;;YAG1D,IAAI,iBAAiB,EAAE;gBACrB;YACF;AAEA,YAAA,IAAI,WAAW,KAAK,QAAQ,EAAE;AAC5B,gBAAA,YAAY,CAAC,UAAU,CAAC,UAAU,CAAC;YACrC;iBAAO;AACL,gBAAA,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,WAAW,CAAC;YAC/C;AACF,QAAA,CAAC;AAED,QAAA,UAAU,EAAE;;QAGZ,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC;QAEpE,MAAM,YAAY,GAAG,MAAK;AACxB,YAAA,IAAI,WAAW,KAAK,QAAQ,EAAE;AAC5B,gBAAA,UAAU,EAAE;YACd;AACF,QAAA,CAAC;AAED,QAAA,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QACnD,OAAO,MAAM,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;IACrE,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAC;AAEhD,IAAA,OAAOA,IAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAG,QAAQ,GAAyB;AAC3G;;;;"}

package/dist/styles.css

@@ -99,3 +99,128 @@
     -webkit-appearance: none;
   }
 }
+
+/* ============================================================
+   CodeSnippet — Shiki syntax-highlighting overrides
+   ============================================================ */
+
+.shiki,
+.shiki .line:not(.diff) {
+  /* biome-ignore lint/complexity/noImportantStyles: Required to override Shiki's own inline style attributes */
+  background-color: var(--color-bg-primary) !important;
+}
+
+/* Dark mode */
+.dark-mode .shiki,
+.dark-mode .shiki span {
+  /* biome-ignore lint/complexity/noImportantStyles: Required to override Shiki's own inline style attributes */
+  color: var(--shiki-dark) !important;
+}
+
+/* Diff line styles */
+.shiki code .line.diff {
+  position: relative;
+  display: inline-block;
+  width: calc(100% + 44px);
+  margin: 0 -24px 0 -20px;
+  padding: 0 24px 0 20px;
+
+  &::after {
+    left: 6px;
+    position: absolute;
+  }
+}
+.shiki code .line.diff.remove {
+  background-color: var(--color-utility-red-100);
+
+  &::after {
+    content: "-";
+    color: var(--color-utility-red-700);
+  }
+}
+.shiki code .line.diff.remove .highlighted-word {
+  padding: 1px;
+  margin: -1px;
+  border-radius: 3px;
+  background-color: var(--color-utility-red-300);
+  /* biome-ignore lint/complexity/noImportantStyles: Required to override Shiki's own inline style attributes */
+  color: var(--color-text-primary) !important;
+}
+
+.shiki code .line.diff.add {
+  background-color: var(--color-utility-green-100);
+
+  &::after {
+    content: "+";
+    color: var(--color-utility-green-700);
+  }
+}
+.shiki code .line.diff.add .highlighted-word {
+  padding: 1px;
+  margin: -1px;
+  border-radius: 3px;
+  background-color: var(--color-utility-green-300);
+  /* biome-ignore lint/complexity/noImportantStyles: Required to override Shiki's own inline style attributes */
+  color: var(--color-text-primary) !important;
+}
+
+/* Scrollbar */
+.shiki::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--color-alpha-white), transparent 85%);
+}
+.shiki::-webkit-scrollbar-track {
+  border-radius: 9999px;
+  background: transparent;
+}
+
+/* Line number styles */
+.line-numbers .shiki {
+  padding-left: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.line-numbers .shiki code {
+  counter-reset: step;
+  counter-increment: step 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.line-numbers .shiki code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  display: inline-block;
+  position: sticky;
+  left: 0;
+  color: var(--color-text-quaternary);
+  background-color: var(--color-bg-secondary);
+  border-right: 1px solid var(--color-border-secondary);
+  font-size: 14px;
+  font-weight: 700;
+  text-align: right;
+  width: 48px;
+  margin-right: 16px;
+  padding-right: 16px;
+}
+.line-numbers .shiki code .line:first-of-type::before {
+  padding-top: 16px;
+}
+.line-numbers .shiki code .line:last-of-type::before {
+  padding-bottom: 24px;
+}
+
+@media (min-width: 768px) {
+  .line-numbers .shiki code .line::before {
+    width: 49px;
+    margin-right: 20px;
+    padding-right: 16px;
+  }
+  .line-numbers .shiki code .line:first-of-type::before {
+    padding-top: 20px;
+  }
+  .line-numbers .shiki code .line:last-of-type::before {
+    padding-bottom: 20px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/ui-library",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
   "type": "module",
   "sideEffects": [