Adds dark class and finish frost layer setup

apps/hub/app/components/FLC.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="frost-layers">
+    <div class="layer" style="--index: 1"></div>
+    <div class="layer" style="--index: 2"></div>
+    <div class="layer" style="--index: 3"></div>
+    <div class="layer" style="--index: 4"></div>
+    <div class="layer" style="--index: 5"></div>
+  </div>
+</template>
+
+<style lang="scss">
+.frost-layers {
+  --layers: 5;
+  --blur-contrast: 1.3;
+  --blur-size: 100;
+  --blur-brightness: 0.9;
+
+  --blur-max: 20;
+  --blur-start: calc(var(--blur-size) * (1 / 6));
+  --blur-add: calc(var(--blur-size) * (5 / 6));
+
+  position: fixed;
+  z-index: 10;
+  bottom: 0;
+  left: 0;
+
+  height: 15dvh;
+  height: calc(var(--blur-size) * 1px);
+  width: 100dvw;
+  //   pointer-events: none;
+
+  & > div {
+    position: absolute;
+    inset: 0;
+
+    --blur: calc(sin(((var(--layers) - var(--index)) / var(--layers)) * 90deg) * var(--blur-max));
+    --stop: calc(sin(((var(--index)) / var(--layers)) * 90deg) * var(--blur-add));
+
+    backdrop-filter: blur(calc(var(--blur) * 1px)) brightness(var(--blur-brightness))
+      contrast(var(--blur-contrast));
+    mask: linear-gradient(#0000, #000 0.5rem),
+      linear-gradient(
+        #fff calc(var(--blur-start) * 1%),
+        #0000 calc((var(--blur-start) + var(--stop)) * 1%)
+      );
+    transform: rotate(0.5turn);
+    mask-composite: intersect;
+  }
+}
+</style>

apps/hub/app/components/FrostLayer.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="frost-layers">
+    <div class="layer" style="--index: 1"></div>
+    <div class="layer" style="--index: 2"></div>
+    <div class="layer" style="--index: 3"></div>
+    <div class="layer" style="--index: 4"></div>
+    <div class="layer" style="--index: 5"></div>
+    <div class="layer" style="--index: 6"></div>
+  </div>
+</template>
+
+<style lang="scss">
+.layout:not(.dark) {
+  --blur-contrast: 1.9;
+  --blur-brightness: 0.81;
+}
+
+.layout.dark .frost-layers {
+  --blur-contrast: 1.12;
+  --blur-brightness: 1.2;
+}
+
+.frost-layers {
+  --layers: 5;
+
+  --blur-size: 150;
+
+  --blur-max: 20;
+  --blur-start: calc(var(--blur-size) * (1 / 6));
+  --blur-add: calc(var(--blur-size) * (5 / 6));
+
+  --blur-transition: 5%;
+
+  position: fixed;
+  z-index: 10;
+  bottom: 0;
+  left: 0;
+
+  height: calc(var(--blur-size) * 1px);
+  width: 100dvw;
+
+  pointer-events: none;
+
+  & > div {
+    position: absolute;
+    inset: 0;
+    transition: var(--slower);
+  }
+
+  & > div:nth-of-type(1) {
+    z-index: 2;
+    backdrop-filter: blur(1px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 1) 25%,
+      rgba(0, 0, 0, 1) 37.5%,
+      rgba(0, 0, 0, 0) 50%
+    );
+  }
+  & > div:nth-of-type(2) {
+    z-index: 3;
+    backdrop-filter: blur(2px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 25%,
+      rgba(0, 0, 0, 1) 37.5%,
+      rgba(0, 0, 0, 1) 50%,
+      rgba(0, 0, 0, 0) 62.5%
+    );
+  }
+  & > div:nth-of-type(3) {
+    z-index: 4;
+    backdrop-filter: blur(4px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 37.5%,
+      rgba(0, 0, 0, 1) 50%,
+      rgba(0, 0, 0, 1) 62.5%,
+      rgba(0, 0, 0, 0) 75%
+    );
+  }
+  & > div:nth-of-type(4) {
+    z-index: 5;
+    backdrop-filter: blur(8px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 50%,
+      rgba(0, 0, 0, 1) 62.5%,
+      rgba(0, 0, 0, 1) 75%,
+      rgba(0, 0, 0, 0) 87.5%
+    );
+  }
+  & > div:nth-of-type(5) {
+    z-index: 6;
+    backdrop-filter: blur(16px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 62.5%,
+      rgba(0, 0, 0, 1) 75%,
+      rgba(0, 0, 0, 1) 87.5%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+  & > div:nth-of-type(6) {
+    z-index: 7;
+    backdrop-filter: blur(32px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
+    mask: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 75%,
+      rgba(0, 0, 0, 1) 87.5%,
+      rgba(0, 0, 0, 1) 100%
+    );
+  }
+}
+</style>

apps/hub/app/components/IslandMenu.vue

@@ -3,10 +3,6 @@ import '@nobel/core/styles/main.scss'
 import { Button, ButtonGroup, IconHome, IconWidth, IconPaint, IconText } from '@nobel/core'
 
 const theme = useUmbra()
-
-onMounted(() => {
-  theme.apply()
-})
 </script>
 
 <template>

apps/hub/app/layouts/default.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { onKeyStroke } from '@vueuse/core'
 
-const classObject = reactive({
-  reveal: false,
+const theme = useUmbra()
+
+onMounted(() => {
+  theme.apply()
 })
 
+const reveal = ref(false)
+
 function toggleReveal() {
-  classObject.reveal = !classObject.reveal
+  reveal.value = !reveal.value
 }
 
 onKeyStroke('Escape', () => {
@@ -15,16 +19,15 @@ onKeyStroke('Escape', () => {
 </script>
 
 <template>
-  <div class="layout" :class="classObject">
+  <div
+    class="layout"
+    :class="{
+      reveal: reveal,
+      dark: theme.isDark,
+    }"
+  >
     <div class="burger" @click="toggleReveal" />
-    <div class="frost">
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
+    <FrostLayer />
     <div class="content-layer">
       <div class="vignet" @click="toggleReveal" />
       <main class="page">
@@ -175,108 +178,4 @@ onKeyStroke('Escape', () => {
   grid-area: content;
   background-color: var(--base-20);
 }
-
-.layout .frost {
-  --blur-contrast: 1.3;
-  --blur-brightness: 0.9;
-
-  position: fixed;
-  z-index: 10;
-  bottom: 0;
-  left: 0;
-
-  height: 15dvh;
-  width: 100dvw;
-  pointer-events: none;
-
-  & > div,
-  &::before,
-  &::after {
-    position: absolute;
-    inset: 0;
-  }
-  &::before {
-    content: '';
-    z-index: 1;
-    backdrop-filter: blur(0.5px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
-    mask: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 1) 12.5%,
-      rgba(0, 0, 0, 1) 25%,
-      rgba(0, 0, 0, 0) 37.5%
-    );
-  }
-  & > div:nth-of-type(1) {
-    z-index: 2;
-    backdrop-filter: blur(1px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
-    mask: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0) 12.5%,
-      rgba(0, 0, 0, 1) 25%,
-      rgba(0, 0, 0, 1) 37.5%,
-      rgba(0, 0, 0, 0) 50%
-    );
-  }
-  & > div:nth-of-type(2) {
-    z-index: 3;
-    backdrop-filter: blur(2px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
-    mask: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0) 25%,
-      rgba(0, 0, 0, 1) 37.5%,
-      rgba(0, 0, 0, 1) 50%,
-      rgba(0, 0, 0, 0) 62.5%
-    );
-  }
-  & > div:nth-of-type(3) {
-    z-index: 4;
-    backdrop-filter: blur(4px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
-    mask: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0) 37.5%,
-      rgba(0, 0, 0, 1) 50%,
-      rgba(0, 0, 0, 1) 62.5%,
-      rgba(0, 0, 0, 0) 75%
-    );
-  }
-  & > div:nth-of-type(4) {
-    z-index: 5;
-    backdrop-filter: blur(8px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
-    mask: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0) 50%,
-      rgba(0, 0, 0, 1) 62.5%,
-      rgba(0, 0, 0, 1) 75%,
-      rgba(0, 0, 0, 0) 87.5%
-    );
-  }
-  & > div:nth-of-type(5) {
-    z-index: 6;
-    backdrop-filter: blur(16px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
-    mask: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0) 62.5%,
-      rgba(0, 0, 0, 1) 75%,
-      rgba(0, 0, 0, 1) 87.5%,
-      rgba(0, 0, 0, 0) 100%
-    );
-  }
-  & > div:nth-of-type(6) {
-    z-index: 7;
-    backdrop-filter: blur(32px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
-    mask: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0) 75%,
-      rgba(0, 0, 0, 1) 87.5%,
-      rgba(0, 0, 0, 1) 100%
-    );
-  }
-  &::after {
-    content: '';
-    z-index: 8;
-    backdrop-filter: blur(64px) brightness(var(--blur-brightness)) contrast(var(--blur-contrast));
-    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%);
-  }
-}
 </style>

packages/richtext/components/RichText.vue

@@ -19,7 +19,14 @@ const contentEditor = useEditor({
     <p>Nuxt layers are a powerful feature that you can use to share and reuse Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.</p>
     <h3>THE RUBIK'S CUBE IS THE WORLD’S BEST SELLING PUZZLE TOY</h3>
     <p>Nuxt layers are a powerful feature that you can use to share and reuse Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.</p>
-  `,
+    <p>Nuxt layers are a powerful feature that you can use to share and reuse Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.</p>
+    <p>Nuxt layers are a powerful feature that you can use to share and reuse Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.</p>
+    <h2>THE RUBIK'S CUBE IS THE WORLD’S BEST SELLING PUZZLE TOY</h2>
+    <p>Nuxt layers are a powerful feature that you can use to share and reuse Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.</p>
+    <h3>THE RUBIK'S CUBE IS THE WORLD’S BEST SELLING PUZZLE TOY</h3>
+    <p>Nuxt layers are a powerful feature that you can use to share and reuse Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.</p>
+    <p>Nuxt layers are a powerful feature that you can use to share and reuse Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.</p>
+    `,
 })
 </script>