Socket
Socket
Sign inDemoInstall

@khanacademy/wonder-blocks-color

Package Overview
Dependencies
0
Maintainers
1
Versions
52
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.2.0 to 1.2.1

src/__docs__/color.stories.mdx

9

CHANGELOG.md
# @khanacademy/wonder-blocks-color
## 1.2.1
### Patch Changes
- 91cb727c: Remove file extensions from imports
## 1.2.0
### Minor Changes
- 34c7aacb: Update the value of darkBlue from #0a2a66 to #0b2149
- 34c7aacb: Update the value of darkBlue from #0a2a66 to #0b2149

160

dist/index.js

@@ -1,99 +0,11 @@

module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
'use strict';
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return fade; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return mix; });
/**
* A color manipulation library useful for dynamically
* mixing colors together.
*/
Object.defineProperty(exports, '__esModule', { value: true });
var _extends = require('@babel/runtime/helpers/extends');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
const color6Regexp = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;

@@ -103,4 +15,2 @@ const color3Regexp = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i;

// Parse a color in #abcdef, rgb(...), or rgba(...) form into an object
// with r,g,b,a keys.
const parse = color => {

@@ -145,5 +55,4 @@ if (typeof color !== "string") {

throw new Error(`Failed to parse color: ${color}`);
}; // Stringify the color in an `rgba()` or `#abcdef` format.
};
const format = color => {

@@ -164,5 +73,4 @@ const r = Math.round(color.r);

}
}; // Adjust the alpha value of a color.
};
const fade = (color, percentage) => {

@@ -174,8 +82,6 @@ if (percentage < 0 || percentage > 1) {

const components = parse(color);
return format({ ...components,
return format(_extends__default["default"]({}, components, {
a: components.a * percentage
});
}; // Mix a color into a background color, using the alpha channel of the base
// color to determine the linear blend.
}));
};
const mix = (color, background) => {

@@ -192,20 +98,5 @@ const colorObj = parse(color);

/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Color; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SemanticColor", function() { return SemanticColor; });
/* harmony import */ var _util_utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "mix", function() { return _util_utils_js__WEBPACK_IMPORTED_MODULE_0__["b"]; });
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "fade", function() { return _util_utils_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
const offBlack = "#21242c";
const white = "#ffffff";
const Color = {
// Product
blue: "#1865f2",

@@ -216,14 +107,12 @@ purple: "#9059ff",

red: "#d92916",
// Neutral
offBlack,
offBlack64: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(offBlack, 0.64),
offBlack50: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(offBlack, 0.5),
offBlack32: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(offBlack, 0.32),
offBlack16: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(offBlack, 0.16),
offBlack8: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(offBlack, 0.08),
offBlack64: fade(offBlack, 0.64),
offBlack50: fade(offBlack, 0.5),
offBlack32: fade(offBlack, 0.32),
offBlack16: fade(offBlack, 0.16),
offBlack8: fade(offBlack, 0.08),
offWhite: "#f7f8fa",
white,
white64: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(white, 0.64),
white50: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[/* fade */ "a"])(white, 0.5),
// Brand
white64: fade(white, 0.64),
white50: fade(white, 0.5),
darkBlue: "#0b2149",

@@ -239,4 +128,5 @@ teal: "#14bf96",

/***/ })
/******/ ]);
exports.SemanticColor = SemanticColor;
exports["default"] = Color;
exports.fade = fade;
exports.mix = mix;

4

