@marigold/system 0.5.0 → 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Marigold UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -13,8 +13,9 @@ declare type StyleObject = ThemeUIStyleObject;
 declare type CSSObject = ThemeUICSSObject;
 declare type CSSProperties = ThemeUICSSProperties;
 
-declare type StyleProps = Pick<CSSObject, 'display' | 'height' | 'width' | 'minWidth' | 'maxWidth' | 'position' | 'top' | 'bottom' | 'right' | 'left' | 'zIndex' | 'p' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr' | 'm' | 'mx' | 'my' | 'mt' | 'mb' | 'ml' | 'mr' | 'flexDirection' | 'flexWrap' | 'flexShrink' | 'flexGrow' | 'alignItems' | 'justifyContent' | 'bg' | 'border' | 'borderRadius' | 'boxShadow' | 'opacity' | 'overflow' | 'transition'>;
-declare type BoxOwnProps = {
+interface StyleProps extends Pick<CSSObject, 'display' | 'height' | 'width' | 'minWidth' | 'maxWidth' | 'position' | 'top' | 'bottom' | 'right' | 'left' | 'zIndex' | 'p' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr' | 'm' | 'mx' | 'my' | 'mt' | 'mb' | 'ml' | 'mr' | 'flexDirection' | 'flexWrap' | 'flexShrink' | 'flexGrow' | 'alignItems' | 'justifyContent' | 'bg' | 'border' | 'borderRadius' | 'boxShadow' | 'opacity' | 'overflow' | 'transition'> {
+}
+interface BoxOwnProps extends StyleProps {
     css?: CSSObject;
     variant?: string | string[];
     /**
@@ -22,8 +23,9 @@ declare type BoxOwnProps = {
      * @internal Used to set default styles for Marigold components
      */
     __baseCSS?: CSSObject;
-} & StyleProps;
-declare type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;
+}
+interface BoxProps extends PolymorphicPropsWithRef<BoxOwnProps, 'div'> {
+}
 declare const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'>;
 
 declare const Global: () => JSX.Element;
@@ -177,9 +179,9 @@ declare const getNormalizedStyles: (val?: ElementType<any> | undefined) => {
     readonly minWidth: 0;
 };
 
-declare type SVGProps = {
+interface SVGProps extends ComponentProps<'svg'> {
     size?: number;
-} & ComponentProps<'svg'>;
+}
 declare const SVG: React.FC<SVGProps>;
 
 /**
@@ -208,13 +210,21 @@ declare type ScaleValue<T> = T | T[] | NestedScaleDict<T> | undefined;
  * descriptive name for the scale (e.g. `small`/`medium`/.. or `body`/`heading`/...),
  * and the value is the CSS value.
  */
-declare type Scale<T> = {
+interface Scale<T> {
     [key: string]: ScaleValue<T>;
-};
+}
+/**
+ * A {@link Scale} that also includes a required `none` value, which is
+ * usually used to define the blank value (e.g `0`).
+ */
+interface ZeroScale<T> extends Scale<T> {
+    none: ScaleValue<T>;
+}
 /**
  * Predefined {@link Scale} scale which uses size values.
  */
