Type and color treatmeant (#281)

* Switch from roboto to inter

* Add and use new color palette

* Fix tests

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

@@ -29,7 +29,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-avatar {
-	--v-avatar-color: var(--action);
+	--v-avatar-color: var(--primary);
 	--v-avatar-size: 48px;
 
 	position: relative;

src/components/v-badge/readme.md

@@ -38,6 +38,6 @@ N/A
 |-------------------------------------|-------------------------------------------------|
 | `--v-badge-color`                   | `var(--white)`                                  |
 | `--v-badge-background-color`        | `var(--danger)`                                 |
-| `--v-badge-border-color`            | `var(--background-color)`                       |
+| `--v-badge-border-color`            | `var(--background-page)`                       |
 | `--v-badge-offset-x`                | `0px`                                           |
 | `--v-badge-offset-y`                | `0px`                                           |

src/components/v-badge/v-badge.vue

@@ -46,7 +46,7 @@ export default defineComponent({
 .v-badge {
 	--v-badge-color: var(--white);
 	--v-badge-background-color: var(--danger);
-	--v-badge-border-color: var(--background-color);
+	--v-badge-border-color: var(--background-page);
 	--v-badge-offset-x: 0px;
 	--v-badge-offset-y: 0px;
 	--v-badge-size: 20px;

src/components/v-breadcrumb/readme.md

@@ -22,7 +22,7 @@ n/a
 ## CSS Variables
 | Prop                            | Default                             |
 |---------------------------------|-------------------------------------|
-| `--v-breadcrumb-color`          | `var(--foreground-color-secondary)` |
-| `--v-breadcrumb-color-hover`    | `var(--foreground-color)`           |
-| `--v-breadcrumb-color-disabled` | `var(--foreground-color-tertiary)`  |
-| `--v-breadcrumb-divider-color`  | `var(--foreground-color-tertiary)`  |
+| `--v-breadcrumb-color`          | `var(--foreground-subdued)` |
+| `--v-breadcrumb-color-hover`    | `var(--foreground-normal)`           |
+| `--v-breadcrumb-color-disabled` | `var(--foreground-subdued)`  |
+| `--v-breadcrumb-divider-color`  | `var(--foreground-subdued)`  |

src/components/v-breadcrumb/v-breadcrumb.vue

@@ -43,10 +43,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-breadcrumb {
-	--v-breadcrumb-color: var(--foreground-color-secondary);
-	--v-breadcrumb-color-hover: var(--foreground-color);
-	--v-breadcrumb-color-disabled: var(--foreground-color-tertiary);
-	--v-breadcrumb-divider-color: var(--foreground-color-tertiary);
+	--v-breadcrumb-color: var(--foreground-subdued);
+	--v-breadcrumb-color-hover: var(--foreground-normal);
+	--v-breadcrumb-color-disabled: var(--foreground-subdued);
+	--v-breadcrumb-divider-color: var(--foreground-subdued);
 
 	display: flex;
 	align-items: center;

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

@@ -55,7 +55,7 @@ export default defineComponent({
 
 | Variable                                   | Default                                            |
 |--------------------------------------------|----------------------------------------------------|
-| `--v-button-group-background-color-active` | `var(--button-primary-background-color-disabled)`  |
+| `--v-button-group-background-color-active` | `var(--primary-alt)`  |
 
 
 

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

@@ -53,11 +53,11 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 .v-button-group {
-	--v-button-group-background-color-active: var(--button-primary-background-color-disabled);
+	--v-button-group-background-color-active: var(--primary-alt);
 
 	.v-item-group {
 		::v-deep .v-button {
-			--button-border-radius: 0px;
+			--border-radius: 0px;
 
 			&:active {
 				transform: unset;
@@ -69,34 +69,32 @@ export default defineComponent({
 			}
 
 			&:first-child {
-				--button-border-radius: var(--input-border-radius) 0px 0px
-					var(--input-border-radius);
+				--border-radius: var(--border-radius) 0px 0px var(--border-radius);
 			}
 
 			&:last-child {
-				--button-border-radius: 0px var(--input-border-radius) var(--input-border-radius)
-					0px;
+				--border-radius: 0px var(--border-radius) var(--border-radius) 0px;
 			}
 		}
 	}
 
 	&.tile .v-item-group ::v-deep .v-button {
 		&:first-child {
-			--button-border-radius: 0px;
+			--border-radius: 0px;
 		}
 
 		&:last-child {
-			--button-border-radius: 0px;
+			--border-radius: 0px;
 		}
 	}
 
 	&.rounded:not(.tile) .v-item-group ::v-deep .v-button {
 		&:first-child {
-			--button-border-radius: var(--v-button-height) 0px 0px var(--v-button-height);
+			--border-radius: var(--v-button-height) 0px 0px var(--v-button-height);
 		}
 
 		&:last-child {
-			--button-border-radius: 0px var(--v-button-height) var(--v-button-height) 0px;
+			--border-radius: 0px var(--v-button-height) var(--v-button-height) 0px;
 		}
 	}
 }

src/components/v-button/readme.md

@@ -63,6 +63,7 @@ The loading slot is rendered _on top_ of the content that was there before. Make
 | `to`       | Render as vue router-link                                                 | `false`    |
 | `align`    | Align content in button. One of `left | center | right`                   | `'center'` |
 | `dashed`   | Render the border dashed. Meant to be used with `outlined`.               | `false`    |
+| `tile`     | Render without border radius                                              | `false`    |
 
 ## Slots
 
@@ -83,12 +84,12 @@ The loading slot is rendered _on top_ of the content that was there before. Make
 |-----------------------------------------|----------------------------------------------------|
 | `--v-button-width`                      | `auto`                                             |
 | `--v-button-height`                     | `44px`                                             |
-| `--v-button-color`                      | `var(--button-primary-foreground-color)`           |
-| `--v-button-color-hover`                | `var(--button-primary-foreground-color-hover)`     |
-| `--v-button-color-activated`            | `var(--button-primary-foreground-color-activated)` |
-| `--v-button-color-disabled`             | `var(--button-primary-foreground-color-disabled)`  |
-| `--v-button-background-color`           | `var(--button-primary-background-color)`           |
-| `--v-button-background-color-hover`     | `var(--button-primary-background-color-hover)`     |
-| `--v-button-background-color-activated` | `var(--button-primary-background-color-activated)` |
-| `--v-button-background-color-disabled`  | `var(--button-primary-background-color-disabled)`  |
+| `--v-button-color`                      | `var(--foreground-inverted)`           |
+| `--v-button-color-hover`                | `var(--foreground-inverted)`     |
+| `--v-button-color-activated`            | `var(--foreground-inverted)` |
+| `--v-button-color-disabled`             | `var(--primary)`  |
+| `--v-button-background-color`           | `var(--primary)`           |
+| `--v-button-background-color-hover`     | `var(--primary)`     |
+| `--v-button-background-color-activated` | `var(--primary)` |
+| `--v-button-background-color-disabled`  | `var(--primary-alt)`  |
 | `--v-button-font-size`                  | `16px`                                             |

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

@@ -56,6 +56,9 @@ export const withText = () => ({
 		dashed: {
 			default: boolean('Dashed', false, 'Button'),
 		},
+		tile: {
+			default: boolean('Tile', false, 'Button'),
+		},
 		fullWidth: {
 			default: boolean('Full-width', false, 'Button'),
 		},
@@ -108,6 +111,7 @@ export const withText = () => ({
 			:outlined="outlined"
 			:align="align"
 			:dashed="dashed"
+			:tile="tile"
 			:icon="icon"
 			:style="{
 				'--v-button-color': color,

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

@@ -16,6 +16,7 @@
 				secondary,
 				active,
 				dashed,
+				tile,
 			},
 		]"
 		:type="type"
@@ -90,6 +91,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		tile: {
+			type: Boolean,
+			default: false,
+		},
 		align: {
 			type: String,
 			default: 'center',
@@ -119,14 +124,12 @@ export default defineComponent({
 .v-button {
 	--v-button-width: auto;
 	--v-button-height: 44px;
-	--v-button-color: var(--button-primary-foreground-color);
-	--v-button-color-hover: var(--button-primary-foreground-color-hover);
-	--v-button-color-activated: var(--button-primary-foreground-color-activated);
-	--v-button-color-disabled: var(--button-primary-foreground-color-disabled);
-	--v-button-background-color: var(--button-primary-background-color);
-	--v-button-background-color-hover: var(--button-primary-background-color-hover);
-	--v-button-background-color-activated: var(--button-primary-background-color-activated);
-	--v-button-background-color-disabled: var(--button-primary-background-color-disabled);
+	--v-button-color: var(--foreground-inverted);
+	--v-button-color-activated: var(--foreground-inverted);
+	--v-button-color-disabled: var(--foreground-subdued);
+	--v-button-background-color: var(--primary);
+	--v-button-background-color-activated: var(--primary);
+	--v-button-background-color-disabled: var(--background-subdued);
 	--v-button-font-size: 16px;
 
 	position: relative;
@@ -141,8 +144,8 @@ export default defineComponent({
 	font-size: var(--v-button-font-size);
 	text-decoration: none;
 	background-color: var(--v-button-background-color);
-	border: var(--button-border-width) solid var(--v-button-background-color);
-	border-radius: var(--button-border-radius);
+	border: var(--border-width) solid var(--v-button-background-color);
+	border-radius: var(--border-radius);
 	cursor: pointer;
 	transition: var(--fast) var(--transition);
 	transition-property: background-color border;
@@ -160,13 +163,12 @@ export default defineComponent({
 	}
 
 	&.secondary {
-		--v-button-color: var(--button-secondary-foreground-color);
-		--v-button-color-hover: var(--button-secondary-foreground-color-hover);
-		--v-button-color-activated: var(--button-secondary-foreground-color-activated);
-		--v-button-background-color: var(--button-secondary-background-color);
-		--v-button-background-color-hover: var(--button-secondary-background-color-hover);
-		--v-button-background-color-activated: var(--button-secondary-background-color-activated);
-		--v-button-background-color-disabled: var(--button-secondary-background-color-disabled);
+		--v-button-color: var(--foreground-color);
+		--v-button-color-hover: var(--foreground-color);
+		--v-button-color-activated: var(--foreground-color);
+		--v-button-background-color: var(--background-normal-alt);
+		--v-button-background-color-hover: var(--background-normal-alt);
+		--v-button-background-color-activated: var(--background-normal-alt);
 	}
 
 	&:active {
@@ -180,7 +182,7 @@ export default defineComponent({
 	&:disabled {
 		color: var(--v-button-color-disabled);
 		background-color: var(--v-button-background-color-disabled);
-		border: var(--input-border-width) solid var(--v-button-background-color-disabled);
+		border: var(--border-width) solid var(--v-button-background-color-disabled);
 		cursor: not-allowed;
 
 		&:active {
@@ -196,6 +198,10 @@ export default defineComponent({
 		--v-button-color: var(--v-button-background-color);
 
 		background-color: transparent;
+
+		&.secondary {
+			--v-button-color: var(--foreground-subdued);
+		}
 	}
 
 	&.dashed {
@@ -277,12 +283,8 @@ export default defineComponent({
 		--v-button-background-color: var(--v-button-background-color-activated) !important;
 	}
 
-	@media (hover: hover) {
-		&:not(.loading):not(:disabled):not(.activated):hover {
-			color: var(--v-button-color-hover);
-			background-color: var(--v-button-background-color-hover);
-			border: var(--button-border-width) solid var(--v-button-background-color-hover);
-		}
+	&.tile {
+		border-radius: 0;
 	}
 }
 </style>

src/components/v-card/readme.md

@@ -55,7 +55,7 @@ n/a
 | `--v-card-min-height`       | `none`             |
 | `--v-card-max-height`       | `none`             |
 | `--v-card-padding`          | `16px`             |
-| `--v-card-background-color` | `var(--highlight)` |
+| `--v-card-background-color` | `var(--background-subdued)` |
 
 ---
 

src/components/v-card/v-card-subtitle.vue

@@ -3,13 +3,9 @@
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/type-styles';
-
 .v-card-subtitle {
 	margin-top: -16px;
 	padding: 16px;
 	padding-top: 0;
-
-	@include type-card-subtitle;
 }
 </style>

src/components/v-card/v-card-text.vue

@@ -3,12 +3,8 @@
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/type-styles';
-
 .v-card-text {
 	padding: var(--v-card-padding);
 	padding-top: 0;
-
-	@include type-card-text;
 }
 </style>

src/components/v-card/v-card-title.vue

@@ -1,16 +1,12 @@
 <template functional>
-	<div class="v-card-title"><slot /></div>
+	<div class="v-card-title type-label"><slot /></div>
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/type-styles';
-
 .v-card-title {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	padding: var(--v-card-padding);
-
-	@include type-card-title;
 }
 </style>

src/components/v-card/v-card.vue

@@ -32,7 +32,7 @@ export default defineComponent({
 	--v-card-min-height: none;
 	--v-card-max-height: min-content;
 	--v-card-padding: 16px;
-	--v-card-background-color: var(--highlight);
+	--v-card-background-color: var(--background-subdued);
 
 	min-width: var(--v-card-min-width);
 	max-width: var(--v-card-max-width);
@@ -40,11 +40,11 @@ export default defineComponent({
 	min-height: var(--v-card-min-height);
 	max-height: var(--v-card-max-height);
 	background-color: var(--v-card-background-color);
-	border-radius: var(--input-border-radius);
+	border-radius: var(--border-radius);
 
 	& > :first-child {
-		border-top-left-radius: var(--input-border-radius);
-		border-top-right-radius: var(--input-border-radius);
+		border-top-left-radius: var(--border-radius);
+		border-top-right-radius: var(--border-radius);
 	}
 
 	&.disabled {

src/components/v-checkbox/readme.md

@@ -30,7 +30,7 @@ The colors can be changed via the css variables `--v-checkbox-color`.
 }
 
 .example-4 {
-	--v-checkbox-color: var(--input-border-color);
+	--v-checkbox-color: var(--border-normal);
 }
 </style>
 ```
@@ -108,4 +108,4 @@ If you can't, you should listen to the `update:indeterminate` event and respond
 ## CSS Variables
 | Variable             | Default                                |
 |----------------------|----------------------------------------|
-| `--v-checkbox-color` | `var(--input-background-color-active)` |
+| `--v-checkbox-color` | `var(--background-page-active)` |

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

@@ -17,7 +17,7 @@ describe('Checkbox', () => {
 			},
 		});
 
-		expect(component.find('span[class="label"]').text()).toContain('Turn me on');
+		expect(component.find('span[class="label type-label"]').text()).toContain('Turn me on');
 	});
 
 	it('Renders as checked when inputValue `true` is given', () => {

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

@@ -9,7 +9,7 @@
 		:class="{ checked: isChecked }"
 	>
 		<v-icon :name="icon" />
-		<span class="label">
+		<span class="label type-label">
 			<slot name="label">{{ label }}</slot>
 		</span>
 	</button>
@@ -85,11 +85,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/type-styles';
 @import '@/styles/mixins/no-wrap';
 
 .v-checkbox {
-	--v-checkbox-color: var(--input-foreground-color);
+	--v-checkbox-color: var(--foreground-normal);
 
 	display: flex;
 	align-items: center;
@@ -103,29 +102,28 @@ export default defineComponent({
 	.label:not(:empty) {
 		margin-left: 8px;
 
-		@include type-body-sans;
 		@include no-wrap;
 	}
 
 	& .v-icon {
-		--v-icon-color: var(--input-border-color);
+		--v-icon-color: var(--border-normal);
 	}
 
 	&:disabled {
 		cursor: not-allowed;
 
 		.label {
-			color: var(--foreground-color-secondary);
+			color: var(--foreground-subdued);
 		}
 
 		.v-icon {
-			--v-icon-color: var(--input-border-color);
+			--v-icon-color: var(--border-normal);
 		}
 	}
 
 	&:not(:disabled):hover {
 		.v-icon {
-			--v-icon-color: var(--input-border-color-hover);
+			--v-icon-color: var(--border-normal);
 		}
 	}
 

src/components/v-chip/readme.md

@@ -71,7 +71,7 @@ There are two events, one when clicking on the chip called `click` and one when
 ## CSS Variables
 | Variable                          | Default                               |
 |-----------------------------------|---------------------------------------|
-| `--v-chip-color`                  | `var(--input-foreground-color)`       |
-| `--v-chip-background-color`       | `var(--input-border-color)`           |
-| `--v-chip-color-hover`            | `var(--input-foreground-color-hover)` |
-| `--v-chip-background-color-hover` | `var(--input-border-color-hover)`     |
+| `--v-chip-color`                  | `var(--foreground-normal)`       |
+| `--v-chip-background-color`       | `var(--border-normal)`           |
+| `--v-chip-color-hover`            | `var(--foreground-normal)` |
+| `--v-chip-background-color-hover` | `var(--border-normal)`     |

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

@@ -85,10 +85,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-chip {
-	--v-chip-color: var(--input-foreground-color);
-	--v-chip-background-color: var(--input-border-color);
-	--v-chip-color-hover: var(--input-foreground-color-hover);
-	--v-chip-background-color-hover: var(--input-border-color-hover);
+	--v-chip-color: var(--foreground-normal);
+	--v-chip-background-color: var(--border-normal);
+	--v-chip-color-hover: var(--foreground-normal);
+	--v-chip-background-color-hover: var(--border-normal);
 
 	display: inline-flex;
 	align-items: center;
@@ -97,7 +97,7 @@ export default defineComponent({
 	color: var(--v-chip-color);
 	font-weight: var(--weight-normal);
 	background-color: var(--v-chip-background-color);
-	border: var(--input-border-width) solid var(--v-chip-background-color);
+	border: var(--border-width) solid var(--v-chip-background-color);
 	border-radius: 16px;
 
 	&:hover {

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

@@ -32,7 +32,7 @@ export const basic = () =>
 				<v-button @click="active = !active">Activate</v-button>
 				<v-dialog v-model="active" :persistent="persistent">
 					<v-sheet>
-						<h2 class="type-heading-small" style="margin-bottom: 20px">Are you sure you want to delete this item?</h2>
+						<h2 class="type-label" style="margin-bottom: 20px">Are you sure you want to delete this item?</h2>
 						<v-button @click="active = false" secondary outlined>Cancel</v-button>
 						<v-button @click="active = false">Yes</v-button>
 					</v-sheet>
@@ -61,7 +61,7 @@ export const activatorSlot = () =>
 						<p @click="on">Click me to active</p>
 					</template>
 					<v-sheet>
-						<h2 class="type-heading-small" style="margin-bottom: 20px">Are you sure you want to delete this item?</h2>
+						<h2 class="type-label" style="margin-bottom: 20px">Are you sure you want to delete this item?</h2>
 						<v-button @click="active = false" secondary outlined>Cancel</v-button>
 						<v-button @click="active = false">Yes</v-button>
 					</v-sheet>

src/components/v-divider/readme.md

@@ -26,4 +26,4 @@ n/a
 ## CSS Variables
 | Variable            | Default                             |
 |---------------------|-------------------------------------|
-| `--v-divider-color` | `var(--foreground-color-tertiary)` |
+| `--v-divider-color` | `var(--foreground-subdued)` |

src/components/v-divider/v-divider.vue

@@ -24,8 +24,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-divider {
-	--v-divider-color: var(--input-border-color);
-	--v-divider-label-color: var(--input-action-color);
+	--v-divider-color: var(--border-normal);
+	--v-divider-label-color: var(--foreground-subdued);
 
 	display: flex;
 	flex-basis: 0px;

src/components/v-fancy-select/v-fancy-select.vue

@@ -82,8 +82,8 @@ export default defineComponent({
 	width: 100%;
 	margin-bottom: 8px;
 	padding: 12px;
-	background-color: var(--background-color-alt);
-	border: 2px solid var(--background-color-alt);
+	background-color: var(--background-normal);
+	border: 2px solid var(--background-normal);
 	border-radius: 6px;
 	backface-visibility: hidden;
 	cursor: pointer;
@@ -92,7 +92,7 @@ export default defineComponent({
 	transition-property: background-color, border-color;
 
 	&:not(.disabled):hover {
-		border-color: var(--action);
+		border-color: var(--background-normal-alt);
 	}
 
 	&.disabled {
@@ -106,7 +106,7 @@ export default defineComponent({
 		width: 44px;
 		height: 44px;
 		margin-right: 12px;
-		background-color: var(--background-color);
+		background-color: var(--background-page);
 		border-radius: 50%;
 	}
 
@@ -120,16 +120,16 @@ export default defineComponent({
 
 	&.active {
 		z-index: 2;
-		color: var(--accent);
-		background-color: var(--accent-light);
-		border-color: var(--accent);
+		color: var(--primary);
+		background-color: var(--primary-alt);
+		border-color: var(--primary);
 
 		.v-icon {
-			--v-icon-color: var(--accent);
+			--v-icon-color: var(--primary);
 		}
 
 		&:hover {
-			border-color: var(--accent);
+			border-color: var(--primary);
 		}
 	}
 }

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

@@ -85,7 +85,7 @@ export default defineComponent({
 	vertical-align: middle;
 
 	i {
-		display: inline-block;
+		display: block;
 		font-weight: normal;
 		font-size: var(--v-icon-size);
 		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
@@ -95,7 +95,6 @@ export default defineComponent({
 		letter-spacing: normal;
 		white-space: nowrap;
 		text-transform: none;
-		vertical-align: middle;
 		word-wrap: normal;
 		font-feature-settings: 'liga';
 

src/components/v-input/v-input.vue

@@ -92,10 +92,10 @@ export default defineComponent({
 		align-items: center;
 		height: 100%;
 		padding: var(--input-padding);
-		color: var(--input-foreground-color);
-		background-color: var(--input-background-color);
-		border: var(--input-border-width) solid var(--input-border-color);
-		border-radius: var(--input-border-radius);
+		color: var(--foreground-normal);
+		background-color: var(--background-page);
+		border: var(--border-width) solid var(--border-normal);
+		border-radius: var(--border-radius);
 		transition: border-color var(--fast) var(--transition);
 
 		.prepend {
@@ -103,21 +103,21 @@ export default defineComponent({
 		}
 
 		&:hover {
-			color: var(--input-foreground-color-hover);
-			background-color: var(--input-background-color-hover);
-			border-color: var(--input-border-color-hover);
+			color: var(--foreground-normal);
+			background-color: var(--background-page);
+			border-color: var(--border-normal);
 		}
 
 		&:focus-within {
-			color: var(--input-foreground-color-focus);
-			background-color: var(--input-background-color-focus);
-			border-color: var(--input-border-color-focus);
+			color: var(--foreground-normal);
+			background-color: var(--background-page);
+			border-color: var(--primary);
 		}
 
 		&.disabled {
-			color: var(--input-foreground-color-disabled);
-			background-color: var(--input-background-color-disabled);
-			border-color: var(--input-border-color-disabled);
+			color: var(--foreground-subdued);
+			background-color: var(--background-normal-alt);
+			border-color: var(--border-normal-alt);
 		}
 
 		input {
@@ -128,7 +128,7 @@ export default defineComponent({
 			appearance: none;
 
 			&::placeholder {
-				color: var(--input-foreground-color-empty);
+				color: var(--foreground-subdued);
 			}
 		}
 
@@ -140,7 +140,7 @@ export default defineComponent({
 
 		.prefix,
 		.suffix {
-			color: var(--input-foreground-color-empty);
+			color: var(--foreground-subdued);
 		}
 
 		.append {

src/components/v-list/readme.md

@@ -38,12 +38,11 @@ n/a
 | `--v-list-max-width`               | `none`                           |
 | `--v-list-min-width`               | `none`                           |
 | `--v-list-min-height`              | `none`                           |
-| `--v-list-color`                   | `var(--foreground-color)`        |
-| `--v-list-color-hover`             | `var(--foreground-color)`        |
-| `--v-list-color-active`            | `var(--foreground-color)`        |
-| `--v-list-background-color`        | `var(--background-color)`        |
-| `--v-list-background-color-hover`  | `var(--background-color-hover)`  |
-| `--v-list-background-color-active` | `var(--background-color-active)` |
+| `--v-list-color`                   | `var(--foreground-normal)`        |
+| `--v-list-color-hover`             | `var(--foreground-normal)`        |
+| `--v-list-color-active`            | `var(--foreground-normal)`        |
+| `--v-list-background-color-hover`  | `var(--background-normal-alt)`  |
+| `--v-list-background-color-active` | `var(--background-normal-alt)` |
 
 ---
 
@@ -96,12 +95,11 @@ n/a
 | `--v-list-item-max-height`                  | `auto`                                                                  |
 | `--v-list-item-border-radius`               | `0`                                                                     |
 | `--v-list-item-margin-bottom`               | `0`                                                                     |
-| `--v-list-item-color`                       | `var(--v-list-color, var(--foreground-color))`                          |
-| `--v-list-item-color-hover`                 | `var(--v-list-color-hover, var(--foreground-color))`                    |
-| `--v-list-item-color-active`                | `var(--v-list-color-active, var(--foreground-color))`                   |
-| `--v-list-item-background-color`            | `var(--v-list-background-color, var(--background-color))`               |
-| `--v-list-item-background-color-hover`      | `var(--v-list-background-color-hover, var(--background-color-hover))`   |
-| `--v-list-item-background-color-active`     | `var(--v-list-background-color-active, var(--background-color-active))` |
+| `--v-list-item-color`                       | `var(--v-list-color, var(--foreground-normal))`                          |
+| `--v-list-item-color-hover`                 | `var(--v-list-color-hover, var(--foreground-normal))`                    |
+| `--v-list-item-color-active`                | `var(--v-list-color-active, var(--foreground-normal))`                   |
+| `--v-list-item-background-color-hover`      | `var(--v-list-background-color-hover, var(--background-normal-alt))`   |
+| `--v-list-item-background-color-active`     | `var(--v-list-background-color-active, var(--background-normal-alt))` |
 
 ---
 

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

@@ -18,8 +18,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/type-styles';
-
 .v-list-item-icon {
 	$this: &;
 

src/components/v-list/v-list-item-subtitle.vue

@@ -5,8 +5,6 @@
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/type-styles';
-
 .v-list-item-subtitle {
 	$this: &;
 
@@ -18,11 +16,6 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 
-	.v-list.dense &,
-	.v-list-item.dense & {
-		@include type-item-subtitle-dense;
-	}
-
 	@at-root {
 		.v-list,
 		.v-list-item,
@@ -42,7 +35,5 @@
 			}
 		}
 	}
-
-	@include type-item-subtitle;
 }
 </style>

src/components/v-list/v-list-item-title.vue

@@ -1,12 +1,10 @@
 <template functional>
-	<div class="v-list-item-title">
+	<div class="v-list-item-title type-text">
 		<slot></slot>
 	</div>
 </template>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/type-styles';
-
 .v-list-item-title {
 	flex-basis: 100%;
 	flex-grow: 1;
@@ -15,11 +13,5 @@
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
-
-	.v-list.dense &,
-	.v-list-item.dense & {
-		@include type-item-title-dense;
-	}
-	@include type-item-title;
 }
 </style>

src/components/v-list/v-list-item.vue

@@ -71,17 +71,16 @@ export default defineComponent({
 	--v-list-item-max-height: auto;
 	--v-list-item-border-radius: 0;
 	--v-list-item-margin-bottom: 0;
-	--v-list-item-color: var(--v-list-color, var(--foreground-color));
-	--v-list-item-color-hover: var(--v-list-color-hover, var(--foreground-color));
-	--v-list-item-color-active: var(--v-list-color-active, var(--foreground-color));
-	--v-list-item-background-color: var(--v-list-background-color, var(--background-color));
+	--v-list-item-color: var(--v-list-color, var(--foreground-normal));
+	--v-list-item-color-hover: var(--v-list-color-hover, var(--foreground-normal));
+	--v-list-item-color-active: var(--v-list-color-active, var(--foreground-normal));
 	--v-list-item-background-color-hover: var(
 		--v-list-background-color-hover,
-		var(--background-color-hover)
+		var(--background-normal-alt)
 	);
 	--v-list-item-background-color-active: var(
 		--v-list-background-color-active,
-		var(--background-color-active)
+		var(--background-normal-alt)
 	);
 
 	position: relative;
@@ -99,7 +98,6 @@ export default defineComponent({
 	overflow: hidden;
 	color: var(--v-list-item-color);
 	text-decoration: none;
-	background-color: var(--v-list-item-background-color);
 	border-radius: var(--v-list-item-border-radius);
 
 	&.link {
@@ -121,7 +119,7 @@ export default defineComponent({
 	}
 
 	&.disabled {
-		--v-list-item-color: var(--foreground-color-secondary);
+		--v-list-item-color: var(--foreground-subdued);
 	}
 
 	@at-root {

src/components/v-list/v-list.vue

@@ -57,12 +57,11 @@ export default defineComponent({
 	--v-list-max-width: none;
 	--v-list-min-width: none;
 	--v-list-min-height: none;
-	--v-list-color: var(--foreground-color);
-	--v-list-color-hover: var(--foreground-color);
-	--v-list-color-active: var(--foreground-color);
-	--v-list-background-color: var(--background-color);
-	--v-list-background-color-hover: var(--background-color-hover);
-	--v-list-background-color-active: var(--background-color-active);
+	--v-list-color: var(--foreground-normal);
+	--v-list-color-hover: var(--foreground-normal);
+	--v-list-color-active: var(--foreground-normal);
+	--v-list-background-color-hover: var(--background-normal-alt);
+	--v-list-background-color-active: var(--background-normal-alt);
 
 	position: static;
 	display: block;
@@ -73,8 +72,7 @@ export default defineComponent({
 	padding: var(--v-list-padding);
 	overflow: auto;
 	color: var(--v-list-color);
-	background-color: var(--v-list-background-color);
-	border-radius: var(--input-border-radius);
+	border-radius: var(--border-radius);
 
 	&.nav {
 		--v-list-padding: 8px;

src/components/v-menu/v-menu.vue

@@ -169,7 +169,7 @@ export default defineComponent({
 
 	.arrow {
 		&::before {
-			background: var(--input-border-color);
+			background: var(--border-normal);
 			transform: rotate(45deg) scale(0);
 			transition: transform var(--fast) var(--transition-out);
 			transition-delay: 0;
@@ -202,9 +202,9 @@ export default defineComponent({
 		max-height: 50vh;
 		overflow-x: hidden;
 		overflow-y: auto;
-		background-color: var(--highlight);
-		border: 2px solid var(--input-border-color);
-		border-radius: var(--input-border-radius);
+		background-color: var(--background-subdued);
+		border: 2px solid var(--border-normal);
+		border-radius: var(--border-radius);
 		box-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1);
 		opacity: 0;
 		transition-timing-function: var(--transition-out);

src/components/v-modal/v-modal.vue

@@ -82,7 +82,7 @@ export default defineComponent({
 	max-width: 916px;
 	height: calc(100% - 16px);
 	max-height: 760px;
-	background-color: var(--background-color);
+	background-color: var(--background-page);
 	border-radius: 4px;
 
 	.spacer {
@@ -95,7 +95,7 @@ export default defineComponent({
 		align-items: center;
 		height: 60px;
 		padding: 0 16px;
-		border-bottom: 2px solid var(--background-color-alt);
+		border-bottom: 2px solid var(--background-normal);
 
 		.title {
 			margin-right: 12px;
@@ -103,7 +103,7 @@ export default defineComponent({
 		}
 
 		.subtitle {
-			color: var(--foreground-color-secondary);
+			color: var(--foreground-subdued);
 		}
 
 		.menu-toggle {
@@ -133,7 +133,7 @@ export default defineComponent({
 			flex-shrink: 0;
 			width: 220px;
 			height: 100%;
-			background-color: var(--background-color-alt);
+			background-color: var(--background-normal);
 			transform: translateX(-100%);
 			transition: transform var(--slow) var(--transition-out);
 
@@ -174,7 +174,7 @@ export default defineComponent({
 		justify-content: flex-end;
 		height: 60px;
 		padding: 0 16px;
-		border-top: 2px solid var(--background-color-alt);
+		border-top: 2px solid var(--background-normal);
 
 		::v-deep > *:not(:last-child) {
 			margin-right: 8px;

src/components/v-notice/readme.md

@@ -23,6 +23,6 @@ n/a
 ## CSS Variables
 | Variable                      | Default                    |
 |-------------------------------|----------------------------|
-| `--v-notice-color`            | `var(--foreground-color);` |
-| `--v-notice-background-color` | `var(--action-light);`     |
-| `--v-notice-icon-color`       | `var(--action);`           |
+| `--v-notice-color`            | `var(--foreground-normal);` |
+| `--v-notice-background-color` | `var(--primary-alt);`     |
+| `--v-notice-icon-color`       | `var(--primary);`           |

src/components/v-notice/v-notice.vue

@@ -63,9 +63,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-notice {
-	--v-notice-color: var(--foreground-color);
-	--v-notice-background-color: var(--action-light);
-	--v-notice-icon-color: var(--action);
+	--v-notice-color: var(--foreground-normal);
+	--v-notice-background-color: var(--primary-alt);
+	--v-notice-icon-color: var(--primary);
 
 	display: flex;
 	align-items: center;
@@ -74,7 +74,7 @@ export default defineComponent({
 	padding: 12px 16px;
 	color: var(--v-notice-color);
 	background-color: var(--v-notice-background-color);
-	border-radius: var(--input-border-radius);
+	border-radius: var(--border-radius);
 
 	.v-icon {
 		--v-icon-color: var(--v-notice-icon-color);
@@ -82,17 +82,17 @@ export default defineComponent({
 
 	&.success {
 		--v-notice-icon-color: var(--success);
-		--v-notice-background-color: var(--success-light);
+		--v-notice-background-color: var(--success-alt);
 	}
 
 	&.warning {
 		--v-notice-icon-color: var(--warning);
-		--v-notice-background-color: var(--warning-light);
+		--v-notice-background-color: var(--warning-alt);
 	}
 
 	&.danger {
 		--v-notice-icon-color: var(--danger);
-		--v-notice-background-color: var(--danger-light);
+		--v-notice-background-color: var(--danger-alt);
 	}
 }
 </style>

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

@@ -33,7 +33,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-overlay {
-	--v-overlay-color: var(--overlay-color);
+	--v-overlay-color: rgba(38, 50, 56, 0.75);
 	--v-overlay-z-index: 500;
 
 	position: fixed;

src/components/v-pagination/readme.md

@@ -26,4 +26,4 @@ n/a
 ## CSS Variables
 | Variable                      | Default         |
 |-------------------------------|-----------------|
-| `--v-pagination-active-color` | `var(--accent)` |
+| `--v-pagination-active-color` | `var(--primary)` |

src/components/v-pagination/v-pagination.vue

@@ -134,7 +134,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-pagination {
-	--v-pagination-active-color: var(--accent);
+	--v-pagination-active-color: var(--primary);
 
 	.v-button {
 		vertical-align: middle;

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

@@ -47,8 +47,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-progress-circular {
-	--v-progress-circular-color: var(--input-foreground-color);
-	--v-progress-circular-background-color: var(--input-border-color);
+	--v-progress-circular-color: var(--foreground-normal);
+	--v-progress-circular-background-color: var(--border-normal);
 	--v-progress-circular-transition: 400ms;
 	--v-progress-circular-speed: 2s;
 	--v-progress-circular-size: 28px;

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

@@ -45,5 +45,5 @@ n/a
 | Variable                               | Default                         |
 |----------------------------------------|---------------------------------|--|
 | `--v-progress-linear-height`           | `4px`                           |
-| `--v-progress-linear-color`            | `var(--input-foreground-color)` |
-| `--v-progress-linear-background-color` | `var(--input-border-color)`     |
+| `--v-progress-linear-color`            | `var(--foreground-normal)` |
+| `--v-progress-linear-background-color` | `var(--border-normal)`     |

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

@@ -60,8 +60,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 .v-progress-linear {
 	--v-progress-linear-height: 4px;
-	--v-progress-linear-color: var(--input-foreground-color);
-	--v-progress-linear-background-color: var(--input-border-color);
+	--v-progress-linear-color: var(--foreground-normal);
+	--v-progress-linear-background-color: var(--border-normal);
 	--v-progress-linear-transition: 400ms;
 
 	position: relative;

src/components/v-sheet/readme.md

@@ -18,7 +18,7 @@ The color can be changed via the css variable called `--v-sheet-color`.
 <v-sheet/>
 <style>
 .v-sheet {
-    --v-sheet-color: var(-red-600);
+	--v-sheet-color: var(-red-600);
 }
 </style>
 ```
@@ -37,7 +37,7 @@ n/a
 ## CSS Variables
 | Variable                     | Default                             |
 |------------------------------|-------------------------------------|
-| `--v-sheet-background-color` | `var(--input-background-color-alt)` |
+| `--v-sheet-background-color` | `var(--background-page-alt)` |
 | `--v-sheet-height`           | `auto`                              |
 | `--v-sheet-min-height`       | `var(--input-height)`               |
 | `--v-sheet-max-height`       | `none`                              |

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

@@ -17,7 +17,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-sheet {
-	--v-sheet-background-color: var(--highlight);
+	--v-sheet-background-color: var(--background-subdued);
 	--v-sheet-height: auto;
 	--v-sheet-min-height: var(--input-height);
 	--v-sheet-max-height: none;
@@ -35,6 +35,6 @@ export default defineComponent({
 	padding: var(--v-sheet-padding);
 	overflow: auto;
 	background-color: var(--v-sheet-background-color);
-	border-radius: var(--input-border-radius);
+	border-radius: var(--border-radius);
 }
 </style>

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

@@ -19,7 +19,7 @@
 			</div>
 			<div v-if="showThumbLabel" class="thumb-label-wrapper">
 				<div class="thumb-label">
-					<slot name="thumb-label" :value="value">
+					<slot name="thumb-label type-text" :value="value">
 						{{ value }}
 					</slot>
 				</div>
@@ -87,12 +87,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/type-styles';
-
 .v-slider {
-	--v-slider-color: var(--input-border-color);
-	--v-slider-thumb-color: var(--input-foreground-color);
-	--v-slider-fill-color: var(--input-foreground-color);
+	--v-slider-color: var(--border-normal);
+	--v-slider-thumb-color: var(--foreground-normal);
+	--v-slider-fill-color: var(--foreground-normal);
 
 	display: flex;
 	align-items: center;
@@ -138,7 +136,7 @@ export default defineComponent({
 				border: none;
 				border-radius: 50%;
 				box-shadow: none;
-				box-shadow: 0 0 0 4px var(--background-color);
+				box-shadow: 0 0 0 4px var(--background-page);
 				cursor: ew-resize;
 				-webkit-appearance: none;
 				appearance: none;
@@ -154,7 +152,7 @@ export default defineComponent({
 				border: none;
 				border-radius: 50%;
 				box-shadow: none;
-				box-shadow: 0 0 0 4px var(--background-color);
+				box-shadow: 0 0 0 4px var(--background-page);
 				cursor: ew-resize;
 				-webkit-appearance: none;
 				appearance: none;
@@ -212,9 +210,9 @@ export default defineComponent({
 			left: calc(var(--_v-slider-percentage) * 1%);
 			width: max-content;
 			padding: 4px 8px;
-			color: var(--input-foreground-color);
-			background-color: var(--background-color-alt);
-			border-radius: var(--input-border-radius);
+			color: var(--foreground-normal);
+			background-color: var(--background-normal);
+			border-radius: var(--border-radius);
 			transform: translateX(-50%);
 			opacity: 0;
 			transition: opacity var(--fast) var(--transition);
@@ -225,13 +223,11 @@ export default defineComponent({
 				left: calc(50%);
 				width: 10px;
 				height: 10px;
-				background-color: var(--background-color-alt);
+				background-color: var(--background-normal);
 				border-radius: var(--border-radius);
 				transform: translateX(-50%) rotate(45deg);
 				content: '';
 			}
-
-			@include type-body-sans;
 		}
 
 		&:active {

src/components/v-switch/readme.md

@@ -14,7 +14,7 @@ Color changes are done using the css variable `--v-switch-color`.
 <v-switch/>
 <style>
 .v-switch {
-    --v-switch-color: var(--red);
+	--v-switch-color: var(--red);
 }
 </style>
 ```
@@ -67,4 +67,4 @@ Keep in mind to pass the `value` prop with a unique value when using arrays in `
 ## CSS Variables
 | Variable           | Default                         |
 |--------------------|---------------------------------|
-| `--v-switch-color` | `var(--input-foreground-color)` |
+| `--v-switch-color` | `var(--foreground-normal)` |

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

@@ -15,7 +15,7 @@ describe('Switch', () => {
 			},
 		});
 
-		expect(component.find('span[class="label"]').text()).toContain('Turn me on');
+		expect(component.find('span[class="label type-label"]').text()).toContain('Turn me on');
 	});
 
 	it('Renders as checked when inputValue `true` is given', () => {

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

@@ -8,7 +8,7 @@
 		:disabled="disabled"
 	>
 		<span class="switch" />
-		<span class="label">
+		<span class="label type-label">
 			<slot name="label">{{ label }}</slot>
 		</span>
 	</button>
@@ -71,10 +71,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/type-styles';
-
 .v-switch {
-	--v-switch-color: var(--input-foreground-color);
+	--v-switch-color: var(--foreground-normal);
 
 	display: flex;
 	align-items: center;
@@ -90,7 +88,7 @@ export default defineComponent({
 		width: 44px;
 		height: 24px;
 		vertical-align: middle;
-		border: var(--input-border-width) solid var(--input-border-color);
+		border: var(--border-width) solid var(--border-normal);
 		border-radius: 12px;
 		transition: var(--fast) var(--transition);
 		transition-property: background-color border;
@@ -106,14 +104,14 @@ export default defineComponent({
 			display: block;
 			width: 16px;
 			height: 16px;
-			background-color: var(--input-border-color);
+			background-color: var(--border-normal);
 			border-radius: 8px;
 			transition: transform var(--fast) var(--transition);
 			content: '';
 		}
 
 		&:hover {
-			border-color: var(--input-border-color-hover);
+			border-color: var(--border-normal);
 		}
 	}
 
@@ -122,7 +120,7 @@ export default defineComponent({
 		border-color: var(--v-switch-color);
 
 		&::after {
-			background-color: var(--background-color);
+			background-color: var(--background-page);
 			transform: translateX(20px);
 		}
 	}
@@ -130,28 +128,26 @@ export default defineComponent({
 	.label:not(:empty) {
 		margin-left: 8px;
 		vertical-align: middle;
-
-		@include type-body-sans;
 	}
 
 	&:disabled {
 		cursor: not-allowed;
 
 		.switch {
-			background-color: var(--input-background-color-disabled);
-			border-color: var(--input-border-color);
+			background-color: var(--background-normal-alt);
+			border-color: var(--border-normal);
 
 			&::after {
-				background-color: var(--input-border-color);
+				background-color: var(--border-normal);
 			}
 
 			&:hover {
-				border-color: var(--input-border-color);
+				border-color: var(--border-normal);
 			}
 		}
 
 		.label {
-			color: var(--foreground-color-secondary);
+			color: var(--foreground-subdued);
 		}
 	}
 }

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

@@ -222,8 +222,8 @@ export default defineComponent({
 		padding: 0 20px;
 		font-weight: 500;
 		font-size: 14px;
-		background-color: var(--input-background-color);
-		border-bottom: 1px solid var(--input-border-color);
+		background-color: var(--background-page);
+		border-bottom: 1px solid var(--border-normal);
 
 		&.select,
 		&.sort {
@@ -235,6 +235,7 @@ export default defineComponent({
 			display: flex;
 			align-items: center;
 			height: 100%;
+			font-weight: 600;
 
 			> span {
 				overflow: hidden;
@@ -301,12 +302,12 @@ export default defineComponent({
 			display: block;
 			width: 1px;
 			height: 100%;
-			background-color: var(--input-border-color);
+			background-color: var(--border-normal);
 			content: '';
 		}
 
 		&:hover::after {
-			background-color: var(--input-action-color-hover);
+			background-color: var(--foreground-subdued);
 		}
 	}
 

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

@@ -99,8 +99,8 @@ export default defineComponent({
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		background-color: var(--input-background-color);
-		border-bottom: 1px solid var(--divider-color);
+		background-color: var(--background-page);
+		border-bottom: 1px solid var(--background-normal-alt);
 
 		&.select,
 		&.sort {
@@ -114,19 +114,19 @@ export default defineComponent({
 	}
 
 	&.clickable:not(.subdued):hover .cell {
-		background-color: var(--highlight);
+		background-color: var(--background-subdued);
 		cursor: pointer;
 	}
 
 	.drag-handle {
-		--v-icon-color: var(--input-action-color-disabled);
+		--v-icon-color: var(--background-normal-alt);
 
 		&:hover {
 			.sorted-manually {
-				--v-icon-color: var(--input-action-color);
+				--v-icon-color: var(--foreground-normal);
 
 				&:hover {
-					--v-icon-color: var(--input-action-color-hover);
+					--v-icon-color: var(--foreground-subdued);
 
 					cursor: ns-resize;
 				}

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

@@ -342,7 +342,7 @@ export default defineComponent({
 
 			.sortable-ghost {
 				.cell {
-					background-color: var(--highlight);
+					background-color: var(--background-subdued);
 				}
 			}
 		}
@@ -377,7 +377,7 @@ export default defineComponent({
 		}
 
 		.loading-text {
-			color: var(--input-foreground-color-empty);
+			color: var(--foreground-subdued);
 			text-align: center;
 
 			td {

src/components/v-tabs/readme.md

@@ -52,4 +52,4 @@ export default defineComponent({
 ## CSS Variables
 | Variable                   | Default                   |
 |----------------------------|---------------------------|
-| `--v-tabs-underline-color` | `var(--foreground-color)` |
+| `--v-tabs-underline-color` | `var(--foreground-normal)` |

src/components/v-tabs/v-tab/readme.md

@@ -28,7 +28,7 @@ n/a
 ## CSS Variables
 | Variable                          | Default                         |
 |-----------------------------------|---------------------------------|
-| `--v-tab-color`                   | `var(--input-foreground-color)` |
-| `--v-tab-background-color`        | `var(--input-background-color)` |
-| `--v-tab-color-active`            | `var(--input-foreground-color)` |
-| `--v-tab-background-color-active` | `var(--input-background-color)` |
+| `--v-tab-color`                   | `var(--foreground-normal)` |
+| `--v-tab-background-color`        | `var(--background-page)` |
+| `--v-tab-color-active`            | `var(--foreground-normal)` |
+| `--v-tab-background-color-active` | `var(--background-page)` |

src/components/v-tabs/v-tab/v-tab.vue

@@ -43,10 +43,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-tab.horizontal {
-	--v-tab-color: var(--input-foreground-color);
-	--v-tab-background-color: var(--input-background-color);
-	--v-tab-color-active: var(--input-foreground-color);
-	--v-tab-background-color-active: var(--input-background-color);
+	--v-tab-color: var(--foreground-normal);
+	--v-tab-background-color: var(--background-page);
+	--v-tab-color-active: var(--foreground-normal);
+	--v-tab-background-color-active: var(--background-page);
 
 	color: var(--v-tab-color);
 	font-weight: 500;

src/components/v-tabs/v-tabs.vue

@@ -59,7 +59,7 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 .v-tabs.horizontal {
-	--v-tabs-underline-color: var(--foreground-color);
+	--v-tabs-underline-color: var(--foreground-normal);
 
 	position: relative;
 	display: flex;

src/modules/collections/routes/browse/browse.vue

@@ -293,7 +293,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .private-view {
-	--private-view-content-padding: 0 !important;
+	--content-padding: 0 !important;
 }
 
 .action-delete {
@@ -303,7 +303,7 @@ export default defineComponent({
 
 .action-batch {
 	--v-button-background-color: var(--warning);
-	--v-button-background-color-hover: var(--warning-dark);
+	--v-button-background-color-hover: var(--warning-150);
 }
 
 .layout {

src/modules/collections/routes/overview/overview.vue

@@ -58,7 +58,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .icon {
-	--v-icon-color: var(--foreground-color-secondary);
+	--v-icon-color: var(--foreground-subdued);
 
 	::v-deep i {
 		vertical-align: unset;

src/modules/settings/routes/data-model/collections/collections.vue

@@ -106,6 +106,10 @@ export default defineComponent({
 }
 
 .hidden {
-	color: var(--foreground-color-secondary);
+	color: var(--foreground-subdued);
+}
+
+.v-table {
+	padding: var(--content-padding);
 }
 </style>

src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue

@@ -229,6 +229,6 @@ export default defineComponent({
 }
 
 .v-input.hidden {
-	--input-background-color: var(--background-color-alt);
+	--background-page: var(--background-normal);
 }
 </style>

src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue

@@ -22,6 +22,7 @@
 			dashed
 			outlined
 			full-width
+			large
 			@click="openFieldSetup()"
 		>
 			<v-icon name="add" left />
@@ -241,7 +242,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .v-divider {
-	margin: var(--private-view-content-padding) 0;
+	margin: var(--content-padding) 0;
 }
 
 .add-field {

src/modules/settings/routes/data-model/fields/fields.vue

@@ -1,21 +1,33 @@
 <template>
 	<private-view :title="collectionInfo.name">
+		<template #title-outer:prepend>
+			<v-button rounded disabled icon secondary>
+				<v-icon name="account_tree" />
+			</v-button>
+		</template>
+
+		<template #headline>
+			<v-breadcrumb :items="breadcrumb" />
+		</template>
+
 		<template #navigation>
 			<settings-navigation />
 		</template>
 
 		<div class="fields">
-			<h2 class="title">{{ $t('fields_and_layout') }}</h2>
+			<h2 class="title type-label">{{ $t('fields_and_layout') }}</h2>
 			<fields-management :collection="collection" />
 		</div>
 	</private-view>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import SettingsNavigation from '../../../components/navigation/';
 import useCollection from '@/compositions/use-collection/';
 import FieldsManagement from './components/fields-management';
+import useProjectsStore from '@/stores/projects';
+import { i18n } from '@/lang';
 
 export default defineComponent({
 	components: { SettingsNavigation, FieldsManagement },
@@ -26,23 +38,30 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
+		const projectsStore = useProjectsStore();
 		const { info: collectionInfo, fields } = useCollection(props.collection);
 
-		return { collectionInfo, fields };
+		const breadcrumb = computed(() => {
+			return [
+				{
+					name: i18n.t('settings_data_model'),
+					to: `/${projectsStore.state.currentProjectKey}/settings/data-model`,
+				},
+			];
+		});
+
+		return { collectionInfo, fields, breadcrumb };
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/type-styles';
-
 .title {
 	margin-bottom: 12px;
-	@include type-heading-small;
 }
 
 .fields {
 	max-width: 800px;
-	padding: var(--private-view-content-padding);
+	padding: var(--content-padding);
 }
 </style>

src/routes/login/login.vue

@@ -1,6 +1,6 @@
 <template>
 	<public-view>
-		<h1 class="type-heading-large">{{ $t('sign_in') }}</h1>
+		<h1 class="type-title">{{ $t('sign_in') }}</h1>
 
 		<continue-as v-if="alreadyAuthenticated" />
 		<project-error

src/routes/project-chooser/project-chooser.vue

@@ -1,6 +1,6 @@
 <template>
 	<public-view>
-		<h1 class="type-heading-large">{{ $t('choose_project') }}</h1>
+		<h1 class="type-title">{{ $t('choose_project') }}</h1>
 
 		<v-button v-for="project in projects" :to="project.link" full-width :key="project.key">
 			{{ (project.api && project.api.project_name) || project.key }}

src/styles/_base.scss

@@ -16,10 +16,11 @@ html {
 
 body {
 	color: var(--page-text-color);
-	font-weight: 400;
+	font-weight: 500;
+	font-size: 14px;
 	font-family: var(--family-sans-serif);
-	line-height: 1.3;
-	letter-spacing: 0.01em;
+	font-style: normal;
+	line-height: 22px;
 	background-color: var(--page-background-color);
 	-webkit-font-smoothing: antialiased;
 	text-rendering: optimizeLegibility;

src/styles/_fonts.scss

@@ -1,46 +1,57 @@
-@font-face {
-	font-weight: 300;
-	font-family: 'Roboto';
-	font-style: normal;
-	src:
-		url('../assets/fonts/roboto-light.woff2') format('woff2'),
-		url('../assets/fonts/roboto-light.woff') format('woff');
-	font-display: block;
-}
+// Sans Serif
 
 @font-face {
 	font-weight: 400;
-	font-family: 'Roboto';
+	font-family: 'Inter';
 	font-style: normal;
 	src:
-		url('../assets/fonts/roboto-regular.woff2') format('woff2'),
-		url('../assets/fonts/roboto-regular.woff') format('woff');
+		url('../assets/fonts/Inter-Regular.woff2') format('woff2'),
+		url('../assets/fonts/Inter-Regular.woff') format('woff');
 	font-display: block;
 }
 
 @font-face {
 	font-weight: 500;
-	font-family: 'Roboto';
+	font-family: 'Inter';
 	font-style: normal;
 	src:
-		url('../assets/fonts/roboto-medium.woff2') format('woff2'),
-		url('../assets/fonts/roboto-medium.woff') format('woff');
+		url('../assets/fonts/Inter-Medium.woff2') format('woff2'),
+		url('../assets/fonts/Inter-Medium.woff') format('woff');
 	font-display: block;
 }
 
-// Roboto Mono
+@font-face {
+	font-weight: 500;
+	font-family: 'Inter';
+	font-style: italic;
+	src:
+		url('../assets/fonts/Inter-MediumItalic.woff2') format('woff2'),
+		url('../assets/fonts/Inter-MediumItalic.woff') format('woff');
+	font-display: block;
+}
+
+@font-face {
+	font-weight: 600;
+	font-family: 'Inter';
+	font-style: normal;
+	src:
+		url('../assets/fonts/Inter-SemiBold.woff2') format('woff2'),
+		url('../assets/fonts/Inter-SemiBold.woff') format('woff');
+	font-display: block;
+}
+
+// Monospace
 
 @font-face {
 	font-weight: 400;
-	font-family: 'Roboto Mono';
+	font-family: 'Fira Code';
 	font-style: normal;
 	src:
-		url('../assets/fonts/robotomono-regular.woff2') format('woff2'),
-		url('../assets/fonts/robotomono-regular.woff') format('woff');
-	font-display: block;
+		url('../assets/fonts/FiraCode-Regular.woff2') format('woff2'),
+		url('../assets/fonts/FiraCode-Regular.woff') format('woff');
 }
 
-// Merriweather
+// Serif
 
 @font-face {
 	font-weight: 400;

src/styles/_tooltip.scss

@@ -7,14 +7,14 @@
 	display: none;
 	max-width: 260px;
 	padding: 4px 8px;
-	color: var(--tooltip-foreground-color);
-	background-color: var(--tooltip-background-color);
+	color: var(--foreground-inverted);
+	background-color: var(--background-inverted);
 	border-radius: 4px;
 	transition: opacity 200ms;
 
 	&.inverted {
-		--tooltip-foreground-color: var(--tooltip-foreground-color-inverted);
-		--tooltip-background-color: var(--tooltip-background-color-inverted);
+		--tooltip-foreground-color: var(--foreground-normal);
+		--tooltip-background-color: var(--background-subdued);
 	}
 
 	&.visible {

src/styles/_type-styles.scss

@@ -1,43 +1,30 @@
-@import 'mixins/type-styles';
-
 :root {
-	--family-monospace: 'Roboto Mono', monospace;
+	--family-monospace: 'Fira Code', monospace;
 	--family-serif: 'Merriweather', serif;
-	--family-sans-serif: 'Roboto', sans-serif;
+	--family-sans-serif: 'Inter', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
 
 .type-title {
-	@include type-title;
-}
-
-.type-heading-large {
-	@include type-heading-large;
-}
-
-.type-heading-medium {
-	@include type-heading-medium;
-}
-
-.type-heading-small {
-	@include type-heading-small;
+	font-weight: normal;
+	font-size: 24px;
+	font-family: var(--family-sans-serif);
+	font-style: normal;
+	line-height: 29px;
 }
 
 .type-label {
-	@include type-label;
+	font-weight: 600;
+	font-size: 16px;
+	font-family: var(--family-sans-serif);
+	font-style: normal;
+	line-height: 19px;
+	letter-spacing: -0.32px;
 }
 
-.type-note {
-	@include type-note;
-}
-
-.type-table-head {
-	@include type-table-head;
-}
-
-.type-body-serif {
-	@include type-body-serif;
-}
-
-.type-body-sans {
-	@include type-body-sans;
+.type-text {
+	font-weight: 500;
+	font-size: 14px;
+	font-family: var(--family-sans-serif);
+	font-style: normal;
+	line-height: 22px;
 }

src/styles/_variables.scss

@@ -6,4 +6,8 @@
 	--medium: 200ms;
 	--slow: 300ms;
 	--content-padding: 12px;
+	--border-width: 2px;
+	--border-radius: 6px;
+	--input-height: 52px;
+	--input-padding: 12px;
 }

src/styles/lib/_codemirror.scss

@@ -6,14 +6,14 @@
 		font-weight: inherit;
 		font-family: var(--family-monospace);
 		line-height: 18px;
-		background-color: var(--input-background-color);
-		border: var(--input-border-width) solid var(--input-border-color);
+		background-color: var(--background-page);
+		border: var(--border-width) solid var(--border-normal);
 		border-radius: var(--border-radius);
 		transition: all var(--fast) var(--transition);
 	}
 
 	.CodeMirror:hover {
-		border-color: var(--input-border-color-hover);
+		border-color: var(--border-normal);
 		transition: none;
 	}
 
@@ -25,11 +25,11 @@
 	.CodeMirror-line::selection,
 	.CodeMirror-line > span::selection,
 	.CodeMirror-line > span > span::selection {
-		background: var(--highlight);
+		background: var(--background-subdued);
 	}
 
 	.CodeMirror.CodeMirror-focused {
-		border-color: var(--input-border-color-focus);
+		border-color: var(--primary);
 	}
 
 	.cm-matchhighlight {
@@ -42,7 +42,7 @@
 	}
 
 	.CodeMirror-activeline-background {
-		background: var(--input-background-color-alt);
+		background: var(--background-page-alt);
 	}
 
 	.CodeMirror pre {
@@ -50,8 +50,8 @@
 	}
 
 	.CodeMirror-gutters {
-		background-color: var(--input-background-color-alt);
-		border-right: 2px solid var(--input-border-color);
+		background-color: var(--background-page-alt);
+		border-right: 2px solid var(--border-normal);
 	}
 
 	.CodeMirror-linenumber {
@@ -87,7 +87,7 @@
 	}
 
 	.cm-s-default .cm-atom {
-		color: var(--accent);
+		color: var(--primary);
 	}
 
 	.cm-s-default .cm-attribute {
@@ -100,7 +100,7 @@
 
 	.CodeMirror .CodeMirror-matchingbracket {
 		color: inherit;
-		border-bottom: 1px solid var(--accent);
+		border-bottom: 1px solid var(--primary);
 	}
 
 	.CodeMirror .CodeMirror-nonmatchingbracket {

src/styles/main.scss

@@ -1,9 +1,9 @@
 @import 'base';
 @import 'colors';
 @import 'fonts';
-@import 'type-styles';
 @import 'variables';
 @import 'tooltip';
+@import 'type-styles';
 @import 'themes/default';
 @import 'themes/dark-mode';
 @import 'lib/codemirror';

src/styles/mixins/type-styles.scss

@@ -1,101 +0,0 @@
-@mixin type-title {
-	color: var(--heading-text-color);
-	font-size: 22px;
-}
-
-@mixin type-heading-large {
-	color: var(--heading-text-color);
-	font-weight: 300;
-	font-size: 48px;
-	line-height: 52px;
-	letter-spacing: -1px;
-}
-
-@mixin type-heading-medium {
-	color: var(--heading-text-color);
-	font-weight: 300;
-	font-size: 28px;
-}
-
-@mixin type-heading-small {
-	color: var(--heading-text-color);
-	font-size: 18px;
-}
-
-@mixin type-item-title {
-	color: var(--heading-text-color);
-	font-weight: 400;
-	font-size: 15px;
-	line-height: 1.2;
-}
-
-@mixin type-item-title-dense {
-	color: var(--heading-text-color);
-	font-weight: 500;
-	font-size: 13px;
-	line-height: 1.1;
-}
-
-@mixin type-item-subtitle {
-	color: var(--subheading-text-color);
-	font-weight: 400;
-	font-size: 14px;
-	line-height: 1.2;
-}
-
-@mixin type-item-subtitle-dense {
-	color: var(--subheading-text-color);
-	font-weight: 500;
-	font-size: 13px;
-	line-height: 1.1;
-}
-
-@mixin type-label {
-	color: var(--heading-text-color);
-	font-size: 18px;
-}
-
-@mixin type-note {
-	color: var(--note-text-color);
-	font-size: 14px;
-	font-style: italic;
-}
-
-@mixin type-table-head {
-	font-weight: 500;
-}
-
-@mixin type-body-serif {
-	font-size: 16px;
-	font-family: var(--family-serif);
-	line-height: 32px;
-}
-
-@mixin type-body-sans {
-	font-size: 14px;
-	font-family: var(--family-sans-serif);
-	line-height: 26px;
-}
-
-@mixin type-card-title {
-	color: var(--heading-text-color);
-	font-weight: 500;
-	font-size: 1.25rem;
-	line-height: 2rem;
-	letter-spacing: 0.0125em;
-}
-
-@mixin type-card-subtitle {
-	color: var(--foreground-color-secondary);
-	font-weight: 400;
-	font-size: 0.875rem;
-	line-height: 1.375rem;
-	letter-spacing: 0.007em;
-}
-
-@mixin type-card-text {
-	font-weight: 400;
-	font-size: 0.875rem;
-	line-height: 1.375rem;
-	letter-spacing: 0.007em;
-}

src/styles/themes/_dark-mode.scss

@@ -1,6 +1,6 @@
 // Dark Mode
 @mixin dark-mode {
-	--background-color: var(--black);
+	--background-page: var(--black);
 }
 
 @media (prefers-color-scheme: dark) {

src/styles/themes/_default.scss

@@ -1,89 +1,83 @@
-/* stylelint-disable custom-property-empty-line-before, declaration-colon-space-after */
+/* stylelint-disable */
 body,
 .default-colors {
-	/* Global */
-	--brand: 										var(--blue-grey-900);
-	--accent: 										var(--blue-500);
-	--accent-light: 								var(--blue-50);
-	--accent-dark: 									var(--light-blue-800);
-	--action: 										var(--blue-grey-800);
-	--action-light: 								var(--blue-grey-50);
-	--action-dark: 									var(--light-blue-900);
-	--success: 										var(--green);
-	--success-light: 								var(--green-50);
-	--success-dark: 								var(--green-800);
-	--danger: 										var(--red);
-	--danger-light: 								var(--red-50);
-	--danger-dark: 									var(--red-800);
-	--warning: 										var(--orange);
-	--warning-dark: 								var(--orange-800);
-	--warning-light: 								var(--orange-50);
-	--foreground-color: 							var(--blue-grey-800);
-	--foreground-color-secondary: 					var(--blue-grey-300);
-	--foreground-color-tertiary: 					var(--blue-grey-100);
-	--background-color: 							var(--white);
-	--background-color-hover: 						var(--blue-grey-25);
-	--background-color-active:						var(--blue-grey-50);
-	--background-color-alt: 						var(--blue-grey-50);
-	--highlight: 									var(--off-white);
-	--heading-text-color:							var(--foreground-color);
-	--subheading-text-color:						var(--foreground-color-secondary);
+	--brand: var(--primary); // will be overriden with directus_settings.project_color
 
-	/* Inputs */
-	--input-foreground-color: 						var(--blue-grey-800);
-	--input-foreground-color-hover: 				var(--blue-grey-800);
-	--input-foreground-color-focus: 				var(--blue-grey-800);
-	--input-foreground-color-empty: 				var(--blue-grey-300);
-	--input-foreground-color-disabled: 				var(--blue-grey-200);
-	--input-background-color: 						var(--white);
-	--input-background-color-hover:					var(--white);
-	--input-background-color-focus:					var(--white);
-	--input-background-color-empty:					var(--white);
-	--input-background-color-disabled: 				var(--blue-grey-50);
-	--input-border-width: 							2px;
-	--input-border-radius: 							4px;
-	--input-border-color: 							var(--blue-grey-100);
-	--input-border-color-hover: 					var(--blue-grey-300);
-	--input-border-color-focus: 					var(--blue-grey-600);
-	--input-border-color-disabled: 					var(--blue-grey-100);
-	--input-padding: 								12px;
-	--input-height:									52px;
-	--input-action-color:							var(--blue-grey-300);
-	--input-action-color-hover:						var(--blue-grey-600);
-	--input-action-color-disabled:					var(--blue-grey-200);
+	--border-normal: #D6DFE2;
+	--border-normal-alt: #BDCCD2;
+	--border-subdued: #ECEFF1;
 
-	/* Buttons */
-	--button-border-width: 							var(--input-border-width);
-	--button-border-radius: 						var(--input-border-radius);
-	--button-primary-background-color: 				var(--blue-grey-900);
-	--button-primary-background-color-hover: 		var(--blue-grey-800);
-	--button-primary-background-color-disabled: 	var(--blue-grey-400);
-	--button-primary-background-color-activated: 	var(--off-black);
-	--button-primary-foreground-color: 				var(--white);
-	--button-primary-foreground-color-hover: 		var(--white);
-	--button-primary-foreground-color-disabled: 	var(--blue-grey-300);
-	--button-primary-foreground-color-activated: 	var(--white);
-	--button-secondary-background-color: 			var(--blue-grey-100);
-	--button-secondary-background-color-hover:  	var(--blue-grey-200);
-	--button-secondary-background-color-disabled: 	var(--blue-grey-50);
-	--button-secondary-foreground-color:			var(--white);
-	--button-secondary-foreground-color-hover: 		var(--blue-grey-600);
-	--button-secondary-foreground-color-disabled: 	var(--blue-grey-400);
+	--foreground-normal: #263238;
+	--foreground-subdued: #B0BEC5;
+	--foreground-inverted:#FFF;
 
-	/* Misc.
-	   Please try to use one of the variables above if applicable.
-	   Only add variables here if there's no other option
-	*/
-	--overlay-color: 								rgba(38, 50, 56, 0.75);
-	--divider-color:								var(--blue-grey-50);
-	--tooltip-foreground-color:                     var(--button-primary-foreground-color);
-	--tooltip-background-color:                     var(--button-primary-background-color-hover);
-	--tooltip-foreground-color-inverted:            var(--input-foreground-color);
-	--tooltip-background-color-inverted:            var(--button-secondary-background-color);
+	--background-normal: #ECEFF1;
+	--background-normal-alt: #DDE3E6;
+	--background-subdued: #F5F7F8;
+	--background-page: #FFF;
+	--background-inverted: #263238;
+
+	--module-background: #13181A;
+	--module-background-alt: #090C0D;
+	--module-icon: #607D8B;
+	--module-icon-alt: #FFF;
+
+	--primary-10: #EAF2FD;
+	--primary-25: #CBDFFB;
+	--primary-50: #97BFF6;
+	--primary-75: #63A0F1;
+	--primary: #2F80ED;
+	--primary-alt: #E9F4FE;
+	--primary-125: #2D6CC0;
+	--primary-150: #2A5992;
+	--primary-175: #284565;
+	--primary-190: #273A4A;
+
+	--secondary-10: #F5EEFC;
+	--secondary-25: #E6D3F7;
+	--secondary-50: #CCA7EF;
+	--secondary-75: #B47DE8;
+	--secondary: #9B51E0;
+	--secondary-alt: #F5EEFC;
+	--secondary-125: #7E49B6;
+	--secondary-150: #60418C;
+	--secondary-175: #433A62;
+	--secondary-190: #323549;
+
+	--success-10: #E9F7EF;
+	--success-25: #C9EBD7;
+	--success-50: #93D7AF;
+	--success-75: #5DC288;
+	--success: #27AE60;
+	--success-alt: #EAF7F0;
+	--success-125: #278F56;
+	--success-150: #26704C;
+	--success-175: #265142;
+	--success-190: #263E3C;
+
+	--warning-10: #FEF5ED;
+	--warning-25: #FCE5D2;
+	--warning-50: #F8CCA4;
+	--warning-75: #F5B377;
+	--warning: #F2994A;
+	--warning-alt: #FEF5ED;
+	--warning-125: #BF7F46;
+	--warning-150: #8C6541;
+	--warning-175: #594C3D;
+	--warning-190: #3A3C3A;
+
+	--danger-10: #FDEEEE;
+	--danger-25: #FAD5D5;
+	--danger-50: #F5ABAB;
+	--danger-75: #F08181;
+	--danger: #EB5757;
+	--danger-alt: #FDEFEF;
+	--danger-125: #BA4E4F;
+	--danger-150: #884448;
+	--danger-175: #573B40;
+	--danger-190: #3A363B;
 }
 
 .alt-colors {
-	--background-color:                             var(--background-color-alt);
-	--background-color-hover:                       #dde3e6;
-	--background-color-active:                      var(--blue-grey-100);
+	--background-subdued: var(--background-page);
 }

src/views/private/components/drawer-button/drawer-button.vue

@@ -40,11 +40,11 @@ export default defineComponent({
 	position: relative;
 	width: 100%;
 	height: 64px;
-	color: var(--foreground-color);
+	color: var(--foreground-normal);
 	transition: background-color var(--fast) var(--transition);
 
 	&:hover {
-		background-color: var(--background-color-hover);
+		background-color: var(--background-normal-alt);
 	}
 
 	.icon {

src/views/private/components/drawer-detail/drawer-detail.vue

@@ -47,15 +47,15 @@ export default defineComponent({
 		position: relative;
 		width: 100%;
 		height: 64px;
-		color: var(--foreground-color);
+		color: var(--foreground-normal);
 		transition: background-color var(--fast) var(--transition);
 
 		&:not(.open):hover {
-			background-color: var(--background-color-hover);
+			background-color: var(--background-normal-alt);
 		}
 
 		&.open {
-			background-color: var(--background-color-active);
+			background-color: var(--background-normal-alt);
 		}
 	}
 

src/views/private/components/header-bar-actions/header-bar-actions.vue

@@ -82,7 +82,7 @@ export default defineComponent({
 		height: 100%;
 		padding: inherit;
 		padding-left: 8px;
-		background-color: var(--background-color);
+		background-color: var(--background-page);
 
 		.expand {
 			transform: rotate(180deg);

src/views/private/components/header-bar/header-bar.vue

@@ -12,7 +12,7 @@
 			<slot name="headline" />
 			<div class="title">
 				<slot name="title:prepend" />
-				<h1>{{ title }}</h1>
+				<h1 class="type-title">{{ title }}</h1>
 				<slot name="title:append" />
 			</div>
 		</div>
@@ -68,7 +68,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '@/styles/mixins/breakpoint';
-@import '@/styles/mixins/type-styles';
 
 .header-bar {
 	position: sticky;
@@ -82,7 +81,7 @@ export default defineComponent({
 	height: 65px;
 	margin: 24px 0;
 	padding: 0 12px;
-	background-color: var(--background-color);
+	background-color: var(--background-page);
 	box-shadow: 0;
 	transition: box-shadow var(--medium) var(--transition);
 
@@ -114,7 +113,6 @@ export default defineComponent({
 
 		h1 {
 			flex-grow: 1;
-			@include type-title;
 		}
 	}
 

src/views/private/components/module-bar/module-bar.vue

@@ -2,7 +2,7 @@
 	<div class="module-bar">
 		<module-bar-logo />
 		<div class="modules">
-			<v-button v-for="module in _modules" :key="module.id" icon x-large :to="module.to">
+			<v-button v-for="module in _modules" :key="module.id" icon x-large :to="module.to" tile>
 				<v-icon :name="module.icon" />
 			</v-button>
 		</div>
@@ -42,7 +42,7 @@ export default defineComponent({
 	flex-direction: column;
 	width: 64px;
 	height: 100%;
-	background-color: #263238;
+	background-color: var(--module-background);
 
 	.modules {
 		flex-grow: 1;
@@ -51,7 +51,9 @@ export default defineComponent({
 	}
 
 	.v-button {
-		--v-button-color: var(--blue-grey-400);
+		--v-button-color: var(--module-icon);
+		--v-button-background-color: var(--module-background);
+		--v-button-background-color-activated: var(--module-background-alt);
 	}
 }
 </style>