@redis-ui/styles 11.4.0 → 12.3.1

package/dist/normalized-styles.css

@@ -4,14 +4,8 @@
   box-sizing: border-box;
 }
 
-[class*='RedisUI'] h1,
-[class*='RedisUI'] h2,
-[class*='RedisUI'] h3,
-[class*='RedisUI'] h4,
-[class*='RedisUI'] h5,
-[class*='RedisUI'] h6 {
-  margin-bottom: 0;
-  margin-top: 0;
+:where([class*='RedisUI']) :is(h1, h2, h3, h4, h5, h6, p, pre) {
+  margin-block: 0;
 }
 
 [class*='RedisUI'] svg {
@@ -21,3 +15,19 @@
 svg:not([fill]) {
   fill: currentColor;
 }
+
+svg {
+  color: unset; /* fixes icons color attribute */
+}
+
+:focus {
+  outline: 0;
+}
+
+:root {
+  font-size: 62.5%;
+}
+
+body{
+  min-height: 100vh;
+}

package/dist/themes/themeDark/theme/globals/body.d.ts

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

package/dist/themes/themeDark/theme/globals/scrollbar.d.ts

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

package/dist/themes/themeLight/theme/globals/body.d.ts

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

package/dist/themes/themeLight/theme/globals/scrollbar.d.ts

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

package/dist/themes/themeOld/globals/body.d.ts

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

package/dist/themes/themeOld/globals/scrollbar.d.ts

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

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

@@ -6,6 +6,7 @@ export type LinkTheme = {
         sizes: Record<LinkSize, {
             padding: string;
             borderRadius: string;
+            minHeight?: string;
             gap: string;
         }>;
         states: ButtonStatesTheme<ButtonStateColors>;

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

@@ -14,7 +14,11 @@ export type MenuTheme = {
         arrow: {
             width: string;
             height: string;
-            bgColor: string;
+            shadow: string;
+            /**
+             * @deprecated ignored, dropDown.bgColor is used instead
+             */
+            bgColor?: string;
         };
     };
     separator: {

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

@@ -1,5 +1,8 @@
 export type TreeViewTheme = {
-    bgColor: string;
+    /**
+     * @deprecated bgColor ignored, use container background, or override styles directly
+     */
+    bgColor?: string;
     levelOffset: string;
     item: {
         inlinePadding: string;

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

@@ -0,0 +1,7 @@
+export type BodyTheme = {
+    bgColor: string;
+    textColor: string;
+    fontFamily: string;
+    fontSize: string;
+    lineHeight: string;
+};

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

@@ -0,0 +1,2 @@
+export * from './body.types';
+export * from './scrollbar.types';

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

@@ -0,0 +1,10 @@
+export type ScrollbarTheme = {
+    width: string;
+    height: string;
+    bgColor: string;
+    padding: string;
+    thumb: {
+        bgColor: string;
+        borderRadius: string;
+    };
+};

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

@@ -1,5 +1,6 @@
 import { Tokens } from './tokens.types';
 import { ActionIconButtonTheme, AppBarTheme, AppSeletionMenuTheme, AutoCompleteTheme, BadgeTheme, BannerTheme, BoxSelectionGroupTheme, ButtonGroupTheme, ButtonTheme, CardTheme, CheckboxTheme, ChipListTheme, ChipTheme, CountryFlagTheme, DatePickerTheme, DrawerTheme, FiltersTheme, FormFieldTheme, IconButtonTheme, InputTheme, LabelTheme, LinkTheme, LoaderTheme, MenuTheme, ModalTheme, 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 { BodyTheme, ScrollbarTheme } from './globals';
 export interface Theme extends Tokens {
     name: string;
     components: {
@@ -54,4 +55,8 @@ export interface Theme extends Tokens {
         typography: TypoTheme;
         windowBar: WindowBarTheme;
     };
+    globals: {
+        body: BodyTheme;
+        scrollbar: ScrollbarTheme;
+    };
 }

package/dist/utils.d.ts

@@ -3,3 +3,10 @@
  * Opacity needs to be between 0 and 1.
  */
 export declare const withOpacity: (cssColor: string, opacity: number) => string;
+/**
+ * Returns a lighter or darker variant of `base`
+ * that preserves hue & saturation.
+ *
+ * @param base   Any CSS color string.
+ */
+export declare function withContrast(base: string): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/styles",
   "license": "UNLICENSED",
-  "version": "11.4.0",
+  "version": "12.3.1",
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
@@ -28,6 +28,7 @@
     "lint": "eslint ./ --color --max-warnings=0"
   },
   "peerDependencies": {
+    "modern-normalize": "^3.0.1",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^5.0.0"
@@ -39,6 +40,7 @@
     "typescript": "^4.9.3"
   },
   "dependencies": {
-    "color-alpha": "^2.0.0"
+    "color-alpha": "^2.0.0",
+    "polished": "^4.3.1"
   }
 }