@operational/utils - npm Package Compare versions

Comparing version 2.0.10 to 5.0.0-0

lib/__tests__/color.test.js

@@ -21,5 +21,2 @@ "use strict";
     });
-    it("Should transparentize a color by a percentage", () => {
-        expect(index_1.transparentize("red")(100)).toEqual("rgba(255, 0, 0, 0)");
-    });
     it("Should set a color's value", () => {
@@ -26,0 +23,0 @@ expect(index_1.setBrightness("#BBB", 187)).toEqual("#bbbbbb");

lib/color.d.ts

@@ -1,2 +0,1 @@
-import { Theme } from "@operational/theme";
 export declare const readableTextColor: (backgroundColor: string, workingColors: string[]) => string;
@@ -7,66 +6,1 @@ export declare const darken: (color: string, percentage: number) => string;
 export declare const setBrightness: (color: string, targetBrightness: number) => string;
-export declare const transparentize: (color: string) => (percentage: number) => string;
-export declare const expandColor: (theme: Readonly<{
-    font: {
-        family: {
-            main: string;
-            code: string;
-        };
-        size: {
-            title: number;
-            body: number;
-            small: number;
-            fineprint: number;
-        };
-    };
-    space: {
-        base: number;
-        small: number;
-        content: number;
-        element: number;
-        big: number;
-    };
-    zIndex: {
-        default: number;
-        selectOptions: number;
-        formFieldError: number;
-    };
-    color: {
-        grey: (lightness: import("../../theme/lib/constants").Grey) => string;
-        primary: string;
-        disabled: string;
-        success: string;
-        error: string;
-        basic: string;
-        ghost: string;
-        white: string;
-        black: string;
-        background: {
-            dark: string;
-            light: string;
-            lighter: string;
-        };
-        separators: {
-            default: string;
-            light: string;
-        };
-        text: {
-            dark: string;
-            default: string;
-            light: string;
-            lighter: string;
-            lightest: string;
-            action: string;
-            white: string;
-        };
-        border: {
-            default: string;
-            disabled: string;
-        };
-    };
-    borderRadius: number;
-    sidebarWidth: number;
-    titleHeight: number;
-}> & {
-    deprecated?: Theme;
-}, color?: string) => string;

lib/color.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const colorCalculator = require("tinycolor2");
-const theme_1 = require("@operational/theme");
 const getBrightestColor = (colors) => colors.reduce((acc, curr) => {
@@ -15,3 +14,3 @@ if (curr.l > acc.l) {
     if (backgroundHsl.a < 0.5) {
-        return theme_1.constants.color.white;
+        return "#FFFFFF";
     }
@@ -39,25 +38,2 @@ // For reasonably saturated colors on the bright side, still pick the lightest color.
 };
-exports.transparentize = (color) => (percentage) => (({ r, g, b }) => {
-    return `rgba(${r}, ${g}, ${b}, ${(255 * (100 - percentage)) / 100})`;
-})(colorCalculator(color).toRgb());
-/*
- * Expands a color expressed either as a custom hex value
- * or a color key to pick from within the style constants object.
-*/
-exports.expandColor = (theme, color) => {
-    if (!color) {
-        return null;
-    }
-    const hexRegEx = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|currentColor/i;
-    const isHex = hexRegEx.test(color);
-    if (isHex) {
-        return color;
-    }
-    /**
-     * This function is typically used in checks.
-     * If falsy, it returns a fallback color, hence
-     * the empty string return for a falsy value.
-     */
-    return theme.color[color] || "";
-};
 //# sourceMappingURL=color.js.map

lib/styles.d.ts

@@ -1,6 +0,3 @@
-import { Theme } from "@operational/theme";
-export declare const baseStylesheet: (theme: Theme) => string;
-export declare const injectStylesheet: (cssString: string) => void;
 export declare const fadeIn: any;
 export declare const resetTransform: any;
 export declare const spin: any;

lib/styles.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const glamor_1 = require("glamor");
-const color_1 = require("./color");
-exports.baseStylesheet = (theme) => `
-* {
-  box-sizing: border-box;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  font-smoothing: antialiased;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-  font-family: ${theme.fontFamily};
-  font-size: 13px;
-  height: 100%;
-}
-
-body {
-  background-color: ${theme.colors.background};
-}
-
-a:link,
-a:visited {
-  color: ${theme.colors.info};
-  text-decoration: none;
-}
-
-a:hover: {
-  color: ${color_1.darken(theme.colors.info, 5)};
-}
-`;
-exports.injectStylesheet = (cssString) => {
-    if (!document) {
-        return;
-    }
-    const styleEl = document.createElement("style");
-    styleEl.innerHTML = cssString;
-    document.head.appendChild(styleEl);
-};
 exports.fadeIn = glamor_1.css.keyframes({
@@ -45,0 +5,0 @@ from: {

package.json

 {
   "name": "@operational/utils",
-  "version": "2.0.10",
+  "version": "5.0.0-0",
   "description": "A collection of utilities used within the Contiamo UI suite",
@@ -20,3 +20,2 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@operational/theme": "^2.0.10",
     "glamor": "^2.20.40",
@@ -23,0 +22,0 @@ "tinycolor2": "^1.4.1"

src/__tests__/color.test.ts

@@ -1,2 +0,2 @@
-import { readableTextColor, darken, lighten, transparentize, setBrightness } from "../index"
+import { readableTextColor, darken, lighten, setBrightness } from "../index"
 
@@ -23,6 +23,2 @@ xdescribe("Color utils", () => {
 
-  it("Should transparentize a color by a percentage", () => {
-    expect(transparentize("red")(100)).toEqual("rgba(255, 0, 0, 0)")
-  })
-
   it("Should set a color's value", () => {
@@ -29,0 +25,0 @@ expect(setBrightness("#BBB", 187)).toEqual("#bbbbbb")

src/color.ts

 import * as colorCalculator from "tinycolor2"
-import { OperationalStyleConstants, Theme, constants } from "@operational/theme"
 
@@ -16,3 +15,3 @@ const getBrightestColor = (colors: ColorFormats.HSLA[]): ColorFormats.HSLA =>
   if (backgroundHsl.a < 0.5) {
-    return constants.color.white
+    return "#FFFFFF"
   }
@@ -46,31 +45,1 @@ // For reasonably saturated colors on the bright side, still pick the lightest color.
 }
-
-export const transparentize = (color: string) => (percentage: number): string =>
-  (({ r, g, b }) => {
-    return `rgba(${r}, ${g}, ${b}, ${(255 * (100 - percentage)) / 100})`
-  })(colorCalculator(color).toRgb())
-
-/*
- * Expands a color expressed either as a custom hex value
- * or a color key to pick from within the style constants object.
-*/
-export const expandColor = (
-  theme: OperationalStyleConstants & { deprecated?: Theme },
-  color?: keyof OperationalStyleConstants["color"] | string,
-): string | null => {
-  if (!color) {
-    return null
-  }
-  const hexRegEx = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|currentColor/i
-  const isHex = hexRegEx.test(color)
-  if (isHex) {
-    return color
-  }
-
-  /**
-   * This function is typically used in checks.
-   * If falsy, it returns a fallback color, hence
-   * the empty string return for a falsy value.
-   */
-  return (theme.color as any)[color] || ""
-}

src/styles.ts

 import { css } from "glamor"
-import { Theme } from "@operational/theme"
 
 import { darken } from "./color"
 
-export const baseStylesheet = (theme: Theme): string => `
-* {
-  box-sizing: border-box;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  font-smoothing: antialiased;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-  font-family: ${theme.fontFamily};
-  font-size: 13px;
-  height: 100%;
-}
-
-body {
-  background-color: ${theme.colors.background};
-}
-
-a:link,
-a:visited {
-  color: ${theme.colors.info};
-  text-decoration: none;
-}
-
-a:hover: {
-  color: ${darken(theme.colors.info, 5)};
-}
-`
-
-export const injectStylesheet = (cssString: string): void => {
-  if (!document) {
-    return
-  }
-  const styleEl = document.createElement("style")
-  styleEl.innerHTML = cssString
-  document.head.appendChild(styleEl)
-}
-
 export const fadeIn = css.keyframes({
@@ -48,0 +6,0 @@ from: {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

-33.33%

Worsened metrics

Total package byte prevSize

22579

-23.07%

Lines of code

393

-33.61%

Number of low quality alerts

2

100%

Dependency changes

• - Removed

  @operational/theme@^2.0.10

• - Removed

  @operational/theme@2.0.10
  (transitive)