Use css vars instead of props for color (#25)

* changed button to use css vars for style

* updated avatar component

* updated checkbox and icon component

* updated chip and overlay component

* update progress and sheet component

* added support for slider and spinner component

* update switch component

* remove unit tests for colors

* made color vars more clear in docs

* changed unactive to inactive

* storybook now uses colorpicker for all color settings

* Cleanup v-avatar readme

* Tweak v-button inline styles + update readme

* Force disabled color to input border

* Cleanup readme for checkbox

* Fix formatting on table in readme for checkbox

* Add css vars to readme for chip

* Use css var for size

* Use CSS Var for z-index

* Use css var for height in linear progress

* Use css vars for sheet

* Use private css var for percentage + update readme

* Fix typo

* Remove deprecated props, update readme

* Use css var for table height

* Update storybook entries

* Remove obsolete tests

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>

src/components/v-avatar/v-avatar.readme.md

@@ -12,15 +12,30 @@
 </v-avatar>
 ```
 
-## Sizes / Colors
+## Props
 
-The avatar component supports multiple sizes and colors. The color prop accepts any valid CSS color. CSS variable names can be passed as well.
+| Prop      | Description               | Default |
+|-----------|---------------------------|---------|
+| `size`    | Size in px                | --      |
+| `tile`    | Render as a tile (square) | `false` |
+| `x-small` | Render extra small        | `false` |
+| `small`   | Render small              | `false` |
+| `large`   | Render large              | `false` |
+| `x-large` | Render extra large        | `false` |
 
-| Prop Name      | Size in PX |
-|----------------|------------|
-| `x-small`      | 32         |
-| `small`        | 40         |
-| None (default) | 48         |
-| `large`        | 56         |
-| `x-large`      | 64         |
+## Slots
 
+| Slot      | Description | Data |
+|-----------|-------------|------|
+| _default_ |             | --   |
+
+## Events
+
+n/a
+
+## CSS Variables
+
+| Variable           | Default                     |
+|--------------------|-----------------------------|
+| `--v-avatar-color` | `--avatar-background-color` |
+| `--v-avatar-size`  | --                          |

src/components/v-avatar/v-avatar.story.ts

@@ -63,7 +63,7 @@ export const withText = () => ({
 		:large="size === 'large'"
 		:x-large="size === 'xLarge'"
 		:tile="tile"
-		:color="color"
+		:style="{'--v-avatar-color': color }"
 		:size="customSize"
 	>{{ text }}</v-avatar>`
 });
@@ -103,7 +103,7 @@ export const withImage = () => ({
 		:large="size === 'large'"
 		:x-large="size === 'xLarge'"
 		:tile="tile"
-		:color="color"
+		:style="{'--v-avatar-color': color }"
 		:size="customSize"
 	>
 		<img src="https://randomuser.me/api/portraits/men/97.jpg" />
@@ -145,10 +145,10 @@ export const withIcon = () => ({
 		:large="size === 'large'"
 		:x-large="size === 'xLarge'"
 		:tile="tile"
-		:color="color"
+		:style="{'--v-avatar-color': color }"
 		:size="customSize"
 	>
-		<v-icon name="person" />
+		<v-icon name="person" :style="{'--v-icon-color': 'white'}" />
 	</v-avatar>`
 });
 

src/components/v-avatar/v-avatar.test.ts

@@ -17,12 +17,6 @@ describe('Avatar', () => {
 		expect(component.classes()).toContain('tile');
 	});
 
-	it('Sets the correct custom color', async () => {
-		component.setProps({ color: '--red' });
-		await component.vm.$nextTick();
-		expect((component.vm as any).styles['--_v-avatar-color']).toEqual('var(--red)');
-	});
-
 	describe('Sizes', () => {
 		test('Extra Small', () => {
 			component.setProps({
@@ -63,16 +57,5 @@ describe('Avatar', () => {
 			});
 			component.vm.$nextTick(() => expect(component.classes()).toContain('x-large'));
 		});
-
-		it('Sets the correct custom size', () => {
-			const component = mount(VAvatar, {
-				localVue,
-				propsData: {
-					size: 128
-				}
-			});
-
-			expect((component.vm as any).styles['--_v-avatar-size']).toBe('128px');
-		});
 	});
 });

src/components/v-avatar/v-avatar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="v-avatar" :style="styles" :class="[{ tile }, sizeClass]">
+	<div class="v-avatar" :class="[{ tile }, sizeClass]">
 		<slot />
 	</div>
 </template>
@@ -10,10 +10,6 @@ import parseCSSVar from '../../utils/parse-css-var';
 
 export default createComponent({
 	props: {
-		color: {
-			type: String,
-			default: '--teal'
-		},
 		size: {
 			type: Number,
 			default: null
@@ -40,23 +36,6 @@ export default createComponent({
 		}
 	},
 	setup(props) {
-		type Styles = {
-			'--_v-avatar-color': string;
-			'--_v-avatar-size'?: string;
-		};
-
-		const styles = computed(() => {
-			const styles: Styles = {
-				'--_v-avatar-color': parseCSSVar(props.color)
-			};
-
-			if (props.size) {
-				styles['--_v-avatar-size'] = props.size + 'px';
-			}
-
-			return styles;
-		});
-
 		const sizeClass = computed<string | null>(() => {
 			if (props.xSmall) return 'x-small';
 			if (props.small) return 'small';
@@ -65,22 +44,23 @@ export default createComponent({
 			return null;
 		});
 
-		return { styles, sizeClass };
+		return { sizeClass };
 	}
 });
 </script>
 
 <style lang="scss" scoped>
 .v-avatar {
-	--_v-avatar-size: 48px;
+	--v-avatar-color: var(--teal);
+	--v-avatar-size: 48px;
 
-	background-color: var(--_v-avatar-color);
+	background-color: var(--v-avatar-color);
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	position: relative;
-	width: var(--_v-avatar-size);
-	height: var(--_v-avatar-size);
+	width: var(--v-avatar-size);
+	height: var(--v-avatar-size);
 	border-radius: 50%;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -92,19 +72,19 @@ export default createComponent({
 	}
 
 	&.x-small {
-		--_v-avatar-size: 24px;
+		--v-avatar-size: 24px;
 	}
 
 	&.small {
-		--_v-avatar-size: 36px;
+		--v-avatar-size: 36px;
 	}
 
 	&.large {
-		--_v-avatar-size: 56px;
+		--v-avatar-size: 56px;
 	}
 
 	&.x-large {
-		--_v-avatar-size: 64px;
+		--v-avatar-size: 64px;
 	}
 
 	::v-deep {

src/components/v-button/v-button.readme.md

@@ -14,33 +14,21 @@ The button component supports the following sizes through the use of props:
 * large
 * x-large
 
-Alternatively, you can force the font-size through the `size` prop:
-
-```html
-<v-button :size="64">Click me!</v-button>
-```
-
 ## Colors
 
-You can set the color, background color, hover color, and background hover color with the `color`, `background-color`, `hover-color`, and `hover-background-color` props respectively:
+You can set the color, background color, hover color, and background hover color with the `--v-button-color`, `--v-button-background-color`, `--v-button-hover-color`, and `--v-button-hover-background-color` css variables respectively:
 
 ```html
-<v-button
-	color="--red"
-	background-color="--red-50"
-	hover-color="--white"
-	hover-background-color="--red"
->
-	Click me
-</v-button>
-```
+<v-button>Click me</v-button>
 
-## Events
-
-The only event that can be added to the button is the `click` event:
-
-```html
-<v-button @click="sayHi">Hello!</v-button>
+<style>
+.v-button {
+	--v-button-color: var(--red);
+	--v-button-background-color: var(--red-50);
+	--v-button-hover-color: var(--white);
+	--v-button-hover-background-color: var(--red);
+}
+</style>
 ```
 
 ## Loading
@@ -65,14 +53,9 @@ The loading slot is rendered _on top_ of the content that was there before. Make
 | `icon`                   | Remove padding / min-width. Meant to be used with just an icon as content | `false`                                   |
 | `outlined`               | No background                                                             | `false`                                   |
 | `rounded`                | Enable rounded corners                                                    | `false`                                   |
-| `color`                  | Text / icon color                                                         | `--button-primary-text-color`             |
-| `hover-color`            | Text / icon color on hover                                                | `--button-primary-text-color`             |
-| `background-color`       | Button color                                                              | `--button-primary-background-color`       |
-| `hover-background-color` | Button color on hover                                                     | `--button-primary-background-color-hover` |
 | `type`                   | HTML `type` attribute                                                     | `button`                                  |
 | `disabled`               | Disabled state                                                            | `false`                                   |
 | `loading`                | Loading state                                                             | `false`                                   |
-| `width`                  | Width in px                                                               | --                                        |
 | `size`                   | Size of the text in the button in px                                      | --                                        |
 | `x-small`                | Render extra small                                                        | `false`                                   |
 | `small`                  | Render small                                                              | `false`                                   |
@@ -83,4 +66,23 @@ The loading slot is rendered _on top_ of the content that was there before. Make
 
 | Slot      | Description                                  |
 |-----------|----------------------------------------------|
+| _default_ | Button content |
 | `loading` | Content that's rendered during loading state |
+
+## Events
+
+| Event   | Description           | Value        |
+|---------|-----------------------|--------------|
+| `click` | User clicks on button | `MouseEvent` |
+
+## CSS Variables
+
+| Variable                            | Default                                        |
+|-------------------------------------|------------------------------------------------|
+| `--v-button-width`                  | `auto`                                         |
+| `--v-button-height`                 | `44px`                                         |
+| `--v-button-color`                  | `var(--button-primary-text-color)`             |
+| `--v-button-background-color`       | `var(--button-primary-background-color)`       |
+| `--v-button-hover-color`            | `var(--button-primary-text-color)`             |
+| `--v-button-hover-background-color` | `var(--button-primary-background-color-hover)` |
+| `--v-button-font-size`              | `16px`                                         |

src/components/v-button/v-button.story.ts

@@ -1,4 +1,11 @@
-import { withKnobs, text, boolean, number, optionsKnob as options } from '@storybook/addon-knobs';
+import {
+	withKnobs,
+	text,
+	boolean,
+	number,
+	color,
+	optionsKnob as options
+} from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import Vue from 'vue';
 import VButton from './v-button.vue';
@@ -66,16 +73,16 @@ export const withText = () => ({
 			default: boolean('Disabled', false, 'Button')
 		},
 		color: {
-			default: text('Color', '--button-primary-text-color', 'Colors')
+			default: color('Color', '#ffffff', 'Colors')
 		},
 		backgroundColor: {
-			default: text('Background Color', '--button-primary-background-color', 'Colors')
+			default: color('Background Color', '#263238', 'Colors')
 		},
 		hoverColor: {
-			default: text('Color (hover)', '--white', 'Colors')
+			default: color('Color (hover)', '#ffffff', 'Colors')
 		},
 		hoverBackgroundColor: {
-			default: text('Background Color (hover)', '--black', 'Colors')
+			default: color('Background Color (hover)', '#37474f', 'Colors')
 		}
 	},
 	template: `
@@ -84,10 +91,12 @@ export const withText = () => ({
 			:rounded="rounded"
 			:outlined="outlined"
 			:icon="icon"
-			:color="color"
-			:background-color="backgroundColor"
-			:hover-color="hoverColor"
-			:hover-background-color="hoverBackgroundColor"
+			:style="{
+				'--v-button-color': color,
+				'--v-button-background-color': backgroundColor,
+				'--v-button-hover-color': hoverColor,
+				'--v-button-hover-background-color': hoverBackgroundColor
+			}"
 			:type="type"
 			:disabled="disabled"
 			:loading="loading"
@@ -168,16 +177,16 @@ export const withIcon = () => ({
 			default: boolean('Disabled', false, 'Button')
 		},
 		color: {
-			default: text('Color', '--button-primary-text-color', 'Colors')
+			default: color('Color', '#ffffff', 'Colors')
 		},
 		backgroundColor: {
-			default: text('Background Color', '--button-primary-background-color', 'Colors')
+			default: color('Background Color', '#263238', 'Colors')
 		},
 		hoverColor: {
-			default: text('Color (hover)', '--white', 'Colors')
+			default: color('Color (hover)', '#ffffff', 'Colors')
 		},
 		hoverBackgroundColor: {
-			default: text('Background Color (hover)', '--black', 'Colors')
+			default: color('Background Color (hover)', '#37474f', 'Colors')
 		}
 	},
 	template: `
@@ -186,10 +195,12 @@ export const withIcon = () => ({
 			:rounded="rounded"
 			:outlined="outlined"
 			:icon="icon"
-			:color="color"
-			:background-color="backgroundColor"
-			:hover-color="hoverColor"
-			:hover-background-color="hoverBackgroundColor"
+			:style="{
+				'--v-button-color': color,
+				'--v-button-background-color': backgroundColor,
+				'--v-button-hover-color': hoverColor,
+				'--v-button-hover-background-color': hoverBackgroundColor
+			}"
 			:type="type"
 			:disabled="disabled"
 			:loading="loading"
@@ -206,6 +217,7 @@ export const withIcon = () => ({
 				:small="iconSize === 'small'"
 				:large="iconSize === 'large'"
 				:x-large="iconSize === 'xLarge'"
+				style="--v-icon-color: var(--white)"
 			/>
 		</v-button>
 	`
@@ -224,40 +236,52 @@ export const sizes = () => `
 export const colors = () => `
 <div>
 	<v-button
-		color="--red"
-		background-color="--red-50"
-		hover-color="--white"
-		hover-background-color="--red"
+		:style="{
+			'--v-button-color': 'var(--red)',
+			'--v-button-background-color': 'var(--red-50)',
+			'--v-button-hover-color': 'var(--white)',
+			'--v-button-hover-background-color': 'var(--red)'
+		}"
 	>
 		Delete
 	</v-button>
 	<v-button
-		color="--white"
-		background-color="--green"
-		hover-background-color="--green-800"
+		:style="{
+			'--v-button-color': 'var(--white)',
+			'--v-button-background-color': 'var(--green)',
+			'--v-button-hover-color': 'var(--white)',
+			'--v-button-hover-background-color': 'var(--green-800)'
+		}"
 	>
 		Save
 	</v-button>
 	<v-button
-		color="--white"
-		background-color="--amber"
-		hover-background-color="--amber-800"
+		:style="{
+			'--v-button-color': 'var(--white)',
+			'--v-button-background-color': 'var(--amber)',
+			'--v-button-hover-color': 'var(--white)',
+			'--v-button-hover-background-color': 'var(--amber-800)'
+		}"
 	>
 		Warn
 	</v-button>
 	<v-button
-		color="--blue-grey-800"
-		background-color="--blue-grey-50"
-		hover-color="--red"
-		hover-background-color="--white"
+		:style="{
+			'--v-button-color': 'var(--blue-grey-800)',
+			'--v-button-background-color': 'var(--blue-grey-50)',
+			'--v-button-hover-color': 'var(--red)',
+			'--v-button-hover-background-color': 'var(--white)'
+		}"
 	>
 		Hover
 	</v-button>
 	<v-button
-		color="--blue-grey-800"
-		background-color="transparent"
-		hover-color="--black"
-		hover-background-color="--blue-grey-100"
+		:style="{
+			'--v-button-color': 'var(--blue-grey-800)',
+			'--v-button-background-color': 'transparent',
+			'--v-button-hover-color': 'var(--black)',
+			'--v-button-hover-background-color': 'var(--blue-grey-100)'
+		}"
 	>
 		Transparent
 	</v-button>

