@redis-ui/styles 13.3.2 → 14.5.3

package/dist/normalized-styles.css

@@ -16,10 +16,6 @@ svg:not([fill]) {
   fill: currentColor;
 }
 
-svg {
-  color: unset; /* fixes icons color attribute */
-}
-
 :focus {
   outline: 0;
 }

package/dist/themes/index.d.ts

@@ -0,0 +1,5 @@
+import { Theme, ThemePair } from './types';
+export * from './types';
+export declare const theme: Theme;
+export declare const themesDefault: ThemePair<Theme>;
+export declare const themesRebrand: ThemePair<Theme>;

package/dist/themes/themeDark/theme/components/layouts.d.ts

@@ -0,0 +1,3 @@
+import { LayoutsTheme } from '../../../types/theme/components/layouts.types';
+declare const theme: LayoutsTheme;
+export default theme;

package/dist/themes/themeDark/theme/components/midBar.d.ts

@@ -0,0 +1,3 @@
+import { MidBarTheme } from '../../../types/theme/components/midBar.types';
+declare const theme: MidBarTheme;
+export default theme;

package/dist/themes/themeDark/theme/components/themeModeSwitch.d.ts

@@ -0,0 +1,3 @@
+import { ThemeModeSwitchTheme } from '../../../types/theme/components/themeModeSwitch.types';
+declare const theme: ThemeModeSwitchTheme;
+export default theme;

package/dist/themes/themeDark2/theme/components/layouts.d.ts

@@ -0,0 +1,3 @@
+import { LayoutsTheme } from '../../../types/theme/components/layouts.types';
+declare const theme: LayoutsTheme;
+export default theme;

package/dist/themes/themeDark2/theme/components/midBar.d.ts

@@ -0,0 +1,3 @@
+import { MidBarTheme } from '../../../types/theme/components/midBar.types';
+declare const theme: MidBarTheme;
+export default theme;

package/dist/themes/themeDark2/theme/components/themeModeSwitch.d.ts

@@ -0,0 +1,3 @@
+import { ThemeModeSwitchTheme } from '../../../types/theme/components/themeModeSwitch.types';
+declare const theme: ThemeModeSwitchTheme;
+export default theme;

package/dist/themes/themeLight/theme/components/layouts.d.ts

@@ -0,0 +1,3 @@
+import { LayoutsTheme } from '../../../types/theme/components/layouts.types';
+declare const theme: LayoutsTheme;
+export default theme;

package/dist/themes/themeLight/theme/components/midBar.d.ts

@@ -0,0 +1,3 @@
+import { MidBarTheme } from '../../../types/theme/components/midBar.types';
+declare const theme: MidBarTheme;
+export default theme;

package/dist/themes/themeLight/theme/components/themeModeSwitch.d.ts

@@ -0,0 +1,3 @@
+import { ThemeModeSwitchTheme } from '../../../types/theme/components/themeModeSwitch.types';
+declare const theme: ThemeModeSwitchTheme;
+export default theme;

package/dist/themes/themeLight/tokens.d.ts

@@ -568,6 +568,17 @@ export declare const tokens: {
             zIndex9998: number;
             zIndex9999: number;
         };