package.json
{
"name": "@khanacademy/wonder-blocks-color",
"version": "1.2.0",
"version": "1.2.1",
"design": "v2",

@@ -16,3 +16,3 @@ "publishConfig": {

"devDependencies": {
"wb-dev-build-settings": "^0.4.0"
"wb-dev-build-settings": "^0.7.1"
},

@@ -19,0 +19,0 @@ "author": "",

259

src/docutils/swatch.js

@@ -6,157 +6,164 @@ // @flow

import {View} from "@khanacademy/wonder-blocks-core";
import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
import Spacing from "@khanacademy/wonder-blocks-spacing";
import {
HeadingLarge,
Caption,
LabelLarge,
Body,
LabelSmall,
LabelXSmall,
} from "@khanacademy/wonder-blocks-typography";
import Color from "../index.js";
import Color from "../index";
type Segments = 1 | 2 | 3;
const UseType = {
text: {
content: "Aa",
label: "Text & Icons",
},
icons: {
content: <Icon icon={icons.hint} />,
label: "Icons",
},
};
/**
* Get the color swatch information for a given color and segment count.
*/
const getColorSegments = (segments: Segments, color: string, dark: boolean) => {
switch (segments) {
case 1:
return [
{
foreground: dark ? color : Color.white64,
background: dark ? Color.darkBlue : color,
},
];
case 2:
return [
{
foreground: color,
background: color,
},
{
foreground: color,
background: Color.darkBlue,
},
];
case 3:
default:
return [
{
foreground: Color.white,
background: color,
},
{
foreground: color,
background: Color.offWhite,
},
{
foreground: color,
background: Color.white,
},
];
}
};
type Props = {|
color: string,
name: string,
desc: string,
use: "text" | "icons" | null,
width: 256,
segments: 1 | 2 | 3,
description: string,
use?: "text" | "icons" | null,
segments: Segments,
dark: boolean,
displayColor: boolean,
|};
type DefaultProps = {|
width: $PropertyType<Props, "width">,
segments: $PropertyType<Props, "segments">,
use: $PropertyType<Props, "use">,
|};
const constants = {
segmentHeight: 64,
};
export default class Swatch extends React.Component<Props> {
static defaultProps: DefaultProps = {
width: 256,
segments: 3,
use: null,
};
getContent(): ?string {
const {use} = this.props;
if (use === "text") {
return "Aa";
} else if (use === "icons") {
return "💡";
} else {
export const Swatch = ({
name,
color,
use,
description,
segments = 3,
dark = false,
displayColor = false,
}: Props): React.Element<typeof View> => {
const maybeRenderUseLabel = () => {
if (!use) {
return null;
}
}
renderThreeSegments(): React.Node {
const {color} = this.props;
const content = this.getContent();
return (
<View style={[styles.row, styles.border]}>
<View
style={[
styles.box,
{background: color, color: Color.white},
]}
>
{content && <HeadingLarge>{content}</HeadingLarge>}
</View>
<View style={[styles.offWhite, styles.box, {color: color}]}>
{content && <HeadingLarge>{content}</HeadingLarge>}
</View>
<View style={[styles.white, styles.box, {color: color}]}>
{content && <HeadingLarge>{content}</HeadingLarge>}
</View>
</View>
<LabelSmall style={styles.usage}>
Use in: <strong>{UseType[use].label}</strong>
</LabelSmall>
);
}
renderTwoSegments(): React.Node {
const {color} = this.props;
const content = this.getContent();
return (
<View style={[styles.row, styles.border]}>
<View style={[styles.white, styles.box]} />
<View
style={[
styles.box,
{background: color, color: Color.white},
]}
>
{content && <HeadingLarge>{content}</HeadingLarge>}
</View>
</View>
);
}
renderOneSegment(): React.Node {
const {color, use} = this.props;
const content = this.getContent();
return (
};
const renderSegments = () => {
return getColorSegments(segments, color, dark).map((color, index) => (
<View
key={index}
style={[
styles.row,
styles.border,
styles.box,
styles.swatchItem,
{
background: color,
height: constants.segmentHeight,
color: Color.white64,
color: color.foreground,
backgroundColor: color.background,
},
]}
>
{use === "text" && content && (
<HeadingLarge>{content}</HeadingLarge>
)}
{use ? <LabelLarge>{UseType[use]?.content}</LabelLarge> : null}
</View>
);
}
render(): React.Node {
const {name, desc, use, segments, width} = this.props;
return (
<View style={[styles.container, {width}]}>
{segments === 3 && this.renderThreeSegments()}
{segments === 2 && this.renderTwoSegments()}
{segments === 1 && this.renderOneSegment()}
<View style={[styles.row, styles.split]}>
<LabelLarge>{name}</LabelLarge>
{use === "text" && (
<LabelLarge>Text &amp; icons</LabelLarge>
)}
{use === "icons" && <LabelLarge>Icons</LabelLarge>}
</View>
<View style={styles.row}>
<Body>{desc}</Body>
</View>
));
};
return (
<View style={styles.container}>
<View style={styles.info}>
<LabelLarge>{name}</LabelLarge>
<LabelXSmall style={styles.tag}>{color}</LabelXSmall>
<Caption>{description}</Caption>
{maybeRenderUseLabel()}
</View>
);
}
}
<View style={styles.swatch}>{renderSegments()}</View>
</View>
);
};
const styles = StyleSheet.create({
offWhite: {
container: {
color: Color.offBlack,
flexDirection: "row",
marginBottom: Spacing.xLarge_32,
},
info: {
alignItems: "flex-start",
flexBasis: "30%",
},
tag: {
background: Color.offWhite,
border: `solid 1px ${Color.offBlack8}`,
borderRadius: Spacing.xxxxSmall_2,
margin: `${Spacing.xxxSmall_4}px 0`,
padding: `0 ${Spacing.xxxSmall_4}px`,
},
white: {
usage: {
color: Color.offBlack64,
},
swatch: {
flexDirection: "row",
flexBasis: "70%",
borderRadius: Spacing.xxxSmall_4,
background: Color.white,
},
border: {
border: `solid 1px ${Color.offBlack32}`,
borderRadius: 4,
boxShadow: `0 1px ${Spacing.xxxSmall_4}px 0 ${Color.offBlack8}`,
border: `1px solid ${Color.offBlack16}`,
overflow: "hidden",
height: Spacing.xxxLarge_64,
},
box: {
width: 256,
height: constants.segmentHeight,
swatchItem: {
gap: Spacing.medium_16,
flex: 1,
justifyContent: "center",
alignItems: "center",
justifyContent: "center",
padding: Spacing.medium_16,
},
row: {
flexDirection: "row",
},
split: {
justifyContent: "space-between",
marginTop: 16,
marginBottom: 8,
},
container: {
color: Color.offBlack,
paddingBottom: 16,
},
});

2

src/index.js
// @flow
import {mix, fade} from "./util/utils.js";
import {mix, fade} from "./util/utils";

@@ -4,0 +4,0 @@ const offBlack = "#21242c";

2

src/util/__tests__/utils.test.js
// @flow
import {fade, mix} from "../utils.js";
import {fade, mix} from "../utils";

@@ -4,0 +4,0 @@ const INVALID_COLORS = ["#NOTVALID", "#12345", "#12", "#ABCDEFG", ""];

docs.md
src/__tests__/__snapshots__/generated-snapshot.test.js.snap
src/__tests__/generated-snapshot.test.js
dist/index.js.flow

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc