@kiva/kv-tokens 2.16.1 → 3.1.0

package/.eslintrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+	extends: [
+		'../../.eslintrc.cjs',
+	],
+	rules: {
+		'import/extensions': ['error', 'always'],
+	},
+};

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.1.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.0.0...@kiva/kv-tokens@3.1.0) (2025-01-21)
+
+
+### Features
+
+* **kv-tokens:** export configs from main ([f405e6d](https://github.com/kiva/kv-ui-elements/commit/f405e6def81d504d7558068f8aba52b1388b073b))
+
+
+
+
+
+# [3.0.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@2.16.1...@kiva/kv-tokens@3.0.0) (2025-01-17)
+
+
+* refactor(kv-tokens)!: convert all modules to esm ([f09dd82](https://github.com/kiva/kv-ui-elements/commit/f09dd821e4060570767abb490db45836ecd9b80a))
+
+
+### BREAKING CHANGES
+
+* modules now use import/export and .js extensions
+
+
+
+
+
 ## [2.16.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@2.16.0...@kiva/kv-tokens@2.16.1) (2025-01-04)
 
 

package/README.md

@@ -12,7 +12,7 @@ The package contains
 ## Using the Design Definitions
 
 ```js
-const designTokens = require("@kiva/kv-tokens/primitives.json");
+import designTokens from '@kiva/kv-tokens';
 
 const primaryTextColor = designTokens.colors.theme.DEFAULT.text.primary;
 ```
@@ -21,8 +21,10 @@ const primaryTextColor = designTokens.colors.theme.DEFAULT.text.primary;
 
 ```js
 // tailwind.config.js
-module.exports = {
-	presets: [require("@kiva/kv-tokens/configs/tailwind.config")],
+import { tailwindConfig } from "@kiva/kv-tokens";
+
+export default {
+	presets: [tailwindConfig],
 	// Project-specific customizations
 	theme: {
 		//...

package/build/{build.cjs → build.js}

@@ -1,7 +1,7 @@
-const fs = require('node:fs');
-const primitives = require('../primitives.json');
-const { generateExternalSVG } = require('../configs/kivaHeadingUnderline.cjs');
-const { flattenJSON } = require('../configs/util.cjs');
+import fs from 'node:fs';
+import designTokens from '../primitives.js';
+import { generateExternalSVG } from '../configs/kivaHeadingUnderline.js';
+import { flattenJSON } from '../configs/util.js';
 
 // Note: dir is relative to the root of the kv-tokens package
 const dir = '../../dist/kvui';
@@ -17,7 +17,7 @@ fs.writeFileSync(`${dir}/heading-underline.svg`, svg);
 
 // Generate SCSS variables
 const today = new Date().toUTCString();
-const variables = flattenJSON(primitives);
+const variables = flattenJSON(designTokens);
 const scss = Object.keys(variables)
 	.map((key) => `$${key.toLowerCase().replace('.', '-')}: ${variables[key]};`)
 	.join('\n');

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

@@ -1,5 +1,5 @@
-const { hexToRGB } = require('./util.cjs');
-const designtokens = require('../primitives.json');
+import { hexToRGB } from './util.js';
+import designTokens from '../primitives.js';
 
 const {
 	DEFAULT: defaultThemeTokens,
@@ -13,7 +13,7 @@ const {
 	mint: mintThemeTokens,
 	'dark-mint': darkMintThemeTokens,
 	'dark-stone': darkStoneThemeTokens,
-} = designtokens.colors.theme;
+} = designTokens.colors.theme;
 
 /**
  * Loops through a theme object and builds a set of CSS custom properties
@@ -42,17 +42,17 @@ const buildCSSVarsFromTokens = (theme) => {
 	return customProperties;
 };
 
-const defaultTheme = buildCSSVarsFromTokens(defaultThemeTokens);
-const greenLightTheme = buildCSSVarsFromTokens(greenLightThemeTokens);
-const greenDarkTheme = buildCSSVarsFromTokens(greenDarkThemeTokens);
-const marigoldLightTheme = buildCSSVarsFromTokens(marigoldLightThemeTokens);
-const stoneLightTheme = buildCSSVarsFromTokens(stoneLightThemeTokens);
-const stoneDarkTheme = buildCSSVarsFromTokens(stoneDarkThemeTokens);
-const darkTheme = buildCSSVarsFromTokens(darkThemeTokens);
-const mintTheme = buildCSSVarsFromTokens(mintThemeTokens);
-const darkGreenTheme = buildCSSVarsFromTokens(darkGreenThemeTokens);
-const darkMintTheme = buildCSSVarsFromTokens(darkMintThemeTokens);
-const darkStoneTheme = buildCSSVarsFromTokens(darkStoneThemeTokens);
+export const defaultTheme = buildCSSVarsFromTokens(defaultThemeTokens);
+export const greenLightTheme = buildCSSVarsFromTokens(greenLightThemeTokens);
+export const greenDarkTheme = buildCSSVarsFromTokens(greenDarkThemeTokens);
+export const marigoldLightTheme = buildCSSVarsFromTokens(marigoldLightThemeTokens);
+export const stoneLightTheme = buildCSSVarsFromTokens(stoneLightThemeTokens);
+export const stoneDarkTheme = buildCSSVarsFromTokens(stoneDarkThemeTokens);
+export const darkTheme = buildCSSVarsFromTokens(darkThemeTokens);
+export const mintTheme = buildCSSVarsFromTokens(mintThemeTokens);
+export const darkGreenTheme = buildCSSVarsFromTokens(darkGreenThemeTokens);
+export const darkMintTheme = buildCSSVarsFromTokens(darkMintThemeTokens);
+export const darkStoneTheme = buildCSSVarsFromTokens(darkStoneThemeTokens);
 
 // function to allow background opacity and text opacity with tailwind colors
 // https://www.youtube.com/watch?v=MAtaT8BZEAo
@@ -82,7 +82,7 @@ const withOpacity = (variableName) => ({ opacityValue }) => {
  *   ...
  * }
  */
-const buildColorChoices = (themeProperty) => {
+export const buildColorChoices = (themeProperty) => {
 	let twPrefix = themeProperty;
 	if (themeProperty === 'background') {
 		twPrefix = 'bg';
@@ -96,18 +96,3 @@ const buildColorChoices = (themeProperty) => {
 	});
 	return property;
 };
-
-module.exports = {
-	buildColorChoices,
-	defaultTheme,
-	greenLightTheme,
-	greenDarkTheme,
-	marigoldLightTheme,
-	stoneLightTheme,
-	stoneDarkTheme,
-	darkTheme,
-	darkGreenTheme,
-	mintTheme,
-	darkMintTheme,
-	darkStoneTheme,
-};

package/configs/kivaHeadingUnderline.js

@@ -0,0 +1,55 @@
+import designTokens from '../primitives.js';
+import { base64 } from './util.js';
+import underlinePath from './underlinePath.js';
+
+const { colors } = designTokens;
+const svgOpenTag = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 921 16" preserveAspectRatio="none">';
+
+/*
+ * Generates an SVG string for brush-stroke underlines, with colors from each theme. This is
+ * achieved by creating one path for the brush stroke, and then using multiple <use> elements to
+ * reference the path and fill it with the desired color (a sprite sheet technique from
+ * https://css-tricks.com/svg-fragment-identifiers-work/). The SVG is then used as a background
+ * image, and can be referenced by the color hex code, e.g. `url('/kvui/heading-underline.svg#2AA967')`.
+ * This allows us to use the same SVG for all themes, and change the color with CSS custom
+ * properties, rather than having to generate a new SVG for each color.
+ */
+export function generateExternalSVG() {
+	const { theme } = colors;
+	const themeColors = Object.keys(theme)
+		.filter((key) => theme[key]['heading-underline'])
+		.flatMap((key) => Object.values(theme[key]['heading-underline']));
+	const colorList = [...new Set(themeColors)];
+
+	const colorDefs = colorList.map((color) => {
+		return `<g id="${color.replace('#', '')}"><use href="#hu-path" fill="${color}" /></g>`;
+	});
+	return `${svgOpenTag}
+		<defs>
+			<style>
+				g { display: none; }
+				g:target { display: inline; }
+			</style>
+		</defs>
+		${colorDefs.join('')}
+		<symbol id="hu-path">
+			${underlinePath}
+		</symbol>
+	</svg>`;
+}
+
+/*
+ * Generates an inline-style SVG string for brush-stroke underlines, in one color only, to be used as a background image in css.
+ *
+ * THIS SHOULD ONLY BE USED FOR DEMO PURPOSES.
+ *
+ * This will greatly increase the size of your css file if used in production with multiple colors.
+ */
+export function generateInlineSVG(color) {
+	const svg = `${svgOpenTag}
+		<g fill="${color}">
+			${underlinePath}
+		</g>
+	</svg>`;
+	return `url('data:image/svg+xml;base64,${base64(svg)}')`;
+}

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

@@ -1,5 +1,5 @@
-const { rem, em } = require('./util.cjs');
-const designtokens = require('../primitives.json');
+import { rem, em } from './util.js';
+import designTokens from '../primitives.js';
 
 const {
 	fonts,
@@ -9,12 +9,12 @@ const {
 	lineHeights,
 	radii,
 	space,
-} = designtokens;
+} = designTokens;
 
 /**
  WEB FONT DEFINITIONS
 */
-const webFonts = [
+export const webFonts = [
 	// Note corresponding font weight in Tailwind is "normal"
 	{
 		'@font-face': {
@@ -61,12 +61,12 @@ const webFonts = [
 ];
 
 /** BASE TEXT COLOR */
-const textBaseColor = 'rgb(var(--text-primary))';
+export const textBaseColor = 'rgb(var(--text-primary))';
 
 /**
  REUSABLE TYPE STYLES
 */
-const textStyles = (() => {
+export const textStyles = (() => {
 	const textJumbo = {
 		fontFamily: fonts.serif,
 		fontWeight: fontWeights.medium,
@@ -234,7 +234,7 @@ See plugin styling here:
 https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
 */
 
-const proseOverrides = () => ({
+export const proseOverrides = () => ({
 	DEFAULT: {
 		css: [{
 			color: false,
@@ -448,10 +448,3 @@ const proseOverrides = () => ({
 	xl: false,
 	'2xl': false,
 });
-
-module.exports = {
-	webFonts,
-	textBaseColor,
-	textStyles,
-	proseOverrides,
-};

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

@@ -1,9 +1,14 @@
-const plugin = require('tailwindcss/plugin');
-const typographyPlugin = require('@tailwindcss/typography');
-const kivaTypography = require('./kivaTypography.cjs');
-const { defaultTheme, buildColorChoices } = require('./kivaColors.cjs');
-const designtokens = require('../primitives.json');
-const { rem } = require('./util.cjs');
+import plugin from 'tailwindcss/plugin.js';
+import typographyPlugin from '@tailwindcss/typography';
+import {
+	proseOverrides,
+	textBaseColor,
+	textStyles,
+	webFonts,
+} from './kivaTypography.js';
+import { defaultTheme, buildColorChoices } from './kivaColors.js';
+import designTokens from '../primitives.js';
+import { rem } from './util.js';
 
 const {
 	fonts,
@@ -15,9 +20,9 @@ const {
 	space,
 	radii,
 	zIndices,
-} = designtokens;
+} = designTokens;
 
-module.exports = {
+export default {
 	content: ['./**.*.js'],
 	prefix: 'tw-', // prefixes all tailwinds classes with tw. e.g., 'tw-flex tw-mb-2'
 	corePlugins: {
@@ -136,7 +141,7 @@ module.exports = {
 			lg: '0 4px 12px rgba(0, 0, 0, 0.08)',
 		},
 		extend: {
-			typography: kivaTypography.proseOverrides, // prose plugin overrides
+			typography: proseOverrides, // prose plugin overrides
 			height: {
 				40: rem(320),
 				57.5: rem(460),
@@ -182,7 +187,6 @@ module.exports = {
 	plugins: [
 		typographyPlugin, // prose plugin. See overrides in theme.extend.typography
 		plugin(({ addBase, addUtilities }) => {
-			const { webFonts, textStyles, textBaseColor } = kivaTypography;
 			addBase(webFonts);
 			addBase({
 				body: {