@kiva/kv-tokens 0.11.1 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.13.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@0.12.0...@kiva/kv-tokens@0.13.0) (2021-10-01)
+
+
+### Features
+
+* **KvTokens:** Add lg (40px) border radius ([9aa3c89](https://github.com/kiva/kv-ui-elements/commit/9aa3c89de329ad434b7022a2288aaa38af91056b))
+* **KvTokens:** Improve border-tertiary visibility in mint theme ([b216817](https://github.com/kiva/kv-ui-elements/commit/b216817e6132c8d3cbc8246feb3d61da724ff319))
+
+
+
+
+
+# [0.12.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@0.11.3...@kiva/kv-tokens@0.12.0) (2021-09-14)
+
+
+### Features
+
+* **KvThemeProvider:** Add darkGreen theme ([8eaf80c](https://github.com/kiva/kv-ui-elements/commit/8eaf80cd9063d6f4468b131464ca1b7f5d127360))
+
+
+
+
+
+## [0.11.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@0.11.2...@kiva/kv-tokens@0.11.3) (2021-09-14)
+
+**Note:** Version bump only for package @kiva/kv-tokens
+
+
+
+
+
+## [0.11.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@0.11.1...@kiva/kv-tokens@0.11.2) (2021-09-08)
+
+**Note:** Version bump only for package @kiva/kv-tokens
+
+
+
+
+
 ## [0.11.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@0.11.0...@kiva/kv-tokens@0.11.1) (2021-09-01)
 
 

package/README.md

@@ -0,0 +1,52 @@
+# kv-tokens
+
+The package contains
+
+-   A JSON file specifying the design definitions of Kiva's style guide.
+-   A custom Tailwind configuration set to Kiva's style guide that can be used as a preset for your Tailwind project.
+
+## Install
+
+`npm i --save-dev @kiva/kv-tokens`
+
+## Using the Design Definitions
+
+```js
+const designTokens = require("@kiva/kv-tokens/primitives.json");
+
+const primaryTextColor = designTokens.colors.theme.DEFAULT.text.primary;
+```
+
+## Using the Tailwind Preset
+
+```js
+// tailwind.config.js
+module.exports = {
+	presets: [require("@kiva/kv-tokens/configs/tailwind.config")],
+	// Project-specific customizations
+	theme: {
+		//...
+	},
+	purge: [
+		//...
+	],
+	// ...
+};
+```
+
+See the [Tailwind documentation](https://tailwindcss.com/docs/configuration#presets) for more information on using a preset.
+
+### Notable Config Differences
+
+Our Tailwind config has some differences to the standard install. Notably
+
+-   All Tailwind classes are prefixed with "tw-". E.g., `tw-mb-1` instead of `mb-1`.
+-   Themable color names instead of the default Tailwind colors. E.g., `tw-bg-primary` instead of `tw-bg-gray-500`.
+    See our [Storybook](https://main--608b4cf87f686c00213841b1.chromatic.com/?path=/docs/base-styling-primitives--primitives) for possible names.
+-   Our spacing scale is based on 8px rather Tailwind's default 4px.
+
+## Contribution Guidelines
+
+The Kiva UI project is bound by a [Code of Conduct](https://github.com/kiva/ui/blob/master/code_of_conduct.md).
+
+Kiva welcomes outside contributions to our UI repository. If you have any ideas for a feature or improvement, create an issue and we can discuss whether it makes sense to create a pull request. Thanks for the help!

package/configs/kivaColors.js

@@ -1,15 +1,18 @@
 const { hexToRGB } = require('./util');
 const designtokens = require('../primitives.json');
 
-const defaultTheme = designtokens.colors.theme.DEFAULT;
-const darkTheme = designtokens.colors.theme.dark;
-const mintTheme = designtokens.colors.theme.mint;
+const {
+	DEFAULT: defaultThemeTokens,
+	dark: darkThemeTokens,
+	'dark-green': darkGreenThemeTokens,
+	mint: mintThemeTokens,
+} = designtokens.colors.theme;
 
 /**
  * Loops through a theme object and builds a set of CSS custom properties
  * They will be referenced by Tailwind classes.
  */
-const buildCSSCustomPropertiesFromTheme = (theme) => {
+const buildCSSVarsFromTokens = (theme) => {
 	const customProperties = {};
 	const themeCategories = Object.keys(theme);
 
@@ -27,14 +30,10 @@ const buildCSSCustomPropertiesFromTheme = (theme) => {
 	return customProperties;
 };
 
-/**
- * An object containing CSS custom properties for all themes in our primitives file.
- */
-const kivaThemes = {
-	default: buildCSSCustomPropertiesFromTheme(defaultTheme),
-	dark: buildCSSCustomPropertiesFromTheme(darkTheme),
-	mint: buildCSSCustomPropertiesFromTheme(mintTheme),
-};
+const defaultTheme = buildCSSVarsFromTokens(defaultThemeTokens);
+const darkTheme = buildCSSVarsFromTokens(darkThemeTokens);
+const mintTheme = buildCSSVarsFromTokens(mintThemeTokens);
+const darkGreenTheme = buildCSSVarsFromTokens(darkGreenThemeTokens);
 
 // function to allow background opacity and text opacity with tailwind colors
 // https://www.youtube.com/watch?v=MAtaT8BZEAo
@@ -73,7 +72,7 @@ const buildColorChoices = (themeProperty) => {
 	const property = {};
 	// themable properties
 	// Read from the default theme since it will have all of the keys
-	Object.keys(defaultTheme[themeProperty]).forEach((key) => {
+	Object.keys(defaultThemeTokens[themeProperty]).forEach((key) => {
 		property[key] = withOpacity(`--${twPrefix}-${key}`);
 	});
 	return property;
@@ -81,5 +80,8 @@ const buildColorChoices = (themeProperty) => {
 
 module.exports = {
 	buildColorChoices,
-	kivaThemes,
+	defaultTheme,
+	darkTheme,
+	darkGreenTheme,
+	mintTheme,
 };

package/configs/tailwind.config.js

@@ -1,7 +1,7 @@
 const plugin = require('tailwindcss/plugin');
 const typographyPlugin = require('@tailwindcss/typography');
 const kivaTypography = require('./kivaTypography');
-const { kivaThemes, buildColorChoices } = require('./kivaColors');
+const { defaultTheme, buildColorChoices } = require('./kivaColors');
 const designtokens = require('../primitives.json');
 const { rem } = require('./util');
 
@@ -87,7 +87,7 @@ module.exports = {
 			sm: rem(radii.sm),
 			DEFAULT: rem(radii.default),
 			// md: '0.375rem',
-			// lg: '0.5rem',
+			lg: rem(radii.lg),
 			// xl: '0.75rem',
 			// '2xl': '1rem',
 			// '3xl': '1.5rem',
@@ -194,10 +194,7 @@ module.exports = {
 			addBase({
 				// add our default theme CSS color properties to the root
 				// so they'll available for Tailwind classes
-				':root': {
-					...kivaThemes.static, // static colors
-					...kivaThemes.default, // themable colors
-				},
+				':root': defaultTheme, // themable colors
 			});
 			addUtilities({
 				'.text-base': textStyles.textBase,

package/package.json

@@ -1,19 +1,13 @@
 {
     "name": "@kiva/kv-tokens",
-    "version": "0.11.1",
+    "version": "0.13.0",
     "publishConfig": {
         "access": "public"
     },
     "main": "index.js",
-    "scripts": {
-        "tailwind-config-viewer": "tailwind-config-viewer -o -c ./configs/tailwind.config.js"
-    },
     "dependencies": {
         "@tailwindcss/typography": "^0.4.0",
         "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0"
     },
-    "devDependencies": {
-        "tailwind-config-viewer": "^1.5.1"
-    },
-    "gitHead": "6a299a0c658379827cae3e681848ed9f39db8288"
+    "gitHead": "539035ff1ab0c4a0ef4ca2598e5506677ea8d9c9"
 }

package/primitives.json

@@ -103,6 +103,21 @@
 				},
 				"background": {
 					"primary": "#95D4B3"
+				},
+				"border": {
+					"tertiary": "#4AB67E"
+				}
+			},
+			"dark-green": {
+				"text": {
+					"primary": "#F5F5F5",
+					"primary-inverse": "#212121",
+					"secondary": "#9E9E9E"
+				},
+				"background": {
+					"primary": "#2AA967",
+					"primary-inverse": "#F5F5F5",
+					"secondary": "#228752"
 				}
 			}
 		}
@@ -222,7 +237,8 @@
 	"shadows": {},
 	"radii": {
 		"sm": 4,
-		"default": 14
+		"default": 14,
+		"lg": 40
 	},
 	"opacity": {
 		"default": 1,