@operational/utils
Advanced tools
Comparing version 2.0.10 to 5.0.0-0
@@ -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"); |
@@ -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; |
"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 |
@@ -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; |
"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: { |
{ | ||
"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" |
@@ -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") |
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] || "" | ||
} |
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: { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
2
22579
393
2
- Removed@operational/theme@^2.0.10
- Removed@operational/theme@2.0.10(transitive)