Skip to content

Commit

Permalink
Rework colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@stevebauman
stevebauman committed May 6, 2024
1 parent 8e3d5dd commit 499c7e1
Show file tree
Hide file tree
Showing 9 changed files with 32 additions and 32 deletions.
38 changes: 19 additions & 19 deletions assets/css/app.css
View file
Expand Up @@ -23,15 +23,15 @@

@layer base {
:root {
--color-ui-gray-50: theme('colors.gray.900');
--color-ui-gray-100: theme('colors.gray.800');
--color-ui-gray-200: theme('colors.gray.700');
--color-ui-gray-300: theme('colors.gray.600');
--color-ui-gray-400: theme('colors.gray.800');
--color-ui-gray-500: theme('colors.gray.400');
--color-ui-gray-600: theme('colors.gray.50');
--color-ui-gray-700: theme('colors.gray.100');
--color-ui-gray-800: theme('colors.gray.200');
--color-ui-gray-50: theme('colors.zinc.900');
--color-ui-gray-100: theme('colors.zinc.800');
--color-ui-gray-200: theme('colors.zinc.700');
--color-ui-gray-300: theme('colors.zinc.600');
--color-ui-gray-400: theme('colors.zinc.800');
--color-ui-gray-500: theme('colors.zinc.400');
--color-ui-gray-600: theme('colors.zinc.50');
--color-ui-gray-700: theme('colors.zinc.100');
--color-ui-gray-800: theme('colors.zinc.200');
--color-ui-gray-900: theme('colors.white');

--color-ui-violet-500: theme('colors.violet.800');
Expand All @@ -40,16 +40,16 @@
}

[color-scheme="dark"] {
--color-ui-gray-50: theme('colors.gray.50');
--color-ui-gray-100: theme('colors.gray.100');
--color-ui-gray-200: theme('colors.gray.200');
--color-ui-gray-300: theme('colors.gray.300');
--color-ui-gray-400: theme('colors.gray.400');
--color-ui-gray-500: theme('colors.gray.500');
--color-ui-gray-600: theme('colors.gray.600');
--color-ui-gray-700: theme('colors.gray.700');
--color-ui-gray-800: theme('colors.gray.800');
--color-ui-gray-900: theme('colors.gray.900');
--color-ui-gray-50: theme('colors.zinc.50');
--color-ui-gray-100: theme('colors.zinc.100');
--color-ui-gray-200: theme('colors.zinc.200');
--color-ui-gray-300: theme('colors.zinc.300');
--color-ui-gray-400: theme('colors.zinc.400');
--color-ui-gray-500: theme('colors.zinc.500');
--color-ui-gray-600: theme('colors.zinc.600');
--color-ui-gray-700: theme('colors.zinc.900');
--color-ui-gray-800: theme('colors.zinc.950');
--color-ui-gray-900: theme('colors.black');

--color-ui-violet-500: theme('colors.violet.500');
--color-ui-violet-600: theme('colors.violet.600');
Expand Down
2 changes: 1 addition & 1 deletion assets/css/content.css
View file
Expand Up @@ -51,7 +51,7 @@
}

hr {
@apply my-6;
@apply my-6 border-ui-gray-900;
}

img {
Expand Down
2 changes: 1 addition & 1 deletion assets/loading.html
View file
Expand Up @@ -36,7 +36,7 @@
scheme = 'dark';
}

document.getElementById('loader').style.backgroundColor = scheme === 'dark' ? '#374151' : 'white';
document.getElementById('loader').style.backgroundColor = scheme === 'dark' ? '#09090B' : 'white';
</script>

<style>
Expand Down
2 changes: 1 addition & 1 deletion components/Canvas.vue
View file
Expand Up @@ -8,7 +8,7 @@
:resize="resize"
@resizemove="onResize"
>
<div class="absolute inset-0 z-[2] w-full h-full bg-overlay pointer-events-none"></div>
<div class="absolute inset-0 z-[2] w-full h-full pointer-events-none"></div>

<div
v-bind="backgroundAttributes"
Expand Down
2 changes: 1 addition & 1 deletion components/FileDropdown.vue
View file
Expand Up @@ -2,7 +2,7 @@
<TDropdown
v-bind="$attrs"
:classes="{
button: 'block px-4 py-1.5 text-sm font-semibold active:bg-ui-violet-900 text-white transition duration-100 ease-in-out bg-ui-violet-500 hover:bg-ui-violet-600 focus:outline-none focus:ring-0 disabled:opacity-50 disabled:cursor-not-allowed',
button: 'block px-4 py-1.5 text-sm active:bg-ui-gray-900 text-ui-gray-100 transition duration-100 ease-in-out bg-ui-gray-800 hover:bg-ui-gray-900 focus:outline-none focus:ring-0 disabled:opacity-50 disabled:cursor-not-allowed',
wrapper: 'inline-flex flex-col',
dropdownWrapper: 'relative z-30 bg-ui-gray-700',
dropdown:
Expand Down
2 changes: 1 addition & 1 deletion components/FormDivider.vue
View file
@@ -1,6 +1,6 @@
<template>
<div
class="overflow-hidden text-xs font-semibold tracking-widest text-center uppercase text-ui-gray-100 bg-ui-gray-600 rounded py-1"
class="overflow-hidden text-xs font-semibold tracking-widest text-center uppercase text-ui-gray-100 bg-ui-gray-800 rounded py-1"
>
{{ title }}
</div>
Expand Down
8 changes: 4 additions & 4 deletions components/Preview.vue
View file
@@ -1,5 +1,5 @@
<template>
<div class="relative bg-pattern bg-ui-gray-800">
<div class="relative bg-pattern bg-ui-gray-900">
<Hotkeys :shortcuts="['S']" @triggered="copyToClipboard" />

<ModalCustomBackground
Expand Down Expand Up @@ -33,7 +33,7 @@

<Dropdown
size="xs"
variant="primary"
variant="secondary"
:items="fileTypes"
dusk="button-export"
class="inline-flex rounded-lg shadow"
Expand All @@ -48,7 +48,7 @@
href="/buy"
class="shadow"
target="_blank"
variant="primary"
variant="secondary"
>
<ShoppingBagIcon class="w-4 h-4" />
<span class="hidden sm:inline"> Desktop App </span>
Expand All @@ -59,7 +59,7 @@
href="https://api.showcode.app/docs"
class="shadow"
target="_blank"
variant="primary"
variant="secondary"
>
<CodeIcon class="w-4 h-4" />
<span class="hidden sm:inline"> API </span>
Expand Down
2 changes: 1 addition & 1 deletion composables/usePreferencesStore.js
View file
Expand Up @@ -12,7 +12,7 @@ export const defaults = {
editorLanguage: 'php',
editorOrientation: 'left',
editorLightTheme: 'vs-light',
editorDarkTheme: 'oceanic-next',
editorDarkTheme: 'merbivore',
editorInitialValue: '<?php\n\n',

previewFontSize: 16,
Expand Down
6 changes: 3 additions & 3 deletions pages/index.vue
View file
Expand Up @@ -93,8 +93,8 @@
class="p-0.5 mx-2 rounded-lg text-ui-violet-500 focus:outline-none focus:ring-0"
>
<template #default="{ mode }">
<MoonIcon v-if="mode === 'dark'" />
<SunIcon v-else />
<MoonIcon v-if="mode === 'dark'" class="size-4" />
<SunIcon v-else class="size-4" />
</template>
</ToggleDarkMode>
</div>
Expand Down Expand Up @@ -368,7 +368,7 @@ body,
.bg-pattern {
background-position: 0.5% 0;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.25' fill-rule='evenodd'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.15' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.bg-overlay {
Expand Down

0 comments on commit 499c7e1

Please sign in to comment.