npm - decentraland-ui2 - Versions diffs - 1.2.2-21406822587.commit-e8f7371 → 1.3.0 - Mend

decentraland-ui2 1.2.2-21406822587.commit-e8f7371 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1095) hide show

package/dist/theme/colorSchemes.js CHANGED Viewed

@@ -1,32 +1,32 @@
-import { neutral, rarity, rarityLightTheme } from "./colors";
-import { hexToRgba } from "../utils/colors";
+import { neutral, rarity, rarityLightTheme } from './colors';
+import { hexToRgba } from '../utils/colors';
 const colorSchemas = {
     light: {
         palette: {
-            mode: "light",
-            colorScheme: "light",
+            mode: 'light',
+            colorScheme: 'light',
             text: {
-                primary: "rgba(22, 21, 24, 0.9)",
-                secondary: "rgba(22, 21, 24, 0.6)",
-                disabled: "rgba(22, 21, 24, 0.38)",
+                primary: 'rgba(22, 21, 24, 0.9)',
+                secondary: 'rgba(22, 21, 24, 0.6)',
+                disabled: 'rgba(22, 21, 24, 0.38)',
                 _states: {
-                    hover: "rgba(22, 21, 24, 0.04)",
-                    selected: "rgba(22, 21, 24, 0.08)",
-                    focus: "rgba(22, 21, 24, 0.12)",
-                    focusVisible: "rgba(22, 21, 24, 0.16)",
-                },
+                    hover: 'rgba(22, 21, 24, 0.04)',
+                    selected: 'rgba(22, 21, 24, 0.08)',
+                    focus: 'rgba(22, 21, 24, 0.12)',
+                    focusVisible: 'rgba(22, 21, 24, 0.16)'
+                }
             },
             primary: {
-                main: "#FF2D55",
-                dark: "#F70038",
-                light: "#F70038",
+                main: '#FF2D55',
+                dark: '#F70038',
+                light: '#F70038',
                 _states: {
-                    hover: "rgba(255, 45, 85, 0.08)",
-                    selected: "rgba(255, 45, 85, 0.08)",
-                    focus: "rgba(255, 45, 85, 0.12)",
-                    focusVisible: "rgba(255, 45, 85, 0.16)",
-                    outlinedBorder: "rgba(255, 45, 85, 0.32)",
-                },
+                    hover: 'rgba(255, 45, 85, 0.08)',
+                    selected: 'rgba(255, 45, 85, 0.08)',
+                    focus: 'rgba(255, 45, 85, 0.12)',
+                    focusVisible: 'rgba(255, 45, 85, 0.16)',
+                    outlinedBorder: 'rgba(255, 45, 85, 0.32)'
+                }
             },
             secondary: {
                 main: neutral.gray5,
@@ -35,140 +35,140 @@ const colorSchemas = {
                 contrast: neutral.gray1,
                 outlinedColor: neutral.gray1,
                 _states: {
-                    hover: "rgba(94, 91, 103, 0.08)",
-                    selected: "rgba(94, 91, 103, 0.08)",
-                    focus: "rgba(94, 91, 103, 0.12)",
-                    focusVisible: "rgba(94, 91, 103, 0.16)",
-                    outlinedBorder: neutral.gray1,
-                },
+                    hover: 'rgba(94, 91, 103, 0.08)',
+                    selected: 'rgba(94, 91, 103, 0.08)',
+                    focus: 'rgba(94, 91, 103, 0.12)',
+                    focusVisible: 'rgba(94, 91, 103, 0.16)',
+                    outlinedBorder: neutral.gray1
+                }
             },
             action: {
-                active: "rgba(22, 21, 24, 0.56)",
-                hover: "rgba(22, 21, 24, 0.08)",
-                selected: "rgba(22, 21, 24, 0.16)",
-                focus: "rgba(22, 21, 24, 0.24)",
-                disabled: "rgba(22, 21, 24, 0.32)",
-                disabledBackground: "rgba(22, 21, 24, 0.12)",
+                active: 'rgba(22, 21, 24, 0.56)',
+                hover: 'rgba(22, 21, 24, 0.08)',
+                selected: 'rgba(22, 21, 24, 0.16)',
+                focus: 'rgba(22, 21, 24, 0.24)',
+                disabled: 'rgba(22, 21, 24, 0.32)',
+                disabledBackground: 'rgba(22, 21, 24, 0.12)'
             },
             error: {
-                main: "#FB3B3B",
-                dark: "#EC303A",
-                light: "#E97177",
+                main: '#FB3B3B',
+                dark: '#EC303A',
+                light: '#E97177',
                 _states: {
-                    hover: "rgba(251, 59, 59, 0.08)",
-                    selected: "rgba(251, 59, 59, 0.16)",
-                    focusVisible: "rgba(251, 59, 59, 0.16)",
-                    outlinedBorder: "rgba(251, 59, 59, 0.48)",
+                    hover: 'rgba(251, 59, 59, 0.08)',
+                    selected: 'rgba(251, 59, 59, 0.16)',
+                    focusVisible: 'rgba(251, 59, 59, 0.16)',
+                    outlinedBorder: 'rgba(251, 59, 59, 0.48)'
                 },
-                contrast: "#FFFFFF",
+                contrast: '#FFFFFF'
             },
             warning: {
-                main: "#FE9C2A",
-                dark: "#F38025",
-                light: "#FFB95B",
+                main: '#FE9C2A',
+                dark: '#F38025',
+                light: '#FFB95B',
                 _states: {
-                    hover: "rgba(244, 130, 33, 0.08)",
-                    selected: "rgba(244, 130, 33, 0.08)",
-                    focusVisible: "rgba(244, 130, 33, 0.16)",
-                    outlinedBorder: "rgba(244, 130, 33, 0.32)",
-                },
+                    hover: 'rgba(244, 130, 33, 0.08)',
+                    selected: 'rgba(244, 130, 33, 0.08)',
+                    focusVisible: 'rgba(244, 130, 33, 0.16)',
+                    outlinedBorder: 'rgba(244, 130, 33, 0.32)'
+                }
             },
             info: {
-                main: "#2196F3",
-                dark: "#1A75D2",
-                light: "#63B4F6",
+                main: '#2196F3',
+                dark: '#1A75D2',
+                light: '#63B4F6',
                 _states: {
-                    hover: "rgba(33, 150, 243, 0.08)",
-                    focusVisible: "rgba(33, 150, 243, 0.16)",
-                    outlinedBorder: "rgba(33, 150, 243, 0.48)",
-                },
+                    hover: 'rgba(33, 150, 243, 0.08)',
+                    focusVisible: 'rgba(33, 150, 243, 0.16)',
+                    outlinedBorder: 'rgba(33, 150, 243, 0.48)'
+                }
             },
             success: {
-                main: "#34CE77",
-                dark: "#00B453",
-                light: "#65D890",
+                main: '#34CE77',
+                dark: '#00B453',
+                light: '#65D890',
                 _states: {
-                    hover: "rgba(52, 206, 119, 0.08)",
-                    selected: "rgba(52, 206, 119, 0.16)",
-                    focusVisible: "rgba(52, 206, 119, 0.16)",
-                    outlinedBorder: "rgba(52, 206, 119, 0.32)",
-                },
+                    hover: 'rgba(52, 206, 119, 0.08)',
+                    selected: 'rgba(52, 206, 119, 0.16)',
+                    focusVisible: 'rgba(52, 206, 119, 0.16)',
+                    outlinedBorder: 'rgba(52, 206, 119, 0.32)'
+                }
             },
             common: {
                 black_states: {
                     main: neutral.softBlack1,
-                    hover: "rgba(22, 21, 24, 0.04)",
-                    selected: "rgba(22, 21, 24, 0.08)",
-                    focus: "rgba(22, 21, 24, 0.12)",
-                    focusVisible: "rgba(22, 21, 24, 0.3)",
-                    outlinedBorder: "rgba(22, 21, 24, 0.5)",
+                    hover: 'rgba(22, 21, 24, 0.04)',
+                    selected: 'rgba(22, 21, 24, 0.08)',
+                    focus: 'rgba(22, 21, 24, 0.12)',
+                    focusVisible: 'rgba(22, 21, 24, 0.3)',
+                    outlinedBorder: 'rgba(22, 21, 24, 0.5)'
                 },
                 white_states: {
-                    main: "#FFFFFF",
-                    focusVisible: "rgba(255, 255, 255, 0.3)",
-                },
+                    main: '#FFFFFF',
+                    focusVisible: 'rgba(255, 255, 255, 0.3)'
+                }
             },
             background: {
-                default: "#FFF",
+                default: '#FFF'
             },
