Merge pull request #4 from UrbanInstitute/colors

Add color ultility module

.prettierrc

@@ -1,5 +1,5 @@
 {
-	"useTabs": true,
+	"tabWidth": 2,
 	"singleQuote": false,
 	"trailingComma": "none",
 	"printWidth": 100,

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

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": [

src/lib/BasicDropdown/BasicDropdown.svelte

@@ -1,14 +1,15 @@
 <script>
-	import { createEventDispatcher } from "svelte";
-	import "$lib/style/app.css";
+  import { createEventDispatcher } from "svelte";
+  import { urbanColors } from "$lib/utils";
+  import "$lib/style/app.css";
 
-	// define arguments
+  // define arguments
 
-	/**
+  /**
    * Unique id given to the dropdown DOM node
-	 * @type {string}
-	 */
-	export let id;
+   * @type {string}
+   */
+  export let id;
 
 	/**
    * Binds to the current value for the dropdown (data.value)
@@ -44,7 +45,7 @@
    * Hex color for arrow fill 
 	 * @type {string}
    */
-	export let arrow_fill_color = "#1696D1";
+	export let arrow_fill_color = urbanColors.blue;
 
 	// create dispatcher
 	const dispatch = createEventDispatcher();

src/lib/Scorecard/Scorecard.svelte

@@ -1,92 +1,92 @@
 <script>
   import "$lib/style/app.css";
-	/**
-	 * @type {string} Scorecard value
-	 */
-	export let value;
-	/**
-	 * @type {string} Scorecard label
-	 */
-	export let label;
+  /**
+   * @type {string} Scorecard value
+   */
+  export let value;
+  /**
+   * @type {string} Scorecard label
+   */
+  export let label;
 </script>
 
 <div class="scorecard-container">
-	<!-- scorecard value -->
-	{#if value}
-		<div class="scorecard-number">
-			<div class="scorecard-number-inner">
-				{value}
-			</div>
-		</div>
-	{/if}
-	<!-- scorecard label -->
-	{#if label}
-		<div class="scorecard-text-group font-light">
-			<div class="scorecard-text">
-				{label}
-			</div>
-		</div>
-	{/if}
+  <!-- scorecard value -->
+  {#if value}
+    <div class="scorecard-number">
+      <div class="scorecard-number-inner">
+        {value}
+      </div>
+    </div>
+  {/if}
+  <!-- scorecard label -->
+  {#if label}
+    <div class="scorecard-text-group font-light">
+      <div class="scorecard-text">
+        {label}
+      </div>
+    </div>
+  {/if}
 </div>
 
 <style>
-	.scorecard-container {
-		display: flex;
-		flex-direction: row;
-		gap: 2px;
-		max-height: var(--spacing-20);
-		height: var(--spacing-20);
-	}
+  .scorecard-container {
+    display: flex;
+    flex-direction: row;
+    gap: 2px;
+    max-height: var(--spacing-20);
+    height: var(--spacing-20);
+  }
 
-	.scorecard-number {
-		display: flex;
-		align-items: center;
-		font-size: var(--font-size-4xl);
-		font-weight: var(--font-weight-bold);
-		height: var(--spacing-20);
-		color: var(--color-white);
-		background-color: var(--color-blue-shade-darker);
-		padding: 0 1rem;
-		text-decoration: underline;
-		text-underline-offset: var(--spacing-2);
-		text-decoration-color: var(--color-blue);
-		text-decoration-thickness: var(--spacing-1);
-	}
-	.scorecard-number-inner {
-		transform: translateY(-6px);
-	}
+  .scorecard-number {
+    display: flex;
+    align-items: center;
+    font-size: var(--font-size-4xl);
+    font-weight: var(--font-weight-bold);
+    height: var(--spacing-20);
+    color: var(--color-white);
+    background-color: var(--color-blue-shade-darker);
+    padding: 0 1rem;
+    text-decoration: underline;
+    text-underline-offset: var(--spacing-2);
+    text-decoration-color: var(--color-blue);
+    text-decoration-thickness: var(--spacing-1);
+  }
+  .scorecard-number-inner {
+    transform: translateY(-6px);
+  }
 
-	.scorecard-text-group {
-		display: flex;
-		align-items: center;
-		height: var(--spacing-20);
-		background-color: var(--color-gray-shade-light);
-	}
+  .scorecard-text-group {
+    display: flex;
+    align-items: center;
+    height: var(--spacing-20);
+    background-color: var(--color-gray-shade-light);
+  }
 
-	.scorecard-text {
-		font-size: var(--font-size-3xl);
-		overflow: nowrap;
-		padding: 0 var(--spacing-4);
-		text-transform: uppercase;
-	}
+  .scorecard-text {
+    font-size: var(--font-size-3xl);
+    overflow: nowrap;
+    padding: 0 var(--spacing-4);
+    text-transform: uppercase;
+  }
 
-	/* on smaller screens, reduce font size so there's no vertical stacking */
-	@media screen and (max-width: 450px) {
-		.scorecard-text {
-			font-size: var(--font-size-2xl);
-		}
-	}
+  /* on smaller screens, reduce font size so there's no vertical stacking */
+  @media screen and (max-width: 450px) {
+    .scorecard-text {
+      font-size: var(--font-size-2xl);
+    }
+  }
 
-	@media screen and (max-width: 376px) {
-		.scorecard-number {
-			height: var(--spacing-16);
-		}
-		.scorecard-container {
-			height: var(--spacing-16);
-			max-height: var(--spacing-16);
-		}
-		.scorecard-text-group {
-			height: var(--spacing-16);
-		}
-	}
+  @media screen and (max-width: 376px) {
+    .scorecard-number {
+      height: var(--spacing-16);
+    }
+    .scorecard-container {
+      height: var(--spacing-16);
+      max-height: var(--spacing-16);
+    }
+    .scorecard-text-group {
+      height: var(--spacing-16);
+    }
+  }
 </style>

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;