@m4l/styles 7.1.28-beta.4 → 7.1.28-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/styles",
-  "version": "7.1.28-beta.4",
+  "version": "7.1.28-beta.5",
   "license": "UNLICENSED",
   "author": "m4l team",
   "publishConfig": {

package/theme/palette/baseChipsPalette.js

@@ -12,7 +12,7 @@ const c = {
       backgroundActive: r.oxford[30],
       // Comprobado
       /* Tone */
-      colorTone: o.oxford[20],
+      colorTone: o.oxford[60],
       // Comprobado
       backgroundColorTone: o.oxford[40],
       // Comprobado

package/theme/palette/defaultColors.js

@@ -1,26 +1,26 @@
-import { alpha as i } from "@mui/material/styles";
+import { alpha as e } from "@mui/material/styles";
 import { B as a } from "./baseOpacityColors.js";
-import { B as e } from "./baseColors.js";
+import { B as i } from "./baseColors.js";
 const t = {
-  enabledLight: e.oxford[10],
+  enabledLight: i.marbleLight[30],
   // Comprobado
-  enabledDark: e.onyx[30],
+  enabledDark: i.onyx[30],
   // Comprobado
-  hoverLight: e.oxford[20],
+  hoverLight: i.oxford[30],
   // Comprobado
-  hoverDark: e.onyx[20],
+  hoverDark: i.onyx[20],
   // Comprobado
-  selectedLight: e.oxford[30],
+  selectedLight: i.oxford[30],
   // Comprobado
-  selectedDark: e.coolGrey[40],
+  selectedDark: i.coolGrey[40],
   // Comprobado
-  activeLight: e.oxford[30],
+  activeLight: i.oxford[30],
   // Comprobado
-  activeDark: e.coolGrey[80],
+  activeDark: i.coolGrey[80],
   // Comprobado
-  focusLight: e.oxford[40],
+  focusLight: i.oxford[40],
   // Comprobado
-  focusDark: e.onyx[50],
+  focusDark: i.onyx[50],
   // Comprobado
   enabledOpacityLight: a.oxford[5],
   // Comprobado
@@ -30,9 +30,9 @@ const t = {
   // Comprobado
   hoverOpacityDark: a.mint[10],
   // Comprobado
-  selectedOpacityLight: i("#091E42", 0.2),
+  selectedOpacityLight: e("#091E42", 0.2),
   // Comprobado
-  selectedOpacityDark: i("#8E9DB4", 0.31),
+  selectedOpacityDark: e("#8E9DB4", 0.31),
   // Comprobado
   activeOpacityLight: a.oxford[30],
   // Comprobado
@@ -42,7 +42,7 @@ const t = {
   // Comprobado
   focusOpacityDark: a.mint[40],
   // Comprobado
-  contrastText: e.onyx[20],
+  contrastText: i.onyx[20],
   // Comprobado
   mainLight: a.oxford[10],
   // Comprobado
@@ -57,11 +57,11 @@ const t = {
   darker: a.mint[50],
   // Comprobado,
   // Tone colors
-  toneOpacityLight: e.marbleLight[30],
+  toneOpacityLight: i.marbleLight[30],
   // Comprobado
-  toneOpacityDark: e.onyx[30]
+  toneOpacityDark: i.onyx[30]
   // Comprobado
-}, h = {
+}, y = {
   enabled: t.enabledLight,
   enabledOpacity: t.enabledOpacityLight,
   hover: t.hoverLight,
@@ -74,12 +74,14 @@ const t = {
   active: t.activeLight,
   activeOpacity: t.activeOpacityLight,
   opacity: t.light,
+  opacityGradient1: e(t.light, 0.25),
+  opacityGradient2: e(t.light, 0.1),
   toneOpacity: t.toneOpacityLight,
   //Por compatibilidad con MUI
   main: t.mainLight,
   light: t.light,
   dark: t.dark
-}, y = {
+}, d = {
   enabled: t.enabledDark,
   enabledOpacity: t.enabledOpacityDark,
   hover: t.hoverDark,
@@ -92,6 +94,8 @@ const t = {
   active: t.activeDark,
   activeOpacity: t.activeOpacityDark,
   opacity: t.dark,
+  opacityGradient1: e(t.dark, 0.25),
+  opacityGradient2: e(t.dark, 0.1),
   toneOpacity: t.toneOpacityDark,
   //Por compatibilidad con MUI
   main: t.mainDark,
@@ -99,7 +103,7 @@ const t = {
   dark: t.dark
 };
 export {
-  y as B,
+  d as B,
   t as P,
-  h as a
+  y as a
 };

package/theme/palette/presetColors.js

@@ -1,3 +1,4 @@
+import { alpha as i } from "@mui/material";
 import { B as t } from "./baseColors.js";
 import { B as e } from "./baseOpacityColors.js";
 const a = {
@@ -361,7 +362,7 @@ const a = {
     borderMainDark: e.blaze[40]
     // comprobado,
   }
-}, o = {
+}, u = {
   patronus: {
     enabled: a.patronus.enabledLight,
     enabledOpacity: a.patronus.enabledOpacityLight,
@@ -375,6 +376,8 @@ const a = {
     active: a.patronus.activeLight,
     activeOpacity: a.patronus.activeOpacityLight,
     opacity: a.patronus.opacityLight,
+    opacityGradient1: i(a.patronus.opacityLight, 0.25),
+    opacityGradient2: i(a.patronus.opacityLight, 0.1),
     toneOpacity: a.patronus.toneOpacityLight,
     contrastText: a.patronus.contrastText,
     semanticText: a.patronus.semanticTextLight,
@@ -396,6 +399,8 @@ const a = {
     active: a.blaze.activeLight,
     activeOpacity: a.blaze.activeOpacityLight,
     opacity: a.blaze.opacityLight,
+    opacityGradient1: i(a.blaze.opacityLight, 0.25),
+    opacityGradient2: i(a.blaze.opacityLight, 0.1),
     toneOpacity: a.blaze.toneOpacityLight,
     contrastText: a.blaze.contrastText,
     semanticText: a.blaze.semanticTextLight,
@@ -417,6 +422,8 @@ const a = {
     active: a.brown.activeLight,
     activeOpacity: a.brown.activeOpacityLight,
     opacity: a.brown.opacityLight,
+    opacityGradient1: i(a.brown.opacityLight, 0.25),
+    opacityGradient2: i(a.brown.opacityLight, 0.1),
     toneOpacity: a.brown.toneOpacityLight,
     contrastText: a.brown.contrastText,
     semanticText: a.brown.semanticTextLight,
@@ -438,6 +445,8 @@ const a = {
     active: a.grass.activeLight,
     activeOpacity: a.grass.activeOpacityLight,
     opacity: a.grass.opacityLight,
+    opacityGradient1: i(a.grass.opacityLight, 0.25),
+    opacityGradient2: i(a.grass.opacityLight, 0.1),
     toneOpacity: a.grass.toneOpacityLight,
     contrastText: a.grass.contrastText,
     semanticText: a.grass.semanticTextLight,
@@ -459,6 +468,8 @@ const a = {
     active: a.turqui.activeLight,
     activeOpacity: a.turqui.activeOpacityLight,
     opacity: a.turqui.opacityLight,
+    opacityGradient1: i(a.turqui.opacityLight, 0.25),
+    opacityGradient2: i(a.turqui.opacityLight, 0.1),
     toneOpacity: a.turqui.toneOpacityLight,
     contrastText: a.turqui.contrastText,
     semanticText: a.turqui.semanticTextLight,
@@ -467,7 +478,7 @@ const a = {
     light: a.turqui.light,
     dark: a.turqui.dark
   }
-}, n = {
+}, p = {
   patronus: {
     enabled: a.patronus.enabledDark,
     enabledOpacity: a.patronus.enabledOpacityDark,
@@ -481,6 +492,8 @@ const a = {
     active: a.patronus.activeDark,
     activeOpacity: a.patronus.activeOpacityDark,
     opacity: a.patronus.opacityDark,
+    opacityGradient1: i(a.patronus.opacityDark, 0.25),
+    opacityGradient2: i(a.patronus.opacityDark, 0.1),
     toneOpacity: a.patronus.toneOpacityDark,
     contrastText: a.patronus.contrastText,
     semanticText: a.patronus.semanticTextDark,
@@ -502,6 +515,8 @@ const a = {
     active: a.blaze.activeDark,
     activeOpacity: a.blaze.activeOpacityDark,
     opacity: a.blaze.opacityDark,
+    opacityGradient1: i(a.blaze.opacityDark, 0.25),
+    opacityGradient2: i(a.blaze.opacityDark, 0.1),
     toneOpacity: a.blaze.toneOpacityDark,
     contrastText: a.blaze.contrastText,
     semanticText: a.blaze.semanticTextDark,
@@ -523,6 +538,8 @@ const a = {
     active: a.brown.activeDark,
     activeOpacity: a.brown.activeOpacityDark,
     opacity: a.brown.opacityDark,
+    opacityGradient1: i(a.brown.opacityDark, 0.25),
+    opacityGradient2: i(a.brown.opacityDark, 0.1),
     toneOpacity: a.brown.toneOpacityDark,
     contrastText: a.brown.contrastText,
     semanticText: a.brown.semanticTextDark,
@@ -544,6 +561,8 @@ const a = {
     active: a.grass.activeDark,
     activeOpacity: a.grass.activeOpacityDark,
     opacity: a.grass.opacityDark,
+    opacityGradient1: i(a.grass.opacityDark, 0.25),
+    opacityGradient2: i(a.grass.opacityDark, 0.1),
     toneOpacity: a.grass.toneOpacityDark,
     contrastText: a.grass.contrastText,
     semanticText: a.grass.semanticTextDark,
@@ -565,6 +584,8 @@ const a = {
     active: a.turqui.activeDark,
     activeOpacity: a.turqui.activeOpacityDark,
     opacity: a.turqui.opacityDark,
+    opacityGradient1: i(a.turqui.opacityDark, 0.25),
+    opacityGradient2: i(a.turqui.opacityDark, 0.1),
     toneOpacity: a.turqui.toneOpacityDark,
     contrastText: a.turqui.contrastText,
     semanticText: a.turqui.semanticTextDark,
@@ -573,13 +594,13 @@ const a = {
     light: a.turqui.light,
     dark: a.turqui.dark
   }
-}, i = Object.keys(a), u = i.map((r) => ({
+}, c = Object.keys(a), l = c.map((r) => ({
   name: r,
   value: a[r].main
 }));
 export {
   a as P,
-  n as a,
-  o as b,
-  u as p
+  p as a,
+  u as b,
+  l as p
 };

package/theme/palette/semanticColors.js

@@ -1,5 +1,6 @@
 import { B as a } from "./baseColors.js";
-import { B as t } from "./baseOpacityColors.js";
+import { B as i } from "./baseOpacityColors.js";
+import { alpha as t } from "@mui/material";
 const e = {
   info: {
     enabledLight: a.crayonBlue[50],
@@ -22,29 +23,29 @@ const e = {
     // comprobado,
     focusDark: a.crayonBlue[60],
     // comprobado,
-    enabledOpacityLight: t.crayon[30],
+    enabledOpacityLight: i.crayon[30],
     // comprobado
-    enabledOpacityDark: t.crayon[30],
+    enabledOpacityDark: i.crayon[30],
     // comprobado,
-    hoverOpacityLight: t.crayon[20],
+    hoverOpacityLight: i.crayon[20],
     // comprobado,
-    hoverOpacityDark: t.crayon[20],
+    hoverOpacityDark: i.crayon[20],
     // comprobado,
-    selectedOpacityLight: t.crayon[40],
+    selectedOpacityLight: i.crayon[40],
     // comprobado
-    selectedOpacityDark: t.crayon[40],
+    selectedOpacityDark: i.crayon[40],
     // comprobado
-    activeOpacityLight: t.crayon[50],
+    activeOpacityLight: i.crayon[50],
     // comprobado,
-    activeOpacityDark: t.crayon[50],
+    activeOpacityDark: i.crayon[50],
     // comprobado,
-    focusOpacityLight: t.crayon[10],
+    focusOpacityLight: i.crayon[10],
     // comprobado,
-    focusOpacityDark: t.crayon[10],
+    focusOpacityDark: i.crayon[10],
     // comprobado,
-    opacityLight: t.crayon[10],
+    opacityLight: i.crayon[10],
     // comprobado,
-    opacityDark: t.crayon[10],
+    opacityDark: i.crayon[10],
     // comprobado,
     main: a.crayonBlue[60],
     // comprobado,,
@@ -88,29 +89,29 @@ const e = {
     // comprobado,
     focusDark: a.middleYellow[60],
     // comprobado,
-    enabledOpacityLight: t.middle[30],
+    enabledOpacityLight: i.middle[30],
     // comprobado
-    enabledOpacityDark: t.middle[30],
+    enabledOpacityDark: i.middle[30],
     // comprobado,
-    hoverOpacityLight: t.middle[20],
+    hoverOpacityLight: i.middle[20],
     // comprobado,
-    hoverOpacityDark: t.middle[20],
+    hoverOpacityDark: i.middle[20],
     // comprobado,
-    selectedOpacityLight: t.middle[40],
+    selectedOpacityLight: i.middle[40],
     // comprobado,
-    selectedOpacityDark: t.middle[40],
+    selectedOpacityDark: i.middle[40],
     // comprobado,
-    activeOpacityLight: t.middle[50],
+    activeOpacityLight: i.middle[50],
     // comprobado,
-    activeOpacityDark: t.middle[50],
+    activeOpacityDark: i.middle[50],
     // comprobado,
-    focusOpacityLight: t.middle[10],
+    focusOpacityLight: i.middle[10],
     // comprobado,
-    focusOpacityDark: t.middle[10],
+    focusOpacityDark: i.middle[10],
     // comprobado,
-    opacityLight: t.middle[10],
+    opacityLight: i.middle[10],
     // comprobado,
-    opacityDark: t.middle[10],
+    opacityDark: i.middle[10],
     // comprobado,
     main: a.middleYellow[60],
     // comprobado,,
@@ -154,29 +155,29 @@ const e = {
     // comprobado,
     focusDark: a.flameRed[60],
     // comprobado,
-    enabledOpacityLight: t.flame[30],
+    enabledOpacityLight: i.flame[30],
     // comprobado
-    enabledOpacityDark: t.flame[30],
+    enabledOpacityDark: i.flame[30],
     // comprobado,
-    hoverOpacityLight: t.flame[20],
+    hoverOpacityLight: i.flame[20],
     // comprobado,
-    hoverOpacityDark: t.flame[20],
+    hoverOpacityDark: i.flame[20],
     // comprobado,
-    selectedOpacityLight: t.flame[40],
+    selectedOpacityLight: i.flame[40],
     // comprobado,
-    selectedOpacityDark: t.flame[40],
+    selectedOpacityDark: i.flame[40],
     // comprobado,
-    activeOpacityLight: t.flame[50],
+    activeOpacityLight: i.flame[50],
     // comprobado,
-    activeOpacityDark: t.flame[50],
+    activeOpacityDark: i.flame[50],
     // comprobado,
-    focusOpacityLight: t.flame[10],
+    focusOpacityLight: i.flame[10],
     // comprobado,
-    focusOpacityDark: t.flame[10],
+    focusOpacityDark: i.flame[10],
     // comprobado,
-    opacityLight: t.flame[10],
+    opacityLight: i.flame[10],
     // comprobado,
-    opacityDark: t.flame[10],
+    opacityDark: i.flame[10],
     // comprobado,
     main: a.flameRed[60],
     // comprobado,,
@@ -220,29 +221,29 @@ const e = {
     // comprobado,
     focusDark: a.acidGreen[60],
     // comprobado,
-    enabledOpacityLight: t.acid[30],
+    enabledOpacityLight: i.acid[30],
     // comprobado
-    enabledOpacityDark: t.acid[30],
+    enabledOpacityDark: i.acid[30],
     // comprobado,
-    hoverOpacityLight: t.acid[20],
+    hoverOpacityLight: i.acid[20],
     // comprobado,
-    hoverOpacityDark: t.acid[20],
+    hoverOpacityDark: i.acid[20],
     // comprobado,
-    selectedOpacityLight: t.acid[40],
+    selectedOpacityLight: i.acid[40],
     // comprobado,
-    selectedOpacityDark: t.acid[40],
+    selectedOpacityDark: i.acid[40],
     // comprobado,
-    activeOpacityLight: t.acid[50],
+    activeOpacityLight: i.acid[50],
     // comprobado,
-    activeOpacityDark: t.acid[50],
+    activeOpacityDark: i.acid[50],
     // comprobado,
-    focusOpacityLight: t.acid[10],
+    focusOpacityLight: i.acid[10],
     // comprobado,
-    focusOpacityDark: t.acid[10],
+    focusOpacityDark: i.acid[10],
     // comprobado,
-    opacityLight: t.acid[10],
+    opacityLight: i.acid[10],
     // comprobado,
-    opacityDark: t.acid[10],
+    opacityDark: i.acid[10],
     // comprobado,
     main: a.acidGreen[60],
     // comprobado,,
@@ -265,7 +266,7 @@ const e = {
     // comprobado,
     toneOpacityDark: a.acidGreen[95]
   }
-}, r = {
+}, n = {
   info: {
     enabled: e.info.enabledLight,
     enabledOpacity: e.info.enabledOpacityLight,
@@ -278,6 +279,8 @@ const e = {
     active: e.info.activeLight,
     activeOpacity: e.info.activeOpacityLight,
     opacity: e.info.opacityLight,
+    opacityGradient1: t(e.info.opacityLight, 0.25),
+    opacityGradient2: t(e.info.opacityLight, 0.1),
     toneOpacity: e.info.toneOpacityLight,
     contrastText: e.info.contrastText,
     semanticText: e.info.semanticTextLight,
@@ -298,6 +301,8 @@ const e = {
     active: e.success.activeLight,
     activeOpacity: e.success.activeOpacityLight,
     opacity: e.success.opacityLight,
+    opacityGradient1: t(e.success.opacityLight, 0.25),
+    opacityGradient2: t(e.success.opacityLight, 0.1),
     toneOpacity: e.success.toneOpacityLight,
     contrastText: e.success.contrastText,
     semanticText: e.success.semanticTextLight,
@@ -318,6 +323,8 @@ const e = {
     active: e.warning.activeLight,
     activeOpacity: e.warning.activeOpacityLight,
     opacity: e.warning.opacityLight,
+    opacityGradient1: t(e.warning.opacityLight, 0.25),
+    opacityGradient2: t(e.warning.opacityLight, 0.1),
     toneOpacity: e.warning.toneOpacityLight,
     contrastText: e.warning.contrastText,
     semanticText: e.warning.semanticTextLight,
@@ -338,6 +345,8 @@ const e = {
     active: e.error.activeLight,
     activeOpacity: e.error.activeOpacityLight,
     opacity: e.error.opacityLight,
+    opacityGradient1: t(e.error.opacityLight, 0.25),
+    opacityGradient2: t(e.error.opacityLight, 0.1),
     toneOpacity: e.error.toneOpacityLight,
     contrastText: e.error.contrastText,
     semanticText: e.error.semanticTextLight,
@@ -346,7 +355,7 @@ const e = {
     light: e.error.light,
     dark: e.error.dark
   }
-}, n = {
+}, s = {
   info: {
     enabled: e.info.enabledDark,
     enabledOpacity: e.info.enabledOpacityDark,
@@ -359,6 +368,8 @@ const e = {
     active: e.info.activeDark,
     activeOpacity: e.info.activeOpacityDark,
     opacity: e.info.opacityDark,
+    opacityGradient1: t(e.info.opacityDark, 0.25),
+    opacityGradient2: t(e.info.opacityDark, 0.1),
     toneOpacity: e.info.toneOpacityDark,
     contrastText: e.info.contrastText,
     semanticText: e.info.semanticTextDark,
@@ -379,6 +390,8 @@ const e = {
     active: e.success.activeDark,
     activeOpacity: e.success.activeOpacityDark,
     opacity: e.success.opacityDark,
+    opacityGradient1: t(e.success.opacityDark, 0.25),
+    opacityGradient2: t(e.success.opacityDark, 0.1),
     toneOpacity: e.success.toneOpacityDark,
     contrastText: e.success.contrastText,
     semanticText: e.success.semanticTextDark,
@@ -399,6 +412,8 @@ const e = {
     active: e.warning.activeDark,
     activeOpacity: e.warning.activeOpacityDark,
     opacity: e.warning.opacityDark,
+    opacityGradient1: t(e.warning.opacityDark, 0.25),
+    opacityGradient2: t(e.warning.opacityDark, 0.1),
     toneOpacity: e.warning.toneOpacityDark,
     contrastText: e.warning.contrastText,
     semanticText: e.warning.semanticTextDark,
@@ -419,6 +434,8 @@ const e = {
     active: e.error.activeDark,
     activeOpacity: e.error.activeOpacityDark,
     opacity: e.error.opacityDark,
+    opacityGradient1: t(e.error.opacityDark, 0.25),
+    opacityGradient2: t(e.error.opacityDark, 0.1),
     toneOpacity: e.error.toneOpacityDark,
     contrastText: e.error.contrastText,
     semanticText: e.error.semanticTextDark,
@@ -430,6 +447,6 @@ const e = {
 };
 export {
   e as P,
-  n as S,
-  r as a
+  s as S,
+  n as a
 };

package/types/augmentations.d.ts

@@ -30,6 +30,8 @@ declare module '@mui/material/styles' {
     opacity: string;
     toneOpacity: string;
     semanticText: string;
+    opacityGradient1: string;
+    opacityGradient2: string;
   }
   interface Palette {
     mode: 'light' | 'dark';

package/utils/getPaletteByPreset.d.ts

@@ -25,6 +25,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly opacity: string;
             readonly toneOpacity: string;
             readonly semanticText: string;
+            readonly opacityGradient1: string;
+            readonly opacityGradient2: string;
         };
         readonly default: {
             readonly semanticText: string;
@@ -45,6 +47,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
+            readonly opacityGradient1: string;
+            readonly opacityGradient2: string;
         };
         readonly divider: string;
         readonly text: {
@@ -134,6 +138,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly opacity: string;
             readonly toneOpacity: string;
             readonly semanticText: string;
+            readonly opacityGradient1: string;
+            readonly opacityGradient2: string;
         };
         readonly success: {
             readonly focusVisible: string;
@@ -154,6 +160,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly opacity: string;
             readonly toneOpacity: string;
             readonly semanticText: string;
+            readonly opacityGradient1: string;
+            readonly opacityGradient2: string;
         };
         readonly warning: {
             readonly focusVisible: string;
@@ -174,6 +182,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly opacity: string;
             readonly toneOpacity: string;
             readonly semanticText: string;
+            readonly opacityGradient1: string;
+            readonly opacityGradient2: string;
         };
         readonly error: {
             readonly focusVisible: string;
@@ -194,6 +204,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly opacity: string;
             readonly toneOpacity: string;
             readonly semanticText: string;
+            readonly opacityGradient1: string;
+            readonly opacityGradient2: string;
         };
     };
     readonly dark: {
@@ -218,6 +230,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly opacity: string;
             readonly toneOpacity: string;
             readonly semanticText: string;
+            readonly opacityGradient1: string;
+            readonly opacityGradient2: string;
         };
         readonly default: {
             readonly semanticText: string;
@@ -238,6 +252,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
+            readonly opacityGradient1: string;
+            readonly opacityGradient2: string;
         };
         readonly text: {
             readonly primary: string;
@@ -327,6 +343,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly opacity: string;
             readonly toneOpacity: string;
             readonly semanticText: string;
+            readonly opacityGradient1: string;
+            readonly opacityGradient2: string;
         };
         readonly success: {
             readonly focusVisible: string;
@@ -347,6 +365,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly opacity: string;
             readonly toneOpacity: string;
             readonly semanticText: string;
+            readonly opacityGradient1: string;
+            readonly opacityGradient2: string;
         };
         readonly warning: {
             readonly focusVisible: string;
@@ -367,6 +387,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly opacity: string;
             readonly toneOpacity: string;
             readonly semanticText: string;
+            readonly opacityGradient1: string;
+            readonly opacityGradient2: string;
         };
         readonly error: {
             readonly focusVisible: string;
@@ -387,6 +409,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly opacity: string;
             readonly toneOpacity: string;
             readonly semanticText: string;
+            readonly opacityGradient1: string;
+            readonly opacityGradient2: string;
         };
     };
 };