master-components-react-ts 2.12.5 → 2.13.0

package/dist/Provider/Color.types.d.ts

@@ -1,23 +1,10 @@
-export type ThemeColors = {
-    colorPrimaryDefault?: string;
-    colorPrimaryBorder?: string;
-    colorPrimaryHover?: string;
-    colorPrimaryPressed?: string;
-    colorPrimaryDisabled?: string;
-    colorPrimaryText?: string;
-    colorPrimaryDisabledText?: string;
-    colorSecondaryDefault?: string;
-    colorSecondaryBorder?: string;
-    colorSecondaryHover?: string;
-    colorSecondaryPressed?: string;
-    colorSecondaryDisabled?: string;
-    colorSecondaryText?: string;
-    colorSecondaryDisabledText?: string;
-    colorTertiaryV2Default?: string;
-    colorTertiaryV2Border?: string;
-    colorTertiaryV2Hover?: string;
-    colorTertiaryV2Pressed?: string;
-    colorTertiaryV2Disabled?: string;
-    colorTertiaryV2Text?: string;
-    colorTertiaryV2DisabledText?: string;
-};
+import { variableMap } from './ColorVariables';
+/** Every themeable color key (camelCase). Maps to a CSS variable via `variableMap`. */
+export type ThemeColorKey = keyof typeof variableMap;
+/**
+ * A (partial) set of color overrides. Pass via the ThemeProvider `theme` prop,
+ * e.g. <ThemeProvider theme={{ light: {...}, dark: {...} }} />. Every key is
+ * optional — only the colors you set are overridden; the rest fall back to the
+ * built-in light/dark defaults.
+ */
+export type ThemeColors = Partial<Record<ThemeColorKey, string>>;

package/dist/Provider/ColorVariables.d.ts

@@ -21,4 +21,51 @@ export declare const variableMap: {
     readonly colorTertiaryV2Disabled: "--color-tertiaryV2-disabled";
     readonly colorTertiaryV2Text: "--color-tertiaryV2-text";
     readonly colorTertiaryV2DisabledText: "--color-tertiaryV2-disabled-text";
+    readonly colorTextPrimary: "--color-text-primary";
+    readonly colorTextSecondary: "--color-text-secondary";
+    readonly colorTextTertiary: "--color-text-tertiary";
+    readonly colorTextDisabled: "--color-text-disabled";
+    readonly colorTextPlaceholder: "--color-text-placeholder";
+    readonly colorTextInverse: "--color-text-inverse";
+    readonly colorTextLink: "--color-text-link";
+    readonly colorSurfacePage: "--color-surface-page";
+    readonly colorSurfaceCard: "--color-surface-card";
+    readonly colorSurfaceRaised: "--color-surface-raised";
+    readonly colorSurfaceSunken: "--color-surface-sunken";
+    readonly colorSurfaceHover: "--color-surface-hover";
+    readonly colorSurfacePressed: "--color-surface-pressed";
+    readonly colorSurfaceSelected: "--color-surface-selected";
+    readonly colorSurfaceDisabled: "--color-surface-disabled";
+    readonly colorSurfaceInput: "--color-surface-input";
+    readonly colorSurfaceInverse: "--color-surface-inverse";
+    readonly colorBorderDefault: "--color-border-default";
+    readonly colorBorderSubtle: "--color-border-subtle";
+    readonly colorBorderStrong: "--color-border-strong";
+    readonly colorBorderInverse: "--color-border-inverse";
+    readonly colorBorderFocus: "--color-border-focus";
+    readonly colorIconDefault: "--color-icon-default";
+    readonly colorIconMuted: "--color-icon-muted";
+    readonly colorIconInverse: "--color-icon-inverse";
+    readonly colorSuccessSolid: "--color-success-solid";
+    readonly colorSuccessSolidHover: "--color-success-solid-hover";
+    readonly colorSuccessSurface: "--color-success-surface";
+    readonly colorSuccessSurfaceHover: "--color-success-surface-hover";
+    readonly colorSuccessBorder: "--color-success-border";
+    readonly colorSuccessText: "--color-success-text";
+    readonly colorErrorSolid: "--color-error-solid";
+    readonly colorErrorSolidHover: "--color-error-solid-hover";
+    readonly colorErrorSurface: "--color-error-surface";
+    readonly colorErrorSurfaceHover: "--color-error-surface-hover";
+    readonly colorErrorBorder: "--color-error-border";
+    readonly colorErrorText: "--color-error-text";
+    readonly colorWarningSolid: "--color-warning-solid";
+    readonly colorWarningSolidHover: "--color-warning-solid-hover";
+    readonly colorWarningSurface: "--color-warning-surface";
+    readonly colorWarningBorder: "--color-warning-border";
+    readonly colorWarningText: "--color-warning-text";
+    readonly colorOverlayScrim: "--color-overlay-scrim";
+    readonly colorShadow: "--color-shadow";
+    readonly colorFocusRing: "--color-focus-ring";
+    readonly colorSkeletonBase: "--color-skeleton-base";
+    readonly colorSkeletonHighlight: "--color-skeleton-highlight";
 };