-            divider: "rgba(22, 21, 24, 0.12)",
+            divider: 'rgba(22, 21, 24, 0.12)',
             _components: {
                 avatar: {
-                    fill: "#A09BA8",
+                    fill: '#A09BA8'
                 },
                 input: {
                     standard: {
-                        enabledBorder: "rgba(22, 21, 24, 0.42)",
-                        hoverBorder: neutral.softBlack1,
+                        enabledBorder: 'rgba(22, 21, 24, 0.42)',
+                        hoverBorder: neutral.softBlack1
                     },
                     filled: {
-                        enabledFill: "rgba(22, 21, 24, 0.06)",
-                        hoverFill: "rgba(22, 21, 24, 0.09)",
+                        enabledFill: 'rgba(22, 21, 24, 0.06)',
+                        hoverFill: 'rgba(22, 21, 24, 0.09)'
                     },
                     outlined: {
-                        enabledBorder: "rgba(22, 21, 24, 0.23)",
-                        hoverBorder: neutral.softBlack1,
-                    },
+                        enabledBorder: 'rgba(22, 21, 24, 0.23)',
+                        hoverBorder: neutral.softBlack1
+                    }
                 },
                 switch: {
-                    knobFillEnabled: "#FFFFFF",
+                    knobFillEnabled: '#FFFFFF',
                     slideFill: neutral.softBlack1,
-                    knowFillDisabled: "#ECEBED",
+                    knowFillDisabled: '#ECEBED'
                 },
                 rating: {
-                    enabledBorder: "rgba(22, 21, 24, 0.23)",
-                    activeFill: "#FF2D55",
+                    enabledBorder: 'rgba(22, 21, 24, 0.23)',
+                    activeFill: '#FF2D55'
                 },
                 snackbar: {
-                    fill: "#43404A",
+                    fill: '#43404A'
                 },
                 chip: {
                     defaultCloseFill: neutral.softBlack1,
-                    defaultHoverFill: "rgba(22, 21, 24, 0.12)",
-                    defaultEnabledBorder: "#A09BA8",
-                    defaultFocusFill: "rgba(22, 21, 24, 0.2)",
+                    defaultHoverFill: 'rgba(22, 21, 24, 0.12)',
+                    defaultEnabledBorder: '#A09BA8',
+                    defaultFocusFill: 'rgba(22, 21, 24, 0.2)'
                 },
                 tooltip: {
-                    fill: "#5E5B67",
+                    fill: '#5E5B67'
                 },
                 backdrop: {
-                    fill: "rgba(22, 21, 24, 0.5)",
+                    fill: 'rgba(22, 21, 24, 0.5)'
                 },
                 appBar: {
-                    defaultFill: "#ECEBED",
+                    defaultFill: '#ECEBED'
                 },
                 breadcrumbs: {
-                    collapseFill: "#ECEBED",
+                    collapseFill: '#ECEBED'
                 },
                 alert: {
                     error: {
-                        color: "#FB3B3B",
-                        background: "rgba(251, 59, 59, 0.16)",
+                        color: '#FB3B3B',
+                        background: 'rgba(251, 59, 59, 0.16)'
                     },
                     success: {
-                        background: "#C1EECF",
-                    },
-                },
+                        background: '#C1EECF'
+                    }
+                }
             },
             rarities: {
                 common: rarityLightTheme.common,
@@ -178,48 +178,48 @@ const colorSchemas = {
                 legendary: rarityLightTheme.legendary,
                 exotic: rarityLightTheme.exotic,
                 mythic: rarityLightTheme.mythic,
-                unique: rarityLightTheme.unique,
+                unique: rarityLightTheme.unique
             },
             raritiesText: {
-                common: "#FFFFFF",
-                uncommon: "#FFFFFF",
-                rare: "#FFFFFF",
-                epic: "#FFFFFF",
-                legendary: "#FFFFFF",
-                exotic: "#FFFFFF",
-                mythic: "#FFFFFF",
-                unique: "#FFFFFF",
+                common: '#FFFFFF',
+                uncommon: '#FFFFFF',
+                rare: '#FFFFFF',
+                epic: '#FFFFFF',
+                legendary: '#FFFFFF',
+                exotic: '#FFFFFF',
+                mythic: '#FFFFFF',
+                unique: '#FFFFFF'
             },
-            icon: "#000",
-        },
+            icon: '#000'
+        }
     },
     dark: {
         palette: {
-            mode: "dark",
-            colorScheme: "dark",
+            mode: 'dark',
+            colorScheme: 'dark',
             text: {
-                primary: "rgba(240,240,240, 1)",
-                secondary: "rgba(240,240,240, 0.7)",
-                disabled: "rgba(240,240,240, 0.38)",
+                primary: 'rgba(240,240,240, 1)',
+                secondary: 'rgba(240,240,240, 0.7)',
+                disabled: 'rgba(240,240,240, 0.38)',
                 _states: {
-                    hover: "rgba(240,240,240, 0.08)",
-                    selected: "rgba(240,240,240, 0.16)",
-                    focus: "rgba(240,240,240, 0.12)",
-                    focusVisible: "rgba(240,240,240, 0.3)",
-                },
+                    hover: 'rgba(240,240,240, 0.08)',
+                    selected: 'rgba(240,240,240, 0.16)',
+                    focus: 'rgba(240,240,240, 0.12)',
+                    focusVisible: 'rgba(240,240,240, 0.3)'
+                }
             },
             primary: {
-                main: "#FF2D55",
-                dark: "#F70038",
-                light: "#F26276",
-                contrast: "#FFFFFF",
+                main: '#FF2D55',
+                dark: '#F70038',
+                light: '#F26276',
+                contrast: '#FFFFFF',
                 _states: {
-                    hover: "rgba(255, 45, 85, 0.08)",
-                    selected: "rgba(255, 45, 85, 0.16)",
-                    focus: "rgba(255, 45, 85, 0.12)",
-                    focusVisible: "rgba(255, 45, 85, 0.24)",
-                    outlinedBorder: "rgba(255, 45, 85, 0.5)",
-                },
+                    hover: 'rgba(255, 45, 85, 0.08)',
+                    selected: 'rgba(255, 45, 85, 0.16)',
+                    focus: 'rgba(255, 45, 85, 0.12)',
+                    focusVisible: 'rgba(255, 45, 85, 0.24)',
+                    outlinedBorder: 'rgba(255, 45, 85, 0.5)'
+                }
             },
             secondary: {
                 main: neutral.trueWhite,
@@ -228,134 +228,134 @@ const colorSchemas = {
                 contrast: neutral.softBlack1,
                 outlinedColor: neutral.trueWhite,
                 _states: {
-                    hover: "rgba(255, 255, 255, 0.08)",
-                    selected: "rgba(255, 255, 255, 0.16)",
-                    focus: "rgba(255, 255, 255, 0.12)",
-                    focusVisible: "rgba(255, 255, 255, 0.24)",
-                    outlinedBorder: neutral.trueWhite,
-                },
+                    hover: 'rgba(255, 255, 255, 0.08)',
+                    selected: 'rgba(255, 255, 255, 0.16)',
+                    focus: 'rgba(255, 255, 255, 0.12)',
+                    focusVisible: 'rgba(255, 255, 255, 0.24)',
+                    outlinedBorder: neutral.trueWhite
+                }
             },
             action: {
-                active: "rgba(256, 256, 256, 0.56)",
-                hover: "rgba(256, 256, 256, 0.08)",
-                selected: "rgba(256, 256, 256, 0.16)",
-                focus: "rgba(256, 256, 256, 0.12)",
-                disabled: "rgba(256, 256, 256, 0.38)",
-                disabledBackground: "rgba(256, 256, 256, 0.12)",
+                active: 'rgba(256, 256, 256, 0.56)',
+                hover: 'rgba(256, 256, 256, 0.08)',
+                selected: 'rgba(256, 256, 256, 0.16)',
+                focus: 'rgba(256, 256, 256, 0.12)',
+                disabled: 'rgba(256, 256, 256, 0.38)',
+                disabledBackground: 'rgba(256, 256, 256, 0.12)'
             },
             error: {
-                main: "#FB3B3B",
-                dark: "#EC303A",
-                light: "#E97177",
+                main: '#FB3B3B',
+                dark: '#EC303A',
+                light: '#E97177',
                 _states: {
-                    hover: "rgba(251, 59, 59, 0.16)",
-                    selected: "rgba(251, 59, 59, 0.24)",
-                    focusVisible: "rgba(251, 59, 59, 0.24)",
-                    outlinedBorder: "rgba(251, 59, 59, 0.48)",
+                    hover: 'rgba(251, 59, 59, 0.16)',
+                    selected: 'rgba(251, 59, 59, 0.24)',
+                    focusVisible: 'rgba(251, 59, 59, 0.24)',
+                    outlinedBorder: 'rgba(251, 59, 59, 0.48)'
                 },
-                contrast: "#FFFFFF",
+                contrast: '#FFFFFF'
             },
             warning: {
-                main: "#FE9C2A",
-                dark: "#F38025",
-                light: "#FFB95B",
-                contrast: "#FFFFFF",
+                main: '#FE9C2A',
+                dark: '#F38025',
+                light: '#FFB95B',
+                contrast: '#FFFFFF',
                 _states: {
-                    hover: "rgba(244, 130, 33, 0.08)",
-                    selected: "rgba(244, 130, 33, 0.16)",
-                    focusVisible: "rgba(244, 130, 33, 0.3)",
-                    outlinedBorder: "rgba(244, 130, 33, 0.5)",
-                },
+                    hover: 'rgba(244, 130, 33, 0.08)',
+                    selected: 'rgba(244, 130, 33, 0.16)',
+                    focusVisible: 'rgba(244, 130, 33, 0.3)',
+                    outlinedBorder: 'rgba(244, 130, 33, 0.5)'
+                }
             },
             info: {
-                main: "#2196F3",
-                dark: "#1A75D2",
-                light: "#63B4F6",
-                contrast: "#FFFFFF",
+                main: '#2196F3',
+                dark: '#1A75D2',
+                light: '#63B4F6',
+                contrast: '#FFFFFF',
                 _states: {
-                    hover: "rgba(33, 150, 243, 0.16)",
-                    selected: "rgba(33, 150, 243, 0.24)",
-                    focusVisible: "rgba(33, 150, 243, 0.32)",
-                    outlinedBorder: "rgba(33, 150, 243, 0.48)",
-                },
+                    hover: 'rgba(33, 150, 243, 0.16)',
+                    selected: 'rgba(33, 150, 243, 0.24)',
+                    focusVisible: 'rgba(33, 150, 243, 0.32)',
+                    outlinedBorder: 'rgba(33, 150, 243, 0.48)'
+                }
             },
             success: {
-                main: "#34CE77",
-                dark: "#00B453",
-                light: "#65D890",
-                contrast: "#FFFFFF",
+                main: '#34CE77',
+                dark: '#00B453',
+                light: '#65D890',
+                contrast: '#FFFFFF',
                 _states: {
-                    hover: "rgba(52, 206, 119, 0.08)",
-                    selected: "rgba(52, 206, 119, 0.24)",
-                    focusVisible: "rgba(52, 206, 119, 0.24)",
-                    outlinedBorder: "rgba(52, 206, 119, 0.48)",
-                },
+                    hover: 'rgba(52, 206, 119, 0.08)',
+                    selected: 'rgba(52, 206, 119, 0.24)',
+                    focusVisible: 'rgba(52, 206, 119, 0.24)',
+                    outlinedBorder: 'rgba(52, 206, 119, 0.48)'
+                }
             },
             common: {
                 black_states: {
                     main: neutral.softBlack1,
-                    hover: "rgba(22, 21, 24, 0.08)",
-                    selected: "rgba(22, 21, 24, 0.16)",
-                    focus: "rgba(22, 21, 24, 0.12)",
-                    focusVisible: "rgba(22, 21, 24, 0.3)",
-                    outlinedBorder: "rgba(22, 21, 24, 0.5)",
+                    hover: 'rgba(22, 21, 24, 0.08)',
+                    selected: 'rgba(22, 21, 24, 0.16)',
+                    focus: 'rgba(22, 21, 24, 0.12)',
+                    focusVisible: 'rgba(22, 21, 24, 0.3)',
+                    outlinedBorder: 'rgba(22, 21, 24, 0.5)'
                 },
                 white_states: {
-                    main: "rgba(255, 255, 255, 0.98)",
-                    focusVisible: "rgba(255, 255, 255, 0.16)",
-                    outlinedBorder: "rgba(255, 255, 255, 0.32)",
-                },
+                    main: 'rgba(255, 255, 255, 0.98)',
+                    focusVisible: 'rgba(255, 255, 255, 0.16)',
+                    outlinedBorder: 'rgba(255, 255, 255, 0.32)'
+                }
             },
             background: {
                 default: neutral.softBlack1,
-                paper: "#1D1C20",
+                paper: '#1D1C20'
             },
             elevation: {
-                outlined: "rgba(255, 255, 255, 0.12)",
+                outlined: 'rgba(255, 255, 255, 0.12)'
             },
             _components: {
                 avatar: {
-                    fill: "#716B7C",
+                    fill: '#716B7C'
                 },
                 switch: {
-                    knobFillEnabled: "#FCFCFC",
-                    knowFillDisabled: "#716B7C",
+                    knobFillEnabled: '#FCFCFC',
+                    knowFillDisabled: '#716B7C'
                 },
                 rating: {
-                    activeFill: "#F70038",
+                    activeFill: '#F70038'
                 },
                 snackbar: {
-                    fill: "#322F37",
+                    fill: '#322F37'
                 },
                 chip: {
-                    defaultEnabledBorder: "#43404A",
+                    defaultEnabledBorder: '#43404A'
                 },
                 tooltip: {
-                    fill: "#242129",
+                    fill: '#242129'
                 },
                 appBar: {
-                    defaultFill: "#2B292F",
+                    defaultFill: '#2B292F'
                 },
                 breadcrumbs: {
-                    collapseFill: "#716B7C",
+                    collapseFill: '#716B7C'
                 },
                 alert: {
                     error: {
-                        color: "#F8919D",
-                        background: "rgba(204, 29, 44, 0.24)",
+                        color: '#F8919D',
+                        background: 'rgba(204, 29, 44, 0.24)'
                     },
                     warning: {
-                        color: "#FFCD88",
-                        background: "rgba(236, 113, 34, 0.24)",
+                        color: '#FFCD88',
+                        background: 'rgba(236, 113, 34, 0.24)'
                     },
                     info: {
-                        color: "#BBDEFB",
-                        background: "rgba(23, 100, 192, 0.24)",
+                        color: '#BBDEFB',
+                        background: 'rgba(23, 100, 192, 0.24)'
                     },
                     success: {
-                        background: "rgba(0, 161, 70, 0.24)",
-                    },
-                },
+                        background: 'rgba(0, 161, 70, 0.24)'
+                    }
+                }
             },
             rarities: {
                 common: hexToRgba(rarity.common, 0.2),
@@ -365,7 +365,7 @@ const colorSchemas = {
                 legendary: hexToRgba(rarity.legendary, 0.2),
                 exotic: hexToRgba(rarity.exotic, 0.2),
                 mythic: hexToRgba(rarity.mythic, 0.2),
-                unique: hexToRgba(rarity.unique, 0.2),
+                unique: hexToRgba(rarity.unique, 0.2)
             },
             raritiesText: {
                 common: rarity.common,
@@ -375,11 +375,11 @@ const colorSchemas = {
                 legendary: rarity.legendary,
                 exotic: rarity.exotic,
                 mythic: rarity.mythic,
-                unique: rarity.unique,
+                unique: rarity.unique
             },
-            icon: "#fff",
-        },
-    },
+            icon: '#fff'
+        }
+    }
 };
 export { colorSchemas };
 //# sourceMappingURL=colorSchemes.js.map

package/dist/theme/colors.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Rarity } from "@dcl/schemas";
+import { Rarity } from '@dcl/schemas';
 declare const neutral: {
     white: string;
     trueWhite: string;
@@ -69,4 +69,4 @@ declare const blackTransparent: {
 declare const textOnBlackTransparent: typeof blackTransparent;
 declare const whiteTransparent: typeof blackTransparent;
 declare const textOnWhiteTransparent: typeof blackTransparent;
-export { neutral, textOnNeutral, base, textOnBase, rarity, rarityLight, rarityLightTheme, rarityGradient, textOnRarity, brand, textOnBrand, gradient, textOnGradient, opacity, blackTransparent, textOnBlackTransparent, whiteTransparent, textOnWhiteTransparent, };
+export { neutral, textOnNeutral, base, textOnBase, rarity, rarityLight, rarityLightTheme, rarityGradient, textOnRarity, brand, textOnBrand, gradient, textOnGradient, opacity, blackTransparent, textOnBlackTransparent, whiteTransparent, textOnWhiteTransparent };