refactor: wt-page-wrapper colors [WTEL-3946]

webitel · Nov 29, 2023 · 24c65cc · 24c65cc
1 parent 52948fd
commit 24c65cc
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 40 deletions.
diff --git a/docs/pages/webitel-ui/components/wt-page-wrapper/Readme.md b/docs/pages/webitel-ui/components/wt-page-wrapper/Readme.md
@@ -0,0 +1,20 @@
+<script setup>
+import Docs from './wt-page-wrapper-docs.vue';
+import ExamplePageWrapper from './examples/example-page-wrapper.vue';
+</script>
+
+# WtPageWrapper
+
+## Props
+::: raw
+<Docs />
+:::
+
+## Example Page Wrapper
+::: raw
+<ExamplePageWrapper />
+:::
+
+::: details Code
+<<< ./examples/example-page-wrapper.vue
+:::
diff --git a/docs/pages/webitel-ui/components/wt-page-wrapper/examples/example-page-wrapper.vue b/docs/pages/webitel-ui/components/wt-page-wrapper/examples/example-page-wrapper.vue
@@ -0,0 +1,21 @@
+<script setup>
+
+</script>
+
+<template>
+  <wt-page-wrapper>
+    <template #header>
+      <div style="height: 40px; background: lightblue;" />
+    </template>
+    <template #actions-panel>
+      <div style="height: 80px; background: lightblue;" />
+    </template>
+    <template #main>
+      <div style="width: 100%; height: 320px; background: lightblue;" />
+    </template>
+  </wt-page-wrapper>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/docs/pages/webitel-ui/components/wt-page-wrapper/wt-page-wrapper-docs.vue b/docs/pages/webitel-ui/components/wt-page-wrapper/wt-page-wrapper-docs.vue
@@ -1,43 +1,10 @@
 <template>
-  <section>
-    <h2>Page Wrapper</h2>
-    <article>
-      <div class="example-wrapper">
-        <wt-page-wrapper style="background: var(--page-bg-color);">
-          <template #header>
-            <div style="height: 40px; background: lightblue;" />
-          </template>
-          <template #actions-panel>
-            <div style="height: 80px; background: lightblue;" />
-          </template>
-          <template #main>
-            <div style="width: 100%; height: 320px; background: lightblue;" />
-          </template>
-        </wt-page-wrapper>
-      </div>
-      <pre><code
-          class="language-html"
->
-        &lt;wt-page-wrapper&gt;
-          &lt;template v-slot:header&gt;
-            &lt;wt-headline&gt;&lt;template v-slot:title>Wt Headline&lt;/template&gt;&lt;/wt-headline&gt;
-          &lt;/template&gt;
-          &lt;template v-slot:actions-panel&gt;
-            &lt;div style="height: 150px; background: lightblue;"&gt;&lt;/div&gt;
-          &lt;/template&gt;
-          &lt;template v-slot:main&gt;
-            &lt;div style="width: 100%; height: 500px; background: lightblue;"&gt;&lt;/div&gt;
-          &lt;/template&gt;
-        &lt;/wt-page-wrapper&gt;
-        </code></pre>
-    </article>
-    <component-props
-      :properties="properties"
-    />
-    <component-slots
-      :slots="slots"
-    />
-  </section>
+  <component-props
+    :properties="properties"
+  />
+  <component-slots
+    :slots="slots"
+  />
 </template>
 
 <script>

diff --git a/src/components/wt-page-wrapper/_variables.scss b/src/components/wt-page-wrapper/_variables.scss
@@ -2,4 +2,10 @@
   --page-wrapper-padding: var(--spacing-sm);
   --page-wrapper-section-padding: var(--spacing-sm);
   --page-wrapper-section-gap: var(--spacing-sm);
+
+  --wt-page-wrapper-background-color: var(--grey-lighten-5);
+}
+
+:root.theme--dark {
+  --wt-page-wrapper-background-color: var(--grey-darken-4);
 }
diff --git a/src/components/wt-page-wrapper/wt-page-wrapper.vue b/src/components/wt-page-wrapper/wt-page-wrapper.vue
@@ -49,7 +49,7 @@ export default {
   box-sizing: border-box;
   padding: var(--page-wrapper-section-padding);
   border-radius: var(--border-radius);
-  background: var(--main-color);
+  background: var(--wt-page-wrapper-background-color);
 }
 
 .wt-page-wrapper__main {