src/components/v-button/v-button.test.ts

@@ -75,30 +75,10 @@ describe('Button', () => {
 		expect(component.classes()).toContain('loading');
 	});
 
-	it('Sets the correct CSS variables for custom colors', () => {
-		const component = mount(VButton, {
-			localVue,
-			propsData: {
-				color: '--red',
-				hoverColor: '--blue',
-				backgroundColor: '--green',
-				hoverBackgroundColor: '--yellow'
-			}
-		});
-
-		expect((component.vm as any).styles['--_v-button-color']).toBe('var(--red)');
-		expect((component.vm as any).styles['--_v-button-hover-color']).toBe('var(--blue)');
-		expect((component.vm as any).styles['--_v-button-background-color']).toBe('var(--green)');
-		expect((component.vm as any).styles['--_v-button-hover-background-color']).toBe(
-			'var(--yellow)'
-		);
-	});
-
 	describe('Sizes', () => {
 		const component = mount(VButton, {
 			localVue,
 			propsData: {
-				color: '--blue-grey',
 				name: 'person'
 			}
 		});
@@ -142,16 +122,5 @@ describe('Button', () => {
 			});
 			component.vm.$nextTick(() => expect(component.classes()).toContain('x-large'));
 		});
-
-		it('Sets the correct custom width', () => {
-			const component = mount(VButton, {
-				localVue,
-				propsData: {
-					width: 56
-				}
-			});
-
-			expect((component.vm as any).styles.width).toBe('56px');
-		});
 	});
 });

src/components/v-button/v-button.vue

@@ -3,7 +3,6 @@
 		class="v-button"
 		:class="[sizeClass, { block, rounded, icon, outlined, loading }]"
 		:type="type"
-		:style="styles"
 		:disabled="disabled"
 		@click="!loading ? $emit('click') : null"
 	>
