@kiva/kv-components 3.107.2 → 3.108.0

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.108.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.107.2...@kiva/kv-components@3.108.0) (2024-11-15)
+
+
+### Bug Fixes
+
+* change error text color for KvTextInput ([5dbf6ad](https://github.com/kiva/kv-ui-elements/commit/5dbf6ad72b436d7aabf868cf8bac0ed7f1439412))
+* color updates for default theme and KvButton ([e27b124](https://github.com/kiva/kv-ui-elements/commit/e27b1243e797322c95cf52f505787e6c9b5eceac))
+* handle underline styles for buttons and clickable loan cards ([ef4d19f](https://github.com/kiva/kv-ui-elements/commit/ef4d19f420b00201baf5e0c0dcd39194a2be970c))
+* more wip for ecosystem themes ([3fd83ab](https://github.com/kiva/kv-ui-elements/commit/3fd83ab38e0e9463c375a94fc84012fa38948cdb))
+* more wip work for new ecosystem themes ([90447d4](https://github.com/kiva/kv-ui-elements/commit/90447d471178b410637d8ba50d535180c8b03718))
+* secondary button styling ([4602efa](https://github.com/kiva/kv-ui-elements/commit/4602efac93b4755015b847090d1eb1e24d70c1d9))
+* switch vertical tab active color to action instead of action-highlight ([cc1e2d5](https://github.com/kiva/kv-ui-elements/commit/cc1e2d5b12f7981ffb7a8e724036c65bc0f60d6d))
+
+
+### Features
+
+* update styling for KvTextInput error state ([361cdba](https://github.com/kiva/kv-ui-elements/commit/361cdbacd2f56e1f38e330efe7425b4922c89443))
+* use external file for heading underline svg MP-544 MP-545 ([fad8f16](https://github.com/kiva/kv-ui-elements/commit/fad8f16b5555916624c26a24828ff39dcbc5edbf))
+* use green-3 and stone-3 for bg-secondary in dark themes ([d13d63e](https://github.com/kiva/kv-ui-elements/commit/d13d63e08346b936a1bb2bc61c4d3fc6c5a4e8d0))
+* wip initial pass at ecosystem themes ([680dbbc](https://github.com/kiva/kv-ui-elements/commit/680dbbc7aab575f9db43d7b10bdcba9003fd589e))
+
+
+
+
+
 ## [3.107.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.107.1...@kiva/kv-components@3.107.2) (2024-11-05)
 
 

package/dist/components/.storybook/main.js

@@ -7,6 +7,10 @@ const config = {
 		'../stories/**/*.stories.@(js|jsx|ts|tsx)'
 	],
 
+	staticDirs: [
+		'../../../../dist/assets',
+	],
+
 	addons: [
 		"@storybook/addon-links",
 		"@storybook/addon-essentials",
@@ -23,7 +27,7 @@ const config = {
 							'style-loader',
 							{
 								loader: 'css-loader',
-								options: { importLoaders: 1 }
+								options: { importLoaders: 1, url: false }
 							},
 							{
 								// Gets options from `postcss.config.js` in your project root

package/dist/components/KvButton.vue

@@ -5,7 +5,7 @@
 		:to="to"
 		:type="computedType"
 		:disabled="isDisabled"
-		class="hover:tw-no-underline focus:tw-no-underline tw-inline-block"
+		class="tw-no-underline hover:tw-no-underline focus:tw-no-underline tw-inline-block"
 		:class="{
 			'tw-opacity-low': state === 'disabled',
 			'tw-pointer-events-none': state === 'loading' || isDisabled
@@ -137,16 +137,16 @@ export default {
 					}
 					break;
 				case 'secondary':
-					classes = 'tw-text-primary';
+					classes = 'tw-text-action-highlight';
 					if (state.value === 'active') {
-						classes = `${classes} tw-bg-secondary tw-border-primary`;
+						classes = `${classes} tw-bg-secondary`;
 					} else {
 						// eslint-disable-next-line max-len
-						classes = `${classes} tw-bg-primary hover:tw-bg-secondary tw-border-tertiary hover:tw-border-primary`;
+						classes = `${classes} tw-bg-primary hover:tw-bg-secondary tw-border-action-highlight`;
 					}
 					break;
 				case 'danger':
-					classes = 'tw-text-primary-inverse';
+					classes = 'tw-text-danger';
 					if (state.value === 'active') {
 						classes = `${classes} tw-bg-danger-highlight tw-border-danger-highlight`;
 					} else {
@@ -157,9 +157,9 @@ export default {
 				case 'link':
 					classes = 'tw-bg-primary-inverse tw-text-primary-inverse';
 					if (state.value === 'active') {
-						classes = `${classes} tw-border-secondary`;
+						classes = `${classes} tw-border-secondary tw-bg-action`;
 					} else {
-						classes = `${classes} tw-border-primary hover:tw-border-secondary`;
+						classes = `${classes} tw-border-action-highlight hover:tw-border-action hover:tw-bg-action`;
 					}
 					break;
 				case 'ghost':
@@ -171,11 +171,12 @@ export default {
 					}
 					break;
 				case 'caution':
-					classes = 'tw-text-primary tw-border-transparent';
+					classes = 'tw-text-caution';
 					if (state.value === 'active') {
-						classes = `${classes} tw-bg-caution-highlight`;
+						classes = `${classes} tw-bg-caution-highlight tw-border-caution-highlight`;
 					} else {
-						classes = `${classes} tw-bg-caution hover:tw-bg-caution-highlight`;
+						// eslint-disable-next-line max-len
+						classes = `${classes} tw-bg-caution hover:tw-bg-caution-highlight tw-border-caution hover:tw-border-caution-highlight`;
 					}
 					break;
 			}

package/dist/components/KvClassicLoanCard.vue

@@ -90,7 +90,7 @@
 					:is="tag"
 					:to="readMorePath"
 					:href="readMorePath"
-					class="tw-flex hover:tw-no-underline focus:tw-no-underline"
+					class="tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline"
 					:class="{ 'tw-px-1': largeCard }"
 					aria-label="Loan tag"
 					@click.native="clickReadMore('Tag', $event)"
@@ -105,7 +105,7 @@
 					:is="tag"
 					:to="readMorePath"
 					:href="readMorePath"
-					class="loan-card-use tw-text-primary"
+					class="loan-card-use tw-no-underline tw-text-primary"
 					aria-label="Loan use"
 					@click.native="clickReadMore('Use', $event)"
 				>
@@ -183,7 +183,7 @@
 					v-if="unreservedAmount > 0"
 					:to="readMorePath"
 					:href="readMorePath"
-					class="loan-card-progress tw-mt-1"
+					class="loan-card-progress tw-no-underline tw-mt-1"
 					aria-label="Loan progress"
 					@click.native="clickReadMore('Progress', $event)"
 				>

package/dist/components/KvIntroductionLoanCard.vue

@@ -96,7 +96,7 @@
 					:to="readMorePath"
 					:href="readMorePath"
 					aria-label="Borrower name"
-					class="!tw-text-primary"
+					class="!tw-text-primary tw-no-underline"
 					@click.native="clickReadMore('Name', $event)"
 				>
 					<h3
@@ -136,7 +136,7 @@
 					v-else
 					:to="readMorePath"
 					:href="readMorePath"
-					class="tw-flex hover:tw-no-underline focus:tw-no-underline tw-justify-center"
+					class="tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline tw-justify-center"
 					aria-label="Loan tag"
 					@click.native="clickReadMore('Tag', $event)"
 				>
@@ -151,7 +151,7 @@
 					:is="tag"
 					:to="readMorePath"
 					:href="readMorePath"
-					class="loan-card-use tw-text-primary"
+					class="loan-card-use tw-text-primary tw-no-underline"
 					aria-label="Loan use"
 					@click.native="clickReadMore('Use', $event)"
 				>
@@ -433,6 +433,7 @@ export default {
 .loan-card-active-hover:hover .loan-card-use, .loan-card-active-hover:hover .loan-card-name {
 	@apply tw-underline;
 }
+.loan-card-progress,
 .loan-card-progress:hover,
 .loan-card-progress:focus {
 	@apply tw-no-underline;

package/dist/components/KvTab.vue

@@ -2,9 +2,9 @@
 	<button
 		:id="`kv-tab-${forPanel}`"
 		class="tw-text-h3 tw-mb-1.5 tw-whitespace-nowrap tw-text-left"
-		:class="{ 'hover:tw-text-action-highlight' : !isActive,
+		:class="{ 'hover:tw-text-action' : !isActive,
 			'md:tw-border-l-2 tw-border-transparent md:tw-pl-2' : vertical,
-			'tw-text-action-highlight' : isActive && vertical
+			'tw-text-action' : isActive && vertical
 		}"
 		role="tab"
 		:aria-selected="isActive"

package/dist/components/KvTabs.vue

@@ -22,7 +22,7 @@
 					tw-bg-primary-inverse tw-rounded-full
 					tw-origin-left tw-transition-all tw-duration-300
 				"
-				:class="{ 'tw-hidden md:tw-block tw-top-0 md:tw-bg-action-highlight' : vertical}"
+				:class="{ 'tw-hidden md:tw-block tw-top-0 md:tw-bg-action' : vertical}"
 				:style="`
 					width: ${selectedTabEl && !vertical ? selectedTabEl.clientWidth : 3}px;
 					height: ${selectedTabEl && vertical ? `${selectedTabEl.clientHeight}px` : '0.25rem'};

package/dist/components/KvTextInput.vue

@@ -16,16 +16,19 @@
 				class="
 					tw-h-6 tw-w-full
 					tw-px-2
-					tw-border tw-border-tertiary
+					tw-border
 					tw-rounded-sm
 					tw-appearance-none
 					tw-text-base
-					tw-bg-primary
 					tw-ring-inset
-					focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-action focus:tw-border-transparent
+					focus:tw-outline-none focus:tw-ring-2 focus:tw-border-transparent
 				"
 				:class="{
-					'tw-pr-6 tw-bg-danger tw-border-danger-highlight tw-bg-opacity-low focus:tw-ring-danger-highlight'
+					'tw-bg-primary'
+						: valid && !disabled,
+					'tw-border-tertiary focus:tw-ring-action'
+						: valid,
+					'tw-pr-6 tw-bg-danger-highlight tw-border-danger focus:tw-ring-danger-highlight'
 						: !valid,
 					'tw-bg-tertiary'
 						: disabled,
@@ -64,7 +67,7 @@
 			</button>
 			<div
 				v-if="$slots.error"
-				class="tw-text-danger tw-text-small tw-font-medium tw-mt-1"
+				class="tw-text-danger-highlight tw-text-small tw-font-medium tw-mt-1"
 			>
 				<!-- @slot Used in conjuction with the `valid` prop to tell the user what must be fixed -->
 				<slot name="error"></slot>

package/dist/components/KvWideLoanCard.vue

@@ -100,7 +100,7 @@
 				:is="tag"
 				:to="readMorePath"
 				:href="readMorePath"
-				class="tw-flex hover:tw-no-underline focus:tw-no-underline"
+				class="tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline"
 				aria-label="Loan tag"
 				@click.native="clickReadMore('Tag', $event)"
 			>
@@ -114,7 +114,7 @@
 				:is="tag"
 				:to="readMorePath"
 				:href="readMorePath"
-				class="loan-card-use tw-text-primary"
+				class="loan-card-use tw-no-underline tw-text-primary"
 				aria-label="Loan use"
 				@click="clickReadMore('Use')"
 			>
@@ -421,6 +421,7 @@ export default {
 .loan-card-active-hover:hover .loan-card-use {
 	@apply tw-underline;
 }
+.loan-card-progress,
 .loan-card-progress:hover,
 .loan-card-progress:focus {
 	@apply tw-no-underline;

package/dist/components/stories/KvThemeProvider.stories.js

@@ -1,6 +1,16 @@
 import primitives from '@kiva/kv-tokens/primitives.json';
 import {
-	defaultTheme, darkTheme, darkGreenTheme, mintTheme, darkMintTheme, darkStoneTheme,
+	defaultTheme,
+	greenLightTheme,
+	greenDarkTheme,
+	marigoldLightTheme,
+	stoneLightTheme,
+	stoneDarkTheme,
+	darkTheme,
+	darkGreenTheme,
+	mintTheme,
+	darkMintTheme,
+	darkStoneTheme,
 } from '@kiva/kv-tokens/configs/kivaColors.cjs';
 import KvButton from '../KvButton.vue';
 import KvGrid from '../KvGrid.vue';
@@ -94,12 +104,12 @@ const demoTemplate = `
 		<section>
 			<ul>
 				<li
-					v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost']"
+					v-for="variant in ['primary', 'secondary', 'link', 'danger', 'caution', 'ghost']"
 					:key="variant"
 					class="tw-mb-2"
 				>
 					<kv-button :variant="variant">
-						Find a borrower
+						{{ variant }}
 					</kv-button>
 				</li>
 			</ul>
@@ -138,6 +148,31 @@ const Template = (args, {
 
 export const Default = Template.bind({});
 
+export const GreenLight = Template.bind({});
+GreenLight.args = {
+	theme: greenLightTheme,
+};
+
+export const GreenDark = Template.bind({});
+GreenDark.args = {
+	theme: greenDarkTheme,
+};
+
+export const MarigoldLight = Template.bind({});
+MarigoldLight.args = {
+	theme: marigoldLightTheme,
+};
+
+export const StoneLight = Template.bind({});
+StoneLight.args = {
+	theme: stoneLightTheme,
+};
+
+export const StoneDark = Template.bind({});
+StoneDark.args = {
+	theme: stoneDarkTheme,
+};
+
 export const Dark = Template.bind({});
 Dark.args = {
 	theme: darkTheme,

package/dist/components/stories/StyleguideProse.stories.js

@@ -1,18 +1,74 @@
+import {
+	defaultTheme,
+	greenLightTheme,
+	greenDarkTheme,
+	marigoldLightTheme,
+	stoneLightTheme,
+	stoneDarkTheme,
+	darkTheme,
+	darkGreenTheme,
+	mintTheme,
+	darkMintTheme,
+	darkStoneTheme,
+} from '@kiva/kv-tokens/configs/kivaColors.cjs';
 import KvGrid from '../KvGrid.vue';
 import KvPageContainer from '../KvPageContainer.vue';
 
 export default {
 	title: 'Base Styling/Prose Demo',
+	args: {
+		theme: 'greenLight',
+	},
+	argTypes: {
+		theme: {
+			control: {
+				type: 'select',
+			},
+			options: ['default', 'greenLight', 'greenDark', 'marigoldLight', 'stoneLight', 'stoneDark', 'dark', 'darkGreen', 'mint', 'darkMint', 'darkStone'],
+		},
+	},
 };
 
 export const ProseDemo = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvPageContainer, KvGrid },
+	computed: {
+		themeStyles() {
+			switch (this.theme) {
+				case 'greenLight':
+					return greenLightTheme;
+				case 'greenDark':
+					return greenDarkTheme;
+				case 'marigoldLight':
+					return marigoldLightTheme;
+				case 'stoneLight':
+					return stoneLightTheme;
+				case 'stoneDark':
+					return stoneDarkTheme;
+				case 'dark':
+					return darkTheme;
+				case 'darkGreen':
+					return darkGreenTheme;
+				case 'mint':
+					return mintTheme;
+				case 'darkMint':
+					return darkMintTheme;
+				case 'darkStone':
+					return darkStoneTheme;
+				default:
+					return defaultTheme;
+			}
+		},
+	},
 	template: `
-	<kv-page-container>
+	<kv-page-container :style="{
+		...themeStyles,
+		color: 'rgb(var(--text-primary))',
+		backgroundColor: 'rgb(var(--bg-primary))',
+	}">
 		<kv-grid class="tw-grid-cols-12 tw-prose">
 			<div class="tw-col-span-full md:tw-col-span-10 md:tw-col-start-2 lg:tw-col-span-8 lg:tw-col-start-3">
-				<h1>Typography</h1>
+				<h1><u>Typography</u></h1>
 				<p class="tw-text-subhead">Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.</p>
 				<p>By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you <em>really are</em> just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.</p>
 				<p>We get lots of complaints about it actually, with people regularly asking us things like:</p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.107.2",
+  "version": "3.108.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -61,7 +61,7 @@
     "build": "tsup utils/*.js --outDir dist/utils --format cjs,esm --clean && cp -R vue/ dist/components/ && cp -R data/ dist/data/"
   },
   "dependencies": {
-    "@kiva/kv-tokens": "^2.13.0",
+    "@kiva/kv-tokens": "^2.14.0",
     "@mdi/js": "^5.9.55",
     "@vueuse/integrations": "^7.6.0",
     "aria-hidden": "^1.1.3",
@@ -95,5 +95,5 @@
       "optional": true
     }
   },
-  "gitHead": "9a83333ef44e8409ef884e6289744dcbb1457e4b"
+  "gitHead": "081b5ca9ae74b85b3db13f40043252381f0ab822"
 }

package/vue/.storybook/main.js

@@ -7,6 +7,10 @@ const config = {
 		'../stories/**/*.stories.@(js|jsx|ts|tsx)'
 	],
 
+	staticDirs: [
+		'../../../../dist/assets',
+	],
+
 	addons: [
 		"@storybook/addon-links",
 		"@storybook/addon-essentials",
@@ -23,7 +27,7 @@ const config = {
 							'style-loader',
 							{
 								loader: 'css-loader',
-								options: { importLoaders: 1 }
+								options: { importLoaders: 1, url: false }
 							},
 							{
 								// Gets options from `postcss.config.js` in your project root

package/vue/KvButton.vue

@@ -5,7 +5,7 @@
 		:to="to"
 		:type="computedType"
 		:disabled="isDisabled"
-		class="hover:tw-no-underline focus:tw-no-underline tw-inline-block"
+		class="tw-no-underline hover:tw-no-underline focus:tw-no-underline tw-inline-block"
 		:class="{
 			'tw-opacity-low': state === 'disabled',
 			'tw-pointer-events-none': state === 'loading' || isDisabled
@@ -137,16 +137,16 @@ export default {
 					}
 					break;
 				case 'secondary':
-					classes = 'tw-text-primary';
+					classes = 'tw-text-action-highlight';
 					if (state.value === 'active') {
-						classes = `${classes} tw-bg-secondary tw-border-primary`;
+						classes = `${classes} tw-bg-secondary`;
 					} else {
 						// eslint-disable-next-line max-len
-						classes = `${classes} tw-bg-primary hover:tw-bg-secondary tw-border-tertiary hover:tw-border-primary`;
+						classes = `${classes} tw-bg-primary hover:tw-bg-secondary tw-border-action-highlight`;
 					}
 					break;
 				case 'danger':
-					classes = 'tw-text-primary-inverse';
+					classes = 'tw-text-danger';
 					if (state.value === 'active') {
 						classes = `${classes} tw-bg-danger-highlight tw-border-danger-highlight`;
 					} else {
@@ -157,9 +157,9 @@ export default {
 				case 'link':
 					classes = 'tw-bg-primary-inverse tw-text-primary-inverse';
 					if (state.value === 'active') {
-						classes = `${classes} tw-border-secondary`;
+						classes = `${classes} tw-border-secondary tw-bg-action`;
 					} else {
-						classes = `${classes} tw-border-primary hover:tw-border-secondary`;
+						classes = `${classes} tw-border-action-highlight hover:tw-border-action hover:tw-bg-action`;
 					}
 					break;
 				case 'ghost':
@@ -171,11 +171,12 @@ export default {
 					}
 					break;
 				case 'caution':
-					classes = 'tw-text-primary tw-border-transparent';
+					classes = 'tw-text-caution';
 					if (state.value === 'active') {
-						classes = `${classes} tw-bg-caution-highlight`;
+						classes = `${classes} tw-bg-caution-highlight tw-border-caution-highlight`;
 					} else {
-						classes = `${classes} tw-bg-caution hover:tw-bg-caution-highlight`;
+						// eslint-disable-next-line max-len
+						classes = `${classes} tw-bg-caution hover:tw-bg-caution-highlight tw-border-caution hover:tw-border-caution-highlight`;
 					}
 					break;
 			}

package/vue/KvClassicLoanCard.vue

@@ -90,7 +90,7 @@
 					:is="tag"
 					:to="readMorePath"
 					:href="readMorePath"
-					class="tw-flex hover:tw-no-underline focus:tw-no-underline"
+					class="tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline"
 					:class="{ 'tw-px-1': largeCard }"
 					aria-label="Loan tag"
 					@click.native="clickReadMore('Tag', $event)"
@@ -105,7 +105,7 @@
 					:is="tag"
 					:to="readMorePath"
 					:href="readMorePath"
-					class="loan-card-use tw-text-primary"
+					class="loan-card-use tw-no-underline tw-text-primary"
 					aria-label="Loan use"
 					@click.native="clickReadMore('Use', $event)"
 				>
@@ -183,7 +183,7 @@
 					v-if="unreservedAmount > 0"
 					:to="readMorePath"
 					:href="readMorePath"
-					class="loan-card-progress tw-mt-1"
+					class="loan-card-progress tw-no-underline tw-mt-1"
 					aria-label="Loan progress"
 					@click.native="clickReadMore('Progress', $event)"
 				>

package/vue/KvIntroductionLoanCard.vue

@@ -96,7 +96,7 @@
 					:to="readMorePath"
 					:href="readMorePath"
 					aria-label="Borrower name"
-					class="!tw-text-primary"
+					class="!tw-text-primary tw-no-underline"
 					@click.native="clickReadMore('Name', $event)"
 				>
 					<h3
@@ -136,7 +136,7 @@
 					v-else
 					:to="readMorePath"
 					:href="readMorePath"
-					class="tw-flex hover:tw-no-underline focus:tw-no-underline tw-justify-center"
+					class="tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline tw-justify-center"
 					aria-label="Loan tag"
 					@click.native="clickReadMore('Tag', $event)"
 				>
@@ -151,7 +151,7 @@
 					:is="tag"
 					:to="readMorePath"
 					:href="readMorePath"
-					class="loan-card-use tw-text-primary"
+					class="loan-card-use tw-text-primary tw-no-underline"
 					aria-label="Loan use"
 					@click.native="clickReadMore('Use', $event)"
 				>
@@ -433,6 +433,7 @@ export default {
 .loan-card-active-hover:hover .loan-card-use, .loan-card-active-hover:hover .loan-card-name {
 	@apply tw-underline;
 }
+.loan-card-progress,
 .loan-card-progress:hover,
 .loan-card-progress:focus {
 	@apply tw-no-underline;

package/vue/KvTab.vue

@@ -2,9 +2,9 @@
 	<button
 		:id="`kv-tab-${forPanel}`"
 		class="tw-text-h3 tw-mb-1.5 tw-whitespace-nowrap tw-text-left"
-		:class="{ 'hover:tw-text-action-highlight' : !isActive,
+		:class="{ 'hover:tw-text-action' : !isActive,
 			'md:tw-border-l-2 tw-border-transparent md:tw-pl-2' : vertical,
-			'tw-text-action-highlight' : isActive && vertical
+			'tw-text-action' : isActive && vertical
 		}"
 		role="tab"
 		:aria-selected="isActive"

package/vue/KvTabs.vue

@@ -22,7 +22,7 @@
 					tw-bg-primary-inverse tw-rounded-full
 					tw-origin-left tw-transition-all tw-duration-300
 				"
-				:class="{ 'tw-hidden md:tw-block tw-top-0 md:tw-bg-action-highlight' : vertical}"
+				:class="{ 'tw-hidden md:tw-block tw-top-0 md:tw-bg-action' : vertical}"
 				:style="`
 					width: ${selectedTabEl && !vertical ? selectedTabEl.clientWidth : 3}px;
 					height: ${selectedTabEl && vertical ? `${selectedTabEl.clientHeight}px` : '0.25rem'};

package/vue/KvTextInput.vue

@@ -16,16 +16,19 @@
 				class="
 					tw-h-6 tw-w-full
 					tw-px-2
-					tw-border tw-border-tertiary
+					tw-border
 					tw-rounded-sm
 					tw-appearance-none
 					tw-text-base
-					tw-bg-primary
 					tw-ring-inset
-					focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-action focus:tw-border-transparent
+					focus:tw-outline-none focus:tw-ring-2 focus:tw-border-transparent
 				"
 				:class="{
-					'tw-pr-6 tw-bg-danger tw-border-danger-highlight tw-bg-opacity-low focus:tw-ring-danger-highlight'
+					'tw-bg-primary'
+						: valid && !disabled,
+					'tw-border-tertiary focus:tw-ring-action'
+						: valid,
+					'tw-pr-6 tw-bg-danger-highlight tw-border-danger focus:tw-ring-danger-highlight'
 						: !valid,
 					'tw-bg-tertiary'
 						: disabled,
@@ -64,7 +67,7 @@
 			</button>
 			<div
 				v-if="$slots.error"
-				class="tw-text-danger tw-text-small tw-font-medium tw-mt-1"
+				class="tw-text-danger-highlight tw-text-small tw-font-medium tw-mt-1"
 			>
 				<!-- @slot Used in conjuction with the `valid` prop to tell the user what must be fixed -->
 				<slot name="error"></slot>

package/vue/KvWideLoanCard.vue

@@ -100,7 +100,7 @@
 				:is="tag"
 				:to="readMorePath"
 				:href="readMorePath"
-				class="tw-flex hover:tw-no-underline focus:tw-no-underline"
+				class="tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline"
 				aria-label="Loan tag"
 				@click.native="clickReadMore('Tag', $event)"
 			>
@@ -114,7 +114,7 @@
 				:is="tag"
 				:to="readMorePath"
 				:href="readMorePath"
-				class="loan-card-use tw-text-primary"
+				class="loan-card-use tw-no-underline tw-text-primary"
 				aria-label="Loan use"
 				@click="clickReadMore('Use')"
 			>
@@ -421,6 +421,7 @@ export default {
 .loan-card-active-hover:hover .loan-card-use {
 	@apply tw-underline;
 }
+.loan-card-progress,
 .loan-card-progress:hover,
 .loan-card-progress:focus {
 	@apply tw-no-underline;

package/vue/stories/KvThemeProvider.stories.js

@@ -1,6 +1,16 @@
 import primitives from '@kiva/kv-tokens/primitives.json';
 import {
-	defaultTheme, darkTheme, darkGreenTheme, mintTheme, darkMintTheme, darkStoneTheme,
+	defaultTheme,
+	greenLightTheme,
+	greenDarkTheme,
+	marigoldLightTheme,
+	stoneLightTheme,
+	stoneDarkTheme,
+	darkTheme,
+	darkGreenTheme,
+	mintTheme,
+	darkMintTheme,
+	darkStoneTheme,
 } from '@kiva/kv-tokens/configs/kivaColors.cjs';
 import KvButton from '../KvButton.vue';
 import KvGrid from '../KvGrid.vue';
@@ -94,12 +104,12 @@ const demoTemplate = `
 		<section>
 			<ul>
 				<li
-					v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost']"
+					v-for="variant in ['primary', 'secondary', 'link', 'danger', 'caution', 'ghost']"
 					:key="variant"
 					class="tw-mb-2"
 				>
 					<kv-button :variant="variant">
-						Find a borrower
+						{{ variant }}
 					</kv-button>
 				</li>
 			</ul>
@@ -138,6 +148,31 @@ const Template = (args, {
 
 export const Default = Template.bind({});
 
+export const GreenLight = Template.bind({});
+GreenLight.args = {
+	theme: greenLightTheme,
+};
+
+export const GreenDark = Template.bind({});
+GreenDark.args = {
+	theme: greenDarkTheme,
+};
+
+export const MarigoldLight = Template.bind({});
+MarigoldLight.args = {
+	theme: marigoldLightTheme,
+};
+
+export const StoneLight = Template.bind({});
+StoneLight.args = {
+	theme: stoneLightTheme,
+};
+
+export const StoneDark = Template.bind({});
+StoneDark.args = {
+	theme: stoneDarkTheme,
+};
+
 export const Dark = Template.bind({});
 Dark.args = {
 	theme: darkTheme,

package/vue/stories/StyleguideProse.stories.js

@@ -1,18 +1,74 @@
+import {
+	defaultTheme,
+	greenLightTheme,
+	greenDarkTheme,
+	marigoldLightTheme,
+	stoneLightTheme,
+	stoneDarkTheme,
+	darkTheme,
+	darkGreenTheme,
+	mintTheme,
+	darkMintTheme,
+	darkStoneTheme,
+} from '@kiva/kv-tokens/configs/kivaColors.cjs';
 import KvGrid from '../KvGrid.vue';
 import KvPageContainer from '../KvPageContainer.vue';
 
 export default {
 	title: 'Base Styling/Prose Demo',
+	args: {
+		theme: 'greenLight',
+	},
+	argTypes: {
+		theme: {
+			control: {
+				type: 'select',
+			},
+			options: ['default', 'greenLight', 'greenDark', 'marigoldLight', 'stoneLight', 'stoneDark', 'dark', 'darkGreen', 'mint', 'darkMint', 'darkStone'],
+		},
+	},
 };
 
 export const ProseDemo = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvPageContainer, KvGrid },
+	computed: {
+		themeStyles() {
+			switch (this.theme) {
+				case 'greenLight':
+					return greenLightTheme;
+				case 'greenDark':
+					return greenDarkTheme;
+				case 'marigoldLight':
+					return marigoldLightTheme;
+				case 'stoneLight':
+					return stoneLightTheme;
+				case 'stoneDark':
+					return stoneDarkTheme;
+				case 'dark':
+					return darkTheme;
+				case 'darkGreen':
+					return darkGreenTheme;
+				case 'mint':
+					return mintTheme;
+				case 'darkMint':
+					return darkMintTheme;
+				case 'darkStone':
+					return darkStoneTheme;
+				default:
+					return defaultTheme;
+			}
+		},
+	},
 	template: `
-	<kv-page-container>
+	<kv-page-container :style="{
+		...themeStyles,
+		color: 'rgb(var(--text-primary))',
+		backgroundColor: 'rgb(var(--bg-primary))',
+	}">
 		<kv-grid class="tw-grid-cols-12 tw-prose">
 			<div class="tw-col-span-full md:tw-col-span-10 md:tw-col-start-2 lg:tw-col-span-8 lg:tw-col-start-3">
-				<h1>Typography</h1>
+				<h1><u>Typography</u></h1>
 				<p class="tw-text-subhead">Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.</p>
 				<p>By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you <em>really are</em> just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.</p>
 				<p>We get lots of complaints about it actually, with people regularly asking us things like:</p>