@redis-ui/styles 11.0.2

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

@@ -0,0 +1,79 @@
+import { PartialDeep } from 'type-fest';
+type SideBarItemState = 'normal' | 'hover' | 'active' | 'activeHover';
+export type SideBarStateTheme = {
+    bgColor: string;
+    shadow: string;
+    width: string;
+    borderRight: string;
+    divider: {
+        color: string;
+        thickness: string;
+        blockMargin: string;
+        sidePadding: string;
+    };
+    button: {
+        height: string;
+        width: string;
+        tooltip: {
+            textColor: string;
+        };
+    };
+    collapseButton: {
+        size: string;
+        borderRadius: string;
+        borderCollapsed: string;
+        borderExpanded: string;
+        filterShadow: string;
+        iconColor: string;
+        rightCollapsed: string;
+        rightExpanded: string;
+    };
+    header: {
+        height: string;
+        dividerColor: string;
+        margin: string;
+    };
+    footer: {
+        dividerColor: string;
+        link: {
+            textColor: string;
+        };
+        text: {
+            textColor: string;
+        };
+        meta: {
+            padding: string;
+            visibility: string;
+            whiteSpace: string;
+        };
+    };
+    item: {
+        margin: string;
+        height: string;
+        padding: string;
+        gap: string;
+        borderRadius: string;
+        itemWithButtonOffset: string;
+        states: Record<SideBarItemState, {
+            bgColor?: string;
+            textColor?: string;
+        }>;
+        tooltip: {
+            textColor: string;
+        };
+        button: {
+            bgColor: string;
+            borderColor: string;
+            borderSize: string;
+            textColor: string;
+        };
+    };
+    logo: {
+        offset: string;
+    };
+};
+export type SideBarTheme = {
+    collapsed: SideBarStateTheme;
+    expanded: PartialDeep<SideBarStateTheme>;
+};
+export {};

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

@@ -0,0 +1,24 @@
+type Shade = 'light' | 'dark';
+export type SkeletonTheme = {
+    card: {
+        gap: string;
+        bgColor: string;
+        padding: string;
+        borderRadius: string;
+        shadow: string;
+    };
+    shades: Record<Shade, {
+        baseColor: string;
+        highlightColor: string;
+    }>;
+    circle: {
+        gap: string;
+    };
+    square: {
+        gap: string;
+    };
+    grid: {
+        gap: string;
+    };
+};
+export {};

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

@@ -0,0 +1,23 @@
+type StepState = 'completed' | 'idle' | 'focused';
+export type StepperTheme = {
+    gap: string;
+    step: {
+        gap: string;
+        states: Record<StepState, {
+            indicator: {
+                bgColor: string;
+                iconColor: string;
+                padding?: string;
+                borderRadius: string;
+            };
+            label: {
+                textColor: string;
+                letterSpacing: string;
+            };
+        }>;
+        indicator: {
+            size: string;
+        };
+    };
+};
+export {};

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

@@ -0,0 +1,20 @@
+import { ButtonState, ButtonStateColors } from './button.types';
+type SwitchToggleStates = 'on' | 'off';
+export type SwitchStates = ButtonState | 'readonly';
+export type SwitchStatesTheme<T extends Record<string, unknown>> = Partial<Record<SwitchStates, Partial<T>>>;
+type SwitchStateColors = ButtonStateColors & {
+    thumbColor?: string;
+};
+export type SwitchTheme = {
+    width: string;
+    height: string;
+    padding: string;
+    borderRadius: string;
+    borderWidth: string;
+    gap: string;
+    thumb: {
+        borderRadius: string;
+    };
+    toggleStates: Record<SwitchToggleStates, SwitchStatesTheme<SwitchStateColors>>;
+};
+export {};

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

