From 0234ca5101ae2ad94bcc27c01e482aa4d2e75d96 Mon Sep 17 00:00:00 2001
From: danielterletzkiy <danielterletzkiy@gmail.com>
Date: Mon, 31 Jul 2023 01:23:06 +0200
Subject: [PATCH] blur

---
 docs/.vitepress/config.ts         |  3 +++
 docs/.vitepress/theme/Layout.vue  |  4 +++-
 docs/components/Header.vue        |  3 +++
 docs/introduction/what.md         |  4 ++++
 src/App.vue                       |  9 +++++++--
 src/components/DWrapper.vue       |  6 +++++-
 src/components/button/DButton.vue |  3 ++-
 src/styles/directives/blur.scss   | 17 +++++++++++++++++
 src/styles/index.scss             |  1 +
 9 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 docs/introduction/what.md
 create mode 100644 src/styles/directives/blur.scss

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index de4bcf1..56d12cf 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -35,6 +35,9 @@ export default defineConfig({
         }
     },
     markdown: {
+        anchor: {
+
+        },
         config: (md) => {
 
         }
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index 6ed2967..be0b752 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -79,7 +79,9 @@ onMounted(() => {
           </d-accordion>
         </d-navigation-bar>
       </template>
-      <Content/>
+      <d-column class="pa-8">
+        <Content/>
+      </d-column>
       <template v-slot:footer>
         <d-divider/>
         <d-row justify="center">
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index f9b3b4f..1405077 100644
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -38,6 +38,9 @@ const appName = computed(() => name);
     text-decoration-color: var(--color-accent);
     text-underline-offset: 30px;
 
+    background: linear-gradient(to right, var(--color-primary),var(--color-error),var(--color-warning),var(--color-info));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
 }
 </style>
diff --git a/docs/introduction/what.md b/docs/introduction/what.md
new file mode 100644
index 0000000..b2cbdcd
--- /dev/null
+++ b/docs/introduction/what.md
@@ -0,0 +1,4 @@
+---
+outline: deep
+---
+# What is it?
diff --git a/src/App.vue b/src/App.vue
index 96ebd0e..88f2a03 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -72,9 +72,14 @@ const navOpen = ref(true);
           </d-button>
         </d-row>
       </d-column>
-      <d-column>
+      <d-column gap outlined>
+        <d-row gap>
+          <d-button v-for="color in Object.values(ThemeColorProperty)" :color="color">
+            {{ color }}
+          </d-button>
+        </d-row>
         <d-row gap>
-          <d-button v-for="color in Object.values(ThemeColorProperty)" :color="color" elevation="4">
+          <d-button v-for="color in Object.values(ThemeColorProperty)" :color="color" flat>
             {{ color }}
           </d-button>
         </d-row>
diff --git a/src/components/DWrapper.vue b/src/components/DWrapper.vue
index f8fb937..a907d0c 100644
--- a/src/components/DWrapper.vue
+++ b/src/components/DWrapper.vue
@@ -56,13 +56,17 @@ const glowClasses = computed(() => {
 })
 
 const blurClasses = computed(() => {
+  const active = checkPropTrue(props.blur);
+  if(!active){
+    return {};
+  }
   const disabled = typeof props.blur === "object" && props.blur.disabled;
   if (disabled) {
     return {}
   }
   const blurAmount = (typeof props.blur === "object" && props.blur.amount) || BlurAmount.medium;
   return {
-    blur: checkPropTrue(props.blur),
+    blur: active,
     [`blur--${blurAmount}`]: blurAmount,
   }
 })
diff --git a/src/components/button/DButton.vue b/src/components/button/DButton.vue
index ae867e1..6896f29 100644
--- a/src/components/button/DButton.vue
+++ b/src/components/button/DButton.vue
@@ -1,7 +1,7 @@
 <template>
   <DWrapper ref="wrapper" root-tag="button" :classes="['d-button', size, {filled, block, glow}]"
             v-bind="{...$props, ...$attrs}"
-            @click.capture="$emit('click')">
+            @click.capture="$emit('click')" :elevation="typeof $props.glow === 'undefined' && !filled && !flat ? 2 : 0">
     <span class="d-button__content" v-ripple>
       <span class="prefix" v-if="!!$slots.prefix">
         <slot name="prefix"></slot>
@@ -33,6 +33,7 @@ import {Size} from "../../types/components/DButton";
 defineEmits(['click'])
 
 defineProps({
+  flat: {type: Boolean},
   filled: {type: Boolean},
   block: {type: Boolean},
   size: {type: Object as PropType<Size>, default: Size.regular},
diff --git a/src/styles/directives/blur.scss b/src/styles/directives/blur.scss
new file mode 100644
index 0000000..71d24ac
--- /dev/null
+++ b/src/styles/directives/blur.scss
@@ -0,0 +1,17 @@
+@import "../variables";
+
+.dark {
+  .blur {
+    background: color-mix(in srgb, var(--sheet-card), transparent 35%) !important;
+    &--low{
+      backdrop-filter: blur(2px);
+    }
+    &--medium{
+      backdrop-filter: blur(5px);
+    }
+    &--strong{
+      backdrop-filter: blur(10px);
+    }
+  }
+}
+
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 24ac0b6..d2a4b5e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -7,6 +7,7 @@
 @import "./directives/size";
 @import "./directives/flex";
 @import "./directives/glow";
+@import "./directives/blur";
 
 body, html {
   width: 100%;