From 11acd304334b7d6fec683c5b7ae3ecd1263aea80 Mon Sep 17 00:00:00 2001 From: Dinh-Van Colomban Date: Tue, 26 Nov 2024 14:33:14 +0100 Subject: [PATCH] fix(theme): adjust glass color theme --- demo/components/DemoInputs.svelte | 2 +- src/lib/buttons/NeoButton.svelte | 11 +- src/lib/buttons/NeoButtonGroup.svelte | 16 +-- src/lib/cards/NeoCard.svelte | 2 +- src/lib/inputs/NeoInput.svelte | 2 +- src/lib/inputs/NeoTextarea.svelte | 2 +- src/lib/styles/common/colors.scss | 45 +++---- src/lib/styles/common/filters.scss | 17 +++ src/lib/styles/common/shadows.scss | 163 ++++++++++++++++++-------- src/lib/styles/mixin.scss | 13 ++ src/lib/styles/theme.scss | 28 +++-- 11 files changed, 190 insertions(+), 111 deletions(-) create mode 100644 src/lib/styles/common/filters.scss diff --git a/demo/components/DemoInputs.svelte b/demo/components/DemoInputs.svelte index 8b820ac..bc73dc5 100644 --- a/demo/components/DemoInputs.svelte +++ b/demo/components/DemoInputs.svelte @@ -392,7 +392,7 @@ margin: 2rem 0; } - @media (width < 1200px) { + @media (width < 1400px) { .column.content { flex: 1 0 40%; max-width: 50%; diff --git a/src/lib/buttons/NeoButton.svelte b/src/lib/buttons/NeoButton.svelte index 437ca9f..d062504 100644 --- a/src/lib/buttons/NeoButton.svelte +++ b/src/lib/buttons/NeoButton.svelte @@ -216,24 +216,19 @@ } &.glass { + @include mixin.glass; + background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color)); - box-shadow: var(--neo-glass-box-shadow-raised-3); backdrop-filter: var(--neo-blur-2) var(--neo-saturate-3); &:focus-visible { background-color: var(--neo-glass-background-color-focus); - box-shadow: var(--neo-glass-box-shadow-raised-2); backdrop-filter: var(--neo-blur-1) var(--neo-saturate-3); } &.pressed, &:active { - box-shadow: var(--neo-glass-box-shadow-inset-3); backdrop-filter: var(--neo-blur-0) var(--neo-saturate-2); - - &.shallow { - box-shadow: var(--neo-glass-box-shadow-flat); - } } &:disabled:not(.skeleton), @@ -253,12 +248,10 @@ &:hover:not(:active, &.pressed) { background-color: var(--neo-glass-background-color-hover); border-color: var(--neo-btn-border-color-hover, var(--neo-glass-border-color-hover)); - box-shadow: var(--neo-box-shadow-flat); backdrop-filter: var(--neo-blur-1) var(--neo-saturate-2); &.shallow { border-color: transparent; - box-shadow: var(--neo-glass-box-shadow-raised-2); } } } diff --git a/src/lib/buttons/NeoButtonGroup.svelte b/src/lib/buttons/NeoButtonGroup.svelte index 864280b..72480fc 100644 --- a/src/lib/buttons/NeoButtonGroup.svelte +++ b/src/lib/buttons/NeoButtonGroup.svelte @@ -134,7 +134,7 @@ border-color: transparent !important; } - &:not(.text, .flat, .glass) { + &:not(.text, .flat) { box-shadow: var(--neo-box-shadow-raised-3); } @@ -149,6 +149,8 @@ } &.glass { + @include mixin.glass; + background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color)); border-color: var( --neo-btn-border-color, @@ -156,18 +158,10 @@ ); backdrop-filter: var(--neo-blur-2) var(--neo-saturate-3); - &:not(.text, .flat) { - box-shadow: var(--neo-glass-box-shadow-raised-3); - } - :global(.neo-button) { background-color: transparent; backdrop-filter: none; } - - :global(.neo-button:not(:active, .pressed)) { - box-shadow: var(--neo-glass-box-shadow-flat); - } } :global(.neo-button) { @@ -227,10 +221,6 @@ box-shadow: var(--neo-box-shadow-raised-2); } - &.glass { - box-shadow: var(--neo-glass-box-shadow-raised-2); - } - :global(.neo-button.loading:active:not(.pressed)), :global(.neo-button:not(.flat, .text, :active, .pressed):hover) { box-shadow: var(--neo-box-shadow-inset-1); diff --git a/src/lib/cards/NeoCard.svelte b/src/lib/cards/NeoCard.svelte index 76e98b5..2666f1d 100644 --- a/src/lib/cards/NeoCard.svelte +++ b/src/lib/cards/NeoCard.svelte @@ -335,7 +335,7 @@ --neo-card-border-color, var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color) ); - backdrop-filter: var(--neo-card-glass-blur, var(--neo-blur-4) var(--neo-saturate-2)); + backdrop-filter: var(--neo-card-glass-blur, var(--neo-blur-3) var(--neo-saturate-2)); } &.start { diff --git a/src/lib/inputs/NeoInput.svelte b/src/lib/inputs/NeoInput.svelte index bfd1f1c..8c0a6b0 100644 --- a/src/lib/inputs/NeoInput.svelte +++ b/src/lib/inputs/NeoInput.svelte @@ -789,7 +789,7 @@ --neo-input-border-color, var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color) ); - backdrop-filter: var(--neo-input-glass-blur, var(--neo-blur-4) var(--neo-saturate-2)); + backdrop-filter: var(--neo-input-glass-blur, var(--neo-blur-3) var(--neo-saturate-2)); } &.validation { diff --git a/src/lib/inputs/NeoTextarea.svelte b/src/lib/inputs/NeoTextarea.svelte index e94dbb2..a1e2f95 100644 --- a/src/lib/inputs/NeoTextarea.svelte +++ b/src/lib/inputs/NeoTextarea.svelte @@ -775,7 +775,7 @@ --neo-textarea-border-color, var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color) ); - backdrop-filter: var(--neo-textarea-glass-blur, var(--neo-blur-4) var(--neo-saturate-2)); + backdrop-filter: var(--neo-textarea-glass-blur, var(--neo-blur-3) var(--neo-saturate-2)); } &.validation { diff --git a/src/lib/styles/common/colors.scss b/src/lib/styles/common/colors.scss index 380fe02..93fce7b 100644 --- a/src/lib/styles/common/colors.scss +++ b/src/lib/styles/common/colors.scss @@ -2,11 +2,12 @@ /* ui color variables */ --neo-white: oklch(100% 0 0deg); --neo-white-soft-light: oklch(from var(--neo-white-soft) calc(l + 0.05) c h); - --neo-white-soft-light-10: oklch(from var(--neo-white-soft-light) l c h / 10%); + --neo-white-soft-light-30: oklch(from var(--neo-white-soft-light) l c h / 30%); + --neo-white-soft-light-60: oklch(from var(--neo-white-soft-light) l c h / 60%); --neo-white-soft: oklch(92.9% 0.009 279.682deg); - --neo-white-soft-5: oklch(from var(--neo-white-soft) l c h / 5%); - --neo-white-soft-8: oklch(from var(--neo-white-soft) l c h / 8%); - --neo-white-soft-10: oklch(from var(--neo-white-soft) l c h / 10%); + --neo-white-soft-20: oklch(from var(--neo-white-soft) l c h / 20%); + --neo-white-soft-22: oklch(from var(--neo-white-soft) l c h / 22%); + --neo-white-soft-25: oklch(from var(--neo-white-soft) l c h / 25%); --neo-white-soft-dark: oklch(from var(--neo-white-soft) calc(l - 0.075) c h); --neo-white-soft-dark-80: oklch(from var(--neo-white-soft-dark) l c h / 80%); --neo-black: oklch(0% 0 0deg); @@ -15,6 +16,7 @@ --neo-black-10: oklch(from var(--neo-black) l c h / 10%); --neo-black-20: oklch(from var(--neo-black) l c h / 20%); --neo-black-lighter: oklch(from var(--neo-black-soft) calc(l + 0.1) c h); + --neo-black-lighter-40: oklch(from var(--neo-black-lighter) l c h / 40%); --neo-black-light: oklch(from var(--neo-black-soft) calc(l + 0.05) c h); --neo-black-soft: oklch(33% 0 264.416deg); --neo-black-soft-dark: oklch(from var(--neo-black-soft) calc(l - 0.05) c h); @@ -88,12 +90,13 @@ --neo-scrollbar-color: var(--neo-grey-soft-60); /** glass colors */ - --neo-glass-background-color: var(--neo-white-soft-5); - --neo-glass-background-color-focus: var(--neo-white-soft-8); - --neo-glass-background-color-hover: var(--neo-white-soft-10); - --neo-glass-shadow-color: var(--neo-black-20); - --neo-glass-border-color: var(--neo-white-soft-light-10); - --neo-glass-border-color-hover: var(--neo-glass-background-color); + --neo-glass-background-color: var(--neo-white-soft-20); + --neo-glass-background-color-focus: var(--neo-white-soft-22); + --neo-glass-background-color-hover: var(--neo-white-soft-25); + --neo-glass-shadow-color-light: var(--neo-white-soft-light-60); + --neo-glass-shadow-color-dark: var(--neo-black-10); + --neo-glass-border-color: var(--neo-white-soft-light-60); + --neo-glass-border-color-hover: var(--neo-white-soft-light-30); --neo-glass-skeleton-color: var(--neo-grey-soft-60); /** dark primary colors */ @@ -139,22 +142,11 @@ --neo-dark-glass-background-color: var(--neo-black-5); --neo-dark-glass-background-color-focus: var(--neo-black-8); --neo-dark-glass-background-color-hover: var(--neo-black-10); - --neo-dark-glass-shadow-color: var(--neo-black-20); - --neo-dark-glass-border-color: var(--neo-white-soft-light-10); - --neo-dark-glass-border-color-hover: var(--neo-dark-glass-background-color); + --neo-dark-glass-shadow-color-light: var(--neo-black-lighter-40); + --neo-dark-glass-shadow-color-dark: var(--neo-black-20); + --neo-dark-glass-border-color: var(--neo-black-lighter-40); + --neo-dark-glass-border-color-hover: var(--neo-black-20); --neo-dark-glass-skeleton-color: var(--neo-grey-dark-80); - - /* override semantic color if dark mode is enabled */ - &[neo-theme='dark'] { - @include dark-theme; - } - - /* apply dark mode if not overridden */ - @media (prefers-color-scheme: dark) { - &:not([neo-theme='light']) { - @include dark-theme; - } - } } @mixin dark-theme { @@ -201,7 +193,8 @@ --neo-glass-background-color: var(--neo-dark-glass-background-color); --neo-glass-background-color-focus: var(--neo-dark-glass-background-color-focus); --neo-glass-background-color-hover: var(--neo-dark-glass-background-color-hover); - --neo-glass-shadow-color: var(--neo-dark-glass-shadow-color); + --neo-glass-shadow-color-light: var(--neo-dark-glass-shadow-color-light); + --neo-glass-shadow-color-dark: var(--neo-dark-glass-shadow-color-dark); --neo-glass-border-color: var(--neo-dark-glass-border-color); --neo-glass-border-color-hover: var(--neo-dark-glass-border-color-hover); --neo-glass-skeleton-color: var(--neo-dark-glass-skeleton-color); diff --git a/src/lib/styles/common/filters.scss b/src/lib/styles/common/filters.scss new file mode 100644 index 0000000..adc04dd --- /dev/null +++ b/src/lib/styles/common/filters.scss @@ -0,0 +1,17 @@ +@mixin filters() { + /* Blurs */ + --neo-blur-0: blur(0); + --neo-blur-1: blur(2px); + --neo-blur-2: blur(4px); + --neo-blur-3: blur(6px); + --neo-blur-4: blur(8px); + --neo-blur-5: blur(12px); + + /* Saturation */ + --neo-saturate: saturate(1); + --neo-saturate-1: saturate(1.1); + --neo-saturate-2: saturate(1.2); + --neo-saturate-3: saturate(1.3); + --neo-saturate-4: saturate(1.5); + --neo-saturate-5: saturate(2); +} diff --git a/src/lib/styles/common/shadows.scss b/src/lib/styles/common/shadows.scss index e6f6fdb..85f5fa6 100644 --- a/src/lib/styles/common/shadows.scss +++ b/src/lib/styles/common/shadows.scss @@ -1,20 +1,4 @@ @mixin shadows() { - /* Blurs */ - --neo-blur-0: blur(0); - --neo-blur-1: blur(3px); - --neo-blur-2: blur(6px); - --neo-blur-3: blur(12px); - --neo-blur-4: blur(18px); - --neo-blur-5: blur(24px); - - /* Saturation */ - --neo-saturate: saturate(1); - --neo-saturate-1: saturate(1.1); - --neo-saturate-2: saturate(1.2); - --neo-saturate-3: saturate(1.3); - --neo-saturate-4: saturate(1.5); - --neo-saturate-5: saturate(2); - @include box-shadows; &[neo-source='bottom-right'] { @@ -39,27 +23,34 @@ inset 0 0 0 0 var(--neo-shadow-color-dark), inset 0 0 0 0 var(--neo-shadow-color-light); - /* Base shadows raised top left */ + /* Base shadows raised */ $neo-shadow-raised-1: null; $neo-shadow-raised-2: null; $neo-shadow-raised-3: null; $neo-shadow-raised-4: null; $neo-shadow-raised-5: null; - /** Base shadows inset top left */ + /** Base shadows inset */ $neo-shadow-inset-1: null; $neo-shadow-inset-2: null; $neo-shadow-inset-3: null; $neo-shadow-inset-4: null; $neo-shadow-inset-5: null; - /** Glass shadows */ + /** Glass shadows raised */ $neo-glass-shadow-raised-1: null; $neo-glass-shadow-raised-2: null; $neo-glass-shadow-raised-3: null; $neo-glass-shadow-raised-4: null; $neo-glass-shadow-raised-5: null; + /** Glass shadows inset */ + $neo-glass-shadow-inset-1: null; + $neo-glass-shadow-inset-2: null; + $neo-glass-shadow-inset-3: null; + $neo-glass-shadow-inset-4: null; + $neo-glass-shadow-inset-5: null; + /** glass border-color */ $neo-glass-top-border-color: null; $neo-glass-right-border-color: null; @@ -68,7 +59,7 @@ /* Box shadows top left */ @if $direction == top-left { - /* Base shadows raised top left */ + /* Base shadows raised */ $neo-shadow-raised-1: 0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark), -0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light); @@ -85,7 +76,7 @@ 0.7rem 0.7rem 0.7rem var(--neo-shadow-color-dark), -0.55rem -0.55rem 0.7rem var(--neo-shadow-color-light); - /** Base shadows inset top left */ + /** Base shadows inset */ $neo-shadow-inset-1: inset 0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark), inset -0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light); @@ -102,12 +93,29 @@ inset 0.8rem 0.8rem 0.7rem var(--neo-shadow-color-dark), inset -0.6rem -0.6rem 0.8rem var(--neo-shadow-color-light); - /** Glass shadows */ - $neo-glass-shadow-raised-1: 0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-2: 0.1rem 0.1rem 0.3rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-3: 0.3rem 0.3rem 0.3rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-4: 0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-5: 0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color); + /** Glass shadows raised */ + $neo-glass-shadow-raised-1: 0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-2: 0.1rem 0.1rem 0.3rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-3: 0.3rem 0.3rem 0.3rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-4: 0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-5: 0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color-dark); + + /** Glass shadows inset */ + $neo-glass-shadow-inset-1: + inset 0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color-dark), + inset -0.08rem -0.08rem 0.1rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-2: + inset 0.15rem 0.15rem 0.3rem var(--neo-glass-shadow-color-dark), + inset -0.15rem -0.15rem 0.2rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-3: + inset 0.3rem 0.3rem 0.4rem var(--neo-glass-shadow-color-dark), + inset -0.2rem -0.2rem 0.3rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-4: + inset 0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color-dark), + inset -0.35rem -0.35rem 0.4rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-5: + inset 0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color-dark), + inset -0.6rem -0.6rem 0.8rem var(--neo-glass-shadow-color-light); /** glass border-color */ $neo-glass-top-border-color: var(--neo-glass-border-color); @@ -152,12 +160,29 @@ inset -0.8rem 0.8rem 0.7rem var(--neo-shadow-color-dark), inset 0.6rem -0.6rem 0.8rem var(--neo-shadow-color-light); - /** Glass shadows */ - $neo-glass-shadow-raised-1: -0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-2: -0.1rem 0.1rem 0.3rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-3: -0.3rem 0.3rem 0.3rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-4: -0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-5: -0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color); + /** Glass shadows raised */ + $neo-glass-shadow-raised-1: -0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-2: -0.1rem 0.1rem 0.3rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-3: -0.3rem 0.3rem 0.3rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-4: -0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-5: -0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color-dark); + + /* Box shadows inset */ + $neo-glass-shadow-inset-1: + inset -0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color-dark), + inset 0.08rem -0.08rem 0.1rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-2: + inset -0.15rem 0.15rem 0.3rem var(--neo-glass-shadow-color-dark), + inset 0.15rem -0.15rem 0.2rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-3: + inset -0.3rem 0.3rem 0.4rem var(--neo-glass-shadow-color-dark), + inset 0.2rem -0.2rem 0.3rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-4: + inset -0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color-dark), + inset 0.35rem -0.35rem 0.4rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-5: + inset -0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color-dark), + inset 0.6rem -0.6rem 0.8rem var(--neo-glass-shadow-color-light); /** glass border-color */ $neo-glass-top-border-color: var(--neo-glass-border-color); @@ -202,12 +227,29 @@ inset -0.8rem -0.8rem 0.7rem var(--neo-shadow-color-dark), inset 0.6rem 0.6rem 0.8rem var(--neo-shadow-color-light); - /** Glass shadows */ - $neo-glass-shadow-raised-1: -0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-2: -0.1rem -0.1rem 0.3rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-3: -0.3rem -0.3rem 0.3rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-4: -0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-5: -0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color); + /** Glass shadows raised */ + $neo-glass-shadow-raised-1: -0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-2: -0.1rem -0.1rem 0.3rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-3: -0.3rem -0.3rem 0.3rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-4: -0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-5: -0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color-dark); + + /* Box shadows inset */ + $neo-glass-shadow-inset-1: + inset -0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color-dark), + inset 0.08rem 0.08rem 0.1rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-2: + inset -0.15rem -0.15rem 0.3rem var(--neo-glass-shadow-color-dark), + inset 0.15rem 0.15rem 0.2rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-3: + inset -0.3rem -0.3rem 0.4rem var(--neo-glass-shadow-color-dark), + inset 0.2rem 0.2rem 0.3rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-4: + inset -0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color-dark), + inset 0.35rem 0.35rem 0.4rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-5: + inset -0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color-dark), + inset 0.6rem 0.6rem 0.8rem var(--neo-glass-shadow-color-light); /** glass border-color */ $neo-glass-top-border-color: transparent; @@ -218,7 +260,7 @@ /* Box shadows bottom left */ @else if $direction == bottom-left { - /* Base shadows raised top left */ + /* Base shadows raised */ $neo-shadow-raised-1: 0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark), -0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light); @@ -235,7 +277,7 @@ 0.7rem -0.7rem 0.7rem var(--neo-shadow-color-dark), -0.55rem 0.55rem 0.7rem var(--neo-shadow-color-light); - /** Base shadows inset top left */ + /** Base shadows */ $neo-shadow-inset-1: inset 0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark), inset -0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light); @@ -252,12 +294,29 @@ inset 0.8rem -0.8rem 0.7rem var(--neo-shadow-color-dark), inset -0.6rem 0.6rem 0.8rem var(--neo-shadow-color-light); - /** Glass shadows */ - $neo-glass-shadow-raised-1: 0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-2: 0.1rem -0.1rem 0.3rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-3: 0.3rem -0.3rem 0.3rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-4: 0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color); - $neo-glass-shadow-raised-5: 0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color); + /** Glass shadows raised */ + $neo-glass-shadow-raised-1: 0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-2: 0.1rem -0.1rem 0.3rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-3: 0.3rem -0.3rem 0.3rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-4: 0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color-dark); + $neo-glass-shadow-raised-5: 0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color-dark); + + /** Base shadows inset */ + $neo-glass-shadow-inset-1: + inset 0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color-dark), + inset -0.08rem 0.08rem 0.1rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-2: + inset 0.15rem -0.15rem 0.3rem var(--neo-glass-shadow-color-dark), + inset -0.15rem 0.15rem 0.2rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-3: + inset 0.3rem -0.3rem 0.4rem var(--neo-glass-shadow-color-dark), + inset -0.2rem 0.2rem 0.3rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-4: + inset 0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color-dark), + inset -0.35rem 0.35rem 0.4rem var(--neo-glass-shadow-color-light); + $neo-glass-shadow-inset-5: + inset 0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color-dark), + inset -0.6rem 0.6rem 0.8rem var(--neo-glass-shadow-color-light); /** glass border-color */ $neo-glass-top-border-color: transparent; @@ -291,11 +350,11 @@ --neo-glass-box-shadow-raised-5: #{$neo-glass-shadow-raised-5}; /* Glass box shadows inset */ - --neo-glass-box-shadow-inset-1: var(--neo-box-shadow-inset-1); - --neo-glass-box-shadow-inset-2: var(--neo-box-shadow-inset-2); - --neo-glass-box-shadow-inset-3: var(--neo-box-shadow-inset-3); - --neo-glass-box-shadow-inset-4: var(--neo-box-shadow-inset-4); - --neo-glass-box-shadow-inset-5: var(--neo-box-shadow-inset-5); + --neo-glass-box-shadow-inset-1: #{$neo-glass-shadow-inset-1}; + --neo-glass-box-shadow-inset-2: #{$neo-glass-shadow-inset-2}; + --neo-glass-box-shadow-inset-3: #{$neo-glass-shadow-inset-3}; + --neo-glass-box-shadow-inset-4: #{$neo-glass-shadow-inset-4}; + --neo-glass-box-shadow-inset-5: #{$neo-glass-shadow-inset-5}; /** glass border-color */ --neo-glass-top-border-color: #{$neo-glass-top-border-color}; diff --git a/src/lib/styles/mixin.scss b/src/lib/styles/mixin.scss index 2439020..caf95f1 100644 --- a/src/lib/styles/mixin.scss +++ b/src/lib/styles/mixin.scss @@ -223,3 +223,16 @@ background-clip: border-box; } } + +@mixin glass() { + --neo-box-shadow-raised-5: var(--neo-glass-box-shadow-raised-5); + --neo-box-shadow-raised-4: var(--neo-glass-box-shadow-raised-4); + --neo-box-shadow-raised-3: var(--neo-glass-box-shadow-raised-3); + --neo-box-shadow-raised-2: var(--neo-glass-box-shadow-raised-2); + --neo-box-shadow-raised-1: var(--neo-glass-box-shadow-raised-1); + --neo-box-shadow-inset-1: var(--neo-glass-box-shadow-inset-1); + --neo-box-shadow-inset-2: var(--neo-glass-box-shadow-inset-2); + --neo-box-shadow-inset-3: var(--neo-glass-box-shadow-inset-3); + --neo-box-shadow-inset-4: var(--neo-glass-box-shadow-inset-4); + --neo-box-shadow-inset-5: var(--neo-glass-box-shadow-inset-5); +} diff --git a/src/lib/styles/theme.scss b/src/lib/styles/theme.scss index 397a3b0..9ed4bdb 100644 --- a/src/lib/styles/theme.scss +++ b/src/lib/styles/theme.scss @@ -2,19 +2,13 @@ @use 'src/lib/styles/common/colors' as colors; @use 'src/lib/styles/common/typography' as typography; @use 'src/lib/styles/common/shadows' as shadows; +@use 'src/lib/styles/common/filters' as filters; @use 'src/lib/styles/common/spacing' as spacing; @use 'src/lib/styles/common/utils' as utils; @use 'src/lib/styles/common/properties'; @mixin theme($root: neo-theme-root) { [#{$root}] { - @include z-index.z-index; - @include colors.colors; - @include typography.typography; - @include shadows.shadows; - @include spacing.spacing; - @include utils.utils; - color: var(--neo-text-color); font-family: var(--neo-font-family), sans-serif; line-height: var(--neo-line-height); @@ -23,9 +17,29 @@ /* touch highlight */ -webkit-tap-highlight-color: transparent; + @include utils.utils; + @include z-index.z-index; + @include typography.typography; + @include spacing.spacing; + @include filters.filters; + @include colors.colors; + @include shadows.shadows; + /* cursor highlight */ *::selection { background-color: var(--neo-text-highlight-color); } + + /* override semantic color if dark mode is enabled */ + &[neo-theme='dark'] { + @include colors.dark-theme; + } + + /* apply dark mode if not overridden */ + @media (prefers-color-scheme: dark) { + &:not([neo-theme='light']) { + @include colors.dark-theme; + } + } } }