@redis-ui/styles 11.0.2 → 11.4.0

package/dist/index.d.ts

@@ -1,8 +1,9 @@
-export { theme } from './themes/themeOld/theme';
+export { theme as themeOld } from './themes/themeOld/theme';
+export { theme } from './themes/themeLight/theme';
 export { theme as themeLight } from './themes/themeLight/theme';
 export { theme as themeDark } from './themes/themeDark/theme';
-export * from './themes/types/theme.types';
-export * from './themes/types/theme/theme.types';
+export * from './themes/types';
+export * from './themes/types/theme/components';
 export * from './themes/hooks/useTheme';
 export * from './utils';
 export * from './focus-indicator';

package/dist/index.js

@@ -2687,6 +2687,10 @@ const m = (l, p) => kr(l, p), yr = {
     gap: "0.4rem"
   }
 }, ro = {
+  colors: {
+    primary: e.semantic.color.text.neutral800,
+    secondary: e.semantic.color.text.neutral700
+  },
   heading: {
     fontFamily: e.core.font.fontFamily.regular,
     sizes: {
@@ -2800,7 +2804,7 @@ const m = (l, p) => kr(l, p), yr = {
       borderColor: e.semantic.color.border.neutral300
     }
   }
-}, eo = {
+}, Ye = {
   name: "old",
   ...e,
   components: {
@@ -3246,7 +3250,7 @@ const m = (l, p) => kr(l, p), yr = {
       color: a.blue600
     }
   }
-}, to = {
+}, eo = {
   sizes: {
     L: {
       size: "3rem",
@@ -3299,7 +3303,7 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, ao = {
+}, to = {
   height: "7rem",
   padding: "1.4rem 1.4rem 1.4rem 2.4rem",
   separator: `1px solid ${r.semantic.color.border.neutral400}`,
@@ -3317,7 +3321,7 @@ const m = (l, p) => kr(l, p), yr = {
       color: r.semantic.color.text.neutral100
     }
   }
-}, no = {
+}, ao = {
   trigger: {
     borderRadius: "0.4rem",
     height: "3.2rem",
@@ -3354,12 +3358,12 @@ const m = (l, p) => kr(l, p), yr = {
       color: r.semantic.color.text.neutral800
     }
   }
-}, lo = {
+}, no = {
   dropdown: {
     screenMarginHeight: "6px",
     maxHeight: "50vh"
   }
-}, A = "1px", co = {
+}, A = "1px", lo = {
   padding: `${r.core.space.space025} ${r.core.space.space050}`,
   gap: r.core.space.space025,
   borderRadius: "2px",
@@ -3422,7 +3426,7 @@ const m = (l, p) => kr(l, p), yr = {
       iconColor: r.semantic.color.text.neutral500
     }
   }
-}, io = {
+}, co = {
   sizes: {
     S: {
       gap: "0.8rem",
@@ -3434,7 +3438,7 @@ const m = (l, p) => kr(l, p), yr = {
     }
   },
   split: { minWidth: "0.8rem" }
-}, so = {
+}, io = {
   gap: r.core.space.space300,
   item: {
     borderRadius: "4px",
@@ -3478,7 +3482,7 @@ const m = (l, p) => kr(l, p), yr = {
   defaultItem: {
     gap: "0.4rem"
   }
-}, mo = {
+}, so = {
   gap: "0.2rem",
   sizes: {
     small: {
@@ -3588,7 +3592,7 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, go = {
+}, mo = {
   borderRadius: "0.4rem",
   border: `1px solid ${r.semantic.color.border.neutral600}`,
   fontSize: "1.4rem",
@@ -3631,13 +3635,13 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, bo = {
+}, go = {
   width: "100%",
   height: "fit-content",
   bgColor: r.semantic.color.background.neutral100,
   shadow: r.core.shadow.shadow4,
   borderRadius: "0.8rem"
-}, uo = {
+}, bo = {
   width: "1.8rem",
   height: "1.8rem",
   padding: "0",
@@ -3701,7 +3705,7 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, po = {
+}, uo = {
   sizes: {
     M: {
       height: "2.8rem",
@@ -3758,7 +3762,7 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, Co = {
+}, po = {
   sizes: {
     M: {
       gap: "0.8rem 5px"
@@ -3775,13 +3779,13 @@ const m = (l, p) => kr(l, p), yr = {
     gap: "0.4rem",
     padding: "1.2rem 1.6rem"
   }
-}, xo = {
+}, Co = {
   width: "2.7rem",
   height: "2rem",
   borderRadius: "5px",
   borderWidth: "0.1px",
   borderColor: r.semantic.color.border.neutral500
-}, ho = {
+}, xo = {
   fontSize: r.core.font.fontSize.s14,
   fontWeight: "400",
   fontFamily: r.core.font.fontFamily.regular,
@@ -3845,7 +3849,7 @@ const m = (l, p) => kr(l, p), yr = {
   weekNumCell: {
     fontSize: "1rem"
   }
-}, fo = {
+}, ho = {
   shadow: r.core.shadow.shadow500,
   bgColor: r.semantic.color.background.neutral100,
   sidePadding: "3.2rem",
@@ -3865,7 +3869,7 @@ const m = (l, p) => kr(l, p), yr = {
     buttonsGap: "1.6rem"
   },
   overlay: { bgColor: m(r.semantic.color.background.neutral100, 0.8) }
-}, ko = {
+}, fo = {
   chipList: {
     padding: "0.8rem 1.6rem",
     border: `1px solid ${r.semantic.color.border.neutral400}`
@@ -3898,7 +3902,7 @@ const m = (l, p) => kr(l, p), yr = {
       padding: "0.8rem 1.6rem"
     }
   }
-}, yo = {
+}, ko = {
   columnGap: "1.6rem",
   group: {
     rowGap: "1rem"
@@ -3912,7 +3916,7 @@ const m = (l, p) => kr(l, p), yr = {
       textColor: r.semantic.color.text.danger500
     }
   }
-}, vo = {
+}, yo = {
   sizes: {
     XXL: {
       width: "3.2rem",
@@ -3956,7 +3960,7 @@ const m = (l, p) => kr(l, p), yr = {
     }
   },
   borderRadius: "0.4rem"
-}, wo = {
+}, vo = {
   padding: "0 0.8rem 0 1rem",
   height: "3.6rem",
   gap: "0.5rem",
@@ -4047,7 +4051,7 @@ const m = (l, p) => kr(l, p), yr = {
       textColor: r.semantic.color.text.danger500
     }
   }
-}, zo = {
+}, wo = {
   gap: "0.5rem",
   margin: "0 0 0.2rem 0",
   minHeight: "20px",
@@ -4068,7 +4072,7 @@ const m = (l, p) => kr(l, p), yr = {
   required: {
     textColor: r.semantic.color.text.danger500
   }
-}, $o = {
+}, zo = {
   variants: {
     block: {
       sizes: {
@@ -4131,7 +4135,7 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, So = {
+}, $o = {
   size: "5rem",
   gap: "0.5rem",
   textColor: r.semantic.color.icon.neutral700,
@@ -4152,7 +4156,7 @@ const m = (l, p) => kr(l, p), yr = {
       textColor: r.semantic.color.icon.neutral100
     }
   }
-}, Ro = {
+}, So = {
   dropDown: {
     minWidth: "16rem",
     maxWidth: "40rem",
@@ -4216,7 +4220,7 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, Wo = {
+}, Ro = {
   blockScreenMargin: "20px",
   inlineScreenMargin: "20px",
   inlinePadding: "4rem",
@@ -4240,7 +4244,7 @@ const m = (l, p) => kr(l, p), yr = {
     buttonsGap: "0.8rem"
   },
   overlay: { bgColor: "rgba(255, 255, 255, 0.9)" }
-}, Po = {
+}, Wo = {
   bgColor: r.semantic.color.background.neutral100,
   shadow: r.core.shadow.shadow400,
   borderRadius: "0.8rem",
@@ -4253,7 +4257,7 @@ const m = (l, p) => kr(l, p), yr = {
     height: "8px",
     shadow: "rgba(0, 0, 0, 0.03) 0px 2px 1px"
   }
-}, Bo = {
+}, Po = {
   closeButton: {
     iconColor: r.semantic.color.icon.neutral700
   },
@@ -4272,7 +4276,7 @@ const m = (l, p) => kr(l, p), yr = {
     margin: "0 0 1.2rem 0",
     padding: "1.6rem"
   }
-}, Mo = {
+}, Bo = {
   textColor: r.semantic.color.text.primary600,
   border: "solid 1px transparent",
   colorGroups: [
@@ -4307,7 +4311,7 @@ const m = (l, p) => kr(l, p), yr = {
     M: "3.2rem",
     L: "4.4rem"
   }
-}, Io = {
+}, Mo = {
   borderRadius: "1px",
   textPosition: {
     left: {
@@ -4361,7 +4365,7 @@ const m = (l, p) => kr(l, p), yr = {
   text: {
     color: r.semantic.color.text.neutral800
   }
-}, Ho = {
+}, Io = {
   size: "1.8rem",
   iconSize: "0.6rem",
   padding: "0",
@@ -4410,7 +4414,7 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, Lo = {
+}, Ho = {
   bgColor: r.semantic.color.background.neutral100,
   shadow: `0px 0px 0px 1px ${r.semantic.color.border.neutral600}`,
   borderRadius: "0.8rem",
@@ -4430,7 +4434,7 @@ const m = (l, p) => kr(l, p), yr = {
     },
     customActions: { gap: "0.8rem" }
   }
-}, Fo = {
+}, Lo = {
   width: "100%",
   height: "fit-content",
   bgColor: r.semantic.color.background.neutral100,
@@ -4474,7 +4478,7 @@ const m = (l, p) => kr(l, p), yr = {
     width: "1px",
     color: r.semantic.color.border.neutral600
   }
-}, To = {
+}, Fo = {
   padding: "0 1rem",
   height: "3.6rem",
   gap: "0.6rem",
@@ -4581,7 +4585,7 @@ const m = (l, p) => kr(l, p), yr = {
   borderColor: { disabled: r.semantic.color.border.neutral500 },
   bgColor: { disabled: "transparent" },
   textColor: { disabled: r.semantic.color.text.neutral500 }
-}, f = (l, p) => `color-mix(in srgb-linear, ${l} ${p}%, transparent)`, Xo = {
+}, f = (l, p) => `color-mix(in srgb-linear, ${l} ${p}%, transparent)`, To = {
   sizes: {
     S: {
       borderRadius: "99rem",
@@ -4771,7 +4775,7 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, Go = {
+}, Xo = {
   sizes: {
     M: {
       borderRadius: r.core.space.space100,
@@ -4811,7 +4815,7 @@ const m = (l, p) => kr(l, p), yr = {
       borderColor: r.semantic.color.border.attention300
     }
   }
-}, Do = {
+}, Go = {
   variants: {
     informative: { iconColor: r.semantic.color.icon.informative600 },
     danger: { iconColor: r.semantic.color.icon.danger600 },
@@ -4819,7 +4823,7 @@ const m = (l, p) => kr(l, p), yr = {
     notice: { iconColor: r.semantic.color.icon.notice600 },
     success: { iconColor: r.semantic.color.icon.success600 }
   }
-}, Oo = {
+}, Do = {
   collapsed: {
     bgColor: r.semantic.color.background.neutral300,
     shadow: "none",
@@ -4924,7 +4928,7 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, qo = {
+}, Oo = {
   card: {
     gap: "2.4rem",
     bgColor: r.semantic.color.background.neutral100,
@@ -4951,7 +4955,7 @@ const m = (l, p) => kr(l, p), yr = {
   grid: {
     gap: "1.6rem"
   }
-}, Vo = {
+}, qo = {
   gap: "2.4rem",
   step: {
     gap: "0.8rem",
@@ -4995,7 +4999,7 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, Ao = {
+}, Vo = {
   width: "3rem",
   height: "1.8rem",
   padding: "0.2rem",
@@ -5047,7 +5051,7 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, Eo = {
+}, Ao = {
   table: {
     tableContainer: {
       backgroundColor: r.semantic.color.background.neutral100,
@@ -5092,7 +5096,7 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, No = {
+}, Eo = {
   bgColor: "transparent",
   padding: "1rem 1.6rem",
   gap: "3.2rem",
@@ -5115,7 +5119,7 @@ const m = (l, p) => kr(l, p), yr = {
   actionsBar: {
     gap: "1.6rem"
   }
-}, jo = {
+}, No = {
   variants: {
     default: {
       gap: "4rem",
@@ -5198,7 +5202,7 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, w = "transparent", E = "0.4rem 0.6rem", N = "0", j = "0.4rem", J = "0", Jo = {
+}, w = "transparent", E = "0.4rem 0.6rem", N = "0", j = "0.4rem", J = "0", jo = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
@@ -5285,14 +5289,14 @@ const m = (l, p) => kr(l, p), yr = {
       }
     }
   }
-}, Ko = {
+}, Jo = {
   width: "clamp(400px, 33vw, 640px)",
   padding: "12px max(12px, calc(20 * (100vw / 1920)))",
   shadow: "0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05)",
   gap: "1.2rem",
   actions: { gap: "0.8rem", inlineMargin: "2.4rem 0" },
   toaster: { gap: "2rem" }
-}, W = "transparent", Qo = {
+}, W = "transparent", Ko = {
   gap: "0.4rem",
   height: "2.7rem",
   lineHeight: "1.9rem",
@@ -5347,7 +5351,7 @@ const m = (l, p) => kr(l, p), yr = {
     minWidth: "2rem",
     borderRadius: "99rem"
   }
-}, Uo = {
+}, Qo = {
   textColor: r.semantic.color.text.neutral800,
   bgColor: r.semantic.color.background.neutral100,
   shadow: r.core.shadow.shadow400,
@@ -5361,7 +5365,7 @@ const m = (l, p) => kr(l, p), yr = {
     height: "8px",
     shadow: "rgba(0, 0, 0, 0.03) 0px 2px 1px"
   }
-}, Yo = {
+}, Uo = {
   bgColor: r.semantic.color.background.neutral100,
   levelOffset: "1.8rem",
   item: {
@@ -5375,7 +5379,11 @@ const m = (l, p) => kr(l, p), yr = {
     iconColor: r.semantic.color.icon.neutral800,
     gap: "0.4rem"
   }
-}, Zo = {
+}, Yo = {
+  colors: {
+    primary: r.semantic.color.text.neutral800,
+    secondary: r.semantic.color.text.neutral700
+  },
   heading: {
     fontFamily: r.core.font.fontFamily.regular,
     sizes: {
@@ -5437,7 +5445,7 @@ const m = (l, p) => kr(l, p), yr = {
       semiBold: "600"
     }
   }
-}, _o = {
+}, Zo = {
   gap: "1.6rem",
   header: {
     gap: "0.8rem"
@@ -5489,60 +5497,60 @@ const m = (l, p) => kr(l, p), yr = {
       borderColor: r.semantic.color.border.neutral300
     }
   }
-}, Ye = {
+}, _o = {
   name: "light",
   ...r,
   components: {
-    actionIconButton: to,
-    appBar: ao,
-    appSelectionMenu: no,
-    autoComplete: lo,
-    badge: co,
-    banner: io,
-    boxSelectionGroup: so,
-    button: mo,
-    buttonGroup: go,
-    card: bo,
-    checkbox: uo,
-    chip: po,
-    chipList: Co,
-    countryFlag: xo,
-    datePicker: ho,
-    drawer: fo,
-    filters: ko,
-    formField: yo,
-    iconButton: vo,
-    input: wo,
-    label: zo,
-    link: $o,
-    loader: So,
-    menu: Ro,
-    modal: Wo,
-    popover: Po,
-    popupCard: Bo,
-    profileIcon: Mo,
-    progressBar: Io,
-    radio: Ho,
-    searchBar: Lo,
-    section: Fo,
-    select: To,
-    semanticButton: Xo,
-    semanticContainer: Go,
-    semanticIcon: Do,
-    sideBar: Oo,
-    skeleton: qo,
-    stepper: Vo,
-    switchButton: Ao,
-    table: Eo,
-    tableHeading: No,
-    tabs: jo,
-    textButton: Jo,
-    toast: Ko,
-    toggleButton: Qo,
-    tooltip: Uo,
-    treeView: Yo,
-    typography: Zo,
-    windowBar: _o
+    actionIconButton: eo,
+    appBar: to,
+    appSelectionMenu: ao,
+    autoComplete: no,
+    badge: lo,
+    banner: co,
+    boxSelectionGroup: io,
+    button: so,
+    buttonGroup: mo,
+    card: go,
+    checkbox: bo,
+    chip: uo,
+    chipList: po,
+    countryFlag: Co,
+    datePicker: xo,
+    drawer: ho,
+    filters: fo,
+    formField: ko,
+    iconButton: yo,
+    input: vo,
+    label: wo,
+    link: zo,
+    loader: $o,
+    menu: So,
+    modal: Ro,
+    popover: Wo,
+    popupCard: Po,
+    profileIcon: Bo,
+    progressBar: Mo,
+    radio: Io,
+    searchBar: Ho,
+    section: Lo,
+    select: Fo,
+    semanticButton: To,
+    semanticContainer: Xo,
+    semanticIcon: Go,
+    sideBar: Do,
+    skeleton: Oo,
+    stepper: qo,
+    switchButton: Vo,
+    table: Ao,
+    tableHeading: Eo,
+    tabs: No,
+    textButton: jo,
+    toast: Jo,
+    toggleButton: Ko,
+    tooltip: Qo,
+    treeView: Uo,
+    typography: Yo,
+    windowBar: Zo
   }
 }, n = {
   transparent: "#00000000",
@@ -8052,6 +8060,10 @@ const m = (l, p) => kr(l, p), yr = {
     gap: "0.4rem"
   }
 }, Ke = {
+  colors: {
+    primary: o.semantic.color.text.neutral800,
+    secondary: o.semantic.color.text.neutral700
+  },
   heading: {
     fontFamily: o.core.font.fontFamily.regular,
     sizes: {
@@ -8220,7 +8232,7 @@ const m = (l, p) => kr(l, p), yr = {
     typography: Ke,
     windowBar: Qe
   }
-}, S = () => tr() || eo, _e = (l) => _`
+}, S = () => tr() || _o, _e = (l) => _`
     &:focus-visible {
       outline: ${() => S().core.focus.size} solid ${() => S().core.focus.color};
       outline-offset: ${() => l || S().core.focus.margin};
@@ -8232,9 +8244,10 @@ const m = (l, p) => kr(l, p), yr = {
 export {
   _e as getFocusStyle,
   r0 as getFocusStyleProperties,
-  eo as theme,
+  _o as theme,
   Ze as themeDark,
-  Ye as themeLight,
+  _o as themeLight,
+  Ye as themeOld,
   S as useTheme,
   m as withOpacity
 };