-declare type SizeScale<T> = {
+interface SizeScale<T> {
+    regular?: ScaleValue<T>;
     xxsmall?: ScaleValue<T>;
     xsmall?: ScaleValue<T>;
     small?: ScaleValue<T>;
@@ -222,14 +232,17 @@ declare type SizeScale<T> = {
     large?: ScaleValue<T>;
     xlarge?: ScaleValue<T>;
     xxlarge?: ScaleValue<T>;
-};
+    xxxlarge?: ScaleValue<T>;
+    huge?: ScaleValue<T>;
+    epic?: ScaleValue<T>;
+}
 /**
  * A {@link SizeScale} that also includes a required `none` value, which is
  * usually used to define the blank value (e.g `0`).
  */
-declare type ZeroScale<T> = {
+interface ZeroSizeScale<T> extends SizeScale<T> {
     none: ScaleValue<T>;
-} & Scale<T>;
+}
 /**
  * Base theme with typings for available scales properties.
  */
@@ -246,7 +259,7 @@ interface Theme {
      * ```ts
      * {
      *   breakpoints: [
-     *     '40em', '@media (min-width: 56em) and (orientation: landscape)', '64em',
+     *     '40em', '50em', '64em',
      *   ],
      * }
      * ```
@@ -257,7 +270,7 @@ interface Theme {
      * Used to define a scale for whitspace values,
      * like `padding`, `margin`, `gap`, etc.
      */
-    space?: ZeroScale<CSS.Property.Margin<number | string>>;
+    space?: ZeroSizeScale<CSS.Property.Margin<number | string>>;
     /**
      * Used to define a `font-size` scale.
      */
@@ -277,12 +290,12 @@ interface Theme {
     /**
      * Used to define a `letter-spacing` scale.
      */
-    letterSpacings?: ZeroScale<CSS.Property.LetterSpacing<string | 0 | number>>;
+    letterSpacings?: Scale<CSS.Property.LetterSpacing<string | 0 | number>>;
     /**
      * Used to define a scale for size values,
      * like `height`, `width`, `flexBasis`, etc.
      */
-    sizes?: ZeroScale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
+    sizes?: ZeroSizeScale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
     /**
      * Used to define different `border` styles.
      */
@@ -314,7 +327,7 @@ interface Theme {
     /**
      * Used to define a `transition` styles.
      */
-    transitions?: ZeroScale<CSS.Property.Transition>;
+    transitions?: Scale<CSS.Property.Transition>;
 }
 
 /**
@@ -332,10 +345,10 @@ declare const useTheme: () => {
     theme: Theme;
     css: (style: StyleObject) => _theme_ui_css.CSSObject;
 };
-declare type ThemeProviderProps<T extends Theme> = {
+interface ThemeProviderProps<T extends Theme> {
     theme: T;
     children: ReactNode;
-};
+}
 declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): JSX.Element;
 
 /**
@@ -351,13 +364,13 @@ declare const ensureVariantDefault: (val: string) => string;
  * Ensures that the `variant` is an array and supports the `__default` key.
  */
 declare const ensureArrayVariant: <T extends string>(variant?: T | T[] | undefined) => string[];
-declare type State = {
+interface State {
     checked?: boolean;
     focus?: boolean;
     hover?: boolean;
     disabled?: boolean;
     error?: boolean;
-};
+}
 /**
  * Appends given `state` to a `variant`.
  */
@@ -368,4 +381,4 @@ declare const appendVariantState: (variant: string, state: keyof State) => strin
  */
 declare const conditional: (variant: string, { disabled, ...states }: State) => string[];
 
-export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, Global, NormalizedElement, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, State, StyleObject, StyleProps, Theme, ThemeProvider, ThemeProviderProps, ZeroScale, __defaultTheme, appendVariantState, conditional, ensureArray, ensureArrayVariant, ensureVariantDefault, getNormalizedStyles, normalize, useResponsiveValue, useTheme };
+export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, Global, NormalizedElement, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, State, StyleObject, StyleProps, Theme, ThemeProvider, ThemeProviderProps, ZeroScale, ZeroSizeScale, __defaultTheme, appendVariantState, conditional, ensureArray, ensureArrayVariant, ensureVariantDefault, getNormalizedStyles, normalize, useResponsiveValue, useTheme };

package/dist/index.js

@@ -165,13 +165,13 @@ var conditional = (variant, _a) => {
 
 // src/Box.tsx
 var isNotEmpty = (val) => !(val && Object.keys(val).length === 0 && val.constructor === Object);
-var createThemedStyle = ({ as, __baseCSS, variant, styles, css: css2 }) => (theme) => {
+var createThemedStyle = ({ as, __baseCSS, variant, styles, css }) => (theme) => {
   return [
     getNormalizedStyles(as),
     (0, import_css.css)(__baseCSS)(theme),
     ...ensureArrayVariant(variant).map((v) => (0, import_css.css)({ variant: v })(theme)),
     (0, import_css.css)(styles)(theme),
-    (0, import_css.css)(css2)(theme)
+    (0, import_css.css)(css)(theme)
   ].filter(isNotEmpty);
 };
 var Box = (0, import_react2.forwardRef)((_a, ref) => {
@@ -180,7 +180,7 @@ var Box = (0, import_react2.forwardRef)((_a, ref) => {
     children,
     __baseCSS,
     variant,
-    css: css2 = {},
+    css = {},
     display,
     height,
     width,
@@ -269,7 +269,7 @@ var Box = (0, import_react2.forwardRef)((_a, ref) => {
       as,
       __baseCSS,
       variant,
-      css: css2,
+      css,
       styles: {
         display,
         height,
@@ -327,8 +327,8 @@ var __defaultTheme = {};
 var InternalContext = (0, import_react3.createContext)(__defaultTheme);
 var useTheme = () => {
   const theme = (0, import_react3.useContext)(InternalContext);
-  const css2 = (0, import_react3.useCallback)((style) => (0, import_css2.css)(style)(theme), [theme]);
-  return { theme, css: css2 };
+  const css = (0, import_react3.useCallback)((style) => (0, import_css2.css)(style)(theme), [theme]);
+  return { theme, css };
 };
 function ThemeProvider({
   theme,
@@ -352,10 +352,11 @@ var reduceMotionStyles = {
   }
 };
 var Global = () => {
-  const { css: css2 } = useTheme();
-  const styles = css2({
+  const { css } = useTheme();
+  const styles = css({
     html: {
       height: "100%",
+      textSizeAdjust: "none",
       variant: "root.html"
     },
     body: {
@@ -372,17 +373,24 @@ var Global = () => {
 
 // src/SVG.tsx
 var import_react7 = require("@emotion/react");
-var css = getNormalizedStyles("svg");
+var normalizedStyles = getNormalizedStyles("svg");
 var SVG = (_a) => {
-  var _b = _a, { size = 24, children } = _b, props = __objRest(_b, ["size", "children"]);
-  return (0, import_react7.jsx)("svg", __spreadProps(__spreadValues({
+  var _b = _a, {
+    size = 24,
+    fill = "currentcolor",
+    children
+  } = _b, props = __objRest(_b, [
+    "size",
+    "fill",
+    "children"
+  ]);
+  const { css } = useTheme();
+  return (0, import_react7.jsx)("svg", __spreadValues({
     width: size,
     height: size,
     viewBox: "0 0 24 24",
-    fill: "currentcolor"
-  }, props), {
-    css
-  }), children);
+    css: css(__spreadValues({ fill }, normalizedStyles))
+  }, props), children);
 };
 
 // src/useResponsiveValue.ts

package/dist/index.mjs

@@ -121,13 +121,13 @@ var conditional = (variant, _a) => {
 
 // src/Box.tsx
 var isNotEmpty = (val) => !(val && Object.keys(val).length === 0 && val.constructor === Object);
-var createThemedStyle = ({ as, __baseCSS, variant, styles, css: css2 }) => (theme) => {
+var createThemedStyle = ({ as, __baseCSS, variant, styles, css }) => (theme) => {
   return [
     getNormalizedStyles(as),
     transformStyleObject(__baseCSS)(theme),
     ...ensureArrayVariant(variant).map((v) => transformStyleObject({ variant: v })(theme)),
     transformStyleObject(styles)(theme),
-    transformStyleObject(css2)(theme)
+    transformStyleObject(css)(theme)
   ].filter(isNotEmpty);
 };
 var Box = forwardRef((_a, ref) => {
@@ -136,7 +136,7 @@ var Box = forwardRef((_a, ref) => {
     children,
     __baseCSS,
     variant,
-    css: css2 = {},
+    css = {},
     display,
     height,
     width,
@@ -225,7 +225,7 @@ var Box = forwardRef((_a, ref) => {
       as,
       __baseCSS,
       variant,
-      css: css2,
+      css,
       styles: {
         display,
         height,
@@ -287,8 +287,8 @@ var __defaultTheme = {};
 var InternalContext = createContext(__defaultTheme);
 var useTheme = () => {
   const theme = useContext(InternalContext);
-  const css2 = useCallback((style) => transformStyleObject2(style)(theme), [theme]);
-  return { theme, css: css2 };
+  const css = useCallback((style) => transformStyleObject2(style)(theme), [theme]);
+  return { theme, css };
 };
 function ThemeProvider({
   theme,
@@ -312,10 +312,11 @@ var reduceMotionStyles = {
   }
 };
 var Global = () => {
-  const { css: css2 } = useTheme();
-  const styles = css2({
+  const { css } = useTheme();
+  const styles = css({
     html: {
       height: "100%",
+      textSizeAdjust: "none",
       variant: "root.html"
     },
     body: {
@@ -332,17 +333,24 @@ var Global = () => {
 
 // src/SVG.tsx
 import { jsx as jsx2 } from "@emotion/react";
-var css = getNormalizedStyles("svg");
+var normalizedStyles = getNormalizedStyles("svg");
 var SVG = (_a) => {
-  var _b = _a, { size = 24, children } = _b, props = __objRest(_b, ["size", "children"]);
-  return jsx2("svg", __spreadProps(__spreadValues({
+  var _b = _a, {
+    size = 24,
+    fill = "currentcolor",
+    children
+  } = _b, props = __objRest(_b, [
+    "size",
+    "fill",
+    "children"
+  ]);
+  const { css } = useTheme();
+  return jsx2("svg", __spreadValues({
     width: size,
     height: size,
     viewBox: "0 0 24 24",
-    fill: "currentcolor"
-  }, props), {
-    css
-  }), children);
+    css: css(__spreadValues({ fill }, normalizedStyles))
+  }, props), children);
 };
 
 // src/useResponsiveValue.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -29,7 +29,7 @@
     "@emotion/react": "11.7.1",
     "@marigold/types": "0.4.0",
     "@theme-ui/css": "0.13.1",
-    "csstype": "3.0.10"
+    "csstype": "3.0.11"
   },
   "peerDependencies": {
     "react": "^16.x || ^17.0.0",
@@ -43,5 +43,6 @@
     "build": "tsup src/index.ts",
     "watch": "tsup src/index.ts --watch",
     "clean": "rm -rf node_modules && rm -rf dist"
-  }
+  },
+  "readme": "# `@marigold/system`\n\n> Marigold system\n"
 }

package/CHANGELOG.md

@@ -1,76 +0,0 @@
-# @marigold/system
-
-## 0.5.0
-
-### Minor Changes
-
-- [#1723](https://github.com/marigold-ui/marigold/pull/1723) [`5936de75`](https://github.com/marigold-ui/marigold/commit/5936de75e5a0134584438117c53c5edfe15c6c5d) Thanks [@sebald](https://github.com/sebald)! - feat(system): add hook that allows to use values based on screen size
-
-## 0.4.0
-
-### Minor Changes
-
-- [`f9526234`](https://github.com/marigold-ui/marigold/commit/f9526234257a149b12c14191a524691470da3942) Thanks [@sebald](https://github.com/sebald)! - chore: Use `tsup` to build packages
-
-* [`f9526234`](https://github.com/marigold-ui/marigold/commit/f9526234257a149b12c14191a524691470da3942) Thanks [@sebald](https://github.com/sebald)! - Improved size in node_modules
-
-### Patch Changes
-
-- Updated dependencies [[`f9526234`](https://github.com/marigold-ui/marigold/commit/f9526234257a149b12c14191a524691470da3942)]:
-  - @marigold/types@0.4.0
-
-## 0.3.1
-
-### Patch Changes
-
-- [#1676](https://github.com/marigold-ui/marigold/pull/1676) [`379041bc`](https://github.com/marigold-ui/marigold/commit/379041bc7d4502bca98029a95afe43ce693222cd) Thanks [@ti10le](https://github.com/ti10le)! - remove the last mdx stories
-
-## 0.3.0
-
-### Minor Changes
-
-- [#1163](https://github.com/marigold-ui/marigold/pull/1163) [`51af6693`](https://github.com/marigold-ui/marigold/commit/51af669330fd52e4e31fe5ad71d2b202ab8d2231) Thanks [@sebald](https://github.com/sebald)! - feat(system): Expose helper to transpile style object
-
-### Patch Changes
-
-- [#1549](https://github.com/marigold-ui/marigold/pull/1549) [`c030aa85`](https://github.com/marigold-ui/marigold/commit/c030aa85156356c294bafe9831024f6b6f2ce4db) Thanks [@sebald](https://github.com/sebald)! - refa: use emotion's theme function in <Element>
-
-* [#1515](https://github.com/marigold-ui/marigold/pull/1515) [`8eda245f`](https://github.com/marigold-ui/marigold/commit/8eda245f01a918fcdaa9f0ac211889ed869aa375) Thanks [@sebald](https://github.com/sebald)! - feat: add normalization for body and html & fix emotion leak
-
-- [#1491](https://github.com/marigold-ui/marigold/pull/1491) [`5a04de11`](https://github.com/marigold-ui/marigold/commit/5a04de110637d004f5824679697ee4d6a90eaf34) Thanks [@ti10le](https://github.com/ti10le)! - remove useStyles from Element
-
-* [#1440](https://github.com/marigold-ui/marigold/pull/1440) [`c1da52c0`](https://github.com/marigold-ui/marigold/commit/c1da52c0f035b141608fd606e6ba3bc2b5482dc1) Thanks [@ti10le](https://github.com/ti10le)! - feature: use Element in Box + necessary fix changes
-
-- [#1591](https://github.com/marigold-ui/marigold/pull/1591) [`1448ddca`](https://github.com/marigold-ui/marigold/commit/1448ddcaa0f647f48b018fa74a8686af30eccc53) Thanks [@sebald](https://github.com/sebald)! - feat(jest): Improve snapshot readability
-
-* [#1514](https://github.com/marigold-ui/marigold/pull/1514) [`5107b943`](https://github.com/marigold-ui/marigold/commit/5107b943cb3085eb3137d84e79966acad6173a26) Thanks [@sebald](https://github.com/sebald)! - feat(system): Use emotion's context
-
-- [#1647](https://github.com/marigold-ui/marigold/pull/1647) [`cd3a0d3e`](https://github.com/marigold-ui/marigold/commit/cd3a0d3edb3f2ddc1f561e8007e1c20000f7855a) Thanks [@ti10le](https://github.com/ti10le)! - feat: conditional function to allow state props in variants
-
-* [#1230](https://github.com/marigold-ui/marigold/pull/1230) [`ebd6e26f`](https://github.com/marigold-ui/marigold/commit/ebd6e26f71f675b98b663bc45c6a2d5badddcd47) Thanks [@viktoria-schwarz](https://github.com/viktoria-schwarz)! - feat: add GlobalStyles via theme
-
-- [#1563](https://github.com/marigold-ui/marigold/pull/1563) [`6e485f5a`](https://github.com/marigold-ui/marigold/commit/6e485f5a8800094fe54c075a2b21f8abe726b3cd) Thanks [@sebald](https://github.com/sebald)! - feat: Introduce a `Theme` with all available scales
-
-* [#1620](https://github.com/marigold-ui/marigold/pull/1620) [`80a2abe5`](https://github.com/marigold-ui/marigold/commit/80a2abe5804ba2c5a48cc6b05211245c37baf266) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): extend Box to handle \_\_default variants
-
-- [#1579](https://github.com/marigold-ui/marigold/pull/1579) [`e13e3cc1`](https://github.com/marigold-ui/marigold/commit/e13e3cc1fc66b261209973b1fc90eb48117076e9) Thanks [@ti10le](https://github.com/ti10le)! - feat: remove Heading from marigold
-
-* [#1622](https://github.com/marigold-ui/marigold/pull/1622) [`1829cf17`](https://github.com/marigold-ui/marigold/commit/1829cf17e16c574e5577b3e1709c34dc7ed4faaf) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): change Card default variant
-
-- [#1501](https://github.com/marigold-ui/marigold/pull/1501) [`1c1f8648`](https://github.com/marigold-ui/marigold/commit/1c1f864820a060214406ef711f4ed873746c16c4) Thanks [@ti10le](https://github.com/ti10le)! - feat(storybook): remove use styles stories
-
-* [#1190](https://github.com/marigold-ui/marigold/pull/1190) [`a00b7eb9`](https://github.com/marigold-ui/marigold/commit/a00b7eb971131634414d3912d059fb505bb7a370) Thanks [@sebald](https://github.com/sebald)! - fix(system): List reset should not remove the enumeration
-
-- [#1499](https://github.com/marigold-ui/marigold/pull/1499) [`ec5baf85`](https://github.com/marigold-ui/marigold/commit/ec5baf85a9a0f82a4fca5bbd1e1680316c186593) Thanks [@sebald](https://github.com/sebald)! - feat: Update and simplify normalization
-
-* [#1652](https://github.com/marigold-ui/marigold/pull/1652) [`0bb8f19e`](https://github.com/marigold-ui/marigold/commit/0bb8f19ebdec0e2f9dc3f6164f4373cac5c10880) Thanks [@sebald](https://github.com/sebald)! - refa(system): Groupt variant related fns in own file
-
-- [#1436](https://github.com/marigold-ui/marigold/pull/1436) [`c4ae5c5c`](https://github.com/marigold-ui/marigold/commit/c4ae5c5ca442f93034ff8f4c70adc295547951d4) Thanks [@ti10le](https://github.com/ti10le)! - create Element component + normalize file
-
-* [#1508](https://github.com/marigold-ui/marigold/pull/1508) [`a1ef2108`](https://github.com/marigold-ui/marigold/commit/a1ef2108dd6c8e6838b517dd58c82d38e71dae2b) Thanks [@sebald](https://github.com/sebald)! - feat: Add default styling to `<Element>`
-
-- [#1621](https://github.com/marigold-ui/marigold/pull/1621) [`2f7b936f`](https://github.com/marigold-ui/marigold/commit/2f7b936f5b07eade00a51cb138c3c492f1e08c9d) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): change Badge default variant
-
-* [#1550](https://github.com/marigold-ui/marigold/pull/1550) [`846eb640`](https://github.com/marigold-ui/marigold/commit/846eb640ad035c7f3410b4a8a451f8de56e62339) Thanks [@sebald](https://github.com/sebald)! - feat: Merge <Box> and <Element>
-
-- [#1614](https://github.com/marigold-ui/marigold/pull/1614) [`5d63cd9c`](https://github.com/marigold-ui/marigold/commit/5d63cd9c14578787083c82c85d93bbd2ff0efac6) Thanks [@ti10le](https://github.com/ti10le)! - remove all purple color things