@redis-ui/styles 11.0.2

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

@@ -0,0 +1,393 @@
+declare const tokens: {
+    color: {
+        transparent: string;
+        pink500: string;
+        gray100: string;
+        gray200: string;
+        gray300: string;
+        gray400: string;
+        gray500: string;
+        gray600: string;
+        gray700: string;
+        gray800: string;
+        blue50: string;
+        blue100: string;
+        blue200: string;
+        blue300: string;
+        blue400: string;
+        blue500: string;
+        blue600: string;
+        blue700: string;
+        teal100: string;
+        teal200: string;
+        teal300: string;
+        teal500: string;
+        teal600: string;
+        teal700: string;
+        teal800: string;
+        green100: string;
+        green200: string;
+        green300: string;
+        green500: string;
+        green600: string;
+        green700: string;
+        green800: string;
+        purple100: string;
+        purple200: string;
+        purple300: string;
+        purple500: string;
+        purple600: string;
+        purple700: string;
+        purple800: string;
+        red100: string;
+        red200: string;
+        red300: string;
+        red500: string;
+        red600: string;
+        red700: string;
+        red800: string;
+        orange100: string;
+        orange200: string;
+        orange300: string;
+        orange500: string;
+        orange600: string;
+        orange700: string;
+        orange800: string;
+        dark50: string;
+        dark100: string;
+        dark200: string;
+        dark300: string;
+        dark400: string;
+        dark500: string;
+        dark600: string;
+        dark700: string;
+        dark800: string;
+        dark900: string;
+        grayscale100: string;
+        grayscale200: string;
+        grayscale300: string;
+        grayscale400: string;
+        grayscale600: string;
+        grayscale700: string;
+        grayscale800: string;
+        dusk50: string;
+        dusk100: string;
+        dusk150: string;
+        dusk200: string;
+        dusk300: string;
+        dusk400: string;
+        dusk600: string;
+        dusk700: string;
+        dusk800: string;
+        azure100: string;
+        azure200: string;
+        azure300: string;
+        azure400: string;
+        azure500: string;
+        azure600: string;
+        azure700: string;
+        azure800: string;
+        azure900: string;
+        violet50: string;
+        violet200: string;
+        violet500: string;
+        bluesky50: string;
+        bluesky200: string;
+        bluesky500: string;
+        yellow50: string;
+        yellow200: string;
+        yellow500: string;
+    };
+    semantic: {
+        color: {
+            background: {
+                transparent: string;
+                neutral100: string;
+                neutral200: string;
+                neutral300: string;
+                neutral400: string;
+                neutral500: string;
+                neutral600: string;
+                neutral700: string;
+                neutral800: string;
+                primary50: string;
+                primary100: string;
+                primary200: string;
+                primary300: string;
+                primary400: string;
+                primary500: string;
+                primary600: string;
+                primary700: string;
+                success100: string;
+                success200: string;
+                success300: string;
+                success500: string;
+                success600: string;
+                success700: string;
+                success800: string;
+                notice100: string;
+                notice200: string;
+                notice300: string;
+                notice500: string;
+                notice600: string;
+                notice700: string;
+                notice800: string;
+                informative50: string;
+                informative100: string;
+                informative200: string;
+                informative300: string;
+                informative400: string;
+                informative500: string;
+                informative600: string;
+                informative700: string;
+                attention100: string;
+                attention200: string;
+                attention300: string;
+                attention500: string;
+                attention600: string;
+                attention700: string;
+                attention800: string;
+                danger100: string;
+                danger200: string;
+                danger300: string;
+                danger500: string;
+                danger600: string;
+                danger700: string;
+                danger800: string;
+            };
+            border: {
+                transparent: string;
+                neutral100: string;
+                neutral200: string;
+                neutral300: string;
+                neutral400: string;
+                neutral500: string;
+                neutral600: string;
+                neutral700: string;
+                neutral800: string;
+                primary50: string;
+                primary100: string;
+                primary200: string;
+                primary300: string;
+                primary400: string;
+                primary500: string;
+                primary600: string;
+                primary700: string;
+                success100: string;
+                success200: string;
+                success300: string;
+                success500: string;
+                success600: string;
+                success700: string;
+                success800: string;
+                notice100: string;
+                notice200: string;
+                notice300: string;
+                notice500: string;
+                notice600: string;
+                notice700: string;
+                notice800: string;
+                informative50: string;
+                informative100: string;
+                informative200: string;
+                informative300: string;
+                informative400: string;
+                informative500: string;
+                informative600: string;
+                informative700: string;
+                attention100: string;
+                attention200: string;
+                attention300: string;
+                attention500: string;
+                attention600: string;
+                attention700: string;
+                attention800: string;
+                danger100: string;
+                danger200: string;
+                danger300: string;
+                danger500: string;
+                danger600: string;
+                danger700: string;
+                danger800: string;
+            };
+            text: {
+                transparent: string;
+                neutral100: string;
+                neutral200: string;
+                neutral300: string;
+                neutral400: string;
+                neutral500: string;
+                neutral600: string;
+                neutral700: string;
+                neutral800: string;
+                primary50: string;
+                primary100: string;
+                primary200: string;
+                primary300: string;
+                primary400: string;
+                primary500: string;
+                primary600: string;
+                primary700: string;
+                success100: string;
+                success200: string;
+                success300: string;
+                success500: string;
+                success600: string;
+                success700: string;
+                success800: string;
+                notice100: string;
+                notice200: string;
+                notice300: string;
+                notice500: string;
+                notice600: string;
+                notice700: string;
+                notice800: string;
+                informative50: string;
+                informative100: string;
+                informative200: string;
+                informative300: string;
+                informative400: string;
+                informative500: string;
+                informative600: string;
+                informative700: string;
+                attention100: string;
+                attention200: string;
+                attention300: string;
+                attention500: string;
+                attention600: string;
+                attention700: string;
+                attention800: string;
+                danger100: string;
+                danger200: string;
+                danger300: string;
+                danger500: string;
+                danger600: string;
+                danger700: string;
+                danger800: string;
+            };
+            icon: {
+                transparent: string;
+                neutral100: string;
+                neutral200: string;
+                neutral300: string;
+                neutral400: string;
+                neutral500: string;
+                neutral600: string;
+                neutral700: string;
+                neutral800: string;
+                primary50: string;
+                primary100: string;
+                primary200: string;
+                primary300: string;
+                primary400: string;
+                primary500: string;
+                primary600: string;
+                primary700: string;
+                success100: string;
+                success200: string;
+                success300: string;
+                success500: string;
+                success600: string;
+                success700: string;
+                success800: string;
+                notice100: string;
+                notice200: string;
+                notice300: string;
+                notice500: string;
+                notice600: string;
+                notice700: string;
+                notice800: string;
+                informative50: string;
+                informative100: string;
+                informative200: string;
+                informative300: string;
+                informative400: string;
+                informative500: string;
+                informative600: string;
+                informative700: string;
+                attention100: string;
+                attention200: string;
+                attention300: string;
+                attention500: string;
+                attention600: string;
+                attention700: string;
+                attention800: string;
+                danger100: string;
+                danger200: string;
+                danger300: string;
+                danger500: string;
+                danger600: string;
+                danger700: string;
+                danger800: string;
+            };
+        };
+    };
+    core: {
+        space: {
+            space000: string;
+            space010: string;
+            space025: string;
+            space050: string;
+            space100: string;
+            space150: string;
+            space200: string;
+            space250: string;
+            space300: string;
+            space400: string;
+            space500: string;
+            space550: string;
+            space600: string;
+            space800: string;
+        };
+        shadow: {
+            shadow1: string;
+            shadow2: string;
+            shadow3: string;
+            shadow4: string;
+            shadow100: string;
+            shadow200: string;
+            shadow300: string;
+            shadow400: string;
+            shadow500: string;
+            shadow600: string;
+            shadow700: string;
+        };
+        zIndex: {
+            zIndex5: number;
+            zIndex9998: number;
+            zIndex9999: number;
+        };
+        font: {
+            fontFamily: {
+                regular: string;
+                sourceCodeProRegular: string;
+            };
+            fontSize: {
+                s8: string;
+                s10: string;
+                s12: string;
+                s13: string;
+                s14: string;
+                s15: string;
+                s16: string;
+                s18: string;
+                s20: string;
+                s22: string;
+                s24: string;
+                s26: string;
+                s27: string;
+                s28: string;
+                s32: string;
+                s40: string;
+                s44: string;
+                s52: string;
+            };
+        };
+        focus: {
+            margin: string;
+            size: string;
+            color: string;
+        };
+    };
+};
+export default tokens;

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

