diff --git a/web/src/css/base.css b/web/src/css/base.css index 49e78ae..8ea1e10 100644 --- a/web/src/css/base.css +++ b/web/src/css/base.css @@ -2,18 +2,18 @@ /* BASIC STYLES */ /* ------------------------------------------------- */ :root { - background-color: var(--color-background-base); - color: var(--color-text-base); + background-color: var(--color-surface-500); + color: var(--color-text-on-surface); font-family: 'Noto Sans', Verdana, sans-serif; } a { - color: var(--color-link-base); + color: var(--color-text-for-links); text-decoration: underline; } a:visited { - color: var(--color-link-base); + color: var(--color-text-for-links); } a:hover { /* font-weight: 900; */ @@ -22,7 +22,7 @@ a:hover { /* ------------------------------------------------- */ /* ------------------------------------------------- */ -/* remove button style +/* buttons /* ------------------------------------------------- */ button { background: none; @@ -33,6 +33,28 @@ button { cursor: pointer; outline: inherit; } + +button, +a[role='button'] { + display: inline-flex; + align-items: center; + justify-content: center; + + cursor: pointer; + -webkit-user-select: none; + user-select: none; + + border-radius: 0.5rem; + + line-height: 1em; + font-weight: 600; + text-decoration-line: none; + + height: 2rem; + min-height: 2rem; + padding-inline: 0.75rem; + font-size: 0.875rem; +} /* ------------------------------------------------- */ /* smooth scrolling */ diff --git a/web/src/css/globals.css b/web/src/css/globals.css index 58c0595..f156fd6 100644 --- a/web/src/css/globals.css +++ b/web/src/css/globals.css @@ -2,59 +2,52 @@ /* GLOBAL CLASSES */ /* ------------------------------------------------- */ -.button { - display: inline-flex; - align-items: center; - justify-content: center; - - cursor: pointer; - -webkit-user-select: none; - user-select: none; - - border-radius: 0.5rem; - - line-height: 1em; - font-weight: 600; - text-decoration-line: none; - - height: 2rem; - min-height: 2rem; - padding-inline: 0.75rem; - font-size: 0.875rem; -} - .primary { - background-color: var(--color-background-primary); - color: var(--color-text-primary); - - &:hover { - background-color: var(--color-background-primary-100); - } + background-color: var(--color-primary-500); + color: var(--color-text-on-primary-500); +} +button.primary:hover, +a[role='button'].primary:hover { + background-color: var(--color-primary-600); +} +a[role='button'].primary:visited { + color: var(--color-text-on-primary-500); } .secondary { - background-color: var(--color-background-secondary); - color: var(--color-text-secondary); - - &:hover { - background-color: var(--color-background-secondary-100); - } + background-color: var(--color-secondary-500); + color: var(--color-text-on-secondary-500); +} +button.secondary:hover, +a[role='button'].secondary:hover { + background-color: var(--color-secondary-600); +} +a[role='button'].secondary:visited { + color: var(--color-text-on-secondary-500); } .success { - color: var(--color-text-success); - background-color: var(--color-background-success); + color: var(--color-text-on-success-500); + background-color: var(--color-success-500); +} +button.success:hover, +a[role='button'].success:hover { + background-color: var(--color-success-600); } -button.success:hover { - background-color: var(--color-background-success-hover); +a[role='button'].success:visited { + color: var(--color-text-on-success-500); } .error { - color: var(--color-text-error); - background-color: var(--color-background-error); + color: var(--color-text-on-error-500); + background-color: var(--color-error-500); +} +button.error:hover, +a[role='button'].error:hover { + background-color: var(--color-error-600); } -button.error:hover { - background-color: var(--color-background-error-hover); +a[role='button'].error:visited { + color: var(--color-text-on-error-500); } /* ------------------------------------------------- */ diff --git a/web/src/css/palette.css b/web/src/css/palette.css index 4d82062..1eb689f 100644 --- a/web/src/css/palette.css +++ b/web/src/css/palette.css @@ -4,35 +4,72 @@ /* Colors */ :root { - --color-text-base: white; - --color-background-base: hsl(231.43 15% 18%); - - --color-background-base-100: hsl(231.43 15% 16%); - --color-background-base-200: hsl(231.43 15% 16%); - --color-background-base-300: hsl(231.43 16% 14%); - - --color-text-primary: black; - --color-background-primary: hsl(325.52 100% 74%); - --color-text-primary-100: black; - --color-background-primary-100: hsl(325.52 100% 64%); - - --color-text-secondary: black; - --color-background-secondary: hsl(264.71 89% 78%); - --color-text-secondary-100: black; - --color-background-secondary-100: hsl(264.71 54% 67%); - - --color-link-base: white; - - --color-error: hsl(0 85.48% 62.99%); - --color-error-100: hsl(0 85.48% 52.99%); - --color-success: hsl(135.18 66.47% 56.04%); - --color-success-100: hsl(135.18 66.47% 46.04%); - --color-background-error: var(--color-error); - --color-background-error-hover: var(--color-error-100); - --color-background-success: var(--color-success); - --color-background-success-hover: var(--color-success-100); - --color-text-error: black; - --color-text-success: black; + --color-surface: 231.43 15%; + --color-surface-lightness: 18%; + --color-on-surface: 0 0%; + --color-on-surface-lightness: 100%; + + --color-lighness-direction: -1; + + --color-primary: 325.52 100%; + --color-primary-lightness: 74%; + --color-on-primary: 0 0%; + --color-on-primary-lightness: 0%; + + --color-secondary: 264.71 89%; + --color-secondary-lightness: 78%; + --color-on-secondary: 0 0%; + --color-on-secondary-lightness: 0%; + + --color-error: 0 85.48%; + --color-error-lightness: 62.99%; + --color-on-error: 0 0%; + --color-on-error-lightness: 0%; + + --color-success: 135.18 66.47%; + --color-success-lightness: 56.04%; + --color-on-success: 0 0%; + --color-on-success-lightness: 0%; + + --color-text-on-surface: hsl(var(--color-on-surface) var(--color-on-surface-lightness)); + --color-text-for-links: hsl(var(--color-on-surface) var(--color-on-surface-lightness)); + + --color-surface-500: hsl(var(--color-surface) var(--color-surface-lightness)); + --color-surface-600: hsl( + var(--color-surface) calc(var(--color-surface-lightness) + var(--color-lighness-direction) * 2%) + ); + --color-surface-700: hsl( + var(--color-surface) calc(var(--color-surface-lightness) + var(--color-lighness-direction) * 3%) + ); + --color-surface-800: hsl( + var(--color-surface) calc(var(--color-surface-lightness) + var(--color-lighness-direction) * 4%) + ); + + --color-primary-500: hsl(var(--color-primary) var(--color-primary-lightness)); + --color-primary-600: hsl( + var(--color-primary) calc(var(--color-primary-lightness) + var(--color-lighness-direction) * 10%) + ); + --color-text-on-primary-500: hsl(var(--color-on-primary) var(--color-on-primary-lightness)); + --color-text-on-primary-600: hsl(var(--color-on-primary) var(--color-on-primary-lightness)); + + --color-secondary-500: hsl(var(--color-secondary) var(--color-secondary-lightness)); + --color-secondary-600: hsl( + var(--color-secondary) calc(var(--color-secondary-lightness) + var(--color-lighness-direction) * 11%) + ); + --color-text-on-secondary-500: hsl(var(--color-on-secondary) var(--color-on-secondary-lightness)); + --color-text-on-secondary-600: hsl(var(--color-on-secondary) var(--color-on-secondary-lightness)); + + --color-error-500: hsl(var(--color-error) var(--color-error-lightness)); + --color-error-600: hsl(var(--color-error) calc(var(--color-error-lightness) + var(--color-lighness-direction) * 10%)); + --color-text-on-error-500: hsl(var(--color-on-error) var(--color-on-error-lightness)); + --color-text-on-error-600: hsl(var(--color-on-error) var(--color-on-error-lightness)); + + --color-success-500: hsl(var(--color-success) var(--color-success-lightness)); + --color-success-600: hsl( + var(--color-success) calc(var(--color-success-lightness) + var(--color-lighness-direction) * 10%) + ); + --color-text-on-success-500: hsl(var(--color-on-success) var(--color-on-success-lightness)); + --color-text-on-success-600: hsl(var(--color-on-success) var(--color-on-success-lightness)); } /* ------------------------------------------------- */ diff --git a/web/src/lib/components/jolly-roger/Feature.svelte b/web/src/lib/components/jolly-roger/Feature.svelte index 543c7fa..c4311bb 100644 --- a/web/src/lib/components/jolly-roger/Feature.svelte +++ b/web/src/lib/components/jolly-roger/Feature.svelte @@ -15,7 +15,7 @@ diff --git a/web/src/lib/components/modals/Modals.svelte b/web/src/lib/components/modals/Modals.svelte index 363770e..40deb14 100644 --- a/web/src/lib/components/modals/Modals.svelte +++ b/web/src/lib/components/modals/Modals.svelte @@ -99,7 +99,7 @@ } .modal { - background-color: var(--color-background-base-300); + background-color: var(--color-surface-800); border-radius: 1rem; padding: 1rem; diff --git a/web/src/lib/components/navigation/NavTabs.svelte b/web/src/lib/components/navigation/NavTabs.svelte index 41102b1..f34376b 100644 --- a/web/src/lib/components/navigation/NavTabs.svelte +++ b/web/src/lib/components/navigation/NavTabs.svelte @@ -18,7 +18,7 @@ margin: 0; list-style-type: none; padding: 8px 8px 0px 0px; - background-color: var(--color-background-base); - border-bottom: 4px solid var(--color-background-primary); + background-color: var(--color-surface-500); + border-bottom: 4px solid var(--color-primary-500); } diff --git a/web/src/lib/components/navigation/PageLink.svelte b/web/src/lib/components/navigation/PageLink.svelte index bddb00d..d4a2ab8 100644 --- a/web/src/lib/components/navigation/PageLink.svelte +++ b/web/src/lib/components/navigation/PageLink.svelte @@ -13,7 +13,7 @@ a { text-decoration: none; display: inline-block; - color: var(--color-text-base); + color: var(--color-text-on-surface); font-size: 0.875rem; border-top-left-radius: 8px; @@ -29,8 +29,8 @@ .current { font-weight: bold; - color: var(--color-text-primary); - background-color: var(--color-background-primary); + color: var(--color-text-on-primary-500); + background-color: var(--color-primary-500); pointer-events: none; } diff --git a/web/src/lib/components/prompts/PromptCard.svelte b/web/src/lib/components/prompts/PromptCard.svelte index 4f1c001..298bf95 100644 --- a/web/src/lib/components/prompts/PromptCard.svelte +++ b/web/src/lib/components/prompts/PromptCard.svelte @@ -14,15 +14,15 @@
Production-Ready Template To Build Decentralised Applications
Welcome to your !