@@ -0,0 +1,46 @@
+export type TableTheme = {
+    table: {
+        tableContainer: {
+            backgroundColor: string;
+            boxShadow: string;
+        };
+        tableTh: {
+            color: string;
+            borderRight: string;
+        };
+        tableBodyRow: {
+            borderTop: string;
+            backgroundColor: string;
+            hoverBoxShadow: string;
+        };
+        tableBodyCell: {
+            color: string;
+        };
+    };
+    components: {
+        tablePagination: {
+            paginationIconButton: {
+                enabledColor: string;
+                disabledColor: string;
+            };
+            paginationRow: {
+                borderTop: string;
+            };
+            countInfoText: {
+                color: string;
+            };
+            itemPerPageText: {
+                color: string;
+            };
+            paginationIndexText: {
+                color: string;
+            };
+            pageLabelText: {
+                color: string;
+            };
+            totalPagesText: {
+                color: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,19 @@
+export type TableHeadingTheme = {
+    bgColor: string;
+    gap: string;
+    padding: string;
+    separator: {
+        height: string;
+        width: string;
+        color: string;
+    };
+    searchInput: {
+        width: string;
+        states: Record<'normal' | 'hover', {
+            borderColor: string;
+        }>;
+    };
+    actionsBar: {
+        gap: string;
+    };
+};

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

@@ -0,0 +1,35 @@
+import { SetRequired } from 'type-fest';
+type TabVariant = 'default' | 'sub';
+type TabState = 'normal' | 'hover' | 'focus' | 'active' | 'disabled';
+export type TabsTheme = {
+    variants: SetRequired<Partial<Record<TabVariant, {
+        gap: string;
+        tabsLine: {
+            color: string;
+            size: string;
+        };
+        tab: {
+            states: Partial<Record<TabState, {
+                padding?: string;
+                bgColor?: string;
+                textColor?: string;
+                borderColor?: string;
+                borderWidth?: string;
+                borderRadius?: string;
+                fontWeight?: number;
+                fontSize?: string;
+                letterSpacing?: string;
+            }>>;
+        };
+        tabMarker: {
+            states: Partial<Record<TabState, {
+                color?: string;
+                size?: string;
+                inset?: string;
+                borderRadius?: string;
+                display?: string;
+            }>>;
+        };
+    }>>, 'default'>;
+};
+export {};

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

@@ -0,0 +1,13 @@
+import { ButtonStateColors, ButtonStatesTheme } from './button.types';
+type TextButtonVariants = 'primary' | 'destructive' | 'primary-inline' | 'destructive-inline';
+export type TextButtonTheme = {
+    gap: string;
+    height: string;
+    lineHeight: string;
+    variants: Record<TextButtonVariants, {
+        padding: string;
+        borderRadius: string;
+        states: ButtonStatesTheme<ButtonStateColors>;
+    }>;
+};
+export {};

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

@@ -0,0 +1,13 @@
+export type ToastTheme = {
+    width: string;
+    padding: string;
+    shadow: string;
+    gap: string;
+    actions: {
+        gap: string;
+        inlineMargin: string;
+    };
+    toaster: {
+        gap: string;
+    };
+};

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

@@ -0,0 +1,20 @@
+import { ButtonStateColors, ButtonStatesTheme } from './button.types';
+type ToggleButtonStates = 'on' | 'off';
+export type ToggleButtonTheme = {
+    gap: string;
+    height: string;
+    lineHeight: string;
+    padding: string;
+    borderRadius: string;
+    toggleStates: Record<ToggleButtonStates, ButtonStatesTheme<ButtonStateColors>>;
+    counter: {
+        bgColor: string;
+        textColor: string;
+        disabledOpacity: string;
+        padding: string;
+        height: string;
+        minWidth: string;
+        borderRadius: string;
+    };
+};
+export {};

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

@@ -0,0 +1,15 @@
+export type TooltipTheme = {
+    textColor: string;
+    bgColor: string;
+    shadow: string;
+    borderRadius: string;
+    minWidth: string;
+    maxWidth: string;
+    blockPadding: string;
+    inlinePadding: string;
+    arrow: {
+        width: string;
+        height: string;
+        shadow: string;
+    };
+};

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

@@ -0,0 +1,15 @@
+export type TreeViewTheme = {
+    bgColor: string;
+    levelOffset: string;
+    item: {
+        inlinePadding: string;
+        blockPadding: string;
+        checkboxGap: string;
+        selectedBgColor: string;
+        height: string;
+    };
+    arrow: {
+        iconColor: string;
+        gap: string;
+    };
+};

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

@@ -0,0 +1,26 @@
+export type HeadingSize = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
+export type BodySize = 'XL' | 'L' | 'M' | 'S' | 'XS';
+export type BodyVariant = 'regular' | 'semiBold' | 'italic';
+export type CodeSize = 'L' | 'M' | 'S';
+export type CodeVariant = 'regular' | 'semiBold';
+export type TypoTheme = {
+    heading: {
+        fontFamily: string;
+        sizes: Record<HeadingSize, {
+            fontSize: string;
+            fontWeight: string;
+            margin?: string;
+        }>;
+    };
+    body: {
+        fontFamily: string;
+        fontSizes: Record<BodySize, string>;
+        fontWeight: Record<BodyVariant, string>;
+        fontStyle: Record<BodyVariant, string>;
+    };
+    code: {
+        fontFamily: string;
+        fontSizes: Record<CodeSize, string>;
+        fontWeight: Record<CodeVariant, string>;
+    };
+};

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

@@ -0,0 +1,13 @@
+export type WindowBarVariant = 'white' | 'light' | 'default' | 'informative' | 'success' | 'notice' | 'danger' | 'attention' | 'disabled';
+export type WindowBarVariantStyle = {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+};
+export type WindowBarTheme = {
+    gap: string;
+    header: {
+        gap: string;
+    };
+    variants: Record<WindowBarVariant, WindowBarVariantStyle>;
+};

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

@@ -0,0 +1,50 @@
+export * from './components/actionIconButton.types';
+export * from './components/appBar.types';
+export * from './components/appSelectionMenu.types';
+export * from './components/autoComplete.types';
+export * from './components/badge.types';
+export * from './components/banner.types';
+export * from './components/boxSelectionGroup.types';
+export * from './components/button.types';
+export * from './components/buttonGroup.types';
+export * from './components/card.types';
+export * from './components/checkbox.types';
+export * from './components/chip.types';
+export * from './components/chipList.types';
+export * from './components/countryFlag.types';
+export * from './components/datePicker.types';
+export * from './components/drawer.types';
+export * from './components/filters.types';
+export * from './components/formField.types';
+export * from './components/iconButton.types';
+export * from './components/input.types';
+export * from './components/label.types';
+export * from './components/link.types';
+export * from './components/loader.types';
+export * from './components/menu.types';
+export * from './components/modal.types';
+export * from './components/popover.types';
+export * from './components/popupCard.types';
+export * from './components/profileIcon.types';
+export * from './components/progressBar.types';
+export * from './components/radio.types';
+export * from './components/searchBar.types';
+export * from './components/section.types';
+export * from './components/select.types';
+export * from './components/semanticButton.types';
+export * from './components/semanticContainer.types';
+export * from './components/semanticIcon.types';
+export * from './components/sideBar.types';
+export * from './components/skeleton.types';
+export * from './components/stepper.types';
+export * from './components/switch.types';
+export * from './components/table.types';
+export * from './components/tableHeading.types';
+export * from './components/tabs.types';
+export * from './components/textButton.types';
+export * from './components/toast.types';
+export * from './components/toggleButton.types';
+export * from './components/tooltip.types';
+export * from './components/treeView.types';
+export * from './components/typography.types';
+export * from './components/windowBar.types';

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

@@ -0,0 +1,4 @@
+import { theme } from '../themeOld/theme';
+import tokens from '../themeOld/tokens';
+export type Tokens = typeof tokens;
+export type Theme = typeof theme;

package/dist/utils.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This function is intended to be used only within CSS and not for plain color manipulations.
+ * Opacity needs to be between 0 and 1.
+ */
+export declare const withOpacity: (cssColor: string, opacity: number) => string;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@redis-ui/styles",
+  "version": "11.0.2",
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
+  "repository": "git@github.com:redislabsdev/redis-ui.git",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./fonts.css": "./dist/fonts.css",
+    "./normalized-styles.css": "./dist/normalized-styles.css"
+  },
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "transform": "style-dictionary build --config src/style-dictionary.config.cjs && npm run lint -- --fix src/tokens.ts",
+    "build": "vite build",
+    "deploy": "node ../../scripts/deploy.js",
+    "lint": "eslint ./ --color --max-warnings=0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "styled-components": "^5.0.0"
+  },
+  "devDependencies": {
+    "@redislabsdev/eslint-config-redis-ui": "^2.0.0",
+    "style-dictionary": "^3.7.2",
+    "type-fest": "^3.13.1",
+    "typescript": "^4.9.3"
+  },
+  "dependencies": {
+    "color-alpha": "^2.0.0"
+  }
+}