package/dist/Provider/ThemeProvider.d.ts

@@ -1,11 +1,27 @@
 import { ReactNode } from 'react';
 import { ThemeColors } from './Color.types';
+export type ThemeMode = 'light' | 'dark';
+/** Color overrides for each scheme. Every key is optional. */
+export type Theme = {
+    light?: ThemeColors;
+    dark?: ThemeColors;
+};
 export type ThemeProviderProps = {
     children: ReactNode;
-    theme?: ThemeColors;
+    /**
+     * Active color scheme. Sets `data-theme="<mode>"` on the <html> element and
+     * selects which set of overrides (theme.light / theme.dark) is applied.
+     * Defaults to `'light'`.
+     */
+    mode?: ThemeMode;
+    /**
+     * Color overrides for each scheme, e.g. `theme={{ light: {...}, dark: {...} }}`.
+     * Only the colors you set are overridden; the rest use the built-in defaults.
+     */
+    theme?: Theme;
 };
 declare const ThemeProvider: {
-    ({ children, theme }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
-    propKeys: readonly ["children", "theme"];
+    ({ children, mode, theme }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+    propKeys: readonly ["children", "mode", "theme"];
 };
 export default ThemeProvider;

package/dist/Provider/themeDefaults.d.ts

@@ -0,0 +1,22 @@
+import { ThemeColors } from './Color.types';
+/**
+ * Canonical LIGHT palette.
+ *
+ * These are the values the components fall back to when no CSS variable is set
+ * (i.e. the default, unstyled light appearance). They are exported for
+ * reference and so consumers can spread + tweak:
+ *
+ *   <ThemeProvider theme={{ light: { ...defaultLightTheme, colorPrimaryDefault: '#9406F3' } }} />
+ *
+ * Note: in the default light state these are NOT written to :root (the
+ * components' inline `var(--x, <literal>)` fallbacks provide them), so passing
+ * `defaultLightTheme` is only needed if you want to materialise/inspect them.
+ */
+export declare const defaultLightTheme: Required<ThemeColors>;
+/**
+ * Canonical DARK palette. Mirrors the [data-theme='dark'] block in
+ * src/styles/_ColorVariables.scss. Spread + tweak the same way:
+ *
+ *   <ThemeProvider mode="dark" theme={{ dark: { ...defaultDarkTheme, colorSurfacePage: '#000' } }} />
+ */
+export declare const defaultDarkTheme: Required<ThemeColors>;

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { default as ThemeProvider } from './Provider/ThemeProvider';
-export type { ThemeColors } from './Provider/Color.types';
-export type { ThemeProviderProps } from './Provider/ThemeProvider';
+export type { ThemeProviderProps, ThemeMode, Theme } from './Provider/ThemeProvider';
+export type { ThemeColors, ThemeColorKey } from './Provider/Color.types';
+export { variableMap } from './Provider/ColorVariables';
+export { defaultLightTheme, defaultDarkTheme } from './Provider/themeDefaults';
 export { default as MainButton } from './components/MainButton/MainButton';
 export type { MainButtonProps } from './components/MainButton/MainButton.types';
 export { default as FormInput } from './components/FormInput/FormInput';