+        icon: {
+            size: {
+                XS: string;
+                S: string;
+                M: string;
+                L: string;
+                XL: string;
+                'for-text': string;
+                'by-font': string;
+            };
+        };
         font: {
             fontFamily: {
                 regular: string;

package/dist/themes/themeLight2/theme/components/layouts.d.ts

@@ -0,0 +1,3 @@
+import { LayoutsTheme } from '../../../types/theme/components/layouts.types';
+declare const theme: LayoutsTheme;
+export default theme;

package/dist/themes/themeLight2/theme/components/midBar.d.ts

@@ -0,0 +1,3 @@
+import { MidBarTheme } from '../../../types/theme/components/midBar.types';
+declare const theme: MidBarTheme;
+export default theme;

package/dist/themes/themeLight2/theme/components/themeModeSwitch.d.ts

@@ -0,0 +1,3 @@
+import { ThemeModeSwitchTheme } from '../../../types/theme/components/themeModeSwitch.types';
+declare const theme: ThemeModeSwitchTheme;
+export default theme;

package/dist/themes/types/index.d.ts

@@ -1,2 +1,5 @@
 export type { Theme } from './theme/theme.types';
 export type { Tokens } from './theme/tokens.types';
+export * from './theme/themeCore.types';
+export * from './theme/components';
+export * from './theme/globals';

package/dist/themes/types/theme/components/index.d.ts

@@ -19,9 +19,11 @@ export * from './formField.types';
 export * from './iconButton.types';
 export * from './input.types';
 export * from './label.types';
+export * from './layouts.types';
 export * from './link.types';
 export * from './loader.types';
 export * from './menu.types';
+export * from './midBar.types';
 export * from './modal.types';
 export * from './moreInfoIcon.types';
 export * from './popover.types';
@@ -43,6 +45,7 @@ export * from './table.types';
 export * from './tableHeading.types';
 export * from './tabs.types';
 export * from './textButton.types';
+export * from './themeModeSwitch.types';
 export * from './toast.types';
 export * from './toggleButton.types';
 export * from './tooltip.types';

package/dist/themes/types/theme/components/input.types.d.ts

@@ -56,7 +56,9 @@ export type InputTheme = {
     };
     password: {
         padding: string;
-        fontSize: string;
+        fontFamily?: string;
+        fontSize?: string;
+        fontSizeAdjust?: string;
     };
     additionalText: {
         margin: string;

package/dist/themes/types/theme/components/layouts.types.d.ts

@@ -0,0 +1,14 @@
+type FlexGroupGapSize = 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL';
+type FlexDividerPaddingSize = 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL' | 'none';
+export type LayoutsTheme = {
+    flexGroup: {
+        gap: Record<FlexGroupGapSize, string>;
+    };
+    flexDivider: {
+        color: string;
+        size: string;
+        padding: Record<FlexDividerPaddingSize, string>;
+        spacing: Record<FlexDividerPaddingSize, string>;
+    };
+};
+export {};

package/dist/themes/types/theme/components/midBar.types.d.ts

@@ -0,0 +1,13 @@
+export type MidBarTheme = {
+    header: {
+        height: string;
+        paddingInline: string;
+        gap: string;
+        tabBar: {
+            gap: string;
+        };
+        group: {
+            gap: string;
+        };
+    };
+};

package/dist/themes/types/theme/components/table.types.d.ts

@@ -1,19 +1,65 @@
 export type TableTheme = {
     table: {
         tableContainer: {
+            borderRadius: string;
             backgroundColor: string;
             boxShadow: string;
         };
+        topBar: {
+            minHeight: string;
+            padding: string;
+            gap: string;
+            bgColor: string;
+            separator: {
+                color: string;
+                width: string;
+            };
+        };
+        bottomBar: {
+            minHeight: string;
+            padding: string;
+            gap: string;
+            bgColor: string;
+            separator: {
+                color: string;
+                width: string;
+            };
+        };
+        tableHeaderRow: {
+            minHeight: string;
+            bgColor: string;
+            separator: {
+                color: string;
+                width: string;
+            };
+        };
+        tableHeaderCell: {
+            padding: string;
+            color: string;
+            separator: {
+                color: string;
+                width: string;
+                blockPadding: string;
+            };
+        };
+        /** @deprecated use `tableHeaderCell.*` */
         tableTh: {
             color: string;
             borderRight: string;
         };
         tableBodyRow: {
+            /** @deprecated use `separator.*` */
             borderTop: string;
+            minHeight: string;
+            separator: {
+                color: string;
+                width: string;
+            };
             backgroundColor: string;
             hoverBoxShadow: string;
         };
         tableBodyCell: {
+            padding: string;
             color: string;
         };
     };

package/dist/themes/types/theme/components/textButton.types.d.ts

@@ -1,12 +1,18 @@
 import { ButtonStateColors, ButtonStatesTheme } from './button.types';
+type TextButtonLayout = 'block' | 'inline';
 type TextButtonVariants = 'primary' | 'destructive' | 'primary-inline' | 'destructive-inline';
+type TextButtonSizes = 'M';
 export type TextButtonTheme = {
-    gap: string;
-    height: string;
-    lineHeight: string;
+    layouts: Record<TextButtonLayout, {
+        sizes: Record<TextButtonSizes, {
+            borderRadius: string;
+            padding: string;
+            height: string;
+            lineHeight: string;
+            gap: string;
+        }>;
+    }>;
     variants: Record<TextButtonVariants, {
-        padding: string;
-        borderRadius: string;
         states: ButtonStatesTheme<ButtonStateColors>;
     }>;
 };

package/dist/themes/types/theme/components/themeModeSwitch.types.d.ts

@@ -0,0 +1,15 @@
+export type ThemeModeSwitchTheme = {
+    width: string;
+    height: string;
+    padding: string;
+    borderRadius: string;
+    borderWidth: string;
+    borderColor: string;
+    bgColor: string;
+    thumb: {
+        icon: string;
+        iconAspectRatio: string;
+        borderRadius: string;
+        bgColor: string;
+    };
+};

package/dist/themes/types/theme/theme.types.d.ts

@@ -1,8 +1,8 @@
 import { Tokens } from './tokens.types';
-import { ActionIconButtonTheme, AppBarTheme, AppSelectionMenuTheme, AutoCompleteTheme, BadgeTheme, BannerTheme, BoxSelectionGroupTheme, ButtonGroupTheme, ButtonTheme, CardTheme, CheckboxTheme, ChipListTheme, ChipTheme, CountryFlagTheme, DatePickerTheme, DrawerTheme, FiltersTheme, FormFieldTheme, IconButtonTheme, InputTheme, LabelTheme, LinkTheme, LoaderTheme, MenuTheme, ModalTheme, MoreInfoIconTheme, PopoverTheme, PopupCardTheme, ProfileIconTheme, ProgressBarTheme, RadioTheme, SearchBarTheme, SectionTheme, SelectTheme, SemanticButtonTheme, SemanticContainerTheme, SemanticIconTheme, SideBarTheme, SkeletonTheme, StepperTheme, SwitchTheme, TableHeadingTheme, TableTheme, TabsTheme, TextButtonTheme, ToastTheme, ToggleButtonTheme, TooltipTheme, TreeViewTheme, TypoTheme, WindowBarTheme } from './components';
+import { ActionIconButtonTheme, AppBarTheme, AppSelectionMenuTheme, AutoCompleteTheme, BadgeTheme, BannerTheme, BoxSelectionGroupTheme, ButtonGroupTheme, ButtonTheme, CardTheme, CheckboxTheme, ChipListTheme, ChipTheme, CountryFlagTheme, DatePickerTheme, DrawerTheme, FiltersTheme, FormFieldTheme, IconButtonTheme, InputTheme, LabelTheme, LayoutsTheme, LinkTheme, LoaderTheme, MenuTheme, MidBarTheme, ModalTheme, MoreInfoIconTheme, PopoverTheme, PopupCardTheme, ProfileIconTheme, ProgressBarTheme, RadioTheme, SearchBarTheme, SectionTheme, SelectTheme, SemanticButtonTheme, SemanticContainerTheme, SemanticIconTheme, SideBarTheme, SkeletonTheme, StepperTheme, SwitchTheme, TableHeadingTheme, TableTheme, TabsTheme, TextButtonTheme, ThemeModeSwitchTheme, ToastTheme, ToggleButtonTheme, TooltipTheme, TreeViewTheme, TypoTheme, WindowBarTheme } from './components';
 import { BodyTheme, ScrollbarTheme } from './globals';
-export interface Theme extends Tokens {
-    name: string;
+import { ThemeCore } from './themeCore.types';
+export interface Theme extends ThemeCore, Tokens {
     components: {
         actionIconButton: ActionIconButtonTheme;
         appBar: AppBarTheme;
@@ -25,9 +25,11 @@ export interface Theme extends Tokens {
         iconButton: IconButtonTheme;
         input: InputTheme;
         label: LabelTheme;
+        layouts: LayoutsTheme;
         link: LinkTheme;
         loader: LoaderTheme;
         menu: MenuTheme;
+        midBar: MidBarTheme;
         modal: ModalTheme;
         moreInfoIcon: MoreInfoIconTheme;
         popover: PopoverTheme;
@@ -49,6 +51,7 @@ export interface Theme extends Tokens {
         tableHeading: TableHeadingTheme;
         tabs: TabsTheme;
         textButton: TextButtonTheme;
+        themeModeSwitch: ThemeModeSwitchTheme;
         toast: ToastTheme;
         toggleButton: ToggleButtonTheme;
         tooltip: TooltipTheme;

package/dist/themes/types/theme/themeCore.types.d.ts

@@ -0,0 +1,9 @@
+/** Theme type that can be applied to an application */
+export type ThemeMode = 'light' | 'dark';
+/** Core Theme properties */
+export type ThemeCore = {
+    name: string;
+    mode: ThemeMode;
+};
+/** Light-Dark theme pair */
+export type ThemePair<T extends ThemeCore = ThemeCore> = Record<ThemeMode, T>;

package/dist/utils.d.ts

@@ -1,3 +1,4 @@
+import type { ThemeMode, Theme, ThemeCore, ThemePair } from './themes';
 /**
  * This function is intended to be used only within CSS and not for plain color manipulations.
  * Opacity needs to be between 0 and 1.
@@ -10,3 +11,37 @@ export declare const withOpacity: (cssColor: string, opacity: number) => string;
  * @param base   Any CSS color string.
  */
 export declare function withContrast(base: string): string;
+/** Groups themes from pairs by mode */
+export declare const groupThemesByMode: <T extends Theme>(themePairs: ThemePair<T>[]) => {
+    light: Theme[];
+    dark: Theme[];
+};
+/** Makes flat array of themes from pairs */
+export declare const getThemesFlatList: <T extends ThemeCore>(themePairs: ThemePair<T>[]) => T[];
+/** converts flat theme array to the map by name with theme pair as value */
+export declare const groupFlatByNameAndMode: <T extends ThemeCore>(themeList: T[]) => Record<string, ThemePair<T>>;
+/** converts flat theme array to the map by mode with theme list as value */
+export declare const groupFlatByMode: <T extends ThemeCore>(themeList: T[]) => Record<ThemeMode, T[]>;
+export type ThemesForSearch<T extends ThemeCore> = {
+    groupedByName: Record<string, ThemePair<T>>;
+    groupedByMode: Record<ThemeMode, T[]>;
+};
+/**
+ * Prepares theme list for quick search by existing parameters.
+ * Converts flat list to maps by name and mode for quick access.
+ *
+ * Place default themes first in list. they will be taken if nothing is found.
+ * @param themeList - flat array of themes
+ */
+export declare const prepareThemesForSearch: <T extends ThemeCore>(themeList: T[]) => ThemesForSearch<T>;
+/**
+ * Quick search for most suitable theme by optional theme name and/or mode.
+ * If not found, use your default one.
+ *
+ * Receives pre-grouped theme lists. Build them statically (out of components and hooks)
+ * from flat array of your themes, using `prepareThemesForSearch`
+ * @param themes - use `prepareThemesForSearch` to build this (build it statically)
+ * @param themeName - theme name, if exists
+ * @param themeMode - theme mode, if exists
+ */
+export declare const findThemeByNameAndMode: <T extends ThemeCore>(themes: ThemesForSearch<T>, themeName: string | undefined, themeMode: ThemeMode | undefined) => T | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/styles",
   "license": "UNLICENSED",
-  "version": "13.3.2",
+  "version": "14.5.3",
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },

package/dist/hooks/ThemeSwitch/SwitchableThemeProvider.d.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-import { Theme } from '../../themes/types';
-import { UseThemeSelectorParams } from './useThemeSelector';
-import { UseStorageParams } from './useStorage';
-export interface ThemeSwitchContextParams extends Pick<UseThemeSelectorParams, 'systemThemeName' | 'lightThemeName' | 'darkThemeName'> {
-    selectedTheme: string;
-    setSelectedTheme: (themeName: string) => void;
-}
-interface ThemeSwitchProviderProps extends ThemeSwitchContextParams {
-    children: ReactNode;
-}
-export declare const ThemeSwitchProvider: ({ children, selectedTheme, setSelectedTheme, lightThemeName, darkThemeName, systemThemeName }: ThemeSwitchProviderProps) => import("react/jsx-runtime").JSX.Element;
-export declare const useThemeSwitchContext: () => ThemeSwitchContextParams;
-interface SwitchableThemeProviderProps extends Pick<UseThemeSelectorParams, 'systemThemeName' | 'initialThemeName'>, Pick<UseStorageParams, 'storageKey'> {
-    children: ReactNode;
-    lightTheme: Theme;
-    darkTheme: Theme;
-}
-export declare const SwitchableThemeProvider: ({ children, lightTheme, darkTheme, systemThemeName, initialThemeName, storageKey }: SwitchableThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/hooks/ThemeSwitch/index.d.ts

@@ -1,3 +0,0 @@
-export * from './useThemeSelector';
-export * from './useStorage';
-export * from './SwitchableThemeProvider';

package/dist/hooks/ThemeSwitch/useStorage.d.ts

@@ -1,9 +0,0 @@
-export type UseStorageParams = {
-    storageKey: string;
-    value: string;
-    onChange: (value: string) => void;
-};
-export declare const useStorage: ({ value, ...params }: UseStorageParams) => {
-    readFromStorage: () => string;
-    saveToStorage: (newValue: string) => void;
-};

package/dist/hooks/ThemeSwitch/useThemeSelector.d.ts

@@ -1,26 +0,0 @@
-export type UseThemeSelectorParams = {
-    /**
-     * One of valid theme names, defined in other parameters: light/dark/system.
-     */
-    initialThemeName?: string;
-    /**
-     * Name of the light theme
-     */
-    lightThemeName: string;
-    /**
-     * Name of the dark theme
-     */
-    darkThemeName: string;
-    /**
-     * Optional name of the system theme.
-     * This can be any string, just to define the value for the storage and theme identifier.
-     * If it is defined, then it can be used as initialThemeName and can be selected by user.
-     * If system theme is selected, the current browser theme will be monitored and applied to the app.
-     */
-    systemThemeName?: string;
-};
-export declare const useThemeSelector: (params: UseThemeSelectorParams) => {
-    setSelectedTheme: (newSelection: string) => boolean;
-    selectedTheme: string;
-    currentTheme: string;
-};