@redis-ui/styles 11.0.2 → 12.3.1

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

@@ -0,0 +1,392 @@
+export type 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;
+        };
+    };
+};

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,6 +1,7 @@
 {
   "name": "@redis-ui/styles",
-  "version": "11.0.2",
+  "license": "UNLICENSED",
+  "version": "12.3.1",
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
@@ -27,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"
@@ -38,6 +40,7 @@
     "typescript": "^4.9.3"
   },
   "dependencies": {
-    "color-alpha": "^2.0.0"
+    "color-alpha": "^2.0.0",
+    "polished": "^4.3.1"
   }
 }

package/dist/themes/hooks/useTheme.d.ts

@@ -1,2 +0,0 @@
-import { Theme } from '../types/theme.types';
-export declare const useTheme: () => Theme;

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

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