Skip to content

Commit

Permalink
Merge pull request #28 from directus/connor/dark-mode-type-fixes
Browse files Browse the repository at this point in the history 
Add Dark Mode, Fix Types, Optimize Remote Storage, Style API Ref
  • Loading branch information
@connorwinston
connorwinston authored Sep 20, 2024
2 parents 6e8bfd1 + 71912f4 commit 8095efd
Show file tree
Hide file tree
Showing 45 changed files with 1,674 additions and 1,248 deletions.
3 changes: 3 additions & 0 deletions app/app.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ export default defineAppConfig({
},
},
},
colorMode: {
enableSystem: true,
},
},
modalSettings: {
isModeSwitchingEnabled: false,
Expand Down
123 changes: 40 additions & 83 deletions app/assets/css/_vars.scss
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,58 @@
@use 'colors';
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Poppins:wght@400;500;600;700&display=swap');

:root {
--purple--light-3: #E0DAFF;
--purple--light-2: #C2B4FF;
--purple--light-1: #947CFF;
--purple: #6644ff;
--purple--dark-1: #4C2DDB;
--purple--dark-2: #201262;

--pink--light-3: #FFEBF8;
--pink--light-2: #FFD6F1;
--pink--light-1: #FFB8E7;
--pink: #ff99dd;
--pink--dark-1: #D064AC;
--pink--dark-2: #4F133B;

--blue--light-3: #DAEBFC;
--blue--light-2: #B3D7F9;
--blue--light-1: #8FC4F7;
--blue: #68B0F4;
--blue--dark-1: #5A93C8;
--blue--dark-2: #4B769B;

--green--light-3: #E6FAF5;
--green--light-2: #7FE3CA;
--green--light-1: #40D6B1;
--green: #01C897;
--green--dark-1: #08A582;
--green--dark-2: #17826D;
--font--body: 'IBM Plex Sans', sans-serif;
--font--header: 'Poppins', sans-serif;
--font--code: 'IBM Plex Mono', monospace;

--yellow--light-3: #FEF0D3;
--yellow--light-2: #FDE2A7;
--yellow--light-1: #FCD37B;
--yellow: #FBC54E;
--yellow--dark-1: #C8A34B;
--yellow--dark-2: #948049;
--width-md: 768px;
--width-lg: 1024px;
--width-xl: 1280px;
--width-2xl: 1440px;

--red--light-3: #FDEEF0;
--red--light-2: #F0A7B3;
--red--light-1: #EA7D8F;
--red: #E35169;
--red--dark-1: #B64C5F;
--red--dark-2: #884756;
--border-radius: 6px;

--typography-1: #19212C;
--typography-2: #8196B0;
--typography-3: #BECBDC;
--typography--dark-1: #FAFBFC;
--typography--dark--2: #F6F8FA;
--typography--dark--3: #ECF0F5;
--typography: var(--black);
--typography-subdued: color-mix(in hsl shorter hue, var(--black) 70%, var(--white) 30%);

--bg: white;
--bg-2: #F7FAFC;
--bg-3: #F0F4F9;
--bg--dark: #18222F;
--bg--dark-2: #172940;
--bg--dark-3: #263B56;
--background: var(--white);
--background-subdued: color-mix(in hsl shorter hue, var(--white) 95%, var(--black) 5%);
--background-subtle: color-mix(in hsl shorter hue, var(--white) 90%, var(--black) 10%);

--border: #F0F4F9;
--border-2: #D3DAE4;
--border-3: #A2B5CD;

--font--body: 'IBM Plex Sans', sans-serif;
--font--header: 'Poppins', sans-serif;
--font--code: 'IBM Plex Mono', monospace;
--border: color-mix(in hsl shorter hue, var(--white) 95%, var(--black) 5%);
--border-subdued: color-mix(in hsl shorter hue, var(--white) 90%, var(--black) 10%);
--border-subtle: color-mix(in hsl shorter hue, var(--white) 85%, var(--black) 15%);

--primary: var(--purple);
--primary--light: var(--purple--light-1);
--primary--dark: var(--purple--dark-1);
--secondary: var(--pink);
--secondary--light: var(--pink--light-1);
--secondary--dark: var(--pink--dark-1);
--typography: var(--typography-1);
--typography--subdued: var(--typography-2);
--typography--subtle: var(--typography-3);
--background: var(--bg);
--background--subdued: var(--bg-2);
--background--subtle: var(--bg-3);

--area--dev-docs: var(--purple);
--area--api-reference: var(--green);
--area--tutorials: var(--pink);
--area--cloud: var(--blue);
--area--community: var(--red);
}

--width-md: 768px;
--width-lg: 1024px;
--width-xl: 1280px;
--width-2xl: 1440px;
--max-width: var(--width-2xl);
.dark-mode {
--typography: var(--white);
--typography-subdued: color-mix(in hsl shorter hue, var(--white) 70%, var(--black) 30%);

--sidebar-width: 280px;
--page-padding: 24px;
--border-radius: 6px;
--nav-spacing-under: 4rem;
--background: color-mix(in hsl shorter hue, var(--black) 94%, var(--white) 6%);
--background-subdued: color-mix(in hsl shorter hue, var(--black) 90%, var(--white) 10%);
--background-subtle: color-mix(in hsl shorter hue, var(--black) 85%, var(--white) 15%);

--border: color-mix(in hsl shorter hue, var(--black) 90%, var(--white) 10%);
--border-subdued: color-mix(in hsl shorter hue, var(--black) 85%, var(--white) 15%);
--border-subtle: color-mix(in hsl shorter hue, var(--black) 80%, var(--white) 20%);

--nav-font: 14px;
--nav-padding: 8px;
--primary: var(--purple-3);
--secondary: var(--pink-3);

--section--dev-docs: var(--purple);
--section--api-reference: var(--green);
--section--tutorials: var(--pink);
--section--cloud: var(--blue);
--section--community: var(--red);
--area--dev-docs: var(--purple-2);
--area--api-reference: var(--green-2);
--area--tutorials: var(--pink-2);
--area--cloud: var(--blue-2);
--area--community: var(--red-2);
}
79 changes: 79 additions & 0 deletions app/assets/css/colors.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
:root {
--white: #ffffff;
// --black: #091729;
// --black: #182940;
--black: #040710;
// --black: #000;

--purple-1: #E0DAFF;
--purple-2: #C2B4FF;
--purple-3: #947CFF;
--purple-4: #6644ff;
--purple-5: #4C2DDB;
--purple-6: #201262;
--purple: var(--purple-4);

--pink-1: #FFEBF8;
--pink-2: #FFD6F1;
--pink-3: #FFB8E7;
--pink-4: #ff99dd;
--pink-5: #D064AC;
--pink-6: #4F133B;
--pink: var(--pink-4);

--primary-1: var(--purple-1);
--primary-2: var(--purple-2);
--primary-3: var(--purple-3);
--primary-4: var(--purple-4);
--primary-5: var(--purple-5);
--primary-6: var(--purple-6);
--primary: var(--purple);

--secondary-1: var(--pink-1);
--secondary-2: var(--pink-2);
--secondary-3: var(--pink-3);
--secondary-4: var(--pink-4);
--secondary-5: var(--pink-5);
--secondary-6: var(--pink-6);
--secondary: var(--pink);

--blue-1: #DAEBFC;
--blue-2: #B3D7F9;
--blue-3: #8FC4F7;
--blue-4: #68B0F4;
--blue-5: #5A93C8;
--blue-6: #4B769B;
--blue: var(--blue-4);

--green-1: #E6FAF5;
--green-2: #7FE3CA;
--green-3: #40D6B1;
--green-4: #01C897;
--green-5: #08A582;
--green-6: #17826D;
--green: var(--green-4);

--yellow-1: #FEF0D3;
--yellow-2: #FDE2A7;
--yellow-3: #FCD37B;
--yellow-4: #FBC54E;
--yellow-5: #C8A34B;
--yellow-6: #948049;
--yellow: var(--yellow-4);

--red-1: #FDEEF0;
--red-2: #F0A7B3;
--red-3: #EA7D8F;
--red-4: #E35169;
--red-5: #B64C5F;
--red-6: #884756;
--red: var(--red-4);

--gray-1: #eceef2;
--gray-2: #d4d9e3;
--gray-3: #8292ae;
--gray-4: #637594;
--gray-5: #404b64;
--gray-6: #323948;
--gray: var(--gray-4);
}
18 changes: 10 additions & 8 deletions app/assets/css/main.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
@use 'reset';
@use 'vars';
@use 'colors';

body {
background-color: var(--background);
font-family: var(--font--body);
color: var(--typography-1);
color: var(--typography);
}

a {
Expand All @@ -28,8 +30,8 @@ pre {
}

.container {
max-width: var(--max-width);
padding: 0 var(--page-padding);
max-width: var(--width-2xl);
padding: 0 24px;
margin-left: auto;
margin-right: auto;
}
Expand Down Expand Up @@ -90,11 +92,11 @@ pre {
width: 100%;
}
code {
background: var(--background--subtle);
background: var(--background-subtle);
font-size: 0.8rem;
padding: 0rem 0.2rem;
border-radius: 4px;
border: 1px solid var(--border-2);
border: 1px solid var(--border-subdued);
}
pre code {
font-weight: normal;
Expand All @@ -104,7 +106,7 @@ pre {
border: none;
}
table, td, th {
border: 1px solid var(--border-2);
border: 1px solid var(--border-subdued);
border-collapse: collapse;
text-align: left;
}
Expand All @@ -125,8 +127,8 @@ pre {
}

.section-title {
color: var(--typography--subdued);
color: var(--typography-subdued);
text-transform: uppercase;
font-size: var(--nav-font);
font-size: 14px;
font-weight: 500;
}
78 changes: 34 additions & 44 deletions app/components/Button.vue
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,20 @@
<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
const props = defineProps({
type: {
type: String,
default: 'button',
validator(value) {
return ['a', 'button', 'submit', 'reset', 'span'].includes(value);
},
<script setup lang="ts">
const props = withDefaults(
defineProps<{
type?: 'a' | 'button' | 'submit' | 'reset' | 'span';
label: string;
color?: 'primary' | 'white' | 'outline-only';
size?: 'small' | 'medium';
href?: string;
target?: '_blank' | '_self' | '_parent' | '_top';
}>(),
{
type: 'button',
color: 'primary',
size: 'medium',
},
label: {
type: String,
required: true,
},
color: {
type: String,
default: 'primary',
validator(value) {
return ['primary', 'white', 'outline-only'].includes(value);
},
},
size: {
type: String,
default: 'medium',
validator(value) {
return ['small', 'medium'].includes(value);
},
},
href: {
type: String,
},
target: {
type: String,
validator(value) {
return ['_blank', '_self', '_parent', '_top'].includes(value);
},
},
});
);

const buttonProps = computed(() => {
if (props.href) {
Expand Down Expand Up @@ -78,23 +57,34 @@ const buttonProps = computed(() => {
.color-primary {
background: var(--primary);
color: white;
border-color: var(--primary--dark);
border-color: var(--primary);
&:hover {
background: var(--primary--dark);
border-color: var(--primary-5);
background: var(--primary-5);
}
}
.dark-mode .color-primary {
border-color: var(--primary-3);
&:hover {
border-color: var(--primary-4);
background: var(--primary-4);
}
}

.color-white {
background: white;
color: var(--typography-1);
border-color: var(--border-2);
background: var(--background-subdued);
color: var(--typography);
border-color: var(--border);
&:hover {
background: var(--border-2);
border-color: var(--border-subdued);
background: var(--background-subtle);
}
}
.color-outline-only {
border-color: var(--border-2);
border-color: var(--border-subdued);
&:hover {
border-color: var(--border-3);
border-color: var(--border-subtle);
background: var(--background-subdued);
}
}
</style>
Loading

0 comments on commit 8095efd

Please sign in to comment.