@kiva/kv-tokens 1.3.3 → 2.1.0

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.1.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@2.0.1...@kiva/kv-tokens@2.1.0) (2022-06-23)
+
+
+### Features
+
+* adding tailwind line-clamp ([#186](https://github.com/kiva/kv-ui-elements/issues/186)) ([a18aa7c](https://github.com/kiva/kv-ui-elements/commit/a18aa7c87a5d92166d9565806da4d385795136ed))
+
+
+
+
+
+## [2.0.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@2.0.0...@kiva/kv-tokens@2.0.1) (2022-02-16)
+
+
+### Bug Fixes
+
+* **KvTokens:** adjust prose styles to override new tailwind/typography defaults ([#176](https://github.com/kiva/kv-ui-elements/issues/176)) ([bdef740](https://github.com/kiva/kv-ui-elements/commit/bdef7403575df7c9a7b3ef0891a8262f7d503bd5))
+* set correct module type for importing the package ([ef7e828](https://github.com/kiva/kv-ui-elements/commit/ef7e82876544f9016a09e743d68da3451e1ab3d6))
+
+
+
+
+
+# [2.0.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@1.3.3...@kiva/kv-tokens@2.0.0) (2022-02-03)
+
+
+* feat!: upgrade Tailwind to v3 ([18c1653](https://github.com/kiva/kv-ui-elements/commit/18c1653565eb42b8abfaaba6b3712173ff341850))
+
+
+### BREAKING CHANGES
+
+* Tailwind dependency is now v3
+
+
+
+
+
 ## [1.3.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@1.3.2...@kiva/kv-tokens@1.3.3) (2022-02-03)
 
 **Note:** Version bump only for package @kiva/kv-tokens

package/README.md

@@ -3,7 +3,7 @@
 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 v3 project.
+-   A custom Tailwind configuration set to Kiva's style guide that can be used as a preset for your Tailwind project.
 
 ## Install
 

package/configs/{kivaColors.js → kivaColors.cjs}

@@ -1,4 +1,4 @@
-const { hexToRGB } = require('./util');
+const { hexToRGB } = require('./util.cjs');
 const designtokens = require('../primitives.json');
 
 const {

package/configs/{kivaTypography.js → kivaTypography.cjs}

@@ -1,4 +1,4 @@
-const { rem, em } = require('./util');
+const { rem, em } = require('./util.cjs');
 const designtokens = require('../primitives.json');
 
 const {
@@ -210,18 +210,20 @@ const proseOverrides = () => ({
 			a: false,
 			strong: false,
 			b: false,
-			'ol > li::before': {
+			'ol > li::marker': {
 				fontWeight: false,
 				color: false,
 			},
-			'ul > li::before': {
-				backgroundColor: textBaseColor,
+			'ul > li::marker': {
+				color: false,
+				fontSize: textStyles.textSubhead.fontSize,
+				lineHeight: 1,
 			},
 			hr: {
 				borderColor: false,
 			},
 			blockquote: {
-				...textStyles.textSubhead,
+				fontWeight: false,
 				fontStyle: 'italic',
 				color: false,
 				borderLeftWidth: false,
@@ -239,11 +241,14 @@ const proseOverrides = () => ({
 			'blockquote p:last-of-type::after': {
 				visibility: 'hidden',
 			},
-			h1: textStyles.textH1,
-			h2: textStyles.textH2,
-			h3: textStyles.textH3,
-			h4: textStyles.textH4,
-			'figure figcaption': textStyles.textSmall,
+			h1: false,
+			h2: false,
+			h3: false,
+			h4: false,
+			figcaption: {
+				fontSize: false,
+				lineHeight: false,
+			},
 			code: {
 				color: false,
 			},
@@ -265,23 +270,27 @@ const proseOverrides = () => ({
 			},
 			h1: {
 				fontSize: false,
+				letterSpacing: false,
 				marginTop: '0',
 				marginBottom: rem(space[4]),
 				color: textBaseColor,
 			},
 			h2: {
 				fontSize: false,
+				letterSpacing: false,
 				marginTop: rem(space[4]),
 				marginBottom: rem(space[4]),
 				color: textBaseColor,
 			},
 			h3: {
 				fontSize: false,
+				letterSpacing: false,
 				marginTop: rem(space[4]),
 				marginBottom: rem(space[2]),
 				color: textBaseColor,
 			},
 			h4: {
+				letterSpacing: false,
 				marginTop: false,
 				marginBottom: rem(space[4]),
 				color: textBaseColor,
@@ -322,21 +331,23 @@ const proseOverrides = () => ({
 			ol: {
 				marginTop: rem(space[4]),
 				marginBottom: rem(space[4]),
+				paddingLeft: em(18, 16),
+			},
+			'ol > li': {
+				paddingLeft: em(10, 16),
 			},
 			ul: {
 				marginTop: rem(space[4]),
 				marginBottom: rem(space[4]),
+				paddingLeft: em(18, 16),
+			},
+			'ul > li': {
+				paddingLeft: em(10, 16),
 			},
 			li: {
 				marginTop: rem(space[2]),
 				marginBottom: rem(space[2]),
 			},
-			'ul > li::before': {
-				width: em(6, 16),
-				height: em(6, 16),
-				top: '0.5em',
-				left: em(4, 16),
-			},
 			'> ul > li p': {
 				marginTop: em(12, 16),
 				marginBottom: em(12, 16),
@@ -392,7 +403,7 @@ const proseOverrides = () => ({
 		},
 		],
 	},
-	// Our typography breakpoints are handled elsewhere.
+	// Our typography breakpoints are handled by our default styles (e.g. textH1, textBase, etc.).
 	// No need to use `<div class="prose prose-sm prose-lg prose-xl">. Only <div class="prose">
 	sm: false,
 	lg: false,

package/configs/{tailwind.config.js → tailwind.config.cjs}

@@ -1,9 +1,10 @@
 const plugin = require('tailwindcss/plugin');
 const typographyPlugin = require('@tailwindcss/typography');
-const kivaTypography = require('./kivaTypography');
-const { defaultTheme, buildColorChoices } = require('./kivaColors');
+const lineClampPlugin = require('@tailwindcss/line-clamp');
+const kivaTypography = require('./kivaTypography.cjs');
+const { defaultTheme, buildColorChoices } = require('./kivaColors.cjs');
 const designtokens = require('../primitives.json');
-const { rem } = require('./util');
+const { rem } = require('./util.cjs');
 
 const {
 	fonts,
@@ -162,6 +163,7 @@ module.exports = {
 	},
 	plugins: [
 		typographyPlugin, // prose plugin. See overrides in theme.extend.typography
+		lineClampPlugin,
 		plugin(({ addBase, addUtilities }) => {
 			const { webFonts, textStyles, textBaseColor } = kivaTypography;
 			addBase(webFonts);
@@ -182,6 +184,8 @@ module.exports = {
 				code: {
 					fontSize: '0.875em',
 				},
+				blockquote: textStyles.textSubhead,
+				'figure figcaption': textStyles.textSmall,
 				'button:focus': {
 					outline: 'revert', // undo tailwind button focus styling
 				},

package/package.json

@@ -1,13 +1,18 @@
 {
     "name": "@kiva/kv-tokens",
-    "version": "1.3.3",
+    "version": "2.1.0",
+    "type": "module",
     "publishConfig": {
         "access": "public"
     },
     "main": "index.js",
+    "scripts": {
+        "test": "echo No tests specified for @kiva/kv-tokens."
+    },
     "dependencies": {
+        "@tailwindcss/line-clamp": "^0.4.0",
         "@tailwindcss/typography": "^0.5.1",
         "tailwindcss": "^3.0.18"
     },
-    "gitHead": "21cdf3869c0ef1513cb957e21732aeecd912c355"
+    "gitHead": "5c86f86ecd7a78899659fe0e13749e81ad22926d"
 }