diff --git a/.prettierrc b/.prettierrc index 2d38c79a..f62d924f 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { - "useTabs": true, + "tabWidth": 2, "singleQuote": false, "trailingComma": "none", "printWidth": 100, diff --git a/CHANGELOG.md b/CHANGELOG.md index f09a409e..fea346bc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # @UrbanInstitute/dataviz-components Changelog +## 0.1.0 + +- Update .prettierrc +- Add color utility module +- Add Storybook instance for documentation and testing - Simplify global styles, move to lib folder ## 0.0.2 diff --git a/package-lock.json b/package-lock.json index ee3fe286..0400ee76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@urbaninstitute/dataviz-components", - "version": "0.0.2", + "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@urbaninstitute/dataviz-components", - "version": "0.0.2", + "version": "0.1.0", "dependencies": { "layercake": "^8.0.0" }, diff --git a/package.json b/package.json index 849057b9..80e6c16c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@urbaninstitute/dataviz-components", - "version": "0.0.2", + "version": "0.1.0", "scripts": { "dev": "vite dev", "build": "vite build && npm run package", @@ -20,6 +20,10 @@ ".": { "types": "./dist/index.d.ts", "svelte": "./dist/index.js" + }, + "utils": { + "types": "./dist/utils/index.d.ts", + "svelte": "./dist/utils/index.js" } }, "files": [ diff --git a/src/lib/BasicDropdown/BasicDropdown.svelte b/src/lib/BasicDropdown/BasicDropdown.svelte index a2848ce5..3c1472f7 100644 --- a/src/lib/BasicDropdown/BasicDropdown.svelte +++ b/src/lib/BasicDropdown/BasicDropdown.svelte @@ -1,14 +1,15 @@
- - {#if value} -
-
- {value} -
-
- {/if} - - {#if label} -
-
- {label} -
-
- {/if} + + {#if value} +
+
+ {value} +
+
+ {/if} + + {#if label} +
+
+ {label} +
+
+ {/if}
diff --git a/src/lib/style/app.css b/src/lib/style/app.css index 15f97dd3..a362e311 100644 --- a/src/lib/style/app.css +++ b/src/lib/style/app.css @@ -62,7 +62,7 @@ --color-yellow-shade-lightest: #fff2cf; --color-magenta-shade-darkest: #351123; --color-magenta-shade-darker: #761548; - --color-magenta-shade-dark: #12719e; + --color-magenta-shade-dark: #af1f6b; --color-magenta: #ec00bb; --color-magenta-shade-medium: #e54096; --color-magenta-shade-light: #e46aa7; diff --git a/src/lib/utils/colors.js b/src/lib/utils/colors.js new file mode 100644 index 00000000..097ba9fa --- /dev/null +++ b/src/lib/utils/colors.js @@ -0,0 +1,274 @@ +/** + * An object representing all of the Urban Institute's color palette. + * @type Record + */ +const colors = { + black: "#000000", + white: "#FFFFFF", + blue_shade_darkest: "#062635", + blue_shade_darker: "#0A4C6A", + blue_shade_dark: "#12719E", + blue: "#1696D2", + blue_shade_medium: "#46ABDB", + blue_shade_light: "#73BFE2", + blue_shade_lighter: "#A2D4EC", + blue_shade_lightest: "#CFE8F3", + gray_shade_darkest: "#353535", + gray_shade_darker: "#696969", + gray_shade_dark: "#9D9D9D", + gray: "#D2D2D2", + gray_shade_medium: "#DCDBDB", + gray_shade_light: "#E3E3E3", + gray_shade_lighter: "#ECECEC", + gray_shade_lightest: "#F5F5F5", + yellow_shade_darkest: "#843215", + yellow_shade_darker: "#CA5800", + yellow_shade_dark: "#E88E2D", + yellow: "#FDBF11", + yellow_shade_medium: "#FCCB41", + yellow_shade_light: "#FDD870", + yellow_shade_lighter: "#FCE39E", + yellow_shade_lightest: "#FFF2CF", + magenta_shade_darkest: "#351123", + magenta_shade_darker: "#761548", + magenta_shade_dark: "#af1f6b", + magenta: "#EC00BB", + magenta_shade_medium: "#E54096", + magenta_shade_light: "#E46AA7", + magenta_shade_lighter: "#EB99C2", + magenta_shade_lightest: "#F5CBDF", + green_shade_darkest: "#1A2E19", + green_shade_darker: "#2C5C2D", + green_shade_dark: "#408941", + green: "#55B748", + green_shade_medium: "#78C26D", + green_shade_light: "#98CF90", + green_shade_lighter: "#BCDEB4", + green_shade_lightest: "#DCEDD9", + red_shade_darkest: "#1A2E19", + red_shade_darker: "#6E1614", + red_shade_dark: "#A4201D", + red: "#DB2B27", + red_shade_medium: "#E25552", + red_shade_light: "#E9807D", + red_shade_lighter: "#F1AAA9", + red_shade_lightest: "#F8D5D4", + space_gray_shade_darkest: "#0E0C0D", + space_gray_shade_darker: "#1A1717", + space_gray_shade_dark: "#262223", + space_gray_shade_medium_dark: "#332D2F", + space_gray: "#5C5859", + space_gray_shade_light: "#848081", + space_gray_shade_lighter: "#ADABAC", + space_gray_shade_lightest: "#D5D5D4" +}; + +/** + * Returns a list of 8 sequential blue hues for data visualization based on Urban's style guide + * @returns {string[]} - An array of colors + */ +function getBlues() { + const shades = [ + colors.blue_shade_lightest, + colors.blue_shade_lighter, + colors.blue_shade_light, + colors.blue_shade_medium, + colors.blue, + colors.blue_shade_dark, + colors.blue_shade_darker, + colors.blue_shade_darkest + ]; + return shades.slice(); +} + +/** + * Returns a list of 8 sequential magenta hues for data visualization based on Urban's style guide + * @returns {string[]} - An array of colors + */ +function getMagentas() { + const shades = [ + colors.magenta_shade_lightest, + colors.magenta_shade_lighter, + colors.magenta_shade_light, + colors.magenta_shade_medium, + colors.magenta, + colors.magenta_shade_dark, + colors.magenta_shade_darker, + colors.magenta_shade_darkest + ]; + return shades.slice(); +} + +/** + * Returns a list of 8 sequential gray hues for data visualization based on Urban's style guide + * @returns {string[]} - An array of colors + */ +function getGrays() { + const shades = [ + colors.gray_shade_lightest, + colors.gray_shade_lighter, + colors.gray_shade_light, + colors.gray_shade_medium, + colors.gray, + colors.gray_shade_dark, + colors.gray_shade_darker, + colors.gray_shade_darkest + ]; + return shades.slice(); +} + +/** + * Returns a list of 8 sequential yellow hues for data visualization based on Urban's style guide + * @returns {string[]} - An array of colors + */ +function getYellows() { + const shades = [ + colors.yellow_shade_lightest, + colors.yellow_shade_lighter, + colors.yellow_shade_light, + colors.yellow_shade_medium, + colors.yellow, + colors.yellow_shade_dark, + colors.yellow_shade_darker, + colors.yellow_shade_darkest + ]; + return shades.slice(); +} + +/** + * Returns a list of 8 sequential green hues for data visualization based on Urban's style guide + * @returns {string[]} - An array of colors + */ +function getGreens() { + const shades = [ + colors.green_shade_lightest, + colors.green_shade_lighter, + colors.green_shade_light, + colors.green_shade_medium, + colors.green, + colors.green_shade_dark, + colors.green_shade_darker, + colors.green_shade_darkest + ]; + return shades.slice(); +} + +/** + * Returns a list of 8 sequential spaceGray hues for data visualization based on Urban's style guide + * @returns {string[]} - An array of colors + */ +function getSpaceGrays() { + const shades = [ + colors.space_gray_shade_lightest, + colors.space_gray_shade_lighter, + colors.space_gray_shade_light, + colors.space_gray, + colors.space_gray_shade_medium_dark, + colors.space_gray_shade_dark, + colors.space_gray_shade_darker, + colors.space_gray_shade_darkest + ]; + return shades.slice(); +} + +/** + * Returns a list of 8 sequential red hues for data visualization based on Urban's style guide + * @returns {string[]} - An array of colors + */ +function getReds() { + const shades = [ + colors.red_shade_lightest, + colors.red_shade_lighter, + colors.red_shade_light, + colors.red_shade_medium, + colors.red, + colors.red_shade_dark, + colors.red_shade_darker, + colors.red_shade_darkest + ]; + return shades.slice(0, numColors); +} + +/** + * Generates a diverging yellow and blue color palette for data visualization based on Urban's style guide + * @returns {string[]} - An array of colors + */ +function getDivergingColors() { + return [ + colors.yellow_shade_darker, + colors.yellow, + colors.yellow_shade_light, + colors.yellow_shade_lightest, + colors.blue_shade_lightest, + colors.blue_shade_light, + colors.blue, + colors.blue_shade_darker + ]; +} + +/** + * Creates a list of up to 6 categorical colors for data visualization based on Urban's style guide + * @param {number} [numColors=6] - The number of colors to return - must be 6 or less + * @returns {string[]} - An array of colors + */ +function getCategoricalColors(numColors = 6) { + if (numColors > 6) { + console.warn( + "If you need more than 6 colors, you'll need to construct your own palette by using the colors object exported from this module." + ); + throw new Error("getCategoricalColors only supports up to 6 colors."); + } + if (numColors < 2) { + throw new Error("getCategoricalColors must have at least 2 colors."); + } + + if (numColors === 2) { + return [colors.blue, colors.yellow]; + } + if (numColors === 3) { + return [colors.blue, colors.yellow, colors.magenta]; + } + if (numColors === 4) { + return [colors.blue, colors.yellow, colors.magenta, colors.green]; + } + if (numColors === 5) { + return [colors.blue, colors.yellow, colors.magenta, colors.green, colors.blue_shade_darker]; + } + return [ + colors.blue, + colors.yellow, + colors.magenta, + colors.green, + colors.blue_shade_darker, + colors.space_gray + ]; +} + +/** + * Creates a list of 5 blues optimized for mapping. + * @returns {string[]} - An array of colors + */ +function getMapBlues() { + return [ + colors.blue_shade_lightest, + colors.blue_shade_light, + colors.blue, + colors.blue_shade_darker, + colors.black + ]; +} + +export default { + ...colors, + getBlues, + getMagentas, + getGrays, + getGreens, + getYellows, + getGrays, + getSpaceGrays, + getReds, + getCategoricalColors, + getDivergingColors, + getMapBlues +}; diff --git a/src/lib/utils/index.js b/src/lib/utils/index.js new file mode 100644 index 00000000..65e4496e --- /dev/null +++ b/src/lib/utils/index.js @@ -0,0 +1 @@ +export { default as urbanColors } from "./colors.js"; diff --git a/src/stories/Colors.mdx b/src/stories/Colors.mdx new file mode 100644 index 00000000..70734aa5 --- /dev/null +++ b/src/stories/Colors.mdx @@ -0,0 +1,233 @@ +import { Meta, ColorPalette, ColorItem } from "@storybook/blocks"; +import { urbanColors } from "$lib/utils"; + + + +# Colors + +The colors utility module provides easy access to the Urban Institute's brand colors. For best practices on selecting colors for data visualizations, see the [Urban Institute Data Visualizaton Styleguide](https://urbaninstitute.github.io/graphics-styleguide/#color). + +To use these, utilities, import the module like so: + +```js +import { urbanColors } from "@urbaninstitute/dataviz-components/utils"; +``` + +## Primary Colors + + + + + + + +Any color can be used directly from the `urbanColors` object: + +```js +// equal to "#1696D2" +const blue = urbanColors.blue; + +// equal to "#EC00BB" +const magenta = urbanColors.magenta; +``` + + +## Color shades + +Each of Urban's primary colors also comes in a range of different shades. These can be useful for different data visualization scenarios. + + + + + + +Usage: +```js +urbanColors.getBlues(); +``` + + + + + +Usage: +```js +urbanColors.getGrays(); +``` + + + + + +Usage: +```js +urbanColors.getYellows(); +``` + + + + + +Usage: +```js +urbanColors.getMagentas(); +``` + + + + + +Usage: +```js +urbanColors.getGreens(); +``` + + + + + +Usage: +```js +urbanColors.getSpaceGrays(); +``` + +## DataViz Helpers + +Below are a few helper functions to generate some useful default color palettes. + + + + + + +Usage: +```js +urbanColors.getCategoricalColors(); +``` + +This function generates a 6 color palette by default, but you can specify any number between 2 and 6. + + + + + +Usage: +```js +urbanColors.getCategoricalColors(2); +``` + + + + + +Usage: +```js +urbanColors.getCategoricalColors(3); +``` + + + + + +Usage: +```js +urbanColors.getCategoricalColors(4); +``` + + + + + +Usage: +```js +urbanColors.getCategoricalColors(5); +``` + +## Diverging colors + + + + + +Usage: +```js +urbanColors.getDivergingColors(); +``` + +## Blues for maps + +The style guide specifies a specific set of colors for usage in choropleth maps. + + + + + +Usage: +```js +urbanColors.getMapBlues(); +```