@@ -0,0 +1,11 @@
+import { ButtonStateColors, ButtonStatesTheme } from './button.types';
+type ActionIconButtonSizes = 'L' | 'M' | 'S' | 'XS';
+type ButtonVariants = 'primary' | 'secondary';
+export type ActionIconButtonTheme = {
+    sizes: Record<ActionIconButtonSizes, {
+        size: string;
+        iconSize: string;
+    }>;
+    variants: Record<ButtonVariants, ButtonStatesTheme<ButtonStateColors>>;
+};
+export {};

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

@@ -0,0 +1,15 @@
+export type AppBarVariant = 'default' | 'alert';
+export type VarientTheme = {
+    bgColor: string;
+    color: string;
+};
+export type AppBarTheme = {
+    height: string;
+    padding: string;
+    separator: string;
+    boxShadow: string;
+    group: {
+        gap: string;
+    };
+    variants: Record<AppBarVariant, VarientTheme>;
+};

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

@@ -0,0 +1,32 @@
+export type TriggerToggeleState = 'on' | 'off';
+export type TriggerState = 'normal' | 'hover';
+export type TriggerStateColors = {
+    bgColor: string;
+};
+export type TriggerTheme = {
+    height: string;
+    width: string;
+    borderRadius: string;
+    padding: string;
+    toggleStates: Record<TriggerToggeleState, Partial<Record<TriggerState, TriggerStateColors>>>;
+};
+export type ItemTheme = {
+    gap: string;
+    buttonSize: string;
+    iconSize: string;
+    width: string;
+    height: string;
+    label: {
+        color: string;
+    };
+};
+export type ContentTheme = {
+    margin: string;
+    gap: string;
+    width: string;
+};
+export type AppSeletionMenuTheme = {
+    trigger: TriggerTheme;
+    item: ItemTheme;
+    content: ContentTheme;
+};

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

@@ -0,0 +1,6 @@
+export type AutoCompleteTheme = {
+    dropdown: {
+        screenMarginHeight: string;
+        maxHeight: string;
+    };
+};

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

@@ -0,0 +1,16 @@
+export type BadgeVariant = 'white' | 'light' | 'default' | 'informative' | 'success' | 'notice' | 'danger' | 'attention' | 'disabled';
+export type BadgeVariantStyle = {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+    iconColor: string;
+};
+export type BadgeTheme = {
+    variants: Record<BadgeVariant, BadgeVariantStyle>;
+    height: string;
+    padding: string;
+    gap: string;
+    borderRadius: string;
+    borderWidth: string;
+    borderStyle: string;
+};

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

@@ -0,0 +1,13 @@
+type BannerSize = 'M' | 'S';
+export type BannerTheme = {
+    sizes: Record<BannerSize, {
+        gap: string;
+        actions: {
+            gap: string;
+        };
+    }>;
+    split: {
+        minWidth: string;
+    };
+};
+export {};

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

@@ -0,0 +1,25 @@
+export type BoxSelectionGroupChecked = 'default' | 'checked';
+export type BoxSelectionGroupStates = 'normal' | 'hover' | 'disabled';
+export type BoxSelectionGroupStateColorProperties = {
+    bgColor?: string;
+    borderColor?: string;
+    markerColor?: string;
+    opacity?: string;
+    textColor?: string;
+    iconColor?: string;
+};
+export type BoxSelectionGroupStateColors = Record<BoxSelectionGroupStates, BoxSelectionGroupStateColorProperties>;
+export type BoxSelectionGroupTheme = {
+    gap: string;
+    item: {
+        borderRadius: string;
+        borderWidth: string;
+        borderStyle: string;
+        markerSize: string;
+        iconSize: string;
+        states: Record<BoxSelectionGroupChecked, Partial<BoxSelectionGroupStateColors>>;
+    };
+    defaultItem: {
+        gap: string;
+    };
+};

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

@@ -0,0 +1,20 @@
+export type ButtonState = 'normal' | 'hover' | 'active' | 'disabled';
+export type ButtonStatesTheme<T extends Record<string, unknown>> = Partial<Record<ButtonState, Partial<T>>>;
+export type ButtonStateColors = {
+    bgColor: string;
+    textColor: string;
+    borderColor?: string;
+};
+type ButtonVariants = 'primary' | 'destructive' | 'secondary-fill' | 'secondary-invert' | 'secondary-ghost';
+type ButtonSizes = 'large' | 'medium' | 'small';
+export type ButtonTheme = {
+    gap: string;
+    sizes: Record<ButtonSizes, {
+        borderRadius: string;
+        padding: string;
+        height: string;
+        lineHeight: string;
+    }>;
+    variants: Record<ButtonVariants, ButtonStatesTheme<ButtonStateColors>>;
+};
+export {};

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

@@ -0,0 +1,20 @@
+import { ButtonStateColors, ButtonStatesTheme } from './button.types';
+type ButtonGroupStates = 'on' | 'off';
+export type ButtonGroupTheme = {
+    border: string;
+    borderRadius: string;
+    fontSize: string;
+    fontWeight: string;
+    fontStyle: string;
+    padding: string;
+    gap: string;
+    button: {
+        padding: string;
+        gap: string;
+        minWidth: string;
+        borderRadius: string;
+        border: string;
+        toggleStates: Record<ButtonGroupStates, ButtonStatesTheme<ButtonStateColors>>;
+    };
+};
+export {};

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

@@ -0,0 +1,7 @@
+export type CardTheme = {
+    width: string;
+    height: string;
+    bgColor: string;
+    shadow: string;
+    borderRadius: string;
+};

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

@@ -0,0 +1,19 @@
+import { ButtonStateColors, ButtonStatesTheme } from './button.types';
+type CheckboxVariants = 'primary' | 'danger';
+type CheckboxStates = 'on' | 'off';
+type CheckboxStateColors = ButtonStateColors & {
+    iconColor?: string;
+};
+export type CheckboxTheme = {
+    width: string;
+    height: string;
+    padding: string;
+    borderRadius: string;
+    borderWidth: string;
+    label: {
+        padding: string;
+        gap: string;
+    };
+    variants: Record<CheckboxVariants, Record<CheckboxStates, ButtonStatesTheme<CheckboxStateColors>>>;
+};
+export {};

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

@@ -0,0 +1,24 @@
+export type ChipSize = 'M' | 'S';
+export type ChipVariant = 'regular' | 'flat';
+export type ChipState = 'normal' | 'disabled';
+export type ChipTheme = {
+    sizes: Record<ChipSize, {
+        height: string;
+        padding: string;
+        borderRadius: string;
+        gap: string;
+    }>;
+    variant: Record<ChipVariant, Record<ChipState, {
+        bgColor: string;
+        textColor: string;
+    }>>;
+    closeButton: {
+        size: Record<ChipSize, {
+            size: string;
+            borderRadius: string;
+        }>;
+        variant: Record<ChipVariant, {
+            color: string;
+        }>;
+    };
+};

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

@@ -0,0 +1,14 @@
+import { ChipSize } from './chip.types';
+export type ChipListTheme = {
+    sizes: Record<ChipSize, {
+        gap: string;
+    }>;
+    popupList: {
+        maxHeight: string;
+        minWidth: string;
+        padding: string;
+        gap: string;
+        color: string;
+        disabledColor: string;
+    };
+};

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

@@ -0,0 +1,7 @@
+export type CountryFlagTheme = {
+    width: string;
+    height: string;
+    borderWidth: string;
+    borderColor: string;
+    borderRadius: string;
+};