@texturehq/edges 1.28.1 → 1.28.2

package/dist/index.d.cts

@@ -6625,6 +6625,25 @@ interface BrandProviderProps {
      * These override the default Edges theme variables.
      */
     variables?: BrandVariables;
+    /**
+     * CSS variable overrides to apply when dark mode is active (`.theme-dark`).
+     * Uses the same cascade map as `variables` — overriding `--color-brand-primary`
+     * automatically cascades to derived tokens (action colors, link colors, etc.).
+     *
+     * When omitted, the dark mode theme falls back to Edges defaults.
+     * This is a non-breaking addition — existing consumers are unaffected.
+     *
+     * @example
+     * ```tsx
+     * <BrandProvider
+     *   variables={{ '--color-brand-primary': '#2563eb' }}
+     *   darkVariables={{ '--color-brand-primary': '#60a5fa' }}
+     * >
+     *   <App />
+     * </BrandProvider>
+     * ```
+     */
+    darkVariables?: BrandVariables;
     children: ReactNode;
 }
 /**
@@ -6635,19 +6654,29 @@ interface BrandProviderProps {
  * (like --color-brand-primary), this component automatically cascades
  * the override to derived semantic tokens (action colors, link colors, etc.).
  *
+ * Pass `darkVariables` to provide separate overrides for dark mode (`.theme-dark`).
+ * This is especially useful for ensuring accessible contrast ratios in both modes.
+ *
+ * Both `variables` and `darkVariables` are applied via stylesheet rules (not inline
+ * styles), so dark-mode rules correctly override light-mode rules in `.theme-dark`.
+ *
  * @example
  * ```tsx
  * <BrandProvider
  *   variables={{
- *     '--color-brand-primary': '#ff6600',
- *     '--color-brand-dark': '#cc5200',
+ *     '--color-brand-primary': '#2563eb',
+ *     '--color-brand-dark': '#1d4ed8',
+ *   }}
+ *   darkVariables={{
+ *     '--color-brand-primary': '#60a5fa',
+ *     '--color-brand-dark': '#93c5fd',
  *   }}
  * >
  *   <App />
  * </BrandProvider>
  * ```
  */
-declare function BrandProvider({ variables, children }: BrandProviderProps): react_jsx_runtime.JSX.Element;
+declare function BrandProvider({ variables, darkVariables, children }: BrandProviderProps): react_jsx_runtime.JSX.Element;
 
 type ColorMode = "system" | "light" | "dark";
 type ResolvedTheme = "light" | "dark";

package/dist/index.d.ts

@@ -6625,6 +6625,25 @@ interface BrandProviderProps {
      * These override the default Edges theme variables.
      */
     variables?: BrandVariables;
+    /**
+     * CSS variable overrides to apply when dark mode is active (`.theme-dark`).
+     * Uses the same cascade map as `variables` — overriding `--color-brand-primary`
+     * automatically cascades to derived tokens (action colors, link colors, etc.).
+     *
+     * When omitted, the dark mode theme falls back to Edges defaults.
+     * This is a non-breaking addition — existing consumers are unaffected.
+     *
+     * @example
+     * ```tsx
+     * <BrandProvider
+     *   variables={{ '--color-brand-primary': '#2563eb' }}
+     *   darkVariables={{ '--color-brand-primary': '#60a5fa' }}
+     * >
+     *   <App />
+     * </BrandProvider>
+     * ```
+     */
+    darkVariables?: BrandVariables;
     children: ReactNode;
 }
 /**
@@ -6635,19 +6654,29 @@ interface BrandProviderProps {
  * (like --color-brand-primary), this component automatically cascades
  * the override to derived semantic tokens (action colors, link colors, etc.).
  *
+ * Pass `darkVariables` to provide separate overrides for dark mode (`.theme-dark`).
+ * This is especially useful for ensuring accessible contrast ratios in both modes.
+ *
+ * Both `variables` and `darkVariables` are applied via stylesheet rules (not inline
+ * styles), so dark-mode rules correctly override light-mode rules in `.theme-dark`.
+ *
  * @example
  * ```tsx
  * <BrandProvider
  *   variables={{
- *     '--color-brand-primary': '#ff6600',
- *     '--color-brand-dark': '#cc5200',
+ *     '--color-brand-primary': '#2563eb',
+ *     '--color-brand-dark': '#1d4ed8',
+ *   }}
+ *   darkVariables={{
+ *     '--color-brand-primary': '#60a5fa',
+ *     '--color-brand-dark': '#93c5fd',
  *   }}
  * >
  *   <App />
  * </BrandProvider>
  * ```
  */
-declare function BrandProvider({ variables, children }: BrandProviderProps): react_jsx_runtime.JSX.Element;
+declare function BrandProvider({ variables, darkVariables, children }: BrandProviderProps): react_jsx_runtime.JSX.Element;
 
 type ColorMode = "system" | "light" | "dark";
 type ResolvedTheme = "light" | "dark";