Merge pull request #39 from directus/connor/dark-mode-type-fixes

So Many Things

Author: connorwinston

.github/workflows/lint-app.yaml

@@ -14,6 +14,7 @@ concurrency:
 
 env:
   NODE_OPTIONS: --max_old_space_size=6144
+  NUXT_PUBLIC_PRODUCT_DIRECTUS_URL: https://product-team.directus.app
 
 jobs:
   app-lint:

.github/workflows/lint-oas.yaml

@@ -14,6 +14,7 @@ concurrency:
 
 env:
   NODE_OPTIONS: --max_old_space_size=6144
+  NUXT_PUBLIC_PRODUCT_DIRECTUS_URL: https://product-team.directus.app
 
 jobs:
   oas-lint:

.github/workflows/typecheck.yaml

@@ -14,6 +14,7 @@ concurrency:
 
 env:
   NODE_OPTIONS: --max_old_space_size=6144
+  NUXT_PUBLIC_PRODUCT_DIRECTUS_URL: https://product-team.directus.app
 
 jobs:
   typecheck:
@@ -28,3 +29,4 @@ jobs:
 
       - name: Run Typechecker
         run: pnpm typecheck
+

app/assets/css/_vars.scss

@@ -35,7 +35,7 @@
 	--area--community: var(--red);
 }
 
-.dark-mode {
+.dark {
 	--typography: var(--white);
 	--typography-subdued: color-mix(in hsl shorter hue, var(--white) 70%, var(--black) 30%);
 

app/assets/css/main.scss

@@ -6,6 +6,21 @@ body {
 	background-color: var(--background);
 	font-family: var(--font--body);
 	color: var(--typography);
+	max-width: 100vw;
+}
+
+.light {
+	color-scheme: light;
+}
+
+.dark {
+	color-scheme: dark;
+}
+
+html {
+	overflow: overlay;
+	scrollbar-color: var(--border-subtle) var(--background-subdued);
+	scrollbar-width: thin;
 }
 
 a {
@@ -34,6 +49,9 @@ pre {
 	padding: 0 24px;
 	margin-left: auto;
 	margin-right: auto;
+	@media (max-width: 768px) {
+		padding: 0 12px;
+	}
 }
 
 .container .container {
@@ -62,7 +80,7 @@ pre {
 			font-size: 1.1rem;
 		}
 	}
-	p, img, ul, ol, table, .TabsRoot {
+	p, img, ul, ol, .prose-table-wrapper, .TabsRoot {
 		margin-bottom: 1rem;
 	}
 	.box, .directus-cloud, .callout, .prose-pre {
@@ -132,3 +150,8 @@ pre {
 	font-size: 14px;
 	font-weight: 500;
 }
+
+hr {
+	border: 0;
+	border-top: 2px solid var(--border);
+}

app/assets/img/pink-cta-bg.svg

@@ -3,11 +3,13 @@
 const props = withDefaults(
 	defineProps<{
 		type?: 'a' | 'button' | 'submit' | 'reset' | 'span';
-		label: string;
+		label?: string;
 		color?: 'primary' | 'white' | 'outline-only';
 		size?: 'small' | 'medium';
 		href?: string;
 		target?: '_blank' | '_self' | '_parent' | '_top';
+		disabled?: boolean;
+		loading?: boolean;
 	}>(),
 	{
 		type: 'button',
@@ -21,31 +23,70 @@ const buttonProps = computed(() => {
 		return {
 			href: props.href,
 			target: props.target,
+			disabled: props.disabled || props.loading,
 		};
 	}
 
-	return {};
+	return {
+		disabled: props.disabled || props.loading,
+	};
 });
 </script>
 
 <template>
 	<component
 		:is="type"
 		v-bind="buttonProps"
-		:class="['button', `size-${size}`, `color-${color}`]"
+		:class="['button', `size-${size}`, `color-${color}`, { loading: loading }]"
 	>
-		{{ label }}
+		<template v-if="!loading">
+			{{ label }}
+		</template>
+		<slot v-if="!loading" />
+		<div v-else>
+			<p class="loading-text">
+				Loading
+			</p>
+			<div class="loading-icon">
+				<Icon name="svg-spinners:180-ring-with-bg" />
+			</div>
+		</div>
 	</component>
 </template>
 
 <style scoped lang="scss">
+.loading-text {
+	opacity: 0;
+}
+
+.loading-icon {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
 .button {
-	display: inline-block;
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	text-decoration: none;
 	border-radius: var(--border-radius);
 	border: 1px solid transparent;
 	font-weight: 500;
+	cursor: pointer;
+
+	&:disabled {
+		cursor: not-allowed;
+		opacity: 0.75;
+	}
 }
+
 .size-small {
 	font-size: 14px;
 	padding: 0.2rem 0.6rem;
@@ -55,17 +96,19 @@ const buttonProps = computed(() => {
 	padding: 0.25rem 0.75rem;
 }
 .color-primary {
-	background: var(--primary);
 	color: white;
+	background: var(--primary);
 	border-color: var(--primary);
-	&:hover {
+
+	&:not(:disabled):hover {
 		border-color: var(--primary-5);
 		background: var(--primary-5);
 	}
 }
+
 .dark-mode .color-primary {
 	border-color: var(--primary-3);
-	&:hover {
+	&:not(:disabled):hover {
 		border-color: var(--primary-4);
 		background: var(--primary-4);
 	}
@@ -75,14 +118,15 @@ const buttonProps = computed(() => {
 	background: var(--background-subdued);
 	color: var(--typography);
 	border-color: var(--border);
-	&:hover {
+	&:not(:disabled):hover {
 		border-color: var(--border-subdued);
 		background: var(--background-subtle);
 	}
 }
 .color-outline-only {
 	border-color: var(--border-subdued);
-	&:hover {
+	background: var(--background);
+	&:not(:disabled):hover {
 		border-color: var(--border-subtle);
 		background: var(--background-subdued);
 	}

app/assets/img/purple-cta-bg.svg

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const route = useRoute();
+</script>
+
+<template>
+	<div>
+		<HeaderBanner />
+		<HeaderHero v-if="route.path === '/' || route.path === '/getting-started/overview'" />
+		<HeaderHat v-else>
+			<slot name="mobile-nav" />
+		</HeaderHat>
+		<HeaderNav />
+		<slot />
+	</div>
+</template>