blur

docs/.vitepress/config.ts

@@ -35,6 +35,9 @@ export default defineConfig({
         }
     },
     markdown: {
+        anchor: {
+
+        },
         config: (md) => {
 
         }

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">

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>

docs/introduction/what.md

@@ -0,0 +1,4 @@
+---
+outline: deep
+---
+# What is it?

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>

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,
   }
 })

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},

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);
+    }
+  }
+}
+

src/styles/index.scss

@@ -7,6 +7,7 @@
 @import "./directives/size";
 @import "./directives/flex";
 @import "./directives/glow";
+@import "./directives/blur";
 
 body, html {
   width: 100%;