@@ -38,22 +37,6 @@ export default createComponent({
 			type: Boolean,
 			default: false
 		},
-		color: {
-			type: String,
-			default: '--button-primary-text-color'
-		},
-		backgroundColor: {
-			type: String,
-			default: '--button-primary-background-color'
-		},
-		hoverColor: {
-			type: String,
-			default: '--button-primary-text-color'
-		},
-		hoverBackgroundColor: {
-			type: String,
-			default: '--button-primary-background-color-hover'
-		},
 		type: {
 			type: String,
 			default: 'button'
@@ -66,10 +49,6 @@ export default createComponent({
 			type: Boolean,
 			default: false
 		},
-		width: {
-			type: Number,
-			default: null
-		},
 		xSmall: {
 			type: Boolean,
 			default: false
@@ -88,29 +67,6 @@ export default createComponent({
 		}
 	},
 	setup(props) {
-		interface Styles {
-			'--_v-button-color': string;
-			'--_v-button-background-color': string;
-			'--_v-button-hover-color': string;
-			'--_v-button-hover-background-color': string;
-			width?: string;
-		}
-
-		const styles = computed<Styles>(() => {
-			let styles: Styles = {
-				'--_v-button-color': parseCSSVar(props.color),
-				'--_v-button-background-color': parseCSSVar(props.backgroundColor),
-				'--_v-button-hover-color': parseCSSVar(props.hoverColor),
-				'--_v-button-hover-background-color': parseCSSVar(props.hoverBackgroundColor)
-			};
-
-			if (props.width && +props.width > 0) {
-				styles.width = props.width + 'px';
-			}
-
-			return styles;
-		});
-
 		const sizeClass = computed<string | null>(() => {
 			if (props.xSmall) return 'x-small';
 			if (props.small) return 'small';
@@ -119,26 +75,33 @@ export default createComponent({
 			return null;
 		});
 
-		return { styles, sizeClass };
+		return { sizeClass };
 	}
 });
 </script>
 
 <style lang="scss" scoped>
 .v-button {
-	--_v-button-height: 44px;
+	--v-button-width: auto;
+	--v-button-height: 44px;
+	--v-button-color: var(--button-primary-text-color);
+	--v-button-background-color: var(--button-primary-background-color);
+	--v-button-hover-color: var(--button-primary-text-color);
+	--v-button-hover-background-color: var(--button-primary-background-color-hover);
+	--v-button-font-size: 16px;
 
-	color: var(--_v-button-color);
-	background-color: var(--_v-button-background-color);
+	color: var(--v-button-color);
+	background-color: var(--v-button-background-color);
 	border-radius: var(--border-radius);
 	font-weight: var(--weight-bold);
 	cursor: pointer;
-	border: var(--input-border-width) solid var(--_v-button-background-color);
+	border: var(--input-border-width) solid var(--v-button-background-color);
 
-	font-size: 14px;
+	font-size: var(--v-button-font-size);
 	padding: 0 19px;
 	min-width: 78px;
-	height: var(--_v-button-height);
+	width: var(--v-button-width);
+	height: var(--v-button-height);
 
 	transition: var(--fast) var(--transition);
 	transition-property: background-color border;
@@ -150,9 +113,9 @@ export default createComponent({
 	}
 
 	&:not(.loading):not(:disabled):hover {
-		color: var(--_v-button-hover-color);
-		background-color: var(--_v-button-hover-background-color);
-		border: var(--input-border-width) solid var(--_v-button-hover-background-color);
+		color: var(--v-button-hover-color);
+		background-color: var(--v-button-hover-background-color);
+		border: var(--input-border-width) solid var(--v-button-hover-background-color);
 	}
 
 	&.block {
@@ -161,7 +124,7 @@ export default createComponent({
 	}
 
 	&.rounded {
-		border-radius: calc(var(--button-height) / 2);
+		border-radius: calc(var(--v-button-height) / 2);
 	}
 
 	&.outlined {
@@ -176,29 +139,28 @@ export default createComponent({
 	}
 
 	&.x-small {
-		--_v-button-height: 28px;
-		font-size: 12px;
+		--v-button-height: 28px;
+		--v-button-font-size: 12px;
 		padding: 0 12px;
 		min-width: 48px;
 	}
 
 	&.small {
-		--_v-button-height: 36px;
-		font-size: 14px;
+		--v-button-height: 36px;
+		--v-button-font-size: 14px;
 		padding: 0 16px;
 		min-width: 64px;
 	}
 
 	&.large {
-		--_v-button-height: var(--button-height);
-		font-size: var(--button-font-size);
+		--v-button-height: 52px;
 		padding: 0 23px;
 		min-width: 92px;
 	}
 
 	&.x-large {
-		--_v-button-height: 58px;
-		font-size: 18px;
+		--v-button-height: 58px;
+		--v-button-font-size: 18px;
 		padding: 0 32px;
 		min-width: 120px;
 	}
@@ -206,7 +168,7 @@ export default createComponent({
 	&.icon {
 		min-width: 0;
 		padding: 0;
-		width: var(--_v-button-height);
+		width: var(--v-button-height);
 	}
 
 	.content,

src/components/v-checkbox/v-checkbox.readme.md

@@ -8,13 +8,31 @@
 
 ## Colors
 
-The checkbox component accepts any CSS color value, or variable name:
+The colors can be changed via the css variables `--v-checkbox-color`.
 
 ```html
-<v-checkbox color="#abcabc" />
-<v-checkbox color="rgba(125, 125, 198, 0.5)" />
-<v-checkbox color="--red" />
-<v-checkbox color="--input-border-color" />
+<v-checkbox class="example-1" />
+<v-checkbox class="example-2" />
+<v-checkbox class="example-3" />
+<v-checkbox class="example-4" />
+
+<style>
+.example-1 {
+	--v-checkbox-color: #abcabc;
+}
+
+.example-2 {
+	--v-checkbox-color: rgba(125, 125, 198, 0.5);
+}
+
+.example-3 {
+	--v-checkbox-color: var(--red);
+}
+
+.example-4 {
+	--v-checkbox-color: var(--input-border-color);
+}
+</style>
 ```
 
 ## Boolean vs arrays
@@ -67,26 +85,27 @@ If you can't, you should listen to the `update:indeterminate` event and respond
 <v-checkbox indeterminate @update:indeterminate="setIndeterminate">
 ```
 
-## Events
+## Props
+| Prop            | Description                                                              | Default |
+|-----------------|--------------------------------------------------------------------------|---------|
+| `value`         | Value for checkbox. Similar to value attr on checkbox type input in HTML | `--`    |
+| `inputValue`    | Value that's used with `v-model`. Either boolean or array of values      | `false` |
+| `label`         | Label for the checkbox                                                   | `--`    |
+| `disabled`      | Disable the checkbox                                                     | `false` |
+| `indeterminate` | Show the indeterminate state                                             | `false` |
 
+## Slots
+| Slot    | Description                                                                                    |
+|---------|------------------------------------------------------------------------------------------------|
+| `label` | Allows custom markup and HTML to be rendered inside the label. Will override the `label` prop. |
+
+## Events
 | Event                  | Description                | Data                       |
 |------------------------|----------------------------|----------------------------|
 | `change`               | New state for the checkbox | Boolean or array of values |
 | `update:indeterminate` | New state for the checkbox | Boolean or array of values |
 
-## Props
-
-| Prop            | Description                                                                                            | Default                           |
-|-----------------|--------------------------------------------------------------------------------------------------------|-----------------------------------|
-| `value`         | Value for checkbox. Similar to value attr on checkbox type input in HTML                               | `--`                              |
-| `inputValue`    | Value that's used with `v-model`. Either boolean or array of values                                    | `false`                           |
-| `label`         | Label for the checkbox                                                                                 | `--`                              |
-| `color`         | Color for the checked state of the checkbox. Either CSS var name (fe `--red`) or other valid CSS color | `--input-background-color-active` |
-| `disabled`      | Disable the checkbox                                                                                   | `false`                           |
-| `indeterminate` | Show the indeterminate state                                                                           | `false`                           |
-
-## Slots
-
-| Slot    | Description                                                                                    |
-|---------|------------------------------------------------------------------------------------------------|
-| `label` | Allows custom markup and HTML to be rendered inside the label. Will override the `label` prop. |
+## CSS Variables
+| Variable             | Default                                |
+|----------------------|----------------------------------------|
+| `--v-checkbox-color` | `var(--input-background-color-active)` |

src/components/v-checkbox/v-checkbox.story.ts

@@ -94,10 +94,10 @@ export const colors = () => ({
 	},
 	template: `
 	<div>
-		<v-checkbox v-model="options" value="red" @change="onChange" color="--red" label="Red" />
-		<v-checkbox v-model="options" value="blue" @change="onChange" color="--blue" label="Blue" />
-		<v-checkbox v-model="options" value="yellow" @change="onChange" color="--amber" label="Yellow" />
-		<v-checkbox v-model="options" value="custom" @change="onChange" :color="customColor" label="Custom..." />
+		<v-checkbox v-model="options" value="red" @change="onChange" :style="{'--v-checkbox-color': 'var(--red)'}" label="Red" />
+		<v-checkbox v-model="options" value="blue" @change="onChange" :style="{'--v-checkbox-color': 'var(--blue)'}" label="Blue" />
+		<v-checkbox v-model="options" value="yellow" @change="onChange" :style="{'--v-checkbox-color': 'var(--amber)'}" label="Yellow" />
+		<v-checkbox v-model="options" value="custom" @change="onChange" :style="{'--v-checkbox-color': customColor}" label="Custom..." />
 	</div>
 	`
 });

src/components/v-checkbox/v-checkbox.test.ts

@@ -118,22 +118,6 @@ describe('Checkbox', () => {
 		expect((component.vm as any).icon).toBe('indeterminate_check_box');
 	});
 
-	it('Renders the correct iconColor for state', () => {
-		const component = mount(VCheckbox, {
-			localVue,
-			propsData: {
-				inputValue: false,
-				color: '--red'
-			}
-		});
-
-		expect((component.vm as any).iconColor).toBe('--input-border-color');
-
-		component.setProps({ inputValue: true });
-
-		expect((component.vm as any).iconColor).toBe('--red');
-	});
-
 	it('Emits the update:indeterminate event when the checkbox is toggled when indeterminate', () => {
 		const component = mount(VCheckbox, {
 			localVue,

src/components/v-checkbox/v-checkbox.vue

@@ -6,8 +6,9 @@
 		role="checkbox"
 		:aria-pressed="isChecked ? 'true' : 'false'"
 		:disabled="disabled"
+		:class="{ checked: isChecked }"
 	>
-		<v-icon :name="icon" :color="iconColor" />
+		<v-icon :name="icon" />
 		<span class="label">
 			<slot name="label">{{ label }}</slot>
 		</span>
@@ -36,10 +37,6 @@ export default createComponent({
 			type: String,
 			default: null
 		},
-		color: {
-			type: String,
-			default: '--input-background-color-active'
-		},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -63,13 +60,7 @@ export default createComponent({
 			return isChecked.value ? 'check_box' : 'check_box_outline_blank';
 		});
 
-		const iconColor = computed<string>(() => {
-			if (props.disabled) return '--input-background-color-disabled';
-			if (isChecked.value) return props.color;
-			return '--input-border-color';
-		});
-
-		return { isChecked, toggleInput, icon, iconColor };
+		return { isChecked, toggleInput, icon };
 
 		function toggleInput(): void {
 			if (props.indeterminate) {
@@ -96,6 +87,8 @@ export default createComponent({
 
 <style lang="scss" scoped>
 .v-checkbox {
+	--v-checkbox-color: var(--input-background-color-active);
+
 	font-size: 0;
 	appearance: none;
 	background-color: transparent;
@@ -114,12 +107,26 @@ export default createComponent({
 		overflow: hidden;
 	}
 
+	& .v-icon {
+		--v-icon-color: var(--input-border-color);
+	}
+
 	&:disabled {
 		cursor: not-allowed;
 
 		.label {
 			color: var(--popover-text-color-disabled);
 		}
+
+		.v-icon {
+			--v-icon-color: var(--input-border-color);
+		}
+	}
+
+	&:not(:disabled).checked {
+		.v-icon {
+			--v-icon-color: var(--v-checkbox-color);
+		}
 	}
 }
 </style>

src/components/v-chip/v-chip.readme.md

@@ -20,20 +20,21 @@ The chip component supports the following sizes through the use of props:
 
 ## Colors
 
-You can set the color, background color, hover color, and background hover color with the `color`, `background-color`, `hover-color`, and `hover-background-color` props respectively:
+You can set the color, background color, hover color, and background hover color with the `--v-chip-color`, `--v-chip-background-color`, `--v-chip-hover-color`, and `--v-chip-hover-background-color` css variables respectively:
 
 ```html
-<v-chip
-	color="--red"
-	background-color="--red-50"
-	hover-color="--white"
-	hover-background-color="--red"
->
-	I'm a chip!
-</v-chip>
+<v-chip> I'm a chip! </v-chip>
+<style>
+.v-chip {
+	--v-chip-color: var(--red);
+	--v-chip-background-color: var(--red-50);
+	--v-chip-hover-color: var(--white);
+	--v-chip-hover-background-color: var(--red);
+}
+</style>
 ```
 
-## Events
+## Clicks / Closes
 
 There are two events, one when clicking on the chip called `click` and one when clicking on the enabled close icon called `close`.
 
@@ -42,26 +43,35 @@ There are two events, one when clicking on the chip called `click` and one when
 <v-chip close @close="close">I'm closeable!</v-chip>
 ```
 
+## Props
+| Prop        | Description                                          | Default |
+|-------------|------------------------------------------------------|---------|
+| `active`    | Change visibility. Can be reacted to via `sync`      | `true`  |
+| `close`     | Displays a close icon which triggers the close event | `false` |
+| `closeIcon` | Which icon should be displayed instead of `close   ` | `close` |
+| `outlined`  | No background                                        | `false` |
+| `label`     | Label style                                          | `false` |
+| `disabled`  | Disabled state                                       | `false` |
+| `x-small`   | Render extra small                                   | `false` |
+| `small`     | Render small                                         | `false` |
+| `large`     | Render large                                         | `false` |
+| `x-large`   | Render extra large                                   | `false` |
+
+## Slots
+| Slot      | Description | Data |
+|-----------|-------------|------|
+| _default_ |             | --   |
+
+## Events
 | Event   | Description                                                                                    |
 |---------|------------------------------------------------------------------------------------------------|
 | `click` | Triggers when clicked somewhere on the chip                                                    |
 | `close` | Triggers when the `close` prop is enabled and gets clicked (Doesn't trigger the `click` event) |
 
-## Props
-
-| Prop                     | Description                                          | Default                                 |
-|--------------------------|------------------------------------------------------|-----------------------------------------|
-| `active`                 | Change visibility. Can be reacted to via `sync`      | `true`                                  |
-| `close`                  | Displays a close icon which triggers the close event | `false`                                 |
-| `closeIcon`              | Which icon should be displayed instead of `close   ` | `close`                                 |
-| `outlined`               | No background                                        | `false`                                 |
-| `color`                  | Text color                                           | `--chip-primary-text-color`             |
-| `hover-color`            | Text color on hover                                  | `--chip-primary-text-color`             |
-| `background-color`       | Chip color                                           | `--chip-primary-background-color`       |
-| `hover-background-color` | Chip color on hover                                  | `--chip-primary-background-color-hover` |
-| `label`                  | Label style                                          | `false`                                 |
-| `disabled`               | Disabled state                                       | `false`                                 |
-| `x-small`                | Render extra small                                   | `false`                                 |
-| `small`                  | Render small                                         | `false`                                 |
-| `large`                  | Render large                                         | `false`                                 |
-| `x-large`                | Render extra large                                   | `false`                                 |
+## CSS Variables
+| Variable                          | Default                                      |
+|-----------------------------------|----------------------------------------------|
+| `--v-chip-color`                  | `var(--chip-primary-text-color)`             |
+| `--v-chip-background-color`       | `var(--chip-primary-background-color)`       |
+| `--v-chip-hover-color`            | `var(--chip-primary-text-color)`             |
+| `--v-chip-hover-background-color` | `var(--chip-primary-background-color-hover)` |

src/components/v-chip/v-chip.story.ts

@@ -1,4 +1,11 @@
-import { withKnobs, text, boolean, number, optionsKnob as options } from '@storybook/addon-knobs';
+import {
+	withKnobs,
+	text,
+	boolean,
+	number,
+	color,
+	optionsKnob as options
+} from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import Vue from 'vue';
 import VChip from './v-chip.vue';
@@ -57,20 +64,16 @@ export const withText = () => ({
 			default: boolean('Active', true, 'Button')
 		},
 		color: {
-			default: text('Color', '--chip-primary-text-color', 'Colors')
+			default: color('Color', '#000000', 'Colors')
 		},
 		backgroundColor: {
-			default: text('Background Color', '--chip-primary-background-color', 'Colors')
+			default: color('Background Color', '#cfd8dc', 'Colors')
 		},
 		hoverColor: {
-			default: text('Color (hover)', '--chip-primary-text-color', 'Colors')
+			default: color('Color (hover)', '#000000', 'Colors')
 		},
 		hoverBackgroundColor: {
-			default: text(
-				'Background Color (hover)',
-				'--chip-primary-background-color-hover',
-				'Colors'
-			)
+			default: color('Background Color (hover)', '#b0bec5', 'Colors')
 		}
 	},
 	template: `
@@ -78,11 +81,13 @@ export const withText = () => ({
 			:active.sync="active"
 			:label="label"
 			:outlined="outlined"
-			:color="color"
 			:close="close"
-			:background-color="backgroundColor"
-			:hover-color="hoverColor"
-			:hover-background-color="hoverBackgroundColor"
+			:style="{
+				'--v-chip-color': color,
+				'--v-chip-background-color': backgroundColor,
+				'--v-chip-hover-color': hoverColor,
+				'--v-chip-hover-background-color': hoverBackgroundColor
+			}"
 			:disabled="disabled"
 			:x-small="size === 'xSmall'"
 			:small="size === 'small'"
@@ -155,20 +160,16 @@ export const withIcon = () => ({
 			default: boolean('Active', true, 'Button')
 		},
 		color: {
-			default: text('Color', '--chip-primary-text-color', 'Colors')
+			default: color('Color', '#000000', 'Colors')
 		},
 		backgroundColor: {
-			default: text('Background Color', '--chip-primary-background-color', 'Colors')
+			default: color('Background Color', '#cfd8dc', 'Colors')
 		},
 		hoverColor: {
-			default: text('Color (hover)', '--chip-primary-text-color', 'Colors')
+			default: color('Color (hover)', '#000000', 'Colors')
 		},
 		hoverBackgroundColor: {
-			default: text(
-				'Background Color (hover)',
-				'--chip-primary-background-color-hover',
-				'Colors'
-			)
+			default: color('Background Color (hover)', '#b0bec5', 'Colors')
 		}
 	},
 	template: `
@@ -176,11 +177,13 @@ export const withIcon = () => ({
 			:active="active"
 			:label="label"
 			:outlined="outlined"
-			:color="color"
 			:close="close"
-			:background-color="backgroundColor"
-			:hover-color="hoverColor"
-			:hover-background-color="hoverBackgroundColor"
+			:style="{
+				'--v-chip-color': color,
+				'--v-chip-background-color': backgroundColor,
+				'--v-chip-hover-color': hoverColor,
+				'--v-chip-hover-background-color': hoverBackgroundColor
+			}"
 			:disabled="disabled"
 			:x-small="size === 'xSmall'"
 			:small="size === 'small'"
@@ -206,40 +209,46 @@ export const withColor = () => ({
 	template: `
 		<div>
 			<v-chip
-				color="--white"
-				background-color="--red-600"
-				hover-color="--white"
-				hover-background-color="--red-400"
+				style="
+					--v-chip-color: var(--white);
+					--v-chip-background-color: var(--red-600);
+					--v-chip-hover-color: var(--white);
+					--v-chip-hover-background-color: var(--red-400);
+				"
 			>
 				<v-icon
 					name="delete"
-					color="--white"
+					style="--v-icon-color: var(--white)"
 					left
 				/>
 				Delete
 			</v-chip>
 			<v-chip
-				color="--white"
-				background-color="--green-600"
-				hover-color="--white"
-				hover-background-color="--green-400"
+				style="
+					--v-chip-color: var(--white);
+					--v-chip-background-color: var(--green-600);
+					--v-chip-hover-color: var(--white);
+					--v-chip-hover-background-color: var(--green-400);
+				"
 			>
 				<v-icon
 					name="add"
-					color="--white"
+					style="--v-icon-color: var(--white)"
 					left
 				/>
 				Add Item
 			</v-chip>
 			<v-chip
-				color="--white"
-				background-color="--amber-600"
-				hover-color="--white"
-				hover-background-color="--amber-400"
+				style="
+					--v-chip-color: var(--white);
+					--v-chip-background-color: var(--amber-600);
+					--v-chip-hover-color: var(--white);
+					--v-chip-hover-background-color: var(--amber-400);
+				"
 			>
 				<v-icon
 					name="warning"
-					color="--white"
+					style="--v-icon-color: var(--white)"
 					left
 				/>
 				Watch out

src/components/v-chip/v-chip.test.ts

@@ -65,24 +65,6 @@ describe('Chip', () => {
 		expect(component.find('.close-outline').exists()).toBe(true);
 	});
 
-	it('Sets the correct CSS variables for custom colors', async () => {
-		component.setProps({
-			color: '--red',
-			hoverColor: '--blue',
-			backgroundColor: '--green',
-			hoverBackgroundColor: '--yellow'
-		});
-
-		await component.vm.$nextTick();
-
-		expect((component.vm as any).styles['--_v-chip-color']).toBe('var(--red)');
-		expect((component.vm as any).styles['--_v-chip-hover-color']).toBe('var(--blue)');
-		expect((component.vm as any).styles['--_v-chip-background-color']).toBe('var(--green)');
-		expect((component.vm as any).styles['--_v-chip-hover-background-color']).toBe(
-			'var(--yellow)'
-		);
-	});
-
 	it('Emits a click event when chip is not disabled', async () => {
 		component.setProps({
 			disabled: false

src/components/v-chip/v-chip.vue

@@ -2,7 +2,6 @@
 	<span
 		v-if="_active"
 		class="v-chip"
-		:style="styles"
 		:class="[sizeClass, { outlined, label, disabled, close }]"
 		@click="onClick"
 	>
@@ -42,22 +41,6 @@ export default createComponent({
 			type: Boolean,
 			default: false
 		},
-		color: {
-			type: String,
-			default: '--chip-primary-text-color'
-		},
-		backgroundColor: {
-			type: String,
-			default: '--chip-primary-background-color'
-		},
-		hoverColor: {
-			type: String,
-			default: '--chip-primary-text-color'
-		},
-		hoverBackgroundColor: {
-			type: String,
-			default: '--chip-primary-background-color-hover'
-		},
 		label: {
 			type: Boolean,
 			default: false
@@ -97,13 +80,6 @@ export default createComponent({
 			}
 		});
 
-		const styles = computed(() => ({
-			'--_v-chip-color': parseCSSVar(props.color),
-			'--_v-chip-background-color': parseCSSVar(props.backgroundColor),
-			'--_v-chip-hover-color': parseCSSVar(props.hoverColor),
-			'--_v-chip-hover-background-color': parseCSSVar(props.hoverBackgroundColor)
-		}));
-
 		const sizeClass = computed<string | null>(() => {
 			if (props.xSmall) return 'x-small';
 			if (props.small) return 'small';
@@ -112,7 +88,7 @@ export default createComponent({
 			return null;
 		});
 
-		return { styles, sizeClass, _active, onClick, onCloseClick };
+		return { sizeClass, _active, onClick, onCloseClick };
 
 		function onClick(event: MouseEvent) {
 			if (props.disabled) return;
@@ -130,19 +106,24 @@ export default createComponent({
 
 <style lang="scss" scoped>
 .v-chip {
+	--v-chip-color: var(--chip-primary-text-color);
+	--v-chip-background-color: var(--chip-primary-background-color);
+	--v-chip-hover-color: var(--chip-primary-text-color);
+	--v-chip-hover-background-color: var(--chip-primary-background-color-hover);
+
 	display: inline-flex;
 	height: 32px;
 	padding: 0 12px;
 	align-items: center;
 
-	color: var(--_v-chip-color);
-	background-color: var(--_v-chip-background-color);
+	color: var(--v-chip-color);
+	background-color: var(--v-chip-background-color);
 	border-radius: 16px;
 	font-weight: var(--weight-normal);
 
 	&:hover {
-		color: var(--_v-chip-hover-color);
-		background-color: var(--_v-chip-hover-background-color);
+		color: var(--v-chip-hover-color);
+		background-color: var(--v-chip-hover-background-color);
 	}
 
 	&.label {
@@ -151,7 +132,7 @@ export default createComponent({
 
 	&.outlined {
 		background-color: transparent;
-		border: var(--input-border-width) solid var(--_v-chip-background-color);
+		border: var(--input-border-width) solid var(--v-chip-background-color);
 	}
 
 	&.disabled {
@@ -194,13 +175,16 @@ export default createComponent({
 			align-items: center;
 
 			background-color: var(--chip-primary-close-color);
-			color: var(--chip-primary-background-color);
 			border-radius: 10px;
 			height: 14px;
 			width: 14px;
 			right: -4px;
 			margin-left: 4px;
 
+			.close {
+				--v-icon-color: var(--v-chip-background-color);
+			}
+
 			&.disabled {
 				background-color: var(--chip-primary-close-color-disabled);
 

src/components/v-hover/v-hover.readme.md

@@ -12,8 +12,16 @@ You can control how long the hover state persists after the user leaves the elem
 
 ```html
 <v-hover v-slot="{ hover }" :open-delay="250" :close-delay="400">
-  <v-button :color="hover ? red : blue" />
+  <v-button :class="hover ? red : blue" />
 </v-hover>
+<style>
+.v-button.red {
+	--v-button-color: var(--red);
+}
+.v-button.blue {
+	--v-button-color: var(--blue);
+}
+</style>
 ```
 
 ## Props

src/components/v-hover/v-hover.story.ts

@@ -18,7 +18,7 @@ export default {
 
 export const basic = () => `
 <v-hover v-slot="{ hover }" tag="span">
-	<v-icon :color="hover ? '--red' : '--blue'" name="person" x-large />
+	<v-icon :style="{ '--v-icon-color': hover ? 'var(--red)' : 'var(--blue)' }" name="person" x-large />
 </v-hover>
 `;
 

src/components/v-icon/v-icon.readme.md

@@ -4,7 +4,16 @@ The icon component allows you to render any [Material Design Icons](https://mate
 
 ## Sizes / Colors
 
-The icon component supports multiple sizes and colors. The color prop accepts any valid CSS color. CSS variable names can be passed as well.
+The icon component supports multiple sizes and colors. The color prop accepts any valid CSS color. Color changes are done via the css variable `--v-icon-color` like in the example below.
+
+```html
+<v-icon name="add"/>
+<style>
+.v-icon {
+	--v-icon-color: var(--green-500);
+}
+</style>
+```
 
 | Prop Name      | Size in PX |
 |----------------|------------|
@@ -41,7 +50,6 @@ Oftentimes, you'll use the icon next to some text, for example in a button. When
 | Name      | Description                                                       | Default        |
 |-----------|-------------------------------------------------------------------|----------------|
 | `name`*   | Name of the icon                                                  | --             |
-| `color`   | CSS color variable name (fe `--blue-grey`) or CSS color value     | `currentColor` |
 | `outline` | Use outline Material Icons. Note: only works for non-custom icons | `false`        |
 | `size`    | Custom pixel size                                                 | `false`        |
 | `x-small` | Render the icon extra small                                       | `false`        |
@@ -55,3 +63,12 @@ Oftentimes, you'll use the icon next to some text, for example in a button. When
 | Event   | Description          | Data         |
 |---------|----------------------|--------------|
 | `click` | Standard click event | `MouseEvent` |
+
+## Slots
+n/a
+
+## CSS Variables
+| Variable         | Default        |
+|------------------|----------------|
+| `--v-icon-color` | `currentColor` |
+| `--v-icon-size`  | `24px`         |

src/components/v-icon/v-icon.story.ts

@@ -1,4 +1,11 @@
-import { withKnobs, text, boolean, number, optionsKnob as options } from '@storybook/addon-knobs';
+import {
+	withKnobs,
+	text,
+	boolean,
+	number,
+	color,
+	optionsKnob as options
+} from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import Vue from 'vue';
 import VIcon from '../v-icon/';
@@ -23,7 +30,7 @@ export const interactive = () => ({
 			default: text('Icon Name', 'person')
 		},
 		color: {
-			default: text('Color', '--blue-grey-800')
+			default: color('Color', '#37474f')
 		},
 		outline: {
 			default: boolean('Outline', false)
@@ -56,6 +63,7 @@ export const interactive = () => ({
 			:name="name"
 			:outline="outline"
 			:sup="sup"
+			:style="{'--v-icon-color': color}"
 			:x-small="size === 'xSmall'"
 			:small="size === 'small'"
 			:large="size === 'large'"
@@ -65,16 +73,17 @@ export const interactive = () => ({
 	`
 });
 
-export const superscript = () => `<span>Title<v-icon name="star" color="--red" sup /></span>`;
+export const superscript = () =>
+	`<span>Title<v-icon name="star" :style="{ '--v-icon-color': 'var(--blue)' }" sup /></span>`;
 
 export const sizesAndColors = () => `
 <div>
-	<v-icon name="star" color="--light-blue" sup />
-	<v-icon name="accessibility_new" color="--red" x-small />
-	<v-icon name="warning" color="--purple" small />
-	<v-icon name="gesture" color="--blue" />
-	<v-icon name="security" color="--green" large />
-	<v-icon name="person" color="--orange" x-large />
+	<v-icon name="star" :style="{'--v-icon-color': 'var(--light-blue)'}" sup />
+	<v-icon name="accessibility_new" :style="{'--v-icon-color': 'var(--red)'}" x-small />
+	<v-icon name="warning" :style="{'--v-icon-color': 'var(--purple)'}" small />
+	<v-icon name="gesture" :style="{'--v-icon-color': 'var(--blue)'}" />
+	<v-icon name="security" :style="{'--v-icon-color': 'var(--green)'}" large />
+	<v-icon name="person" :style="{'--v-icon-color': 'var(--orange)'}" x-large />
 </div>
 `;
 

src/components/v-icon/v-icon.test.ts

@@ -13,19 +13,6 @@ describe('Icon', () => {
 		component = mount(VIcon, { localVue, propsData: { name: 'person' } });
 	});
 
-	it('Renders the correct markup for a Material Icon', async () => {
-		component.setProps({
-			color: '--blue-grey',
-			name: 'person'
-		});
-
-		await component.vm.$nextTick();
-
-		expect(component.html()).toContain(
-			'<span class="v-icon" style="color: currentColor;"><i class="">person</i></span>'
-		);
-	});
-
 	it('Renders custom icons as inline <svg>', async () => {
 		component.setProps({
 			name: 'box'
@@ -36,26 +23,6 @@ describe('Icon', () => {
 		expect(component.contains('svg')).toBe(true);
 	});
 
-	it('Allows Hex/RGB/other CSS for color', async () => {
-		component.setProps({
-			color: 'papayawhip'
-		});
-
-		await component.vm.$nextTick();
-
-		expect((component.vm as any).colorStyle).toBe('papayawhip');
-	});
-
-	it('Passes custom size as px value', async () => {
-		component.setProps({
-			size: 120
-		});
-
-		await component.vm.$nextTick();
-
-		expect((component.vm as any).customSize).toBe('120px');
-	});
-
 	describe('Sizes', () => {
 		test('Superscript', async () => {
 			component.setProps({

src/components/v-icon/v-icon.vue

@@ -2,7 +2,6 @@
 	<span
 		class="v-icon"
 		:class="[sizeClass, { 'has-click': hasClick, left, right }]"
-		:style="{ color: colorStyle, width: customSize, height: customSize }"
 		:role="hasClick ? 'button' : null"
 		@click="emitClick"
 	>
@@ -25,10 +24,6 @@ export default createComponent({
 			type: String,
 			required: true
 		},
-		color: {
-			type: String,
-			default: 'currentColor'
-		},
 		outline: {
 			type: Boolean,
 			default: false
@@ -37,10 +32,6 @@ export default createComponent({
 			type: Boolean,
 			default: false
 		},
-		size: {
-			type: Number,
-			default: null
-		},
 		xSmall: {
 			type: Boolean,
 			default: false
@@ -77,15 +68,6 @@ export default createComponent({
 			return null;
 		});
 
-		const customSize = computed<string | null>(() => {
-			if (props.size) return `${props.size}px`;
-			return null;
-		});
-
-		const colorStyle = computed<string>(() => {
-			return parseCSSVar(props.color);
-		});
-
 		const customIconName = computed<string | null>(() => {
 			if (customIcons.includes(props.name)) return `custom-icon-${props.name}`;
 			return null;
@@ -95,9 +77,7 @@ export default createComponent({
 
 		return {
 			sizeClass,
-			colorStyle,
 			customIconName,
-			customSize,
 			hasClick,
 			emitClick
 		};
@@ -111,74 +91,19 @@ export default createComponent({
 
 <style lang="scss" scoped>
 .v-icon {
+	--v-icon-color: currentColor;
+	--v-icon-size: 24px;
+
+	color: var(--v-icon-color);
 	position: relative;
 	display: inline-block;
 	font-size: 0;
-	width: 24px;
-	height: 24px;
+	width: var(--v-icon-size);
+	height: var(--v-icon-size);
 	vertical-align: middle;
 
-	&.sup {
-		width: 8px;
-		height: 8px;
-		vertical-align: 0px;
-
-		i {
-			font-size: 8px;
-			vertical-align: 5px;
-		}
-	}
-
-	&.x-small {
-		width: 12px;
-		height: 12px;
-
-		i {
-			font-size: 12px;
-		}
-	}
-
-	&.small {
-		width: 18px;
-		height: 18px;
-
-		i {
-			font-size: 18px;
-		}
-	}
-
-	// Default is 24x24
-
-	&.large {
-		width: 36px;
-		height: 36px;
-
-		i {
-			font-size: 36px;
-		}
-	}
-
-	&.x-large {
-		width: 48px;
-		height: 48px;
-
-		i {
-			font-size: 48px;
-		}
-	}
-
-	&.left {
-		margin-right: 8px;
-		margin-left: -4px;
-	}
-
-	&.right {
-		margin-left: 8px;
-		margin-right: -4px;
-	}
-
 	i {
-		font-size: 24px;
+		font-size: var(--v-icon-size);
 		font-family: 'Material Icons';
 		font-weight: normal;
 		font-style: normal;
@@ -209,5 +134,40 @@ export default createComponent({
 	&.has-click {
 		cursor: pointer;
 	}
+
+	&.sup {
+		--v-icon-size: 8px;
+		vertical-align: 0px;
+
+		i {
+			vertical-align: 5px;
+		}
+	}
+
+	&.x-small {
+		--v-icon-size: 12px;
+	}
+
+	&.small {
+		--v-icon-size: 18px;
+	}
+
+	&.large {
+		--v-icon-size: 36px;
+	}
+
+	&.x-large {
+		--v-icon-size: 48px;
+	}
+
+	&.left {
+		margin-right: 8px;
+		margin-left: -4px;
+	}
+
+	&.right {
+		margin-left: 8px;
+		margin-right: -4px;
+	}
 }
 </style>

src/components/v-overlay/v-overlay.readme.md

@@ -10,18 +10,39 @@ The overlay is a fairly barebones component that's meant to be used with modals
 
 ## Color
 
-The overlay component supports multiple colors. The color prop accepts any valid CSS color. CSS variable names can be passed as well.
+The colors can be changed via the css variables `--v-overlay-color` and `--v-overlay-opacity`.
+
+```html
+<v-overlay :active="overlay">
+	<v-button @click="overlay = false">Close overlay</v-button>
+</v-overlay>
+<style>
+.v-overlay {
+	--v-overlay-color: var(--red);
+	--v-overlay-opacity: 0.5;
+}
+</style>
+```
 
 ## Props
-
 | Prop       | Description               | Default               |
 |------------|---------------------------|-----------------------|
 | `active`   | Show / hide the overlay   | `false`               |
 | `absolute` | Add `position: absolute;` | `false`               |
-| `color`    | Color for the overlay     | `--modal-smoke-color` |
-| `z-index`  | `z-index` for the overlay | `500`                 |
-| `opacity`  | Opacity for the overlay   | `0.75`                |
 
 ## Slots
+| Slot      | Description | Data |
+|-----------|-------------|------|
+| _default_ |             | --   |
 
-The only slot is the default slot. All content in the overlay will be rendered in the center of the overlay.
+## Events
+| Event   | Description | Value        |
+|---------|-------------|--------------|
+| `click` |             | `MouseEvent` |
+
+## CSS Variables
+| Variable              | Default                    |
+|-----------------------|----------------------------|
+| `--v-overlay-color`   | `var(--modal-smoke-color)` |
+| `--v-overlay-opacity` | `0.75`                     |
+| `--v-overlay-z-index` | `500`                      |

src/components/v-overlay/v-overlay.story.ts

@@ -47,7 +47,7 @@ export const interactive = () => ({
 	<div style="position: relative; padding: 50px; border: 3px dashed #eee; width: max-content;">
 		<v-button @click="active = true">Show overlay</v-button>
 
-		<v-overlay :active="active" :absolute="absolute" :color="color" :z-index="zIndex" :opacity="opacity">
+		<v-overlay :active="active" :absolute="absolute" :z-index="zIndex" :style="{'--v-overlay-color': color, '--v-overlay-opacity': opacity}">
 		<v-button @click="active = false">Close overlay</v-button>
 		</v-overlay>
 	</div>

src/components/v-overlay/v-overlay.test.ts

@@ -31,20 +31,6 @@ describe('Overlay', () => {
 		expect(component.classes()).toContain('absolute');
 	});
 
-	it('Sets the inline styles based on props', async () => {
-		component.setProps({
-			active: true,
-			absolute: true,
-			color: '--red',
-			zIndex: 50,
-			opacity: 0.2
-		});
-		await component.vm.$nextTick();
-		expect((component.vm as any).styles['--_v-overlay-color']).toEqual('var(--red)');
-		expect((component.vm as any).styles['--_v-overlay-z-index']).toEqual(50);
-		expect((component.vm as any).styles['--_v-overlay-opacity']).toEqual(0.2);
-	});
-
 	it('Adds the has-click class when click event is passed', async () => {
 		const component = shallowMount(VOverlay, {
 			localVue,

src/components/v-overlay/v-overlay.vue

@@ -1,10 +1,5 @@
 <template>
-	<div
-		class="v-overlay"
-		:class="{ active, absolute, 'has-click': hasClick }"
-		:style="styles"
-		@click="onClick"
-	>
+	<div class="v-overlay" :class="{ active, absolute, 'has-click': hasClick }" @click="onClick">
 		<div class="overlay" />
 		<div v-if="active" class="content"><slot /></div>
 	</div>
@@ -23,30 +18,12 @@ export default createComponent({
 		absolute: {
 			type: Boolean,
 			default: false
-		},
-		color: {
-			type: String,
-			default: '--modal-smoke-color'
-		},
-		zIndex: {
-			type: Number,
-			default: 500
-		},
-		opacity: {
-			type: Number,
-			default: 0.75
 		}
 	},
 	setup(props, { emit, listeners }) {
-		const styles = computed(() => ({
-			'--_v-overlay-color': parseCSSVar(props.color),
-			'--_v-overlay-z-index': props.zIndex,
-			'--_v-overlay-opacity': props.opacity
-		}));
-
 		const hasClick = computed<boolean>(() => listeners.hasOwnProperty('click'));
 
-		return { styles, hasClick, onClick };
+		return { hasClick, onClick };
 
 		function onClick(event: MouseEvent) {
 			emit('click', event);
@@ -57,6 +34,10 @@ export default createComponent({
 
 <style lang="scss" scoped>
 .v-overlay {
+	--v-overlay-color: var(--modal-smoke-color);
+	--v-overlay-opacity: 0.75;
+	--v-overlay-z-index: 500;
+
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -66,7 +47,7 @@ export default createComponent({
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	z-index: var(--_v-overlay-z-index);
+	z-index: var(--v-overlay-z-index);
 
 	&.has-click {
 		cursor: pointer;
@@ -82,7 +63,7 @@ export default createComponent({
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background-color: var(--_v-overlay-color);
+		background-color: var(--v-overlay-color);
 		opacity: 0;
 		transition: opacity var(--slow) var(--transition);
 	}
@@ -91,7 +72,7 @@ export default createComponent({
 		pointer-events: auto;
 
 		.overlay {
-			opacity: var(--_v-overlay-opacity);
+			opacity: var(--v-overlay-opacity);
 		}
 	}
 

src/components/v-progress/linear/v-progress-linear.readme.md

@@ -6,13 +6,16 @@
 
 ## Colors
 
-The linear progress component supports colors. The color prop accepts any valid CSS color. CSS variable names can be passed as well, prefixed with `--`:
+The linear progress component supports colors. Colors can be changed via the css variables `--v-progress-linear-color` and `--v-progress-linear-background-color`
 
 ```html
-<v-progress-linear color="red" background-color="black" />
-<v-progress-linear color="#efefef" background-color="#ff00aa" />
-<v-progress-linear color="rgba(0, 25, 89, 0.8)" background-color="papayawhip" />
-<v-progress-linear color="--blue-grey-500" background-color="--blue-grey-200" />
+<v-progress-linear />
+<style>
+.v-overlay {
+    --v-progress-linear-color: red;
+    --v-progress-linear-background-color: var(--black);
+}
+</style>
 ```
 
 ## Indeterminate
@@ -20,15 +23,11 @@ The linear progress component supports colors. The color prop accepts any valid
 The progress indicator can be rendered in indeterminate mode by passing the `indeterminate` prop. Use this when it's unclear when the progress will be done.
 
 ## Props
-
 | Prop               | Description                                                           | Default                              |
 |--------------------|-----------------------------------------------------------------------|--------------------------------------|
 | `absolute`         | Applies `position: absolute`                                          | `false`                              |
-| `background-color` | Sets the background color. Any CSS value or variable prefixed with -- | `--progress-background-color`        |
 | `bottom`           | Align the progress bar to the bottom                                  | `false`                              |
-| `color`            | Foreground color for the progress bar                                 | `--progress-background-color-accent` |
 | `fixed`            | Applies `position: fixed;` to the element                             | `false`                              |
-| `height`           | Sets the height (in px) for the progress bar                          | `4`                                  |
 | `indeterminate`    | Animates the bar, use when loading progress is unknown                | `false`                              |
 | `rounded`          | Add a border radius to the bar                                        | `false`                              |
 | `top`              | Align progress bar to the top of the parent container                 | `false`                              |
@@ -38,5 +37,13 @@ The progress indicator can be rendered in indeterminate mode by passing the `ind
 n/a
 
 ## Slots
+| Slots     | Description | Value |
+|-----------|-------------|-------|
+| _default_ |             | --    |
 
-The default slot can be used to render any value in the progress bar. Make sure to add the height prop to give the content some breathing room.
+## CSS Variables
+| Variable                               | Default                                   |
+|----------------------------------------|-------------------------------------------|--|
+| `--v-progress-linear-height`           | `4px`                                     |
+| `--v-progress-linear-color`            | `var(--progress-background-color-accent)` |
+| `--v-progress-linear-background-color` | `var(--progress-background-color)`        |

src/components/v-progress/linear/v-progress-linear.test.ts

@@ -13,22 +13,6 @@ describe('Progress (Linear)', () => {
 		component = mount(VProgressLinear, { localVue });
 	});
 
-	it('Calculates the correct inline styles', async () => {
-		component.setProps({
-			color: 'red',
-			backgroundColor: '--blue-grey-50',
-			height: 55
-		});
-
-		await component.vm.$nextTick();
-
-		expect((component.vm as any).styles).toEqual({
-			'--_v-progress-linear-color': 'red',
-			'--_v-progress-linear-background-color': 'var(--blue-grey-50)',
-			'--_v-progress-linear-height': '55px'
-		});
-	});
-
 	it('Sets the correct classes based on the props', async () => {
 		component.setProps({
 			absolute: true,

src/components/v-progress/linear/v-progress-linear.vue

@@ -31,26 +31,14 @@ export default createComponent({
 			type: Boolean,
 			default: false
 		},
-		backgroundColor: {
-			type: String,
-			default: '--progress-background-color'
-		},
 		bottom: {
 			type: Boolean,
 			default: false
 		},
-		color: {
-			type: String,
-			default: '--progress-background-color-accent'
-		},
 		fixed: {
 			type: Boolean,
 			default: false
 		},
-		height: {
-			type: Number,
-			default: 4
-		},
 		indeterminate: {
 			type: Boolean,
 			default: false
@@ -67,23 +55,18 @@ export default createComponent({
 			type: Number,
 			default: 0
 		}
-	},
-	setup(props) {
-		const styles = computed<object>(() => ({
-			'--_v-progress-linear-background-color': parseCSSVar(props.backgroundColor),
-			'--_v-progress-linear-color': parseCSSVar(props.color),
-			'--_v-progress-linear-height': props.height + 'px'
-		}));
-
-		return { styles };
 	}
 });
 </script>
 
 <style lang="scss" scoped>
 .v-progress-linear {
-	background-color: var(--_v-progress-linear-background-color);
-	height: var(--_v-progress-linear-height);
+	--v-progress-linear-height: 4px;
+	--v-progress-linear-color: var(--progress-background-color-accent);
+	--v-progress-linear-background-color: var(--progress-background-color);
+
+	background-color: var(--v-progress-linear-background-color);
+	height: var(--v-progress-linear-height);
 	position: relative;
 	width: 100%;
 	display: flex;
@@ -96,7 +79,7 @@ export default createComponent({
 		left: 0;
 		position: absolute;
 		height: 100%;
-		background-color: var(--_v-progress-linear-color);
+		background-color: var(--v-progress-linear-color);
 	}
 
 	&.absolute {
@@ -121,7 +104,7 @@ export default createComponent({
 
 	&.rounded,
 	&.rounded .inner {
-		border-radius: calc(var(--_v-progress-linear-height) / 2);
+		border-radius: calc(var(--v-progress-linear-height) / 2);
 	}
 
 	&.top {

src/components/v-progress/linear/v-progress.linear.story.ts

@@ -59,9 +59,11 @@ export const interactive = () => ({
 	template: `
 	<v-progress-linear
 		:absolute="absolute"
-		:backgroundColor="backgroundColor"
+		:style="{
+			'--v-progress-linear-color': color,
+			'--v-progress-linear-background-color': backgroundColor
+		}"
 		:bottom="bottom"
-		:color="color"
 		:fixed="fixed"
 		:height="height"
 		:indeterminate="indeterminate"
@@ -72,5 +74,5 @@ export const interactive = () => ({
 });
 
 export const withSlot = () => `
-<v-progress-linear :height="25" :value="25" rounded>25%</v-progress-linear>
+<v-progress-linear :style="{ '--v-progress-linear-height': '25px' }" :value="25" rounded>25%</v-progress-linear>
 `;

src/components/v-sheet/v-sheet.readme.md

@@ -12,12 +12,35 @@ The sheet component has props for `height`, `width`, `min-height`, `min-width`,
 
 ## Color
 
-The color prop accepts any valid CSS color. CSS variable names can be passed as well, prefixed with `--`:
+The color can be changed via the css variable called `--v-sheet-color`.
 
 ```html
-<v-sheet color="#eee"></v-sheet>
-<v-sheet color="papayawhip"></v-sheet>
-<v-sheet color="rgba(255, 153, 84, 0.4"></v-sheet>
-<v-sheet color="--input-background-color-alt"></v-sheet>
+<v-sheet/>
+<style>
+.v-sheet {
+    --v-sheet-color: var(-red-600);
+}
+</style>
 ```
 
+## Props
+n/a
+
+## Slots
+| Slot      | Description | Data  |
+|-----------|-------------|-------|
+| _default_ |             | --    |
+
+## Events
+n/a
+
+## CSS Variables
+| Variable                     | Default                             |
+|------------------------------|-------------------------------------|
+| `--v-sheet-background-color` | `var(--input-background-color-alt)` |
+| `--v-sheet-height`           | `auto`                              |
+| `--v-sheet-min-height`       | `var(--input-height)`               |
+| `--v-sheet-max-height`       | `none`                              |
+| `--v-sheet-width`            | `auto`                              |
+| `--v-sheet-min-width`        | `none`                              |
+| `--v-sheet-max-width`        | `none`                              |

src/components/v-sheet/v-sheet.story.ts

@@ -36,52 +36,68 @@ export const interactive = () => ({
 			default: color('Color', '#cfd8dc')
 		},
 		width: {
-			default: number('Width', 0)
+			default: text('Width', 'auto')
 		},
 		height: {
-			default: number('Height', 0)
+			default: text('Height', 'auto')
 		},
 		minWidth: {
-			default: number('Min Width', 0)
+			default: text('Min Width', 'none')
 		},
 		minHeight: {
-			default: number('Min Height', 0)
+			default: text('Min Height', 'var(--input-height)')
 		},
 		maxWidth: {
-			default: number('Max Width', 0)
+			default: text('Max Width', 'none')
 		},
 		maxHeight: {
-			default: number('Max Height', 0)
+			default: text('Max Height', 'none')
 		}
 	},
 	template: `
 	<v-sheet
-		:color="color"
-		:width="width"
-		:height="height"
-		:minWidth="minWidth"
-		:minHeight="minHeight"
-		:maxWidth="maxWidth"
-		:maxHeight="maxHeight"
+		:style="{
+			'--v-sheet-background-color': color,
+			'--v-sheet-width': width,
+			'--v-sheet-height': height,
+			'--v-sheet-min-width': minWidth,
+			'--v-sheet-min-height': minHeight,
+			'--v-sheet-max-width': maxWidth,
+			'--v-sheet-max-height': maxHeight
+		}"
 	>{{ text }}</v-sheet>`
 });
 
 export const colorsSizes = () => `
 <div>
 <v-sheet
-	color="#ef9a9a"
+	style="
+		--v-sheet-background-color: #ef9a9a;
+		--v-sheet-width: 150px;
+		--v-sheet-height: 150px;
+		margin-bottom: 20px;
+	"
 	:width="150"
 	:height="150"
 />
 
 <v-sheet
-	color="#81D4FA"
+	style="
+		--v-sheet-background-color: #81D4FA;
+		--v-sheet-width: 550px;
+		--v-sheet-height: 50px;
+		margin-bottom: 20px;
+	"
 	:width="550"
 	:height="50"
 />
 
 <v-sheet
-	color="#E6EE9C"
+	style="
+		--v-sheet-background-color: #E6EE9C;
+		--v-sheet-width: 220px;
+		--v-sheet-height: 500px;
+	"
 	:width="220"
 	:height="500"
 />

src/components/v-sheet/v-sheet.test.ts

@@ -7,32 +7,14 @@ localVue.use(VueCompositionAPI);
 import VSheet from './v-sheet.vue';
 
 describe('Sheet', () => {
-	let component: Wrapper<Vue>;
-
-	beforeEach(() => {
-		component = mount(VSheet, {
-			localVue
-		});
-	});
-
-	it('Sets the right inline styles for the given props', async () => {
-		component.setProps({
-			height: 150,
-			width: 200,
-			minHeight: 250,
-			minWidth: 300,
-			maxHeight: 350,
-			maxWidth: 400,
-			color: '--red'
+	it('Renders the passed slot', async () => {
+		const component = mount(VSheet, {
+			localVue,
+			slots: {
+				default: '<div>Hello</div>'
+			}
 		});
 
-		await component.vm.$nextTick();
-		expect((component.vm as any).styles['--_v-sheet-height']).toEqual('150px');
-		expect((component.vm as any).styles['--_v-sheet-width']).toEqual('200px');
-		expect((component.vm as any).styles['--_v-sheet-min-height']).toEqual('250px');
-		expect((component.vm as any).styles['--_v-sheet-min-width']).toEqual('300px');
-		expect((component.vm as any).styles['--_v-sheet-max-height']).toEqual('350px');
-		expect((component.vm as any).styles['--_v-sheet-max-width']).toEqual('400px');
-		expect((component.vm as any).styles['--_v-sheet-color']).toEqual('var(--red)');
+		expect(component.find('.v-sheet > *').html()).toBe('<div>Hello</div>');
 	});
 });

src/components/v-sheet/v-sheet.vue

@@ -1,112 +1,37 @@
 <template>
-	<div class="v-sheet" :style="styles">
+	<div class="v-sheet">
 		<slot />
 	</div>
 </template>
 
 <script lang="ts">
 import { createComponent, computed } from '@vue/composition-api';
-import parseCSSVar from '@/utils/parse-css-var';
 
-export default createComponent({
-	props: {
-		color: {
-			type: String,
-			default: '--input-background-color-alt'
-		},
-		minHeight: {
-			type: Number,
-			default: null
-		},
-		maxHeight: {
-			type: Number,
-			default: null
-		},
-		height: {
-			type: Number,
-			default: null
-		},
-		minWidth: {
-			type: Number,
-			default: null
-		},
-		maxWidth: {
-			type: Number,
-			default: null
-		},
-		width: {
-			type: Number,
-			default: null
-		}
-	},
-	setup(props) {
-		type Styles = {
-			'--_v-sheet-color': string;
-			'--_v-sheet-min-height'?: string;
-			'--_v-sheet-max-height'?: string;
-			'--_v-sheet-height'?: string;
-			'--_v-sheet-min-width'?: string;
-			'--_v-sheet-max-width'?: string;
-			'--_v-sheet-width'?: string;
-		};
-
-		const styles = computed(() => {
-			const styles: Styles = {
-				'--_v-sheet-color': parseCSSVar(props.color)
-			};
-
-			if (props.minHeight) {
-				styles['--_v-sheet-min-height'] = props.minHeight + 'px';
-			}
-
-			if (props.maxHeight) {
-				styles['--_v-sheet-max-height'] = props.maxHeight + 'px';
-			}
-
-			if (props.height) {
-				styles['--_v-sheet-height'] = props.height + 'px';
-			}
-
-			if (props.minWidth) {
-				styles['--_v-sheet-min-width'] = props.minWidth + 'px';
-			}
-
-			if (props.maxWidth) {
-				styles['--_v-sheet-max-width'] = props.maxWidth + 'px';
-			}
-
-			if (props.width) {
-				styles['--_v-sheet-width'] = props.width + 'px';
-			}
-
-			return styles;
-		});
-
-		return { styles };
-	}
-});
+export default createComponent({});
 </script>
 
 <style lang="scss" scoped>
 .v-sheet {
-	--_v-sheet-height: auto;
-	--_v-sheet-min-height: var(--input-height);
-	--_v-sheet-max-height: none;
+	--v-sheet-background-color: var(--input-background-color-alt);
 
-	--_v-sheet-width: auto;
-	--_v-sheet-min-width: none;
-	--_v-sheet-max-width: none;
+	--v-sheet-height: auto;
+	--v-sheet-min-height: var(--input-height);
+	--v-sheet-max-height: none;
+
+	--v-sheet-width: auto;
+	--v-sheet-min-width: none;
+	--v-sheet-max-width: none;
 
 	padding: 8px;
 	border-radius: var(--border-radius);
-	background-color: var(--_v-sheet-color);
+	background-color: var(--v-sheet-background-color);
 
-	height: var(--_v-sheet-height);
-	min-height: var(--_v-sheet-min-height);
-	max-height: var(--_v-sheet-max-height);
-	width: var(--_v-sheet-width);
-	min-width: var(--_v-sheet-min-width);
-	max-width: var(--_v-sheet-max-width);
+	height: var(--v-sheet-height);
+	min-height: var(--v-sheet-min-height);
+	max-height: var(--v-sheet-max-height);
+	width: var(--v-sheet-width);
+	min-width: var(--v-sheet-min-width);
+	max-width: var(--v-sheet-max-width);
 
 	overflow: auto;
 }

src/components/v-slider/v-slider.readme.md

@@ -4,6 +4,21 @@
 <v-slider v-model="value" :min="0" :max="100" />
 ```
 
+## Color
+
+The colors can be changed via the css variables `--v-slider-color`, `--v-slider-fill-color` and `--v-slider-thumb-color`.
+
+```html
+<v-slider/>
+<style>
+.v-slider {
+    --v-slider-color: var(--red-400);
+	--v-slider-fill-color: var(--red-700);
+	--v-slider-thumb-color: var(--orange-500);
+}
+</style>
+```
+
 ## Thumb Label
 
 You can show the current value of the slider when the user is sliding by enabling the thumb label. This can be done by setting the `show-thumb-label` prop:
@@ -43,9 +58,6 @@ You can add any custom content before and after the slider (inline). This can be
 | `show-thumb-label` | Show the thumb label on drag of the thumb                    | `false`                     |
 | `show-ticks`       | Show tick for each step                                      | `false`                     |
 | `step`             | In what step the value can be entered                        | `1`                         |
-| `thumb-color`      | Color of the thumb and label                                 | `--slider-thumb-color`      |
-| `track-color`      | Color of the slider track                                    | `--slider-track-color`      |
-| `track-fill-color` | Color of the filled part of the slider track (left of thumb) | `--slider-track-fill-color` |
 | `value`            | Current value of slider. Can be used with `v-model`          | `50`                        |
 
 ## Events
@@ -60,3 +72,10 @@ You can add any custom content before and after the slider (inline). This can be
 | `append`      | Inserted after the slider track    | --                  |
 | `prepend`     | Inserted before the slider track   | --                  |
 | `thumb-label` | Custom content for the thumb label | `{ value: number }` |
+
+## CSS Variables
+| Variable                 | Default                          |
+|--------------------------|----------------------------------|
+| `--v-slider-color`       | `var(--slider-track-color)`      |
+| `--v-slider-fill-color`  | `var(--slider-track-fill-color)` |
+| `--v-slider-thumb-color` | `var(--slider-thumb-color)`      |

src/components/v-slider/v-slider.story.ts

@@ -60,9 +60,11 @@ export const interactive = () => ({
 <div>
 <v-slider
 	v-model="value"
-	:track-color="trackColor"
-	:track-fill-color="trackFillColor"
-	:thumb-color="thumbColor"
+	:style="{
+		'--v-slider-color': trackColor,
+		'--v-slider-fill-color': trackFillColor,
+		'--v-slider-thumb-color': thumbColor
+	}"
 	:max="max"
 	:min="min"
 	:show-ticks="showTicks"

src/components/v-slider/v-slider.test.ts

@@ -13,22 +13,6 @@ describe('Slider', () => {
 		component = mount(VSlider, { localVue });
 	});
 
-	it('Sets the correct inline styles for given props', async () => {
-		component.setProps({
-			trackColor: '--red',
-			trackFillColor: 'papayawhip',
-			thumbColor: '#abcabc'
-		});
-		await component.vm.$nextTick();
-
-		expect((component.vm as any).styles).toEqual({
-			'--_v-slider-percentage': 50,
-			'--_v-slider-track-color': 'var(--red)',
-			'--_v-slider-track-fill-color': 'papayawhip',
-			'--_v-slider-thumb-color': '#abcabc'
-		});
-	});
-
 	it('Calculates the correct percentage based on props/value', async () => {
 		component.setProps({
 			min: 5,

src/components/v-slider/v-slider.vue

@@ -38,18 +38,6 @@ import { ChangeEvent } from 'react';
 
 export default createComponent({
 	props: {
-		trackColor: {
-			type: String,
-			default: '--slider-track-color'
-		},
-		trackFillColor: {
-			type: String,
-			default: '--slider-track-fill-color'
-		},
-		thumbColor: {
-			type: String,
-			default: '--slider-thumb-color'
-		},
 		showThumbLabel: {
 			type: Boolean,
 			default: false
@@ -77,9 +65,6 @@ export default createComponent({
 	},
 	setup(props, { emit, listeners }) {
 		const styles = computed(() => ({
-			'--_v-slider-track-color': parseCSSVar(props.trackColor),
-			'--_v-slider-track-fill-color': parseCSSVar(props.trackFillColor),
-			'--_v-slider-thumb-color': parseCSSVar(props.thumbColor),
 			'--_v-slider-percentage': ((props.value - props.min) / (props.max - props.min)) * 100
 		}));
 
@@ -104,6 +89,10 @@ export default createComponent({
 
 <style lang="scss" scoped>
 .v-slider {
+	--v-slider-color: var(--slider-track-color);
+	--v-slider-fill-color: var(--slider-track-fill-color);
+	--v-slider-thumb-color: var(--slider-thumb-color);
+
 	display: flex;
 	align-items: center;
 
@@ -130,7 +119,7 @@ export default createComponent({
 
 			@mixin v-slider-track {
 				height: 2px;
-				background: var(--_v-slider-track-color);
+				background: var(--v-slider-color);
 				box-shadow: none;
 				border: none;
 				border-radius: 2px;
@@ -152,7 +141,7 @@ export default createComponent({
 				height: 14px;
 				width: 14px;
 				border-radius: 50%;
-				background: var(--_v-slider-thumb-color);
+				background: var(--v-slider-thumb-color);
 				margin-top: -6px;
 				cursor: ew-resize;
 				box-shadow: 0 0 0 4px var(--input-background-color);
@@ -177,7 +166,7 @@ export default createComponent({
 			transform: translateY(2px) scaleX(calc(var(--_v-slider-percentage) / 100));
 			transform-origin: left;
 			height: 2px;
-			background-color: var(--_v-slider-track-fill-color);
+			background-color: var(--v-slider-fill-color);
 			pointer-events: none;
 			z-index: 2;
 		}
@@ -201,7 +190,7 @@ export default createComponent({
 				width: 4px;
 				height: 4px;
 				border-radius: 50%;
-				background-color: var(--_v-slider-track-fill-color);
+				background-color: var(--v-slider-fill-color);
 			}
 		}
 

src/components/v-spinner/v-spinner.readme.md

@@ -6,24 +6,22 @@
 
 ## Colors
 
-The color of the spinner can be changed through the `color` prop. This prop accepts any valid CSS color string, or a global CSS var prefixed with `--`:
+The color of the spinner can be changed through the `--v-spinner-color` and `--v-spinner-background-color` css variable.
 
 ```html
-<v-spinner color="red" />
-<v-spinner color="#abcabc" />
-<v-spinner color="rgba(255, 125, 81, 0.2)" />
-<v-spinner color="--amber" />
-<v-spinner color="--danger" />
+<v-spinner style="--v-spinner-color: var(--red-400); --v-spinner-background-color: transparent" />
 ```
 
 The background color can be set in similar fashion:
 
 ```html
-<v-spinner background-color="red" />
-<v-spinner background-color="#abcabc" />
-<v-spinner background-color="rgba(255, 125, 81, 0.2)" />
-<v-spinner background-color="--amber" />
-<v-spinner background-color="--danger" />
+<v-spinner/>
+<style>
+.v-spinner {
+    --v-spinner-color: var(--red-100);
+	--v-spinner-background-color: var(--red-600);
+}
+</style>
 ```
 
 
@@ -49,14 +47,24 @@ Alternatively, you can force the font-size through the `size` prop:
 ```
 
 ## Props
-
 | Prop        | Description                       | Default                             |
 |-------------|-----------------------------------|-------------------------------------|
-| `color`     | Color of the spinner              | `--loading-background-color-accent` |
-| `size`      | Size of the spinner in px         | --                                  |
-| `line-size` | Size of the border of the spinner | --                                  |
-| `speed`     | Speed of the spin animation       | `1s`                                |
 | `x-small`   | Render extra small                | `false`                             |
 | `small`     | Render small                      | `false`                             |
 | `large`     | Render large                      | `false`                             |
 | `x-large`   | Render extra large                | `false`                             |
+
+## Slots
+n/a
+
+## Events
+n/a
+
+## CSS Variables
+| Variable                       | Default                                  |
+|--------------------------------|------------------------------------------|
+| `--v-spinner-color`            | `var(--loading-background-color-accent)` |
+| `--v-spinner-background-color` | `var(--loading-background-color)`        |
+| `--v-spinner-speed`            | `1s`                                     |
+| `--v-spinner-size`             | `28px`                                   |
+| `--v-spinner-line-size`        | `3px`                                    |

src/components/v-spinner/v-spinner.story.ts

@@ -44,33 +44,35 @@ export const interactive = () => ({
 			default: text('Speed (css, eg 200ms)', '1s')
 		},
 		customSize: {
-			default: number('Size (in px)', 0)
+			default: text('Size (in px)', '28px')
 		},
 		customLineSize: {
-			default: number('Line Size (in px)', 0)
+			default: text('Line Size (in px)', '3px')
 		}
 	},
 	template: `
 	<v-spinner
-		:color="color"
-		:background-color="backgroundColor"
+		:style="{
+			'--v-spinner-color': color,
+			'--v-spinner-background-color': backgroundColor,
+			'--v-spinner-speed': speed,
+			'--v-spinner-size': customSize,
+			'--v-spinner-line-size': customLineSize
+		}"
 		:x-small="size === 'xSmall'"
 		:small="size === 'small'"
 		:large="size === 'large'"
 		:x-large="size === 'xLarge'"
-		:size="customSize"
-		:line-size="customLineSize"
-		:speed="speed"
 	/>`
 });
 
 export const colors = () => `
 <div style="display: flex; justify-content: space-around">
-<v-spinner color="--red" />
-<v-spinner color="transparent" background-color="--blue" />
-<v-spinner color="--green" />
-<v-spinner color="--amber" background-color="--red" />
-<v-spinner color="--purple" />
+	<v-spinner style="--v-spinner-color: var(--red)" />
+	<v-spinner style="--v-spinner-color: transparent; --v-spinner-background-color: var(--blue)" />
+	<v-spinner style="--v-spinner-color: var(--green)" />
+	<v-spinner style="--v-spinner-color: var(--amber); --v-spinner-background-color: var(--red)" />
+	<v-spinner style="--v-spinner-color: var(--purple)" />
 </div>
 `;
 
@@ -86,10 +88,10 @@ export const sizes = () => `
 
 export const speed = () => `
 <div style="display: flex; justify-content: space-around">
-<v-spinner speed="5s" />
-<v-spinner speed="2.5s" />
+<v-spinner style="--v-spinner-speed: 5s" />
+<v-spinner style="--v-spinner-speed: 2.5s" />
 <v-spinner  />
-<v-spinner speed="500ms" />
-<v-spinner speed="250ms" />
+<v-spinner style="--v-spinner-speed: 500ms" />
+<v-spinner style="--v-spinner-speed: 250ms" />
 </div>
 `;

src/components/v-spinner/v-spinner.test.ts

@@ -11,40 +11,6 @@ describe('Spinner', () => {
 
 	beforeEach(() => (component = mount(VSpinner, { localVue })));
 
-	describe('Styles', () => {
-		test('Color', async () => {
-			component.setProps({ color: '--red' });
-			await component.vm.$nextTick();
-			expect((component.vm as any).styles['--_v-spinner-color']).toBe('var(--red)');
-		});
-
-		test('Background Color', async () => {
-			component.setProps({ backgroundColor: '--red' });
-			await component.vm.$nextTick();
-			expect((component.vm as any).styles['--_v-spinner-background-color']).toBe(
-				'var(--red)'
-			);
-		});
-
-		test('Size', async () => {
-			component.setProps({ size: 58 });
-			await component.vm.$nextTick();
-			expect((component.vm as any).styles['--_v-spinner-size']).toBe('58px');
-		});
-
-		test('Line Size', async () => {
-			component.setProps({ lineSize: 24 });
-			await component.vm.$nextTick();
-			expect((component.vm as any).styles['--_v-spinner-line-size']).toBe('24px');
-		});
-
-		test('Speed', async () => {
-			component.setProps({ speed: '5s' });
-			await component.vm.$nextTick();
-			expect((component.vm as any).styles['--_v-spinner-speed']).toBe('5s');
-		});
-	});
-
 	describe('Sizes', () => {
 		test('Extra Small', () => {
 			component.setProps({

src/components/v-spinner/v-spinner.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="v-spinner" :class="sizeClass" :style="styles"></div>
+	<div class="v-spinner" :class="sizeClass"></div>
 </template>
 
 <script lang="ts">
@@ -8,26 +8,6 @@ import parseCSSVar from '@/utils/parse-css-var';
 
 export default createComponent({
 	props: {
-		color: {
-			type: String,
-			default: '--loading-background-color-accent'
-		},
-		backgroundColor: {
-			type: String,
-			default: '--loading-background-color'
-		},
-		size: {
-			type: Number,
-			default: null
-		},
-		lineSize: {
-			type: Number,
-			default: null
-		},
-		speed: {
-			type: String,
-			default: '1s'
-		},
 		xSmall: {
 			type: Boolean,
 			default: false
@@ -46,32 +26,6 @@ export default createComponent({
 		}
 	},
 	setup(props) {
-		type Styles = {
-			'--_v-spinner-color': string;
-			'--_v-spinner-background-color': string;
-			'--_v-spinner-speed': string;
-			'--_v-spinner-size'?: string;
-			'--_v-spinner-line-size'?: string;
-		};
-
-		const styles = computed(() => {
-			const styles: Styles = {
-				'--_v-spinner-color': parseCSSVar(props.color),
-				'--_v-spinner-background-color': parseCSSVar(props.backgroundColor),
-				'--_v-spinner-speed': props.speed
-			};
-
-			if (props.size) {
-				styles['--_v-spinner-size'] = `${props.size}px`;
-			}
-
-			if (props.lineSize) {
-				styles['--_v-spinner-line-size'] = `${props.lineSize}px`;
-			}
-
-			return styles;
-		});
-
 		const sizeClass = computed<string | null>(() => {
 			if (props.xSmall) return 'x-small';
 			if (props.small) return 'small';
@@ -80,48 +34,49 @@ export default createComponent({
 			return null;
 		});
 
-		return {
-			styles,
-			sizeClass
-		};
+		return { sizeClass };
 	}
 });
 </script>
 
 <style lang="scss" scoped>
 .v-spinner {
-	--_v-spinner-size: 28px;
-	--_v-spinner-line-size: 3px;
+	--v-spinner-color: var(--loading-background-color-accent);
+	--v-spinner-background-color: var(--loading-background-color);
 
-	width: var(--_v-spinner-size);
-	height: var(--_v-spinner-size);
+	--v-spinner-speed: 1s;
+	--v-spinner-size: 28px;
+	--v-spinner-line-size: 3px;
+
+	width: var(--v-spinner-size);
+	height: var(--v-spinner-size);
 	position: relative;
 
 	border-radius: 100%;
-	border: var(--_v-spinner-line-size) solid var(--_v-spinner-background-color);
-	border-top: var(--_v-spinner-line-size) solid var(--_v-spinner-color);
+	border: var(--v-spinner-line-size) solid var(--v-spinner-background-color);
+	border-top: var(--v-spinner-line-size) solid var(--v-spinner-color);
 	background-color: transparent;
 
-	animation: rotate var(--_v-spinner-speed) infinite linear;
+	animation: rotate var(--v-spinner-speed) infinite linear;
 
 	&.x-small {
-		--_v-spinner-size: 12px;
-		--_v-spinner-line-size: 2px;
+		--v-spinner-size: 12px;
+		--v-spinner-line-size: 2px;
 	}
 
 	&.small {
-		--_v-spinner-size: 16px;
-		--_v-spinner-line-size: 3px;
+		--v-spinner-size: 16px;
+		--v-spinner-line-size: 3px;
 	}
 
 	&.large {
-		--_v-spinner-size: 48px;
-		--_v-spinner-line-size: 4px;
+		--v-spinner-size: 48px;
+		--v-spinner-line-size: 4px;
 	}
 
 	&.x-large {
-		--_v-spinner-size: 64px;
-		--_v-spinner-line-size: 5px;
+		--v-spinner-size: 64px;
+		--v-spinner-line-size: 5px;
 	}
 }
 

src/components/v-switch/v-switch.readme.md

@@ -8,13 +8,15 @@
 
 ## Colors
 
-The switch component accepts any CSS color value, or variable name:
+Color changes are done using the css variable `--v-switch-color`.
 
 ```html
-<v-switch color="#abcabc" />
-<v-switch color="rgba(125, 125, 198, 0.5)" />
-<v-switch color="--red" />
-<v-switch color="--input-border-color" />
+<v-switch/>
+<style>
+.v-switch {
+    --v-switch-color: var(--red);
+}
+</style>
 ```
 
 ## Boolean vs arrays
@@ -45,23 +47,24 @@ Just as with regular checkboxes, you can use `v-model` with both an array and a
 
 Keep in mind to pass the `value` prop with a unique value when using arrays in `v-model`.
 
-## Events
-
-| Event    | Description                | Data                       |
-|----------|----------------------------|----------------------------|
-| `change` | New state for the checkbox | Boolean or array of values |
-
 ## Props
-
 | Prop         | Description                                                                                            | Default                           |
 |--------------|--------------------------------------------------------------------------------------------------------|-----------------------------------|
 | `value`      | Value for switch. Similar to value attr on checkbox type input in HTML                                 | `--`                              |
 | `inputValue` | Value that's used with `v-model`. Either boolean or array of values                                    | `false`                           |
 | `label`      | Label for the checkbox                                                                                 | `--`                              |
-| `color`      | Color for the checked state of the checkbox. Either CSS var name (fe `--red`) or other valid CSS color | `--input-background-color-active` |
+
+## Events
+| Event    | Description                | Data                       |
+|----------|----------------------------|----------------------------|
+| `change` | New state for the checkbox | Boolean or array of values |
 
 ## Slots
-
 | Slot    | Description                                                                                    |
 |---------|------------------------------------------------------------------------------------------------|
 | `label` | Allows custom markup and HTML to be rendered inside the label. Will override the `label` prop. |
+
+## CSS Variables
+| Variable           | Default                                |
+|--------------------|----------------------------------------|
+| `--v-switch-color` | `var(--input-background-color-active)` |

src/components/v-switch/v-switch.story.ts

@@ -78,10 +78,10 @@ export const colors = () => ({
 	},
 	template: `
 	<div>
-		<v-switch style="margin-bottom: 20px" v-model="options" value="red" @change="onChange" color="--red" label="Red" />
-		<v-switch style="margin-bottom: 20px" v-model="options" value="blue" @change="onChange" color="--blue" label="Blue" />
-		<v-switch style="margin-bottom: 20px" v-model="options" value="yellow" @change="onChange" color="--amber" label="Yellow" />
-		<v-switch style="margin-bottom: 20px" v-model="options" value="custom" @change="onChange" :color="customColor" label="Custom..." />
+		<v-switch v-model="options" value="red" @change="onChange" style="margin-bottom: 20px; --v-switch-color: var(--red)" label="Red" />
+		<v-switch v-model="options" value="blue" @change="onChange" style="margin-bottom: 20px; --v-switch-color: var(--blue)" label="Blue" />
+		<v-switch v-model="options" value="yellow" @change="onChange" style="margin-bottom: 20px; --v-switch-color: var(--amber)" label="Yellow" />
+		<v-switch style="margin-bottom: 20px;" v-model="options" value="custom" @change="onChange" :style="{'--v-switch-color': customColor}" label="Custom..." />
 	</div>
 	`
 });

src/components/v-switch/v-switch.test.ts

@@ -18,17 +18,6 @@ describe('Switch', () => {
 		expect(component.find('span[class="label"]').text()).toContain('Turn me on');
 	});
 
-	it('Uses the correct inline styles for custom colors', () => {
-		const component = mount(VSwitch, {
-			localVue,
-			propsData: {
-				color: '#123123'
-			}
-		});
-
-		expect((component.vm as any).colorStyle['--_v-switch-color']).toBe('#123123');
-	});
-
 	it('Renders as checked when inputValue `true` is given', () => {
 		const component = mount(VSwitch, {
 			localVue,

src/components/v-switch/v-switch.vue

@@ -5,7 +5,6 @@
 		type="button"
 		role="switch"
 		:aria-pressed="isChecked ? 'true' : 'false'"
-		:style="colorStyle"
 		:disabled="disabled"
 	>
 		<span class="switch" />
@@ -37,10 +36,6 @@ export default createComponent({
 			type: String,
 			default: null
 		},
-		color: {
-			type: String,
-			default: '--input-background-color-active'
-		},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -55,13 +50,7 @@ export default createComponent({
 			return props.inputValue === true;
 		});
 
-		const colorStyle = computed(() => {
-			return {
-				'--_v-switch-color': parseCSSVar(props.color)
-			};
-		});
-
-		return { isChecked, toggleInput, colorStyle };
+		return { isChecked, toggleInput };
 
 		function toggleInput(): void {
 			if (props.inputValue instanceof Array) {
@@ -84,6 +73,8 @@ export default createComponent({
 
 <style lang="scss" scoped>
 .v-switch {
+	--v-switch-color: var(--input-background-color-active);
+
 	font-size: 0;
 	appearance: none;
 	background-color: transparent;
@@ -128,8 +119,8 @@ export default createComponent({
 	&[aria-pressed='true'] {
 		&:not(:disabled) {
 			.switch {
-				background-color: var(--_v-switch-color);
-				border-color: var(--_v-switch-color);
+				background-color: var(--v-switch-color);
+				border-color: var(--v-switch-color);
 
 				&::after {
 					background-color: var(--input-text-color-active);

src/components/v-table/v-table.readme.md

@@ -111,7 +111,6 @@ export default createComponent({
 ```
 
 ## Props
-
 | Prop           | Description                                                         | Default |
 |----------------|---------------------------------------------------------------------|---------|
 | `headers`*     | What columns to show in the table. Supports the `.sync` modifier    | --      |
@@ -122,10 +121,8 @@ export default createComponent({
 | `show-resize`  | Show resize handlers                                                | `false` |
 | `selection`    | What items are selected. Can be used with `v-model` as well         | `[]`    |
 | `fixed-header` | Make the header fixed                                               | `false` |
-| `height`       | A fixed height (in px) for the table                                | --      |
 
 ## Events
-
 | Event            | Description                                    | Value                           |
 |------------------|------------------------------------------------|---------------------------------|
 | `update:sort`    | `.sync` event for `sort` prop                  | `{ by: string, desc: boolean }` |
@@ -134,8 +131,12 @@ export default createComponent({
 | `select`         | Emitted when selected items change             | `any[]`                         |
 
 ## Slots
-
 | Slot             | Description                      |
 |------------------|----------------------------------|
 | `header.[value]` | Override individual header cells |
 | `item.[value]`   | Override individual row cells    |
+
+## CSS Variables
+| Variable           | Default |
+|--------------------|---------|
+| `--v-table-height` | `auto`  |

src/components/v-table/v-table.test.ts

@@ -506,20 +506,6 @@ describe('Table', () => {
 		expect(component.emitted('select')[1]).toEqual([[]]);
 	});
 
-	it('Sets the correct inline styles for given height', async () => {
-		component.setProps({
-			headers: [],
-			items: [],
-			height: 50
-		});
-
-		await component.vm.$nextTick();
-
-		expect((component.vm as any).styles).toEqual({
-			height: '50px'
-		});
-	});
-
 	describe('Sorting', () => {
 		it('Sorts the items by the given sort prop internally', async () => {
 			component.setProps({

src/components/v-table/v-table.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="v-table" :style="styles" :class="{ loading }">
+	<div class="v-table" :class="{ loading }">
 		<table>
 			<table-header
 				:headers.sync="_headers"
@@ -124,10 +124,6 @@ export default createComponent({
 			type: Boolean,
 			default: false
 		},
-		height: {
-			type: Number,
-			default: null
-		},
 		loading: {
 			type: Boolean,
 			default: false
@@ -215,20 +211,6 @@ export default createComponent({
 			return props.selection.length > 0 && allItemsSelected.value === false;
 		});
 
-		type Styles = {
-			height?: string;
-		};
-
-		const styles = computed<object>(() => {
-			const styles: Styles = {};
-
-			if (props.height) {
-				styles.height = props.height + 'px';
-			}
-
-			return styles;
-		});
-
 		const hasRowClick = computed<boolean>(() => listeners.hasOwnProperty('click:row'));
 
 		return {
@@ -240,7 +222,6 @@ export default createComponent({
 			onItemSelected,
 			onToggleSelectAll,
 			someItemsSelected,
-			styles,
 			onEndDrag,
 			hasRowClick
 		};
@@ -290,8 +271,11 @@ export default createComponent({
 
 <style lang="scss" scoped>
 .v-table {
+	--v-table-height: auto;
+
 	position: relative;
 	overflow: auto;
+	height: var(--v-table-height);
 
 	table {
 		border-spacing: 0;